@ng-matero/ng-select 1.0.1 → 1.0.2
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.
|
@@ -2662,6 +2662,10 @@ class NgSelect {
|
|
|
2662
2662
|
}
|
|
2663
2663
|
this.itemsList.markItem(item);
|
|
2664
2664
|
}
|
|
2665
|
+
updateViewPortItems(items) {
|
|
2666
|
+
this.viewPortItems = items;
|
|
2667
|
+
this._cdr.detectChanges();
|
|
2668
|
+
}
|
|
2665
2669
|
detectChanges() {
|
|
2666
2670
|
if (!this._cdr.destroyed) {
|
|
2667
2671
|
this._cdr.detectChanges();
|
|
@@ -2967,7 +2971,7 @@ class NgSelect {
|
|
|
2967
2971
|
useExisting: forwardRef(() => NgSelect),
|
|
2968
2972
|
multi: true,
|
|
2969
2973
|
},
|
|
2970
|
-
], queries: [{ propertyName: "optionTemplate", first: true, predicate: NgSelectOptionTemplate, descendants: true, read: TemplateRef }, { propertyName: "optgroupTemplate", first: true, predicate: NgSelectOptgroupTemplate, descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: NgSelectLabelTemplate, descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemplate", first: true, predicate: NgSelectMultiLabelTemplate, descendants: true, read: TemplateRef }, { propertyName: "panelHeaderTemplate", first: true, predicate: NgSelectPanelHeaderTemplate, descendants: true, read: TemplateRef }, { propertyName: "panelFooterTemplate", first: true, predicate: NgSelectPanelFooterTemplate, descendants: true, read: TemplateRef }, { propertyName: "notFoundTemplate", first: true, predicate: NgSelectNotFoundTemplate, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: NgSelectPlaceholderTemplate, descendants: true, read: TemplateRef }, { propertyName: "typeToSearchTemplate", first: true, predicate: NgSelectTypeToSearchTemplate, descendants: true, read: TemplateRef }, { propertyName: "loadingTextTemplate", first: true, predicate: NgSelectLoadingTextTemplate, descendants: true, read: TemplateRef }, { propertyName: "tagTemplate", first: true, predicate: NgSelectTagTemplate, descendants: true, read: TemplateRef }, { propertyName: "loadingTemplate", first: true, predicate: NgSelectLoadingTemplate, descendants: true, read: TemplateRef }, { propertyName: "clearButtonTemplate", first: true, predicate: NgSelectClearButtonTemplate, descendants: true, read: TemplateRef }, { propertyName: "ngOptions", predicate: NgSelectOption, descendants: true }], viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: i0.forwardRef(() => NgSelectPanel), descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n\n<div class=\"ng-select-visually-hidden\">\n <div role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n @if (isOpen && showNoItemsFound) {\n {{ notFoundText }}\n }\n </div>\n\n <div [attr.id]=\"_viewValuesId\">{{ selectedViewValuesStr }}</div>\n</div>\n\n<div\n class=\"ng-select-control\"\n [class.ng-select-has-value]=\"hasValue\"\n (mousedown)=\"handleMousedown($event)\"\n>\n <div class=\"ng-select-value-container\">\n @if ((selectedItems.length === 0 && !searchTerm) || fixedPlaceholder) {\n <ng-template #defaultPlaceholderTemplate>\n <div class=\"ng-select-placeholder\">{{ placeholder }}</div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n }\n\n @if ((!multiLabelTemplate || !multiple) && selectedItems.length > 0) {\n @for (item of selectedItems; track trackByOption($index, item)) {\n <div class=\"ng-select-value\" [class.ng-select-value-disabled]=\"item.disabled\">\n <ng-template #defaultLabelTemplate>\n <span\n class=\"ng-select-value-label\"\n [ngSelectLabelValue]=\"item.label || ''\"\n [ngSelectLabelEscape]=\"escapeHTML\"\n ></span>\n @if (multiple) {\n <span class=\"ng-select-value-remove\" (click)=\"unselect(item)\" role=\"button\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n />\n </svg>\n </span>\n }\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"labelTemplate || defaultLabelTemplate\"\n [ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\"\n />\n </div>\n }\n }\n\n @if (multiple && multiLabelTemplate && selectedValues.length > 0) {\n <ng-template\n [ngTemplateOutlet]=\"multiLabelTemplate\"\n [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\"\n />\n }\n\n <div class=\"ng-select-input-container\">\n <input\n #searchInput\n class=\"ng-select-input\"\n [disabled]=\"disabled\"\n [readOnly]=\"!searchable || itemsList.maxItemsSelected\"\n [value]=\"searchTerm ?? ''\"\n (change)=\"$event.stopPropagation()\"\n (input)=\"filter(searchInput.value)\"\n (focus)=\"onInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n (compositionend)=\"onCompositionEnd(searchInput.value)\"\n (compositionstart)=\"onCompositionStart()\"\n [tabIndex]=\"tabIndex\"\n [attr.id]=\"inputId\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-haspopup]=\"panelDisabled ? 'false' : 'listbox'\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"isOpen ? _listboxId : null\"\n [attr.aria-activedescendant]=\"isOpen ? itemsList.markedItem?.htmlId : null\"\n aria-autocomplete=\"list\"\n role=\"combobox\"\n />\n </div>\n </div>\n\n @if (loading) {\n <ng-template #defaultLoadingSpinnerTemplate>\n <div class=\"ng-select-spinner\"></div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"loadingTemplate || defaultLoadingSpinnerTemplate\" />\n }\n\n @if (showClearButton) {\n @if (clearButtonTemplate) {\n <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n } @else {\n <span #clearButton class=\"ng-select-clear\" [title]=\"clearAllText\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n />\n </svg>\n </span>\n }\n }\n\n @if (!panelDisabled) {\n <span class=\"ng-select-arrow\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"\n />\n </svg>\n </span>\n }\n</div>\n\n@if (isOpen) {\n <ng-select-panel\n [class]=\"appendTo ? _classList : null\"\n [multiple]=\"multiple\"\n [listboxId]=\"_listboxId\"\n [virtualScroll]=\"virtualScroll\"\n [bufferAmount]=\"bufferAmount\"\n [appendTo]=\"appendTo\"\n [position]=\"panelPosition\"\n [headerTemplate]=\"panelHeaderTemplate\"\n [footerTemplate]=\"panelFooterTemplate\"\n [filterValue]=\"searchTerm\"\n [items]=\"itemsList.filteredItems\"\n [markedItem]=\"itemsList.markedItem\"\n (update)=\"viewPortItems = $event\"\n (scroll)=\"scroll.emit($event)\"\n (scrollToEnd)=\"scrollToEnd.emit()\"\n (outsideClick)=\"close()\"\n >\n @for (item of viewPortItems; track trackByOption($index, item)) {\n <div\n class=\"ng-select-option\"\n [class.ng-select-option-disabled]=\"item.disabled\"\n [class.ng-select-option-selected]=\"item.selected\"\n [class.ng-select-optgroup]=\"item.children\"\n [class.ng-select-option]=\"!item.children\"\n [class.ng-select-option-child]=\"!!item.parent\"\n [class.ng-select-option-marked]=\"item === itemsList.markedItem\"\n [attr.id]=\"item.htmlId\"\n [attr.role]=\"item.children ? 'group' : 'option'\"\n [attr.aria-disabled]=\"item.disabled ?? false\"\n [attr.aria-selected]=\"item.selected ?? false\"\n [attr.aria-setsize]=\"itemsList.filteredItems.length\"\n [attr.aria-posinset]=\"(item.index || 0) + 1\"\n (click)=\"toggleItem(item)\"\n (mouseover)=\"onItemHover(item)\"\n >\n <ng-template #defaultOptionTemplate>\n <span\n class=\"ng-select-option-label\"\n [ngSelectLabelValue]=\"item.label || ''\"\n [ngSelectLabelEscape]=\"escapeHTML\"\n ></span>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"\n item.children\n ? optgroupTemplate || defaultOptionTemplate\n : optionTemplate || defaultOptionTemplate\n \"\n [ngTemplateOutletContext]=\"{\n item: item.value,\n item$: item,\n index: item.index,\n searchTerm: searchTerm,\n }\"\n />\n </div>\n }\n\n @if (showAddTag) {\n <div\n class=\"ng-select-option ng-select-tag-option\"\n [class.ng-select-option-marked]=\"!itemsList.markedItem\"\n role=\"option\"\n [attr.aria-disabled]=\"false\"\n [attr.aria-selected]=\"false\"\n (click)=\"selectTag()\"\n (mouseover)=\"itemsList.unmarkItem()\"\n >\n <ng-template #defaultTagTemplate>\n <span class=\"ng-select-tag-option-label\">{{ addTagText }}</span>\n <span class=\"ng-select-tag-option-value\">\"{{ searchTerm }}\"</span>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"tagTemplate || defaultTagTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n </div>\n }\n\n @if (showNoItemsFound) {\n <ng-template #defaultNotFoundTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ notFoundText }}</div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"notFoundTemplate || defaultNotFoundTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n }\n @if (showTypeToSearch) {\n <ng-template #defaultTypeToSearchTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ typeToSearchText }}</div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate || defaultTypeToSearchTemplate\" />\n }\n @if (loading && itemsList.filteredItems.length === 0) {\n <ng-template #defaultLoadingTextTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ loadingText }}</div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n }\n </ng-select-panel>\n}\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block}.ng-select-control{box-sizing:border-box;position:relative;display:flex;width:100%;outline:none;overflow:hidden}.ng-select-opened .ng-select-control{z-index:1010}.ng-select-value-container{position:relative;display:flex;flex:1;flex-wrap:wrap;align-items:center}.ng-select-input-container{position:relative;box-sizing:border-box}.ng-select-value-remove svg{width:14px;height:14px}.ng-select-input{width:100%;padding:0;background:transparent;border:none;box-shadow:none;outline:none;cursor:default}.ng-select-input[readonly]{width:0;-webkit-user-select:unset;user-select:unset}.ng-select-clear,.ng-select-arrow{position:relative;-webkit-user-select:none;user-select:none}.ng-select-clear svg,.ng-select-arrow svg{width:20px;height:20px}.ng-select-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}.ng-select-disabled .ng-select-placeholder,.ng-select-disabled .ng-select-value{-webkit-user-select:none;user-select:none}.ng-select-disabled .ng-select-clear,.ng-select-disabled .ng-select-arrow{pointer-events:none}.ng-select-filtered .ng-select-placeholder,.ng-select-has-value .ng-select-placeholder{display:none}.ng-select-single.ng-select-filtered .ng-select-value{visibility:hidden}.ng-select-single .ng-select-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-single .ng-select-input-container{position:absolute;left:0;right:0}.ng-select-multiple .ng-select-placeholder{position:absolute}.ng-select-multiple .ng-select-value{display:inline-flex;align-items:center;overflow:hidden}.ng-select-multiple .ng-select-value.ng-select-value-disabled{-webkit-user-select:none;user-select:none}.ng-select-multiple.ng-select-disabled .ng-select-value-remove,.ng-select-multiple .ng-select-value-disabled .ng-select-value-remove{display:none}.ng-select-multiple .ng-select-input-container{flex:1}.ng-select-panel{box-sizing:border-box;position:absolute;z-index:1080;width:100%;opacity:0;-webkit-overflow-scrolling:touch}.ng-select-listbox{max-height:300px;overflow-y:auto}.ng-select-option,.ng-select-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-option-highlighted{font-weight:700;text-decoration:underline}.ng-select-option-label:empty:before{content:\"\\200b\"}.ng-select-virtual-scroll-host{position:relative;overflow:hidden auto;-webkit-overflow-scrolling:touch}.ng-select-virtual-scroll-content{position:absolute;top:0;left:0;width:100%;contain:content}.ng-select-virtual-scroll-spacer{width:1px;opacity:0}.ng-select-spinner{position:relative;width:16px;height:16px;margin:auto 4px;border-radius:50%;border:2px solid rgba(66,66,66,.2);border-left-color:#666;animation:ng-select-spinning .8s infinite linear}@keyframes ng-select-spinning{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgSelectLabelRenderer, selector: "[ngSelectLabelValue]", inputs: ["ngSelectLabelValue", "ngSelectLabelEscape"] }, { kind: "component", type: NgSelectPanel, selector: "ng-select-panel", inputs: ["listboxId", "items", "markedItem", "position", "appendTo", "bufferAmount", "virtualScroll", "multiple", "headerTemplate", "footerTemplate", "filterValue"], outputs: ["update", "scroll", "scrollToEnd", "outsideClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2974
|
+
], queries: [{ propertyName: "optionTemplate", first: true, predicate: NgSelectOptionTemplate, descendants: true, read: TemplateRef }, { propertyName: "optgroupTemplate", first: true, predicate: NgSelectOptgroupTemplate, descendants: true, read: TemplateRef }, { propertyName: "labelTemplate", first: true, predicate: NgSelectLabelTemplate, descendants: true, read: TemplateRef }, { propertyName: "multiLabelTemplate", first: true, predicate: NgSelectMultiLabelTemplate, descendants: true, read: TemplateRef }, { propertyName: "panelHeaderTemplate", first: true, predicate: NgSelectPanelHeaderTemplate, descendants: true, read: TemplateRef }, { propertyName: "panelFooterTemplate", first: true, predicate: NgSelectPanelFooterTemplate, descendants: true, read: TemplateRef }, { propertyName: "notFoundTemplate", first: true, predicate: NgSelectNotFoundTemplate, descendants: true, read: TemplateRef }, { propertyName: "placeholderTemplate", first: true, predicate: NgSelectPlaceholderTemplate, descendants: true, read: TemplateRef }, { propertyName: "typeToSearchTemplate", first: true, predicate: NgSelectTypeToSearchTemplate, descendants: true, read: TemplateRef }, { propertyName: "loadingTextTemplate", first: true, predicate: NgSelectLoadingTextTemplate, descendants: true, read: TemplateRef }, { propertyName: "tagTemplate", first: true, predicate: NgSelectTagTemplate, descendants: true, read: TemplateRef }, { propertyName: "loadingTemplate", first: true, predicate: NgSelectLoadingTemplate, descendants: true, read: TemplateRef }, { propertyName: "clearButtonTemplate", first: true, predicate: NgSelectClearButtonTemplate, descendants: true, read: TemplateRef }, { propertyName: "ngOptions", predicate: NgSelectOption, descendants: true }], viewQueries: [{ propertyName: "dropdownPanel", first: true, predicate: i0.forwardRef(() => NgSelectPanel), descendants: true }, { propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, static: true }, { propertyName: "clearButton", first: true, predicate: ["clearButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n\n<div class=\"ng-select-visually-hidden\">\n <div role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n @if (isOpen && showNoItemsFound) {\n {{ notFoundText }}\n }\n </div>\n\n <div [attr.id]=\"_viewValuesId\">{{ selectedViewValuesStr }}</div>\n</div>\n\n<div\n class=\"ng-select-control\"\n [class.ng-select-has-value]=\"hasValue\"\n (mousedown)=\"handleMousedown($event)\"\n>\n <div class=\"ng-select-value-container\">\n @if ((selectedItems.length === 0 && !searchTerm) || fixedPlaceholder) {\n <ng-template #defaultPlaceholderTemplate>\n <div class=\"ng-select-placeholder\">{{ placeholder }}</div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n }\n\n @if ((!multiLabelTemplate || !multiple) && selectedItems.length > 0) {\n @for (item of selectedItems; track trackByOption($index, item)) {\n <div class=\"ng-select-value\" [class.ng-select-value-disabled]=\"item.disabled\">\n <ng-template #defaultLabelTemplate>\n <span\n class=\"ng-select-value-label\"\n [ngSelectLabelValue]=\"item.label || ''\"\n [ngSelectLabelEscape]=\"escapeHTML\"\n ></span>\n @if (multiple) {\n <span class=\"ng-select-value-remove\" (click)=\"unselect(item)\" role=\"button\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n />\n </svg>\n </span>\n }\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"labelTemplate || defaultLabelTemplate\"\n [ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\"\n />\n </div>\n }\n }\n\n @if (multiple && multiLabelTemplate && selectedValues.length > 0) {\n <ng-template\n [ngTemplateOutlet]=\"multiLabelTemplate\"\n [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\"\n />\n }\n\n <div class=\"ng-select-input-container\">\n <input\n #searchInput\n class=\"ng-select-input\"\n [disabled]=\"disabled\"\n [readOnly]=\"!searchable || itemsList.maxItemsSelected\"\n [value]=\"searchTerm ?? ''\"\n (change)=\"$event.stopPropagation()\"\n (input)=\"filter(searchInput.value)\"\n (focus)=\"onInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n (compositionend)=\"onCompositionEnd(searchInput.value)\"\n (compositionstart)=\"onCompositionStart()\"\n [tabIndex]=\"tabIndex\"\n [attr.id]=\"inputId\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-haspopup]=\"panelDisabled ? 'false' : 'listbox'\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"isOpen ? _listboxId : null\"\n [attr.aria-activedescendant]=\"isOpen ? itemsList.markedItem?.htmlId : null\"\n aria-autocomplete=\"list\"\n role=\"combobox\"\n />\n </div>\n </div>\n\n @if (loading) {\n <ng-template #defaultLoadingSpinnerTemplate>\n <div class=\"ng-select-spinner\"></div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"loadingTemplate || defaultLoadingSpinnerTemplate\" />\n }\n\n @if (showClearButton) {\n @if (clearButtonTemplate) {\n <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n } @else {\n <span #clearButton class=\"ng-select-clear\" [title]=\"clearAllText\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n />\n </svg>\n </span>\n }\n }\n\n @if (!panelDisabled) {\n <span class=\"ng-select-arrow\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"\n />\n </svg>\n </span>\n }\n</div>\n\n@if (isOpen) {\n <ng-select-panel\n [class]=\"appendTo ? _classList : null\"\n [multiple]=\"multiple\"\n [listboxId]=\"_listboxId\"\n [virtualScroll]=\"virtualScroll\"\n [bufferAmount]=\"bufferAmount\"\n [appendTo]=\"appendTo\"\n [position]=\"panelPosition\"\n [headerTemplate]=\"panelHeaderTemplate\"\n [footerTemplate]=\"panelFooterTemplate\"\n [filterValue]=\"searchTerm\"\n [items]=\"itemsList.filteredItems\"\n [markedItem]=\"itemsList.markedItem\"\n (update)=\"updateViewPortItems($event)\"\n (scroll)=\"scroll.emit($event)\"\n (scrollToEnd)=\"scrollToEnd.emit()\"\n (outsideClick)=\"close()\"\n >\n @for (item of viewPortItems; track trackByOption($index, item)) {\n <div\n class=\"ng-select-option\"\n [class.ng-select-option-disabled]=\"item.disabled\"\n [class.ng-select-option-selected]=\"item.selected\"\n [class.ng-select-optgroup]=\"item.children\"\n [class.ng-select-option]=\"!item.children\"\n [class.ng-select-option-child]=\"!!item.parent\"\n [class.ng-select-option-marked]=\"item === itemsList.markedItem\"\n [attr.id]=\"item.htmlId\"\n [attr.role]=\"item.children ? 'group' : 'option'\"\n [attr.aria-disabled]=\"item.disabled ?? false\"\n [attr.aria-selected]=\"item.selected ?? false\"\n [attr.aria-setsize]=\"itemsList.filteredItems.length\"\n [attr.aria-posinset]=\"(item.index || 0) + 1\"\n (click)=\"toggleItem(item)\"\n (mouseover)=\"onItemHover(item)\"\n >\n <ng-template #defaultOptionTemplate>\n <span\n class=\"ng-select-option-label\"\n [ngSelectLabelValue]=\"item.label || ''\"\n [ngSelectLabelEscape]=\"escapeHTML\"\n ></span>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"\n item.children\n ? optgroupTemplate || defaultOptionTemplate\n : optionTemplate || defaultOptionTemplate\n \"\n [ngTemplateOutletContext]=\"{\n item: item.value,\n item$: item,\n index: item.index,\n searchTerm: searchTerm,\n }\"\n />\n </div>\n }\n\n @if (showAddTag) {\n <div\n class=\"ng-select-option ng-select-tag-option\"\n [class.ng-select-option-marked]=\"!itemsList.markedItem\"\n role=\"option\"\n [attr.aria-disabled]=\"false\"\n [attr.aria-selected]=\"false\"\n (click)=\"selectTag()\"\n (mouseover)=\"itemsList.unmarkItem()\"\n >\n <ng-template #defaultTagTemplate>\n <span class=\"ng-select-tag-option-label\">{{ addTagText }}</span>\n <span class=\"ng-select-tag-option-value\">\"{{ searchTerm }}\"</span>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"tagTemplate || defaultTagTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n </div>\n }\n\n @if (showNoItemsFound) {\n <ng-template #defaultNotFoundTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ notFoundText }}</div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"notFoundTemplate || defaultNotFoundTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n }\n @if (showTypeToSearch) {\n <ng-template #defaultTypeToSearchTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ typeToSearchText }}</div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate || defaultTypeToSearchTemplate\" />\n }\n @if (loading && itemsList.filteredItems.length === 0) {\n <ng-template #defaultLoadingTextTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ loadingText }}</div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n }\n </ng-select-panel>\n}\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block}.ng-select-control{box-sizing:border-box;position:relative;display:flex;width:100%;outline:none;overflow:hidden}.ng-select-opened .ng-select-control{z-index:1010}.ng-select-value-container{position:relative;display:flex;flex:1;flex-wrap:wrap;align-items:center}.ng-select-input-container{position:relative;box-sizing:border-box}.ng-select-value-remove svg{width:14px;height:14px}.ng-select-input{width:100%;padding:0;background:transparent;border:none;box-shadow:none;outline:none;cursor:default}.ng-select-input[readonly]{width:0;-webkit-user-select:unset;user-select:unset}.ng-select-clear,.ng-select-arrow{position:relative;-webkit-user-select:none;user-select:none}.ng-select-clear svg,.ng-select-arrow svg{width:20px;height:20px}.ng-select-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}.ng-select-disabled .ng-select-placeholder,.ng-select-disabled .ng-select-value{-webkit-user-select:none;user-select:none}.ng-select-disabled .ng-select-clear,.ng-select-disabled .ng-select-arrow{pointer-events:none}.ng-select-filtered .ng-select-placeholder,.ng-select-has-value .ng-select-placeholder{display:none}.ng-select-single.ng-select-filtered .ng-select-value{visibility:hidden}.ng-select-single .ng-select-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-single .ng-select-input-container{position:absolute;left:0;right:0}.ng-select-multiple .ng-select-placeholder{position:absolute}.ng-select-multiple .ng-select-value{display:inline-flex;align-items:center;overflow:hidden}.ng-select-multiple .ng-select-value.ng-select-value-disabled{-webkit-user-select:none;user-select:none}.ng-select-multiple.ng-select-disabled .ng-select-value-remove,.ng-select-multiple .ng-select-value-disabled .ng-select-value-remove{display:none}.ng-select-multiple .ng-select-input-container{flex:1}.ng-select-panel{box-sizing:border-box;position:absolute;z-index:1080;width:100%;opacity:0;-webkit-overflow-scrolling:touch}.ng-select-listbox{max-height:300px;overflow-y:auto}.ng-select-option,.ng-select-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-option-highlighted{font-weight:700;text-decoration:underline}.ng-select-option-label:empty:before{content:\"\\200b\"}.ng-select-virtual-scroll-host{position:relative;overflow:hidden auto;-webkit-overflow-scrolling:touch}.ng-select-virtual-scroll-content{position:absolute;top:0;left:0;width:100%;contain:content}.ng-select-virtual-scroll-spacer{width:1px;opacity:0}.ng-select-spinner{position:relative;width:16px;height:16px;margin:auto 4px;border-radius:50%;border:2px solid rgba(66,66,66,.2);border-left-color:#666;animation:ng-select-spinning .8s infinite linear}@keyframes ng-select-spinning{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgSelectLabelRenderer, selector: "[ngSelectLabelValue]", inputs: ["ngSelectLabelValue", "ngSelectLabelEscape"] }, { kind: "component", type: NgSelectPanel, selector: "ng-select-panel", inputs: ["listboxId", "items", "markedItem", "position", "appendTo", "bufferAmount", "virtualScroll", "multiple", "headerTemplate", "footerTemplate", "filterValue"], outputs: ["update", "scroll", "scrollToEnd", "outsideClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
2971
2975
|
}
|
|
2972
2976
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: NgSelect, decorators: [{
|
|
2973
2977
|
type: Component,
|
|
@@ -2989,7 +2993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
|
|
|
2989
2993
|
useExisting: forwardRef(() => NgSelect),
|
|
2990
2994
|
multi: true,
|
|
2991
2995
|
},
|
|
2992
|
-
], template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n\n<div class=\"ng-select-visually-hidden\">\n <div role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n @if (isOpen && showNoItemsFound) {\n {{ notFoundText }}\n }\n </div>\n\n <div [attr.id]=\"_viewValuesId\">{{ selectedViewValuesStr }}</div>\n</div>\n\n<div\n class=\"ng-select-control\"\n [class.ng-select-has-value]=\"hasValue\"\n (mousedown)=\"handleMousedown($event)\"\n>\n <div class=\"ng-select-value-container\">\n @if ((selectedItems.length === 0 && !searchTerm) || fixedPlaceholder) {\n <ng-template #defaultPlaceholderTemplate>\n <div class=\"ng-select-placeholder\">{{ placeholder }}</div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n }\n\n @if ((!multiLabelTemplate || !multiple) && selectedItems.length > 0) {\n @for (item of selectedItems; track trackByOption($index, item)) {\n <div class=\"ng-select-value\" [class.ng-select-value-disabled]=\"item.disabled\">\n <ng-template #defaultLabelTemplate>\n <span\n class=\"ng-select-value-label\"\n [ngSelectLabelValue]=\"item.label || ''\"\n [ngSelectLabelEscape]=\"escapeHTML\"\n ></span>\n @if (multiple) {\n <span class=\"ng-select-value-remove\" (click)=\"unselect(item)\" role=\"button\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n />\n </svg>\n </span>\n }\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"labelTemplate || defaultLabelTemplate\"\n [ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\"\n />\n </div>\n }\n }\n\n @if (multiple && multiLabelTemplate && selectedValues.length > 0) {\n <ng-template\n [ngTemplateOutlet]=\"multiLabelTemplate\"\n [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\"\n />\n }\n\n <div class=\"ng-select-input-container\">\n <input\n #searchInput\n class=\"ng-select-input\"\n [disabled]=\"disabled\"\n [readOnly]=\"!searchable || itemsList.maxItemsSelected\"\n [value]=\"searchTerm ?? ''\"\n (change)=\"$event.stopPropagation()\"\n (input)=\"filter(searchInput.value)\"\n (focus)=\"onInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n (compositionend)=\"onCompositionEnd(searchInput.value)\"\n (compositionstart)=\"onCompositionStart()\"\n [tabIndex]=\"tabIndex\"\n [attr.id]=\"inputId\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-haspopup]=\"panelDisabled ? 'false' : 'listbox'\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"isOpen ? _listboxId : null\"\n [attr.aria-activedescendant]=\"isOpen ? itemsList.markedItem?.htmlId : null\"\n aria-autocomplete=\"list\"\n role=\"combobox\"\n />\n </div>\n </div>\n\n @if (loading) {\n <ng-template #defaultLoadingSpinnerTemplate>\n <div class=\"ng-select-spinner\"></div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"loadingTemplate || defaultLoadingSpinnerTemplate\" />\n }\n\n @if (showClearButton) {\n @if (clearButtonTemplate) {\n <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n } @else {\n <span #clearButton class=\"ng-select-clear\" [title]=\"clearAllText\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n />\n </svg>\n </span>\n }\n }\n\n @if (!panelDisabled) {\n <span class=\"ng-select-arrow\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"\n />\n </svg>\n </span>\n }\n</div>\n\n@if (isOpen) {\n <ng-select-panel\n [class]=\"appendTo ? _classList : null\"\n [multiple]=\"multiple\"\n [listboxId]=\"_listboxId\"\n [virtualScroll]=\"virtualScroll\"\n [bufferAmount]=\"bufferAmount\"\n [appendTo]=\"appendTo\"\n [position]=\"panelPosition\"\n [headerTemplate]=\"panelHeaderTemplate\"\n [footerTemplate]=\"panelFooterTemplate\"\n [filterValue]=\"searchTerm\"\n [items]=\"itemsList.filteredItems\"\n [markedItem]=\"itemsList.markedItem\"\n (update)=\"viewPortItems = $event\"\n (scroll)=\"scroll.emit($event)\"\n (scrollToEnd)=\"scrollToEnd.emit()\"\n (outsideClick)=\"close()\"\n >\n @for (item of viewPortItems; track trackByOption($index, item)) {\n <div\n class=\"ng-select-option\"\n [class.ng-select-option-disabled]=\"item.disabled\"\n [class.ng-select-option-selected]=\"item.selected\"\n [class.ng-select-optgroup]=\"item.children\"\n [class.ng-select-option]=\"!item.children\"\n [class.ng-select-option-child]=\"!!item.parent\"\n [class.ng-select-option-marked]=\"item === itemsList.markedItem\"\n [attr.id]=\"item.htmlId\"\n [attr.role]=\"item.children ? 'group' : 'option'\"\n [attr.aria-disabled]=\"item.disabled ?? false\"\n [attr.aria-selected]=\"item.selected ?? false\"\n [attr.aria-setsize]=\"itemsList.filteredItems.length\"\n [attr.aria-posinset]=\"(item.index || 0) + 1\"\n (click)=\"toggleItem(item)\"\n (mouseover)=\"onItemHover(item)\"\n >\n <ng-template #defaultOptionTemplate>\n <span\n class=\"ng-select-option-label\"\n [ngSelectLabelValue]=\"item.label || ''\"\n [ngSelectLabelEscape]=\"escapeHTML\"\n ></span>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"\n item.children\n ? optgroupTemplate || defaultOptionTemplate\n : optionTemplate || defaultOptionTemplate\n \"\n [ngTemplateOutletContext]=\"{\n item: item.value,\n item$: item,\n index: item.index,\n searchTerm: searchTerm,\n }\"\n />\n </div>\n }\n\n @if (showAddTag) {\n <div\n class=\"ng-select-option ng-select-tag-option\"\n [class.ng-select-option-marked]=\"!itemsList.markedItem\"\n role=\"option\"\n [attr.aria-disabled]=\"false\"\n [attr.aria-selected]=\"false\"\n (click)=\"selectTag()\"\n (mouseover)=\"itemsList.unmarkItem()\"\n >\n <ng-template #defaultTagTemplate>\n <span class=\"ng-select-tag-option-label\">{{ addTagText }}</span>\n <span class=\"ng-select-tag-option-value\">\"{{ searchTerm }}\"</span>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"tagTemplate || defaultTagTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n </div>\n }\n\n @if (showNoItemsFound) {\n <ng-template #defaultNotFoundTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ notFoundText }}</div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"notFoundTemplate || defaultNotFoundTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n }\n @if (showTypeToSearch) {\n <ng-template #defaultTypeToSearchTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ typeToSearchText }}</div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate || defaultTypeToSearchTemplate\" />\n }\n @if (loading && itemsList.filteredItems.length === 0) {\n <ng-template #defaultLoadingTextTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ loadingText }}</div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n }\n </ng-select-panel>\n}\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block}.ng-select-control{box-sizing:border-box;position:relative;display:flex;width:100%;outline:none;overflow:hidden}.ng-select-opened .ng-select-control{z-index:1010}.ng-select-value-container{position:relative;display:flex;flex:1;flex-wrap:wrap;align-items:center}.ng-select-input-container{position:relative;box-sizing:border-box}.ng-select-value-remove svg{width:14px;height:14px}.ng-select-input{width:100%;padding:0;background:transparent;border:none;box-shadow:none;outline:none;cursor:default}.ng-select-input[readonly]{width:0;-webkit-user-select:unset;user-select:unset}.ng-select-clear,.ng-select-arrow{position:relative;-webkit-user-select:none;user-select:none}.ng-select-clear svg,.ng-select-arrow svg{width:20px;height:20px}.ng-select-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}.ng-select-disabled .ng-select-placeholder,.ng-select-disabled .ng-select-value{-webkit-user-select:none;user-select:none}.ng-select-disabled .ng-select-clear,.ng-select-disabled .ng-select-arrow{pointer-events:none}.ng-select-filtered .ng-select-placeholder,.ng-select-has-value .ng-select-placeholder{display:none}.ng-select-single.ng-select-filtered .ng-select-value{visibility:hidden}.ng-select-single .ng-select-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-single .ng-select-input-container{position:absolute;left:0;right:0}.ng-select-multiple .ng-select-placeholder{position:absolute}.ng-select-multiple .ng-select-value{display:inline-flex;align-items:center;overflow:hidden}.ng-select-multiple .ng-select-value.ng-select-value-disabled{-webkit-user-select:none;user-select:none}.ng-select-multiple.ng-select-disabled .ng-select-value-remove,.ng-select-multiple .ng-select-value-disabled .ng-select-value-remove{display:none}.ng-select-multiple .ng-select-input-container{flex:1}.ng-select-panel{box-sizing:border-box;position:absolute;z-index:1080;width:100%;opacity:0;-webkit-overflow-scrolling:touch}.ng-select-listbox{max-height:300px;overflow-y:auto}.ng-select-option,.ng-select-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-option-highlighted{font-weight:700;text-decoration:underline}.ng-select-option-label:empty:before{content:\"\\200b\"}.ng-select-virtual-scroll-host{position:relative;overflow:hidden auto;-webkit-overflow-scrolling:touch}.ng-select-virtual-scroll-content{position:absolute;top:0;left:0;width:100%;contain:content}.ng-select-virtual-scroll-spacer{width:1px;opacity:0}.ng-select-spinner{position:relative;width:16px;height:16px;margin:auto 4px;border-radius:50%;border:2px solid rgba(66,66,66,.2);border-left-color:#666;animation:ng-select-spinning .8s infinite linear}@keyframes ng-select-spinning{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
2996
|
+
], template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/mouse-events-have-key-events -->\n<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n\n<div class=\"ng-select-visually-hidden\">\n <div role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n @if (isOpen && showNoItemsFound) {\n {{ notFoundText }}\n }\n </div>\n\n <div [attr.id]=\"_viewValuesId\">{{ selectedViewValuesStr }}</div>\n</div>\n\n<div\n class=\"ng-select-control\"\n [class.ng-select-has-value]=\"hasValue\"\n (mousedown)=\"handleMousedown($event)\"\n>\n <div class=\"ng-select-value-container\">\n @if ((selectedItems.length === 0 && !searchTerm) || fixedPlaceholder) {\n <ng-template #defaultPlaceholderTemplate>\n <div class=\"ng-select-placeholder\">{{ placeholder }}</div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"placeholderTemplate || defaultPlaceholderTemplate\" />\n }\n\n @if ((!multiLabelTemplate || !multiple) && selectedItems.length > 0) {\n @for (item of selectedItems; track trackByOption($index, item)) {\n <div class=\"ng-select-value\" [class.ng-select-value-disabled]=\"item.disabled\">\n <ng-template #defaultLabelTemplate>\n <span\n class=\"ng-select-value-label\"\n [ngSelectLabelValue]=\"item.label || ''\"\n [ngSelectLabelEscape]=\"escapeHTML\"\n ></span>\n @if (multiple) {\n <span class=\"ng-select-value-remove\" (click)=\"unselect(item)\" role=\"button\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n />\n </svg>\n </span>\n }\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"labelTemplate || defaultLabelTemplate\"\n [ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\"\n />\n </div>\n }\n }\n\n @if (multiple && multiLabelTemplate && selectedValues.length > 0) {\n <ng-template\n [ngTemplateOutlet]=\"multiLabelTemplate\"\n [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\"\n />\n }\n\n <div class=\"ng-select-input-container\">\n <input\n #searchInput\n class=\"ng-select-input\"\n [disabled]=\"disabled\"\n [readOnly]=\"!searchable || itemsList.maxItemsSelected\"\n [value]=\"searchTerm ?? ''\"\n (change)=\"$event.stopPropagation()\"\n (input)=\"filter(searchInput.value)\"\n (focus)=\"onInputFocus($event)\"\n (blur)=\"onInputBlur($event)\"\n (compositionend)=\"onCompositionEnd(searchInput.value)\"\n (compositionstart)=\"onCompositionStart()\"\n [tabIndex]=\"tabIndex\"\n [attr.id]=\"inputId\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-haspopup]=\"panelDisabled ? 'false' : 'listbox'\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"isOpen ? _listboxId : null\"\n [attr.aria-activedescendant]=\"isOpen ? itemsList.markedItem?.htmlId : null\"\n aria-autocomplete=\"list\"\n role=\"combobox\"\n />\n </div>\n </div>\n\n @if (loading) {\n <ng-template #defaultLoadingSpinnerTemplate>\n <div class=\"ng-select-spinner\"></div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"loadingTemplate || defaultLoadingSpinnerTemplate\" />\n }\n\n @if (showClearButton) {\n @if (clearButtonTemplate) {\n <ng-container [ngTemplateOutlet]=\"clearButtonTemplate\" />\n } @else {\n <span #clearButton class=\"ng-select-clear\" [title]=\"clearAllText\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z\"\n />\n </svg>\n </span>\n }\n }\n\n @if (!panelDisabled) {\n <span class=\"ng-select-arrow\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" focusable=\"false\">\n <path\n fill=\"currentColor\"\n d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"\n />\n </svg>\n </span>\n }\n</div>\n\n@if (isOpen) {\n <ng-select-panel\n [class]=\"appendTo ? _classList : null\"\n [multiple]=\"multiple\"\n [listboxId]=\"_listboxId\"\n [virtualScroll]=\"virtualScroll\"\n [bufferAmount]=\"bufferAmount\"\n [appendTo]=\"appendTo\"\n [position]=\"panelPosition\"\n [headerTemplate]=\"panelHeaderTemplate\"\n [footerTemplate]=\"panelFooterTemplate\"\n [filterValue]=\"searchTerm\"\n [items]=\"itemsList.filteredItems\"\n [markedItem]=\"itemsList.markedItem\"\n (update)=\"updateViewPortItems($event)\"\n (scroll)=\"scroll.emit($event)\"\n (scrollToEnd)=\"scrollToEnd.emit()\"\n (outsideClick)=\"close()\"\n >\n @for (item of viewPortItems; track trackByOption($index, item)) {\n <div\n class=\"ng-select-option\"\n [class.ng-select-option-disabled]=\"item.disabled\"\n [class.ng-select-option-selected]=\"item.selected\"\n [class.ng-select-optgroup]=\"item.children\"\n [class.ng-select-option]=\"!item.children\"\n [class.ng-select-option-child]=\"!!item.parent\"\n [class.ng-select-option-marked]=\"item === itemsList.markedItem\"\n [attr.id]=\"item.htmlId\"\n [attr.role]=\"item.children ? 'group' : 'option'\"\n [attr.aria-disabled]=\"item.disabled ?? false\"\n [attr.aria-selected]=\"item.selected ?? false\"\n [attr.aria-setsize]=\"itemsList.filteredItems.length\"\n [attr.aria-posinset]=\"(item.index || 0) + 1\"\n (click)=\"toggleItem(item)\"\n (mouseover)=\"onItemHover(item)\"\n >\n <ng-template #defaultOptionTemplate>\n <span\n class=\"ng-select-option-label\"\n [ngSelectLabelValue]=\"item.label || ''\"\n [ngSelectLabelEscape]=\"escapeHTML\"\n ></span>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"\n item.children\n ? optgroupTemplate || defaultOptionTemplate\n : optionTemplate || defaultOptionTemplate\n \"\n [ngTemplateOutletContext]=\"{\n item: item.value,\n item$: item,\n index: item.index,\n searchTerm: searchTerm,\n }\"\n />\n </div>\n }\n\n @if (showAddTag) {\n <div\n class=\"ng-select-option ng-select-tag-option\"\n [class.ng-select-option-marked]=\"!itemsList.markedItem\"\n role=\"option\"\n [attr.aria-disabled]=\"false\"\n [attr.aria-selected]=\"false\"\n (click)=\"selectTag()\"\n (mouseover)=\"itemsList.unmarkItem()\"\n >\n <ng-template #defaultTagTemplate>\n <span class=\"ng-select-tag-option-label\">{{ addTagText }}</span>\n <span class=\"ng-select-tag-option-value\">\"{{ searchTerm }}\"</span>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"tagTemplate || defaultTagTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n </div>\n }\n\n @if (showNoItemsFound) {\n <ng-template #defaultNotFoundTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ notFoundText }}</div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"notFoundTemplate || defaultNotFoundTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n }\n @if (showTypeToSearch) {\n <ng-template #defaultTypeToSearchTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ typeToSearchText }}</div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate || defaultTypeToSearchTemplate\" />\n }\n @if (loading && itemsList.filteredItems.length === 0) {\n <ng-template #defaultLoadingTextTemplate>\n <div class=\"ng-select-option ng-select-option-disabled\">{{ loadingText }}</div>\n </ng-template>\n <ng-template\n [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\"\n />\n }\n </ng-select-panel>\n}\n", styles: ["@charset \"UTF-8\";.ng-select{position:relative;display:block}.ng-select-control{box-sizing:border-box;position:relative;display:flex;width:100%;outline:none;overflow:hidden}.ng-select-opened .ng-select-control{z-index:1010}.ng-select-value-container{position:relative;display:flex;flex:1;flex-wrap:wrap;align-items:center}.ng-select-input-container{position:relative;box-sizing:border-box}.ng-select-value-remove svg{width:14px;height:14px}.ng-select-input{width:100%;padding:0;background:transparent;border:none;box-shadow:none;outline:none;cursor:default}.ng-select-input[readonly]{width:0;-webkit-user-select:unset;user-select:unset}.ng-select-clear,.ng-select-arrow{position:relative;-webkit-user-select:none;user-select:none}.ng-select-clear svg,.ng-select-arrow svg{width:20px;height:20px}.ng-select-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}.ng-select-disabled .ng-select-placeholder,.ng-select-disabled .ng-select-value{-webkit-user-select:none;user-select:none}.ng-select-disabled .ng-select-clear,.ng-select-disabled .ng-select-arrow{pointer-events:none}.ng-select-filtered .ng-select-placeholder,.ng-select-has-value .ng-select-placeholder{display:none}.ng-select-single.ng-select-filtered .ng-select-value{visibility:hidden}.ng-select-single .ng-select-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-single .ng-select-input-container{position:absolute;left:0;right:0}.ng-select-multiple .ng-select-placeholder{position:absolute}.ng-select-multiple .ng-select-value{display:inline-flex;align-items:center;overflow:hidden}.ng-select-multiple .ng-select-value.ng-select-value-disabled{-webkit-user-select:none;user-select:none}.ng-select-multiple.ng-select-disabled .ng-select-value-remove,.ng-select-multiple .ng-select-value-disabled .ng-select-value-remove{display:none}.ng-select-multiple .ng-select-input-container{flex:1}.ng-select-panel{box-sizing:border-box;position:absolute;z-index:1080;width:100%;opacity:0;-webkit-overflow-scrolling:touch}.ng-select-listbox{max-height:300px;overflow-y:auto}.ng-select-option,.ng-select-optgroup{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-select-option-highlighted{font-weight:700;text-decoration:underline}.ng-select-option-label:empty:before{content:\"\\200b\"}.ng-select-virtual-scroll-host{position:relative;overflow:hidden auto;-webkit-overflow-scrolling:touch}.ng-select-virtual-scroll-content{position:absolute;top:0;left:0;width:100%;contain:content}.ng-select-virtual-scroll-spacer{width:1px;opacity:0}.ng-select-spinner{position:relative;width:16px;height:16px;margin:auto 4px;border-radius:50%;border:2px solid rgba(66,66,66,.2);border-left-color:#666;animation:ng-select-spinning .8s infinite linear}@keyframes ng-select-spinning{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
2993
2997
|
}], ctorParameters: () => [], propDecorators: { bindLabel: [{
|
|
2994
2998
|
type: Input
|
|
2995
2999
|
}], bindValue: [{
|