@agorapulse/ui-components 21.1.1 → 21.1.3

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.
@@ -1,21 +1,18 @@
1
1
  import { LoaderComponent } from '@agorapulse/ui-animations';
2
2
  import { LabelComponent } from '@agorapulse/ui-components/labels';
3
- import * as i2 from '@agorapulse/ui-components/select';
3
+ import * as i1 from '@agorapulse/ui-components/select';
4
4
  import { ApSelectModule } from '@agorapulse/ui-components/select';
5
- import * as i1 from '@agorapulse/ui-symbol';
6
- import { apPlus, SymbolComponent } from '@agorapulse/ui-symbol';
7
5
  import { AsyncPipe } from '@angular/common';
8
6
  import * as i0 from '@angular/core';
9
7
  import { EventEmitter, ViewChild, Output, Input, Component } from '@angular/core';
10
- import * as i4 from '@angular/forms';
8
+ import * as i3 from '@angular/forms';
11
9
  import { FormsModule } from '@angular/forms';
12
10
  import { Subject } from 'rxjs';
13
11
  import { debounceTime, distinctUntilChanged, tap, switchMap, catchError, map } from 'rxjs/operators';
14
- import * as i3 from '@ng-select/ng-select';
12
+ import * as i2 from '@ng-select/ng-select';
15
13
 
16
14
  class LabelsSelectorComponent {
17
15
  changeDetectorRef;
18
- symbolRegistry;
19
16
  addLabelEnabled = true;
20
17
  disabled = false;
21
18
  initialLabels = [];
@@ -33,10 +30,8 @@ class LabelsSelectorComponent {
33
30
  labelsInput$ = new Subject();
34
31
  labels$;
35
32
  labelsLoading = false;
36
- constructor(changeDetectorRef, symbolRegistry) {
33
+ constructor(changeDetectorRef) {
37
34
  this.changeDetectorRef = changeDetectorRef;
38
- this.symbolRegistry = symbolRegistry;
39
- this.symbolRegistry.registerSymbols([apPlus]);
40
35
  }
41
36
  ngOnInit() {
42
37
  this.labels = this.initialLabels;
@@ -84,13 +79,13 @@ class LabelsSelectorComponent {
84
79
  return response;
85
80
  }))));
86
81
  }
