@ng-matero/ng-select 0.1.0 → 0.3.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.
- package/fesm2022/ng-matero-ng-select.mjs +42 -24
- package/fesm2022/ng-matero-ng-select.mjs.map +1 -1
- package/index.d.ts +31 -29
- package/package.json +1 -1
- package/scss/ant.design.theme.scss +1 -1
- package/scss/default.theme.scss +1 -1
- package/scss/material.theme.scss +1 -1
- package/themes/ant.design.theme.css +1 -1
- package/themes/ant.design.theme.css.map +1 -1
- package/themes/default.theme.css +1 -1
- package/themes/default.theme.css.map +1 -1
- package/themes/material.theme.css +1 -1
- package/themes/material.theme.css.map +1 -1
|
@@ -2157,11 +2157,22 @@ class DefaultSelectionModel {
|
|
|
2157
2157
|
}
|
|
2158
2158
|
}
|
|
2159
2159
|
|
|
2160
|
-
/* eslint-disable @angular-eslint/no-output-rename */
|
|
2161
2160
|
const SELECTION_MODEL_FACTORY = new InjectionToken('ng-select-selection-model');
|
|
2162
2161
|
class NgSelect {
|
|
2163
|
-
|
|
2164
|
-
|
|
2162
|
+
set panelClass(value) {
|
|
2163
|
+
const newClassList = {};
|
|
2164
|
+
this.classes?.split(/\s+/).forEach(c => (newClassList[c] = true));
|
|
2165
|
+
if (typeof value === 'string') {
|
|
2166
|
+
value.split(/\s+/).forEach(c => c && (newClassList[c] = true));
|
|
2167
|
+
}
|
|
2168
|
+
else if (Array.isArray(value)) {
|
|
2169
|
+
value.forEach(c => c && (newClassList[c] = true));
|
|
2170
|
+
}
|
|
2171
|
+
else if (value && typeof value === 'object') {
|
|
2172
|
+
Object.entries(value).forEach(([k, v]) => v && (newClassList[k] = true));
|
|
2173
|
+
}
|
|
2174
|
+
this._classList = newClassList;
|
|
2175
|
+
this._cdr.markForCheck();
|
|
2165
2176
|
}
|
|
2166
2177
|
get items() {
|
|
2167
2178
|
return this._items;
|
|
@@ -2252,6 +2263,7 @@ class NgSelect {
|
|
|
2252
2263
|
this.newSelectionModel = inject(SELECTION_MODEL_FACTORY, { optional: true });
|
|
2253
2264
|
this.autoFocus = inject(new HostAttributeToken('autofocus'), { optional: true });
|
|
2254
2265
|
this.classes = inject(new HostAttributeToken('class'), { optional: true });
|
|
2266
|
+
this._classList = {};
|
|
2255
2267
|
this.fixedPlaceholder = false;
|
|
2256
2268
|
this.dropdownPosition = 'auto';
|
|
2257
2269
|
this.readonly = false;
|
|
@@ -2271,14 +2283,15 @@ class NgSelect {
|
|
|
2271
2283
|
this.maxSelectedItems = Infinity;
|
|
2272
2284
|
this.minTermLength = 0;
|
|
2273
2285
|
this.markFirst = true;
|
|
2274
|
-
this.addTag = false;
|
|
2275
2286
|
this.preventToggleOnRightClick = false;
|
|
2287
|
+
this.addTag = false;
|
|
2276
2288
|
this.searchFn = null;
|
|
2277
2289
|
this.keyDownFn = (_) => true;
|
|
2278
2290
|
this.trackByFn = null;
|
|
2279
2291
|
this.labelForId = null;
|
|
2280
|
-
this.inputAttrs = {};
|
|
2281
2292
|
this.ariaLabelDropdown = 'Options List';
|
|
2293
|
+
this.inputAttrs = {};
|
|
2294
|
+
// isOpen should allow undefined value, so avoid using booleanAttribute!
|
|
2282
2295
|
this.isOpen = false;
|
|
2283
2296
|
this._items = [];
|
|
2284
2297
|
this._disabled = false;
|
|
@@ -2318,6 +2331,7 @@ class NgSelect {
|
|
|
2318
2331
|
this.unselect(option);
|
|
2319
2332
|
};
|
|
2320
2333
|
this._mergeGlobalConfig();
|
|
2334
|
+
this.classes?.split(/\s+/).forEach(c => (this._classList[c] = true));
|
|
2321
2335
|
this.itemsList = new ItemsList(this, this.newSelectionModel ? this.newSelectionModel() : DefaultSelectionModelFactory());
|
|
2322
2336
|
}
|
|
2323
2337
|
ngOnInit() {
|
|
@@ -2443,7 +2457,7 @@ class NgSelect {
|
|
|
2443
2457
|
this.handleArrowClick();
|
|
2444
2458
|
return;
|
|
2445
2459
|
}
|
|
2446
|
-
if (target.classList.contains('ng-value-
|
|
2460
|
+
if (target.classList.contains('ng-value-remove')) {
|
|
2447
2461
|
return;
|
|
2448
2462
|
}
|
|
2449
2463
|
if (!this.focused) {
|
|
@@ -2794,11 +2808,10 @@ class NgSelect {
|
|
|
2794
2808
|
_setInputAttributes() {
|
|
2795
2809
|
const input = this.searchInput.nativeElement;
|
|
2796
2810
|
const attributes = {
|
|
2797
|
-
|
|
2798
|
-
|
|
2799
|
-
|
|
2800
|
-
|
|
2801
|
-
'aria-controls': this.dropdownId,
|
|
2811
|
+
type: 'text',
|
|
2812
|
+
autocorrect: 'off',
|
|
2813
|
+
autocapitalize: 'off',
|
|
2814
|
+
autocomplete: 'off',
|
|
2802
2815
|
...this.inputAttrs,
|
|
2803
2816
|
};
|
|
2804
2817
|
for (const key of Object.keys(attributes)) {
|
|
@@ -3006,13 +3019,13 @@ class NgSelect {
|
|
|
3006
3019
|
return isDefined(config.disableVirtualScroll) ? !config.disableVirtualScroll : false;
|
|
3007
3020
|
}
|
|
3008
3021
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3009
|
-
static { this.ɵ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", dropdownPosition: "dropdownPosition", readonly: ["readonly", "readonly", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute], searchable: ["searchable", "searchable", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], clearAllText: "clearAllText", loading: ["loading", "loading", booleanAttribute], loadingText: "loadingText", closeOnSelect: ["closeOnSelect", "closeOnSelect", booleanAttribute], clearOnBackspace: ["clearOnBackspace", "clearOnBackspace", 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], addTag: "addTag", addTagText: "addTagText", notFoundText: "notFoundText",
|
|
3022
|
+
static { this.ɵ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", dropdownPosition: "dropdownPosition", readonly: ["readonly", "readonly", booleanAttribute], multiple: ["multiple", "multiple", booleanAttribute], searchable: ["searchable", "searchable", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], clearAllText: "clearAllText", tabFocusOnClearButton: "tabFocusOnClearButton", loading: ["loading", "loading", booleanAttribute], loadingText: "loadingText", closeOnSelect: ["closeOnSelect", "closeOnSelect", booleanAttribute], clearOnBackspace: ["clearOnBackspace", "clearOnBackspace", 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], labelForId: "labelForId", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", ariaDescribedby: "ariaDescribedby", ariaLabelDropdown: "ariaLabelDropdown", inputAttrs: "inputAttrs", isOpen: "isOpen", panelClass: "panelClass", items: "items", compareWith: "compareWith", clearSearchOnAdd: "clearSearchOnAdd", deselectOnClick: "deselectOnClick" }, 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: [
|
|
3010
3023
|
{
|
|
3011
3024
|
provide: NG_VALUE_ACCESSOR,
|
|
3012
3025
|
useExisting: forwardRef(() => NgSelect),
|
|
3013
3026
|
multi: true,
|
|
3014
3027
|
},
|
|
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/role-has-required-aria -->\n<!-- 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-icon\" (click)=\"unselect(item)\" aria-hidden=\"true\">\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 [attr.aria-activedescendant]=\"isOpen ? itemsList.markedItem?.htmlId : null\"\n [attr.aria-controls]=\"isOpen ? dropdownId : null\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.id]=\"labelForId\"\n [attr.tabindex]=\"tabIndex\"\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 (showClear()) {\n @if (clearButtonTemplate) {\n <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n } @else {\n <span\n #clearButton\n class=\"ng-clear-wrapper\"\n title=\"{{ clearAllText }}\"\n role=\"button\"\n [attr.tabindex]=\"tabFocusOnClear ? 0 : -1\"\n >\n <span class=\"ng-clear\" aria-hidden=\"true\">\u00D7</span>\n </span>\n }\n }\n\n <span class=\"ng-arrow-wrapper\">\n <span class=\"ng-arrow\"></span>\n </span>\n</div>\n\n@if (isOpen) {\n <ng-dropdown-panel\n class=\"ng-dropdown-panel\"\n [class.ng-select-multiple]=\"multiple\"\n [class]=\"appendTo ? _panelClass : null\"\n [id]=\"dropdownId\"\n [virtualScroll]=\"virtualScroll\"\n [bufferAmount]=\"bufferAmount\"\n [appendTo]=\"appendTo\"\n [position]=\"dropdownPosition\"\n [headerTemplate]=\"headerTemplate\"\n [footerTemplate]=\"footerTemplate\"\n [filterValue]=\"searchTerm\"\n [items]=\"itemsList.filteredItems\"\n [markedItem]=\"itemsList.markedItem\"\n [ariaLabelDropdown]=\"ariaLabelDropdown\"\n (update)=\"viewPortItems = $event\"\n (scroll)=\"scroll.emit($event)\"\n (scrollToEnd)=\"scrollToEnd.emit($event)\"\n (outsideClick)=\"close()\"\n >\n <ng-container>\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-selected]=\"item.selected\"\n [attr.aria-setsize]=\"itemsList.filteredItems.length\"\n [attr.aria-posinset]=\"item.index! + 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 @if (showAddTag) {\n <div\n class=\"ng-option\"\n [class.ng-option-marked]=\"!itemsList.markedItem\"\n (click)=\"selectTag()\"\n (mouseover)=\"itemsList.unmarkItem()\"\n role=\"option\"\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 </ng-container>\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 [hidden]{display:none}.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-icon{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-icon{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-icon{cursor:pointer}.ng-select.ng-select-multiple .ng-value-disabled .ng-value-icon{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: ["items", "markedItem", "position", "appendTo", "bufferAmount", "virtualScroll", "headerTemplate", "footerTemplate", "filterValue", "ariaLabelDropdown"], outputs: ["update", "scroll", "scrollToEnd", "outsideClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3028
|
+
], 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/role-has-required-aria -->\n<!-- 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]=\"labelForId\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"isOpen ? dropdownId : 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 (showClear()) {\n @if (clearButtonTemplate) {\n <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n } @else {\n <span\n #clearButton\n class=\"ng-clear-wrapper\"\n [title]=\"clearAllText\"\n [attr.tabindex]=\"tabFocusOnClear ? 0 : -1\"\n role=\"button\"\n >\n <span class=\"ng-clear\">\u00D7</span>\n </span>\n }\n }\n\n <span class=\"ng-arrow-wrapper\">\n <span class=\"ng-arrow\"></span>\n </span>\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 [id]=\"dropdownId\"\n [ariaLabelDropdown]=\"ariaLabelDropdown\"\n [virtualScroll]=\"virtualScroll\"\n [bufferAmount]=\"bufferAmount\"\n [appendTo]=\"appendTo\"\n [position]=\"dropdownPosition\"\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 <ng-container>\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-selected]=\"item.selected\"\n [attr.aria-setsize]=\"itemsList.filteredItems.length\"\n [attr.aria-posinset]=\"item.index! + 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 @if (showAddTag) {\n <div\n class=\"ng-option\"\n [class.ng-option-marked]=\"!itemsList.markedItem\"\n (click)=\"selectTag()\"\n (mouseover)=\"itemsList.unmarkItem()\"\n role=\"option\"\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 </ng-container>\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 [hidden]{display:none}.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: ["items", "markedItem", "position", "appendTo", "bufferAmount", "virtualScroll", "headerTemplate", "footerTemplate", "filterValue", "ariaLabelDropdown"], outputs: ["update", "scroll", "scrollToEnd", "outsideClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3016
3029
|
}
|
|
3017
3030
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelect, decorators: [{
|
|
3018
3031
|
type: Component,
|
|
@@ -3034,7 +3047,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
|
|
|
3034
3047
|
useExisting: forwardRef(() => NgSelect),
|
|
3035
3048
|
multi: true,
|
|
3036
3049
|
},
|
|
3037
|
-
], template: "<!-- eslint-disable @angular-eslint/template/role-has-required-aria -->\n<!-- 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-icon\" (click)=\"unselect(item)\" aria-hidden=\"true\">\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 [attr.aria-activedescendant]=\"isOpen ? itemsList.markedItem?.htmlId : null\"\n [attr.aria-controls]=\"isOpen ? dropdownId : null\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.id]=\"labelForId\"\n [attr.tabindex]=\"tabIndex\"\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 (showClear()) {\n @if (clearButtonTemplate) {\n <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n } @else {\n <span\n #clearButton\n class=\"ng-clear-wrapper\"\n title=\"{{ clearAllText }}\"\n role=\"button\"\n [attr.tabindex]=\"tabFocusOnClear ? 0 : -1\"\n >\n <span class=\"ng-clear\" aria-hidden=\"true\">\u00D7</span>\n </span>\n }\n }\n\n <span class=\"ng-arrow-wrapper\">\n <span class=\"ng-arrow\"></span>\n </span>\n</div>\n\n@if (isOpen) {\n <ng-dropdown-panel\n class=\"ng-dropdown-panel\"\n [class.ng-select-multiple]=\"multiple\"\n [class]=\"appendTo ? _panelClass : null\"\n [id]=\"dropdownId\"\n [virtualScroll]=\"virtualScroll\"\n [bufferAmount]=\"bufferAmount\"\n [appendTo]=\"appendTo\"\n [position]=\"dropdownPosition\"\n [headerTemplate]=\"headerTemplate\"\n [footerTemplate]=\"footerTemplate\"\n [filterValue]=\"searchTerm\"\n [items]=\"itemsList.filteredItems\"\n [markedItem]=\"itemsList.markedItem\"\n [ariaLabelDropdown]=\"ariaLabelDropdown\"\n (update)=\"viewPortItems = $event\"\n (scroll)=\"scroll.emit($event)\"\n (scrollToEnd)=\"scrollToEnd.emit($event)\"\n (outsideClick)=\"close()\"\n >\n <ng-container>\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-selected]=\"item.selected\"\n [attr.aria-setsize]=\"itemsList.filteredItems.length\"\n [attr.aria-posinset]=\"item.index! + 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 @if (showAddTag) {\n <div\n class=\"ng-option\"\n [class.ng-option-marked]=\"!itemsList.markedItem\"\n (click)=\"selectTag()\"\n (mouseover)=\"itemsList.unmarkItem()\"\n role=\"option\"\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 </ng-container>\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 [hidden]{display:none}.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-icon{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-icon{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-icon{cursor:pointer}.ng-select.ng-select-multiple .ng-value-disabled .ng-value-icon{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"] }]
|
|
3050
|
+
], template: "<!-- eslint-disable @angular-eslint/template/role-has-required-aria -->\n<!-- 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]=\"labelForId\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"isOpen ? dropdownId : 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 (showClear()) {\n @if (clearButtonTemplate) {\n <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n } @else {\n <span\n #clearButton\n class=\"ng-clear-wrapper\"\n [title]=\"clearAllText\"\n [attr.tabindex]=\"tabFocusOnClear ? 0 : -1\"\n role=\"button\"\n >\n <span class=\"ng-clear\">\u00D7</span>\n </span>\n }\n }\n\n <span class=\"ng-arrow-wrapper\">\n <span class=\"ng-arrow\"></span>\n </span>\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 [id]=\"dropdownId\"\n [ariaLabelDropdown]=\"ariaLabelDropdown\"\n [virtualScroll]=\"virtualScroll\"\n [bufferAmount]=\"bufferAmount\"\n [appendTo]=\"appendTo\"\n [position]=\"dropdownPosition\"\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 <ng-container>\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-selected]=\"item.selected\"\n [attr.aria-setsize]=\"itemsList.filteredItems.length\"\n [attr.aria-posinset]=\"item.index! + 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 @if (showAddTag) {\n <div\n class=\"ng-option\"\n [class.ng-option-marked]=\"!itemsList.markedItem\"\n (click)=\"selectTag()\"\n (mouseover)=\"itemsList.unmarkItem()\"\n role=\"option\"\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 </ng-container>\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 [hidden]{display:none}.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"] }]
|
|
3038
3051
|
}], ctorParameters: () => [], propDecorators: { bindLabel: [{
|
|
3039
3052
|
type: Input
|
|
3040
3053
|
}], bindValue: [{
|
|
@@ -3061,6 +3074,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
|
|
|
3061
3074
|
args: [{ transform: booleanAttribute }]
|
|
3062
3075
|
}], clearAllText: [{
|
|
3063
3076
|
type: Input
|
|
3077
|
+
}], tabFocusOnClearButton: [{
|
|
3078
|
+
type: Input
|
|
3064
3079
|
}], loading: [{
|
|
3065
3080
|
type: Input,
|
|
3066
3081
|
args: [{ transform: booleanAttribute }]
|
|
@@ -3108,14 +3123,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
|
|
|
3108
3123
|
}], markFirst: [{
|
|
3109
3124
|
type: Input,
|
|
3110
3125
|
args: [{ transform: booleanAttribute }]
|
|
3126
|
+
}], preventToggleOnRightClick: [{
|
|
3127
|
+
type: Input,
|
|
3128
|
+
args: [{ transform: booleanAttribute }]
|
|
3111
3129
|
}], addTag: [{
|
|
3112
3130
|
type: Input
|
|
3113
3131
|
}], addTagText: [{
|
|
3114
3132
|
type: Input
|
|
3115
3133
|
}], notFoundText: [{
|
|
3116
3134
|
type: Input
|
|
3117
|
-
}], preventToggleOnRightClick: [{
|
|
3118
|
-
type: Input
|
|
3119
3135
|
}], typeahead: [{
|
|
3120
3136
|
type: Input
|
|
3121
3137
|
}], typeToSearchText: [{
|
|
@@ -3130,20 +3146,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
|
|
|
3130
3146
|
type: Input
|
|
3131
3147
|
}], trackByFn: [{
|
|
3132
3148
|
type: Input
|
|
3149
|
+
}], appearance: [{
|
|
3150
|
+
type: Input
|
|
3151
|
+
}], tabIndex: [{
|
|
3152
|
+
type: Input,
|
|
3153
|
+
args: [{ transform: numberAttribute }]
|
|
3133
3154
|
}], labelForId: [{
|
|
3134
3155
|
type: Input
|
|
3135
|
-
}],
|
|
3156
|
+
}], ariaLabel: [{
|
|
3136
3157
|
type: Input
|
|
3137
|
-
}],
|
|
3158
|
+
}], ariaLabelledby: [{
|
|
3138
3159
|
type: Input
|
|
3139
|
-
}],
|
|
3160
|
+
}], ariaDescribedby: [{
|
|
3140
3161
|
type: Input
|
|
3141
|
-
}],
|
|
3162
|
+
}], ariaLabelDropdown: [{
|
|
3142
3163
|
type: Input
|
|
3143
|
-
}],
|
|
3144
|
-
type: Input,
|
|
3145
|
-
args: [{ transform: numberAttribute }]
|
|
3146
|
-
}], tabFocusOnClearButton: [{
|
|
3164
|
+
}], inputAttrs: [{
|
|
3147
3165
|
type: Input
|
|
3148
3166
|
}], isOpen: [{
|
|
3149
3167
|
type: Input
|