ngx-select2-ex
Version:
Angular(2+) version of the popular alternative to select inputs, Select2. Select2 classes are used in the template, so you can use any pre-existing styles for Select2 and it will look the same as the original.
877 lines (874 loc) • 44 kB
JavaScript
import { __extends, __spread, __values } from 'tslib';
import { Injectable, Component, Input, forwardRef, Pipe, HostBinding, ApplicationRef, ComponentFactoryResolver, Injector, Directive, ElementRef, HostListener, Renderer2, NgModule } from '@angular/core';
import { ReplaySubject } from 'rxjs/ReplaySubject';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
var NgxSelect2ExOption = /** @class */ (function () {
function NgxSelect2ExOption(id, value, disabled, selected) {
this.id = id;
this.value = value;
this.disabled = !!disabled;
this.selected = !!selected;
}
return NgxSelect2ExOption;
}());
var NgxSelect2ExOptionHandler = /** @class */ (function (_super) {
__extends(NgxSelect2ExOptionHandler, _super);
function NgxSelect2ExOptionHandler(id, value, disabled, selected, highlighted) {
var _this = _super.call(this, id, value, !!disabled, !!selected) || this;
_this.highlighted = !!highlighted;
return _this;
}
NgxSelect2ExOptionHandler.copy = function (optionHandler) {
return new NgxSelect2ExOptionHandler(optionHandler.id, optionHandler.value, optionHandler.disabled, optionHandler.selected, optionHandler.highlighted);
};
NgxSelect2ExOptionHandler.copyArray = function (arrayOfOptionHandlers) {
var options = arrayOfOptionHandlers.map(function (option) { return NgxSelect2ExOptionHandler.copy(option); });
return __spread(options);
};
return NgxSelect2ExOptionHandler;
}(NgxSelect2ExOption));
var NgxSelect2ExLanguageInputs = /** @class */ (function () {
function NgxSelect2ExLanguageInputs(languageInputs) {
this.errorLoading = languageInputs && languageInputs.errorLoading ?
languageInputs.errorLoading : function () { return "The results could not be loaded."; };
this.inputTooLong = languageInputs && languageInputs.inputTooLong ?
languageInputs.inputTooLong : function (n) { return "Please delete " + n + " character"; };
this.inputTooShort = languageInputs && languageInputs.inputTooShort ?
languageInputs.inputTooShort : function (n) { return "Please enter " + n + " or more characters"; };
this.loadingMore = languageInputs && languageInputs.loadingMore ?
languageInputs.loadingMore : function () { return "Loading more results\u2026"; };
this.maximumSelected = languageInputs && languageInputs.maximumSelected ?
languageInputs.maximumSelected : function (n) { return "You can only select " + n + " item"; };
this.noResults = languageInputs && languageInputs.noResults ?
languageInputs.noResults : function () { return "No results found"; };
this.searching = languageInputs && languageInputs.searching ?
languageInputs.searching : function () { return "Searching\u2026"; };
}
return NgxSelect2ExLanguageInputs;
}());
var NgxSelect2ExService = /** @class */ (function () {
function NgxSelect2ExService() {
this.multi = null;
this.disabled = false;
this.theme = 'default';
this.minimumResultsForSearch = 0;
this.minimumInputLength = null;
this.maximumInputLength = null;
this.language = new NgxSelect2ExLanguageInputs();
this.selectOnClose = false;
this.closeOnSelect = true;
this._options = new BehaviorSubject([]);
this._dropdownPosition = new ReplaySubject(1);
this._isOpen = new BehaviorSubject(false);
this._isInFocus = new BehaviorSubject(false);
this._selection = new BehaviorSubject([]);
this._search = new BehaviorSubject(null);
}
Object.defineProperty(NgxSelect2ExService.prototype, "options", {
get: function () {
return this._options.getValue();
},
set: function (options) {
this._options.next(NgxSelect2ExOptionHandler.copyArray(options));
this.selection = this.options;
},
enumerable: true,
configurable: true
});
NgxSelect2ExService.prototype.getOptionsAsObservable = function () {
return this._options.asObservable();
};
Object.defineProperty(NgxSelect2ExService.prototype, "selection", {
get: function () {
return this._selection.getValue();
},
set: function (options) {
options = NgxSelect2ExOptionHandler.copyArray(options);
var selection = options.filter(function (option) { return option.selected; });
if (this.multi) {
this._selection.next(selection);
}
else {
var selectedOption_1;
if (selection.length === 0 && options.length) {
selectedOption_1 = NgxSelect2ExOptionHandler.copyArray(options).reverse().pop();
}
else if (selection.length > 0) {
selectedOption_1 = selection.pop();
}
options.forEach(function (o) { return o.selected = false; });
options[options.findIndex(function (o) { return o.id === selectedOption_1.id; })].selected = true;
this._options.next(options);
selection = [selectedOption_1];
this._selection.next(selection);
}
},
enumerable: true,
configurable: true
});
NgxSelect2ExService.prototype.getSelectionAsObservable = function () {
return this._selection.asObservable();
};
Object.defineProperty(NgxSelect2ExService.prototype, "dropdownPosition", {
set: function (dropdownPosition) {
this._dropdownPosition.next(dropdownPosition);
},
enumerable: true,
configurable: true
});
NgxSelect2ExService.prototype.getDropdownPositionAsObservable = function () {
return this._dropdownPosition.asObservable();
};
Object.defineProperty(NgxSelect2ExService.prototype, "isOpen", {
get: function () {
return this._isOpen.getValue();
},
set: function (isOpen) {
this._isOpen.next(isOpen);
},
enumerable: true,
configurable: true
});
NgxSelect2ExService.prototype.getIsOpenAsObservable = function () {
return this._isOpen.asObservable();
};
Object.defineProperty(NgxSelect2ExService.prototype, "isInFocus", {
get: function () {
return this._isInFocus.getValue();
},
set: function (isInFocus) {
this._isInFocus.next(isInFocus);
},
enumerable: true,
configurable: true
});
NgxSelect2ExService.prototype.getIsInFocusAsObservable = function () {
return this._isInFocus.asObservable();
};
Object.defineProperty(NgxSelect2ExService.prototype, "search", {
get: function () {
return this._search.getValue();
},
set: function (search) {
this._search.next(search);
},
enumerable: true,
configurable: true
});
NgxSelect2ExService.prototype.getSearchAsObservable = function () {
return this._search.asObservable();
};
NgxSelect2ExService.prototype.open = function () {
this.isOpen = true;
};
NgxSelect2ExService.prototype.close = function () {
this.isOpen = false;
};
NgxSelect2ExService.prototype.select = function (optionHandlerToSelect) {
if (!this.multi) {
this.options.forEach(function (option) { return option.selected = false; });
}
var indexOfSelected = this.options.findIndex(function (option) { return option.id === optionHandlerToSelect.id; });
if (indexOfSelected > -1) {
var options = NgxSelect2ExOptionHandler.copyArray(this.options);
options[indexOfSelected].selected = true;
this.options = options;
}
};
NgxSelect2ExService.prototype.deselect = function (optionHandlerToDeselect) {
if (!this.multi) {
return;
}
else {
var indexOfDeselected = this.options.findIndex(function (option) { return option.id === optionHandlerToDeselect.id; });
if (indexOfDeselected > -1) {
var options = NgxSelect2ExOptionHandler.copyArray(this.options);
options[indexOfDeselected].selected = false;
this.options = options;
}
}
};
NgxSelect2ExService.prototype.clear = function () {
var options = NgxSelect2ExOptionHandler.copyArray(this.options);
options.forEach(function (option) { return option.selected = false; });
this._options.next(options);
this._selection.next([]);
};
return NgxSelect2ExService;
}());
NgxSelect2ExService.decorators = [
{ type: Injectable },
];
NgxSelect2ExService.ctorParameters = function () { return []; };
var NgxSelect2ExComponent = /** @class */ (function () {
function NgxSelect2ExComponent(ngxSelect2ExService) {
this.ngxSelect2ExService = ngxSelect2ExService;
this.options = null;
this.disabled = null;
this.multi = null;
this.theme = null;
this.minimumResultsForSearch = null;
this.minimumInputLength = null;
this.maximumInputLength = null;
this.language = null;
this.selectOnClose = false;
this.closeOnSelect = true;
this.allowClear = false;
this.placeholder = null;
this.selection = [];
this.subscriptions = [];
this.propagateChange = function (_) { };
}
Object.defineProperty(NgxSelect2ExComponent.prototype, "search", {
get: function () {
return this.ngxSelect2ExService.search;
},
set: function (search) {
this.ngxSelect2ExService.search = search;
},
enumerable: true,
configurable: true
});
NgxSelect2ExComponent.prototype.ngOnInit = function () {
this.initStaticInputValues();
this.subscribeToSelection();
this.subscribeToIsOpen();
this.subscribeToIsInFocus();
};
NgxSelect2ExComponent.prototype.ngOnChanges = function (changes) {
if (changes['options'] && changes['options'].currentValue.length &&
changes['options'].previousValue !== changes['options'].currentValue) {
this.initOptions(changes['options'].currentValue);
}
if (changes['disabled'] !== undefined &&
changes['disabled'].previousValue !== changes['disabled'].currentValue) {
this.ngxSelect2ExService.disabled = changes['disabled'].currentValue;
}
};
NgxSelect2ExComponent.prototype.ngOnDestroy = function () {
this.unsubscribe();
};
NgxSelect2ExComponent.prototype.writeValue = function (value) {
this.initOptions(value);
};
NgxSelect2ExComponent.prototype.registerOnChange = function (fn) {
this.propagateChange = fn;
};
NgxSelect2ExComponent.prototype.registerOnTouched = function (fn) { };
NgxSelect2ExComponent.prototype.setDisabledState = function (isDisabled) {
this.disabled = isDisabled;
this.ngxSelect2ExService.disabled = isDisabled;
};
NgxSelect2ExComponent.prototype.getContainerThemeClass = function () {
return 'select2-container--' + this.ngxSelect2ExService.theme;
};
NgxSelect2ExComponent.prototype.getStyleOfSearchListItem = function () {
var width = (!this.selection || !this.selection.length) && this.placeholder ? '100%' : null;
return { 'width': width };
};
NgxSelect2ExComponent.prototype.getStyleOfInlineInput = function (search) {
if (!search && (!this.selection || !this.selection.length) && this.placeholder) {
return { 'width': '100%' };
}
var width = search ? ((search.length + 1) * 0.75) + "em" : '0.75em';
return { 'width': width };
};
NgxSelect2ExComponent.prototype.getInlineInputPlaceholder = function () {
return (!this.selection || !this.selection.length) && this.placeholder ? this.placeholder : '';
};
NgxSelect2ExComponent.prototype.clearSelection = function () {
if (this.shouldShowClearSelectionButton() && (!this.multi && this.placeholder || this.multi) && !this.disabled) {
this.ngxSelect2ExService.clear();
}
};
NgxSelect2ExComponent.prototype.shouldShowClearSelectionButton = function () {
return this.allowClear && this.selection && !!this.selection.length;
};
NgxSelect2ExComponent.prototype.shouldShowPlaceholder = function () {
return (!this.selection || !this.selection.length) && !!this.placeholder;
};
NgxSelect2ExComponent.prototype.getTitleTooltipText = function () {
if (this.selection && this.selection.length && this.selection[0].value) {
return this.selection[0].value;
}
else if (this.placeholder) {
return this.placeholder;
}
else {
return '';
}
};
NgxSelect2ExComponent.prototype.deselect = function (optionHandlerToDeselect) {
this.ngxSelect2ExService.deselect(optionHandlerToDeselect);
};
NgxSelect2ExComponent.prototype.subscribeToSelection = function () {
var _this = this;
this.subscriptions.push(this.ngxSelect2ExService.getSelectionAsObservable()
.subscribe(function (selection) {
_this.selection = selection;
_this.propagateChange(_this.selection);
}));
};
NgxSelect2ExComponent.prototype.subscribeToIsOpen = function () {
var _this = this;
this.subscriptions.push(this.ngxSelect2ExService.getIsOpenAsObservable()
.subscribe(function (isOpen) { return _this.isOpen = isOpen; }));
};
NgxSelect2ExComponent.prototype.subscribeToIsInFocus = function () {
var _this = this;
this.subscriptions.push(this.ngxSelect2ExService.getIsInFocusAsObservable()
.subscribe(function (isInFocus) { return _this.isInFocus = isInFocus; }));
};
NgxSelect2ExComponent.prototype.initOptions = function (options) {
if (this.isStringList(options)) {
this.ngxSelect2ExService.options = options.map(function (option, index) { return new NgxSelect2ExOptionHandler(index, option); });
}
else if (this.isOptionInterfaceList(options)) {
this.ngxSelect2ExService.options = options.map(function (option) { return new NgxSelect2ExOptionHandler(option.id, option.value, option.disabled, option.selected); });
}
else {
throw new Error('Input for options array should be of type Array<string> or Array<INgxSelect2ExOption>.');
}
};
NgxSelect2ExComponent.prototype.isStringList = function (list) {
return list && list.every(function (item) {
return typeof item === 'string';
});
};
NgxSelect2ExComponent.prototype.isOptionInterfaceList = function (list) {
return list && list.every(function (item) {
return 'id' in item && 'value' in item;
});
};
NgxSelect2ExComponent.prototype.defaultChangeListener = function (changes, fieldName) {
if (changes[fieldName] && changes[fieldName].previousValue !== changes[fieldName].currentValue) {
this.ngxSelect2ExService[fieldName] = changes[fieldName].currentValue;
}
};
NgxSelect2ExComponent.prototype.initStaticInputValues = function () {
this.defaultInputSetter('multi');
this.defaultInputSetter('theme');
this.defaultInputSetter('minimumResultsForSearch');
this.defaultInputSetter('minimumInputLength');
this.defaultInputSetter('maximumInputLength', this.minimumInputLength && this.maximumInputLength && this.maximumInputLength < this.minimumInputLength ?
this.minimumInputLength :
this.maximumInputLength);
this.defaultInputSetter('language', new NgxSelect2ExLanguageInputs(this.language));
this.defaultInputSetter('selectOnClose');
this.defaultInputSetter('closeOnSelect');
};
NgxSelect2ExComponent.prototype.defaultInputSetter = function (inputField, optionalValue) {
if (this[inputField] !== null) {
this.ngxSelect2ExService[inputField] = optionalValue ? optionalValue : this[inputField];
}
};
NgxSelect2ExComponent.prototype.unsubscribe = function () {
this.subscriptions.forEach(function (subscription) { return subscription.unsubscribe(); });
};
return NgxSelect2ExComponent;
}());
NgxSelect2ExComponent.decorators = [
{ type: Component, args: [{
selector: 'app-ngx-select2-ex',
template: "<span appNgxSelect2Ex\n [service]=\"ngxSelect2ExService\"\n class=\"select2 select2-container\"\n [class.select2-container--below]=\"!disabled\"\n [class.select2-container--open]=\"isOpen\"\n [ngClass]=\"getContainerThemeClass()\"\n [class.select2-container--focus]=\"isInFocus\"\n [class.select2-container--disabled]=\"disabled\"\n dir=\"ltr\">\n <span class=\"selection\">\n <span class=\"select2-selection\"\n [class.select2-selection--single]=\"!multi\"\n [class.select2-selection--multiple]=\"multi\"\n role=\"combobox\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"isOpen\"\n [tabindex]=\"multi ? -1 : 0\"\n aria-labelledby=\"select2-container\"\n aria-owns=\"select2-results\">\n <span *ngIf=\"!multi\" class=\"select2-selection__rendered\" id=\"select2-selection-container\" [title]=\"getTitleTooltipText()\">\n <span *ngIf=\"shouldShowPlaceholder()\" class=\"select2-selection__placeholder\">{{placeholder}}</span>\n <span *ngIf=\"shouldShowClearSelectionButton()\" class=\"select2-selection__clear\" (click)=\"clearSelection()\">\u00D7</span>\n {{selection[0]?.value}}\n </span>\n <span *ngIf=\"!multi\" class=\"select2-selection__arrow\" role=\"presentation\">\n <b role=\"presentation\"></b>\n </span>\n <ul *ngIf=\"multi\" class=\"select2-selection__rendered\">\n <span *ngIf=\"shouldShowClearSelectionButton()\" class=\"select2-selection__clear\" (click)=\"clearSelection()\">\u00D7</span>\n <li *ngFor=\"let selectionItem of selection\" class=\"select2-selection__choice\" [title]=\"selectionItem.value\">\n <span class=\"select2-selection__choice__remove\" role=\"presentation\" (click)=\"deselect(selectionItem)\">\u00D7</span>\n {{selectionItem.value}}\n </li>\n <li class=\"select2-search select2-search--inline\" [ngStyle]=\"getStyleOfSearchListItem()\">\n <input class=\"select2-search__field\"\n type=\"search\"\n tabindex=\"0\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n role=\"textbox\"\n aria-autocomplete=\"list\"\n [placeholder]=\"getInlineInputPlaceholder()\"\n [ngStyle]=\"getStyleOfInlineInput(search)\"\n [(ngModel)]=\"search\"></li>\n </ul>\n </span>\n </span>\n <span class=\"dropdown-wrapper\" aria-hidden=\"true\"></span>\n</span>\n",
styles: [".select2-container{display:block}"],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return NgxSelect2ExComponent; }),
multi: true
},
NgxSelect2ExService
]
},] },
];
NgxSelect2ExComponent.ctorParameters = function () { return [
{ type: NgxSelect2ExService, },
]; };
NgxSelect2ExComponent.propDecorators = {
"options": [{ type: Input },],
"disabled": [{ type: Input },],
"multi": [{ type: Input },],
"theme": [{ type: Input },],
"minimumResultsForSearch": [{ type: Input },],
"minimumInputLength": [{ type: Input },],
"maximumInputLength": [{ type: Input },],
"language": [{ type: Input },],
"selectOnClose": [{ type: Input },],
"closeOnSelect": [{ type: Input },],
"allowClear": [{ type: Input },],
"placeholder": [{ type: Input },],
};
var NgxSelect2OptionFilterPipe = /** @class */ (function () {
function NgxSelect2OptionFilterPipe() {
}
NgxSelect2OptionFilterPipe.prototype.transform = function (options, filter, minimumResultsForSearch, minimumInputLength, maximumInputLength) {
if (minimumInputLength === void 0) { minimumInputLength = null; }
if (maximumInputLength === void 0) { maximumInputLength = null; }
return this.filterOptions(options, filter, minimumResultsForSearch, minimumInputLength, maximumInputLength);
};
NgxSelect2OptionFilterPipe.prototype.filterOptions = function (options, filter, minimumResultsForSearch, minimumInputLength, maximumInputLength) {
if (minimumInputLength === void 0) { minimumInputLength = null; }
if (maximumInputLength === void 0) { maximumInputLength = null; }
if (options.length < minimumResultsForSearch) {
return options;
}
else if (minimumInputLength !== null && maximumInputLength !== null) {
return this.rangeInputFilteringHandler(options, filter, minimumInputLength, maximumInputLength);
}
else if (minimumInputLength !== null) {
return this.minimumInputFilteringHandler(options, filter, minimumInputLength);
}
else if (maximumInputLength !== null) {
return this.maximumInputFilteringHandler(options, filter, maximumInputLength);
}
else {
return this.doFiltering(options, filter);
}
};
NgxSelect2OptionFilterPipe.prototype.rangeInputFilteringHandler = function (options, filter, minimumInputLength, maximumInputLength) {
if (this.isfilterTextBiggerThanMinimumInputLength(filter, minimumInputLength) &&
this.isfilterTextSmallerThanMaximumInputLength(filter, maximumInputLength)) {
return this.doFiltering(options, filter);
}
else {
return ([]);
}
};
NgxSelect2OptionFilterPipe.prototype.minimumInputFilteringHandler = function (options, filter, minimumInputLength) {
if (this.isfilterTextBiggerThanMinimumInputLength(filter, minimumInputLength)) {
return this.doFiltering(options, filter);
}
else {
return ([]);
}
};
NgxSelect2OptionFilterPipe.prototype.maximumInputFilteringHandler = function (options, filter, maximumInputLength) {
if (!filter || this.isfilterTextSmallerThanMaximumInputLength(filter, maximumInputLength)) {
return this.doFiltering(options, filter);
}
else {
return ([]);
}
};
NgxSelect2OptionFilterPipe.prototype.isfilterTextBiggerThanMinimumInputLength = function (filter, minimumInputLength) {
return filter && minimumInputLength <= filter.length;
};
NgxSelect2OptionFilterPipe.prototype.isfilterTextSmallerThanMaximumInputLength = function (filter, maximumInputLength) {
return filter && filter.length <= maximumInputLength;
};
NgxSelect2OptionFilterPipe.prototype.doFiltering = function (options, filter) {
if (filter) {
return options.filter(function (option) { return option.value.toLowerCase().includes(filter.toLowerCase()); });
}
else {
return options;
}
};
return NgxSelect2OptionFilterPipe;
}());
NgxSelect2OptionFilterPipe.decorators = [
{ type: Pipe, args: [{
name: 'ngxSelect2OptionFilter'
},] },
];
var NgxSelect2ExDropdownComponent = /** @class */ (function () {
function NgxSelect2ExDropdownComponent(filterPipe) {
this.filterPipe = filterPipe;
this.multi = null;
this.minimumInputLength = null;
this.maximumInputLength = null;
this.display = 'block';
this.position = 'absolute';
this.options = [];
this.subscriptions = [];
}
NgxSelect2ExDropdownComponent.prototype.ngOnInit = function () {
this.subscribeToOptions();
this.subscribeToDropdownPositionChanges();
this.subscribeToSearchChanges();
};
NgxSelect2ExDropdownComponent.prototype.ngOnDestroy = function () {
this.unsubscribe();
this.selectOnClose();
};
NgxSelect2ExDropdownComponent.prototype.onOptionHover = function (hoveredOption) {
if (!hoveredOption.disabled) {
this.options.forEach(function (option) {
option.highlighted = option.id === hoveredOption.id;
});
}
};
NgxSelect2ExDropdownComponent.prototype.onOptionClick = function (clickedOption) {
if (clickedOption.disabled) {
return;
}
if (!clickedOption.selected) {
this.service.select(clickedOption);
}
else {
this.service.deselect(clickedOption);
}
this.service.search = null;
};
NgxSelect2ExDropdownComponent.prototype.getContainerThemeClass = function () {
return 'select2-container--' + this.theme;
};
NgxSelect2ExDropdownComponent.prototype.shouldHideSearchBox = function () {
return this.options.length < this.minimumResultsForSearch || this.multi;
};
NgxSelect2ExDropdownComponent.prototype.getNoResultsMessage = function () {
return this.language.noResults();
};
NgxSelect2ExDropdownComponent.prototype.getInputTooShortMessage = function () {
return this.language.inputTooShort(this.minimumInputLength);
};
NgxSelect2ExDropdownComponent.prototype.getInputTooLongMessage = function () {
return this.language.inputTooLong((this.search ? this.search.length : 0) - this.maximumInputLength);
};
NgxSelect2ExDropdownComponent.prototype.shouldShowNoResultsMessage = function () {
return this.search &&
!this.filterPipe.filterOptions(this.options, this.search, this.minimumResultsForSearch).length &&
!this.shouldShowInputTooShortMessage() &&
!this.shouldShowInputTooLongMessage() &&
(this.multi || !this.shouldHideSearchBox());
};
NgxSelect2ExDropdownComponent.prototype.shouldShowInputTooShortMessage = function () {
return this.minimumInputLength !== null &&
(!this.search || this.search && this.search.length < this.minimumInputLength) &&
!this.filterPipe.filterOptions(this.options, this.search, this.minimumResultsForSearch, this.minimumInputLength).length &&
!this.shouldHideSearchBox();
};
NgxSelect2ExDropdownComponent.prototype.shouldShowInputTooLongMessage = function () {
return this.maximumInputLength !== null &&
this.search && this.maximumInputLength < this.search.length &&
!this.filterPipe.filterOptions(this.options, this.search, this.minimumResultsForSearch, null, this.maximumInputLength).length &&
!this.shouldHideSearchBox();
};
NgxSelect2ExDropdownComponent.prototype.subscribeToOptions = function () {
var _this = this;
this.subscriptions.push(this.service.getOptionsAsObservable().subscribe(function (options) { return _this.options = options; }, function (error) { return console.error(error); }));
};
NgxSelect2ExDropdownComponent.prototype.subscribeToDropdownPositionChanges = function () {
var _this = this;
this.subscriptions.push(this.service.getDropdownPositionAsObservable().subscribe(function (dropdownPosition) { return _this.initDropdownPosition(dropdownPosition); }));
};
NgxSelect2ExDropdownComponent.prototype.subscribeToSearchChanges = function () {
var _this = this;
this.subscriptions.push(this.service.getSearchAsObservable().subscribe(function (search) { return _this.search = search; }));
};
NgxSelect2ExDropdownComponent.prototype.initDropdownPosition = function (dropdownPosition) {
this.top = dropdownPosition.top + 'px';
this.left = dropdownPosition.left + 'px';
this.width = dropdownPosition.width + 'px';
};
NgxSelect2ExDropdownComponent.prototype.selectOnClose = function () {
var highlightedOption = this.options.find(function (option) { return option.highlighted; });
if (highlightedOption && this.service.selectOnClose) {
this.service.select(highlightedOption);
}
};
NgxSelect2ExDropdownComponent.prototype.unsubscribe = function () {
this.subscriptions.forEach(function (subscription) { return subscription.unsubscribe(); });
};
return NgxSelect2ExDropdownComponent;
}());
NgxSelect2ExDropdownComponent.decorators = [
{ type: Component, args: [{
selector: 'app-ngx-select2-ex-dropdown',
template: "<span class=\"select2-container\" [ngClass]=\"getContainerThemeClass()\" [class.select2-container--open]=\"true\">\n <span id=\"select2-dropdown\" class=\"select2-dropdown select2-dropdown--below\" dir=\"ltr\">\n <span *ngIf=\"!multi\" class=\"select2-search select2-search--dropdown\" [class.select2-search--hide]=\"shouldHideSearchBox()\">\n <input appNgxSelect2ExDropdownSearchField\n class=\"select2-search__field\"\n type=\"search\" tabindex=\"0\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n role=\"textbox\"\n [(ngModel)]=\"search\">\n </span>\n <span class=\"select2-results\">\n <ul class=\"select2-results__options\" role=\"tree\" id=\"select2-results\" aria-expanded=\"true\" aria-hidden=\"false\">\n <li *ngFor=\"let option of options | ngxSelect2OptionFilter: search:minimumResultsForSearch:minimumInputLength:maximumInputLength\"\n class=\"select2-results__option\"\n [class.select2-results__option--highlighted]=\"option.highlighted\"\n role=\"treeitem\"\n [attr.aria-selected]=\"option.selected\"\n [attr.aria-disabled]=\"option.disabled ? option.disabled : null\"\n (mouseover)=\"onOptionHover(option)\"\n (mousedown)=\"onOptionClick(option)\">\n {{option.value}}\n </li>\n <li *ngIf=\"shouldShowNoResultsMessage()\"\n role=\"treeitem\"\n aria-live=\"assertive\"\n class=\"select2-results__option select2-results__message\">\n {{getNoResultsMessage()}}\n </li>\n <li *ngIf=\"shouldShowInputTooShortMessage()\"\n role=\"treeitem\"\n aria-live=\"assertive\"\n class=\"select2-results__option select2-results__message\">\n {{getInputTooShortMessage()}}\n </li>\n <li *ngIf=\"shouldShowInputTooLongMessage()\"\n role=\"treeitem\"\n aria-live=\"assertive\"\n class=\"select2-results__option select2-results__message\">\n {{getInputTooLongMessage()}}\n </li>\n </ul>\n </span>\n </span>\n</span>\n",
styles: [".select2-container{display:block}"]
},] },
];
NgxSelect2ExDropdownComponent.ctorParameters = function () { return [
{ type: NgxSelect2OptionFilterPipe, },
]; };
NgxSelect2ExDropdownComponent.propDecorators = {
"service": [{ type: Input },],
"multi": [{ type: Input },],
"theme": [{ type: Input },],
"minimumResultsForSearch": [{ type: Input },],
"minimumInputLength": [{ type: Input },],
"maximumInputLength": [{ type: Input },],
"language": [{ type: Input },],
"display": [{ type: HostBinding, args: ['style.display',] },],
"position": [{ type: HostBinding, args: ['style.position',] },],
"top": [{ type: HostBinding, args: ['style.top',] },],
"left": [{ type: HostBinding, args: ['style.left',] },],
"right": [{ type: HostBinding, args: ['style.right',] },],
"width": [{ type: HostBinding, args: ['style.width',] },],
};
var NgxSelect2ExDropdownInjectionService = /** @class */ (function () {
function NgxSelect2ExDropdownInjectionService(applicationRef, componentFactoryResolver, injector) {
this.applicationRef = applicationRef;
this.componentFactoryResolver = componentFactoryResolver;
this.injector = injector;
}
NgxSelect2ExDropdownInjectionService.prototype.getRootViewContainer = function () {
if (this._container) {
return this._container;
}
var rootComponents = this.applicationRef['components'];
if (rootComponents.length) {
return rootComponents[0];
}
throw new Error('View Container not found! ngUpgrade needs to manually set this via setRootViewContainer.');
};
NgxSelect2ExDropdownInjectionService.prototype.setRootViewContainer = function (container) {
this._container = container;
};
NgxSelect2ExDropdownInjectionService.prototype.getComponentRootNode = function (componentRef) {
return (((componentRef.hostView)).rootNodes[0]);
};
NgxSelect2ExDropdownInjectionService.prototype.getRootViewContainerNode = function () {
return this.getComponentRootNode(this.getRootViewContainer());
};
NgxSelect2ExDropdownInjectionService.prototype.projectComponentInputs = function (component, options) {
if (options) {
var props = Object.getOwnPropertyNames(options);
try {
for (var props_1 = __values(props), props_1_1 = props_1.next(); !props_1_1.done; props_1_1 = props_1.next()) {
var prop = props_1_1.value;
component.instance[prop] = options[prop];
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (props_1_1 && !props_1_1.done && (_a = props_1.return)) _a.call(props_1);
}
finally { if (e_1) throw e_1.error; }
}
}
return component;
var e_1, _a;
};
NgxSelect2ExDropdownInjectionService.prototype.appendComponent = function (componentClass, options, location) {
if (options === void 0) { options = {}; }
if (location === void 0) { location = this.getRootViewContainerNode(); }
var componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentClass);
var componentRef = componentFactory.create(this.injector);
var appRef = this.applicationRef;
var componentRootNode = this.getComponentRootNode(componentRef);
this.projectComponentInputs(componentRef, options);
appRef.attachView(componentRef.hostView);
componentRef.onDestroy(function () {
appRef.detachView(componentRef.hostView);
});
location.appendChild(componentRootNode);
return componentRef;
};
return NgxSelect2ExDropdownInjectionService;
}());
NgxSelect2ExDropdownInjectionService.decorators = [
{ type: Injectable },
];
NgxSelect2ExDropdownInjectionService.ctorParameters = function () { return [
{ type: ApplicationRef, },
{ type: ComponentFactoryResolver, },
{ type: Injector, },
]; };
function _window() {
return window;
}
var WindowRef = /** @class */ (function () {
function WindowRef() {
}
Object.defineProperty(WindowRef.prototype, "nativeWindow", {
get: function () {
return _window();
},
enumerable: true,
configurable: true
});
return WindowRef;
}());
WindowRef.decorators = [
{ type: Injectable },
];
WindowRef.ctorParameters = function () { return []; };
var NgxSelect2ExDirective = /** @class */ (function () {
function NgxSelect2ExDirective(el, renderer, ngxSelect2ExDropdownInjectionService, winRef) {
this.el = el;
this.renderer = renderer;
this.ngxSelect2ExDropdownInjectionService = ngxSelect2ExDropdownInjectionService;
this.winRef = winRef;
this.subscriptions = [];
}
NgxSelect2ExDirective.prototype.ngOnInit = function () {
this.updateDropdownPosition();
this.subscribeToSearchChanges();
};
NgxSelect2ExDirective.prototype.ngOnDestroy = function () {
this.unsubscribe();
};
NgxSelect2ExDirective.prototype.onClick = function (targetElement) {
var dropdown = this.compRef ? this.compRef.location.nativeElement : null;
var clickedClearButton = targetElement.className === 'select2-selection__clear';
var clickedDisabledOption = targetElement.hasAttribute('aria-disabled');
var clickedNoOptionListItem = targetElement.className.includes('select2-results__message');
var clickedSearchField = targetElement.className.includes('select2-search__field');
var clickedRemoveChoice = targetElement.className.includes('select2-selection__choice__remove');
var clickedDropdown = dropdown && dropdown.contains(targetElement);
var clickedInside = this.el.nativeElement.contains(targetElement) || clickedDropdown;
if (clickedInside && !this.service.isOpen) {
this.service.isInFocus = false;
if (!this.service.disabled) {
this.openDropdown();
}
}
else if (clickedInside && this.service.isOpen) {
if (clickedDisabledOption || clickedNoOptionListItem || clickedSearchField || clickedClearButton) {
this.service.isInFocus = false;
}
else {
if (this.service.closeOnSelect || !clickedDropdown) {
this.service.isInFocus = true;
if (!clickedRemoveChoice) {
this.closeDropdown();
}
}
}
}
else if (!clickedInside && this.service.isOpen) {
this.service.isInFocus = false;
this.closeDropdown();
}
else if (!clickedInside && !this.service.isOpen) {
this.service.isInFocus = false;
}
if (clickedInside) {
if (!this.service.disabled) {
this.setFocusForSearchField(this.compRef ? this.compRef.location.nativeElement : null);
}
if (this.service.multi && !clickedNoOptionListItem) {
this.service.search = null;
}
}
};
NgxSelect2ExDirective.prototype.resize = function () {
this.updateDropdownPosition();
};
NgxSelect2ExDirective.prototype.openDropdown = function () {
this.compRef = this.ngxSelect2ExDropdownInjectionService.appendComponent(NgxSelect2ExDropdownComponent, {
service: this.service,
multi: this.service.multi,
theme: this.service.theme,
minimumResultsForSearch: this.service.minimumResultsForSearch,
minimumInputLength: this.service.minimumInputLength,
maximumInputLength: this.service.maximumInputLength,
language: this.service.language
});
this.service.isOpen = true;
this.updateDropdownPosition();
};
NgxSelect2ExDirective.prototype.closeDropdown = function () {
if (this.compRef) {
this.compRef.destroy();
this.compRef = null;
}
this.service.isOpen = false;
};
NgxSelect2ExDirective.prototype.setFocusForSearchField = function (targetElement) {
var inlineSearchField = this.el.nativeElement ? this.el.nativeElement.getElementsByClassName('select2-search__field') : null;
if (inlineSearchField && inlineSearchField.length) {
inlineSearchField[0].focus();
}
};
NgxSelect2ExDirective.prototype.subscribeToSearchChanges = function () {
var _this = this;
this.subscriptions.push(this.service.getSearchAsObservable().subscribe(function (search) {
if (_this.service.multi) {
if (search && !_this.service.isOpen) {
if (!_this.service.disabled) {
_this.openDropdown();
}
}
_this.updateDropdownPosition();
}
}));
};
NgxSelect2ExDirective.prototype.updateDropdownPosition = function () {
this.renderer.setStyle(this.el.nativeElement, 'width', '100%');
var boundingClientRect = this.el.nativeElement.getBoundingClientRect();
var offsetTop = boundingClientRect.bottom + this.winRef.nativeWindow.scrollY;
var dropdownPosition = {
top: offsetTop,
left: boundingClientRect.left,
width: boundingClientRect.width
};
this.service.dropdownPosition = dropdownPosition;
this.renderer.setStyle(this.el.nativeElement, 'width', boundingClientRect.width + "px");
};
NgxSelect2ExDirective.prototype.unsubscribe = function () {
this.subscriptions.forEach(function (subscription) { return subscription.unsubscribe(); });
};
return NgxSelect2ExDirective;
}());
NgxSelect2ExDirective.decorators = [
{ type: Directive, args: [{
selector: '[appNgxSelect2Ex]',
providers: [WindowRef]
},] },
];
NgxSelect2ExDirective.ctorParameters = function () { return [
{ type: ElementRef, },
{ type: Renderer2, },
{ type: NgxSelect2ExDropdownInjectionService, },
{ type: WindowRef, },
]; };
NgxSelect2ExDirective.propDecorators = {
"service": [{ type: Input },],
"onClick": [{ type: HostListener, args: ['document:mouseup', ['$event.target'],] },],
"resize": [{ type: HostListener, args: ['window:resize',] },],
};
var NgxSelect2ExDropdownSearchFieldDirective = /** @class */ (function () {
function NgxSelect2ExDropdownSearchFieldDirective(el) {
this.el = el;
}
NgxSelect2ExDropdownSearchFieldDirective.prototype.ngOnInit = function () {
this.setFocusForDropdownSearchField();
};
NgxSelect2ExDropdownSearchFieldDirective.prototype.setFocusForDropdownSearchField = function () {
this.el.nativeElement.focus();
};
return NgxSelect2ExDropdownSearchFieldDirective;
}());
NgxSelect2ExDropdownSearchFieldDirective.decorators = [
{ type: Directive, args: [{
selector: '[appNgxSelect2ExDropdownSearchField]'
},] },
];
NgxSelect2ExDropdownSearchFieldDirective.ctorParameters = function () { return [
{ type: ElementRef, },
]; };
var NgxSelect2ExModule = /** @class */ (function () {
function NgxSelect2ExModule() {
}
return NgxSelect2ExModule;
}());
NgxSelect2ExModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
FormsModule
],
declarations: [
NgxSelect2ExComponent,
NgxSelect2ExDropdownComponent,
NgxSelect2ExDirective,
NgxSelect2ExDropdownSearchFieldDirective,
NgxSelect2OptionFilterPipe
],
exports: [NgxSelect2ExComponent],
entryComponents: [NgxSelect2ExDropdownComponent],
providers: [
NgxSelect2ExDropdownInjectionService,
NgxSelect2OptionFilterPipe
]
},] },
];
export { NgxSelect2ExModule, NgxSelect2ExDropdownComponent as ɵc, NgxSelect2ExComponent as ɵa, NgxSelect2ExDropdownSearchFieldDirective as ɵh, NgxSelect2ExDirective as ɵe, NgxSelect2OptionFilterPipe as ɵd, NgxSelect2ExDropdownInjectionService as ɵg, NgxSelect2ExService as ɵb, WindowRef as ɵf };
//# sourceMappingURL=ngx-select2-ex.js.map