@ng-matero/ng-select 0.5.1 → 0.6.0
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,6 +1,6 @@
|
|
|
1
|
-
import { NgTemplateOutlet } from '@angular/common';
|
|
1
|
+
import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { Injectable, EventEmitter, inject,
|
|
3
|
+
import { Injectable, EventEmitter, inject, Renderer2, NgZone, ElementRef, booleanAttribute, ViewChild, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, Directive, TemplateRef, InjectionToken, ChangeDetectorRef, HostAttributeToken, forwardRef, numberAttribute, ContentChild, ContentChildren, NgModule } from '@angular/core';
|
|
4
4
|
import { animationFrameScheduler, asapScheduler, Subject, fromEvent, merge } from 'rxjs';
|
|
5
5
|
import { takeUntil, auditTime, startWith, tap, debounceTime, filter, map } from 'rxjs/operators';
|
|
6
6
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
@@ -117,6 +117,7 @@ class NgDropdownPanel {
|
|
|
117
117
|
appendTo;
|
|
118
118
|
bufferAmount = 4;
|
|
119
119
|
virtualScroll = false;
|
|
120
|
+
multiple = false;
|
|
120
121
|
headerTemplate;
|
|
121
122
|
footerTemplate;
|
|
122
123
|
filterValue = null;
|
|
@@ -447,7 +448,7 @@ class NgDropdownPanel {
|
|
|
447
448
|
});
|
|
448
449
|
}
|
|
449
450
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgDropdownPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
450
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: NgDropdownPanel, isStandalone: true, selector: "ng-dropdown-panel", inputs: { listboxId: "listboxId", items: "items", markedItem: "markedItem", position: "position", appendTo: "appendTo", bufferAmount: "bufferAmount", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], headerTemplate: "headerTemplate", footerTemplate: "footerTemplate", filterValue: "filterValue" }, outputs: { update: "update", scroll: "scroll", scrollToEnd: "scrollToEnd", outsideClick: "outsideClick" }, 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: `
|
|
451
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: NgDropdownPanel, isStandalone: true, selector: "ng-dropdown-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-dropdown-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: `
|
|
451
452
|
@if (headerTemplate) {
|
|
452
453
|
<div class="ng-dropdown-header">
|
|
453
454
|
<ng-container
|
|
@@ -461,10 +462,15 @@ class NgDropdownPanel {
|
|
|
461
462
|
class="ng-dropdown-panel-items"
|
|
462
463
|
[class.ng-select-virtual-scroll-host]="virtualScroll"
|
|
463
464
|
[attr.id]="listboxId"
|
|
465
|
+
[attr.aria-multiselectable]="multiple"
|
|
464
466
|
role="listbox"
|
|
465
467
|
>
|
|
466
468
|
<div #scrollSpacer [class.ng-select-virtual-scroll-spacer]="virtualScroll"></div>
|
|
467
|
-
<div
|
|
469
|
+
<div
|
|
470
|
+
#scrollContent
|
|
471
|
+
[class.ng-select-virtual-scroll-content]="virtualScroll && items.length"
|
|
472
|
+
role="presentation"
|
|
473
|
+
>
|
|
468
474
|
<ng-content />
|
|
469
475
|
</div>
|
|
470
476
|
</div>
|
|
@@ -496,10 +502,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
|
|
|
496
502
|
class="ng-dropdown-panel-items"
|
|
497
503
|
[class.ng-select-virtual-scroll-host]="virtualScroll"
|
|
498
504
|
[attr.id]="listboxId"
|
|
505
|
+
[attr.aria-multiselectable]="multiple"
|
|
499
506
|
role="listbox"
|
|
500
507
|
>
|
|
501
508
|
<div #scrollSpacer [class.ng-select-virtual-scroll-spacer]="virtualScroll"></div>
|
|
502
|
-
<div
|
|
509
|
+
<div
|
|
510
|
+
#scrollContent
|
|
511
|
+
[class.ng-select-virtual-scroll-content]="virtualScroll && items.length"
|
|
512
|
+
role="presentation"
|
|
513
|
+
>
|
|
503
514
|
<ng-content />
|
|
504
515
|
</div>
|
|
505
516
|
</div>
|
|
@@ -513,6 +524,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
|
|
|
513
524
|
}
|
|
514
525
|
`,
|
|
515
526
|
imports: [NgTemplateOutlet],
|
|
527
|
+
host: {
|
|
528
|
+
'class': 'ng-dropdown-panel',
|
|
529
|
+
'[class.ng-select-multiple]': 'multiple',
|
|
530
|
+
},
|
|
516
531
|
encapsulation: ViewEncapsulation.None,
|
|
517
532
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
518
533
|
}]
|
|
@@ -531,6 +546,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
|
|
|
531
546
|
}], virtualScroll: [{
|
|
532
547
|
type: Input,
|
|
533
548
|
args: [{ transform: booleanAttribute }]
|
|
549
|
+
}], multiple: [{
|
|
550
|
+
type: Input,
|
|
551
|
+
args: [{ transform: booleanAttribute }]
|
|
534
552
|
}], headerTemplate: [{
|
|
535
553
|
type: Input
|
|
536
554
|
}], footerTemplate: [{
|
|
@@ -1625,9 +1643,7 @@ class ItemsList {
|
|
|
1625
1643
|
return;
|
|
1626
1644
|
}
|
|
1627
1645
|
this._filteredItems = [];
|
|
1628
|
-
term = this._ngSelect.searchFn
|
|
1629
|
-
? term
|
|
1630
|
-
: stripSpecialChars(term).toLocaleLowerCase();
|
|
1646
|
+
term = this._ngSelect.searchFn ? term : stripSpecialChars(term).toLocaleLowerCase();
|
|
1631
1647
|
const match = this._ngSelect.searchFn || this._defaultSearchFn;
|
|
1632
1648
|
const hideSelected = this._ngSelect.hideSelected;
|
|
1633
1649
|
for (const key of Array.from(this._groups.keys())) {
|
|
@@ -1714,6 +1730,7 @@ class ItemsList {
|
|
|
1714
1730
|
index,
|
|
1715
1731
|
label: isDefined(label) ? label.toString() : '',
|
|
1716
1732
|
value,
|
|
1733
|
+
viewValue: item.viewValue || label,
|
|
1717
1734
|
disabled: item.disabled,
|
|
1718
1735
|
htmlId: `${this._ngSelect._uid}-option-${index}`,
|
|
1719
1736
|
};
|
|
@@ -2147,10 +2164,12 @@ class NgSelect {
|
|
|
2147
2164
|
classes = inject(new HostAttributeToken('class'), { optional: true });
|
|
2148
2165
|
_classList = {};
|
|
2149
2166
|
_uid = `ng-select-${nextUniqueId++}`;
|
|
2167
|
+
_listboxId = `${this._uid}-listbox`;
|
|
2168
|
+
_viewValuesId = `${this._uid}-view-values`;
|
|
2150
2169
|
bindLabel = this._config.bindLabel;
|
|
2151
2170
|
bindValue = this._config.bindValue;
|
|
2152
2171
|
placeholder = this._config.placeholder;
|
|
2153
|
-
fixedPlaceholder = this._config.fixedPlaceholder
|
|
2172
|
+
fixedPlaceholder = this._config.fixedPlaceholder;
|
|
2154
2173
|
appendTo = this._config.appendTo;
|
|
2155
2174
|
panelPosition = 'auto';
|
|
2156
2175
|
panelDisabled = false;
|
|
@@ -2188,10 +2207,16 @@ class NgSelect {
|
|
|
2188
2207
|
trackByFn = null;
|
|
2189
2208
|
appearance = this._config.appearance;
|
|
2190
2209
|
tabIndex;
|
|
2210
|
+
inputAttrs = {};
|
|
2191
2211
|
ariaLabel;
|
|
2192
2212
|
ariaLabelledby;
|
|
2193
|
-
ariaDescribedby
|
|
2194
|
-
|
|
2213
|
+
get ariaDescribedby() {
|
|
2214
|
+
return this._ariaDescribedby || this._viewValuesId;
|
|
2215
|
+
}
|
|
2216
|
+
set ariaDescribedby(value) {
|
|
2217
|
+
this._ariaDescribedby = value ? `${value} ${this._viewValuesId}` : this._viewValuesId;
|
|
2218
|
+
}
|
|
2219
|
+
_ariaDescribedby;
|
|
2195
2220
|
set panelClass(value) {
|
|
2196
2221
|
const newClassList = {};
|
|
2197
2222
|
this.classes?.split(/\s+/).forEach(c => (newClassList[c] = true));
|
|
@@ -2208,12 +2233,14 @@ class NgSelect {
|
|
|
2208
2233
|
this._cdr.markForCheck();
|
|
2209
2234
|
}
|
|
2210
2235
|
get inputId() {
|
|
2211
|
-
return this._inputId
|
|
2236
|
+
return this._inputId;
|
|
2212
2237
|
}
|
|
2213
2238
|
set inputId(value) {
|
|
2214
|
-
|
|
2239
|
+
if (value) {
|
|
2240
|
+
this._inputId = value;
|
|
2241
|
+
}
|
|
2215
2242
|
}
|
|
2216
|
-
_inputId
|
|
2243
|
+
_inputId = `${this._uid}-input`;
|
|
2217
2244
|
get items() {
|
|
2218
2245
|
return this._items;
|
|
2219
2246
|
}
|
|
@@ -2300,6 +2327,9 @@ class NgSelect {
|
|
|
2300
2327
|
get selectedValues() {
|
|
2301
2328
|
return this.selectedItems.map(x => x.value);
|
|
2302
2329
|
}
|
|
2330
|
+
get selectedViewValuesStr() {
|
|
2331
|
+
return this.selectedItems.map(x => x.viewValue).join(', ');
|
|
2332
|
+
}
|
|
2303
2333
|
get hasValue() {
|
|
2304
2334
|
return this.selectedItems.length > 0;
|
|
2305
2335
|
}
|
|
@@ -2346,9 +2376,6 @@ class NgSelect {
|
|
|
2346
2376
|
const empty = this.itemsList.filteredItems.length === 0;
|
|
2347
2377
|
return empty && this._isTypeahead && !this._validTerm && !this.loading;
|
|
2348
2378
|
}
|
|
2349
|
-
get listboxId() {
|
|
2350
|
-
return `${this._uid}-listbox`;
|
|
2351
|
-
}
|
|
2352
2379
|
_onChange = (_) => { };
|
|
2353
2380
|
_onTouched = () => { };
|
|
2354
2381
|
trackByOption = (_, item) => {
|
|
@@ -2561,6 +2588,12 @@ class NgSelect {
|
|
|
2561
2588
|
this.closeEvent.emit();
|
|
2562
2589
|
this._cdr.markForCheck();
|
|
2563
2590
|
}
|
|
2591
|
+
focus() {
|
|
2592
|
+
this.searchInput.nativeElement.focus();
|
|
2593
|
+
}
|
|
2594
|
+
blur() {
|
|
2595
|
+
this.searchInput.nativeElement.blur();
|
|
2596
|
+
}
|
|
2564
2597
|
toggleItem(item) {
|
|
2565
2598
|
if (!item || item.disabled || this.disabled) {
|
|
2566
2599
|
return;
|
|
@@ -2591,12 +2624,6 @@ class NgSelect {
|
|
|
2591
2624
|
}
|
|
2592
2625
|
this._onSelectionChanged();
|
|
2593
2626
|
}
|
|
2594
|
-
focus() {
|
|
2595
|
-
this.searchInput.nativeElement.focus();
|
|
2596
|
-
}
|
|
2597
|
-
blur() {
|
|
2598
|
-
this.searchInput.nativeElement.blur();
|
|
2599
|
-
}
|
|
2600
2627
|
unselect(item) {
|
|
2601
2628
|
if (!item) {
|
|
2602
2629
|
return;
|
|
@@ -2711,6 +2738,7 @@ class NgSelect {
|
|
|
2711
2738
|
this.items = options.map(option => ({
|
|
2712
2739
|
$ngOptionValue: option.value,
|
|
2713
2740
|
$ngOptionLabel: option.elementRef.nativeElement.innerHTML,
|
|
2741
|
+
viewValue: (option.elementRef.nativeElement.textContent || '').trim(),
|
|
2714
2742
|
disabled: option.disabled,
|
|
2715
2743
|
}));
|
|
2716
2744
|
this.itemsList.setItems(this.items);
|
|
@@ -2978,13 +3006,13 @@ class NgSelect {
|
|
|
2978
3006
|
}
|
|
2979
3007
|
}
|
|
2980
3008
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2981
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: NgSelect, isStandalone: true, selector: "ng-select", inputs: { bindLabel: "bindLabel", bindValue: "bindValue", placeholder: "placeholder", fixedPlaceholder: "fixedPlaceholder", appendTo: "appendTo", panelPosition: "panelPosition", panelDisabled: ["panelDisabled", "panelDisabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute], searchable: ["searchable", "searchable", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], clearOnBackspace: ["clearOnBackspace", "clearOnBackspace", booleanAttribute], clearAllText: "clearAllText", loading: ["loading", "loading", booleanAttribute], loadingText: "loadingText", closeOnSelect: ["closeOnSelect", "closeOnSelect", booleanAttribute], hideSelected: ["hideSelected", "hideSelected", booleanAttribute], selectOnTab: ["selectOnTab", "selectOnTab", booleanAttribute], openOnEnter: ["openOnEnter", "openOnEnter", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], bufferAmount: ["bufferAmount", "bufferAmount", numberAttribute], selectableGroup: ["selectableGroup", "selectableGroup", booleanAttribute], selectableGroupAsModel: ["selectableGroupAsModel", "selectableGroupAsModel", booleanAttribute], searchWhileComposing: ["searchWhileComposing", "searchWhileComposing", booleanAttribute], editableSearchTerm: ["editableSearchTerm", "editableSearchTerm", booleanAttribute], maxSelectedItems: ["maxSelectedItems", "maxSelectedItems", numberAttribute], minTermLength: ["minTermLength", "minTermLength", numberAttribute], markFirst: ["markFirst", "markFirst", booleanAttribute], preventToggleOnRightClick: ["preventToggleOnRightClick", "preventToggleOnRightClick", booleanAttribute], addTag: "addTag", addTagText: "addTagText", notFoundText: "notFoundText", typeahead: "typeahead", typeToSearchText: "typeToSearchText", groupBy: "groupBy", groupValue: "groupValue", searchFn: "searchFn", keyDownFn: "keyDownFn", trackByFn: "trackByFn", appearance: "appearance", tabIndex: ["tabIndex", "tabIndex", numberAttribute], ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby",
|
|
3009
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: NgSelect, isStandalone: true, selector: "ng-select", inputs: { bindLabel: "bindLabel", bindValue: "bindValue", placeholder: "placeholder", fixedPlaceholder: "fixedPlaceholder", appendTo: "appendTo", panelPosition: "panelPosition", panelDisabled: ["panelDisabled", "panelDisabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute], searchable: ["searchable", "searchable", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], clearOnBackspace: ["clearOnBackspace", "clearOnBackspace", booleanAttribute], clearAllText: "clearAllText", loading: ["loading", "loading", booleanAttribute], loadingText: "loadingText", closeOnSelect: ["closeOnSelect", "closeOnSelect", booleanAttribute], hideSelected: ["hideSelected", "hideSelected", booleanAttribute], selectOnTab: ["selectOnTab", "selectOnTab", booleanAttribute], openOnEnter: ["openOnEnter", "openOnEnter", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], bufferAmount: ["bufferAmount", "bufferAmount", numberAttribute], selectableGroup: ["selectableGroup", "selectableGroup", booleanAttribute], selectableGroupAsModel: ["selectableGroupAsModel", "selectableGroupAsModel", booleanAttribute], searchWhileComposing: ["searchWhileComposing", "searchWhileComposing", booleanAttribute], editableSearchTerm: ["editableSearchTerm", "editableSearchTerm", booleanAttribute], maxSelectedItems: ["maxSelectedItems", "maxSelectedItems", numberAttribute], minTermLength: ["minTermLength", "minTermLength", numberAttribute], markFirst: ["markFirst", "markFirst", booleanAttribute], preventToggleOnRightClick: ["preventToggleOnRightClick", "preventToggleOnRightClick", booleanAttribute], addTag: "addTag", addTagText: "addTagText", notFoundText: "notFoundText", typeahead: "typeahead", typeToSearchText: "typeToSearchText", groupBy: "groupBy", groupValue: "groupValue", searchFn: "searchFn", keyDownFn: "keyDownFn", trackByFn: "trackByFn", appearance: "appearance", tabIndex: ["tabIndex", "tabIndex", numberAttribute], inputAttrs: "inputAttrs", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", panelClass: "panelClass", inputId: "inputId", items: "items", compareWith: "compareWith", clearSearchOnAdd: ["clearSearchOnAdd", "clearSearchOnAdd", booleanAttribute], deselectOnClick: ["deselectOnClick", "deselectOnClick", booleanAttribute] }, outputs: { blurEvent: "blur", focusEvent: "focus", changeEvent: "change", openEvent: "open", closeEvent: "close", searchEvent: "search", clearEvent: "clear", addEvent: "add", removeEvent: "remove", scroll: "scroll", scrollToEnd: "scrollToEnd" }, host: { listeners: { "keydown": "handleKeyDown($event)" }, properties: { "class.ng-select-single": "!multiple", "class.ng-select-multiple": "multiple", "class.ng-select-typeahead": "typeahead", "class.ng-select-taggable": "addTag", "class.ng-select-searchable": "searchable", "class.ng-select-clearable": "clearable", "class.ng-select-opened": "isOpen", "class.ng-select-filtered": "filtered", "class.ng-select-disabled": "disabled" }, classAttribute: "ng-select" }, providers: [
|
|
2982
3010
|
{
|
|
2983
3011
|
provide: NG_VALUE_ACCESSOR,
|
|
2984
3012
|
useExisting: forwardRef(() => NgSelect),
|
|
2985
3013
|
multi: true,
|
|
2986
3014
|
},
|
|
2987
|
-
], queries: [{ propertyName: "optionTemplate", first: true, predicate: NgOptionTemplate, descendants: true, read: TemplateRef }, { propertyName: "optgroupTemplate", first: true, predicate: NgOptgroupTemplate, descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: NgLabelTemplate, descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemplate", first: true, predicate: NgMultiLabelTemplate, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: NgHeaderTemplate, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: NgFooterTemplate, descendants: true, read: TemplateRef }, { propertyName: "notFoundTemplate", first: true, predicate: NgNotFoundTemplate, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: NgPlaceholderTemplate, descendants: true, read: TemplateRef }, { propertyName: "typeToSearchTemplate", first: true, predicate: NgTypeToSearchTemplate, descendants: true, read: TemplateRef }, { propertyName: "loadingTextTemplate", first: true, predicate: NgLoadingTextTemplate, descendants: true, read: TemplateRef }, { propertyName: "tagTemplate", first: true, predicate: NgTagTemplate, descendants: true, read: TemplateRef }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: NgLoadingSpinnerTemplate, descendants: true, read: TemplateRef }, { propertyName: "clearButtonTemplate", first: true, predicate: NgClearButtonTemplate, descendants: true, read: TemplateRef }, { propertyName: "ngOptions", predicate: NgOption, descendants: true }], viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: i0.forwardRef(() => NgDropdownPanel), 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<div\n class=\"ng-select-container\"\n [class.ng-appearance-outline]=\"appearance === 'outline'\"\n [class.ng-has-value]=\"hasValue\"\n (mousedown)=\"handleMousedown($event)\"\n>\n <div class=\"ng-value-container\">\n @if ((selectedItems.length === 0 && !searchTerm) || fixedPlaceholder) {\n <ng-template #defaultPlaceholderTemplate>\n <div class=\"ng-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-value\" [class.ng-value-disabled]=\"item.disabled\">\n <ng-template #defaultLabelTemplate>\n <span\n class=\"ng-value-label\"\n [ngItemLabel]=\"item.label || ''\"\n [escape]=\"escapeHTML\"\n ></span>\n <span class=\"ng-value-remove\" (click)=\"unselect(item)\" role=\"button\">\u00D7</span>\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-input\">\n <input\n #searchInput\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]=\"loadingSpinnerTemplate || defaultLoadingSpinnerTemplate\" />\n }\n\n @if (showClearButton) {\n @if (clearButtonTemplate) {\n <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n } @else {\n <span #clearButton class=\"ng-clear-wrapper\" [title]=\"clearAllText\" aria-hidden=\"true\">\n <span class=\"ng-clear\">\u00D7</span>\n </span>\n }\n }\n\n @if (!panelDisabled) {\n <span class=\"ng-arrow-wrapper\" aria-hidden=\"true\">\n <span class=\"ng-arrow\"></span>\n </span>\n }\n</div>\n\n@if (isOpen) {\n <ng-dropdown-panel\n class=\"ng-dropdown-panel\"\n [class.ng-select-multiple]=\"multiple\"\n [class]=\"appendTo ? _classList : null\"\n [listboxId]=\"listboxId\"\n [virtualScroll]=\"virtualScroll\"\n [bufferAmount]=\"bufferAmount\"\n [appendTo]=\"appendTo\"\n [position]=\"panelPosition\"\n [headerTemplate]=\"headerTemplate\"\n [footerTemplate]=\"footerTemplate\"\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-option\"\n [class.ng-option-disabled]=\"item.disabled\"\n [class.ng-option-selected]=\"item.selected\"\n [class.ng-optgroup]=\"item.children\"\n [class.ng-option]=\"!item.children\"\n [class.ng-option-child]=\"!!item.parent\"\n [class.ng-option-marked]=\"item === itemsList.markedItem\"\n [attr.id]=\"item?.htmlId\"\n [attr.role]=\"item.children ? 'group' : 'option'\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-selected]=\"item.selected\"\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-option-label\"\n [ngItemLabel]=\"item.label || ''\"\n [escape]=\"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-option\"\n [class.ng-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>\n <span class=\"ng-tag-label\">{{ addTagText }}</span>\n \"{{ searchTerm }}\"\n </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-option ng-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-option ng-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-option ng-option-disabled\">{{ loadingText }}</div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n }\n </ng-dropdown-panel>\n}\n\n<!-- Always present aria-live region -->\n<div class=\"ng-select-visually-hidden\" aria-atomic=\"true\" aria-live=\"polite\" role=\"status\">\n @if (isOpen && showNoItemsFound) {\n {{ notFoundText }}\n }\n</div>\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block}.ng-select.ng-select-searchable .ng-input{opacity:1}.ng-select.ng-select-opened .ng-select-container{z-index:1001}.ng-select.ng-select-disabled .ng-placeholder,.ng-select.ng-select-disabled .ng-value{-webkit-user-select:none;user-select:none;cursor:default}.ng-select.ng-select-disabled .ng-arrow-wrapper{cursor:default}.ng-select.ng-select-filtered .ng-placeholder,.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{box-sizing:border-box;position:relative;display:flex;width:100%;outline:none;overflow:hidden;cursor:default}.ng-select .ng-value-container{display:flex;flex:1}.ng-select .ng-input{box-sizing:border-box;opacity:0}.ng-select .ng-input>input{width:100%;padding:0;background:transparent;border:none;box-shadow:none;outline:none;cursor:default}.ng-select .ng-input>input::-ms-clear{display:none}.ng-select .ng-input>input[readonly]{-webkit-user-select:unset;user-select:unset;width:0;padding:0}.ng-select.ng-select-single.ng-select-filtered .ng-value{visibility:hidden}.ng-select.ng-select-single .ng-value-container,.ng-select.ng-select-single .ng-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select.ng-select-single .ng-value-remove{display:none}.ng-select.ng-select-single .ng-input{position:absolute;left:0;width:100%}.ng-select.ng-select-multiple.ng-select-disabled .ng-value-remove{display:none}.ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap}.ng-select.ng-select-multiple .ng-placeholder{position:absolute;z-index:1}.ng-select.ng-select-multiple .ng-value{white-space:nowrap}.ng-select.ng-select-multiple .ng-value-remove{cursor:pointer}.ng-select.ng-select-multiple .ng-value-disabled .ng-value-remove{display:none}.ng-select.ng-select-multiple .ng-input{flex:1;z-index:2}.ng-select .ng-clear-wrapper{cursor:pointer;position:relative;width:17px;-webkit-user-select:none;user-select:none}.ng-select .ng-clear{display:inline-block;font-size:18px;line-height:1;pointer-events:none}.ng-select .ng-arrow-wrapper{position:relative;text-align:center;-webkit-user-select:none;user-select:none;cursor:pointer}.ng-select .ng-arrow{position:relative;display:inline-block;height:0;width:0;pointer-events:none}.ng-dropdown-panel{box-sizing:border-box;position:absolute;z-index:1050;width:100%;opacity:0;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .ng-dropdown-panel-items{display:block;height:auto;max-height:240px;overflow-y:auto}.ng-dropdown-panel .ng-optgroup,.ng-dropdown-panel .ng-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-option{display:block;cursor:pointer}.ng-dropdown-panel .ng-option.disabled{cursor:default}.ng-dropdown-panel .ng-option .highlighted{font-weight:700;text-decoration:underline}.ng-dropdown-panel .ng-option-label:empty:before{content:\"\\200b\"}.ng-select-virtual-scroll-host{position:relative;display:block;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-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0;clip-path:rect(0 0 0 0);white-space:nowrap}.ng-select-spinner{position:relative;width:16px;height:16px;margin:0 4px;font-size:10px;text-indent:-9999em;border-radius:50%;border:2px solid rgba(66,66,66,.2);border-left-color:#424242;animation:load8 .8s infinite linear}@keyframes load8{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgItemLabel, selector: "[ngItemLabel]", inputs: ["ngItemLabel", "escape"] }, { kind: "component", type: NgDropdownPanel, selector: "ng-dropdown-panel", inputs: ["listboxId", "items", "markedItem", "position", "appendTo", "bufferAmount", "virtualScroll", "headerTemplate", "footerTemplate", "filterValue"], outputs: ["update", "scroll", "scrollToEnd", "outsideClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3015
|
+
], queries: [{ propertyName: "optionTemplate", first: true, predicate: NgOptionTemplate, descendants: true, read: TemplateRef }, { propertyName: "optgroupTemplate", first: true, predicate: NgOptgroupTemplate, descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: NgLabelTemplate, descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemplate", first: true, predicate: NgMultiLabelTemplate, descendants: true, read: TemplateRef }, { propertyName: "headerTemplate", first: true, predicate: NgHeaderTemplate, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: NgFooterTemplate, descendants: true, read: TemplateRef }, { propertyName: "notFoundTemplate", first: true, predicate: NgNotFoundTemplate, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: NgPlaceholderTemplate, descendants: true, read: TemplateRef }, { propertyName: "typeToSearchTemplate", first: true, predicate: NgTypeToSearchTemplate, descendants: true, read: TemplateRef }, { propertyName: "loadingTextTemplate", first: true, predicate: NgLoadingTextTemplate, descendants: true, read: TemplateRef }, { propertyName: "tagTemplate", first: true, predicate: NgTagTemplate, descendants: true, read: TemplateRef }, { propertyName: "loadingSpinnerTemplate", first: true, predicate: NgLoadingSpinnerTemplate, descendants: true, read: TemplateRef }, { propertyName: "clearButtonTemplate", first: true, predicate: NgClearButtonTemplate, descendants: true, read: TemplateRef }, { propertyName: "ngOptions", predicate: NgOption, descendants: true }], viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: i0.forwardRef(() => NgDropdownPanel), 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 <div [attr.id]=\"_viewValuesId\">{{ selectedViewValuesStr }}</div>\n</div>\n\n<div\n class=\"ng-select-container\"\n [class.ng-appearance-outline]=\"appearance === 'outline'\"\n [class.ng-has-value]=\"hasValue\"\n (mousedown)=\"handleMousedown($event)\"\n>\n <div class=\"ng-value-container\">\n @if ((selectedItems.length === 0 && !searchTerm) || fixedPlaceholder) {\n <ng-template #defaultPlaceholderTemplate>\n <div class=\"ng-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-value\" [class.ng-value-disabled]=\"item.disabled\">\n <ng-template #defaultLabelTemplate>\n <span\n class=\"ng-value-label\"\n [ngItemLabel]=\"item.label || ''\"\n [escape]=\"escapeHTML\"\n ></span>\n <span class=\"ng-value-remove\" (click)=\"unselect(item)\" role=\"button\">\u00D7</span>\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-input\">\n <input\n #searchInput\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]=\"loadingSpinnerTemplate || defaultLoadingSpinnerTemplate\" />\n }\n\n @if (showClearButton) {\n @if (clearButtonTemplate) {\n <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n } @else {\n <span #clearButton class=\"ng-clear-wrapper\" [title]=\"clearAllText\" aria-hidden=\"true\">\n <span class=\"ng-clear\">\u00D7</span>\n </span>\n }\n }\n\n @if (!panelDisabled) {\n <span class=\"ng-arrow-wrapper\" aria-hidden=\"true\">\n <span class=\"ng-arrow\"></span>\n </span>\n }\n</div>\n\n@if (isOpen) {\n <ng-dropdown-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]=\"headerTemplate\"\n [footerTemplate]=\"footerTemplate\"\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-option\"\n [class.ng-option-disabled]=\"item.disabled\"\n [class.ng-option-selected]=\"item.selected\"\n [class.ng-optgroup]=\"item.children\"\n [class.ng-option]=\"!item.children\"\n [class.ng-option-child]=\"!!item.parent\"\n [class.ng-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-option-label\"\n [ngItemLabel]=\"item.label || ''\"\n [escape]=\"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-option\"\n [class.ng-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>\n <span class=\"ng-tag-label\">{{ addTagText }}</span>\n \"{{ searchTerm }}\"\n </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-option ng-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-option ng-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-option ng-option-disabled\">{{ loadingText }}</div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n }\n </ng-dropdown-panel>\n}\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block}.ng-select.ng-select-opened .ng-select-container{z-index:1010}.ng-select.ng-select-disabled .ng-placeholder,.ng-select.ng-select-disabled .ng-value{-webkit-user-select:none;user-select:none;cursor:default}.ng-select.ng-select-disabled .ng-arrow-wrapper{cursor:default}.ng-select.ng-select-filtered .ng-placeholder,.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{box-sizing:border-box;position:relative;display:flex;width:100%;outline:none;overflow:hidden;cursor:default}.ng-select .ng-value-container{display:flex;flex:1}.ng-select .ng-input{box-sizing:border-box}.ng-select .ng-input>input{width:100%;padding:0;background:transparent;border:none;box-shadow:none;outline:none;cursor:default}.ng-select .ng-input>input::-ms-clear{display:none}.ng-select .ng-input>input[readonly]{width:0;-webkit-user-select:unset;user-select:unset}.ng-select.ng-select-single.ng-select-filtered .ng-value{visibility:hidden}.ng-select.ng-select-single .ng-value-container,.ng-select.ng-select-single .ng-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select.ng-select-single .ng-value-remove{display:none}.ng-select.ng-select-single .ng-input{position:absolute;left:0;right:0}.ng-select.ng-select-multiple.ng-select-disabled .ng-value-remove{display:none}.ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap}.ng-select.ng-select-multiple .ng-placeholder{position:absolute}.ng-select.ng-select-multiple .ng-value{white-space:nowrap}.ng-select.ng-select-multiple .ng-value-remove{cursor:pointer}.ng-select.ng-select-multiple .ng-value-disabled .ng-value-remove{display:none}.ng-select.ng-select-multiple .ng-input{flex:1}.ng-select .ng-clear-wrapper{cursor:pointer;position:relative;width:17px;-webkit-user-select:none;user-select:none}.ng-select .ng-clear{display:inline-block;font-size:18px;line-height:1;pointer-events:none}.ng-select .ng-arrow-wrapper{position:relative;text-align:center;-webkit-user-select:none;user-select:none;cursor:pointer}.ng-select .ng-arrow{position:relative;display:inline-block;height:0;width:0;pointer-events:none}.ng-dropdown-panel{box-sizing:border-box;position:absolute;z-index:1080;width:100%;opacity:0;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .ng-dropdown-panel-items{display:block;height:auto;max-height:240px;overflow-y:auto}.ng-dropdown-panel .ng-optgroup,.ng-dropdown-panel .ng-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-option{display:block;cursor:pointer}.ng-dropdown-panel .ng-option.disabled{cursor:default}.ng-dropdown-panel .ng-option .highlighted{font-weight:700;text-decoration:underline}.ng-dropdown-panel .ng-option-label:empty:before{content:\"\\200b\"}.ng-select-virtual-scroll-host{position:relative;display:block;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-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0;clip-path:rect(0 0 0 0);white-space:nowrap}.ng-select-spinner{position:relative;width:16px;height:16px;margin:0 4px;font-size:10px;text-indent:-9999em;border-radius:50%;border:2px solid rgba(66,66,66,.2);border-left-color:#424242;animation:load8 .8s infinite linear}@keyframes load8{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgItemLabel, selector: "[ngItemLabel]", inputs: ["ngItemLabel", "escape"] }, { kind: "component", type: NgDropdownPanel, selector: "ng-dropdown-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 });
|
|
2988
3016
|
}
|
|
2989
3017
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelect, decorators: [{
|
|
2990
3018
|
type: Component,
|
|
@@ -3006,7 +3034,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
|
|
|
3006
3034
|
useExisting: forwardRef(() => NgSelect),
|
|
3007
3035
|
multi: true,
|
|
3008
3036
|
},
|
|
3009
|
-
], 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<div\n class=\"ng-select-container\"\n [class.ng-appearance-outline]=\"appearance === 'outline'\"\n [class.ng-has-value]=\"hasValue\"\n (mousedown)=\"handleMousedown($event)\"\n>\n <div class=\"ng-value-container\">\n @if ((selectedItems.length === 0 && !searchTerm) || fixedPlaceholder) {\n <ng-template #defaultPlaceholderTemplate>\n <div class=\"ng-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-value\" [class.ng-value-disabled]=\"item.disabled\">\n <ng-template #defaultLabelTemplate>\n <span\n class=\"ng-value-label\"\n [ngItemLabel]=\"item.label || ''\"\n [escape]=\"escapeHTML\"\n ></span>\n <span class=\"ng-value-remove\" (click)=\"unselect(item)\" role=\"button\">\u00D7</span>\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-input\">\n <input\n #searchInput\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]=\"loadingSpinnerTemplate || defaultLoadingSpinnerTemplate\" />\n }\n\n @if (showClearButton) {\n @if (clearButtonTemplate) {\n <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n } @else {\n <span #clearButton class=\"ng-clear-wrapper\" [title]=\"clearAllText\" aria-hidden=\"true\">\n <span class=\"ng-clear\">\u00D7</span>\n </span>\n }\n }\n\n @if (!panelDisabled) {\n <span class=\"ng-arrow-wrapper\" aria-hidden=\"true\">\n <span class=\"ng-arrow\"></span>\n </span>\n }\n</div>\n\n@if (isOpen) {\n <ng-dropdown-panel\n class=\"ng-dropdown-panel\"\n [class.ng-select-multiple]=\"multiple\"\n [class]=\"appendTo ? _classList : null\"\n [listboxId]=\"listboxId\"\n [virtualScroll]=\"virtualScroll\"\n [bufferAmount]=\"bufferAmount\"\n [appendTo]=\"appendTo\"\n [position]=\"panelPosition\"\n [headerTemplate]=\"headerTemplate\"\n [footerTemplate]=\"footerTemplate\"\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-option\"\n [class.ng-option-disabled]=\"item.disabled\"\n [class.ng-option-selected]=\"item.selected\"\n [class.ng-optgroup]=\"item.children\"\n [class.ng-option]=\"!item.children\"\n [class.ng-option-child]=\"!!item.parent\"\n [class.ng-option-marked]=\"item === itemsList.markedItem\"\n [attr.id]=\"item?.htmlId\"\n [attr.role]=\"item.children ? 'group' : 'option'\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.aria-selected]=\"item.selected\"\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-option-label\"\n [ngItemLabel]=\"item.label || ''\"\n [escape]=\"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-option\"\n [class.ng-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>\n <span class=\"ng-tag-label\">{{ addTagText }}</span>\n \"{{ searchTerm }}\"\n </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-option ng-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-option ng-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-option ng-option-disabled\">{{ loadingText }}</div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n }\n </ng-dropdown-panel>\n}\n\n<!-- Always present aria-live region -->\n<div class=\"ng-select-visually-hidden\" aria-atomic=\"true\" aria-live=\"polite\" role=\"status\">\n @if (isOpen && showNoItemsFound) {\n {{ notFoundText }}\n }\n</div>\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block}.ng-select.ng-select-searchable .ng-input{opacity:1}.ng-select.ng-select-opened .ng-select-container{z-index:1001}.ng-select.ng-select-disabled .ng-placeholder,.ng-select.ng-select-disabled .ng-value{-webkit-user-select:none;user-select:none;cursor:default}.ng-select.ng-select-disabled .ng-arrow-wrapper{cursor:default}.ng-select.ng-select-filtered .ng-placeholder,.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{box-sizing:border-box;position:relative;display:flex;width:100%;outline:none;overflow:hidden;cursor:default}.ng-select .ng-value-container{display:flex;flex:1}.ng-select .ng-input{box-sizing:border-box;opacity:0}.ng-select .ng-input>input{width:100%;padding:0;background:transparent;border:none;box-shadow:none;outline:none;cursor:default}.ng-select .ng-input>input::-ms-clear{display:none}.ng-select .ng-input>input[readonly]{-webkit-user-select:unset;user-select:unset;width:0;padding:0}.ng-select.ng-select-single.ng-select-filtered .ng-value{visibility:hidden}.ng-select.ng-select-single .ng-value-container,.ng-select.ng-select-single .ng-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select.ng-select-single .ng-value-remove{display:none}.ng-select.ng-select-single .ng-input{position:absolute;left:0;width:100%}.ng-select.ng-select-multiple.ng-select-disabled .ng-value-remove{display:none}.ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap}.ng-select.ng-select-multiple .ng-placeholder{position:absolute;z-index:1}.ng-select.ng-select-multiple .ng-value{white-space:nowrap}.ng-select.ng-select-multiple .ng-value-remove{cursor:pointer}.ng-select.ng-select-multiple .ng-value-disabled .ng-value-remove{display:none}.ng-select.ng-select-multiple .ng-input{flex:1;z-index:2}.ng-select .ng-clear-wrapper{cursor:pointer;position:relative;width:17px;-webkit-user-select:none;user-select:none}.ng-select .ng-clear{display:inline-block;font-size:18px;line-height:1;pointer-events:none}.ng-select .ng-arrow-wrapper{position:relative;text-align:center;-webkit-user-select:none;user-select:none;cursor:pointer}.ng-select .ng-arrow{position:relative;display:inline-block;height:0;width:0;pointer-events:none}.ng-dropdown-panel{box-sizing:border-box;position:absolute;z-index:1050;width:100%;opacity:0;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .ng-dropdown-panel-items{display:block;height:auto;max-height:240px;overflow-y:auto}.ng-dropdown-panel .ng-optgroup,.ng-dropdown-panel .ng-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-option{display:block;cursor:pointer}.ng-dropdown-panel .ng-option.disabled{cursor:default}.ng-dropdown-panel .ng-option .highlighted{font-weight:700;text-decoration:underline}.ng-dropdown-panel .ng-option-label:empty:before{content:\"\\200b\"}.ng-select-virtual-scroll-host{position:relative;display:block;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-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0;clip-path:rect(0 0 0 0);white-space:nowrap}.ng-select-spinner{position:relative;width:16px;height:16px;margin:0 4px;font-size:10px;text-indent:-9999em;border-radius:50%;border:2px solid rgba(66,66,66,.2);border-left-color:#424242;animation:load8 .8s infinite linear}@keyframes load8{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
3037
|
+
], 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 <div [attr.id]=\"_viewValuesId\">{{ selectedViewValuesStr }}</div>\n</div>\n\n<div\n class=\"ng-select-container\"\n [class.ng-appearance-outline]=\"appearance === 'outline'\"\n [class.ng-has-value]=\"hasValue\"\n (mousedown)=\"handleMousedown($event)\"\n>\n <div class=\"ng-value-container\">\n @if ((selectedItems.length === 0 && !searchTerm) || fixedPlaceholder) {\n <ng-template #defaultPlaceholderTemplate>\n <div class=\"ng-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-value\" [class.ng-value-disabled]=\"item.disabled\">\n <ng-template #defaultLabelTemplate>\n <span\n class=\"ng-value-label\"\n [ngItemLabel]=\"item.label || ''\"\n [escape]=\"escapeHTML\"\n ></span>\n <span class=\"ng-value-remove\" (click)=\"unselect(item)\" role=\"button\">\u00D7</span>\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-input\">\n <input\n #searchInput\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]=\"loadingSpinnerTemplate || defaultLoadingSpinnerTemplate\" />\n }\n\n @if (showClearButton) {\n @if (clearButtonTemplate) {\n <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n } @else {\n <span #clearButton class=\"ng-clear-wrapper\" [title]=\"clearAllText\" aria-hidden=\"true\">\n <span class=\"ng-clear\">\u00D7</span>\n </span>\n }\n }\n\n @if (!panelDisabled) {\n <span class=\"ng-arrow-wrapper\" aria-hidden=\"true\">\n <span class=\"ng-arrow\"></span>\n </span>\n }\n</div>\n\n@if (isOpen) {\n <ng-dropdown-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]=\"headerTemplate\"\n [footerTemplate]=\"footerTemplate\"\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-option\"\n [class.ng-option-disabled]=\"item.disabled\"\n [class.ng-option-selected]=\"item.selected\"\n [class.ng-optgroup]=\"item.children\"\n [class.ng-option]=\"!item.children\"\n [class.ng-option-child]=\"!!item.parent\"\n [class.ng-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-option-label\"\n [ngItemLabel]=\"item.label || ''\"\n [escape]=\"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-option\"\n [class.ng-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>\n <span class=\"ng-tag-label\">{{ addTagText }}</span>\n \"{{ searchTerm }}\"\n </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-option ng-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-option ng-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-option ng-option-disabled\">{{ loadingText }}</div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n }\n </ng-dropdown-panel>\n}\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block}.ng-select.ng-select-opened .ng-select-container{z-index:1010}.ng-select.ng-select-disabled .ng-placeholder,.ng-select.ng-select-disabled .ng-value{-webkit-user-select:none;user-select:none;cursor:default}.ng-select.ng-select-disabled .ng-arrow-wrapper{cursor:default}.ng-select.ng-select-filtered .ng-placeholder,.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{box-sizing:border-box;position:relative;display:flex;width:100%;outline:none;overflow:hidden;cursor:default}.ng-select .ng-value-container{display:flex;flex:1}.ng-select .ng-input{box-sizing:border-box}.ng-select .ng-input>input{width:100%;padding:0;background:transparent;border:none;box-shadow:none;outline:none;cursor:default}.ng-select .ng-input>input::-ms-clear{display:none}.ng-select .ng-input>input[readonly]{width:0;-webkit-user-select:unset;user-select:unset}.ng-select.ng-select-single.ng-select-filtered .ng-value{visibility:hidden}.ng-select.ng-select-single .ng-value-container,.ng-select.ng-select-single .ng-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select.ng-select-single .ng-value-remove{display:none}.ng-select.ng-select-single .ng-input{position:absolute;left:0;right:0}.ng-select.ng-select-multiple.ng-select-disabled .ng-value-remove{display:none}.ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap}.ng-select.ng-select-multiple .ng-placeholder{position:absolute}.ng-select.ng-select-multiple .ng-value{white-space:nowrap}.ng-select.ng-select-multiple .ng-value-remove{cursor:pointer}.ng-select.ng-select-multiple .ng-value-disabled .ng-value-remove{display:none}.ng-select.ng-select-multiple .ng-input{flex:1}.ng-select .ng-clear-wrapper{cursor:pointer;position:relative;width:17px;-webkit-user-select:none;user-select:none}.ng-select .ng-clear{display:inline-block;font-size:18px;line-height:1;pointer-events:none}.ng-select .ng-arrow-wrapper{position:relative;text-align:center;-webkit-user-select:none;user-select:none;cursor:pointer}.ng-select .ng-arrow{position:relative;display:inline-block;height:0;width:0;pointer-events:none}.ng-dropdown-panel{box-sizing:border-box;position:absolute;z-index:1080;width:100%;opacity:0;-webkit-overflow-scrolling:touch}.ng-dropdown-panel .ng-dropdown-panel-items{display:block;height:auto;max-height:240px;overflow-y:auto}.ng-dropdown-panel .ng-optgroup,.ng-dropdown-panel .ng-option{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-option{display:block;cursor:pointer}.ng-dropdown-panel .ng-option.disabled{cursor:default}.ng-dropdown-panel .ng-option .highlighted{font-weight:700;text-decoration:underline}.ng-dropdown-panel .ng-option-label:empty:before{content:\"\\200b\"}.ng-select-virtual-scroll-host{position:relative;display:block;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-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0;clip-path:rect(0 0 0 0);white-space:nowrap}.ng-select-spinner{position:relative;width:16px;height:16px;margin:0 4px;font-size:10px;text-indent:-9999em;border-radius:50%;border:2px solid rgba(66,66,66,.2);border-left-color:#424242;animation:load8 .8s infinite linear}@keyframes load8{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
3010
3038
|
}], ctorParameters: () => [], propDecorators: { bindLabel: [{
|
|
3011
3039
|
type: Input
|
|
3012
3040
|
}], bindValue: [{
|
|
@@ -3111,14 +3139,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
|
|
|
3111
3139
|
}], tabIndex: [{
|
|
3112
3140
|
type: Input,
|
|
3113
3141
|
args: [{ transform: numberAttribute }]
|
|
3142
|
+
}], inputAttrs: [{
|
|
3143
|
+
type: Input
|
|
3114
3144
|
}], ariaLabel: [{
|
|
3115
3145
|
type: Input
|
|
3116
3146
|
}], ariaLabelledby: [{
|
|
3117
3147
|
type: Input
|
|
3118
3148
|
}], ariaDescribedby: [{
|
|
3119
3149
|
type: Input
|
|
3120
|
-
}], inputAttrs: [{
|
|
3121
|
-
type: Input
|
|
3122
3150
|
}], panelClass: [{
|
|
3123
3151
|
type: Input
|
|
3124
3152
|
}], inputId: [{
|