cubex-multiselect-dropdown
Version:
701 lines (690 loc) • 44.8 kB
JavaScript
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { Component, Input, Output, EventEmitter, HostListener, ElementRef, Pipe, NgModule, Injectable, defineInjectable } from '@angular/core';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
var MultiselectDropdownComponent = /** @class */ (function () {
function MultiselectDropdownComponent(eRef) {
this.eRef = eRef;
this.filterText = '';
this.selectionLabel = 'Select';
this.optionList = [];
this.open = false;
this.selectedOptions = [];
this.displayNameKey = '';
this.toggleSelectionKey = '';
this.selectionTextWidth = 11;
this.componentWidth = 250;
this.componentHeight = 400;
this.selectedOptionsSet = [];
this.selectionChange = new EventEmitter();
this.selectedAll = false;
this.isSelectedOptionsArayString = false;
this.isoptionListArayString = false;
this.tooltipBoxWidth = 150;
this.searchError = false;
this.listOptionColorKey = '';
}
/**
* @return {?}
*/
MultiselectDropdownComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (!this.selectedOptions) {
this.selectedOptions = [];
}
this.currentStyles = {
width: this.componentWidth < 250 ? '250px' : (this.componentWidth + 'px'),
"max-height": this.componentHeight + 'px',
};
this.noOption = {
"padding-left": (this.componentWidth / 2) - 75 + 'px',
"color": "gainsboro"
};
this.tooltipTextWidth = {
width: this.tooltipBoxWidth <= 150 ? '150px' : (this.tooltipBoxWidth + 'px'),
};
this.tooltipTopUnshift = {
top: this.selectionLabel !== '' ? '25px' : '7px',
};
this.errorAlert = {
border: this.searchError == true ? '1px solid red' : '1px solid #dfdfdf'
};
};
/**
* @param {?} changes
* @return {?}
*/
MultiselectDropdownComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
var _this = this;
this.errorAlert = {
border: this.searchError == true ? '1px solid red' : '1px solid #dfdfdf'
};
for (var propName in changes) {
if (propName === 'selectionSet') {
// if((changes[propName].previousValue === undefined || changes[propName].firstChange === true) && this.toggleSelectionKey !=='build'){
// return;
// }
this.isoptionListArayString = typeof this.optionList[0] === 'string';
this.selectedOptions = changes[propName].currentValue;
//console.log("Is this string -->", this.isoptionListArayString, this.selectedOptions);
if (this.isoptionListArayString) {
this.selectedOptionsSet = [];
this.optionList.filter(function (item) {
/** @type {?} */
var itemKey = _this.selectedOptions.indexOf(/** @type {?} */ (item));
if (itemKey > -1) {
_this.selectedOptionsSet[itemKey] = item;
return true;
}
else {
return false;
}
});
this.filterText = this.selectedOptions.length > 0 && this.open === false ? (this.selectedOptions[0].length
< (this.selectionTextWidth + 1) ? this.selectedOptions[0] : this.selectedOptions[0].substring(0, this.selectionTextWidth) +
'..') : '';
}
else {
this.selectedOptionsSet = [];
this.optionList.filter(function (item) {
/** @type {?} */
var index = _this.selectedOptions.findIndex(function (x) { return x[_this.displayNameKey] === (/** @type {?} */ (item))[_this.toggleSelectionKey]; });
//console.log("selectedOptions --> ", this.selectedOptions, index,(<any>item)[this.toggleSelectionKey])
if (index > -1) {
_this.selectedOptionsSet[index] = item;
return true;
}
else {
return false;
}
});
console.log("selectedOptionsSet -->", this.selectedOptionsSet);
this.filterText = this.selectedOptions.length > 0 && this.open === false ? (this.selectedOptions[0][this.toggleSelectionKey].length
< (this.selectionTextWidth + 1) ? this.selectedOptions[0][this.toggleSelectionKey] : this.selectedOptions[0][this.toggleSelectionKey].substring(0, this.selectionTextWidth) +
'..') : '';
}
this.selectedAll = this.optionList.length === this.selectedOptionsSet.length ? true : false;
}
}
};
/**
* @param {?} option
* @return {?}
*/
MultiselectDropdownComponent.prototype.toggleOption = /**
* @param {?} option
* @return {?}
*/
function (option) {
var _this = this;
this.filterText = '';
/** @type {?} */
var index = 0;
if (this.isoptionListArayString) {
index = this.selectedOptions.indexOf(option);
if (index < 0) {
this.selectedOptions.push(option);
this.selectedOptionsSet.push(option);
}
else {
this.selectedOptions.splice(index, 1);
this.selectedOptionsSet.splice(index, 1);
}
}
else {
index = this.selectedOptions.findIndex(function (x) { return x[_this.toggleSelectionKey] === option[_this.toggleSelectionKey]; });
//console.log("selectedOptions --> ", this.selectedOptions, index, option[this.toggleSelectionKey]);
if (index < 0) {
this.selectedOptions.push(option);
this.selectedOptionsSet.push(option);
}
else {
this.selectedOptions.splice(index, 1);
this.selectedOptionsSet.splice(index, 1);
}
}
if (this.optionList.length === this.selectedOptions.length) {
this.selectedAll = true;
}
else {
this.selectedAll = false;
}
// console.log(this.selectedOptions);
// console.log(this.selectedOptionsSet);
//this.selectedOptionsSet = this.getSelectedOptionSet(this.selectedOptionsSet);
// console.log("After Modified -->", this.selectedOptionsSet);
this.selectionChange.emit(this.selectedOptionsSet);
};
// getSelectedOptionSet(selectedOptionsSet) {
// if(this.isSelectedOptionsArayString){
// let selectedOptionListStringArray: any = [];
// this.selectedOptionsSet.forEach(item => {
// selectedOptionListStringArray.push(item[this.displayNameKey]);
// });
// return selectedOptionListStringArray;
// } else {
// return selectedOptionsSet;
// }
// }
/**
* @param {?} event
* @return {?}
*/
MultiselectDropdownComponent.prototype.selectAll = /**
* @param {?} event
* @return {?}
*/
function (event) {
event.stopPropagation();
this.filterText = '';
this.selectedAll = true;
/** @type {?} */
var toggleSelectionKey = this.toggleSelectionKey;
if (this.isoptionListArayString) {
this.selectedOptions = this.optionList.map(function (item) {
return item[toggleSelectionKey];
});
}
else {
this.selectedOptions = this.optionList.map(function (item) {
return item;
});
}
this.selectedOptionsSet = this.optionList;
//this.selectedOptionsSet = this.getSelectedOptionSet(this.selectedOptionsSet);
this.selectionChange.emit(this.selectedOptionsSet);
};
/**
* @param {?} event
* @return {?}
*/
MultiselectDropdownComponent.prototype.reset = /**
* @param {?} event
* @return {?}
*/
function (event) {
event.stopPropagation();
this.selectedAll = false;
this.selectedOptions = [];
this.selectedOptionsSet = [];
this.filterText = '';
this.selectionChange.emit(this.selectedOptionsSet);
};
/**
* @param {?} option
* @return {?}
*/
MultiselectDropdownComponent.prototype.isOptionSelected = /**
* @param {?} option
* @return {?}
*/
function (option) {
var _this = this;
/** @type {?} */
var selectedFlag;
if (this.isoptionListArayString) {
selectedFlag = this.selectedOptions.indexOf(option) > -1;
}
else {
/** @type {?} */
var index = this.selectedOptions.findIndex(function (x) { return x[_this.toggleSelectionKey] === option[_this.toggleSelectionKey]; });
selectedFlag = index > -1;
}
return selectedFlag;
};
/**
* @return {?}
*/
MultiselectDropdownComponent.prototype.closeDropdown = /**
* @return {?}
*/
function () {
this.open = false;
if (this.isoptionListArayString) {
this.filterText = this.selectedOptions[0] ? (this.selectedOptions[0].length
< (this.selectionTextWidth + 1) ? this.selectedOptions[0] : this.selectedOptions[0].substring(0, this.selectionTextWidth) +
'..') : '';
}
else {
this.filterText = this.selectedOptions.length > 0 && this.open === false ? (this.selectedOptions[0][this.toggleSelectionKey].length
< (this.selectionTextWidth + 1) ? this.selectedOptions[0][this.toggleSelectionKey] : this.selectedOptions[0][this.toggleSelectionKey].substring(0, this.selectionTextWidth) +
'..') : '';
}
};
/**
* @return {?}
*/
MultiselectDropdownComponent.prototype.toggleDropdown = /**
* @return {?}
*/
function () {
this.open = !this.open;
if (this.open) {
this.filterText = '';
}
else {
if (this.isoptionListArayString) {
this.filterText = this.selectedOptions[0] ? (this.selectedOptions[0].length
< (this.selectionTextWidth + 1) ? this.selectedOptions[0] : this.selectedOptions[0].substring(0, this.selectionTextWidth) +
'..') : '';
}
else {
this.filterText = this.selectedOptions.length > 0 && this.open === false ? (this.selectedOptions[0][this.toggleSelectionKey].length
< (this.selectionTextWidth + 1) ? this.selectedOptions[0][this.toggleSelectionKey] : this.selectedOptions[0][this.toggleSelectionKey].substring(0, this.selectionTextWidth) +
'..') : '';
}
}
};
/**
* @return {?}
*/
MultiselectDropdownComponent.prototype.openDropdown = /**
* @return {?}
*/
function () {
this.open = true;
this.filterText = '';
};
/**
* @param {?} event
* @return {?}
*/
MultiselectDropdownComponent.prototype.clickout = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (!this.eRef.nativeElement.contains(event.target)) {
this.open = false;
if (this.isoptionListArayString) {
this.filterText = this.selectedOptions[0] ? (this.selectedOptions[0].length
< (this.selectionTextWidth + 1) ? this.selectedOptions[0] : this.selectedOptions[0].substring(0, this.selectionTextWidth) +
'..') : '';
}
else {
this.filterText = this.selectedOptions.length > 0 && this.open === false ? (this.selectedOptions[0][this.toggleSelectionKey].length
< (this.selectionTextWidth + 1) ? this.selectedOptions[0][this.toggleSelectionKey] : this.selectedOptions[0][this.toggleSelectionKey].substring(0, this.selectionTextWidth) +
'..') : '';
}
}
};
MultiselectDropdownComponent.decorators = [
{ type: Component, args: [{
selector: 'cubex-multiselect-dropdown',
template: "<div *ngIf=\"!isoptionListArayString\" style=\"position: relative !important;\">\n <span class=\"tooltip\" *ngIf=\"!open\" [ngStyle]=\"tooltipTopUnshift\">\n <small *ngIf=\"selectedOptions.length>1\">+{{selectedOptions.length-1}} selected</small>\n <span class=\"tooltiptextparent\">\n <span class=\"tooltiptext\" [ngStyle]=\"tooltipTextWidth\">\n <ng-template ngFor let-selectedOption let-index=\"index\" [ngForOf]=\"selectedOptions.slice(1)\">\n <span class=\"bullet\"></span>\n <span>{{selectedOption[displayNameKey]}}</span>\n <br>\n </ng-template>\n </span>\n </span>\n </span>\n\n <div class=\"form-group proto-select\" (clickOutside)=\"closeDropdown()\">\n <div class=\"form-group__text\">\n <input class=\"text-small text-vibrant\" type=\"text\" (click)=\"openDropdown()\" [(ngModel)]=\"filterText\"\n placeholder=\"{{selectedOptions.length <1?selectionPlaceholder: ''}}\" [ngStyle]=\"errorAlert\" />\n <label>{{selectionLabel}}</label>\n <i class=\"proto-select-chevron\" [ngClass]=\"[ open ? 'icon-chevron-up' : 'icon-chevron-down' ]\"\n (click)=\"toggleDropdown()\"></i>\n </div>\n\n <div class=\"panel panel--raised proto-select-dropdown\" *ngIf=\"open\">\n <div class=\"text-small text-muted text-noselect qtr-padding\" *ngIf=\"optionList.length == 0\">\n No option available\n </div>\n <!-- Select All & Clear -->\n <div class=\"flex flex-center-vertical dropdown-header clearfix\" *ngIf=\"optionList.length > 0\">\n <div class=\"form-group\">\n <label class=\"checkbox\">\n <input type=\"checkbox\" *ngIf=\"!selectedAll\" (click)=\"selectAll($event)\">\n <input type=\"checkbox\" *ngIf=\"selectedAll\" checked (click)=\"reset($event)\">\n <span class=\"checkbox__input\"></span>\n <span class=\"checkbox__label text-small text-blue\"> All</span>\n </label>\n </div>\n <span class=\"flex-fluid\"></span>\n <span class=\"text-small text-warning qtr-padding half-padding-right clickable pull-right\"\n (click)=\"reset($event)\">Clear</span>\n </div>\n\n <!-- <div class=\"panel no-padding\" *ngFor=\"let item of optionList | filterObjectsByKey : displayNameKey : filterText | arraySort: displayNameKey\"> -->\n <div class=\"panel no-padding\" *ngFor=\"let item of optionList | filterObjectsByKey : displayNameKey : filterText\">\n\n <div class=\"form-group\">\n <label class=\"checkbox\">\n <input type=\"checkbox\" (click)=\"toggleOption(item)\" name=item[displayNameKey]\n value=item[displayNameKey] [checked]=\"isOptionSelected(item)\">\n <span class=\"checkbox__input\"></span>\n <span class=\"checkbox__label text-small\"\n [ngStyle]=\"{'color': ((item[listOptionColorKey] !== '')?item[listOptionColorKey]: '#58585b')}\">\n {{item[displayNameKey]|uppercase }}</span>\n </label>\n </div>\n </div>\n\n </div>\n </div>\n</div>\n\n<div *ngIf=\"isoptionListArayString\" style=\"position: relative !important;\">\n <span class=\"tooltip\" *ngIf=\"!open\" [ngStyle]=\"tooltipTopUnshift\">\n <small *ngIf=\"selectedOptions.length>1\">+{{selectedOptions.length-1}} selected</small>\n <span class=\"tooltiptextparent\">\n <span class=\"tooltiptext\" [ngStyle]=\"tooltipTextWidth\">\n <ng-template ngFor let-selectedOption let-index=\"index\" [ngForOf]=\"selectedOptions.slice(1)\">\n <span class=\"bullet\"></span>\n <span>{{selectedOption}}</span>\n <br>\n </ng-template>\n </span>\n </span>\n </span>\n\n <div class=\"form-group proto-select\" (clickOutside)=\"closeDropdown()\">\n <div class=\"form-group__text\">\n <input class=\"text-small text-vibrant\" type=\"text\" (click)=\"openDropdown()\" [(ngModel)]=\"filterText\"\n placeholder=\"{{selectedOptions.length <1?selectionPlaceholder: ''}}\" [ngStyle]=\"errorAlert\" />\n <label>{{selectionLabel}}</label>\n <i class=\"proto-select-chevron\" [ngClass]=\"[ open ? 'icon-chevron-up' : 'icon-chevron-down' ]\"\n (click)=\"toggleDropdown()\"></i>\n </div>\n\n <div class=\"panel panel--raised proto-select-dropdown\" *ngIf=\"open\">\n <div class=\"text-small text-muted text-noselect qtr-padding\" *ngIf=\"optionList.length == 0\">\n No option available\n </div>\n <!-- Select All & Clear -->\n <div class=\"flex flex-center-vertical dropdown-header clearfix\" *ngIf=\"optionList.length > 0\">\n <div class=\"form-group\">\n <label class=\"checkbox\">\n <input type=\"checkbox\" *ngIf=\"!selectedAll\" (click)=\"selectAll($event)\">\n <input type=\"checkbox\" *ngIf=\"selectedAll\" checked (click)=\"reset($event)\">\n <span class=\"checkbox__input\"></span>\n <span class=\"checkbox__label text-small text-blue\"> All</span>\n </label>\n </div>\n <span class=\"flex-fluid\"></span>\n <span class=\"text-small text-warning qtr-padding half-padding-right clickable pull-right\"\n (click)=\"reset($event)\">Clear</span>\n </div>\n\n <div class=\"panel no-padding\" *ngFor=\"let item of optionList | filterStrings : filterText\">\n <div class=\"form-group\">\n <label class=\"checkbox\">\n <input type=\"checkbox\" (click)=\"toggleOption(item)\" name=item value=item\n [checked]=\"isOptionSelected(item)\">\n <span class=\"checkbox__input\"></span>\n <span class=\"checkbox__label text-small\" [ngStyle]=\"{'color': ((item !== '')?item: '#58585b')}\">\n {{item|uppercase }}</span>\n </label>\n </div>\n </div>\n\n </div>\n </div>\n</div>",
styles: [".overlayAnchor{display:inline-block;min-width:250px}.link{text-decoration:underline;cursor:pointer;color:#007493;padding-left:8px}.noOption{padding-top:5px}.tooltip{position:absolute;right:40px;top:25px;z-index:1;display:inline-block}.tooltip .tooltiptext{visibility:hidden;min-width:120px;background-color:#555;color:#fff;text-align:center;padding:5px 0;border-radius:6px;max-height:460px;overflow:scroll;position:absolute;z-index:1;top:125%;left:50%;margin-left:-60px;opacity:0;transition:opacity .3s}.tooltip .tooltiptextparent{visibility:hidden;opacity:0;transition:opacity .3s}.tooltip .tooltiptextparent::after{content:\"\";position:absolute;top:15px;left:15px;margin-left:-5px;border-width:5px;border-style:solid;border-color:transparent transparent #555}.tooltip:hover .tooltiptext,.tooltip:hover .tooltiptextparent{visibility:visible;opacity:1}.bullet{height:5px;width:5px;background-color:#fff;border-radius:50%;display:inline-block;margin-bottom:3px}.inputBox{border-bottom:1px solid #ddd;border-top:none;border-left:none;border-right:none;width:-webkit-fill-available;width:-moz-available;width:stretch}.dropdown-expanded{border:1px solid #d3d3d3;padding-left:9px;min-width:171px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;overflow:scroll;float:left}.customInput{outline:0;padding-left:6px;padding-top:3px}.customInput:hover{outline:#ccc solid 1px}.inlineBox{display:block;cursor:pointer;position:relative;padding-left:28px;padding-bottom:6px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:5px 0;border-bottom:1px solid #ccc;word-wrap:break-word}.inlineBox input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:0;left:0;height:22px;width:22px;background-color:#eee;border-radius:5px}.checkmarkText{position:relative;top:3px}.inlineBox:hover input~.checkmark{background-color:#ccc}.inlineBox input:checked~.checkmark{background-color:#ddd}.checkmark:after{content:\"\";position:absolute;display:none}.inlineBox input:checked~.checkmark:after{display:block}.inlineBox .checkmark:after{left:4px;top:4px;width:14px;height:14px;background:#00beed;border-radius:5px}::-webkit-scrollbar{width:6px}::-webkit-scrollbar:horizontal{height:6px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#666}.proto-select .proto-select-backdrop{position:fixed;top:0;bottom:0;right:0;left:0;z-index:99}.proto-select .proto-select-chevron{position:absolute;bottom:0;right:0;padding:5px 8px;color:gray}.proto-select .proto-select-dropdown{position:absolute;z-index:999;border:1px solid #f1f1f1;overflow-y:auto;padding:0;top:100%;left:0;right:0;max-height:215px}.proto-select .proto-select-dropdown .dropdown-header{position:-webkit-sticky;position:sticky;top:0;z-index:99;width:100%;background-color:#fff;border-bottom:1px solid #f1f1f1}.proto-select .proto-select-dropdown .form-group{padding:6px 10px;margin:0}.proto-select .proto-select-dropdown .form-group .checkbox__label{padding-top:2px}.proto-select .proto-select-dropdown .form-group.selected,.proto-select .proto-select-dropdown .form-group.selected:hover{background-color:#00bceb!important;color:#fff}.proto-select .proto-select-dropdown .form-group.selected .checkbox__label,.proto-select .proto-select-dropdown .form-group.selected:hover .checkbox__label{color:#fff!important}.proto-select .proto-select-dropdown .form-group:hover{background-color:#f1f1f1}"]
}] }
];
/** @nocollapse */
MultiselectDropdownComponent.ctorParameters = function () { return [
{ type: ElementRef }
]; };
MultiselectDropdownComponent.propDecorators = {
selectionLabel: [{ type: Input, args: ['label',] }],
optionList: [{ type: Input, args: ['data',] }],
selectionSet: [{ type: Input, args: ['checkedOptions',] }],
open: [{ type: Input, args: ['isOpen',] }],
displayNameKey: [{ type: Input, args: ['displayKey',] }],
toggleSelectionKey: [{ type: Input, args: ['toggleKey',] }],
selectionPlaceholder: [{ type: Input, args: ['placeholder',] }],
selectionTextWidth: [{ type: Input, args: ['selectionWidth',] }],
componentWidth: [{ type: Input, args: ['width',] }],
componentHeight: [{ type: Input, args: ['height',] }],
selectionChange: [{ type: Output, args: ['onChange',] }],
tooltipBoxWidth: [{ type: Input, args: ['tooltipWidth',] }],
searchError: [{ type: Input, args: ['error',] }],
listOptionColorKey: [{ type: Input, args: ['optionColorKey',] }],
clickout: [{ type: HostListener, args: ['document:click', ['$event'],] }]
};
return MultiselectDropdownComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
var SingleselectDropdownComponent = /** @class */ (function () {
// @Input('placeholderFilter') placeholderFilterText: string = 'Filter options';
function SingleselectDropdownComponent(eRef) {
this.eRef = eRef;
this.selectionLabel = 'Select';
this.optionList = [];
this.open = false;
this.displayNameKey = '';
this.toggleSelectionKey = '';
this.selectionTextWidth = 11;
this.selectionChange = new EventEmitter();
this.onSearchChange = new EventEmitter();
this.isoptionListArayString = false;
}
/**
* @return {?}
*/
SingleselectDropdownComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.currentStyles = {
"width": '100%',
// "width": this.componentWidth+'px',
// "height" : this.componentHeight+'px'
"height": 'auto',
"max-height": this.componentHeight + 'px'
};
this.noOption = {
"padding-left": (this.componentWidth / 2) - 75 + 'px',
"color": "gainsboro"
};
this.isoptionListArayString = typeof this.optionList[0] === 'string';
console.log(this.isoptionListArayString, this.optionList);
if (!this.selectedOptions) {
this.selectedOptions = this.isoptionListArayString ? "" : [];
}
if (this.isoptionListArayString) {
this.filterText = this.selectedOptions;
}
};
/**
* @param {?} changes
* @return {?}
*/
SingleselectDropdownComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
for (var propName in changes) {
if (propName === 'selectedOptions') {
if (changes[propName].currentValue === undefined) {
return;
}
else if (Object.getOwnPropertyNames(this.selectedOptions).length === 0) {
this.filterText = '';
continue;
}
if (this.isoptionListArayString) {
if (typeof this.selectedOptions != 'undefined') {
this.filterText = (/** @type {?} */ (this.selectedOptions)).length < (this.selectionTextWidth + 1) ? (/** @type {?} */ (this.selectedOptions)) : (/** @type {?} */ (this.selectedOptions)).substring(0, this.selectionTextWidth) + '..';
}
}
else {
if (typeof this.selectedOptions[this.displayNameKey] != 'undefined') {
this.filterText = (/** @type {?} */ (this.selectedOptions))[this.displayNameKey].length < (this.selectionTextWidth + 1) ? (/** @type {?} */ (this.selectedOptions))[this.displayNameKey] : (/** @type {?} */ (this.selectedOptions))[this.displayNameKey].substring(0, this.selectionTextWidth) + '..';
}
}
}
if (propName === 'optionList') {
//console.log("optionList-->", changes[propName].currentValue);
this.optionList = changes[propName].currentValue;
}
}
};
/**
* @param {?} option
* @return {?}
*/
SingleselectDropdownComponent.prototype.selectOption = /**
* @param {?} option
* @return {?}
*/
function (option) {
if (this.isoptionListArayString) {
this.selectedOptions = option;
this.selectionChange.emit(this.selectedOptions);
this.closeDropdown();
this.filterText = (/** @type {?} */ (this.selectedOptions)).length < (this.selectionTextWidth + 1) ? (/** @type {?} */ (this.selectedOptions)) : (/** @type {?} */ (this.selectedOptions)).substring(0, this.selectionTextWidth) + '..';
}
else {
this.selectedOptions = option;
this.selectionChange.emit(this.selectedOptions);
this.closeDropdown();
this.filterText = (/** @type {?} */ (this.selectedOptions))[this.displayNameKey].length < (this.selectionTextWidth + 1) ? (/** @type {?} */ (this.selectedOptions))[this.displayNameKey] : (/** @type {?} */ (this.selectedOptions))[this.displayNameKey].substring(0, this.selectionTextWidth) + '..';
}
};
/**
* @return {?}
*/
SingleselectDropdownComponent.prototype.closeDropdown = /**
* @return {?}
*/
function () {
this.open = false;
if (this.isoptionListArayString) {
this.filterText = this.selectedOptions;
}
else {
this.filterText = this.selectedOptions[this.displayNameKey];
}
};
/**
* @return {?}
*/
SingleselectDropdownComponent.prototype.toggleDropdown = /**
* @return {?}
*/
function () {
this.open = !this.open;
if (open) {
this.filterText = '';
}
};
/**
* @param {?} event
* @return {?}
*/
SingleselectDropdownComponent.prototype.clickout = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (!this.eRef.nativeElement.contains(event.target)) {
this.open = false;
if (this.isoptionListArayString) {
this.filterText = this.selectedOptions;
}
else {
this.filterText = this.selectedOptions[this.displayNameKey];
}
}
};
SingleselectDropdownComponent.decorators = [
{ type: Component, args: [{
selector: 'cubex-singleselect-dropdown',
template: "<div *ngIf=\"!isoptionListArayString\" style=\"position: relative !important;\">\n <div class=\"form-group proto-select\" (clickOutside)=\"closeDropdown()\">\n <div class=\"form-group__text\">\n <input class=\"text-small text-vibrant Search\" type = 'search' (click)=\"toggleDropdown()\" [(ngModel)]=\"filterText\" placeholder=\"{{selectionPlaceholder}}\" autocomplete=\"nope\" (input)=\"onSearchChange.emit($event.target.value)\"/>\n <label>{{selectionLabel}}</label>\n <i class=\"proto-select-chevron\" (click)=\"toggleDropdown()\"[ngClass]=\"[ open ? 'icon-chevron-up' : 'icon-chevron-down' ]\"></i>\n </div>\n <div class=\"proto-select-backdrop\" (click)=\"toggleDropdown()\" *ngIf=\"open\"></div>\n\n <div class=\"panel panel--raised proto-select-dropdown\" *ngIf=\"open\" [ngClass]=\"{'topClass': selectionLabel == '' || selectionLabel == null || selectionLabel == undefined }\">\n <div class=\"text-small text-muted text-noselect qtr-padding\" *ngIf=\"optionList.length == 0\">\n No option available\n </div>\n\n <div *ngIf=\"open\" class=\"singleselect_hover wordbreak\" [ngStyle]=\"currentStyles\" >\n <!-- <div class=\"panel panel--compressed\" *ngFor=\"let item of optionList | filterObjectsByKey : displayNameKey : filterText | arraySort: displayNameKey\"> -->\n <div class=\"panel panel--compressed\" *ngFor=\"let item of optionList | filterObjectsByKey : displayNameKey : filterText\"> \n <div class=\"hover-cursor\" (click)=\"selectOption(item)\" [ngClass]=\"{'bgColor': selectedOptions[displayNameKey] == item[displayNameKey] }\">\n <div>{{item[displayNameKey] }}</div>\n <div > <i class=\"icon-check icon-right\" *ngIf=\"selectedOptions[displayNameKey] == item[displayNameKey]\"></i></div> \n </div>\n \n <!-- <i class=\"icon-check \" [ngClass]=\"{'bgColor': selectedOptions.name == item.name }\" ></i> -->\n \n </div>\n </div>\n\n </div>\n </div>\n</div>\n\n<div *ngIf=\"isoptionListArayString\" style=\"position: relative !important;\">\n <div class=\"form-group proto-select\" (clickOutside)=\"closeDropdown()\">\n <div class=\"form-group__text\">\n <input class=\"text-small text-vibrant Search\" type = 'search' (click)=\"toggleDropdown()\" [(ngModel)]=\"filterText\" placeholder=\"{{selectionPlaceholder}}\" autocomplete=\"nope\" (input)=\"onSearchChange.emit($event.target.value)\"/>\n <label>{{selectionLabel}}</label>\n <i class=\"proto-select-chevron\" (click)=\"toggleDropdown()\"[ngClass]=\"[ open ? 'icon-chevron-up' : 'icon-chevron-down' ]\"></i>\n </div>\n <div class=\"proto-select-backdrop\" (click)=\"toggleDropdown()\" *ngIf=\"open\"></div>\n\n <div class=\"panel panel--raised proto-select-dropdown bdr\" *ngIf=\"open\" [ngClass]=\"{'topClass': selectionLabel == '' || selectionLabel == null || selectionLabel == undefined }\" [ngStyle]=\"currentStyles\">\n <div class=\"text-small text-muted text-noselect qtr-padding\" *ngIf=\"optionList.length == 0\">\n No option available\n </div>\n\n <div *ngIf=\"open\" class=\"singleselect_hover wordbreak\" [ngStyle]=\"currentStyles\" >\n <div class=\"panel panel--compressed\" *ngFor=\"let item of optionList | filterStrings : filterText\"> \n <div class=\"hover-cursor\" (click)=\"selectOption(item)\" [ngClass]=\"{'bgColor': selectedOptions == item }\">\n <div>{{item }}</div>\n <div > <i class=\"icon-check icon-right\" *ngIf=\"selectedOptions == item\"></i></div> \n </div>\n \n <!-- <i class=\"icon-check \" [ngClass]=\"{'bgColor': selectedOptions.name == item.name }\" ></i> -->\n \n </div>\n </div>\n\n </div>\n </div>\n</div>",
styles: [".overlayAnchor{display:inline-block;min-width:250px}.link{text-decoration:underline;cursor:pointer;color:#007493;padding-left:8px}.noOption{padding-top:5px}.tooltip{position:relative;display:inline-block;border-bottom:1px dotted #000}.tooltip .tooltiptext{visibility:hidden;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;min-width:120px;background-color:#555;color:#fff;text-align:center;padding:5px 0;border-radius:6px;position:absolute;z-index:1;top:125%;left:50%;margin-left:-60px;opacity:0;transition:opacity .3s}.tooltip .tooltiptext::after{content:\"\";position:absolute;top:-10px;left:45px;margin-left:-5px;border-width:5px;border-style:solid;border-color:transparent transparent #555}.tooltip:hover .tooltiptext{visibility:visible;opacity:1}.bullet{height:5px;width:5px;background-color:#fff;border-radius:50%;display:inline-block;margin-bottom:3px}.inputBox{border-bottom:1px solid #ddd;border-top:none;border-left:none;border-right:none;width:-webkit-fill-available;width:-moz-available;width:stretch}.dropdown-expanded{border:1px solid #d3d3d3;padding-left:9px;min-width:171px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;overflow:scroll;float:left}.customInput{outline:0;padding-left:6px;padding-top:3px}.customInput:hover{outline:#ccc solid 1px}.inlineBox{display:block;cursor:pointer;position:relative;padding-left:28px;padding-bottom:6px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:5px 0;border-bottom:1px solid #ccc;word-wrap:break-word}.inlineBox input[type=checkbox]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:0;left:0;height:22px;width:22px;background-color:#eee;border-radius:5px}.checkmarkText{position:relative;top:3px}.inlineBox:hover input~.checkmark{background-color:#ccc}.inlineBox input:checked~.checkmark{background-color:#ddd}.checkmark:after{content:\"\";position:absolute;display:none}.inlineBox input:checked~.checkmark:after{display:block}.inlineBox .checkmark:after{left:4px;top:4px;width:14px;height:14px;background:#00beed;border-radius:5px}.proto-select .proto-select-backdrop{position:fixed;top:0;bottom:0;right:0;left:0;z-index:99}.proto-select .proto-select-chevron{position:absolute;bottom:0;right:0;padding:5px 8px;color:gray}.proto-select .proto-select-dropdown{position:absolute;z-index:999;border:1px solid #f1f1f1;overflow-y:auto;padding:0;top:100%;left:0;right:0}.proto-select .proto-select-dropdown .dropdown-header{position:-webkit-sticky;position:sticky;top:0;z-index:99;width:100%;background-color:#fff;border-bottom:1px solid #f1f1f1}.proto-select .proto-select-dropdown .form-group{padding:6px 10px;margin:0}.proto-select .proto-select-dropdown .form-group .checkbox__label{padding-top:2px}.proto-select .proto-select-dropdown .form-group.selected,.proto-select .proto-select-dropdown .form-group.selected:hover{background-color:#00bceb!important;color:#fff}.proto-select .proto-select-dropdown .form-group.selected .checkbox__label,.proto-select .proto-select-dropdown .form-group.selected:hover .checkbox__label{color:#fff!important}.proto-select .proto-select-dropdown .form-group:hover{background-color:#f1f1f1}.singleselect_hover>div>span{display:inline-block!important;width:100%}.singleselect_hover>.panel:hover{background-color:#f1f1f1}.wordbreak{word-break:break-word}.hover-cursor{cursor:pointer;position:relative;padding:5px}.bgColor{background:#00bceb;color:#fff}.icon-right{position:absolute;top:5px;right:5px}.panel--compressed{padding:0!important}.topClass{position:absolute;z-index:999;border:1px solid #f1f1f1;overflow-y:auto;padding:0;top:30px!important;left:0;right:0}.Search::-webkit-search-cancel-button{position:relative;right:20px}"]
}] }
];
/** @nocollapse */
SingleselectDropdownComponent.ctorParameters = function () { return [
{ type: ElementRef }
]; };
SingleselectDropdownComponent.propDecorators = {
selectionLabel: [{ type: Input, args: ['label',] }],
optionList: [{ type: Input, args: ['data',] }],
open: [{ type: Input, args: ['isOpen',] }],
selectedOptions: [{ type: Input, args: ['checkedOption',] }],
displayNameKey: [{ type: Input, args: ['displayKey',] }],
toggleSelectionKey: [{ type: Input, args: ['toggleKey',] }],
selectionPlaceholder: [{ type: Input, args: ['placeholder',] }],
selectionTextWidth: [{ type: Input, args: ['selectionWidth',] }],
componentWidth: [{ type: Input, args: ['width',] }],
componentHeight: [{ type: Input, args: ['height',] }],
selectionChange: [{ type: Output, args: ['onChange',] }],
onSearchChange: [{ type: Output }],
clickout: [{ type: HostListener, args: ['document:click', ['$event'],] }]
};
return SingleselectDropdownComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
var FilterStringsPipe = /** @class */ (function () {
function FilterStringsPipe() {
}
/**
* @param {?} items
* @param {?} searchText
* @return {?}
*/
FilterStringsPipe.prototype.transform = /**
* @param {?} items
* @param {?} searchText
* @return {?}
*/
function (items, searchText) {
if (!items)
return [];
if (!searchText)
return items;
searchText = searchText.toLowerCase();
return items.filter(function (it) {
return it.toLowerCase().includes(searchText);
});
};
FilterStringsPipe.decorators = [
{ type: Pipe, args: [{
name: 'filterStrings'
},] }
];
return FilterStringsPipe;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
var FilterObjectsByKeyPipe = /** @class */ (function () {
function FilterObjectsByKeyPipe() {
}
/**
* @param {?} list
* @param {?} keyinObject
* @param {?} filterText
* @return {?}
*/
FilterObjectsByKeyPipe.prototype.transform = /**
* @param {?} list
* @param {?} keyinObject
* @param {?} filterText
* @return {?}
*/
function (list, keyinObject, filterText) {
return list.filter(function (item) {
if (item[keyinObject].toUpperCase().indexOf(filterText.toUpperCase()) > -1) {
return true;
}
else {
return false;
}
});
};
FilterObjectsByKeyPipe.decorators = [
{ type: Pipe, args: [{
name: 'filterObjectsByKey'
},] }
];
return FilterObjectsByKeyPipe;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
var ArraySortPipe = /** @class */ (function () {
function ArraySortPipe() {
}
/**
* @param {?} array
* @param {?} field
* @return {?}
*/
ArraySortPipe.prototype.transform = /**
* @param {?} array
* @param {?} field
* @return {?}
*/
function (array, field) {
array.sort(function (a, b) {
if (a[field].toUpperCase() < b[field].toUpperCase()) {
return -1;
}
else if (a[field].toUpperCase() > b[field].toUpperCase()) {
return 1;
}
else {
return 0;
}
});
return array;
};
ArraySortPipe.decorators = [
{ type: Pipe, args: [{
name: 'arraySort'
},] }
];
return ArraySortPipe;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
var MultiselectDropdownModule = /** @class */ (function () {
function MultiselectDropdownModule() {
}
MultiselectDropdownModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
BrowserAnimationsModule,
FormsModule
],
declarations: [
MultiselectDropdownComponent,
SingleselectDropdownComponent,
ArraySortPipe,
FilterObjectsByKeyPipe,
FilterStringsPipe
],
exports: [
MultiselectDropdownComponent,
SingleselectDropdownComponent,
]
},] }
];
return MultiselectDropdownModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
var MultiselectDropdownService = /** @class */ (function () {
function MultiselectDropdownService() {
}
MultiselectDropdownService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
MultiselectDropdownService.ctorParameters = function () { return []; };
/** @nocollapse */ MultiselectDropdownService.ngInjectableDef = defineInjectable({ factory: function MultiselectDropdownService_Factory() { return new MultiselectDropdownService(); }, token: MultiselectDropdownService, providedIn: "root" });
return MultiselectDropdownService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
*/
export { MultiselectDropdownModule, MultiselectDropdownComponent, SingleselectDropdownComponent, MultiselectDropdownService, ArraySortPipe, FilterObjectsByKeyPipe, FilterStringsPipe };
//# sourceMappingURL=cubex-multiselect-dropdown.js.map