@agorapulse/ui-components 20.1.8 → 20.1.10
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.10.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.mjs +76 -58
- 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/nav-selector/index.d.ts +13 -6
- package/package.json +2 -1
- package/social-button/index.d.ts +6 -4
- package/agorapulse-ui-components-20.1.8.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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"}
|