87
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: LabelsSelectorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
88
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: LabelsSelectorComponent, isStandalone: true, selector: "ap-labels-selector", inputs: { addLabelEnabled: "addLabelEnabled", disabled: "disabled", initialLabels: "initialLabels", translation: "translation", loadingOnSearch: "loadingOnSearch", multipleEnabled: "multipleEnabled", searchLabelsFunction: "searchLabelsFunction" }, outputs: { createLabel: "createLabel", addLabel: "addLabel", deleteLabel: "deleteLabel", selectLabels: "selectLabels", searchErrorMessage: "searchErrorMessage" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- @JRA [multiple]=\"false\" break the component display and behavior, we use [maxSelectedItems]=\"1\" as efficient workaround -->\n<ng-select\n #select\n class=\"labels-select ap-select\"\n apSelectMultiple\n appendTo=\"body\"\n [clearable]=\"false\"\n [disabled]=\"disabled\"\n [items]=\"(labels$ | async) ?? []\"\n [loading]=\"labelsLoading\"\n [minTermLength]=\"0\"\n [multiple]=\"true\"\n [placeholder]=\"translation.placeholder\"\n [typeahead]=\"labelsInput$\"\n [(ngModel)]=\"labels\"\n (change)=\"onLabelsChange()\"\n (add)=\"onAddLabel($event)\"\n (remove)=\"onDeleteLabel($event)\"\n (open)=\"onOpen()\">\n <ng-template\n let-items=\"items\"\n let-clear=\"clear\"\n ng-multi-label-tmp>\n <ap-select-label-multiple\n displayType=\"label\"\n [selectedItems]=\"items\"\n (removeItem)=\"clear($event)\" />\n </ng-template>\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n <ap-dropdown-item-multiple-one-line\n [text]=\"item\"\n [htmlId]=\"item$.htmlId\"\n [selected]=\"item$.selected\" />\n </ng-template>\n <ng-template ng-header-tmp>\n <ap-dropdown-search-form\n [searchPlaceholder]=\"translation.searchPlaceholder ?? translation.placeholder\"\n [select]=\"select\" />\n </ng-template>\n @if (addLabelEnabled) {\n <ng-template\n let-searchTerm=\"searchTerm\"\n ng-footer-tmp>\n <button\n class=\"create-new\"\n type=\"button\"\n (click)=\"onCreateLabel(searchTerm)\">\n <ap-symbol\n symbolId=\"plus\"\n size=\"sm\" />\n <span>\n {{ translation.createLabel }}\n @if (searchTerm) {\n {{ '&quot;' + searchTerm + '&quot;' }}\n }\n </span>\n </button>\n </ng-template>\n }\n <ng-template ng-notfound-tmp>\n <div class=\"option not-found\">\n <span>{{ select.notFoundText() || 'Not found text' }}</span>\n </div>\n </ng-template>\n <ng-template ng-loadingtext-tmp>\n <div class=\"loading-state\">\n <ap-loader diameter=\"30\" />\n <span>{{ select.loadingText() || 'Loading Items' }}</span>\n </div>\n </ng-template>\n</ng-select>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}:host{max-width:260px;display:flex}.labels-select{width:260px}.labels-select .labels-wrapper{margin-bottom:5px;max-width:221px}::ng-deep .labels-select.ng-select .ng-select-container .ng-value-container{overflow-y:auto;overflow-x:hidden;max-height:171px;padding-left:6px!important;gap:4px}::ng-deep .ng-option{color:#344563!important}::ng-deep .ng-option.ng-option-marked{color:#178dfe!important}.add-label{display:flex;align-items:center;color:#178dfe}.add-label .add-label-icon{padding-right:8px}.add-label-preview{text-overflow:ellipsis;display:block;white-space:nowrap;overflow:hidden}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: ApSelectModule }, { kind: "directive", type: i2.SelectMultipleDirective, selector: "ng-select[apSelectMultiple]", inputs: ["maxItemsTooltip", "pinnedItemsEnabled"] }, { kind: "component", type: i2.DropdownItemMultipleOneLineComponent, selector: "ap-dropdown-item-multiple-one-line", inputs: ["text", "selected", "indeterminate", "htmlId", "disabled", "avatarUrl", "symbolId", "disabledTooltip", "badgeText", "dividerEnabled", "onlyEnabled", "onlyText", "isFeatureLocked", "roundedAvatar", "network", "symbolColor", "symbolTooltipText"], outputs: ["selectOnly", "selectionChange", "lockedFeatureClicked"] }, { kind: "component", type: i2.SelectLabelMultipleComponent, selector: "ap-select-label-multiple", inputs: ["displayType", "tagColor", "selectedItems", "bindLabel", "bindValue", "bindAvatarUrl", "bindSymbolId", "roundedAvatar", "bindNetwork"], outputs: ["removeItem"] }, { kind: "component", type: i2.DropdownSearchFormComponent, selector: "ap-dropdown-search-form", inputs: ["searchPlaceholder", "createNewEnabled", "createText", "select"], outputs: ["createNew"] }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i3.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i3.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i3.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i3.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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: "pipe", type: AsyncPipe, name: "async" }] });
82
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: LabelsSelectorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
83
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: LabelsSelectorComponent, isStandalone: true, selector: "ap-labels-selector", inputs: { addLabelEnabled: "addLabelEnabled", disabled: "disabled", initialLabels: "initialLabels", translation: "translation", loadingOnSearch: "loadingOnSearch", multipleEnabled: "multipleEnabled", searchLabelsFunction: "searchLabelsFunction" }, outputs: { createLabel: "createLabel", addLabel: "addLabel", deleteLabel: "deleteLabel", selectLabels: "selectLabels", searchErrorMessage: "searchErrorMessage" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- @JRA [multiple]=\"false\" break the component display and behavior, we use [maxSelectedItems]=\"1\" as efficient workaround -->\n<ng-select\n #select\n class=\"labels-select ap-select\"\n apSelectMultiple\n appendTo=\"body\"\n [clearable]=\"false\"\n [disabled]=\"disabled\"\n [items]=\"(labels$ | async) ?? []\"\n [loading]=\"labelsLoading\"\n [minTermLength]=\"0\"\n [multiple]=\"true\"\n [placeholder]=\"translation.placeholder\"\n [typeahead]=\"labelsInput$\"\n [(ngModel)]=\"labels\"\n (change)=\"onLabelsChange()\"\n (add)=\"onAddLabel($event)\"\n (remove)=\"onDeleteLabel($event)\"\n (open)=\"onOpen()\">\n <ng-template\n let-items=\"items\"\n let-clear=\"clear\"\n ng-multi-label-tmp>\n <ap-select-label-multiple\n displayType=\"label\"\n [selectedItems]=\"items\"\n (removeItem)=\"clear($event)\" />\n </ng-template>\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n <ap-dropdown-item-multiple-one-line\n [text]=\"item\"\n [htmlId]=\"item$.htmlId\"\n [selected]=\"item$.selected\" />\n </ng-template>\n <ng-template ng-header-tmp>\n <ap-dropdown-search-form\n [searchPlaceholder]=\"translation.searchPlaceholder ?? translation.placeholder\"\n [select]=\"select\" />\n </ng-template>\n @if (addLabelEnabled) {\n <ng-template\n let-searchTerm=\"searchTerm\"\n ng-footer-tmp>\n <ap-dropdown-create-new\n [text]=\"translation.createLabel\"\n [searchTerm]=\"searchTerm\"\n (createNew)=\"onCreateLabel($event)\" />\n </ng-template>\n }\n <ng-template ng-notfound-tmp>\n <div class=\"option not-found\">\n <span>{{ select.notFoundText() || 'Not found text' }}</span>\n </div>\n </ng-template>\n <ng-template ng-loadingtext-tmp>\n <div class=\"loading-state\">\n <ap-loader diameter=\"30\" />\n <span>{{ select.loadingText() || 'Loading Items' }}</span>\n </div>\n </ng-template>\n</ng-select>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}:host{max-width:260px;display:flex}.labels-select{width:260px}.labels-select .labels-wrapper{margin-bottom:5px;max-width:221px}::ng-deep .labels-select.ng-select .ng-select-container .ng-value-container{overflow-y:auto;overflow-x:hidden;max-height:171px;padding-left:6px!important;gap:4px}::ng-deep .ng-option{color:#344563!important}::ng-deep .ng-option.ng-option-marked{color:#178dfe!important}.add-label{display:flex;align-items:center;color:#178dfe}.add-label .add-label-icon{padding-right:8px}.add-label-preview{text-overflow:ellipsis;display:block;white-space:nowrap;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: ApSelectModule }, { kind: "directive", type: i1.SelectMultipleDirective, selector: "ng-select[apSelectMultiple]", inputs: ["maxItemsTooltip", "pinnedItemsEnabled"] }, { kind: "component", type: i1.DropdownItemMultipleOneLineComponent, selector: "ap-dropdown-item-multiple-one-line", inputs: ["text", "selected", "indeterminate", "htmlId", "disabled", "avatarUrl", "symbolId", "disabledTooltip", "badgeText", "dividerEnabled", "onlyEnabled", "onlyText", "isFeatureLocked", "roundedAvatar", "network", "symbolColor", "symbolTooltipText"], outputs: ["selectOnly", "selectionChange", "lockedFeatureClicked"] }, { kind: "component", type: i1.SelectLabelMultipleComponent, selector: "ap-select-label-multiple", inputs: ["displayType", "tagColor", "selectedItems", "bindLabel", "bindValue", "bindAvatarUrl", "bindSymbolId", "roundedAvatar", "bindNetwork"], outputs: ["removeItem"] }, { kind: "component", type: i1.DropdownSearchFormComponent, selector: "ap-dropdown-search-form", inputs: ["searchPlaceholder", "createNewEnabled", "createText", "select"], outputs: ["createNew"] }, { kind: "component", type: i1.DropdownCreateNewComponent, selector: "ap-dropdown-create-new", inputs: ["text", "searchTerm"], outputs: ["createNew"] }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "clearKeepsDisabledOptions", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "popover", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i2.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i2.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i2.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i2.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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: "pipe", type: AsyncPipe, name: "async" }] });
89
84
  }
90
85
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: LabelsSelectorComponent, decorators: [{
91
86
  type: Component,
92
- args: [{ selector: 'ap-labels-selector', imports: [SymbolComponent, ApSelectModule, LabelComponent, FormsModule, AsyncPipe, LoaderComponent], template: "<!-- @JRA [multiple]=\"false\" break the component display and behavior, we use [maxSelectedItems]=\"1\" as efficient workaround -->\n<ng-select\n #select\n class=\"labels-select ap-select\"\n apSelectMultiple\n appendTo=\"body\"\n [clearable]=\"false\"\n [disabled]=\"disabled\"\n [items]=\"(labels$ | async) ?? []\"\n [loading]=\"labelsLoading\"\n [minTermLength]=\"0\"\n [multiple]=\"true\"\n [placeholder]=\"translation.placeholder\"\n [typeahead]=\"labelsInput$\"\n [(ngModel)]=\"labels\"\n (change)=\"onLabelsChange()\"\n (add)=\"onAddLabel($event)\"\n (remove)=\"onDeleteLabel($event)\"\n (open)=\"onOpen()\">\n <ng-template\n let-items=\"items\"\n let-clear=\"clear\"\n ng-multi-label-tmp>\n <ap-select-label-multiple\n displayType=\"label\"\n [selectedItems]=\"items\"\n (removeItem)=\"clear($event)\" />\n </ng-template>\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n <ap-dropdown-item-multiple-one-line\n [text]=\"item\"\n [htmlId]=\"item$.htmlId\"\n [selected]=\"item$.selected\" />\n </ng-template>\n <ng-template ng-header-tmp>\n <ap-dropdown-search-form\n [searchPlaceholder]=\"translation.searchPlaceholder ?? translation.placeholder\"\n [select]=\"select\" />\n </ng-template>\n @if (addLabelEnabled) {\n <ng-template\n let-searchTerm=\"searchTerm\"\n ng-footer-tmp>\n <button\n class=\"create-new\"\n type=\"button\"\n (click)=\"onCreateLabel(searchTerm)\">\n <ap-symbol\n symbolId=\"plus\"\n size=\"sm\" />\n <span>\n {{ translation.createLabel }}\n @if (searchTerm) {\n {{ '&quot;' + searchTerm + '&quot;' }}\n }\n </span>\n </button>\n </ng-template>\n }\n <ng-template ng-notfound-tmp>\n <div class=\"option not-found\">\n <span>{{ select.notFoundText() || 'Not found text' }}</span>\n </div>\n </ng-template>\n <ng-template ng-loadingtext-tmp>\n <div class=\"loading-state\">\n <ap-loader diameter=\"30\" />\n <span>{{ select.loadingText() || 'Loading Items' }}</span>\n </div>\n </ng-template>\n</ng-select>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}:host{max-width:260px;display:flex}.labels-select{width:260px}.labels-select .labels-wrapper{margin-bottom:5px;max-width:221px}::ng-deep .labels-select.ng-select .ng-select-container .ng-value-container{overflow-y:auto;overflow-x:hidden;max-height:171px;padding-left:6px!important;gap:4px}::ng-deep .ng-option{color:#344563!important}::ng-deep .ng-option.ng-option-marked{color:#178dfe!important}.add-label{display:flex;align-items:center;color:#178dfe}.add-label .add-label-icon{padding-right:8px}.add-label-preview{text-overflow:ellipsis;display:block;white-space:nowrap;overflow:hidden}\n"] }]
93
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.SymbolRegistry }], propDecorators: { addLabelEnabled: [{
87
+ args: [{ selector: 'ap-labels-selector', imports: [ApSelectModule, LabelComponent, FormsModule, AsyncPipe, LoaderComponent], template: "<!-- @JRA [multiple]=\"false\" break the component display and behavior, we use [maxSelectedItems]=\"1\" as efficient workaround -->\n<ng-select\n #select\n class=\"labels-select ap-select\"\n apSelectMultiple\n appendTo=\"body\"\n [clearable]=\"false\"\n [disabled]=\"disabled\"\n [items]=\"(labels$ | async) ?? []\"\n [loading]=\"labelsLoading\"\n [minTermLength]=\"0\"\n [multiple]=\"true\"\n [placeholder]=\"translation.placeholder\"\n [typeahead]=\"labelsInput$\"\n [(ngModel)]=\"labels\"\n (change)=\"onLabelsChange()\"\n (add)=\"onAddLabel($event)\"\n (remove)=\"onDeleteLabel($event)\"\n (open)=\"onOpen()\">\n <ng-template\n let-items=\"items\"\n let-clear=\"clear\"\n ng-multi-label-tmp>\n <ap-select-label-multiple\n displayType=\"label\"\n [selectedItems]=\"items\"\n (removeItem)=\"clear($event)\" />\n </ng-template>\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n <ap-dropdown-item-multiple-one-line\n [text]=\"item\"\n [htmlId]=\"item$.htmlId\"\n [selected]=\"item$.selected\" />\n </ng-template>\n <ng-template ng-header-tmp>\n <ap-dropdown-search-form\n [searchPlaceholder]=\"translation.searchPlaceholder ?? translation.placeholder\"\n [select]=\"select\" />\n </ng-template>\n @if (addLabelEnabled) {\n <ng-template\n let-searchTerm=\"searchTerm\"\n ng-footer-tmp>\n <ap-dropdown-create-new\n [text]=\"translation.createLabel\"\n [searchTerm]=\"searchTerm\"\n (createNew)=\"onCreateLabel($event)\" />\n </ng-template>\n }\n <ng-template ng-notfound-tmp>\n <div class=\"option not-found\">\n <span>{{ select.notFoundText() || 'Not found text' }}</span>\n </div>\n </ng-template>\n <ng-template ng-loadingtext-tmp>\n <div class=\"loading-state\">\n <ap-loader diameter=\"30\" />\n <span>{{ select.loadingText() || 'Loading Items' }}</span>\n </div>\n </ng-template>\n</ng-select>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}:host{max-width:260px;display:flex}.labels-select{width:260px}.labels-select .labels-wrapper{margin-bottom:5px;max-width:221px}::ng-deep .labels-select.ng-select .ng-select-container .ng-value-container{overflow-y:auto;overflow-x:hidden;max-height:171px;padding-left:6px!important;gap:4px}::ng-deep .ng-option{color:#344563!important}::ng-deep .ng-option.ng-option-marked{color:#178dfe!important}.add-label{display:flex;align-items:center;color:#178dfe}.add-label .add-label-icon{padding-right:8px}.add-label-preview{text-overflow:ellipsis;display:block;white-space:nowrap;overflow:hidden}\n"] }]
88
+ }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { addLabelEnabled: [{
94
89
  type: Input
95
90
  }], disabled: [{
96
91
  type: Input
@@ -1 +1 @@
1
- {"version":3,"file":"agorapulse-ui-components-labels-selector.mjs","sources":["../../../libs/ui-components/labels-selector/src/labels-selector.component.ts","../../../libs/ui-components/labels-selector/src/labels-selector.component.html","../../../libs/ui-components/labels-selector/src/agorapulse-ui-components-labels-selector.ts"],"sourcesContent":["import { LoaderComponent } from '@agorapulse/ui-animations';\nimport { LabelComponent } from '@agorapulse/ui-components/labels';\nimport { ApSelectModule } from '@agorapulse/ui-components/select';\nimport { SymbolComponent, SymbolRegistry, apPlus } from '@agorapulse/ui-symbol';\nimport { AsyncPipe } from '@angular/common';\nimport { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgSelectComponent } from '@ng-select/ng-select';\nimport { Observable, Subject } from 'rxjs';\nimport { catchError, debounceTime, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators';\n\nexport interface LabelsSelectorTranslation {\n placeholder: string;\n createLabel: string;\n searchPlaceholder?: string;\n}\n\n@Component({\n selector: 'ap-labels-selector',\n templateUrl: './labels-selector.component.html',\n styleUrls: ['./labels-selector.component.scss'],\n imports: [SymbolComponent, ApSelectModule, LabelComponent, FormsModule, AsyncPipe, LoaderComponent],\n})\nexport class LabelsSelectorComponent implements OnInit, OnChanges {\n @Input() addLabelEnabled: boolean = true;\n @Input() disabled: boolean = false;\n @Input() initialLabels: string[] = [];\n @Input() translation!: LabelsSelectorTranslation;\n @Input() loadingOnSearch: boolean = true;\n @Input() multipleEnabled: boolean = true;\n @Input({\n required: true,\n })\n searchLabelsFunction!: (val: string) => Observable<string[]>;\n\n @Output() createLabel = new EventEmitter<string>();\n @Output() addLabel = new EventEmitter<string>();\n @Output() deleteLabel = new EventEmitter<string>();\n @Output() selectLabels = new EventEmitter<string[]>();\n @Output() searchErrorMessage = new EventEmitter<string>();\n\n @ViewChild('select') select!: NgSelectComponent;\n\n labels: string[] = [];\n labelsInput$: Subject<string> = new Subject<string>();\n labels$!: Observable<string[]>;\n labelsLoading = false;\n\n constructor(\n private changeDetectorRef: ChangeDetectorRef,\n public symbolRegistry: SymbolRegistry\n ) {\n this.symbolRegistry.registerSymbols([apPlus]);\n }\n\n ngOnInit(): void {\n this.labels = this.initialLabels;\n this.setSearchFunction();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.initialLabels?.currentValue) {\n this.labels = this.initialLabels;\n }\n }\n\n onCreateLabel(label: string): void {\n if (label && this.initialLabels.indexOf(label) === -1) {\n const handleTag = (item: string) => this.select.itemsList.addItem(item);\n this.select.select(handleTag(label));\n }\n this.createLabel.emit(label);\n }\n\n onDeleteLabel(label: string) {\n this.deleteLabel.emit(label);\n }\n\n onAddLabel(label: string) {\n this.addLabel.emit(label);\n }\n\n onOpen(): void {\n this.labelsInput$.next('');\n }\n\n onLabelsChange(): void {\n if (!this.multipleEnabled && this.labels.length > 1) {\n this.labels = [this.labels[this.labels.length - 1]];\n }\n this.selectLabels.emit(this.labels);\n this.changeDetectorRef.markForCheck();\n }\n\n setSearchFunction(): void {\n this.labels$ = this.labelsInput$.pipe(\n debounceTime(this.loadingOnSearch ? 400 : 0),\n distinctUntilChanged(),\n tap(() => {\n this.labelsLoading = true;\n }),\n switchMap((term: string) =>\n this.searchLabelsFunction(term).pipe(\n catchError(response => {\n this.searchErrorMessage.emit(response.error ? response.error.message : 'Error');\n return [];\n }),\n map(response => {\n this.labelsLoading = false;\n if (!response || Object.keys(response).length == 0) {\n return [];\n }\n return response;\n })\n )\n )\n );\n }\n}\n","<!-- @JRA [multiple]=\"false\" break the component display and behavior, we use [maxSelectedItems]=\"1\" as efficient workaround -->\n<ng-select\n #select\n class=\"labels-select ap-select\"\n apSelectMultiple\n appendTo=\"body\"\n [clearable]=\"false\"\n [disabled]=\"disabled\"\n [items]=\"(labels$ | async) ?? []\"\n [loading]=\"labelsLoading\"\n [minTermLength]=\"0\"\n [multiple]=\"true\"\n [placeholder]=\"translation.placeholder\"\n [typeahead]=\"labelsInput$\"\n [(ngModel)]=\"labels\"\n (change)=\"onLabelsChange()\"\n (add)=\"onAddLabel($event)\"\n (remove)=\"onDeleteLabel($event)\"\n (open)=\"onOpen()\">\n <ng-template\n let-items=\"items\"\n let-clear=\"clear\"\n ng-multi-label-tmp>\n <ap-select-label-multiple\n displayType=\"label\"\n [selectedItems]=\"items\"\n (removeItem)=\"clear($event)\" />\n </ng-template>\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n <ap-dropdown-item-multiple-one-line\n [text]=\"item\"\n [htmlId]=\"item$.htmlId\"\n [selected]=\"item$.selected\" />\n </ng-template>\n <ng-template ng-header-tmp>\n <ap-dropdown-search-form\n [searchPlaceholder]=\"translation.searchPlaceholder ?? translation.placeholder\"\n [select]=\"select\" />\n </ng-template>\n @if (addLabelEnabled) {\n <ng-template\n let-searchTerm=\"searchTerm\"\n ng-footer-tmp>\n <button\n class=\"create-new\"\n type=\"button\"\n (click)=\"onCreateLabel(searchTerm)\">\n <ap-symbol\n symbolId=\"plus\"\n size=\"sm\" />\n <span>\n {{ translation.createLabel }}\n @if (searchTerm) {\n {{ '&quot;' + searchTerm + '&quot;' }}\n }\n </span>\n </button>\n </ng-template>\n }\n <ng-template ng-notfound-tmp>\n <div class=\"option not-found\">\n <span>{{ select.notFoundText() || 'Not found text' }}</span>\n </div>\n </ng-template>\n <ng-template ng-loadingtext-tmp>\n <div class=\"loading-state\">\n <ap-loader diameter=\"30\" />\n <span>{{ select.loadingText() || 'Loading Items' }}</span>\n </div>\n </ng-template>\n</ng-select>\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-labels-selector.mjs","sources":["../../../libs/ui-components/labels-selector/src/labels-selector.component.ts","../../../libs/ui-components/labels-selector/src/labels-selector.component.html","../../../libs/ui-components/labels-selector/src/agorapulse-ui-components-labels-selector.ts"],"sourcesContent":["import { LoaderComponent } from '@agorapulse/ui-animations';\nimport { LabelComponent } from '@agorapulse/ui-components/labels';\nimport { ApSelectModule } from '@agorapulse/ui-components/select';\nimport { AsyncPipe } from '@angular/common';\nimport { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgSelectComponent } from '@ng-select/ng-select';\nimport { Observable, Subject } from 'rxjs';\nimport { catchError, debounceTime, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators';\n\nexport interface LabelsSelectorTranslation {\n placeholder: string;\n createLabel: string;\n searchPlaceholder?: string;\n}\n\n@Component({\n selector: 'ap-labels-selector',\n templateUrl: './labels-selector.component.html',\n styleUrls: ['./labels-selector.component.scss'],\n imports: [ApSelectModule, LabelComponent, FormsModule, AsyncPipe, LoaderComponent],\n})\nexport class LabelsSelectorComponent implements OnInit, OnChanges {\n @Input() addLabelEnabled: boolean = true;\n @Input() disabled: boolean = false;\n @Input() initialLabels: string[] = [];\n @Input() translation!: LabelsSelectorTranslation;\n @Input() loadingOnSearch: boolean = true;\n @Input() multipleEnabled: boolean = true;\n @Input({\n required: true,\n })\n searchLabelsFunction!: (val: string) => Observable<string[]>;\n\n @Output() createLabel = new EventEmitter<string>();\n @Output() addLabel = new EventEmitter<string>();\n @Output() deleteLabel = new EventEmitter<string>();\n @Output() selectLabels = new EventEmitter<string[]>();\n @Output() searchErrorMessage = new EventEmitter<string>();\n\n @ViewChild('select') select!: NgSelectComponent;\n\n labels: string[] = [];\n labelsInput$: Subject<string> = new Subject<string>();\n labels$!: Observable<string[]>;\n labelsLoading = false;\n\n constructor(private changeDetectorRef: ChangeDetectorRef) {}\n\n ngOnInit(): void {\n this.labels = this.initialLabels;\n this.setSearchFunction();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.initialLabels?.currentValue) {\n this.labels = this.initialLabels;\n }\n }\n\n onCreateLabel(label: string): void {\n if (label && this.initialLabels.indexOf(label) === -1) {\n const handleTag = (item: string) => this.select.itemsList.addItem(item);\n this.select.select(handleTag(label));\n }\n this.createLabel.emit(label);\n }\n\n onDeleteLabel(label: string) {\n this.deleteLabel.emit(label);\n }\n\n onAddLabel(label: string) {\n this.addLabel.emit(label);\n }\n\n onOpen(): void {\n this.labelsInput$.next('');\n }\n\n onLabelsChange(): void {\n if (!this.multipleEnabled && this.labels.length > 1) {\n this.labels = [this.labels[this.labels.length - 1]];\n }\n this.selectLabels.emit(this.labels);\n this.changeDetectorRef.markForCheck();\n }\n\n setSearchFunction(): void {\n this.labels$ = this.labelsInput$.pipe(\n debounceTime(this.loadingOnSearch ? 400 : 0),\n distinctUntilChanged(),\n tap(() => {\n this.labelsLoading = true;\n }),\n switchMap((term: string) =>\n this.searchLabelsFunction(term).pipe(\n catchError(response => {\n this.searchErrorMessage.emit(response.error ? response.error.message : 'Error');\n return [];\n }),\n map(response => {\n this.labelsLoading = false;\n if (!response || Object.keys(response).length == 0) {\n return [];\n }\n return response;\n })\n )\n )\n );\n }\n}\n","<!-- @JRA [multiple]=\"false\" break the component display and behavior, we use [maxSelectedItems]=\"1\" as efficient workaround -->\n<ng-select\n #select\n class=\"labels-select ap-select\"\n apSelectMultiple\n appendTo=\"body\"\n [clearable]=\"false\"\n [disabled]=\"disabled\"\n [items]=\"(labels$ | async) ?? []\"\n [loading]=\"labelsLoading\"\n [minTermLength]=\"0\"\n [multiple]=\"true\"\n [placeholder]=\"translation.placeholder\"\n [typeahead]=\"labelsInput$\"\n [(ngModel)]=\"labels\"\n (change)=\"onLabelsChange()\"\n (add)=\"onAddLabel($event)\"\n (remove)=\"onDeleteLabel($event)\"\n (open)=\"onOpen()\">\n <ng-template\n let-items=\"items\"\n let-clear=\"clear\"\n ng-multi-label-tmp>\n <ap-select-label-multiple\n displayType=\"label\"\n [selectedItems]=\"items\"\n (removeItem)=\"clear($event)\" />\n </ng-template>\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n <ap-dropdown-item-multiple-one-line\n [text]=\"item\"\n [htmlId]=\"item$.htmlId\"\n [selected]=\"item$.selected\" />\n </ng-template>\n <ng-template ng-header-tmp>\n <ap-dropdown-search-form\n [searchPlaceholder]=\"translation.searchPlaceholder ?? translation.placeholder\"\n [select]=\"select\" />\n </ng-template>\n @if (addLabelEnabled) {\n <ng-template\n let-searchTerm=\"searchTerm\"\n ng-footer-tmp>\n <ap-dropdown-create-new\n [text]=\"translation.createLabel\"\n [searchTerm]=\"searchTerm\"\n (createNew)=\"onCreateLabel($event)\" />\n </ng-template>\n }\n <ng-template ng-notfound-tmp>\n <div class=\"option not-found\">\n <span>{{ select.notFoundText() || 'Not found text' }}</span>\n </div>\n </ng-template>\n <ng-template ng-loadingtext-tmp>\n <div class=\"loading-state\">\n <ap-loader diameter=\"30\" />\n <span>{{ select.loadingText() || 'Loading Items' }}</span>\n </div>\n </ng-template>\n</ng-select>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
@@ -1,12 +1,12 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Input, ViewEncapsulation, Component, input, inject, ElementRef, Renderer2, ViewContainerRef, effect, Directive, output, HostListener, ViewChild, ChangeDetectionStrategy, EventEmitter, Output, signal, computed, viewChild, viewChildren, afterRenderEffect, NgModule } from '@angular/core';
2
+ import { inject, input, output, ViewEncapsulation, ChangeDetectionStrategy, Component, Input, ElementRef, Renderer2, ViewContainerRef, effect, Directive, HostListener, ViewChild, EventEmitter, Output, signal, computed, viewChild, viewChildren, afterRenderEffect, NgModule } from '@angular/core';
3
3
  import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';
4
+ import { SymbolRegistry, apPlus, SymbolComponent, apCheck } from '@agorapulse/ui-symbol';
4
5
  import { BadgeComponent } from '@agorapulse/ui-components/badge';
5
6
  import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
6
7
  import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
7
8
  import { AvatarComponent } from '@agorapulse/ui-components/avatar';
8
9
  import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';
9
- import { SymbolRegistry, apCheck, apPlus, SymbolComponent } from '@agorapulse/ui-symbol';
10
10
  import { Subscription, BehaviorSubject, filter } from 'rxjs';
11
11
  import { InputSearchComponent } from '@agorapulse/ui-components/input-search';
12
12
  import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -15,6 +15,25 @@ import { FormsModule } from '@angular/forms';
15
15
  import { LabelComponent } from '@agorapulse/ui-components/labels';
16
16
  import { TagComponent } from '@agorapulse/ui-components/tag';
17
17
 
18
+ class DropdownCreateNewComponent {
19
+ symbolRegistry = inject(SymbolRegistry);
20
+ text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
21
+ searchTerm = input(...(ngDevMode ? [undefined, { debugName: "searchTerm" }] : /* istanbul ignore next */ []));
22
+ createNew = output();
23
+ constructor() {
24
+ this.symbolRegistry.registerSymbols([apPlus]);
25
+ }
26
+ onClick() {
27
+ this.createNew.emit(this.searchTerm() ?? '');
28
+ }
29
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownCreateNewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
30
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.16", type: DropdownCreateNewComponent, isStandalone: true, selector: "ap-dropdown-create-new", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { createNew: "createNew" }, ngImport: i0, template: "<button\n class=\"create-new\"\n type=\"button\"\n (click)=\"onClick()\">\n <ap-symbol\n symbolId=\"plus\"\n size=\"sm\" />\n <span>\n {{ text() }}\n {{ '&quot;' + (searchTerm() ?? '') + '&quot;' }}\n </span>\n</button>\n", styles: ["ap-dropdown-create-new .create-new{display:flex;align-items:center;border:none;width:100%;background-color:transparent;gap:var(--ref-spacing-xxxs);color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);cursor:pointer;padding:var(--comp-select-search-bar-bottom-link-margin-top) var(--comp-select-search-bar-bottom-link-padding-horizontal) var(--comp-select-search-bar-bottom-link-padding-bottom) var(--comp-select-search-bar-bottom-link-padding-horizontal);line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm)}ap-dropdown-create-new .create-new:hover{color:var(--ref-color-electric-blue-100)}ap-dropdown-create-new .create-new:active{color:var(--ref-color-electric-blue-150)}ap-dropdown-create-new .create-new span{text-align:left}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
31
+ }
32
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownCreateNewComponent, decorators: [{
33
+ type: Component,
34
+ args: [{ selector: 'ap-dropdown-create-new', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent], template: "<button\n class=\"create-new\"\n type=\"button\"\n (click)=\"onClick()\">\n <ap-symbol\n symbolId=\"plus\"\n size=\"sm\" />\n <span>\n {{ text() }}\n {{ '&quot;' + (searchTerm() ?? '') + '&quot;' }}\n </span>\n</button>\n", styles: ["ap-dropdown-create-new .create-new{display:flex;align-items:center;border:none;width:100%;background-color:transparent;gap:var(--ref-spacing-xxxs);color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);cursor:pointer;padding:var(--comp-select-search-bar-bottom-link-margin-top) var(--comp-select-search-bar-bottom-link-padding-horizontal) var(--comp-select-search-bar-bottom-link-padding-bottom) var(--comp-select-search-bar-bottom-link-padding-horizontal);line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm)}ap-dropdown-create-new .create-new:hover{color:var(--ref-color-electric-blue-100)}ap-dropdown-create-new .create-new:active{color:var(--ref-color-electric-blue-150)}ap-dropdown-create-new .create-new span{text-align:left}\n"] }]
35
+ }], ctorParameters: () => [], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], createNew: [{ type: i0.Output, args: ["createNew"] }] } });
36
+
18
37
  class DropdownGroupItemComponent {
19
38
  groupLabel;
20
39
  groupTag;
@@ -593,15 +612,12 @@ class DropdownSearchFormComponent {
593
612
  }
594
613
  });
595
614
  }
