ngx-dropdown-search
Version:
A configurable dropdown box with search functionality for Angular 4.
127 lines • 13.2 kB
JavaScript
import { Component, ViewChild, Input, Output, EventEmitter } from '@angular/core';
var DropdownSearchSelectorComponent = /** @class */ (function () {
function DropdownSearchSelectorComponent() {
this.displayProperty = 'name';
this.secondaryDisplayProperty = '';
this.filterProperty = 'name';
this.secondaryFilterProperty = '';
this.disabled = false;
this.noResultsMessage = 'No results found';
this.validationMessage = '';
this.loading = false;
this.maxWidth = '100%';
this.itemSelected = new EventEmitter();
this.itemDeselected = new EventEmitter();
this.displayResults = false;
this.displayValidationMessage = false;
this.elementCurrentlyHasFocus = false;
}
;
DropdownSearchSelectorComponent.prototype.ngOnInit = function () {
this.filteredResults = this.resultSet;
};
DropdownSearchSelectorComponent.prototype.toggleResultsDisplay = function () {
if (this.displayResults) {
this.hideResults(true);
this.textarea.nativeElement.blur();
}
else {
this.focusTextareaAndShowResults();
}
};
DropdownSearchSelectorComponent.prototype.focusTextareaAndShowResults = function () {
this.filteredResults = this.resultSet;
this.textarea.nativeElement.focus();
this.displayResults = true;
};
DropdownSearchSelectorComponent.prototype.hideResults = function (ignoreFocus) {
if (ignoreFocus === void 0) { ignoreFocus = false; }
if (!this.elementCurrentlyHasFocus || ignoreFocus) {
this.displayResults = false;
this.searchFilter = '';
this.filteredResults = this.resultSet;
}
};
DropdownSearchSelectorComponent.prototype.setItem = function (event, item) {
event.stopPropagation();
this.selectedItem = item;
this.itemSelected.emit(item);
this.displayResults = false;
this.searchFilter = '';
this.displayValidationMessage = false;
this.filteredResults = this.resultSet;
};
DropdownSearchSelectorComponent.prototype.resetSelectedItem = function () {
var _this = this;
this.itemDeselected.emit(this.selectedItem);
this.selectedItem = null;
setTimeout(function () {
_this.textarea.nativeElement.focus();
}, 0);
if (this.resultSet) {
this.displayResults = true;
}
};
DropdownSearchSelectorComponent.prototype.displayResultsAndApplyFilter = function () {
var _this = this;
this.displayResults = true;
if (this.searchFilter && this.searchFilter.length > 0 && this.resultSet) {
this.filteredResults = this.resultSet.filter(function (item) {
return _this.secondaryFilterProperty ? (item[_this.filterProperty] + ' ' + item[_this.secondaryFilterProperty]).toLowerCase().includes(_this.searchFilter.toLowerCase()) :
item[_this.filterProperty].toLowerCase().includes(_this.searchFilter.toLowerCase());
});
}
else {
this.filteredResults = this.resultSet;
}
};
DropdownSearchSelectorComponent.prototype.isValid = function () {
if (this.selectedItem != null) {
return true;
}
else {
this.displayValidationMessage = true;
return false;
}
;
};
DropdownSearchSelectorComponent.prototype.preventBlur = function ($event) {
$event.preventDefault();
this.textarea.nativeElement.focus();
};
DropdownSearchSelectorComponent.prototype.resetFilter = function () {
this.searchFilter = '';
this.filteredResults = this.resultSet;
this.textarea.nativeElement.focus();
};
DropdownSearchSelectorComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-dropdown-search',
template: "\n <div class=\"form-group\" [ngStyle]=\"{'max-width': maxWidth}\" (mouseover)=\"elementCurrentlyHasFocus = true\" (mouseleave)=\"elementCurrentlyHasFocus = false\">\n <div class=\"selector-container\">\n <textarea #textarea class=\"form-control textarea-selector\" rows=\"1\" [placeholder]=\"selectedItem ? '' : placeholder\" (click)=\"displayResultsAndApplyFilter()\" (blur)=\"hideResults()\"\n [disabled]=\"selectedItem || disabled || loading\" (keyup)=\"displayResultsAndApplyFilter()\" [(ngModel)]=\"searchFilter\"></textarea>\n <span class=\"drop-menu\" *ngIf=\"!selectedItem && !disabled && !loading && !searchFilter\" (mousedown)=\"$event.preventDefault()\" (click)=\"toggleResultsDisplay()\"><i class=\"fa fa-caret-down caret-down-selector\" aria-hidden=\"true\"></i></span>\n <span class=\"drop-menu-disabled\" *ngIf=\"!selectedItem && disabled && !loading\"><i class=\"fa fa-caret-down caret-down-selector\" aria-hidden=\"true\"></i></span>\n <span class=\"drop-menu-disabled\" *ngIf=\"!selectedItem && !disabled && loading\"><i class=\"fa fa-spinner fa-pulse fa-fw\"></i></span>\n <span class=\"drop-menu\" *ngIf=\"selectedItem\" (mousedown)=\"$event.preventDefault()\" (click)=\"resetSelectedItem()\"><i class=\"fa fa-times\" aria-hidden=\"true\"></i></span>\n <span class=\"drop-menu\" *ngIf=\"!selectedItem && !loading && !disabled && searchFilter\" (click)=\"resetFilter()\"><i class=\"fa fa-times\" aria-hidden=\"true\"></i></span>\n </div>\n \n <div *ngIf=\"displayValidationMessage && validationMessage != ''\" class=\"alert alert-danger\">\n {{validationMessage}}\n </div>\n \n <p *ngIf=\"disabled\" class=\"conditional-message\">{{conditionalMessage}}</p>\n \n <div *ngIf=\"selectedItem\" class=\"selected-item\">\n <p>{{selectedItem[displayProperty]}}{{secondaryDisplayProperty ? ' ' + selectedItem[secondaryDisplayProperty] : ''}}</p>\n </div>\n \n <!-- Keeping this here for now - Styles and HTML for mutliple selections -->\n <!-- <div *ngIf=\"selectedItem\" class=\"selected-items\">\n <p>{{selectedItem[displayProperty]}}</p>\n <i class=\"fa fa-times\" aria-hidden=\"true\" (click)=\"resetSelectedItem()\"></i>\n </div> -->\n \n <div class=\"results-container\" *ngIf=\"displayResults\" (mousedown)=\"preventBlur($event)\" (mouseup)=\"preventBlur($event)\">\n <div *ngFor=\"let item of filteredResults\">\n <p class=\"result-item\" (click)=\"setItem($event, item)\">{{item[displayProperty]}}{{secondaryDisplayProperty ? ' ' + item[secondaryDisplayProperty] : ''}}</p>\n </div>\n <div *ngIf=\"!filteredResults || filteredResults.length == 0\">\n <p>{{noResultsMessage}}</p>\n </div>\n </div>\n </div>\n ",
styles: ["\n .form-group {\n margin: 0;\n max-width: 100%;\n position: relative;\n }\n \n .selector-container {\n max-width: 100%;\n width: 100%;\n position: relative;\n }\n \n .textarea-selector {\n resize: none;\n padding-right: 34px;\n overflow-x: hidden;\n }\n \n .drop-menu {\n background: linear-gradient(to bottom, white 0, #f2f2f2 100%);\n border-color: #ccc;\n border-radius: 3px;\n border-style: solid;\n border-width: 1px;\n color: #333;\n cursor: pointer;\n display: inline-block;\n font-size: 14px;\n font-family: inherit;\n font-variant: normal;\n line-height: 20px;\n margin: 0 10px 0 0;\n padding: 4px 10px;\n text-decoration: none;\n text-shadow: 0 1px 0 white;\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n -ms-box-sizing: border-box;\n box-sizing: border-box;\n -moz-border-radius-bottomleft: 0;\n border-bottom-left-radius: 0;\n -moz-border-radius-topleft: 0;\n border-top-left-radius: 0;\n border-top: 0;\n border-right: 0;\n border-bottom: 0;\n display: block;\n height: auto;\n margin: 0;\n padding: 4px 0;\n position: absolute;\n right: 1px;\n top: 1px;\n bottom: 1px;\n width: 23px;\n }\n \n .drop-menu-disabled {\n background: linear-gradient(to bottom, #e0dede 0, #c7c6c6 100%);\n border-color: #ccc;\n border-radius: 3px;\n border-style: solid;\n border-width: 1px;\n color: #333;\n cursor: pointer;\n display: inline-block;\n font-size: 14px;\n font-family: inherit;\n font-variant: normal;\n line-height: 20px;\n margin: 0 10px 0 0;\n padding: 4px 10px;\n text-decoration: none;\n text-shadow: 0 1px 0 white;\n -moz-box-sizing: border-box;\n -webkit-box-sizing: border-box;\n -ms-box-sizing: border-box;\n box-sizing: border-box;\n -moz-border-radius-bottomleft: 0;\n border-bottom-left-radius: 0;\n -moz-border-radius-topleft: 0;\n border-top-left-radius: 0;\n border-top: 0;\n border-right: 0;\n border-bottom: 0;\n display: block;\n height: auto;\n margin: 0;\n padding: 4px 0;\n position: absolute;\n right: 1px;\n top: 1px;\n bottom: 1px;\n width: 23px;\n }\n \n .drop-menu-disabled .fa-spinner {\n margin: 4px 0 0 2px;\n }\n \n .drop-menu .fa-times {\n padding: 4px 0 0 6px;\n }\n \n .caret-down-selector {\n padding-left: 7px;\n padding-top: 5px;\n }\n \n .results-container {\n max-width: 100%;\n width: 100%;\n border: 1px solid lightgrey;\n background-color: white;\n border-radius: 3px;\n position: absolute;\n max-height: 300px;\n overflow-y: auto;\n z-index: 99999;\n top: 36px;\n }\n \n .results-container p {\n padding: 5px 10px;\n margin: 0;\n }\n \n .results-container p.result-item:hover {\n cursor: pointer;\n background-color: #eee;\n }\n \n .selected-item {\n position: absolute;\n top: 7px;\n left: 12px;\n max-width: calc(100% - 47px);\n width: 100%;\n }\n \n .selected-item p {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 0;\n }\n \n .selected-items {\n position: absolute;\n top: 5px;\n left: 27px;\n border: solid 1px #cccccc;\n border-radius: 3px;\n background-color: #fafafa;\n padding: 1px 5px;\n max-width: calc(100% - 47px);\n }\n \n .selected-items p {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n margin: 0;\n margin-right: 15px;\n }\n \n .selected-items>i.fa-times {\n position: absolute;\n top: 4px;\n right: 4px;\n }\n \n .selected-items>i.fa-times:hover {\n cursor: pointer;\n }\n \n .conditional-message {\n font-size: 0.85em;\n margin-top: 5px;\n color: #999999;\n }\n \n .alert-danger {\n padding: 2px 10px;\n margin-top: 5px;\n margin-bottom: 0px;\n }\n "]
},] },
];
/** @nocollapse */
DropdownSearchSelectorComponent.ctorParameters = function () { return []; };
DropdownSearchSelectorComponent.propDecorators = {
'displayProperty': [{ type: Input },],
'secondaryDisplayProperty': [{ type: Input },],
'filterProperty': [{ type: Input },],
'secondaryFilterProperty': [{ type: Input },],
'resultSet': [{ type: Input },],
'placeholder': [{ type: Input },],
'disabled': [{ type: Input },],
'conditionalMessage': [{ type: Input },],
'noResultsMessage': [{ type: Input },],
'validationMessage': [{ type: Input },],
'loading': [{ type: Input },],
'selectedItem': [{ type: Input },],
'maxWidth': [{ type: Input },],
'itemSelected': [{ type: Output },],
'itemDeselected': [{ type: Output },],
'textarea': [{ type: ViewChild, args: ['textarea',] },],
};
return DropdownSearchSelectorComponent;
}());
export { DropdownSearchSelectorComponent };
//# sourceMappingURL=ngx-dropdown-search.component.js.map