sp-select
Version:
1,020 lines • 130 kB
JavaScript
var SpSelectComponent_1;
import { __decorate, __param } from "tslib";
import { Component, OnDestroy, OnChanges, AfterViewInit, forwardRef, ChangeDetectorRef, Input, Output, EventEmitter, ContentChild, TemplateRef, ViewEncapsulation, HostListener, HostBinding, ViewChild, ElementRef, ChangeDetectionStrategy, Inject, SimpleChanges, ContentChildren, QueryList, InjectionToken, Attribute } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { takeUntil, startWith, tap, debounceTime, map, filter } from 'rxjs/operators';
import { Subject, merge } from 'rxjs';
import { NgOptionTemplateDirective, NgLabelTemplateDirective, NgHeaderTemplateDirective, NgFooterTemplateDirective, NgOptgroupTemplateDirective, NgNotFoundTemplateDirective, NgTypeToSearchTemplateDirective, NgLoadingTextTemplateDirective, NgMultiLabelTemplateDirective, NgTagTemplateDirective, NgLoadingSpinnerTemplateDirective } from './sp-templates.directive';
import { ConsoleService } from './console.service';
import { isDefined, isFunction, isPromise, isObject } from './value-utils';
import { ItemsList } from './items-list';
import { KeyCode } from './sp-select.types';
import { newId } from './id';
import { NgDropdownPanelComponent } from './ng-dropdown-panel.component';
import { NgOptionComponent } from './ng-option.component';
import { SpSelectConfig } from './config.service';
import { NgDropdownPanelService } from './ng-dropdown-panel.service';
export const SELECTION_MODEL_FACTORY = new InjectionToken('ng-select-selection-model');
let SpSelectComponent = SpSelectComponent_1 = class SpSelectComponent {
constructor(classes, autoFocus, config, newSelectionModel, _elementRef, _cd, _console) {
this.classes = classes;
this.autoFocus = autoFocus;
this._cd = _cd;
this._console = _console;
this.markFirst = true;
this.dropdownPosition = 'auto';
this.loading = false;
this.closeOnSelect = true;
this.hideSelected = false;
this.selectOnTab = false;
this.bufferAmount = 4;
this.selectableGroup = false;
this.selectableGroupAsModel = true;
this.searchFn = null;
this.trackByFn = null;
this.clearOnBackspace = true;
this.labelForId = null;
this.inputAttrs = {};
this.readonly = false;
this.searchWhileComposing = true;
this.minTermLength = 0;
this.editableSearchTerm = false;
this.keyDownFn = (_) => true;
this.multiple = false;
this.addTag = false;
this.searchable = true;
this.clearable = true;
this.isOpen = false;
// output events
this.blurEvent = new EventEmitter();
this.focusEvent = new EventEmitter();
this.changeEvent = new EventEmitter();
this.openEvent = new EventEmitter();
this.closeEvent = new EventEmitter();
this.searchEvent = new EventEmitter();
this.clearEvent = new EventEmitter();
this.addEvent = new EventEmitter();
this.removeEvent = new EventEmitter();
this.scroll = new EventEmitter();
this.scrollToEnd = new EventEmitter();
this.viewPortItems = [];
this.searchTerm = null;
this.dropdownId = newId();
this.escapeHTML = true;
this.useDefaultClass = true;
this._items = [];
this._defaultLabel = 'label';
this._pressedKeys = [];
this._isComposing = false;
this._destroy$ = new Subject();
this._keyPress$ = new Subject();
this._onChange = (_) => { };
this._onTouched = () => { };
this.extraLbl = [];
this.extraVal = [];
this.clearItem = (item) => {
const option = this.selectedItems.find(x => x.value === item);
this.unselect(option);
};
this.trackByOption = (_, item) => {
if (this.trackByFn) {
return this.trackByFn(item.value);
}
return item;
};
this._mergeGlobalConfig(config);
this.itemsList = new ItemsList(this, newSelectionModel());
this.element = _elementRef.nativeElement;
}
get items() { return this._items; }
;
set items(value) {
this._itemsAreUsed = true;
this._items = value;
}
;
get compareWith() { return this._compareWith; }
set compareWith(fn) {
if (!isFunction(fn)) {
throw Error('`compareWith` must be a function.');
}
this._compareWith = fn;
}
get clearSearchOnAdd() { return isDefined(this._clearSearchOnAdd) ? this._clearSearchOnAdd : this.closeOnSelect; }
;
set clearSearchOnAdd(value) {
this._clearSearchOnAdd = value;
}
;
get disabled() { return this.readonly || this._disabled; }
;
get filtered() { return (!!this.searchTerm && this.searchable || this._isComposing); }
;
get _editableSearchTerm() {
return this.editableSearchTerm && !this.multiple;
}
get selectedItems() {
return this.itemsList.selectedItems;
}
get selectedValues() {
return this.selectedItems.map(x => x.value);
}
get hasValue() {
return this.selectedItems.length > 0;
}
get currentPanelPosition() {
if (this.dropdownPanel) {
return this.dropdownPanel.currentPosition;
}
return undefined;
}
getExtraValue(item, idx) {
if (this.extraVal.length > idx) {
var ef = this.extraVal[idx].split(".");
var val = item;
var id = 0;
for (var a of ef) {
val = val[a];
id += 1;
if (id == ef.length) {
return val;
}
}
}
else {
return item;
}
}
ngOnInit() {
this._handleKeyPresses();
this._setInputAttributes();
if (this.extraValues)
this.extraVal = this.extraValues.split(",");
if (this.extraLables)
this.extraLbl = this.extraLables.split(",");
}
ngOnChanges(changes) {
if (changes.multiple) {
this.itemsList.clearSelected();
}
if (changes.items) {
this._setItems(changes.items.currentValue || []);
}
if (changes.isOpen) {
this._manualOpen = isDefined(changes.isOpen.currentValue);
}
}
ngAfterViewInit() {
if (!this._itemsAreUsed) {
this.escapeHTML = false;
this._setItemsFromNgOptions();
}
if (isDefined(this.autoFocus)) {
this.focus();
}
}
ngOnDestroy() {
this._destroy$.next();
this._destroy$.complete();
}
handleKeyDown($event) {
const keyCode = KeyCode[$event.which];
if (keyCode) {
if (this.keyDownFn($event) === false) {
return;
}
this.handleKeyCode($event);
}
else if ($event.key && $event.key.length === 1) {
this._keyPress$.next($event.key.toLocaleLowerCase());
}
}
handleKeyCode($event) {
switch ($event.which) {
case KeyCode.ArrowDown:
this._handleArrowDown($event);
break;
case KeyCode.ArrowUp:
this._handleArrowUp($event);
break;
case KeyCode.Space:
this._handleSpace($event);
break;
case KeyCode.Enter:
this._handleEnter($event);
break;
case KeyCode.Tab:
this._handleTab($event);
break;
case KeyCode.Esc:
this.close();
$event.preventDefault();
break;
case KeyCode.Backspace:
this._handleBackspace();
break;
}
}
handleMousedown($event) {
const target = $event.target;
if (target.tagName !== 'INPUT') {
$event.preventDefault();
}
if (target.classList.contains('ng-clear-wrapper')) {
this.handleClearClick();
return;
}
if (target.classList.contains('ng-arrow-wrapper')) {
this.handleArrowClick();
return;
}
if (target.classList.contains('ng-value-icon')) {
return;
}
if (!this.focused) {
this.focus();
}
if (this.searchable) {
this.open();
}
else {
this.toggle();
}
}
handleArrowClick() {
if (this.isOpen) {
this.close();
}
else {
this.open();
}
}
handleClearClick() {
if (this.hasValue) {
this.itemsList.clearSelected(true);
this._updateNgModel();
}
this._clearSearch();
this.focus();
this.clearEvent.emit();
this._onSelectionChanged();
}
clearModel() {
if (!this.clearable) {
return;
}
this.itemsList.clearSelected();
this._updateNgModel();
}
writeValue(value) {
this.itemsList.clearSelected();
this._handleWriteValue(value);
this._cd.markForCheck();
}
registerOnChange(fn) {
this._onChange = fn;
}
registerOnTouched(fn) {
this._onTouched = fn;
}
setDisabledState(state) {
this._disabled = state;
this._cd.markForCheck();
}
toggle() {
if (!this.isOpen) {
this.open();
}
else {
this.close();
}
}
open() {
if (this.disabled || this.isOpen || this.itemsList.maxItemsSelected || this._manualOpen) {
return;
}
if (!this._isTypeahead && !this.addTag && this.itemsList.noItemsToSelect) {
return;
}
this.isOpen = true;
this.itemsList.markSelectedOrDefault(this.markFirst);
this.openEvent.emit();
if (!this.searchTerm) {
this.focus();
}
this.detectChanges();
}
close() {
if (!this.isOpen || this._manualOpen) {
return;
}
this.isOpen = false;
if (!this._editableSearchTerm) {
this._clearSearch();
}
else {
this.itemsList.resetFilteredItems();
}
this.itemsList.unmarkItem();
this._onTouched();
this.closeEvent.emit();
this._cd.markForCheck();
}
toggleItem(item) {
if (!item || item.disabled || this.disabled) {
return;
}
if (this.multiple && item.selected) {
this.unselect(item);
}
else {
this.select(item);
}
if (this._editableSearchTerm) {
this._setSearchTermFromItems();
}
this._onSelectionChanged();
}
select(item) {
if (!item.selected) {
this.itemsList.select(item);
if (this.clearSearchOnAdd && !this._editableSearchTerm) {
this._clearSearch();
}
this._updateNgModel();
if (this.multiple) {
this.addEvent.emit(item.value);
}
}
if (this.closeOnSelect || this.itemsList.noItemsToSelect) {
this.close();
}
}
focus() {
this.searchInput.nativeElement.focus();
}
blur() {
this.searchInput.nativeElement.blur();
}
unselect(item) {
if (!item) {
return;
}
this.itemsList.unselect(item);
this.focus();
this._updateNgModel();
this.removeEvent.emit(item);
}
selectTag() {
let tag;
if (isFunction(this.addTag)) {
tag = this.addTag(this.searchTerm);
}
else {
tag = this._primitive ? this.searchTerm : { [this.bindLabel]: this.searchTerm };
}
const handleTag = (item) => this._isTypeahead || !this.isOpen ? this.itemsList.mapItem(item, null) : this.itemsList.addItem(item);
if (isPromise(tag)) {
tag.then(item => this.select(handleTag(item))).catch(() => { });
}
else if (tag) {
this.select(handleTag(tag));
}
}
showClear() {
return this.clearable && (this.hasValue || this.searchTerm) && !this.disabled;
}
get showAddTag() {
if (!this._validTerm) {
return false;
}
const term = this.searchTerm.toLowerCase().trim();
return this.addTag &&
(!this.itemsList.filteredItems.some(x => x.label.toLowerCase() === term) &&
(!this.hideSelected && this.isOpen || !this.selectedItems.some(x => x.label.toLowerCase() === term))) &&
!this.loading;
}
showNoItemsFound() {
const empty = this.itemsList.filteredItems.length === 0;
return ((empty && !this._isTypeahead && !this.loading) ||
(empty && this._isTypeahead && this._validTerm && !this.loading)) &&
!this.showAddTag;
}
showTypeToSearch() {
const empty = this.itemsList.filteredItems.length === 0;
return empty && this._isTypeahead && !this._validTerm && !this.loading;
}
onCompositionStart() {
this._isComposing = true;
}
onCompositionEnd(term) {
this._isComposing = false;
if (this.searchWhileComposing) {
return;
}
this.filter(term);
}
filter(term) {
if (this._isComposing && !this.searchWhileComposing) {
return;
}
this.searchTerm = term;
if (this._isTypeahead && (this._validTerm || this.minTermLength === 0)) {
this.typeahead.next(term);
}
if (!this._isTypeahead) {
this.itemsList.filter(this.searchTerm);
if (this.isOpen) {
this.itemsList.markSelectedOrDefault(this.markFirst);
}
}
this.searchEvent.emit({ term, items: this.itemsList.filteredItems.map(x => x.value) });
this.open();
}
onInputFocus($event) {
if (this.focused) {
return;
}
if (this._editableSearchTerm) {
this._setSearchTermFromItems();
}
this.element.classList.add('ng-select-focused');
this.focusEvent.emit($event);
this.focused = true;
}
onInputBlur($event) {
this.element.classList.remove('ng-select-focused');
this.blurEvent.emit($event);
if (!this.isOpen && !this.disabled) {
this._onTouched();
}
if (this._editableSearchTerm) {
this._setSearchTermFromItems();
}
this.focused = false;
}
onItemHover(item) {
if (item.disabled) {
return;
}
this.itemsList.markItem(item);
}
detectChanges() {
if (!this._cd.destroyed) {
this._cd.detectChanges();
}
}
_setSearchTermFromItems() {
const selected = this.selectedItems && this.selectedItems[0];
this.searchTerm = (selected && selected.label) || null;
}
_setItems(items) {
const firstItem = items[0];
this.bindLabel = this.bindLabel || this._defaultLabel;
this._primitive = isDefined(firstItem) ? !isObject(firstItem) : this._primitive || this.bindLabel === this._defaultLabel;
this.itemsList.setItems(items);
if (items.length > 0 && this.hasValue) {
this.itemsList.mapSelectedItems();
}
if (this.isOpen && isDefined(this.searchTerm) && !this._isTypeahead) {
this.itemsList.filter(this.searchTerm);
}
if (this._isTypeahead || this.isOpen) {
this.itemsList.markSelectedOrDefault(this.markFirst);
}
}
_setItemsFromNgOptions() {
const mapNgOptions = (options) => {
this.items = options.map(option => ({
$ngOptionValue: option.value,
$ngOptionLabel: option.elementRef.nativeElement.innerHTML,
disabled: option.disabled
}));
this.itemsList.setItems(this.items);
if (this.hasValue) {
this.itemsList.mapSelectedItems();
}
this.detectChanges();
};
const handleOptionChange = () => {
const changedOrDestroyed = merge(this.ngOptions.changes, this._destroy$);
merge(...this.ngOptions.map(option => option.stateChange$))
.pipe(takeUntil(changedOrDestroyed))
.subscribe(option => {
const item = this.itemsList.findItem(option.value);
item.disabled = option.disabled;
item.label = option.label || item.label;
this._cd.detectChanges();
});
};
this.ngOptions.changes
.pipe(startWith(this.ngOptions), takeUntil(this._destroy$))
.subscribe(options => {
this.bindLabel = this._defaultLabel;
mapNgOptions(options);
handleOptionChange();
});
}
_isValidWriteValue(value) {
if (!isDefined(value) || (this.multiple && value === '') || Array.isArray(value) && value.length === 0) {
return false;
}
const validateBinding = (item) => {
if (!isDefined(this.compareWith) && isObject(item) && this.bindValue) {
this._console.warn(`Binding object(${JSON.stringify(item)}) with bindValue is not allowed.`);
return false;
}
return true;
};
if (this.multiple) {
if (!Array.isArray(value)) {
this._console.warn('Multiple select ngModel should be array.');
return false;
}
return value.every(item => validateBinding(item));
}
else {
return validateBinding(value);
}
}
_handleWriteValue(ngModel) {
if (!this._isValidWriteValue(ngModel)) {
return;
}
const select = (val) => {
let item = this.itemsList.findItem(val);
if (item) {
this.itemsList.select(item);
}
else {
const isValObject = isObject(val);
const isPrimitive = !isValObject && !this.bindValue;
if ((isValObject || isPrimitive)) {
this.itemsList.select(this.itemsList.mapItem(val, null));
}
else if (this.bindValue) {
item = {
[this.bindLabel]: null,
[this.bindValue]: val
};
this.itemsList.select(this.itemsList.mapItem(item, null));
}
}
};
if (this.multiple) {
ngModel.forEach(item => select(item));
}
else {
select(ngModel);
}
}
_handleKeyPresses() {
if (this.searchable) {
return;
}
this._keyPress$
.pipe(takeUntil(this._destroy$), tap(letter => this._pressedKeys.push(letter)), debounceTime(200), filter(() => this._pressedKeys.length > 0), map(() => this._pressedKeys.join('')))
.subscribe(term => {
const item = this.itemsList.findByLabel(term);
if (item) {
if (this.isOpen) {
this.itemsList.markItem(item);
this._cd.markForCheck();
}
else {
this.select(item);
}
}
this._pressedKeys = [];
});
}
_setInputAttributes() {
const input = this.searchInput.nativeElement;
const attributes = Object.assign({ type: 'text', autocorrect: 'off', autocapitalize: 'off', autocomplete: this.labelForId ? 'off' : this.dropdownId }, this.inputAttrs);
for (const key of Object.keys(attributes)) {
input.setAttribute(key, attributes[key]);
}
}
_updateNgModel() {
const model = [];
for (const item of this.selectedItems) {
if (this.bindValue) {
let value = null;
if (item.children) {
const groupKey = this.groupValue ? this.bindValue : this.groupBy;
value = item.value[groupKey || this.groupBy];
}
else {
value = this.itemsList.resolveNested(item.value, this.bindValue);
}
model.push(value);
}
else {
model.push(item.value);
}
}
const selected = this.selectedItems.map(x => x.value);
if (this.multiple) {
this._onChange(model);
this.changeEvent.emit(selected);
}
else {
this._onChange(isDefined(model[0]) ? model[0] : null);
this.changeEvent.emit(selected[0]);
}
this._cd.markForCheck();
}
_clearSearch() {
if (!this.searchTerm) {
return;
}
this._changeSearch(null);
this.itemsList.resetFilteredItems();
}
_changeSearch(searchTerm) {
this.searchTerm = searchTerm;
if (this._isTypeahead) {
this.typeahead.next(searchTerm);
}
}
_scrollToMarked() {
if (!this.isOpen || !this.dropdownPanel) {
return;
}
this.dropdownPanel.scrollTo(this.itemsList.markedItem);
}
_scrollToTag() {
if (!this.isOpen || !this.dropdownPanel) {
return;
}
this.dropdownPanel.scrollToTag();
}
_onSelectionChanged() {
if (this.isOpen && this.multiple && this.appendTo) {
// Make sure items are rendered.
this._cd.detectChanges();
this.dropdownPanel.adjustPosition();
}
}
_handleTab($event) {
if (this.isOpen === false && !this.addTag) {
return;
}
if (this.selectOnTab) {
if (this.itemsList.markedItem) {
this.toggleItem(this.itemsList.markedItem);
$event.preventDefault();
}
else if (this.showAddTag) {
this.selectTag();
$event.preventDefault();
}
else {
this.close();
}
}
else {
this.close();
}
}
_handleEnter($event) {
if (this.isOpen || this._manualOpen) {
if (this.itemsList.markedItem) {
this.toggleItem(this.itemsList.markedItem);
}
else if (this.showAddTag) {
this.selectTag();
}
}
else if (this.openOnEnter) {
this.open();
}
else {
return;
}
$event.preventDefault();
}
_handleSpace($event) {
if (this.isOpen || this._manualOpen) {
return;
}
this.open();
$event.preventDefault();
}
_handleArrowDown($event) {
if (this._nextItemIsTag(+1)) {
this.itemsList.unmarkItem();
this._scrollToTag();
}
else {
this.itemsList.markNextItem();
this._scrollToMarked();
}
this.open();
$event.preventDefault();
}
_handleArrowUp($event) {
if (!this.isOpen) {
return;
}
if (this._nextItemIsTag(-1)) {
this.itemsList.unmarkItem();
this._scrollToTag();
}
else {
this.itemsList.markPreviousItem();
this._scrollToMarked();
}
$event.preventDefault();
}
_nextItemIsTag(nextStep) {
const nextIndex = this.itemsList.markedIndex + nextStep;
return this.addTag && this.searchTerm
&& this.itemsList.markedItem
&& (nextIndex < 0 || nextIndex === this.itemsList.filteredItems.length);
}
_handleBackspace() {
if (this.searchTerm || !this.clearable || !this.clearOnBackspace || !this.hasValue) {
return;
}
if (this.multiple) {
this.unselect(this.itemsList.lastSelectedItem);
}
else {
this.clearModel();
}
}
get _isTypeahead() {
return this.typeahead && this.typeahead.observers.length > 0;
}
get _validTerm() {
const term = this.searchTerm && this.searchTerm.trim();
return term && term.length >= this.minTermLength;
}
_mergeGlobalConfig(config) {
this.placeholder = this.placeholder || config.placeholder;
this.notFoundText = this.notFoundText || config.notFoundText;
this.typeToSearchText = this.typeToSearchText || config.typeToSearchText;
this.addTagText = this.addTagText || config.addTagText;
this.loadingText = this.loadingText || config.loadingText;
this.clearAllText = this.clearAllText || config.clearAllText;
this.virtualScroll = isDefined(this.virtualScroll)
? this.virtualScroll
: isDefined(config.disableVirtualScroll) ? !config.disableVirtualScroll : false;
this.openOnEnter = isDefined(this.openOnEnter) ? this.openOnEnter : config.openOnEnter;
this.appendTo = this.appendTo || config.appendTo;
this.bindValue = this.bindValue || config.bindValue;
this.appearance = this.appearance || config.appearance;
}
};
SpSelectComponent.ctorParameters = () => [
{ type: String, decorators: [{ type: Attribute, args: ['class',] }] },
{ type: undefined, decorators: [{ type: Attribute, args: ['autofocus',] }] },
{ type: SpSelectConfig },
{ type: undefined, decorators: [{ type: Inject, args: [SELECTION_MODEL_FACTORY,] }] },
{ type: ElementRef },
{ type: ChangeDetectorRef },
{ type: ConsoleService }
];
__decorate([
Input()
], SpSelectComponent.prototype, "bindLabel", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "bindValue", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "markFirst", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "placeholder", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "notFoundText", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "typeToSearchText", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "addTagText", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "loadingText", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "clearAllText", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "appearance", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "dropdownPosition", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "appendTo", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "loading", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "closeOnSelect", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "hideSelected", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "selectOnTab", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "openOnEnter", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "maxSelectedItems", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "groupBy", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "groupValue", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "bufferAmount", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "virtualScroll", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "selectableGroup", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "selectableGroupAsModel", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "searchFn", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "trackByFn", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "clearOnBackspace", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "labelForId", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "inputAttrs", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "tabIndex", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "readonly", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "searchWhileComposing", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "minTermLength", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "editableSearchTerm", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "keyDownFn", void 0);
__decorate([
Input(), HostBinding('class.ng-select-typeahead')
], SpSelectComponent.prototype, "typeahead", void 0);
__decorate([
Input(), HostBinding('class.ng-select-multiple')
], SpSelectComponent.prototype, "multiple", void 0);
__decorate([
Input(), HostBinding('class.ng-select-taggable')
], SpSelectComponent.prototype, "addTag", void 0);
__decorate([
Input(), HostBinding('class.ng-select-searchable')
], SpSelectComponent.prototype, "searchable", void 0);
__decorate([
Input(), HostBinding('class.ng-select-clearable')
], SpSelectComponent.prototype, "clearable", void 0);
__decorate([
Input(), HostBinding('class.ng-select-opened')
], SpSelectComponent.prototype, "isOpen", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "items", null);
__decorate([
Input()
], SpSelectComponent.prototype, "compareWith", null);
__decorate([
Input()
], SpSelectComponent.prototype, "clearSearchOnAdd", null);
__decorate([
Input()
], SpSelectComponent.prototype, "extraLables", void 0);
__decorate([
Input()
], SpSelectComponent.prototype, "extraValues", void 0);
__decorate([
Output('blur')
], SpSelectComponent.prototype, "blurEvent", void 0);
__decorate([
Output('focus')
], SpSelectComponent.prototype, "focusEvent", void 0);
__decorate([
Output('change')
], SpSelectComponent.prototype, "changeEvent", void 0);
__decorate([
Output('open')
], SpSelectComponent.prototype, "openEvent", void 0);
__decorate([
Output('close')
], SpSelectComponent.prototype, "closeEvent", void 0);
__decorate([
Output('search')
], SpSelectComponent.prototype, "searchEvent", void 0);
__decorate([
Output('clear')
], SpSelectComponent.prototype, "clearEvent", void 0);
__decorate([
Output('add')
], SpSelectComponent.prototype, "addEvent", void 0);
__decorate([
Output('remove')
], SpSelectComponent.prototype, "removeEvent", void 0);
__decorate([
Output('scroll')
], SpSelectComponent.prototype, "scroll", void 0);
__decorate([
Output('scrollToEnd')
], SpSelectComponent.prototype, "scrollToEnd", void 0);
__decorate([
ContentChild(NgOptionTemplateDirective, { read: TemplateRef })
], SpSelectComponent.prototype, "optionTemplate", void 0);
__decorate([
ContentChild(NgOptgroupTemplateDirective, { read: TemplateRef })
], SpSelectComponent.prototype, "optgroupTemplate", void 0);
__decorate([
ContentChild(NgLabelTemplateDirective, { read: TemplateRef })
], SpSelectComponent.prototype, "labelTemplate", void 0);
__decorate([
ContentChild(NgMultiLabelTemplateDirective, { read: TemplateRef })
], SpSelectComponent.prototype, "multiLabelTemplate", void 0);
__decorate([
ContentChild(NgHeaderTemplateDirective, { read: TemplateRef })
], SpSelectComponent.prototype, "headerTemplate", void 0);
__decorate([
ContentChild(NgFooterTemplateDirective, { read: TemplateRef })
], SpSelectComponent.prototype, "footerTemplate", void 0);
__decorate([
ContentChild(NgNotFoundTemplateDirective, { read: TemplateRef })
], SpSelectComponent.prototype, "notFoundTemplate", void 0);
__decorate([
ContentChild(NgTypeToSearchTemplateDirective, { read: TemplateRef })
], SpSelectComponent.prototype, "typeToSearchTemplate", void 0);
__decorate([
ContentChild(NgLoadingTextTemplateDirective, { read: TemplateRef })
], SpSelectComponent.prototype, "loadingTextTemplate", void 0);
__decorate([
ContentChild(NgTagTemplateDirective, { read: TemplateRef })
], SpSelectComponent.prototype, "tagTemplate", void 0);
__decorate([
ContentChild(NgLoadingSpinnerTemplateDirective, { read: TemplateRef })
], SpSelectComponent.prototype, "loadingSpinnerTemplate", void 0);
__decorate([
ViewChild(forwardRef(() => NgDropdownPanelComponent))
], SpSelectComponent.prototype, "dropdownPanel", void 0);
__decorate([
ViewChild('searchInput', { static: true })
], SpSelectComponent.prototype, "searchInput", void 0);
__decorate([
ContentChildren(NgOptionComponent, { descendants: true })
], SpSelectComponent.prototype, "ngOptions", void 0);
__decorate([
HostBinding('class.ng-select-disabled')
], SpSelectComponent.prototype, "disabled", null);
__decorate([
HostBinding('class.ng-select-filtered')
], SpSelectComponent.prototype, "filtered", null);
__decorate([
HostListener('keydown', ['$event'])
], SpSelectComponent.prototype, "handleKeyDown", null);
SpSelectComponent = SpSelectComponent_1 = __decorate([
Component({
selector: 'sp-select',
template: "<div (mousedown)=\"handleMousedown($event)\" [class.ng-appearance-outline]=\"appearance === 'outline'\"\r\n [class.ng-has-value]=\"hasValue\" class=\"ng-select-container\">\r\n\r\n <div class=\"ng-value-container\">\r\n <div class=\"ng-placeholder\">{{placeholder}}</div>\r\n\r\n <ng-container *ngIf=\"!multiLabelTemplate && selectedItems.length > 0\">\r\n <div [class.ng-value-disabled]=\"item.disabled\" class=\"ng-value\"\r\n *ngFor=\"let item of selectedItems; trackBy: trackByOption\">\r\n <ng-template #defaultLabelTemplate>\r\n <span class=\"ng-value-icon left\" (click)=\"unselect(item);\" aria-hidden=\"true\">\u00D7</span>\r\n <span class=\"ng-value-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"labelTemplate || defaultLabelTemplate\"\r\n [ngTemplateOutletContext]=\"{ item: item.value, clear: clearItem, label: item.label }\">\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-template *ngIf=\"multiLabelTemplate && selectedValues.length > 0\" [ngTemplateOutlet]=\"multiLabelTemplate\"\r\n [ngTemplateOutletContext]=\"{ items: selectedValues, clear: clearItem }\">\r\n </ng-template>\r\n\r\n <div class=\"ng-input\">\r\n <input #searchInput [attr.id]=\"labelForId\" [attr.tabindex]=\"tabIndex\"\r\n [readOnly]=\"!searchable || itemsList.maxItemsSelected\" [disabled]=\"disabled\"\r\n [value]=\"searchTerm ? searchTerm : ''\" (input)=\"filter(searchInput.value)\"\r\n (compositionstart)=\"onCompositionStart()\" (compositionend)=\"onCompositionEnd(searchInput.value)\"\r\n (focus)=\"onInputFocus($event)\" (blur)=\"onInputBlur($event)\" (change)=\"$event.stopPropagation()\"\r\n role=\"combobox\" [attr.aria-expanded]=\"isOpen\" [attr.aria-owns]=\"isOpen ? dropdownId : null\"\r\n [attr.aria-activedescendant]=\"isOpen ? itemsList?.markedItem?.htmlId : null\">\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"loading\">\r\n <ng-template #defaultLoadingSpinnerTemplate>\r\n <div class=\"ng-spinner-loader\"></div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"loadingSpinnerTemplate || defaultLoadingSpinnerTemplate\">\r\n </ng-template>\r\n </ng-container>\r\n\r\n <span *ngIf=\"showClear()\" class=\"ng-clear-wrapper\" title=\"{{clearAllText}}\">\r\n <span class=\"ng-clear\" aria-hidden=\"true\">\u00D7</span>\r\n </span>\r\n\r\n <span class=\"ng-arrow-wrapper\">\r\n <span class=\"ng-arrow\"></span>\r\n </span>\r\n</div>\r\n\r\n<ng-dropdown-panel *ngIf=\"isOpen\" class=\"ng-dropdown-panel\" [virtualScroll]=\"virtualScroll\"\r\n [bufferAmount]=\"bufferAmount\" [appendTo]=\"appendTo\" [position]=\"dropdownPosition\" [headerTemplate]=\"headerTemplate\"\r\n [footerTemplate]=\"footerTemplate\" [filterValue]=\"searchTerm\" [items]=\"itemsList.filteredItems\"\r\n [markedItem]=\"itemsList.markedItem\" (update)=\"viewPortItems = $event\" (scroll)=\"scroll.emit($event)\"\r\n (scrollToEnd)=\"scrollToEnd.emit($event)\" (outsideClick)=\"close()\" [class.ng-select-multiple]=\"multiple\"\r\n [ngClass]=\"appendTo ? classes : null\" [id]=\"dropdownId\">\r\n\r\n <ng-container>\r\n <div class=\"ng-option\" [attr.role]=\"item.children ? 'group' : 'option'\" (click)=\"toggleItem(item)\"\r\n (mouseover)=\"onItemHover(item)\" *ngFor=\"let item of viewPortItems; trackBy: trackByOption\"\r\n [class.ng-option-disabled]=\"item.disabled\" [class.ng-option-selected]=\"item.selected\"\r\n [class.ng-optgroup]=\"item.children\" [class.ng-option]=\"!item.children\"\r\n [class.ng-option-child]=\"!!item.parent\" [class.ng-option-marked]=\"item === itemsList.markedItem\"\r\n [attr.aria-selected]=\"item.selected\" [attr.id]=\"item?.htmlId\">\r\n\r\n <ng-template #defaultOptionTemplate>\r\n <span class=\"ng-option-label\" [ngItemLabel]=\"item.label\" [escape]=\"escapeHTML\"></span>\r\n\r\n </ng-template>\r\n\r\n <ng-template\r\n [ngTemplateOutlet]=\"item.children ? (optgroupTemplate || defaultOptionTemplate) : (optionTemplate || defaultOptionTemplate)\"\r\n [ngTemplateOutletContext]=\"{ item: item.value, item$:item, index: item.index, searchTerm: searchTerm }\">\r\n </ng-template>\r\n </div>\r\n\r\n <div class=\"ng-option\" [class.ng-option-marked]=\"!itemsList.markedItem\" (mouseover)=\"itemsList.unmarkItem()\"\r\n role=\"option\" (click)=\"selectTag()\" *ngIf=\"showAddTag\">\r\n <ng-template #defaultTagTemplate>\r\n <span><span class=\"ng-tag-label\">{{addTagText}}</span>\"{{searchTerm}}\"</span>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"tagTemplate || defaultTagTemplate\"\r\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\r\n </ng-template>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"showNoItemsFound()\">\r\n <ng-template #defaultNotFoundTemplate>\r\n <div class=\"ng-option ng-option-disabled\">{{notFoundText}}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"notFoundTemplate || defaultNotFoundTemplate\"\r\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"showTypeToSearch()\">\r\n <ng-template #defaultTypeToSearchTemplate>\r\n <div class=\"ng-option ng-option-disabled\">{{typeToSearchText}}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"typeToSearchTemplate || defaultTypeToSearchTemplate\">\r\n </ng-template>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"loading && itemsList.filteredItems.length === 0\">\r\n <ng-template #defaultLoadingTextTemplate>\r\n <div class=\"ng-option ng-option-disabled\">{{loadingText}}</div>\r\n </ng-template>\r\n\r\n <ng-template [ngTemplateOutlet]=\"loadingTextTemplate || defaultLoadingTextTemplate\"\r\n [ngTemplateOutletContext]=\"{ searchTerm: searchTerm }\">\r\n </ng-template>\r\n </ng-container>\r\n\r\n</ng-dropdown-panel>",
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SpSelectComponent_1),
multi: true
},
NgDropdownPanelService
],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
host: {
'role': 'listbox',
'[class.ng-select]': 'useDefaultClass',
'[class.ng-select-single]': '!multiple',
},
styles: [".ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}.ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #333}.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:#007eff;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 0 3px rgba(0,126,255,.1)}.ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{color:#333;background-color:#fff;border-radius:4px;border:1px solid #ccc;min-height:36px;align-items:center}.ng-select .ng-select-container:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px}[dir=rtl] .ng-select .ng-select-container .ng-value-container{padding-right:10px;padding-left:0}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#999}.ng-select.ng-select-single .ng-select-container{height:36px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:5px;padding-left:10px;padding-right:50px;position:absolute;left:0;width:100%}[dir=rtl] .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{padding-right:10px;padding-left:50px}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e6e6e6}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-right:7px;padding-left:0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;background-color:#ebf5ff;border-radius:2px;margin-right:5px;white-space:nowrap}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin-right:0;margin-left:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:0;padding-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon,.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#d1e8ff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #b8dbff}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-left:1px solid #b8dbff;border-right:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #b8dbff}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:0;border-right:1px solid #b8dbff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 3px 3px 0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-bottom:5px;padding-left:3px}[dir=rtl] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-right:3px;padding-left:0}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#d0021b}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}[dir=rtl] .ng-select .ng-spinner-zone{padding:5px 0 0 5px}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}[dir=rtl] .ng-select .ng-arrow-wrapper{padding-left:5px;padding-right:0}.ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:#fff;border:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,.06);left:0}.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:rgba(0,0,0,.54);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#f5faff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{background-color:#ebf5ff;font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#333;background-color:#ebf5ff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#f5faff;color:#333}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:22px;padding-left:0}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}[dir=rtl] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}[dir=rtl] .ng-dropdown-panel{direction:rtl;text-align:right}.ng-select{position:relative;display:block;box-sizing:border-box}.ng-select div,.ng-select input,.ng-select span{box-sizing:border-box}.ng-select [hidden]{display:none}.ng-select.ng-select-searchable .ng-select-container .ng-value-container .ng-input{opacity:1}.ng-select.ng-select-opened .ng-select-container{z-index:1001}.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-placeholder,.ng-select.ng-select-disabled .ng-select-container .ng-value-container .ng-value{-webkit-user-select:none;-moz-user-select:none;-ms-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{display:none}.ng-select .ng-select-container{cursor:default;display:flex;outline:0;overflow:hidden;position:relative;width:100%}.ng-select .ng-select-container .ng-val