@ng-matero/ng-select 1.0.0 → 1.0.1

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.
Files changed (7) hide show
  1. package/README.md +36 -5
  2. package/_index.scss +6 -0
  3. package/fesm2022/ng-matero-ng-select.mjs +22 -17
  4. package/fesm2022/ng-matero-ng-select.mjs.map +1 -1
  5. package/index.d.ts +1 -0
  6. package/package.json +1 -1
  7. package/src/lib/ng-select.scss +2 -3
package/README.md CHANGED
@@ -28,6 +28,37 @@ npm install @ng-matero/ng-select --save
28
28
  @use '@ng-matero/ng-select';
29
29
  ```
30
30
 
31
+ <details>
32
+ <summary><b>CSS Variables</b></summary>
33
+
34
+ ```css
35
+ --ns-multi-value-text-color
36
+ --ns-multi-value-background-color
37
+ --ns-multi-value-remove-hover-text-color
38
+ --ns-multi-value-remove-hover-background-color
39
+ --ns-control-background-color
40
+ --ns-control-outline-color
41
+ --ns-control-hover-outline-color
42
+ --ns-control-focus-outline-color
43
+ --ns-control-focus-shadow
44
+ --ns-control-disabled-outline-color
45
+ --ns-control-disabled-background-color
46
+ --ns-placeholder-text-color
47
+ --ns-indicator-color
48
+ --ns-indicator-hover-color
49
+ --ns-indicator-focus-color
50
+ --ns-indicator-focus-hover-color
51
+ --ns-panel-background-color
52
+ --ns-panel-shadow
53
+ --ns-option-hover-background-color
54
+ --ns-option-selected-text-color
55
+ --ns-option-selected-background-color
56
+ --ns-option-disabled-text-color
57
+ --ns-optgroup-text-color
58
+ ```
59
+
60
+ </details>
61
+
31
62
  ## Usage
32
63
 
33
64
  ```ts
@@ -103,7 +134,7 @@ Use template directives to customize the rendering of specific components:
103
134
  | `[loading]` | `boolean` | | You can set the loading state from the outside (e.g. async items loading). |
104
135
  | `[loadingText]` | `string` | `'Loading...'` | Set custom text when for loading items. |
105
136
  | `[markFirst]` | `boolean` | `true` | Marks first item as focused when opening/filtering. |
106
- | `[maxSelectedItems]` | `number` | | When `multiple = true`, allows to set a limit number of selection. |
137
+ | `[maxSelectedItems]` | `number` | | When `multiple` is `true`, allows to set a limit number of selection. |
107
138
  | `[hideSelected]` | `boolean` | `false` | Allows to hide selected items. |
108
139
  | `[multiple]` | `boolean` | `false` | Allows to select multiple items. |
109
140
  | `[notFoundText]` | `string` | `'No items found'` | Set custom text when filter returns empty result. |
@@ -114,7 +145,7 @@ Use template directives to customize the rendering of specific components:
114
145
  | `[searchWhileComposing]` | `boolean` | `true` | Whether items should be filtered while composition started. |
115
146
  | `[trackByFn]` | `TrackByFn` | `null` | Provide custom trackBy function. |
116
147
  | `[clearSearchOnAdd]` | `boolean` | `true` | Clears search input when item is selected. Default `false` when `closeOnSelect` is `false`. |
117
- | `[editableSearchTerm]` | `boolean` | `false` | Allow to edit search query if option selected. Works only if `[multiple]="false"`. |
148
+ | `[editableSearchTerm]` | `boolean` | `false` | Allow to edit search query if option selected. Works only if `multiple` is `false`. |
118
149
  | `[selectOnTab]` | `boolean` | `true` | Select marked dropdown item using tab. |
119
150
  | `[openOnEnter]` | `boolean` | `true` | Open dropdown using enter. |
120
151
  | `[typeahead]` | `Subject` | | Custom autocomplete or advanced filter. |
@@ -124,7 +155,7 @@ Use template directives to customize the rendering of specific components:
124
155
  | `[bufferAmount]` | `number` | `4` | Used in virtual scrolling, the bufferAmount property controls the number of items preloaded in the background to ensure smoother and more seamless scrolling. |
125
156
  | `[keyDownFn]` | `(e: KeyboardEvent) => boolean` | `true` | Provide custom keyDown function. Executed before default handler. Return false to suppress execution of default key down handlers. |
126
157
  | `[fixedPlaceholder]` | `boolean` | `false` | Set placeholder visible even when an item is selected. |
127
- | `[deselectOnClick]` | `boolean` | `false` | Deselects a selected item when it is clicked in the dropdown. Default `true` when `[multiple]="true"`. |
158
+ | `[deselectOnClick]` | `boolean` | `false` | Deselects a selected item when it is clicked in the dropdown. Default `true` when `multiple` is `true`. |
128
159
  | `[preventToggleOnRightClick]` | `boolean` | `false` | Prevent opening of ng-select on right mouse click. |
129
160
  | `[tabIndex]` | `number` | | The tabindex of ng-select input. |
130
161
  | `[inputId]` | `string` | | The input id. |
@@ -142,8 +173,8 @@ Use template directives to customize the rendering of specific components:
142
173
  | `(change)` | `any` | Fired on model change. Outputs whole model. |
143
174
  | `(open)` | `void` | Fired on select dropdown open. |
144
175
  | `(close)` | `void` | Fired on select dropdown close. |
145
- | `(add)` | `any` | Fired when item is added while `[multiple]="true"`. Outputs added item. |
146
- | `(remove)` | `any` | Fired when item is removed while `[multiple]="true"`. |
176
+ | `(add)` | `any` | Fired when item is added while `multiple` is `true`. Outputs added item. |
177
+ | `(remove)` | `any` | Fired when item is removed while `multiple` is `true`. |
147
178
  | `(search)` | `SearchEvent` | Fired while typing search term. Outputs search term with filtered items. |
148
179
  | `(clear)` | `void` | Fired on clear icon click. |
149
180
  | `(scroll)` | `ScrollEvent` | Fired when scrolled. Provides the start and end index of the currently available items. Can be used for loading more items in chunks before the user has scrolled all the way to the bottom of the list. |
package/_index.scss CHANGED
@@ -149,10 +149,12 @@
149
149
 
150
150
  &.ng-select-bottom {
151
151
  top: 100%;
152
+ margin: 8px 0;
152
153
  }
153
154
 
154
155
  &.ng-select-top {
155
156
  bottom: 100%;
157
+ margin: 8px 0;
156
158
  }
157
159
 
158
160
  &.ng-select-right {
@@ -224,3 +226,7 @@
224
226
  display: flex;
225
227
  gap: 8px;
226
228
  }
229
+
230
+ .ng-select-virtual-scroll-content {
231
+ padding: 4px 0;
232
+ }
package/fesm2022/ng-matero-ng-select.mjs CHANGED
@@ -1390,11 +1390,10 @@ class NgSelectPanelUtils {
1390
1390
  return null;
1391
1391
  }
1392
1392
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectPanelUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1393
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectPanelUtils, providedIn: 'root' });
1393
+ static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectPanelUtils });
1394
1394
  }