596
- onCreateNew() {
597
- this.createNew.emit(this.searchTermSignal());
598
- }
599
615
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownSearchFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
600
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DropdownSearchFormComponent, isStandalone: true, selector: "ap-dropdown-search-form", inputs: { searchPlaceholder: "searchPlaceholder", createNewEnabled: "createNewEnabled", createText: "createText", select: "select" }, outputs: { createNew: "createNew" }, viewQueries: [{ propertyName: "inputSearch", first: true, predicate: InputSearchComponent, descendants: true }], ngImport: i0, template: "<ap-input-search\n class=\"dropdown-search-input\"\n [ngModel]=\"searchTermSignal()\"\n [placeholder]=\"searchPlaceholder\"\n (ngModelChange)=\"searchTerm$.next($event)\" />\n\n@if (createNewEnabled) {\n <button\n class=\"create-new\"\n type=\"button\"\n (click)=\"onCreateNew()\">\n <ap-symbol\n symbolId=\"plus\"\n size=\"sm\" />\n <span>\n {{ createText }}\n @if (searchTermSignal()) {\n {{ '&quot;' + searchTermSignal() + '&quot;' }}\n }\n </span>\n </button>\n}\n", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input:placeholder-shown{text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: FormsModule }, { 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: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
616
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: DropdownSearchFormComponent, isStandalone: true, selector: "ap-dropdown-search-form", inputs: { searchPlaceholder: "searchPlaceholder", createNewEnabled: "createNewEnabled", createText: "createText", select: "select" }, outputs: { createNew: "createNew" }, viewQueries: [{ propertyName: "inputSearch", first: true, predicate: InputSearchComponent, descendants: true }], ngImport: i0, template: "<ap-input-search\n class=\"dropdown-search-input\"\n [ngModel]=\"searchTermSignal()\"\n [placeholder]=\"searchPlaceholder\"\n (ngModelChange)=\"searchTerm$.next($event)\" />\n\n@if (createNewEnabled) {\n <ap-dropdown-create-new\n [text]=\"createText\"\n [searchTerm]=\"searchTermSignal()\"\n (createNew)=\"createNew.emit($event)\" />\n}\n\n", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input:placeholder-shown{text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }, { kind: "component", type: DropdownCreateNewComponent, selector: "ap-dropdown-create-new", inputs: ["text", "searchTerm"], outputs: ["createNew"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
601
617
  }
602
618
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: DropdownSearchFormComponent, decorators: [{
603
619
  type: Component,
604
- args: [{ selector: 'ap-dropdown-search-form', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, FormsModule, InputSearchComponent], template: "<ap-input-search\n class=\"dropdown-search-input\"\n [ngModel]=\"searchTermSignal()\"\n [placeholder]=\"searchPlaceholder\"\n (ngModelChange)=\"searchTerm$.next($event)\" />\n\n@if (createNewEnabled) {\n <button\n class=\"create-new\"\n type=\"button\"\n (click)=\"onCreateNew()\">\n <ap-symbol\n symbolId=\"plus\"\n size=\"sm\" />\n <span>\n {{ createText }}\n @if (searchTermSignal()) {\n {{ '&quot;' + searchTermSignal() + '&quot;' }}\n }\n </span>\n </button>\n}\n", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input:placeholder-shown{text-overflow:ellipsis}\n"] }]
620
+ args: [{ selector: 'ap-dropdown-search-form', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [FormsModule, InputSearchComponent, DropdownCreateNewComponent], template: "<ap-input-search\n class=\"dropdown-search-input\"\n [ngModel]=\"searchTermSignal()\"\n [placeholder]=\"searchPlaceholder\"\n (ngModelChange)=\"searchTerm$.next($event)\" />\n\n@if (createNewEnabled) {\n <ap-dropdown-create-new\n [text]=\"createText\"\n [searchTerm]=\"searchTermSignal()\"\n (createNew)=\"createNew.emit($event)\" />\n}\n\n", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input:placeholder-shown{text-overflow:ellipsis}\n"] }]
605
621
  }], ctorParameters: () => [], propDecorators: { searchPlaceholder: [{
606
622
  type: Input
607
623
  }], createNewEnabled: [{
@@ -735,6 +751,7 @@ class ApSelectModule {
735
751
  SelectLabelSingleComponent,
736
752
  SelectLabelMultipleComponent,
737
753
  DropdownSearchFormComponent,
754
+ DropdownCreateNewComponent,
738
755
  DropdownGroupItemComponent,
739
756
  NgSelectModule], exports: [SelectMultipleDirective,
740
757
  SelectSingleDirective,
@@ -745,6 +762,7 @@ class ApSelectModule {
745
762
  SelectLabelSingleComponent,
746
763
  SelectLabelMultipleComponent,
747
764
  DropdownSearchFormComponent,
765
+ DropdownCreateNewComponent,
748
766
  DropdownGroupItemComponent,
749
767
  NgSelectModule] });
750
768
  static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: ApSelectModule, imports: [DropdownItemSingleOneLineComponent,
@@ -754,6 +772,7 @@ class ApSelectModule {
754
772
  SelectLabelSingleComponent,
755
773
  SelectLabelMultipleComponent,
756
774
  DropdownSearchFormComponent,
775
+ DropdownCreateNewComponent,
757
776
  DropdownGroupItemComponent,
758
777
  NgSelectModule, NgSelectModule] });
759
778
  }
@@ -770,6 +789,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
770
789
  SelectLabelSingleComponent,
771
790
  SelectLabelMultipleComponent,
772
791
  DropdownSearchFormComponent,
792
+ DropdownCreateNewComponent,
773
793
  DropdownGroupItemComponent,
774
794
  NgSelectModule,
775
795
  ],
@@ -783,6 +803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
783
803
  SelectLabelSingleComponent,
784
804
  SelectLabelMultipleComponent,
785
805
  DropdownSearchFormComponent,
806
+ DropdownCreateNewComponent,
786
807
  DropdownGroupItemComponent,
787
808
  NgSelectModule,
788
809
  ],
@@ -793,5 +814,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
793
814
  * Generated bundle index. Do not edit.
794
815
  */
795
816
 
796
- export { ApSelectModule, DropdownGroupItemComponent, DropdownItemMultipleOneLineComponent, DropdownItemMultipleTwoLinesComponent, DropdownItemSingleOneLineComponent, DropdownItemSingleTwoLinesComponent, DropdownSearchFormComponent, SelectBaseDirective, SelectLabelMultipleComponent, SelectLabelSingleComponent, SelectMultipleDirective, SelectSingleDirective };
817
+ export { ApSelectModule, DropdownCreateNewComponent, DropdownGroupItemComponent, DropdownItemMultipleOneLineComponent, DropdownItemMultipleTwoLinesComponent, DropdownItemSingleOneLineComponent, DropdownItemSingleTwoLinesComponent, DropdownSearchFormComponent, SelectBaseDirective, SelectLabelMultipleComponent, SelectLabelSingleComponent, SelectMultipleDirective, SelectSingleDirective };
797
818
  //# sourceMappingURL=agorapulse-ui-components-select.mjs.map