@agorapulse/ui-components 20.1.7 → 20.1.9
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.9.tgz +0 -0
- package/fesm2022/agorapulse-ui-components-autocomplete.mjs +4 -2
- package/fesm2022/agorapulse-ui-components-autocomplete.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-nav-selector-testing.mjs +8 -4
- package/fesm2022/agorapulse-ui-components-nav-selector-testing.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs +5 -5
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-social-button.mjs +5 -6
- package/fesm2022/agorapulse-ui-components-social-button.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-tabs.mjs +122 -0
- package/fesm2022/agorapulse-ui-components-tabs.mjs.map +1 -0
- package/nav-selector/testing/index.d.ts +14 -2
- package/package.json +9 -5
- package/social-button/index.d.ts +6 -4
- package/tabs/index.d.ts +48 -0
- package/agorapulse-ui-components-20.1.7.tgz +0 -0
|
Binary file
|
|
@@ -12,6 +12,7 @@ import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
|
12
12
|
import * as i1 from '@angular/forms';
|
|
13
13
|
import { FormsModule } from '@angular/forms';
|
|
14
14
|
import { BehaviorSubject, skip, debounceTime, distinctUntilChanged, tap, filter, switchMap, fromEvent } from 'rxjs';
|
|
15
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
15
16
|
|
|
16
17
|
class AutocompleteComponent {
|
|
17
18
|
placeholder = 'Search...';
|
|
@@ -76,7 +77,7 @@ class AutocompleteComponent {
|
|
|
76
77
|
this.resultsLoadingSignal.set(false);
|
|
77
78
|
}
|
|
78
79
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
79
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AutocompleteComponent, isStandalone: true, selector: "ap-autocomplete", inputs: { placeholder: "placeholder", label: "label", inputId: "inputId", loadingText: "loadingText", notFoundText: "notFoundText", searchFn: "searchFn", trackByFn: "trackByFn", disabled: "disabled", optionLabel: "optionLabel", optionCaption: "optionCaption", optionImageUrl: "optionImageUrl", optionValue: "optionValue", optionTextTemplate: "optionTextTemplate" }, outputs: { selectOption: "selectOption" }, viewQueries: [{ propertyName: "formField", first: true, predicate: ["formField"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"input-autocomplete-wrapper\">\n <ap-form-field\n #formField\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin>\n <label [for]=\"inputId\">\n {{ label }}\n </label>\n <ap-input-group>\n <ap-symbol symbolId=\"search\" />\n <input\n apInput\n [id]=\"inputId\"\n [disabled]=\"disabledSignal()\"\n [placeholder]=\"placeholder\"\n [ngModel]=\"searchTermSignal()\"\n (ngModelChange)=\"searchTerm$.next($event)\" />\n </ap-input-group>\n </ap-form-field>\n <div class=\"search-results-wrapper\">\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n <div class=\"ap-autocomplete-search-results\">\n @if (resultsLoadingSignal()) {\n <div class=\"ap-autocomplete-search-results-loading\">\n <ap-loader [diameter]=\"30\" />\n <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n </div>\n } @else {\n @if (searchResultsSignal()?.length) {\n @for (option of searchResultsSignal(); track trackByFn($index, option)) {\n <div\n class=\"ap-autocomplete-search-results-item\"\n tabindex=\"0\"\n (keydown.enter)=\"onSelectOption(option)\"\n (click)=\"onSelectOption(option)\">\n @if (!optionTextTemplate) {\n @if (!optionLabel || !option[optionLabel]) {\n <div class=\"option\">\n <span\n class=\"option-item\"\n [title]=\"option\">\n {{ option }}\n </span>\n </div>\n }\n @if (optionLabel && option[optionLabel]) {\n <div\n class=\"option\"\n [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n @if (!optionLabel) {\n <span class=\"item\">\n {{ option }}\n </span>\n }\n @if (optionImageUrl) {\n <ap-avatar\n [size]=\"24\"\n [showInitials]=\"true\"\n [username]=\"optionLabel ? option[optionLabel] : option\"\n [profilePicture]=\"option[optionImageUrl]\" />\n }\n @if (optionLabel && option[optionLabel]) {\n <div class=\"texts\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n [title]=\"option[optionLabel]\">\n {{ option[optionLabel] }}\n </span>\n </div>\n @if (optionCaption && option[optionCaption]) {\n <span\n class=\"caption\"\n [title]=\"option[optionCaption]\">\n {{ option[optionCaption] }}\n </span>\n }\n </div>\n }\n </div>\n }\n } @else {\n <ng-container *ngTemplateOutlet=\"optionTextTemplate; context: { option: option }\" />\n }\n </div>\n }\n } @else {\n <div class=\"ap-autocomplete-search-results-not-found\">\n {{ notFoundText }}\n </div>\n }\n }\n </div>\n </ng-template>\n </div>\n</div>\n", styles: ["ap-autocomplete{display:block}ap-autocomplete .input-autocomplete-wrapper{display:flex;flex-direction:column}ap-autocomplete .search-results-wrapper{position:relative}.ap-autocomplete-search-results{width:100%;display:flex;flex-direction:column;border-radius:var(--ref-border-radius-sm);box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color);margin-top:var(--ref-spacing-xxxs);max-height:250px;overflow:auto}.ap-autocomplete-search-results-loading{display:flex;padding:var(--ref-spacing-sm) 0;flex-direction:column;justify-content:center;align-items:center;gap:var(--ref-spacing-xs)}.ap-autocomplete-search-results-loading .search-results-loading-label{font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80)}.ap-autocomplete-search-results-not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm);font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-autocomplete-search-results-item .option{display:flex;align-items:center;font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);color:var(--comp-select-one-line-text-color);line-height:var(--comp-select-one-line-text-line-height);font-family:var(--comp-select-one-line-text-font-family);gap:var(--ref-spacing-xs);min-height:24px}.ap-autocomplete-search-results-item .option .option-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item .option .texts{flex:1;overflow:auto}.ap-autocomplete-search-results-item .option .texts .first-line{display:flex}.ap-autocomplete-search-results-item .option .texts .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item .option.with-caption .texts{display:flex;flex-direction:column}.ap-autocomplete-search-results-item .option.with-caption .texts .label{color:var(--comp-select-two-line-title-text-color);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);font-weight:var(--comp-select-two-line-title-text-font-weight)}.ap-autocomplete-search-results-item .option.with-caption .texts .caption{color:var(--comp-select-two-line-caption-text-color);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);font-weight:var(--comp-select-two-line-caption-text-font-weight);display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item:hover{cursor:pointer;background-color:var(--ref-color-electric-blue-10)}.ap-autocomplete-search-results-item:active{background-color:var(--ref-color-electric-blue-20)}.ap-autocomplete-search-results-item:focus{background-color:var(--ref-color-electric-blue-20)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: FormFieldComponent, selector: "ap-form-field" }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }, { kind: "directive", type: InputDirective, selector: "[apInput]" }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
80
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: AutocompleteComponent, isStandalone: true, selector: "ap-autocomplete", inputs: { placeholder: "placeholder", label: "label", inputId: "inputId", loadingText: "loadingText", notFoundText: "notFoundText", searchFn: "searchFn", trackByFn: "trackByFn", disabled: "disabled", optionLabel: "optionLabel", optionCaption: "optionCaption", optionImageUrl: "optionImageUrl", optionValue: "optionValue", optionTextTemplate: "optionTextTemplate" }, outputs: { selectOption: "selectOption" }, viewQueries: [{ propertyName: "formField", first: true, predicate: ["formField"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"input-autocomplete-wrapper\">\n <ap-form-field\n #formField\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin>\n <label [for]=\"inputId\">\n {{ label }}\n </label>\n <ap-input-group>\n <ap-symbol symbolId=\"search\" />\n <input\n apInput\n [id]=\"inputId\"\n [disabled]=\"disabledSignal()\"\n [placeholder]=\"placeholder\"\n [ngModel]=\"searchTermSignal()\"\n (ngModelChange)=\"searchTerm$.next($event)\" />\n </ap-input-group>\n </ap-form-field>\n <div class=\"search-results-wrapper\">\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n <div class=\"ap-autocomplete-search-results\">\n @if (resultsLoadingSignal()) {\n <div class=\"ap-autocomplete-search-results-loading\">\n <ap-loader [diameter]=\"30\" />\n <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n </div>\n } @else {\n @if (searchResultsSignal()?.length) {\n @for (option of searchResultsSignal(); track trackByFn($index, option)) {\n <div\n class=\"ap-autocomplete-search-results-item\"\n tabindex=\"0\"\n (keydown.enter)=\"onSelectOption(option)\"\n (click)=\"onSelectOption(option)\">\n @if (!optionTextTemplate) {\n @if (!optionLabel || !option[optionLabel]) {\n <div class=\"option\">\n <span\n class=\"option-item\"\n [title]=\"option\">\n {{ option }}\n </span>\n </div>\n }\n @if (optionLabel && option[optionLabel]) {\n <div\n class=\"option\"\n [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n @if (!optionLabel) {\n <span class=\"item\">\n {{ option }}\n </span>\n }\n @if (optionImageUrl) {\n <ap-avatar\n [size]=\"24\"\n [showInitials]=\"true\"\n [username]=\"optionLabel ? option[optionLabel] : option\"\n [profilePicture]=\"option[optionImageUrl]\" />\n }\n @if (optionLabel && option[optionLabel]) {\n <div class=\"texts\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n [title]=\"option[optionLabel]\">\n {{ option[optionLabel] }}\n </span>\n </div>\n @if (optionCaption && option[optionCaption]) {\n <span\n class=\"caption\"\n [title]=\"option[optionCaption]\">\n {{ option[optionCaption] }}\n </span>\n }\n </div>\n }\n </div>\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\" />\n }\n </div>\n }\n } @else {\n <div class=\"ap-autocomplete-search-results-not-found\">\n {{ notFoundText }}\n </div>\n }\n }\n </div>\n </ng-template>\n </div>\n</div>\n", styles: ["ap-autocomplete{display:block}ap-autocomplete .input-autocomplete-wrapper{display:flex;flex-direction:column}ap-autocomplete .search-results-wrapper{position:relative}.ap-autocomplete-search-results{width:100%;display:flex;flex-direction:column;border-radius:var(--ref-border-radius-sm);box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color);margin-top:var(--ref-spacing-xxxs);max-height:250px;overflow:auto}.ap-autocomplete-search-results-loading{display:flex;padding:var(--ref-spacing-sm) 0;flex-direction:column;justify-content:center;align-items:center;gap:var(--ref-spacing-xs)}.ap-autocomplete-search-results-loading .search-results-loading-label{font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80)}.ap-autocomplete-search-results-not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm);font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-autocomplete-search-results-item .option{display:flex;align-items:center;font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);color:var(--comp-select-one-line-text-color);line-height:var(--comp-select-one-line-text-line-height);font-family:var(--comp-select-one-line-text-font-family);gap:var(--ref-spacing-xs);min-height:24px}.ap-autocomplete-search-results-item .option .option-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item .option .texts{flex:1;overflow:auto}.ap-autocomplete-search-results-item .option .texts .first-line{display:flex}.ap-autocomplete-search-results-item .option .texts .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item .option.with-caption .texts{display:flex;flex-direction:column}.ap-autocomplete-search-results-item .option.with-caption .texts .label{color:var(--comp-select-two-line-title-text-color);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);font-weight:var(--comp-select-two-line-title-text-font-weight)}.ap-autocomplete-search-results-item .option.with-caption .texts .caption{color:var(--comp-select-two-line-caption-text-color);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);font-weight:var(--comp-select-two-line-caption-text-font-weight);display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item:hover{cursor:pointer;background-color:var(--ref-color-electric-blue-10)}.ap-autocomplete-search-results-item:active{background-color:var(--ref-color-electric-blue-20)}.ap-autocomplete-search-results-item:focus{background-color:var(--ref-color-electric-blue-20)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: FormFieldComponent, selector: "ap-form-field" }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }, { kind: "directive", type: InputDirective, selector: "[apInput]" }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
80
81
|
}
|
|
81
82
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
82
83
|
type: Component,
|
|
@@ -89,7 +90,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
89
90
|
InputDirective,
|
|
90
91
|
AvatarComponent,
|
|
91
92
|
OverlayModule,
|
|
92
|
-
|
|
93
|
+
NgTemplateOutlet
|
|
94
|
+
], encapsulation: ViewEncapsulation.None, template: "<div class=\"input-autocomplete-wrapper\">\n <ap-form-field\n #formField\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin>\n <label [for]=\"inputId\">\n {{ label }}\n </label>\n <ap-input-group>\n <ap-symbol symbolId=\"search\" />\n <input\n apInput\n [id]=\"inputId\"\n [disabled]=\"disabledSignal()\"\n [placeholder]=\"placeholder\"\n [ngModel]=\"searchTermSignal()\"\n (ngModelChange)=\"searchTerm$.next($event)\" />\n </ap-input-group>\n </ap-form-field>\n <div class=\"search-results-wrapper\">\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n <div class=\"ap-autocomplete-search-results\">\n @if (resultsLoadingSignal()) {\n <div class=\"ap-autocomplete-search-results-loading\">\n <ap-loader [diameter]=\"30\" />\n <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n </div>\n } @else {\n @if (searchResultsSignal()?.length) {\n @for (option of searchResultsSignal(); track trackByFn($index, option)) {\n <div\n class=\"ap-autocomplete-search-results-item\"\n tabindex=\"0\"\n (keydown.enter)=\"onSelectOption(option)\"\n (click)=\"onSelectOption(option)\">\n @if (!optionTextTemplate) {\n @if (!optionLabel || !option[optionLabel]) {\n <div class=\"option\">\n <span\n class=\"option-item\"\n [title]=\"option\">\n {{ option }}\n </span>\n </div>\n }\n @if (optionLabel && option[optionLabel]) {\n <div\n class=\"option\"\n [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n @if (!optionLabel) {\n <span class=\"item\">\n {{ option }}\n </span>\n }\n @if (optionImageUrl) {\n <ap-avatar\n [size]=\"24\"\n [showInitials]=\"true\"\n [username]=\"optionLabel ? option[optionLabel] : option\"\n [profilePicture]=\"option[optionImageUrl]\" />\n }\n @if (optionLabel && option[optionLabel]) {\n <div class=\"texts\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n [title]=\"option[optionLabel]\">\n {{ option[optionLabel] }}\n </span>\n </div>\n @if (optionCaption && option[optionCaption]) {\n <span\n class=\"caption\"\n [title]=\"option[optionCaption]\">\n {{ option[optionCaption] }}\n </span>\n }\n </div>\n }\n </div>\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\" />\n }\n </div>\n }\n } @else {\n <div class=\"ap-autocomplete-search-results-not-found\">\n {{ notFoundText }}\n </div>\n }\n }\n </div>\n </ng-template>\n </div>\n</div>\n", styles: ["ap-autocomplete{display:block}ap-autocomplete .input-autocomplete-wrapper{display:flex;flex-direction:column}ap-autocomplete .search-results-wrapper{position:relative}.ap-autocomplete-search-results{width:100%;display:flex;flex-direction:column;border-radius:var(--ref-border-radius-sm);box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color);margin-top:var(--ref-spacing-xxxs);max-height:250px;overflow:auto}.ap-autocomplete-search-results-loading{display:flex;padding:var(--ref-spacing-sm) 0;flex-direction:column;justify-content:center;align-items:center;gap:var(--ref-spacing-xs)}.ap-autocomplete-search-results-loading .search-results-loading-label{font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80)}.ap-autocomplete-search-results-not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm);font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-autocomplete-search-results-item .option{display:flex;align-items:center;font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);color:var(--comp-select-one-line-text-color);line-height:var(--comp-select-one-line-text-line-height);font-family:var(--comp-select-one-line-text-font-family);gap:var(--ref-spacing-xs);min-height:24px}.ap-autocomplete-search-results-item .option .option-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item .option .texts{flex:1;overflow:auto}.ap-autocomplete-search-results-item .option .texts .first-line{display:flex}.ap-autocomplete-search-results-item .option .texts .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item .option.with-caption .texts{display:flex;flex-direction:column}.ap-autocomplete-search-results-item .option.with-caption .texts .label{color:var(--comp-select-two-line-title-text-color);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);font-weight:var(--comp-select-two-line-title-text-font-weight)}.ap-autocomplete-search-results-item .option.with-caption .texts .caption{color:var(--comp-select-two-line-caption-text-color);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);font-weight:var(--comp-select-two-line-caption-text-font-weight);display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item:hover{cursor:pointer;background-color:var(--ref-color-electric-blue-10)}.ap-autocomplete-search-results-item:active{background-color:var(--ref-color-electric-blue-20)}.ap-autocomplete-search-results-item:focus{background-color:var(--ref-color-electric-blue-20)}\n"] }]
|
|
93
95
|
}], ctorParameters: () => [], propDecorators: { placeholder: [{
|
|
94
96
|
type: Input
|
|
95
97
|
}], label: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-autocomplete.mjs","sources":["../../../libs/ui-components/autocomplete/src/autocomplete.component.ts","../../../libs/ui-components/autocomplete/src/autocomplete.component.html","../../../libs/ui-components/autocomplete/src/agorapulse-ui-components-autocomplete.ts"],"sourcesContent":["import { LoaderComponent } from '@agorapulse/ui-animations';\nimport { AvatarComponent } from '@agorapulse/ui-components/avatar';\nimport { FormFieldComponent } from '@agorapulse/ui-components/form-field';\nimport { InputDirective } from '@agorapulse/ui-components/input';\nimport { InputGroupComponent } from '@agorapulse/ui-components/input-group';\nimport { SymbolComponent, SymbolRegistry, apSearch } from '@agorapulse/ui-symbol';\nimport { OverlayModule } from '@angular/cdk/overlay';\n\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n NgZone,\n Output,\n TemplateRef,\n ViewChild,\n ViewEncapsulation,\n inject,\n signal,\n} from '@angular/core';\nimport { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { BehaviorSubject, Observable, debounceTime, distinctUntilChanged, filter, fromEvent, skip, switchMap, tap } from 'rxjs';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-autocomplete',\n styleUrls: ['./autocomplete.component.scss'],\n imports: [\n SymbolComponent,\n FormFieldComponent,\n InputGroupComponent,\n FormsModule,\n LoaderComponent,\n InputDirective,\n AvatarComponent,\n OverlayModule,\n ],\n templateUrl: './autocomplete.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class AutocompleteComponent<T extends Record<string, unknown> | string> implements AfterViewInit {\n @Input() placeholder = 'Search...';\n @Input() label = '';\n @Input() inputId = '';\n @Input() loadingText = 'Loading Items';\n @Input() notFoundText = 'No result found';\n @Input({ required: true }) searchFn!: (term: string) => Observable<T[]>;\n @Input() trackByFn: (index: number, item: T) => T | T[keyof T] = (_: number, item: T) => item;\n @Input() set disabled(value: boolean) {\n this.disabledSignal.set(value);\n }\n @Input() optionLabel?: string;\n @Input() optionCaption?: string;\n @Input() optionImageUrl?: string;\n @Input() optionValue?: string;\n @Input() optionTextTemplate?: TemplateRef<{ option: T }>;\n\n @ViewChild('formField', { read: ElementRef }) formField!: ElementRef<FormFieldComponent>;\n\n @Output()\n selectOption: EventEmitter<unknown> = new EventEmitter<unknown>();\n\n readonly disabledSignal = signal(false);\n readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n readonly searchTerm$ = new BehaviorSubject<string>('');\n readonly searchTermSignal = toSignal(this.searchTerm$);\n readonly showResultsSignal = signal(false);\n readonly resultsLoadingSignal = signal(false);\n readonly searchResultsSignal = toSignal<any[]>(\n this.searchTerm$.pipe(\n skip(1),\n debounceTime(250),\n distinctUntilChanged(),\n tap(() => this.showResultsSignal.set(false)),\n filter(term => term.length > 0),\n tap(() => this.showResultsSignal.set(true)),\n tap(() => this.resultsLoadingSignal.set(true)),\n switchMap(term => {\n return this.searchFn(term);\n }),\n tap(() => this.resultsLoadingSignal.set(false))\n )\n );\n private readonly ngZone = inject(NgZone);\n private readonly el = inject(ElementRef);\n readonly inputWidthSignal = signal(0);\n\n constructor() {\n this.symbolRegistry.registerSymbols([apSearch]);\n this.ngZone.runOutsideAngular(() => {\n fromEvent(document, 'click')\n .pipe(takeUntilDestroyed())\n .subscribe(e => {\n const clickedInside = this.el.nativeElement.contains(e.target);\n if (!clickedInside) {\n this.ngZone.run(() => {\n this.resetAutocomplete();\n });\n }\n });\n });\n }\n\n ngAfterViewInit(): void {\n this.inputWidthSignal.set((this.formField.nativeElement as HTMLElement).offsetWidth);\n }\n\n onSelectOption(option: T) {\n if (typeof option !== 'string' && this.optionValue && option[this.optionValue]) {\n this.selectOption.emit(option[this.optionValue]);\n } else {\n this.selectOption.emit(option);\n }\n this.resetAutocomplete();\n }\n\n private resetAutocomplete() {\n this.searchTerm$.next('');\n this.showResultsSignal.set(false);\n this.resultsLoadingSignal.set(false);\n }\n}\n","<div class=\"input-autocomplete-wrapper\">\n <ap-form-field\n #formField\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin>\n <label [for]=\"inputId\">\n {{ label }}\n </label>\n <ap-input-group>\n <ap-symbol symbolId=\"search\" />\n <input\n apInput\n [id]=\"inputId\"\n [disabled]=\"disabledSignal()\"\n [placeholder]=\"placeholder\"\n [ngModel]=\"searchTermSignal()\"\n (ngModelChange)=\"searchTerm$.next($event)\" />\n </ap-input-group>\n </ap-form-field>\n <div class=\"search-results-wrapper\">\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n <div class=\"ap-autocomplete-search-results\">\n @if (resultsLoadingSignal()) {\n <div class=\"ap-autocomplete-search-results-loading\">\n <ap-loader [diameter]=\"30\" />\n <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n </div>\n } @else {\n @if (searchResultsSignal()?.length) {\n @for (option of searchResultsSignal(); track trackByFn($index, option)) {\n <div\n class=\"ap-autocomplete-search-results-item\"\n tabindex=\"0\"\n (keydown.enter)=\"onSelectOption(option)\"\n (click)=\"onSelectOption(option)\">\n @if (!optionTextTemplate) {\n @if (!optionLabel || !option[optionLabel]) {\n <div class=\"option\">\n <span\n class=\"option-item\"\n [title]=\"option\">\n {{ option }}\n </span>\n </div>\n }\n @if (optionLabel && option[optionLabel]) {\n <div\n class=\"option\"\n [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n @if (!optionLabel) {\n <span class=\"item\">\n {{ option }}\n </span>\n }\n @if (optionImageUrl) {\n <ap-avatar\n [size]=\"24\"\n [showInitials]=\"true\"\n [username]=\"optionLabel ? option[optionLabel] : option\"\n [profilePicture]=\"option[optionImageUrl]\" />\n }\n @if (optionLabel && option[optionLabel]) {\n <div class=\"texts\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n [title]=\"option[optionLabel]\">\n {{ option[optionLabel] }}\n </span>\n </div>\n @if (optionCaption && option[optionCaption]) {\n <span\n class=\"caption\"\n [title]=\"option[optionCaption]\">\n {{ option[optionCaption] }}\n </span>\n }\n </div>\n }\n </div>\n }\n } @else {\n <ng-container *ngTemplateOutlet=\"optionTextTemplate; context: { option: option }\" />\n }\n </div>\n }\n } @else {\n <div class=\"ap-autocomplete-search-results-not-found\">\n {{ notFoundText }}\n </div>\n }\n }\n </div>\n </ng-template>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-autocomplete.mjs","sources":["../../../libs/ui-components/autocomplete/src/autocomplete.component.ts","../../../libs/ui-components/autocomplete/src/autocomplete.component.html","../../../libs/ui-components/autocomplete/src/agorapulse-ui-components-autocomplete.ts"],"sourcesContent":["import { LoaderComponent } from '@agorapulse/ui-animations';\nimport { AvatarComponent } from '@agorapulse/ui-components/avatar';\nimport { FormFieldComponent } from '@agorapulse/ui-components/form-field';\nimport { InputDirective } from '@agorapulse/ui-components/input';\nimport { InputGroupComponent } from '@agorapulse/ui-components/input-group';\nimport { SymbolComponent, SymbolRegistry, apSearch } from '@agorapulse/ui-symbol';\nimport { OverlayModule } from '@angular/cdk/overlay';\n\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n NgZone,\n Output,\n TemplateRef,\n ViewChild,\n ViewEncapsulation,\n inject,\n signal,\n} from '@angular/core';\nimport { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { BehaviorSubject, Observable, debounceTime, distinctUntilChanged, filter, fromEvent, skip, switchMap, tap } from 'rxjs';\nimport { NgTemplateOutlet } from '@angular/common';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-autocomplete',\n styleUrls: ['./autocomplete.component.scss'],\n imports: [\n SymbolComponent,\n FormFieldComponent,\n InputGroupComponent,\n FormsModule,\n LoaderComponent,\n InputDirective,\n AvatarComponent,\n OverlayModule,\n NgTemplateOutlet\n ],\n templateUrl: './autocomplete.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class AutocompleteComponent<T extends Record<string, unknown> | string> implements AfterViewInit {\n @Input() placeholder = 'Search...';\n @Input() label = '';\n @Input() inputId = '';\n @Input() loadingText = 'Loading Items';\n @Input() notFoundText = 'No result found';\n @Input({ required: true }) searchFn!: (term: string) => Observable<T[]>;\n @Input() trackByFn: (index: number, item: T) => T | T[keyof T] = (_: number, item: T) => item;\n @Input() set disabled(value: boolean) {\n this.disabledSignal.set(value);\n }\n @Input() optionLabel?: string;\n @Input() optionCaption?: string;\n @Input() optionImageUrl?: string;\n @Input() optionValue?: string;\n @Input() optionTextTemplate?: TemplateRef<{ option: T }>;\n\n @ViewChild('formField', { read: ElementRef }) formField!: ElementRef<FormFieldComponent>;\n\n @Output()\n selectOption: EventEmitter<unknown> = new EventEmitter<unknown>();\n\n readonly disabledSignal = signal(false);\n readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n readonly searchTerm$ = new BehaviorSubject<string>('');\n readonly searchTermSignal = toSignal(this.searchTerm$);\n readonly showResultsSignal = signal(false);\n readonly resultsLoadingSignal = signal(false);\n readonly searchResultsSignal = toSignal<any[]>(\n this.searchTerm$.pipe(\n skip(1),\n debounceTime(250),\n distinctUntilChanged(),\n tap(() => this.showResultsSignal.set(false)),\n filter(term => term.length > 0),\n tap(() => this.showResultsSignal.set(true)),\n tap(() => this.resultsLoadingSignal.set(true)),\n switchMap(term => {\n return this.searchFn(term);\n }),\n tap(() => this.resultsLoadingSignal.set(false))\n )\n );\n private readonly ngZone = inject(NgZone);\n private readonly el = inject(ElementRef);\n readonly inputWidthSignal = signal(0);\n\n constructor() {\n this.symbolRegistry.registerSymbols([apSearch]);\n this.ngZone.runOutsideAngular(() => {\n fromEvent(document, 'click')\n .pipe(takeUntilDestroyed())\n .subscribe(e => {\n const clickedInside = this.el.nativeElement.contains(e.target);\n if (!clickedInside) {\n this.ngZone.run(() => {\n this.resetAutocomplete();\n });\n }\n });\n });\n }\n\n ngAfterViewInit(): void {\n this.inputWidthSignal.set((this.formField.nativeElement as HTMLElement).offsetWidth);\n }\n\n onSelectOption(option: T) {\n if (typeof option !== 'string' && this.optionValue && option[this.optionValue]) {\n this.selectOption.emit(option[this.optionValue]);\n } else {\n this.selectOption.emit(option);\n }\n this.resetAutocomplete();\n }\n\n private resetAutocomplete() {\n this.searchTerm$.next('');\n this.showResultsSignal.set(false);\n this.resultsLoadingSignal.set(false);\n }\n}\n","<div class=\"input-autocomplete-wrapper\">\n <ap-form-field\n #formField\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin>\n <label [for]=\"inputId\">\n {{ label }}\n </label>\n <ap-input-group>\n <ap-symbol symbolId=\"search\" />\n <input\n apInput\n [id]=\"inputId\"\n [disabled]=\"disabledSignal()\"\n [placeholder]=\"placeholder\"\n [ngModel]=\"searchTermSignal()\"\n (ngModelChange)=\"searchTerm$.next($event)\" />\n </ap-input-group>\n </ap-form-field>\n <div class=\"search-results-wrapper\">\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n <div class=\"ap-autocomplete-search-results\">\n @if (resultsLoadingSignal()) {\n <div class=\"ap-autocomplete-search-results-loading\">\n <ap-loader [diameter]=\"30\" />\n <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n </div>\n } @else {\n @if (searchResultsSignal()?.length) {\n @for (option of searchResultsSignal(); track trackByFn($index, option)) {\n <div\n class=\"ap-autocomplete-search-results-item\"\n tabindex=\"0\"\n (keydown.enter)=\"onSelectOption(option)\"\n (click)=\"onSelectOption(option)\">\n @if (!optionTextTemplate) {\n @if (!optionLabel || !option[optionLabel]) {\n <div class=\"option\">\n <span\n class=\"option-item\"\n [title]=\"option\">\n {{ option }}\n </span>\n </div>\n }\n @if (optionLabel && option[optionLabel]) {\n <div\n class=\"option\"\n [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n @if (!optionLabel) {\n <span class=\"item\">\n {{ option }}\n </span>\n }\n @if (optionImageUrl) {\n <ap-avatar\n [size]=\"24\"\n [showInitials]=\"true\"\n [username]=\"optionLabel ? option[optionLabel] : option\"\n [profilePicture]=\"option[optionImageUrl]\" />\n }\n @if (optionLabel && option[optionLabel]) {\n <div class=\"texts\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n [title]=\"option[optionLabel]\">\n {{ option[optionLabel] }}\n </span>\n </div>\n @if (optionCaption && option[optionCaption]) {\n <span\n class=\"caption\"\n [title]=\"option[optionCaption]\">\n {{ option[optionCaption] }}\n </span>\n }\n </div>\n }\n </div>\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\" />\n }\n </div>\n }\n } @else {\n <div class=\"ap-autocomplete-search-results-not-found\">\n {{ notFoundText }}\n </div>\n }\n }\n </div>\n </ng-template>\n </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
* @returns Array of leaf elements
|
|
22
22
|
*/
|
|
23
23
|
function generateLeafElements(options) {
|
|
24
|
-
const { count, uidPrefix = 'account', aliasPrefix = 'Account', startUid =
|
|
24
|
+
const { count, uidPrefix = 'account', aliasPrefix = 'Account', startUid = 1, networks = ['facebook', 'instagram', 'youtube', 'tiktok', 'linkedin', 'xPlus'], pictureUrlPattern = 'https://picsum.photos/150/150?random={uid}', disableReasonFrequency = 17, tokenInvalidFrequency = 7, featureLockedFrequency = 11, actions = [], details = [], } = options;
|
|
25
25
|
return Array.from({ length: count }, (_, index) => {
|
|
26
26
|
const uid = startUid + index;
|
|
27
27
|
const networkIndex = index % networks.length;
|
|
@@ -37,8 +37,10 @@ function generateLeafElements(options) {
|
|
|
37
37
|
disableReason: index > 0 && index % disableReasonFrequency === 0 ? 'The Reports feature is not supported for this account type' : null,
|
|
38
38
|
missingPermission: false,
|
|
39
39
|
network,
|
|
40
|
-
actions
|
|
41
|
-
details:
|
|
40
|
+
actions,
|
|
41
|
+
details: details.map(detail => {
|
|
42
|
+
return { ...detail, uid: 'detail_' + detail.uid + '_' + finalUid };
|
|
43
|
+
}),
|
|
42
44
|
tokenInvalid: index > 0 && index % tokenInvalidFrequency === 0,
|
|
43
45
|
featureLocked: index > 0 && index % featureLockedFrequency === 0,
|
|
44
46
|
type: 'LEAF',
|
|
@@ -51,7 +53,7 @@ function generateLeafElements(options) {
|
|
|
51
53
|
* @returns Array of group elements
|
|
52
54
|
*/
|
|
53
55
|
function generateGroupElements(options) {
|
|
54
|
-
const { count, startGroupId = 82529, categories = ['Test Group'], childrenCounts = [10], uidPrefix = 'group', childUidPrefix = 'account', childAliasPrefix = '', startChildUid = 99, childUidIncrement = 30, networks = ['facebook', 'instagram'], pictureUrlPattern = 'https://picsum.photos/150/150?random={uid}', disableReasonFrequency = 999, tokenInvalidFrequency = 999, featureLockedFrequency = 999, } = options;
|
|
56
|
+
const { count, startGroupId = 82529, categories = ['Test Group'], childrenCounts = [10], uidPrefix = 'group', childUidPrefix = 'account', childAliasPrefix = '', startChildUid = 99, childUidIncrement = 30, networks = ['facebook', 'instagram'], pictureUrlPattern = 'https://picsum.photos/150/150?random={uid}', disableReasonFrequency = 999, tokenInvalidFrequency = 999, featureLockedFrequency = 999, actions = [], details = [], } = options;
|
|
55
57
|
// Use a cache to avoid regenerating the same data
|
|
56
58
|
const cacheKey = JSON.stringify(options);
|
|
57
59
|
if (globalThis.__navSelectorMockCache?.[cacheKey]) {
|
|
@@ -76,6 +78,8 @@ function generateGroupElements(options) {
|
|
|
76
78
|
disableReasonFrequency,
|
|
77
79
|
tokenInvalidFrequency,
|
|
78
80
|
featureLockedFrequency,
|
|
81
|
+
actions,
|
|
82
|
+
details,
|
|
79
83
|
}),
|
|
80
84
|
folded: true,
|
|
81
85
|
type: 'GROUP',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-nav-selector-testing.mjs","sources":["../../../libs/ui-components/nav-selector/testing/src/nav-selector-entry.mock.ts","../../../libs/ui-components/nav-selector/testing/src/agorapulse-ui-components-nav-selector-testing.ts"],"sourcesContent":["/**\n * Usage Example:\n *\n * import { generateGroupElements, generateLeafElements } from './nav-selector-entry.mock';\n *\n * const mockNavSelectorEntries = [\n * // Generate 30 groups with children using default settings\n * ...generateGroupElements({\n * count: 30,\n * }),\n *\n * // Generate individual leaf elements without groups\n * ...generateLeafElements({\n * count: 1,\n * }),\n * ];\n */\n\n/**\n * Utility function to generate leaf type elements\n * @param options Configuration options for generating leaf elements\n * @returns Array of leaf elements\n */\nexport function generateLeafElements(options: {\n count: number;\n uidPrefix?: string;\n aliasPrefix?: string;\n startUid?: number;\n networks?: string[];\n pictureUrlPattern?: string;\n disableReasonFrequency?: number;\n tokenInvalidFrequency?: number;\n featureLockedFrequency?: number;\n}) {\n const {\n count,\n uidPrefix = 'account',\n aliasPrefix = 'Account',\n startUid =
|
|
1
|
+
{"version":3,"file":"agorapulse-ui-components-nav-selector-testing.mjs","sources":["../../../libs/ui-components/nav-selector/testing/src/nav-selector-entry.mock.ts","../../../libs/ui-components/nav-selector/testing/src/agorapulse-ui-components-nav-selector-testing.ts"],"sourcesContent":["import { NavSelectorLeafAction, NavSelectorLeafDetails } from '@agorapulse/ui-components/nav-selector';\n\n/**\n * Usage Example:\n *\n * import { generateGroupElements, generateLeafElements } from './nav-selector-entry.mock';\n *\n * const mockNavSelectorEntries = [\n * // Generate 30 groups with children using default settings\n * ...generateGroupElements({\n * count: 30,\n * }),\n *\n * // Generate individual leaf elements without groups\n * ...generateLeafElements({\n * count: 1,\n * }),\n * ];\n */\n\n/**\n * Utility function to generate leaf type elements\n * @param options Configuration options for generating leaf elements\n * @returns Array of leaf elements\n */\nexport function generateLeafElements(options: {\n count: number;\n uidPrefix?: string;\n aliasPrefix?: string;\n startUid?: number;\n networks?: string[];\n pictureUrlPattern?: string;\n disableReasonFrequency?: number;\n tokenInvalidFrequency?: number;\n featureLockedFrequency?: number;\n actions?: NavSelectorLeafAction[];\n details?: Partial<NavSelectorLeafDetails>[];\n}) {\n const {\n count,\n uidPrefix = 'account',\n aliasPrefix = 'Account',\n startUid = 1,\n networks = ['facebook', 'instagram', 'youtube', 'tiktok', 'linkedin', 'xPlus'],\n pictureUrlPattern = 'https://picsum.photos/150/150?random={uid}',\n disableReasonFrequency = 17,\n tokenInvalidFrequency = 7,\n featureLockedFrequency = 11,\n actions = [],\n details = [],\n } = options;\n\n return Array.from({ length: count }, (_, index) => {\n const uid = startUid + index;\n const networkIndex = index % networks.length;\n const network = networks[networkIndex];\n\n const finalUid = `${uidPrefix}_${uid}`;\n const finalAlias = `${aliasPrefix} ${uid}`;\n const finalPictureUrl = pictureUrlPattern.replace('{uid}', uid.toString());\n\n return {\n uid: finalUid,\n counter: null,\n alias: finalAlias,\n pictureUrl: finalPictureUrl,\n disableReason:\n index > 0 && index % disableReasonFrequency === 0 ? 'The Reports feature is not supported for this account type' : null,\n missingPermission: false,\n network,\n actions,\n details: details.map(detail => {\n return { ...detail, uid: 'detail_' + detail.uid + '_' + finalUid };\n }),\n tokenInvalid: index > 0 && index % tokenInvalidFrequency === 0,\n featureLocked: index > 0 && index % featureLockedFrequency === 0,\n type: 'LEAF' as const,\n };\n });\n}\n\n/**\n * Utility function to generate group type elements with children\n * @param options Configuration options for generating group elements\n * @returns Array of group elements\n */\nexport function generateGroupElements(options: {\n count: number;\n startGroupId?: number;\n categories?: string[];\n childrenCounts?: number[];\n uidPrefix?: string;\n childUidPrefix?: string;\n childAliasPrefix?: string;\n startChildUid?: number;\n childUidIncrement?: number;\n networks?: string[];\n pictureUrlPattern?: string;\n disableReasonFrequency?: number;\n tokenInvalidFrequency?: number;\n featureLockedFrequency?: number;\n actions?: NavSelectorLeafAction[];\n details?: Partial<NavSelectorLeafDetails>[];\n}) {\n const {\n count,\n startGroupId = 82529,\n categories = ['Test Group'],\n childrenCounts = [10],\n uidPrefix = 'group',\n childUidPrefix = 'account',\n childAliasPrefix = '',\n startChildUid = 99,\n childUidIncrement = 30,\n networks = ['facebook', 'instagram'],\n pictureUrlPattern = 'https://picsum.photos/150/150?random={uid}',\n disableReasonFrequency = 999,\n tokenInvalidFrequency = 999,\n featureLockedFrequency = 999,\n actions = [],\n details = [],\n } = options;\n\n // Use a cache to avoid regenerating the same data\n const cacheKey = JSON.stringify(options);\n if ((globalThis as any).__navSelectorMockCache?.[cacheKey]) {\n return (globalThis as any).__navSelectorMockCache[cacheKey];\n }\n\n const result = Array.from({ length: count }, (_, groupIndex) => {\n const groupId = startGroupId + groupIndex;\n // Reduce default children count to improve performance\n const childrenCount = Math.min(childrenCounts[groupIndex] || 5, 10);\n const startUid = startChildUid + groupIndex * childUidIncrement;\n const groupCategory = categories[groupIndex] || `Category ${groupIndex + 1}`;\n\n return {\n uid: `${uidPrefix}_${groupId}`,\n alias: groupCategory,\n children: generateLeafElements({\n count: childrenCount,\n uidPrefix: childUidPrefix,\n aliasPrefix: childAliasPrefix || groupCategory,\n startUid: startUid,\n networks,\n pictureUrlPattern,\n disableReasonFrequency,\n tokenInvalidFrequency,\n featureLockedFrequency,\n actions,\n details,\n }),\n folded: true,\n type: 'GROUP' as const,\n };\n });\n\n // Cache the result\n if (!(globalThis as any).__navSelectorMockCache) {\n (globalThis as any).__navSelectorMockCache = {};\n }\n (globalThis as any).__navSelectorMockCache[cacheKey] = result;\n\n return result;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1750,13 +1750,13 @@ class NavSelectorState {
|
|
|
1750
1750
|
onLeafToggleFolding(leaf) {
|
|
1751
1751
|
this.entries.update(entries => {
|
|
1752
1752
|
const options = this.getFoldingOptions();
|
|
1753
|
-
// Find all unfolded leaves and fold them first
|
|
1753
|
+
// Find all unfolded leaves except the clicked one and fold them first
|
|
1754
1754
|
let updatedEntries = entries;
|
|
1755
|
-
const unfoldedLeafUids = this.findUnfoldedLeafUids(entries);
|
|
1755
|
+
const unfoldedLeafUids = this.findUnfoldedLeafUids(entries).filter(uid => uid !== leaf.uid);
|
|
1756
1756
|
for (const uid of unfoldedLeafUids) {
|
|
1757
1757
|
updatedEntries = NavSelectorFolding.fold(updatedEntries, uid, options);
|
|
1758
1758
|
}
|
|
1759
|
-
// Then
|
|
1759
|
+
// Then toggle the clicked leaf
|
|
1760
1760
|
return NavSelectorFolding.toggleFolding(updatedEntries, leaf.uid, options);
|
|
1761
1761
|
});
|
|
1762
1762
|
}
|
|
@@ -2374,7 +2374,7 @@ class NavSelectorLeafComponent {
|
|
|
2374
2374
|
}
|
|
2375
2375
|
}
|
|
2376
2376
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavSelectorLeafComponent, deps: [{ token: i0.ElementRef }, { token: NavSelectorLeafPresenter }], target: i0.ɵɵFactoryTarget.Component });
|
|
2377
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: NavSelectorLeafComponent, isStandalone: true, selector: "ap-nav-selector-leaf", inputs: { leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, host: { attributes: { "role": "treeitem" }, listeners: { "keydown.arrowLeft": "fold($event)", "keydown.arrowRight": "unfold($event)" }, properties: { "class.minified": "!navSelectorLeafPresenter.expanded()" } }, providers: [withSymbols(apErrorFill, apFeatureLock, apChevronDown, apChevronUp, apMore), NavSelectorLeafPresenter], viewQueries: [{ propertyName: "aliasEl", first: true, predicate: ["alias"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorLeafPresenter.expanded()) {\n <div\n class=\"nav-selector-leaf\"\n apTooltipPosition=\"right\"\n [attr.aria-selected]=\"leaf().selected\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [class.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n [class.feature-locked]=\"leaf().displayFeatureLocked\"\n [class.selected]=\"leaf().selected\"\n [class.token-error]=\"leaf().displayTokenInvalid\"\n [class.disabled]=\"leaf().disabled\"\n [class.detail-selected]=\"leaf().detailSelected\"\n [class.actions-displayable]=\"leaf().actionsDisplayable && leaf().detailsDisplayable\"\n [class.details-displayable]=\"leaf().detailsDisplayable\"\n [apTreeNodeAccessibility]=\"leaf()\"\n (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n (focusin)=\"focused.set(true)\"\n (focusout)=\"focused.set(false)\"\n (click)=\"onClick($event)\">\n @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"leaf().uid\"\n [checked]=\"leaf().selected\"\n [aria-label]=\"leaf().alias\"\n [disabled]=\"!leaf().selectable\"\n (click)=\"eventStopper($event)\"\n (change)=\"onCheckboxToggle()\" />\n }\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n [network]=\"$any(leaf().network)\"\n [showInitials]=\"initial()\" />\n\n @if (leaf().startSymbolId || leaf().startDotColor) {\n <div class=\"start-elements\">\n @if (leaf().startSymbolId) {\n <ap-symbol\n size=\"sm\"\n color=\"grey-blue\"\n [symbolId]=\"leaf().startSymbolId\" />\n }\n @if (leaf().startDotColor) {\n <div\n class=\"start-dot\"\n [style.background-color]=\"leaf().startDotColor\"></div>\n }\n </div>\n }\n\n <span\n #alias\n class=\"caption\">\n {{ leaf().alias }}\n </span>\n\n <a\n class=\"standalone only-button\"\n role=\"button\"\n [attr.aria-label]=\"'Select only ' + leaf().alias\"\n [attr.tabindex]=\"leaf().accessibility.tabIndex\"\n (keydown.space)=\"selectOnly($event)\"\n (keydown.enter)=\"selectOnly($event)\"\n (click)=\"clickOnSelectOnly($event)\">\n {{ navSelectorLeafPresenter.texts().only }}\n </a>\n\n <div class=\"end-actions\">\n @if (leaf().actionsDisplayable) {\n <ap-symbol\n class=\"actions-menu\"\n [id]=\"leaf().uid + '_ActionMenuTrackingClick'\"\n size=\"sm\"\n symbolId=\"more\"\n [apActionDropdownTrigger]=\"actionDropdown\"\n [tabindex]=\"leaf().accessibility.tabIndex\"\n [attr.aria-label]=\"'Action menu ' + leaf().alias\" />\n <ap-action-dropdown\n #actionDropdown\n [items]=\"leafActions()\"\n (itemClick)=\"onActionClicked($event)\" />\n }\n\n @if (leaf().foldable) {\n <ap-symbol\n class=\"folding-button\"\n size=\"sm\"\n role=\"button\"\n [tabindex]=\"leaf().accessibility.tabIndex\"\n [attr.aria-label]=\"'Toggle ' + leaf().alias\"\n [symbolId]=\"foldSymbol()\"\n (click)=\"clickOnToggleFolding($event)\"\n (keydown.space)=\"toggleFolding($event)\"\n (keydown.enter)=\"toggleFolding($event)\" />\n }\n </div>\n\n @if (leaf().displayCounter) {\n <ap-counter\n color=\"orange\"\n size=\"normal\"\n [background]=\"false\">\n {{ leaf().counter }}\n </ap-counter>\n }\n @if (leaf().displayTokenInvalid) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\" />\n }\n @if (leaf().displayFeatureLocked) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"feature-lock\" />\n }\n </div>\n\n <div\n class=\"details-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight(),\n },\n }\">\n @if (!foldedWithDelay()) {\n <ap-nav-selector-leaf-details\n [details]=\"leaf().details\"\n [leaf]=\"leaf()\" />\n }\n </div>\n} @else {\n <div\n #minified\n class=\"nav-selector-leaf\"\n apTooltipPosition=\"right\"\n [apNavSelectorPopoverTrigger]=\"minifiedPopover\"\n [apNavSelectorPopoverDisabled]=\"!leaf().detailsDisplayable\"\n [apNavSelectorPopoverTriggerMode]=\"{ click: false, hover: true }\"\n [class.feature-locked]=\"leaf().displayFeatureLocked\"\n [class.selected]=\"leaf().selected || leaf().detailSelected\"\n [class.token-error]=\"leaf().displayTokenInvalid\"\n [class.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n [class.disabled]=\"leaf().disabled\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"leaf()\"\n (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n (click)=\"onClick($event)\">\n @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"leaf().uid\"\n [checked]=\"leaf().selected\"\n [disabled]=\"!leaf().selectable\" />\n }\n\n <div class=\"avatar-container\">\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n [network]=\"$any(leaf().network)\"\n [showInitials]=\"initial()\" />\n\n <div class=\"status\">\n @if (leaf().displayCounter) {\n <ap-counter\n class=\"counter-override\"\n color=\"orange\"\n size=\"normal\"\n [notif]=\"true\"\n [background]=\"true\">\n {{ leaf().counter }}\n </ap-counter>\n }\n @if (leaf().displayTokenInvalid) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\" />\n }\n @if (leaf().displayFeatureLocked) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"feature-lock\" />\n }\n </div>\n </div>\n\n <ap-nav-selector-popover\n #minifiedPopover\n placement=\"right\"\n [popoverTitle]=\"leaf().alias\"\n [offset]=\"{ mainAxis: 0, crossAxis: -36.5 }\">\n @for (detail of leaf().details; track detail.uid) {\n <ap-nav-selector-popover-item\n item\n [selected]=\"detail.selected\"\n [disabled]=\"detail.displayError\"\n [name]=\"detail.alias\"\n (click)=\"onDetailClicked($event, detail)\">\n <ap-nav-selector-leaf-detail\n [embedded]=\"true\"\n [detail]=\"detail\" />\n </ap-nav-selector-popover-item>\n }\n </ap-nav-selector-popover>\n </div>\n}\n", styles: [":host{display:flex;flex-shrink:0;align-self:stretch;flex-direction:column}:host .details-container{align-self:stretch}:host .nav-selector-leaf{position:relative;display:flex;padding:0 var(--ref-spacing-xxs);height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch}:host .nav-selector-leaf ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .start-elements{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}:host .start-elements .start-dot{height:12px;width:12px;border-radius:50%}:host .caption{-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;white-space:nowrap;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=feature-lock]{color:var(--ref-color-purple-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .end-actions{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}:host .folding-button,:host .actions-menu{display:none;width:24px;height:24px;justify-content:center;align-items:center;flex-shrink:0}:host .folding-button:hover,:host .actions-menu:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .folding-button:active,:host .folding-button.nav-selector-popover-trigger--active,:host .actions-menu:active,:host .actions-menu.nav-selector-popover-trigger--active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-40)}:host .folding-button:focus-visible,:host .actions-menu:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector-leaf.details-displayable{cursor:pointer}:host .nav-selector-leaf.details-displayable.detail-selected .caption{font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs);color:var(--ref-color-grey-100)}:host .nav-selector-leaf.details-displayable:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.details-displayable:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf.details-displayable:focus-within:not(:host .nav-selector-leaf.details-displayable.detail-selected){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode) .caption{color:var(--ref-color-electric-blue-150)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected .caption{overflow:hidden;text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible .only-button{display:flex}:host .nav-selector-leaf.feature-locked:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);outline:none;cursor:pointer}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):hover{background:var(--ref-color-purple-10)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):active{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):focus-visible{background:var(--ref-color-purple-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-purple-100)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected .caption{overflow:hidden;color:var(--ref-color-purple-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .actions-menu{display:flex}:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible ap-counter,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) ap-counter,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover ap-counter{display:none}:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .folding-button,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) .folding-button,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .folding-button{display:flex}:host .nav-selector-leaf.feature-locked.multiple-mode ap-avatar,:host .nav-selector-leaf.feature-locked.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.feature-locked.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.token-error.multiple-mode ap-avatar,:host .nav-selector-leaf.token-error.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.token-error.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled.multiple-mode ap-avatar,:host .nav-selector-leaf.disabled.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.disabled.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled ap-avatar,:host .nav-selector-leaf.disabled .caption{opacity:.5}:host .nav-selector-leaf.disabled .caption{color:var(--ref-color-grey-40)}:host .status{position:absolute;right:-4px;top:-6px;background-color:var(--ref-color-white);border-radius:100%}:host .avatar-container{position:relative}:host.minified .counter-override{background-color:var(--ref-color-orange-150)}:host.minified .nav-selector-leaf{gap:var(--ref-spacing-xxxs);padding:var(--ref-spacing-xxxs)}:host.minified .nav-selector-leaf:not(.multiple-mode){justify-content:center}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .only-button{display:none;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}::ng-deep .nav-selector-leaf-menu{position:absolute;left:55px;top:-20%;width:225px}::ng-deep .nav-selector-leaf-menu .not-displayable{display:none}::ng-deep .nav-selector-leaf-menu .caption-bold{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}\n"], dependencies: [{ kind: "component", type: ActionDropdownComponent, selector: "ap-action-dropdown", inputs: ["items", "disabled", "largeModeEnabled", "showBackdrop", "customWidth", "defaultPosition"], outputs: ["itemClick", "opened", "closed"] }, { kind: "directive", type: ActionDropdownTriggerDirective, selector: "[apActionDropdownTrigger]", inputs: ["apActionDropdownTrigger"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "notif", "background", "role"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: NavSelectorLeafDetailsComponent, selector: "ap-nav-selector-leaf-details", inputs: ["leaf", "details"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }, { kind: "component", type: NavSelectorLeafDetailComponent, selector: "ap-nav-selector-leaf-detail", inputs: ["detail", "embedded"] }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }, { kind: "component", type: NavSelectorPopoverComponent, selector: "ap-nav-selector-popover", inputs: ["placement", "popoverTitle", "offset"] }, { kind: "directive", type: NavSelectorPopoverTriggerDirective, selector: "[apNavSelectorPopoverTrigger]", inputs: ["apNavSelectorPopoverTrigger", "apNavSelectorPopoverTriggerMode", "apNavSelectorPopoverDisabled"] }, { kind: "component", type: NavSelectorPopoverItemComponent, selector: "ap-nav-selector-popover-item", inputs: ["selected", "disabled", "locked", "id", "name", "ariaLabel"] }], animations: [
|
|
2377
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: NavSelectorLeafComponent, isStandalone: true, selector: "ap-nav-selector-leaf", inputs: { leaf: { classPropertyName: "leaf", publicName: "leaf", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, host: { attributes: { "role": "treeitem" }, listeners: { "keydown.arrowLeft": "fold($event)", "keydown.arrowRight": "unfold($event)" }, properties: { "class.minified": "!navSelectorLeafPresenter.expanded()" } }, providers: [withSymbols(apErrorFill, apFeatureLock, apChevronDown, apChevronUp, apMore), NavSelectorLeafPresenter], viewQueries: [{ propertyName: "aliasEl", first: true, predicate: ["alias"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorLeafPresenter.expanded()) {\n <div\n class=\"nav-selector-leaf\"\n apTooltipPosition=\"right\"\n [attr.aria-selected]=\"leaf().selected\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [class.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n [class.feature-locked]=\"leaf().displayFeatureLocked\"\n [class.selected]=\"leaf().selected\"\n [class.token-error]=\"leaf().displayTokenInvalid\"\n [class.disabled]=\"leaf().disabled\"\n [class.detail-selected]=\"leaf().detailSelected\"\n [class.actions-displayable]=\"leaf().actionsDisplayable\"\n [class.details-displayable]=\"leaf().detailsDisplayable\"\n [apTreeNodeAccessibility]=\"leaf()\"\n (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n (focusin)=\"focused.set(true)\"\n (focusout)=\"focused.set(false)\"\n (click)=\"onClick($event)\">\n @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"leaf().uid\"\n [checked]=\"leaf().selected\"\n [aria-label]=\"leaf().alias\"\n [disabled]=\"!leaf().selectable\"\n (click)=\"eventStopper($event)\"\n (change)=\"onCheckboxToggle()\" />\n }\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n [network]=\"$any(leaf().network)\"\n [showInitials]=\"initial()\" />\n\n @if (leaf().startSymbolId || leaf().startDotColor) {\n <div class=\"start-elements\">\n @if (leaf().startSymbolId) {\n <ap-symbol\n size=\"sm\"\n color=\"grey-blue\"\n [symbolId]=\"leaf().startSymbolId\" />\n }\n @if (leaf().startDotColor) {\n <div\n class=\"start-dot\"\n [style.background-color]=\"leaf().startDotColor\"></div>\n }\n </div>\n }\n\n <span\n #alias\n class=\"caption\">\n {{ leaf().alias }}\n </span>\n\n <a\n class=\"standalone only-button\"\n role=\"button\"\n [attr.aria-label]=\"'Select only ' + leaf().alias\"\n [attr.tabindex]=\"leaf().accessibility.tabIndex\"\n (keydown.space)=\"selectOnly($event)\"\n (keydown.enter)=\"selectOnly($event)\"\n (click)=\"clickOnSelectOnly($event)\">\n {{ navSelectorLeafPresenter.texts().only }}\n </a>\n\n <div class=\"end-actions\">\n @if (leaf().actionsDisplayable) {\n <ap-symbol\n class=\"actions-menu\"\n size=\"sm\"\n symbolId=\"more\"\n color=\"basic-grey\"\n [id]=\"leaf().uid + '_ActionMenuTrackingClick'\"\n [apActionDropdownTrigger]=\"actionDropdown\"\n [tabindex]=\"leaf().accessibility.tabIndex\"\n [attr.aria-label]=\"'Action menu ' + leaf().alias\" />\n <ap-action-dropdown\n #actionDropdown\n [items]=\"leafActions()\"\n (itemClick)=\"onActionClicked($event)\" />\n }\n\n @if (leaf().foldable) {\n <ap-symbol\n class=\"folding-button\"\n size=\"sm\"\n role=\"button\"\n [tabindex]=\"leaf().accessibility.tabIndex\"\n [attr.aria-label]=\"'Toggle ' + leaf().alias\"\n [symbolId]=\"foldSymbol()\"\n (click)=\"clickOnToggleFolding($event)\"\n (keydown.space)=\"toggleFolding($event)\"\n (keydown.enter)=\"toggleFolding($event)\" />\n }\n </div>\n\n @if (leaf().displayCounter) {\n <ap-counter\n color=\"orange\"\n size=\"normal\"\n [background]=\"false\">\n {{ leaf().counter }}\n </ap-counter>\n }\n @if (leaf().displayTokenInvalid) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\" />\n }\n @if (leaf().displayFeatureLocked) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"feature-lock\" />\n }\n </div>\n\n <div\n class=\"details-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight(),\n },\n }\">\n @if (!foldedWithDelay()) {\n <ap-nav-selector-leaf-details\n [details]=\"leaf().details\"\n [leaf]=\"leaf()\" />\n }\n </div>\n} @else {\n <div\n #minified\n class=\"nav-selector-leaf\"\n apTooltipPosition=\"right\"\n [apNavSelectorPopoverTrigger]=\"minifiedPopover\"\n [apNavSelectorPopoverDisabled]=\"!leaf().detailsDisplayable\"\n [apNavSelectorPopoverTriggerMode]=\"{ click: false, hover: true }\"\n [class.feature-locked]=\"leaf().displayFeatureLocked\"\n [class.selected]=\"leaf().selected || leaf().detailSelected\"\n [class.token-error]=\"leaf().displayTokenInvalid\"\n [class.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n [class.disabled]=\"leaf().disabled\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"leaf()\"\n (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n (click)=\"onClick($event)\">\n @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"leaf().uid\"\n [checked]=\"leaf().selected\"\n [disabled]=\"!leaf().selectable\" />\n }\n\n <div class=\"avatar-container\">\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n [network]=\"$any(leaf().network)\"\n [showInitials]=\"initial()\" />\n\n <div class=\"status\">\n @if (leaf().displayCounter) {\n <ap-counter\n class=\"counter-override\"\n color=\"orange\"\n size=\"normal\"\n [notif]=\"true\"\n [background]=\"true\">\n {{ leaf().counter }}\n </ap-counter>\n }\n @if (leaf().displayTokenInvalid) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\" />\n }\n @if (leaf().displayFeatureLocked) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"feature-lock\" />\n }\n </div>\n </div>\n\n <ap-nav-selector-popover\n #minifiedPopover\n placement=\"right\"\n [popoverTitle]=\"leaf().alias\"\n [offset]=\"{ mainAxis: 0, crossAxis: -36.5 }\">\n @for (detail of leaf().details; track detail.uid) {\n <ap-nav-selector-popover-item\n item\n [selected]=\"detail.selected\"\n [disabled]=\"detail.displayError\"\n [name]=\"detail.alias\"\n (click)=\"onDetailClicked($event, detail)\">\n <ap-nav-selector-leaf-detail\n [embedded]=\"true\"\n [detail]=\"detail\" />\n </ap-nav-selector-popover-item>\n }\n </ap-nav-selector-popover>\n </div>\n}\n", styles: [":host{display:flex;flex-shrink:0;align-self:stretch;flex-direction:column}:host .details-container{align-self:stretch}:host .nav-selector-leaf{position:relative;display:flex;padding:0 var(--ref-spacing-xxs);height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch}:host .nav-selector-leaf ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .start-elements{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}:host .start-elements .start-dot{height:12px;width:12px;border-radius:50%}:host .caption{-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;white-space:nowrap;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=feature-lock]{color:var(--ref-color-purple-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .end-actions{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}:host .folding-button,:host .actions-menu{display:none;width:24px;height:24px;justify-content:center;align-items:center;flex-shrink:0}:host .folding-button:hover,:host .actions-menu:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .folding-button:active,:host .folding-button.nav-selector-popover-trigger--active,:host .actions-menu:active,:host .actions-menu.nav-selector-popover-trigger--active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-40)}:host .folding-button:focus-visible,:host .actions-menu:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector-leaf.details-displayable{cursor:pointer}:host .nav-selector-leaf.details-displayable.detail-selected .caption{font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs);color:var(--ref-color-grey-100)}:host .nav-selector-leaf.details-displayable:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.details-displayable:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf.details-displayable:focus-within:not(:host .nav-selector-leaf.details-displayable.detail-selected){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode) .caption{color:var(--ref-color-electric-blue-150)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected .caption{overflow:hidden;text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible .only-button{display:flex}:host .nav-selector-leaf.feature-locked:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);outline:none;cursor:pointer}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):hover{background:var(--ref-color-purple-10)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):active{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):focus-visible{background:var(--ref-color-purple-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-purple-100)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected .caption{overflow:hidden;color:var(--ref-color-purple-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .actions-menu{display:flex}:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible ap-counter,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) ap-counter,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover ap-counter{display:none}:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .folding-button,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) .folding-button,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .folding-button{display:flex}:host .nav-selector-leaf.feature-locked.multiple-mode ap-avatar,:host .nav-selector-leaf.feature-locked.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.feature-locked.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.token-error.multiple-mode ap-avatar,:host .nav-selector-leaf.token-error.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.token-error.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled.multiple-mode ap-avatar,:host .nav-selector-leaf.disabled.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.disabled.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled ap-avatar,:host .nav-selector-leaf.disabled .caption{opacity:.5}:host .nav-selector-leaf.disabled .caption{color:var(--ref-color-grey-40)}:host .status{position:absolute;right:-4px;top:-6px;background-color:var(--ref-color-white);border-radius:100%}:host .avatar-container{position:relative}:host.minified .counter-override{background-color:var(--ref-color-orange-150)}:host.minified .nav-selector-leaf{gap:var(--ref-spacing-xxxs);padding:var(--ref-spacing-xxxs)}:host.minified .nav-selector-leaf:not(.multiple-mode){justify-content:center}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .only-button{display:none;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}::ng-deep .nav-selector-leaf-menu{position:absolute;left:55px;top:-20%;width:225px}::ng-deep .nav-selector-leaf-menu .not-displayable{display:none}::ng-deep .nav-selector-leaf-menu .caption-bold{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}\n"], dependencies: [{ kind: "component", type: ActionDropdownComponent, selector: "ap-action-dropdown", inputs: ["items", "disabled", "largeModeEnabled", "showBackdrop", "customWidth", "defaultPosition"], outputs: ["itemClick", "opened", "closed"] }, { kind: "directive", type: ActionDropdownTriggerDirective, selector: "[apActionDropdownTrigger]", inputs: ["apActionDropdownTrigger"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: CounterComponent, selector: "ap-counter", inputs: ["color", "size", "notif", "background", "role"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: NavSelectorLeafDetailsComponent, selector: "ap-nav-selector-leaf-details", inputs: ["leaf", "details"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }, { kind: "component", type: NavSelectorLeafDetailComponent, selector: "ap-nav-selector-leaf-detail", inputs: ["detail", "embedded"] }, { kind: "directive", type: TreeNodeAccessibilityDirective, selector: "[apTreeNodeAccessibility]", inputs: ["apTreeNodeAccessibility"] }, { kind: "component", type: NavSelectorPopoverComponent, selector: "ap-nav-selector-popover", inputs: ["placement", "popoverTitle", "offset"] }, { kind: "directive", type: NavSelectorPopoverTriggerDirective, selector: "[apNavSelectorPopoverTrigger]", inputs: ["apNavSelectorPopoverTrigger", "apNavSelectorPopoverTriggerMode", "apNavSelectorPopoverDisabled"] }, { kind: "component", type: NavSelectorPopoverItemComponent, selector: "ap-nav-selector-popover-item", inputs: ["selected", "disabled", "locked", "id", "name", "ariaLabel"] }], animations: [
|
|
2378
2378
|
/**
|
|
2379
2379
|
* 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)
|
|
2380
2380
|
*/
|
|
@@ -2436,7 +2436,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
|
|
|
2436
2436
|
animate('250ms cubic-bezier(.4, 0, .3, 1)', keyframes([style({ overflow: 'hidden', maxHeight: '{{maxHeight}}' }), style({ maxHeight: 0 })])),
|
|
2437
2437
|
]),
|
|
2438
2438
|
]),
|
|
2439
|
-
], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorLeafPresenter.expanded()) {\n <div\n class=\"nav-selector-leaf\"\n apTooltipPosition=\"right\"\n [attr.aria-selected]=\"leaf().selected\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [class.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n [class.feature-locked]=\"leaf().displayFeatureLocked\"\n [class.selected]=\"leaf().selected\"\n [class.token-error]=\"leaf().displayTokenInvalid\"\n [class.disabled]=\"leaf().disabled\"\n [class.detail-selected]=\"leaf().detailSelected\"\n [class.actions-displayable]=\"leaf().actionsDisplayable && leaf().detailsDisplayable\"\n [class.details-displayable]=\"leaf().detailsDisplayable\"\n [apTreeNodeAccessibility]=\"leaf()\"\n (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n (focusin)=\"focused.set(true)\"\n (focusout)=\"focused.set(false)\"\n (click)=\"onClick($event)\">\n @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"leaf().uid\"\n [checked]=\"leaf().selected\"\n [aria-label]=\"leaf().alias\"\n [disabled]=\"!leaf().selectable\"\n (click)=\"eventStopper($event)\"\n (change)=\"onCheckboxToggle()\" />\n }\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n [network]=\"$any(leaf().network)\"\n [showInitials]=\"initial()\" />\n\n @if (leaf().startSymbolId || leaf().startDotColor) {\n <div class=\"start-elements\">\n @if (leaf().startSymbolId) {\n <ap-symbol\n size=\"sm\"\n color=\"grey-blue\"\n [symbolId]=\"leaf().startSymbolId\" />\n }\n @if (leaf().startDotColor) {\n <div\n class=\"start-dot\"\n [style.background-color]=\"leaf().startDotColor\"></div>\n }\n </div>\n }\n\n <span\n #alias\n class=\"caption\">\n {{ leaf().alias }}\n </span>\n\n <a\n class=\"standalone only-button\"\n role=\"button\"\n [attr.aria-label]=\"'Select only ' + leaf().alias\"\n [attr.tabindex]=\"leaf().accessibility.tabIndex\"\n (keydown.space)=\"selectOnly($event)\"\n (keydown.enter)=\"selectOnly($event)\"\n (click)=\"clickOnSelectOnly($event)\">\n {{ navSelectorLeafPresenter.texts().only }}\n </a>\n\n <div class=\"end-actions\">\n @if (leaf().actionsDisplayable) {\n <ap-symbol\n class=\"actions-menu\"\n [id]=\"leaf().uid + '_ActionMenuTrackingClick'\"\n size=\"sm\"\n symbolId=\"more\"\n [apActionDropdownTrigger]=\"actionDropdown\"\n [tabindex]=\"leaf().accessibility.tabIndex\"\n [attr.aria-label]=\"'Action menu ' + leaf().alias\" />\n <ap-action-dropdown\n #actionDropdown\n [items]=\"leafActions()\"\n (itemClick)=\"onActionClicked($event)\" />\n }\n\n @if (leaf().foldable) {\n <ap-symbol\n class=\"folding-button\"\n size=\"sm\"\n role=\"button\"\n [tabindex]=\"leaf().accessibility.tabIndex\"\n [attr.aria-label]=\"'Toggle ' + leaf().alias\"\n [symbolId]=\"foldSymbol()\"\n (click)=\"clickOnToggleFolding($event)\"\n (keydown.space)=\"toggleFolding($event)\"\n (keydown.enter)=\"toggleFolding($event)\" />\n }\n </div>\n\n @if (leaf().displayCounter) {\n <ap-counter\n color=\"orange\"\n size=\"normal\"\n [background]=\"false\">\n {{ leaf().counter }}\n </ap-counter>\n }\n @if (leaf().displayTokenInvalid) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\" />\n }\n @if (leaf().displayFeatureLocked) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"feature-lock\" />\n }\n </div>\n\n <div\n class=\"details-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight(),\n },\n }\">\n @if (!foldedWithDelay()) {\n <ap-nav-selector-leaf-details\n [details]=\"leaf().details\"\n [leaf]=\"leaf()\" />\n }\n </div>\n} @else {\n <div\n #minified\n class=\"nav-selector-leaf\"\n apTooltipPosition=\"right\"\n [apNavSelectorPopoverTrigger]=\"minifiedPopover\"\n [apNavSelectorPopoverDisabled]=\"!leaf().detailsDisplayable\"\n [apNavSelectorPopoverTriggerMode]=\"{ click: false, hover: true }\"\n [class.feature-locked]=\"leaf().displayFeatureLocked\"\n [class.selected]=\"leaf().selected || leaf().detailSelected\"\n [class.token-error]=\"leaf().displayTokenInvalid\"\n [class.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n [class.disabled]=\"leaf().disabled\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"leaf()\"\n (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n (click)=\"onClick($event)\">\n @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"leaf().uid\"\n [checked]=\"leaf().selected\"\n [disabled]=\"!leaf().selectable\" />\n }\n\n <div class=\"avatar-container\">\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n [network]=\"$any(leaf().network)\"\n [showInitials]=\"initial()\" />\n\n <div class=\"status\">\n @if (leaf().displayCounter) {\n <ap-counter\n class=\"counter-override\"\n color=\"orange\"\n size=\"normal\"\n [notif]=\"true\"\n [background]=\"true\">\n {{ leaf().counter }}\n </ap-counter>\n }\n @if (leaf().displayTokenInvalid) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\" />\n }\n @if (leaf().displayFeatureLocked) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"feature-lock\" />\n }\n </div>\n </div>\n\n <ap-nav-selector-popover\n #minifiedPopover\n placement=\"right\"\n [popoverTitle]=\"leaf().alias\"\n [offset]=\"{ mainAxis: 0, crossAxis: -36.5 }\">\n @for (detail of leaf().details; track detail.uid) {\n <ap-nav-selector-popover-item\n item\n [selected]=\"detail.selected\"\n [disabled]=\"detail.displayError\"\n [name]=\"detail.alias\"\n (click)=\"onDetailClicked($event, detail)\">\n <ap-nav-selector-leaf-detail\n [embedded]=\"true\"\n [detail]=\"detail\" />\n </ap-nav-selector-popover-item>\n }\n </ap-nav-selector-popover>\n </div>\n}\n", styles: [":host{display:flex;flex-shrink:0;align-self:stretch;flex-direction:column}:host .details-container{align-self:stretch}:host .nav-selector-leaf{position:relative;display:flex;padding:0 var(--ref-spacing-xxs);height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch}:host .nav-selector-leaf ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .start-elements{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}:host .start-elements .start-dot{height:12px;width:12px;border-radius:50%}:host .caption{-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;white-space:nowrap;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=feature-lock]{color:var(--ref-color-purple-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .end-actions{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}:host .folding-button,:host .actions-menu{display:none;width:24px;height:24px;justify-content:center;align-items:center;flex-shrink:0}:host .folding-button:hover,:host .actions-menu:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .folding-button:active,:host .folding-button.nav-selector-popover-trigger--active,:host .actions-menu:active,:host .actions-menu.nav-selector-popover-trigger--active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-40)}:host .folding-button:focus-visible,:host .actions-menu:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector-leaf.details-displayable{cursor:pointer}:host .nav-selector-leaf.details-displayable.detail-selected .caption{font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs);color:var(--ref-color-grey-100)}:host .nav-selector-leaf.details-displayable:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.details-displayable:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf.details-displayable:focus-within:not(:host .nav-selector-leaf.details-displayable.detail-selected){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode) .caption{color:var(--ref-color-electric-blue-150)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected .caption{overflow:hidden;text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible .only-button{display:flex}:host .nav-selector-leaf.feature-locked:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);outline:none;cursor:pointer}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):hover{background:var(--ref-color-purple-10)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):active{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):focus-visible{background:var(--ref-color-purple-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-purple-100)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected .caption{overflow:hidden;color:var(--ref-color-purple-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .actions-menu{display:flex}:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible ap-counter,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) ap-counter,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover ap-counter{display:none}:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .folding-button,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) .folding-button,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .folding-button{display:flex}:host .nav-selector-leaf.feature-locked.multiple-mode ap-avatar,:host .nav-selector-leaf.feature-locked.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.feature-locked.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.token-error.multiple-mode ap-avatar,:host .nav-selector-leaf.token-error.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.token-error.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled.multiple-mode ap-avatar,:host .nav-selector-leaf.disabled.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.disabled.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled ap-avatar,:host .nav-selector-leaf.disabled .caption{opacity:.5}:host .nav-selector-leaf.disabled .caption{color:var(--ref-color-grey-40)}:host .status{position:absolute;right:-4px;top:-6px;background-color:var(--ref-color-white);border-radius:100%}:host .avatar-container{position:relative}:host.minified .counter-override{background-color:var(--ref-color-orange-150)}:host.minified .nav-selector-leaf{gap:var(--ref-spacing-xxxs);padding:var(--ref-spacing-xxxs)}:host.minified .nav-selector-leaf:not(.multiple-mode){justify-content:center}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .only-button{display:none;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}::ng-deep .nav-selector-leaf-menu{position:absolute;left:55px;top:-20%;width:225px}::ng-deep .nav-selector-leaf-menu .not-displayable{display:none}::ng-deep .nav-selector-leaf-menu .caption-bold{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}\n"] }]
|
|
2439
|
+
], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n@if (navSelectorLeafPresenter.expanded()) {\n <div\n class=\"nav-selector-leaf\"\n apTooltipPosition=\"right\"\n [attr.aria-selected]=\"leaf().selected\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [class.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n [class.feature-locked]=\"leaf().displayFeatureLocked\"\n [class.selected]=\"leaf().selected\"\n [class.token-error]=\"leaf().displayTokenInvalid\"\n [class.disabled]=\"leaf().disabled\"\n [class.detail-selected]=\"leaf().detailSelected\"\n [class.actions-displayable]=\"leaf().actionsDisplayable\"\n [class.details-displayable]=\"leaf().detailsDisplayable\"\n [apTreeNodeAccessibility]=\"leaf()\"\n (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n (focusin)=\"focused.set(true)\"\n (focusout)=\"focused.set(false)\"\n (click)=\"onClick($event)\">\n @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"leaf().uid\"\n [checked]=\"leaf().selected\"\n [aria-label]=\"leaf().alias\"\n [disabled]=\"!leaf().selectable\"\n (click)=\"eventStopper($event)\"\n (change)=\"onCheckboxToggle()\" />\n }\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n [network]=\"$any(leaf().network)\"\n [showInitials]=\"initial()\" />\n\n @if (leaf().startSymbolId || leaf().startDotColor) {\n <div class=\"start-elements\">\n @if (leaf().startSymbolId) {\n <ap-symbol\n size=\"sm\"\n color=\"grey-blue\"\n [symbolId]=\"leaf().startSymbolId\" />\n }\n @if (leaf().startDotColor) {\n <div\n class=\"start-dot\"\n [style.background-color]=\"leaf().startDotColor\"></div>\n }\n </div>\n }\n\n <span\n #alias\n class=\"caption\">\n {{ leaf().alias }}\n </span>\n\n <a\n class=\"standalone only-button\"\n role=\"button\"\n [attr.aria-label]=\"'Select only ' + leaf().alias\"\n [attr.tabindex]=\"leaf().accessibility.tabIndex\"\n (keydown.space)=\"selectOnly($event)\"\n (keydown.enter)=\"selectOnly($event)\"\n (click)=\"clickOnSelectOnly($event)\">\n {{ navSelectorLeafPresenter.texts().only }}\n </a>\n\n <div class=\"end-actions\">\n @if (leaf().actionsDisplayable) {\n <ap-symbol\n class=\"actions-menu\"\n size=\"sm\"\n symbolId=\"more\"\n color=\"basic-grey\"\n [id]=\"leaf().uid + '_ActionMenuTrackingClick'\"\n [apActionDropdownTrigger]=\"actionDropdown\"\n [tabindex]=\"leaf().accessibility.tabIndex\"\n [attr.aria-label]=\"'Action menu ' + leaf().alias\" />\n <ap-action-dropdown\n #actionDropdown\n [items]=\"leafActions()\"\n (itemClick)=\"onActionClicked($event)\" />\n }\n\n @if (leaf().foldable) {\n <ap-symbol\n class=\"folding-button\"\n size=\"sm\"\n role=\"button\"\n [tabindex]=\"leaf().accessibility.tabIndex\"\n [attr.aria-label]=\"'Toggle ' + leaf().alias\"\n [symbolId]=\"foldSymbol()\"\n (click)=\"clickOnToggleFolding($event)\"\n (keydown.space)=\"toggleFolding($event)\"\n (keydown.enter)=\"toggleFolding($event)\" />\n }\n </div>\n\n @if (leaf().displayCounter) {\n <ap-counter\n color=\"orange\"\n size=\"normal\"\n [background]=\"false\">\n {{ leaf().counter }}\n </ap-counter>\n }\n @if (leaf().displayTokenInvalid) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\" />\n }\n @if (leaf().displayFeatureLocked) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"feature-lock\" />\n }\n </div>\n\n <div\n class=\"details-container\"\n [@accordion]=\"{\n value: animationState(),\n params: {\n maxHeight: maxHeight(),\n },\n }\">\n @if (!foldedWithDelay()) {\n <ap-nav-selector-leaf-details\n [details]=\"leaf().details\"\n [leaf]=\"leaf()\" />\n }\n </div>\n} @else {\n <div\n #minified\n class=\"nav-selector-leaf\"\n apTooltipPosition=\"right\"\n [apNavSelectorPopoverTrigger]=\"minifiedPopover\"\n [apNavSelectorPopoverDisabled]=\"!leaf().detailsDisplayable\"\n [apNavSelectorPopoverTriggerMode]=\"{ click: false, hover: true }\"\n [class.feature-locked]=\"leaf().displayFeatureLocked\"\n [class.selected]=\"leaf().selected || leaf().detailSelected\"\n [class.token-error]=\"leaf().displayTokenInvalid\"\n [class.multiple-mode]=\"navSelectorLeafPresenter.isMultipleModeEnabled()\"\n [class.disabled]=\"leaf().disabled\"\n [apTooltip]=\"tooltipContent()\"\n [apTooltipDisabled]=\"tooltipDisabled()\"\n [apTreeNodeAccessibility]=\"leaf()\"\n (keydown.space)=\"onSpaceOrEnterPressed($event)\"\n (keydown.enter)=\"onSpaceOrEnterPressed($event)\"\n (click)=\"onClick($event)\">\n @if (navSelectorLeafPresenter.isMultipleModeEnabled()) {\n <ap-checkbox\n [name]=\"leaf().uid\"\n [checked]=\"leaf().selected\"\n [disabled]=\"!leaf().selectable\" />\n }\n\n <div class=\"avatar-container\">\n <ap-avatar\n size=\"24\"\n [profilePicture]=\"leaf().pictureUrl ?? undefined\"\n [network]=\"$any(leaf().network)\"\n [showInitials]=\"initial()\" />\n\n <div class=\"status\">\n @if (leaf().displayCounter) {\n <ap-counter\n class=\"counter-override\"\n color=\"orange\"\n size=\"normal\"\n [notif]=\"true\"\n [background]=\"true\">\n {{ leaf().counter }}\n </ap-counter>\n }\n @if (leaf().displayTokenInvalid) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"error_fill\" />\n }\n @if (leaf().displayFeatureLocked) {\n <ap-symbol\n size=\"sm\"\n symbolId=\"feature-lock\" />\n }\n </div>\n </div>\n\n <ap-nav-selector-popover\n #minifiedPopover\n placement=\"right\"\n [popoverTitle]=\"leaf().alias\"\n [offset]=\"{ mainAxis: 0, crossAxis: -36.5 }\">\n @for (detail of leaf().details; track detail.uid) {\n <ap-nav-selector-popover-item\n item\n [selected]=\"detail.selected\"\n [disabled]=\"detail.displayError\"\n [name]=\"detail.alias\"\n (click)=\"onDetailClicked($event, detail)\">\n <ap-nav-selector-leaf-detail\n [embedded]=\"true\"\n [detail]=\"detail\" />\n </ap-nav-selector-popover-item>\n }\n </ap-nav-selector-popover>\n </div>\n}\n", styles: [":host{display:flex;flex-shrink:0;align-self:stretch;flex-direction:column}:host .details-container{align-self:stretch}:host .nav-selector-leaf{position:relative;display:flex;padding:0 var(--ref-spacing-xxs);height:36px;align-items:center;gap:var(--ref-spacing-xxs);flex-shrink:0;flex-grow:1;align-self:stretch}:host .nav-selector-leaf ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .start-elements{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}:host .start-elements .start-dot{height:12px;width:12px;border-radius:50%}:host .caption{-webkit-box-orient:vertical;-webkit-line-clamp:1;flex:1 0 0;overflow:hidden;white-space:nowrap;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}:host ap-symbol[symbol-id=error_fill]{color:var(--ref-color-red-100)}:host ap-symbol[symbol-id=feature-lock]{color:var(--ref-color-purple-100)}:host ap-symbol[symbol-id=chevron-down],:host ap-symbol[symbol-id=chevron-up]{color:var(--ref-color-grey-80)}:host .end-actions{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}:host .folding-button,:host .actions-menu{display:none;width:24px;height:24px;justify-content:center;align-items:center;flex-shrink:0}:host .folding-button:hover,:host .actions-menu:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .folding-button:active,:host .folding-button.nav-selector-popover-trigger--active,:host .actions-menu:active,:host .actions-menu.nav-selector-popover-trigger--active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-40)}:host .folding-button:focus-visible,:host .actions-menu:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20);box-shadow:0 0 0 1px #fff,0 0 0 3px #178dfe}:host .nav-selector-leaf.details-displayable{cursor:pointer}:host .nav-selector-leaf.details-displayable.detail-selected .caption{font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs);color:var(--ref-color-grey-100)}:host .nav-selector-leaf.details-displayable:focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.details-displayable:hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf.details-displayable:focus-within:not(:host .nav-selector-leaf.details-displayable.detail-selected){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable){cursor:pointer}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):hover{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):active{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-visible{outline:none;border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable):focus-within{border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);background:var(--ref-color-electric-blue-20)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:not(.multiple-mode) .caption{color:var(--ref-color-electric-blue-150)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected.multiple-mode .caption{color:var(--ref-color-grey-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected .caption{overflow:hidden;text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within ap-counter,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible ap-counter{display:none}:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:hover .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-within .only-button,:host .nav-selector-leaf:not(.disabled):not(.feature-locked):not(.multiple-mode.token-error):not(.details-displayable).multiple-mode:focus-visible .only-button{display:flex}:host .nav-selector-leaf.feature-locked:not(.multiple-mode){border-radius:var(--ref-border-radius-sm);outline:none;cursor:pointer}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):hover{background:var(--ref-color-purple-10)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):active{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode):focus-visible{background:var(--ref-color-purple-10);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-purple-100)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected{background:var(--ref-color-purple-20)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected .caption{overflow:hidden;color:var(--ref-color-purple-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}:host .nav-selector-leaf.feature-locked:not(.multiple-mode).selected:focus-visible{box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) .actions-menu,:host .nav-selector-leaf.actions-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .actions-menu{display:flex}:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible ap-counter,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) ap-counter,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover ap-counter{display:none}:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-visible .folding-button,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus-within:not(:has(ap-nav-selector-leaf-detail:focus)):not(:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):focus) .folding-button,:host .nav-selector-leaf.details-displayable:not(.feature-locked):not(.disabled):not(.token-error):hover .folding-button{display:flex}:host .nav-selector-leaf.feature-locked.multiple-mode ap-avatar,:host .nav-selector-leaf.feature-locked.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.feature-locked.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.token-error.multiple-mode ap-avatar,:host .nav-selector-leaf.token-error.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.token-error.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled.multiple-mode ap-avatar,:host .nav-selector-leaf.disabled.multiple-mode .caption{opacity:.5}:host .nav-selector-leaf.disabled.multiple-mode .caption{color:var(--ref-color-grey-40)}:host .nav-selector-leaf.disabled ap-avatar,:host .nav-selector-leaf.disabled .caption{opacity:.5}:host .nav-selector-leaf.disabled .caption{color:var(--ref-color-grey-40)}:host .status{position:absolute;right:-4px;top:-6px;background-color:var(--ref-color-white);border-radius:100%}:host .avatar-container{position:relative}:host.minified .counter-override{background-color:var(--ref-color-orange-150)}:host.minified .nav-selector-leaf{gap:var(--ref-spacing-xxxs);padding:var(--ref-spacing-xxxs)}:host.minified .nav-selector-leaf:not(.multiple-mode){justify-content:center}:host.minified ::ng-deep ap-checkbox .checkbox .checkbox-container{padding:0}:host .only-button{display:none;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}::ng-deep .nav-selector-leaf-menu{position:absolute;left:55px;top:-20%;width:225px}::ng-deep .nav-selector-leaf-menu .not-displayable{display:none}::ng-deep .nav-selector-leaf-menu .caption-bold{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-xs)}\n"] }]
|
|
2440
2440
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: NavSelectorLeafPresenter }] });
|
|
2441
2441
|
|
|
2442
2442
|
class NavSelectorGroupPresenter {
|