1395
1395
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectPanelUtils, decorators: [{
1396
- type: Injectable,
1397
- args: [{ providedIn: 'root' }]
1396
+ type: Injectable
1398
1397
  }] });
1399
1398
 
1400
1399
  const CSS_POSITIONS = ['top', 'right', 'bottom', 'left'];
@@ -1552,23 +1551,28 @@ class NgSelectPanel {
1552
1551
  this._zone.runOutsideAngular(() => {
1553
1552
  merge(fromEvent(this._document, 'touchstart', { capture: true }), fromEvent(this._document, 'click', { capture: true }))
1554
1553
  .pipe(takeUntil(this._destroy$))
1555
- .subscribe($event => this._checkToClose($event));
1554
+ .subscribe(e => this._checkToClose(e));
1556
1555
  });
1557
1556
  }
1558
- _checkToClose($event) {
1559
- if (this._select.contains($event.target) || this._dropdown.contains($event.target)) {
1557
+ _checkToClose(e) {
1558
+ if (this._select.contains(e.target) || this._dropdown.contains(e.target)) {
1560
1559
  return;
1561
1560
  }
1562
- const path = $event.path || ($event.composedPath && $event.composedPath());
1563
- if ($event.target &&
1564
- $event.target.shadowRoot &&
1565
- path &&
1566
- path[0] &&
1567
- this._select.contains(path[0])) {
1561
+ const path = e.path || (e.composedPath && e.composedPath());
1562
+ if (e.target && e.target.shadowRoot && path && path[0] && this._select.contains(path[0])) {
1563
+ return;
1564
+ }
1565
+ if (this._coordinatesWithin(e, this._dropdown) || this._coordinatesWithin(e, this._select)) {
1568
1566
  return;
1569
1567
  }
1570
1568
  this._zone.run(() => this.outsideClick.emit());
1571
1569
  }
1570
+ _coordinatesWithin(e, element) {
1571
+ const clickX = e.clientX;
1572
+ const clickY = e.clientY;
1573
+ const rect = element.getBoundingClientRect();
1574
+ return (clickX >= rect.left && clickX <= rect.right && clickY >= rect.top && clickY <= rect.bottom);
1575
+ }
1572
1576
  _onItemsChange(items, firstChange) {
1573
1577
  this.items = items || [];
1574
1578
  this._scrollToEndFired = false;
@@ -1738,7 +1742,7 @@ class NgSelectPanel {
1738
1742
  });
1739
1743
  }
1740
1744
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelectPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
1741
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: NgSelectPanel, isStandalone: true, selector: "ng-select-panel", inputs: { listboxId: "listboxId", items: "items", markedItem: "markedItem", position: "position", appendTo: "appendTo", bufferAmount: "bufferAmount", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute], headerTemplate: "headerTemplate", footerTemplate: "footerTemplate", filterValue: "filterValue" }, outputs: { update: "update", scroll: "scroll", scrollToEnd: "scrollToEnd", outsideClick: "outsideClick" }, host: { properties: { "class.ng-select-multiple": "multiple" }, classAttribute: "ng-select-panel" }, viewQueries: [{ propertyName: "scrollHostElRef", first: true, predicate: ["scrollHost"], descendants: true, read: ElementRef, static: true }, { propertyName: "scrollContentElRef", first: true, predicate: ["scrollContent"], descendants: true, read: ElementRef, static: true }, { propertyName: "scrollSpacerElRef", first: true, predicate: ["scrollSpacer"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
1745
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: NgSelectPanel, isStandalone: true, selector: "ng-select-panel", inputs: { listboxId: "listboxId", items: "items", markedItem: "markedItem", position: "position", appendTo: "appendTo", bufferAmount: "bufferAmount", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute], headerTemplate: "headerTemplate", footerTemplate: "footerTemplate", filterValue: "filterValue" }, outputs: { update: "update", scroll: "scroll", scrollToEnd: "scrollToEnd", outsideClick: "outsideClick" }, host: { properties: { "class.ng-select-multiple": "multiple" }, classAttribute: "ng-select-panel" }, providers: [NgSelectPanelUtils], viewQueries: [{ propertyName: "scrollHostElRef", first: true, predicate: ["scrollHost"], descendants: true, read: ElementRef, static: true }, { propertyName: "scrollContentElRef", first: true, predicate: ["scrollContent"], descendants: true, read: ElementRef, static: true }, { propertyName: "scrollSpacerElRef", first: true, predicate: ["scrollSpacer"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
1742
1746
  @if (headerTemplate) {
1743
1747
  <div class="ng-select-panel-header">
1744
1748
  <ng-container
@@ -1755,7 +1759,6 @@ class NgSelectPanel {
1755
1759
  [attr.aria-multiselectable]="multiple"
1756
1760
  role="listbox"
1757
1761
  >
1758
- <div #scrollSpacer [class.ng-select-virtual-scroll-spacer]="virtualScroll"></div>
1759
1762
  <div
1760
1763
  #scrollContent
1761
1764
  [class.ng-select-virtual-scroll-content]="virtualScroll && items.length"
@@ -1763,6 +1766,7 @@ class NgSelectPanel {
1763
1766
  >
1764
1767
  <ng-content />
1765
1768
  </div>
1769
+ <div #scrollSpacer [class.ng-select-virtual-scroll-spacer]="virtualScroll"></div>
1766
1770
  </div>
1767
1771
  @if (footerTemplate) {
1768
1772
  <div class="ng-select-panel-footer">
@@ -1795,7 +1799,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
1795
1799
  [attr.aria-multiselectable]="multiple"
1796
1800
  role="listbox"
1797
1801
  >
1798
- <div #scrollSpacer [class.ng-select-virtual-scroll-spacer]="virtualScroll"></div>
1799
1802
  <div
1800
1803
  #scrollContent
1801
1804
  [class.ng-select-virtual-scroll-content]="virtualScroll && items.length"
@@ -1803,6 +1806,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
1803
1806
  >
1804
1807
  <ng-content />
1805
1808
  </div>
1809
+ <div #scrollSpacer [class.ng-select-virtual-scroll-spacer]="virtualScroll"></div>
1806
1810
  </div>
1807
1811
  @if (footerTemplate) {
1808
1812
  <div class="ng-select-panel-footer">
@@ -1820,6 +1824,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
1820
1824
  },
1821
1825
  encapsulation: ViewEncapsulation.None,
1822
1826
  changeDetection: ChangeDetectionStrategy.OnPush,
1827
+ providers: [NgSelectPanelUtils],
1823
1828
  }]
1824
1829
  }], propDecorators: { listboxId: [{
1825
1830
  type: Input
@@ -2962,7 +2967,7 @@ class NgSelect {
2962
2967
  useExisting: forwardRef(() => NgSelect),
2963
2968
  multi: true,
2964
2969
  },
2965
- ], queries: [{ propertyName: "optionTemplate", first: true, predicate: NgSelectOptionTemplate, descendants: true, read: TemplateRef }, { propertyName: "optgroupTemplate", first: true, predicate: NgSelectOptgroupTemplate, descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: NgSelectLabelTemplate, descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemplate", first: true, predicate: NgSelectMultiLabelTemplate, descendants: true, read: TemplateRef }, { propertyName: "panelHeaderTemplate", first: true, predicate: NgSelectPanelHeaderTemplate, descendants: true, read: TemplateRef }, { propertyName: "panelFooterTemplate", first: true, predicate: NgSelectPanelFooterTemplate, descendants: true, read: TemplateRef }, { propertyName: "notFoundTemplate", first: true, predicate: NgSelectNotFoundTemplate, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: NgSelectPlaceholderTemplate, descendants: true, read: TemplateRef }, { propertyName: "typeToSearchTemplate", first: true, predicate: NgSelectTypeToSearchTemplate, descendants: true, read: TemplateRef }, { propertyName: "loadingTextTemplate", first: true, predicate: NgSelectLoadingTextTemplate, descendants: true, read: TemplateRef }, { propertyName: "tagTemplate", first: true, predicate: NgSelectTagTemplate, descendants: true, read: TemplateRef }, { propertyName: "loadingTemplate", first: true, predicate: NgSelectLoadingTemplate, descendants: true, read: TemplateRef }, { propertyName: "clearButtonTemplate", first: true, predicate: NgSelectClearButtonTemplate, descendants: true, read: TemplateRef }, { propertyName: "ngOptions", predicate: NgSelectOption, descendants: true }], viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: i0.forwardRef(() => NgSelectPanel), descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n\n<div class=\"ng-select-visually-hidden\">\n <div role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n @if (isOpen && showNoItemsFound) {\n {{ notFoundText }}\n }\n </div>\n\n <div [attr.id]=\"_viewValuesId\">{{ selectedViewValuesStr }}</div>\n</div>\n\n<div\n class=\"ng-select-control\"\n [class.ng-select-has-value]=\"hasValue\"\n (mousedown)=\"handleMousedown($event)\"\n>\n <div class=\"ng-select-value-container\">\n @if ((selectedItems.length === 0 && !searchTerm) || fixedPlaceholder) {\n <ng-template #defaultPlaceholderTemplate>\n <div class=\"ng-select-placeholder\">{{ placeholder }}</div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n }\n\n @if ((!multiLabelTemplate || !multiple) && selectedItems.length > 0) {\n @for (item of selectedItems; track trackByOption($index, item)) {\n <div class=\"ng-select-value\" [class.ng-select-value-disabled]=\"item.disabled\">\n <ng-template #defaultLabelTemplate>\n <span\n class=\"ng-select-value-label\"\n [ngSelectLabelValue]=\"item.label || ''\"\n [ngSelectLabelEscape]=\"escapeHTML\"\n ></span>\n @if (multiple) {\n <span class=\"ng-select-value-remove\" (click)=\"unselect(item)\" role=\"button\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n />\n </svg>\n </span>\n }\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"labelTemplate || defaultLabelTemplate\"\n [ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\"\n />\n </div>\n }\n }\n\n @if (multiple && multiLabelTemplate && selectedValues.length > 0) {\n <ng-template\n [ngTemplateOutlet]=\"multiLabelTemplate\"\n [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\"\n />\n }\n\n <div class=\"ng-select-input-container\">\n <input\n #searchInput\n class=\"ng-select-input\"\n [disabled]=\"disabled\"\n [readOnly]=\"!searchable || itemsList.maxItemsSelected\"\n [value]=\"searchTerm ?? ''\"\n (change)=\"$event.stopPropagation()\"\n (input)=\"filter(searchInput.value)\"\n (focus)=\"onInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n (compositionend)=\"onCompositionEnd(searchInput.value)\"\n (compositionstart)=\"onCompositionStart()\"\n [tabIndex]=\"tabIndex\"\n [attr.id]=\"inputId\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-haspopup]=\"panelDisabled ? 'false' : 'listbox'\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"isOpen ? _listboxId : null\"\n [attr.aria-activedescendant]=\"isOpen ? itemsList.markedItem?.htmlId : null\"\n aria-autocomplete=\"list\"\n role=\"combobox\"\n />\n </div>\n </div>\n\n @if (loading) {\n <ng-template #defaultLoadingSpinnerTemplate>\n <div class=\"ng-select-spinner\"></div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"loadingTemplate || defaultLoadingSpinnerTemplate\" />\n }\n\n @if (showClearButton) {\n @if (clearButtonTemplate) {\n <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n } @else {\n <span #clearButton class=\"ng-select-clear\" [title]=\"clearAllText\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n />\n </svg>\n </span>\n }\n }\n\n @if (!panelDisabled) {\n <span class=\"ng-select-arrow\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"\n />\n </svg>\n </span>\n }\n</div>\n\n@if (isOpen) {\n <ng-select-panel\n [class]=\"appendTo ? _classList : null\"\n [multiple]=\"multiple\"\n [listboxId]=\"_listboxId\"\n [virtualScroll]=\"virtualScroll\"\n [bufferAmount]=\"bufferAmount\"\n [appendTo]=\"appendTo\"\n [position]=\"panelPosition\"\n [headerTemplate]=\"panelHeaderTemplate\"\n [footerTemplate]=\"panelFooterTemplate\"\n [filterValue]=\"searchTerm\"\n [items]=\"itemsList.filteredItems\"\n [markedItem]=\"itemsList.markedItem\"\n (update)=\"viewPortItems = $event\"\n (scroll)=\"scroll.emit($event)\"\n (scrollToEnd)=\"scrollToEnd.emit()\"\n (outsideClick)=\"close()\"\n >\n @for (item of viewPortItems; track trackByOption($index, item)) {\n <div\n class=\"ng-select-option\"\n [class.ng-select-option-disabled]=\"item.disabled\"\n [class.ng-select-option-selected]=\"item.selected\"\n [class.ng-select-optgroup]=\"item.children\"\n [class.ng-select-option]=\"!item.children\"\n [class.ng-select-option-child]=\"!!item.parent\"\n [class.ng-select-option-marked]=\"item === itemsList.markedItem\"\n [attr.id]=\"item.htmlId\"\n [attr.role]=\"item.children ? 'group' : 'option'\"\n [attr.aria-disabled]=\"item.disabled ?? false\"\n [attr.aria-selected]=\"item.selected ?? false\"\n [attr.aria-setsize]=\"itemsList.filteredItems.length\"\n [attr.aria-posinset]=\"(item.index || 0) + 1\"\n (click)=\"toggleItem(item)\"\n (mouseover)=\"onItemHover(item)\"\n >\n <ng-template #defaultOptionTemplate>\n <span\n class=\"ng-select-option-label\"\n [ngSelectLabelValue]=\"item.label || ''\"\n [ngSelectLabelEscape]=\"escapeHTML\"\n ></span>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"\n item.children\n ? optgroupTemplate || defaultOptionTemplate\n : optionTemplate || defaultOptionTemplate\n \"\n [ngTemplateOutletContext]=\"{\n item: item.value,\n item$: item,\n index: item.index,\n searchTerm: searchTerm,\n }\"\n />\n </div>\n }\n\n @if (showAddTag) {\n <div\n class=\"ng-select-option ng-select-tag-option\"\n [class.ng-select-option-marked]=\"!itemsList.markedItem\"\n role=\"option\"\n [attr.aria-disabled]=\"false\"\n [attr.aria-selected]=\"false\"\n (click)=\"selectTag()\"\n (mouseover)=\"itemsList.unmarkItem()\"\n >\n <ng-template #defaultTagTemplate>\n <span class=\"ng-select-tag-option-label\">{{ addTagText }}</span>\n <span class=\"ng-select-tag-option-value\">\"{{ searchTerm }}\"</span>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"tagTemplate || defaultTagTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n </div>\n }\n\n @if (showNoItemsFound) {\n <ng-template #defaultNotFoundTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ notFoundText }}</div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"notFoundTemplate || defaultNotFoundTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n }\n @if (showTypeToSearch) {\n <ng-template #defaultTypeToSearchTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ typeToSearchText }}</div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate || defaultTypeToSearchTemplate\" />\n }\n @if (loading && itemsList.filteredItems.length === 0) {\n <ng-template #defaultLoadingTextTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ loadingText }}</div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n }\n </ng-select-panel>\n}\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block}.ng-select-control{box-sizing:border-box;position:relative;display:flex;width:100%;outline:none;overflow:hidden}.ng-select-opened .ng-select-control{z-index:1010}.ng-select-value-container{position:relative;display:flex;flex:1;flex-wrap:wrap;align-items:center}.ng-select-input-container{position:relative;box-sizing:border-box}.ng-select-value-remove svg{width:14px;height:14px}.ng-select-input{width:100%;padding:0;background:transparent;border:none;box-shadow:none;outline:none;cursor:default}.ng-select-input[readonly]{width:0;-webkit-user-select:unset;user-select:unset}.ng-select-clear,.ng-select-arrow{position:relative;-webkit-user-select:none;user-select:none}.ng-select-clear svg,.ng-select-arrow svg{width:20px;height:20px}.ng-select-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}.ng-select-disabled .ng-select-placeholder,.ng-select-disabled .ng-select-value{-webkit-user-select:none;user-select:none}.ng-select-disabled .ng-select-clear,.ng-select-disabled .ng-select-arrow{pointer-events:none}.ng-select-filtered .ng-select-placeholder,.ng-select-has-value .ng-select-placeholder{display:none}.ng-select-single.ng-select-filtered .ng-select-value{visibility:hidden}.ng-select-single .ng-select-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-single .ng-select-input-container{position:absolute;left:0;right:0}.ng-select-multiple .ng-select-placeholder{position:absolute}.ng-select-multiple .ng-select-value{display:inline-flex;align-items:center;overflow:hidden}.ng-select-multiple .ng-select-value.ng-select-value-disabled{-webkit-user-select:none;user-select:none}.ng-select-multiple.ng-select-disabled .ng-select-value-remove,.ng-select-multiple .ng-select-value-disabled .ng-select-value-remove{display:none}.ng-select-multiple .ng-select-input-container{flex:1}.ng-select-panel{box-sizing:border-box;position:absolute;z-index:1080;width:100%;opacity:0;-webkit-overflow-scrolling:touch}.ng-select-listbox{max-height:300px;overflow-y:auto}.ng-select-option,.ng-select-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-option-highlighted{font-weight:700;text-decoration:underline}.ng-select-option-label:empty:before{content:\"\\200b\"}.ng-select-virtual-scroll-host{position:relative;overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.ng-select-virtual-scroll-content{position:absolute;top:0;left:0;width:100%;height:100%}.ng-select-virtual-scroll-spacer{width:1px;opacity:0}.ng-select-spinner{position:relative;width:16px;height:16px;margin:auto 4px;border-radius:50%;border:2px solid rgba(66,66,66,.2);border-left-color:#666;animation:ng-select-spinning .8s infinite linear}@keyframes ng-select-spinning{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgSelectLabelRenderer, selector: "[ngSelectLabelValue]", inputs: ["ngSelectLabelValue", "ngSelectLabelEscape"] }, { kind: "component", type: NgSelectPanel, selector: "ng-select-panel", inputs: ["listboxId", "items", "markedItem", "position", "appendTo", "bufferAmount", "virtualScroll", "multiple", "headerTemplate", "footerTemplate", "filterValue"], outputs: ["update", "scroll", "scrollToEnd", "outsideClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2970
+ ], queries: [{ propertyName: "optionTemplate", first: true, predicate: NgSelectOptionTemplate, descendants: true, read: TemplateRef }, { propertyName: "optgroupTemplate", first: true, predicate: NgSelectOptgroupTemplate, descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: NgSelectLabelTemplate, descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemplate", first: true, predicate: NgSelectMultiLabelTemplate, descendants: true, read: TemplateRef }, { propertyName: "panelHeaderTemplate", first: true, predicate: NgSelectPanelHeaderTemplate, descendants: true, read: TemplateRef }, { propertyName: "panelFooterTemplate", first: true, predicate: NgSelectPanelFooterTemplate, descendants: true, read: TemplateRef }, { propertyName: "notFoundTemplate", first: true, predicate: NgSelectNotFoundTemplate, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: NgSelectPlaceholderTemplate, descendants: true, read: TemplateRef }, { propertyName: "typeToSearchTemplate", first: true, predicate: NgSelectTypeToSearchTemplate, descendants: true, read: TemplateRef }, { propertyName: "loadingTextTemplate", first: true, predicate: NgSelectLoadingTextTemplate, descendants: true, read: TemplateRef }, { propertyName: "tagTemplate", first: true, predicate: NgSelectTagTemplate, descendants: true, read: TemplateRef }, { propertyName: "loadingTemplate", first: true, predicate: NgSelectLoadingTemplate, descendants: true, read: TemplateRef }, { propertyName: "clearButtonTemplate", first: true, predicate: NgSelectClearButtonTemplate, descendants: true, read: TemplateRef }, { propertyName: "ngOptions", predicate: NgSelectOption, descendants: true }], viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: i0.forwardRef(() => NgSelectPanel), descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n\n<div class=\"ng-select-visually-hidden\">\n <div role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n @if (isOpen && showNoItemsFound) {\n {{ notFoundText }}\n }\n </div>\n\n <div [attr.id]=\"_viewValuesId\">{{ selectedViewValuesStr }}</div>\n</div>\n\n<div\n class=\"ng-select-control\"\n [class.ng-select-has-value]=\"hasValue\"\n (mousedown)=\"handleMousedown($event)\"\n>\n <div class=\"ng-select-value-container\">\n @if ((selectedItems.length === 0 && !searchTerm) || fixedPlaceholder) {\n <ng-template #defaultPlaceholderTemplate>\n <div class=\"ng-select-placeholder\">{{ placeholder }}</div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n }\n\n @if ((!multiLabelTemplate || !multiple) && selectedItems.length > 0) {\n @for (item of selectedItems; track trackByOption($index, item)) {\n <div class=\"ng-select-value\" [class.ng-select-value-disabled]=\"item.disabled\">\n <ng-template #defaultLabelTemplate>\n <span\n class=\"ng-select-value-label\"\n [ngSelectLabelValue]=\"item.label || ''\"\n [ngSelectLabelEscape]=\"escapeHTML\"\n ></span>\n @if (multiple) {\n <span class=\"ng-select-value-remove\" (click)=\"unselect(item)\" role=\"button\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n />\n </svg>\n </span>\n }\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"labelTemplate || defaultLabelTemplate\"\n [ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\"\n />\n </div>\n }\n }\n\n @if (multiple && multiLabelTemplate && selectedValues.length > 0) {\n <ng-template\n [ngTemplateOutlet]=\"multiLabelTemplate\"\n [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\"\n />\n }\n\n <div class=\"ng-select-input-container\">\n <input\n #searchInput\n class=\"ng-select-input\"\n [disabled]=\"disabled\"\n [readOnly]=\"!searchable || itemsList.maxItemsSelected\"\n [value]=\"searchTerm ?? ''\"\n (change)=\"$event.stopPropagation()\"\n (input)=\"filter(searchInput.value)\"\n (focus)=\"onInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n (compositionend)=\"onCompositionEnd(searchInput.value)\"\n (compositionstart)=\"onCompositionStart()\"\n [tabIndex]=\"tabIndex\"\n [attr.id]=\"inputId\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-haspopup]=\"panelDisabled ? 'false' : 'listbox'\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"isOpen ? _listboxId : null\"\n [attr.aria-activedescendant]=\"isOpen ? itemsList.markedItem?.htmlId : null\"\n aria-autocomplete=\"list\"\n role=\"combobox\"\n />\n </div>\n </div>\n\n @if (loading) {\n <ng-template #defaultLoadingSpinnerTemplate>\n <div class=\"ng-select-spinner\"></div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"loadingTemplate || defaultLoadingSpinnerTemplate\" />\n }\n\n @if (showClearButton) {\n @if (clearButtonTemplate) {\n <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n } @else {\n <span #clearButton class=\"ng-select-clear\" [title]=\"clearAllText\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n />\n </svg>\n </span>\n }\n }\n\n @if (!panelDisabled) {\n <span class=\"ng-select-arrow\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"\n />\n </svg>\n </span>\n }\n</div>\n\n@if (isOpen) {\n <ng-select-panel\n [class]=\"appendTo ? _classList : null\"\n [multiple]=\"multiple\"\n [listboxId]=\"_listboxId\"\n [virtualScroll]=\"virtualScroll\"\n [bufferAmount]=\"bufferAmount\"\n [appendTo]=\"appendTo\"\n [position]=\"panelPosition\"\n [headerTemplate]=\"panelHeaderTemplate\"\n [footerTemplate]=\"panelFooterTemplate\"\n [filterValue]=\"searchTerm\"\n [items]=\"itemsList.filteredItems\"\n [markedItem]=\"itemsList.markedItem\"\n (update)=\"viewPortItems = $event\"\n (scroll)=\"scroll.emit($event)\"\n (scrollToEnd)=\"scrollToEnd.emit()\"\n (outsideClick)=\"close()\"\n >\n @for (item of viewPortItems; track trackByOption($index, item)) {\n <div\n class=\"ng-select-option\"\n [class.ng-select-option-disabled]=\"item.disabled\"\n [class.ng-select-option-selected]=\"item.selected\"\n [class.ng-select-optgroup]=\"item.children\"\n [class.ng-select-option]=\"!item.children\"\n [class.ng-select-option-child]=\"!!item.parent\"\n [class.ng-select-option-marked]=\"item === itemsList.markedItem\"\n [attr.id]=\"item.htmlId\"\n [attr.role]=\"item.children ? 'group' : 'option'\"\n [attr.aria-disabled]=\"item.disabled ?? false\"\n [attr.aria-selected]=\"item.selected ?? false\"\n [attr.aria-setsize]=\"itemsList.filteredItems.length\"\n [attr.aria-posinset]=\"(item.index || 0) + 1\"\n (click)=\"toggleItem(item)\"\n (mouseover)=\"onItemHover(item)\"\n >\n <ng-template #defaultOptionTemplate>\n <span\n class=\"ng-select-option-label\"\n [ngSelectLabelValue]=\"item.label || ''\"\n [ngSelectLabelEscape]=\"escapeHTML\"\n ></span>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"\n item.children\n ? optgroupTemplate || defaultOptionTemplate\n : optionTemplate || defaultOptionTemplate\n \"\n [ngTemplateOutletContext]=\"{\n item: item.value,\n item$: item,\n index: item.index,\n searchTerm: searchTerm,\n }\"\n />\n </div>\n }\n\n @if (showAddTag) {\n <div\n class=\"ng-select-option ng-select-tag-option\"\n [class.ng-select-option-marked]=\"!itemsList.markedItem\"\n role=\"option\"\n [attr.aria-disabled]=\"false\"\n [attr.aria-selected]=\"false\"\n (click)=\"selectTag()\"\n (mouseover)=\"itemsList.unmarkItem()\"\n >\n <ng-template #defaultTagTemplate>\n <span class=\"ng-select-tag-option-label\">{{ addTagText }}</span>\n <span class=\"ng-select-tag-option-value\">\"{{ searchTerm }}\"</span>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"tagTemplate || defaultTagTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n </div>\n }\n\n @if (showNoItemsFound) {\n <ng-template #defaultNotFoundTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ notFoundText }}</div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"notFoundTemplate || defaultNotFoundTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n }\n @if (showTypeToSearch) {\n <ng-template #defaultTypeToSearchTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ typeToSearchText }}</div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate || defaultTypeToSearchTemplate\" />\n }\n @if (loading && itemsList.filteredItems.length === 0) {\n <ng-template #defaultLoadingTextTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ loadingText }}</div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n }\n </ng-select-panel>\n}\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block}.ng-select-control{box-sizing:border-box;position:relative;display:flex;width:100%;outline:none;overflow:hidden}.ng-select-opened .ng-select-control{z-index:1010}.ng-select-value-container{position:relative;display:flex;flex:1;flex-wrap:wrap;align-items:center}.ng-select-input-container{position:relative;box-sizing:border-box}.ng-select-value-remove svg{width:14px;height:14px}.ng-select-input{width:100%;padding:0;background:transparent;border:none;box-shadow:none;outline:none;cursor:default}.ng-select-input[readonly]{width:0;-webkit-user-select:unset;user-select:unset}.ng-select-clear,.ng-select-arrow{position:relative;-webkit-user-select:none;user-select:none}.ng-select-clear svg,.ng-select-arrow svg{width:20px;height:20px}.ng-select-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}.ng-select-disabled .ng-select-placeholder,.ng-select-disabled .ng-select-value{-webkit-user-select:none;user-select:none}.ng-select-disabled .ng-select-clear,.ng-select-disabled .ng-select-arrow{pointer-events:none}.ng-select-filtered .ng-select-placeholder,.ng-select-has-value .ng-select-placeholder{display:none}.ng-select-single.ng-select-filtered .ng-select-value{visibility:hidden}.ng-select-single .ng-select-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-single .ng-select-input-container{position:absolute;left:0;right:0}.ng-select-multiple .ng-select-placeholder{position:absolute}.ng-select-multiple .ng-select-value{display:inline-flex;align-items:center;overflow:hidden}.ng-select-multiple .ng-select-value.ng-select-value-disabled{-webkit-user-select:none;user-select:none}.ng-select-multiple.ng-select-disabled .ng-select-value-remove,.ng-select-multiple .ng-select-value-disabled .ng-select-value-remove{display:none}.ng-select-multiple .ng-select-input-container{flex:1}.ng-select-panel{box-sizing:border-box;position:absolute;z-index:1080;width:100%;opacity:0;-webkit-overflow-scrolling:touch}.ng-select-listbox{max-height:300px;overflow-y:auto}.ng-select-option,.ng-select-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-option-highlighted{font-weight:700;text-decoration:underline}.ng-select-option-label:empty:before{content:\"\\200b\"}.ng-select-virtual-scroll-host{position:relative;overflow:hidden auto;-webkit-overflow-scrolling:touch}.ng-select-virtual-scroll-content{position:absolute;top:0;left:0;width:100%;contain:content}.ng-select-virtual-scroll-spacer{width:1px;opacity:0}.ng-select-spinner{position:relative;width:16px;height:16px;margin:auto 4px;border-radius:50%;border:2px solid rgba(66,66,66,.2);border-left-color:#666;animation:ng-select-spinning .8s infinite linear}@keyframes ng-select-spinning{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgSelectLabelRenderer, selector: "[ngSelectLabelValue]", inputs: ["ngSelectLabelValue", "ngSelectLabelEscape"] }, { kind: "component", type: NgSelectPanel, selector: "ng-select-panel", inputs: ["listboxId", "items", "markedItem", "position", "appendTo", "bufferAmount", "virtualScroll", "multiple", "headerTemplate", "footerTemplate", "filterValue"], outputs: ["update", "scroll", "scrollToEnd", "outsideClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2966
2971
  }
2967
2972
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelect, decorators: [{
2968
2973
  type: Component,
@@ -2984,7 +2989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
2984
2989
  useExisting: forwardRef(() => NgSelect),
2985
2990
  multi: true,
2986
2991
  },
2987
- ], template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n\n<div class=\"ng-select-visually-hidden\">\n <div role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n @if (isOpen && showNoItemsFound) {\n {{ notFoundText }}\n }\n </div>\n\n <div [attr.id]=\"_viewValuesId\">{{ selectedViewValuesStr }}</div>\n</div>\n\n<div\n class=\"ng-select-control\"\n [class.ng-select-has-value]=\"hasValue\"\n (mousedown)=\"handleMousedown($event)\"\n>\n <div class=\"ng-select-value-container\">\n @if ((selectedItems.length === 0 && !searchTerm) || fixedPlaceholder) {\n <ng-template #defaultPlaceholderTemplate>\n <div class=\"ng-select-placeholder\">{{ placeholder }}</div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n }\n\n @if ((!multiLabelTemplate || !multiple) && selectedItems.length > 0) {\n @for (item of selectedItems; track trackByOption($index, item)) {\n <div class=\"ng-select-value\" [class.ng-select-value-disabled]=\"item.disabled\">\n <ng-template #defaultLabelTemplate>\n <span\n class=\"ng-select-value-label\"\n [ngSelectLabelValue]=\"item.label || ''\"\n [ngSelectLabelEscape]=\"escapeHTML\"\n ></span>\n @if (multiple) {\n <span class=\"ng-select-value-remove\" (click)=\"unselect(item)\" role=\"button\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n />\n </svg>\n </span>\n }\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"labelTemplate || defaultLabelTemplate\"\n [ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\"\n />\n </div>\n }\n }\n\n @if (multiple && multiLabelTemplate && selectedValues.length > 0) {\n <ng-template\n [ngTemplateOutlet]=\"multiLabelTemplate\"\n [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\"\n />\n }\n\n <div class=\"ng-select-input-container\">\n <input\n #searchInput\n class=\"ng-select-input\"\n [disabled]=\"disabled\"\n [readOnly]=\"!searchable || itemsList.maxItemsSelected\"\n [value]=\"searchTerm ?? ''\"\n (change)=\"$event.stopPropagation()\"\n (input)=\"filter(searchInput.value)\"\n (focus)=\"onInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n (compositionend)=\"onCompositionEnd(searchInput.value)\"\n (compositionstart)=\"onCompositionStart()\"\n [tabIndex]=\"tabIndex\"\n [attr.id]=\"inputId\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-haspopup]=\"panelDisabled ? 'false' : 'listbox'\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"isOpen ? _listboxId : null\"\n [attr.aria-activedescendant]=\"isOpen ? itemsList.markedItem?.htmlId : null\"\n aria-autocomplete=\"list\"\n role=\"combobox\"\n />\n </div>\n </div>\n\n @if (loading) {\n <ng-template #defaultLoadingSpinnerTemplate>\n <div class=\"ng-select-spinner\"></div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"loadingTemplate || defaultLoadingSpinnerTemplate\" />\n }\n\n @if (showClearButton) {\n @if (clearButtonTemplate) {\n <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n } @else {\n <span #clearButton class=\"ng-select-clear\" [title]=\"clearAllText\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n />\n </svg>\n </span>\n }\n }\n\n @if (!panelDisabled) {\n <span class=\"ng-select-arrow\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"\n />\n </svg>\n </span>\n }\n</div>\n\n@if (isOpen) {\n <ng-select-panel\n [class]=\"appendTo ? _classList : null\"\n [multiple]=\"multiple\"\n [listboxId]=\"_listboxId\"\n [virtualScroll]=\"virtualScroll\"\n [bufferAmount]=\"bufferAmount\"\n [appendTo]=\"appendTo\"\n [position]=\"panelPosition\"\n [headerTemplate]=\"panelHeaderTemplate\"\n [footerTemplate]=\"panelFooterTemplate\"\n [filterValue]=\"searchTerm\"\n [items]=\"itemsList.filteredItems\"\n [markedItem]=\"itemsList.markedItem\"\n (update)=\"viewPortItems = $event\"\n (scroll)=\"scroll.emit($event)\"\n (scrollToEnd)=\"scrollToEnd.emit()\"\n (outsideClick)=\"close()\"\n >\n @for (item of viewPortItems; track trackByOption($index, item)) {\n <div\n class=\"ng-select-option\"\n [class.ng-select-option-disabled]=\"item.disabled\"\n [class.ng-select-option-selected]=\"item.selected\"\n [class.ng-select-optgroup]=\"item.children\"\n [class.ng-select-option]=\"!item.children\"\n [class.ng-select-option-child]=\"!!item.parent\"\n [class.ng-select-option-marked]=\"item === itemsList.markedItem\"\n [attr.id]=\"item.htmlId\"\n [attr.role]=\"item.children ? 'group' : 'option'\"\n [attr.aria-disabled]=\"item.disabled ?? false\"\n [attr.aria-selected]=\"item.selected ?? false\"\n [attr.aria-setsize]=\"itemsList.filteredItems.length\"\n [attr.aria-posinset]=\"(item.index || 0) + 1\"\n (click)=\"toggleItem(item)\"\n (mouseover)=\"onItemHover(item)\"\n >\n <ng-template #defaultOptionTemplate>\n <span\n class=\"ng-select-option-label\"\n [ngSelectLabelValue]=\"item.label || ''\"\n [ngSelectLabelEscape]=\"escapeHTML\"\n ></span>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"\n item.children\n ? optgroupTemplate || defaultOptionTemplate\n : optionTemplate || defaultOptionTemplate\n \"\n [ngTemplateOutletContext]=\"{\n item: item.value,\n item$: item,\n index: item.index,\n searchTerm: searchTerm,\n }\"\n />\n </div>\n }\n\n @if (showAddTag) {\n <div\n class=\"ng-select-option ng-select-tag-option\"\n [class.ng-select-option-marked]=\"!itemsList.markedItem\"\n role=\"option\"\n [attr.aria-disabled]=\"false\"\n [attr.aria-selected]=\"false\"\n (click)=\"selectTag()\"\n (mouseover)=\"itemsList.unmarkItem()\"\n >\n <ng-template #defaultTagTemplate>\n <span class=\"ng-select-tag-option-label\">{{ addTagText }}</span>\n <span class=\"ng-select-tag-option-value\">\"{{ searchTerm }}\"</span>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"tagTemplate || defaultTagTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n </div>\n }\n\n @if (showNoItemsFound) {\n <ng-template #defaultNotFoundTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ notFoundText }}</div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"notFoundTemplate || defaultNotFoundTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n }\n @if (showTypeToSearch) {\n <ng-template #defaultTypeToSearchTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ typeToSearchText }}</div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate || defaultTypeToSearchTemplate\" />\n }\n @if (loading && itemsList.filteredItems.length === 0) {\n <ng-template #defaultLoadingTextTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ loadingText }}</div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n }\n </ng-select-panel>\n}\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block}.ng-select-control{box-sizing:border-box;position:relative;display:flex;width:100%;outline:none;overflow:hidden}.ng-select-opened .ng-select-control{z-index:1010}.ng-select-value-container{position:relative;display:flex;flex:1;flex-wrap:wrap;align-items:center}.ng-select-input-container{position:relative;box-sizing:border-box}.ng-select-value-remove svg{width:14px;height:14px}.ng-select-input{width:100%;padding:0;background:transparent;border:none;box-shadow:none;outline:none;cursor:default}.ng-select-input[readonly]{width:0;-webkit-user-select:unset;user-select:unset}.ng-select-clear,.ng-select-arrow{position:relative;-webkit-user-select:none;user-select:none}.ng-select-clear svg,.ng-select-arrow svg{width:20px;height:20px}.ng-select-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}.ng-select-disabled .ng-select-placeholder,.ng-select-disabled .ng-select-value{-webkit-user-select:none;user-select:none}.ng-select-disabled .ng-select-clear,.ng-select-disabled .ng-select-arrow{pointer-events:none}.ng-select-filtered .ng-select-placeholder,.ng-select-has-value .ng-select-placeholder{display:none}.ng-select-single.ng-select-filtered .ng-select-value{visibility:hidden}.ng-select-single .ng-select-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-single .ng-select-input-container{position:absolute;left:0;right:0}.ng-select-multiple .ng-select-placeholder{position:absolute}.ng-select-multiple .ng-select-value{display:inline-flex;align-items:center;overflow:hidden}.ng-select-multiple .ng-select-value.ng-select-value-disabled{-webkit-user-select:none;user-select:none}.ng-select-multiple.ng-select-disabled .ng-select-value-remove,.ng-select-multiple .ng-select-value-disabled .ng-select-value-remove{display:none}.ng-select-multiple .ng-select-input-container{flex:1}.ng-select-panel{box-sizing:border-box;position:absolute;z-index:1080;width:100%;opacity:0;-webkit-overflow-scrolling:touch}.ng-select-listbox{max-height:300px;overflow-y:auto}.ng-select-option,.ng-select-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-option-highlighted{font-weight:700;text-decoration:underline}.ng-select-option-label:empty:before{content:\"\\200b\"}.ng-select-virtual-scroll-host{position:relative;overflow:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.ng-select-virtual-scroll-content{position:absolute;top:0;left:0;width:100%;height:100%}.ng-select-virtual-scroll-spacer{width:1px;opacity:0}.ng-select-spinner{position:relative;width:16px;height:16px;margin:auto 4px;border-radius:50%;border:2px solid rgba(66,66,66,.2);border-left-color:#666;animation:ng-select-spinning .8s infinite linear}@keyframes ng-select-spinning{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
2992
+ ], template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n\n<div class=\"ng-select-visually-hidden\">\n <div role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n @if (isOpen && showNoItemsFound) {\n {{ notFoundText }}\n }\n </div>\n\n <div [attr.id]=\"_viewValuesId\">{{ selectedViewValuesStr }}</div>\n</div>\n\n<div\n class=\"ng-select-control\"\n [class.ng-select-has-value]=\"hasValue\"\n (mousedown)=\"handleMousedown($event)\"\n>\n <div class=\"ng-select-value-container\">\n @if ((selectedItems.length === 0 && !searchTerm) || fixedPlaceholder) {\n <ng-template #defaultPlaceholderTemplate>\n <div class=\"ng-select-placeholder\">{{ placeholder }}</div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n }\n\n @if ((!multiLabelTemplate || !multiple) && selectedItems.length > 0) {\n @for (item of selectedItems; track trackByOption($index, item)) {\n <div class=\"ng-select-value\" [class.ng-select-value-disabled]=\"item.disabled\">\n <ng-template #defaultLabelTemplate>\n <span\n class=\"ng-select-value-label\"\n [ngSelectLabelValue]=\"item.label || ''\"\n [ngSelectLabelEscape]=\"escapeHTML\"\n ></span>\n @if (multiple) {\n <span class=\"ng-select-value-remove\" (click)=\"unselect(item)\" role=\"button\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n />\n </svg>\n </span>\n }\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"labelTemplate || defaultLabelTemplate\"\n [ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\"\n />\n </div>\n }\n }\n\n @if (multiple && multiLabelTemplate && selectedValues.length > 0) {\n <ng-template\n [ngTemplateOutlet]=\"multiLabelTemplate\"\n [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\"\n />\n }\n\n <div class=\"ng-select-input-container\">\n <input\n #searchInput\n class=\"ng-select-input\"\n [disabled]=\"disabled\"\n [readOnly]=\"!searchable || itemsList.maxItemsSelected\"\n [value]=\"searchTerm ?? ''\"\n (change)=\"$event.stopPropagation()\"\n (input)=\"filter(searchInput.value)\"\n (focus)=\"onInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n (compositionend)=\"onCompositionEnd(searchInput.value)\"\n (compositionstart)=\"onCompositionStart()\"\n [tabIndex]=\"tabIndex\"\n [attr.id]=\"inputId\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-haspopup]=\"panelDisabled ? 'false' : 'listbox'\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"isOpen ? _listboxId : null\"\n [attr.aria-activedescendant]=\"isOpen ? itemsList.markedItem?.htmlId : null\"\n aria-autocomplete=\"list\"\n role=\"combobox\"\n />\n </div>\n </div>\n\n @if (loading) {\n <ng-template #defaultLoadingSpinnerTemplate>\n <div class=\"ng-select-spinner\"></div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"loadingTemplate || defaultLoadingSpinnerTemplate\" />\n }\n\n @if (showClearButton) {\n @if (clearButtonTemplate) {\n <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n } @else {\n <span #clearButton class=\"ng-select-clear\" [title]=\"clearAllText\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n />\n </svg>\n </span>\n }\n }\n\n @if (!panelDisabled) {\n <span class=\"ng-select-arrow\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"\n />\n </svg>\n </span>\n }\n</div>\n\n@if (isOpen) {\n <ng-select-panel\n [class]=\"appendTo ? _classList : null\"\n [multiple]=\"multiple\"\n [listboxId]=\"_listboxId\"\n [virtualScroll]=\"virtualScroll\"\n [bufferAmount]=\"bufferAmount\"\n [appendTo]=\"appendTo\"\n [position]=\"panelPosition\"\n [headerTemplate]=\"panelHeaderTemplate\"\n [footerTemplate]=\"panelFooterTemplate\"\n [filterValue]=\"searchTerm\"\n [items]=\"itemsList.filteredItems\"\n [markedItem]=\"itemsList.markedItem\"\n (update)=\"viewPortItems = $event\"\n (scroll)=\"scroll.emit($event)\"\n (scrollToEnd)=\"scrollToEnd.emit()\"\n (outsideClick)=\"close()\"\n >\n @for (item of viewPortItems; track trackByOption($index, item)) {\n <div\n class=\"ng-select-option\"\n [class.ng-select-option-disabled]=\"item.disabled\"\n [class.ng-select-option-selected]=\"item.selected\"\n [class.ng-select-optgroup]=\"item.children\"\n [class.ng-select-option]=\"!item.children\"\n [class.ng-select-option-child]=\"!!item.parent\"\n [class.ng-select-option-marked]=\"item === itemsList.markedItem\"\n [attr.id]=\"item.htmlId\"\n [attr.role]=\"item.children ? 'group' : 'option'\"\n [attr.aria-disabled]=\"item.disabled ?? false\"\n [attr.aria-selected]=\"item.selected ?? false\"\n [attr.aria-setsize]=\"itemsList.filteredItems.length\"\n [attr.aria-posinset]=\"(item.index || 0) + 1\"\n (click)=\"toggleItem(item)\"\n (mouseover)=\"onItemHover(item)\"\n >\n <ng-template #defaultOptionTemplate>\n <span\n class=\"ng-select-option-label\"\n [ngSelectLabelValue]=\"item.label || ''\"\n [ngSelectLabelEscape]=\"escapeHTML\"\n ></span>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"\n item.children\n ? optgroupTemplate || defaultOptionTemplate\n : optionTemplate || defaultOptionTemplate\n \"\n [ngTemplateOutletContext]=\"{\n item: item.value,\n item$: item,\n index: item.index,\n searchTerm: searchTerm,\n }\"\n />\n </div>\n }\n\n @if (showAddTag) {\n <div\n class=\"ng-select-option ng-select-tag-option\"\n [class.ng-select-option-marked]=\"!itemsList.markedItem\"\n role=\"option\"\n [attr.aria-disabled]=\"false\"\n [attr.aria-selected]=\"false\"\n (click)=\"selectTag()\"\n (mouseover)=\"itemsList.unmarkItem()\"\n >\n <ng-template #defaultTagTemplate>\n <span class=\"ng-select-tag-option-label\">{{ addTagText }}</span>\n <span class=\"ng-select-tag-option-value\">\"{{ searchTerm }}\"</span>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"tagTemplate || defaultTagTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n </div>\n }\n\n @if (showNoItemsFound) {\n <ng-template #defaultNotFoundTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ notFoundText }}</div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"notFoundTemplate || defaultNotFoundTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n }\n @if (showTypeToSearch) {\n <ng-template #defaultTypeToSearchTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ typeToSearchText }}</div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate || defaultTypeToSearchTemplate\" />\n }\n @if (loading && itemsList.filteredItems.length === 0) {\n <ng-template #defaultLoadingTextTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ loadingText }}</div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n }\n </ng-select-panel>\n}\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block}.ng-select-control{box-sizing:border-box;position:relative;display:flex;width:100%;outline:none;overflow:hidden}.ng-select-opened .ng-select-control{z-index:1010}.ng-select-value-container{position:relative;display:flex;flex:1;flex-wrap:wrap;align-items:center}.ng-select-input-container{position:relative;box-sizing:border-box}.ng-select-value-remove svg{width:14px;height:14px}.ng-select-input{width:100%;padding:0;background:transparent;border:none;box-shadow:none;outline:none;cursor:default}.ng-select-input[readonly]{width:0;-webkit-user-select:unset;user-select:unset}.ng-select-clear,.ng-select-arrow{position:relative;-webkit-user-select:none;user-select:none}.ng-select-clear svg,.ng-select-arrow svg{width:20px;height:20px}.ng-select-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}.ng-select-disabled .ng-select-placeholder,.ng-select-disabled .ng-select-value{-webkit-user-select:none;user-select:none}.ng-select-disabled .ng-select-clear,.ng-select-disabled .ng-select-arrow{pointer-events:none}.ng-select-filtered .ng-select-placeholder,.ng-select-has-value .ng-select-placeholder{display:none}.ng-select-single.ng-select-filtered .ng-select-value{visibility:hidden}.ng-select-single .ng-select-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-single .ng-select-input-container{position:absolute;left:0;right:0}.ng-select-multiple .ng-select-placeholder{position:absolute}.ng-select-multiple .ng-select-value{display:inline-flex;align-items:center;overflow:hidden}.ng-select-multiple .ng-select-value.ng-select-value-disabled{-webkit-user-select:none;user-select:none}.ng-select-multiple.ng-select-disabled .ng-select-value-remove,.ng-select-multiple .ng-select-value-disabled .ng-select-value-remove{display:none}.ng-select-multiple .ng-select-input-container{flex:1}.ng-select-panel{box-sizing:border-box;position:absolute;z-index:1080;width:100%;opacity:0;-webkit-overflow-scrolling:touch}.ng-select-listbox{max-height:300px;overflow-y:auto}.ng-select-option,.ng-select-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-option-highlighted{font-weight:700;text-decoration:underline}.ng-select-option-label:empty:before{content:\"\\200b\"}.ng-select-virtual-scroll-host{position:relative;overflow:hidden auto;-webkit-overflow-scrolling:touch}.ng-select-virtual-scroll-content{position:absolute;top:0;left:0;width:100%;contain:content}.ng-select-virtual-scroll-spacer{width:1px;opacity:0}.ng-select-spinner{position:relative;width:16px;height:16px;margin:auto 4px;border-radius:50%;border:2px solid rgba(66,66,66,.2);border-left-color:#666;animation:ng-select-spinning .8s infinite linear}@keyframes ng-select-spinning{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
2988
2993
  }], ctorParameters: () => [], propDecorators: { bindLabel: [{
2989
2994
  type: Input
2990
2995
  }], bindValue: [{