ngx-selectbox-may/bundles/ngx-selectbox-may.umd.min.js

Angular selectbox with autocomplete

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@angular/platform-browser"),require("@angular/platform-browser/animations")):"function"==typeof define&&define.amd?define("ngx-selectbox-may",["exports","@angular/core","@angular/forms","@angular/platform-browser","@angular/platform-browser/animations"],t):t(e["ngx-selectbox-may"]={},e.ng.core,e.ng.forms,e.ng.platformBrowser,e.ng.platformBrowser.animations)}(this,function(e,o,t,i,n){"use strict";var s=function(){function e(e,t){this.isSelected=e,this.data=t}return e.prototype.setKey=function(e){this.value=e},e.prototype.setLabel=function(e){this.label=e},e}(),l=function(){function e(){this._labelField="",this._placeholderText="",this._emptyText="",this._showEmptyResultsLabel=!0,this._cssClass=""}return Object.defineProperty(e.prototype,"labelField",{get:function(){return this._labelField},set:function(e){this._labelField=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"valueField",{get:function(){return this._valueField},set:function(e){this._valueField=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"placeholderText",{get:function(){return this._placeholderText},set:function(e){this._placeholderText=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"emptyText",{get:function(){return this._emptyText},set:function(e){this._emptyText=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"showEmptyResultsLabel",{get:function(){return this._showEmptyResultsLabel},set:function(e){this._showEmptyResultsLabel=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"cssClass",{get:function(){return this._cssClass},set:function(e){this._cssClass=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"isMultiSelect",{get:function(){return this._isMultiSelect},set:function(e){this._isMultiSelect=e},enumerable:!0,configurable:!0}),e.ROW_ACTIVE_CLASS="active",e.EMPTY_TEXT="No results found",e.MULTI_SELECTED_LABEL="#COUNT #ITEMS Selected",e.LOADING_TEXT="Please wait...",e}(),r=function(){function e(){}return e.prototype.createDropdownRows=function(e,o){var i=[];return e.forEach(function(e){var t=new s(!1,e);t.setKey(o.valueField?e[o.valueField]:e),t.setLabel(o.labelField?e[o.labelField]:e),i.push(t)}),i},e.prototype.reconfigureDropdownRowLabelsAndValues=function(e,t){e.forEach(function(e){e.setKey(t.valueField?e.data[t.valueField]:e.data),e.setLabel(t.labelField?e.data[t.labelField]:e.data)})},e.prototype.createDropdownLabel=function(e,t){return e.isMultiSelect?1<t.length?l.MULTI_SELECTED_LABEL.replace("#COUNT",t.length.toString()).replace("#ITEMS","Items"):1==t.length?l.MULTI_SELECTED_LABEL.replace("#COUNT",t.length.toString()).replace("#ITEMS","Item"):l.MULTI_SELECTED_LABEL.replace("#COUNT",t.length.toString()).replace("#ITEMS","Items"):0<t.length?t[0].label:""},e.prototype.setSelectedItems=function(e,t,o,i){return e.isMultiSelect||i.isSelected||(this.unselectAllSelectedRows(o),i.isSelected=!0,(t=[]).push(i)),t},e.prototype.unselectAllSelectedRows=function(e){e.forEach(function(e){e.isSelected=!1})},e.prototype.selectItemByValue=function(e,t){var o=e.filter(function(e){return e.value===t});return 0<o.length&&(o[0].isSelected=!0),o},e.prototype.selectItemsByValue=function(o,e){var i=[];return e.forEach(function(t){var e=o.filter(function(e){return e.value===t});0<e.length&&(e[0].isSelected=!0),i.push(e[0])}),i},e.decorators=[{type:o.Injectable,args:[{providedIn:"root"}]}],e.ctorParameters=function(){return[]},e.ngInjectableDef=o.defineInjectable({factory:function(){return new e},token:e,providedIn:"root"}),e}(),a=function(){function e(e,t){this._selectboxref=e,this.selectboxService=t,this.dropdownRows=[],this.configs=new l,this.selectedRows=[],this.show_items=!1,this.searchText="",this.isEnable=!0,this.propagateChange=function(e){},this.propagateOnTouch=function(e){},this.onKeyUp=new o.EventEmitter,this.onSelect=new o.EventEmitter,this.onBlur=new o.EventEmitter}return Object.defineProperty(e.prototype,"items",{set:function(e){this.createDropdownRows(e)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"cssClass",{set:function(e){this.configs.cssClass=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"valueField",{set:function(e){this.configs.valueField=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"labelField",{set:function(e){this.configs.labelField=e,this.reconfigureLabelsAndValues()},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"placeholder",{set:function(e){this.configs.placeholderText=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"emptyText",{set:function(e){this.configs.emptyText=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"showEmptyResultText",{set:function(e){this.configs.showEmptyResultsLabel=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"isMulti",{set:function(e){this.configs.isMultiSelect=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"isLoading",{set:function(e){this._isLoading=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"loadingText",{set:function(e){this._loadingText=e},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){},e.prototype.createDropdownRows=function(e){this.dropdownRows=this.selectboxService.createDropdownRows(e,this.configs),this.setValuesPassedExternal(this.ngModelValue)},e.prototype.reconfigureLabelsAndValues=function(){this.selectboxService.reconfigureDropdownRowLabelsAndValues(this.dropdownRows,this.configs)},e.prototype.getSelectboxLabel=function(){var e=this.selectboxService.createDropdownLabel(this.configs,this.selectedRows);return e||this.configs.placeholderText},e.prototype.getEmptyTextLabel=function(){return this.configs.emptyText?this.configs.emptyText:l.EMPTY_TEXT},e.prototype.getLoadingText=function(){return this._loadingText?this._loadingText:l.LOADING_TEXT},e.prototype.onClickSelectBox=function(){this.showItemsWindow()},e.prototype.getActiveClass=function(){return l.ROW_ACTIVE_CLASS},e.prototype.showItemsWindow=function(){this.show_items=!0},e.prototype.hideItemsWindow=function(){this.onBlur.emit(this.searchText),this.resetFilters(),this.show_items=!1},e.prototype.onRemoveClick=function(){this.selectboxService.unselectAllSelectedRows(this.dropdownRows),this.selectedRows=[],this.publishValue()},e.prototype.onSearchKeydown=function(e){"Escape"==e.key&&this.hideItemsWindow(),38!=e.keyCode&&40!=e.keyCode||e.preventDefault()},e.prototype.onSearchKeyup=function(e){38==e.keyCode||40==e.keyCode||"Escape"==e.key?e.preventDefault():this.onKeyUp.emit(this.searchText)},e.prototype.resetFilters=function(){this.searchText=""},e.prototype.onClickItem=function(e,t){this.configs.isMultiSelect||(this.selectedRows=this.selectboxService.setSelectedItems(this.configs,this.selectedRows,this.dropdownRows,e),this.onSelect.emit(e.data),this.hideItemsWindow()),this.publishValue()},e.prototype.publishValue=function(){var e=this.selectedRows.map(function(e){return e.value});this.configs.isMultiSelect?this.propagateChange(e):this.propagateChange(0<e.length?e[0]:"")},e.prototype.setValuesPassedExternal=function(e){this.configs.isMultiSelect?this.selectedRows=this.selectboxService.selectItemsByValue(this.dropdownRows,e):this.selectedRows=this.selectboxService.selectItemByValue(this.dropdownRows,e)},Object.defineProperty(e.prototype,"content",{set:function(e){this.itemWindow=e,this.focusToSearchField(),this.scrollToSelectedItem()},enumerable:!0,configurable:!0}),e.prototype.positionWindow=function(){if(this.searchField){var e=this._selectboxref.nativeElement,t=e.getBoundingClientRect();console.log(t),this.itemWindow.nativeElement.setAttribute("style","width: "+(e.firstChild.offsetWidth+3)+"px; top: "+(t.top-5)+"px; margin-left: -12px;")}},e.prototype.focusToSearchField=function(){this.searchField&&this.searchField.nativeElement.focus()},e.prototype.scrollToSelectedItem=function(){var o=this;this.listItems.forEach(function(e){if(e.nativeElement.classList.contains(l.ROW_ACTIVE_CLASS)){var t=e.nativeElement;o.itemWindow.nativeElement.getElementsByTagName("ul")[0].scrollTop=t.offsetTop-(t.offsetHeight+20)}})},e.prototype.onClickOutside=function(e){!this._selectboxref.nativeElement.contains(event.target)&&this.show_items&&this.hideItemsWindow()},e.prototype.onWindowResize=function(e){},e.prototype.setDisable=function(){this.hideItemsWindow(),this.isEnable=!1},e.prototype.setEnable=function(){this.isEnable=!0},e.prototype.writeValue=function(e){this.ngModelValue=e,this.setValuesPassedExternal(e)},e.prototype.registerOnChange=function(e){this.propagateChange=e},e.prototype.registerOnTouched=function(e){this.propagateOnTouch=e},e.prototype.setDisabledState=function(e){console.log(e,"set disable"),e?this.setDisable():this.setEnable()},e.decorators=[{type:o.Component,args:[{selector:"ngx-selectbox-may",host:{"(document:click)":"onClickOutside($event)","(window:resize)":"onWindowResize($event)"},template:'<div [ngClass]="configs.cssClass" class="__ngx-selectbox-may">\n  <span class="__selected-label">\n    <span>{{getSelectboxLabel()}}</span>\n  </span>\n  <div *ngIf="_isLoading" class="__loading-text">{{getLoadingText()}}</div>\n  <div class="__clickable-area" (click)="onClickSelectBox()"></div>\n  <button *ngIf="selectedRows.length>0 && isEnable" type="button" class="__remove-selected-btn" (click)="onRemoveClick()">\n    <i></i>\n  </button>\n  <div *ngIf="show_items" class="__item-list-browser" #item_window>\n    <div class="__item-search">\n      <input #search_field type="text" max-length="15" (keydown)="onSearchKeydown($event)"\n        (keyup)="onSearchKeyup($event)" placeholder="search" [(ngModel)]="searchText" />\n    </div>\n    <ng-container *ngTemplateOutlet="actionTemplate"></ng-container>\n    <ul class="__ngx-selectbox-ul">\n      <ng-container *ngFor="let item of dropdownRows | ngx_item_filter:searchText; let i = index; let l = count">\n        <li #li_item *ngIf="l>0" (click)="onClickItem(item, i)" [ngClass]="item.isSelected ? getActiveClass() : \'\'">\n          {{item.label}}\n        </li>\n      </ng-container>\n      <li class="__empty-items"\n        *ngIf="(dropdownRows | ngx_item_filter:searchText).length === 0 && configs.showEmptyResultsLabel">\n        {{getEmptyTextLabel()}}\n      </li>\n    </ul>\n  </div>\n  <div *ngIf="!isEnable" class="__disabled-mask"></div>\n</div>',providers:[{provide:t.NG_VALUE_ACCESSOR,useExisting:o.forwardRef(function(){return e}),multi:!0}],styles:['.__ngx-selectbox-may{position:relative;min-width:200px;padding:3px 40px 3px 10px;display:flex;align-items:center;cursor:pointer;background-color:#fff}.__ngx-selectbox-may .__disabled-mask{position:absolute;background-color:rgba(0,0,0,.15);top:0;left:0;right:0;bottom:0}.__ngx-selectbox-may::before{content:"\\f107";position:absolute;font-family:FontAwesome;color:#3f495b;right:10px;top:0;bottom:0;display:flex;align-items:center;font-size:14px}.__ngx-selectbox-may .__selected-label{position:relative;display:block;width:100%;text-align:left;height:19px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.__ngx-selectbox-may .__remove-selected-btn{background-color:transparent;border:0;outline:0;cursor:pointer;position:absolute;right:20px;top:0;bottom:0;display:flex;align-items:center}.__ngx-selectbox-may .__clickable-area{position:absolute;top:0;left:0;right:0;bottom:0}.__ngx-selectbox-may .__remove-selected-btn i::before{content:"\\f00d";font-family:FontAwesome;font-style:normal!important;-webkit-text-stroke:.5px #f1f4f8}.__ngx-selectbox-may .__selected-label .__remove-selected-btn::before{content:"\\f00c";position:absolute;font-family:FontAwesome;right:12px;font-size:12px;top:0;bottom:0;display:flex;align-items:center;-webkit-text-stroke:.5px #f1f4f8}.__ngx-selectbox-may .__item-list-browser{position:absolute;background-color:#fff;border-radius:4px;border:1px solid #dfe3e9;box-shadow:0 3px 18px -6px rgba(0,0,0,.5);z-index:1;top:-2px;left:-2px;right:-2px}.__ngx-selectbox-may .__item-list-browser ul{max-height:200px;overflow-y:auto;padding:0;margin:0;border-top:1px solid #dfe3e9}.__ngx-selectbox-may .__item-list-browser ul li{color:#777;font-size:13px;text-align:left;padding:9px 24px 9px 12px;border-bottom:1px solid #dfe3e9;cursor:pointer;line-height:17px}.__ngx-selectbox-may .__item-list-browser ul li.selected,.__ngx-selectbox-may .__item-list-browser ul li:hover{background-color:#f1f4f8;color:#2ea2f8}.__ngx-selectbox-may .__item-list-browser ul li.active{background-color:#f1f4f8;color:#2ea2f8;position:relative}.__ngx-selectbox-may .__item-list-browser ul li.active::before{content:"\\f00c";position:absolute;font-family:FontAwesome;right:12px;font-size:12px;-webkit-text-stroke:.5px #f1f4f8;top:0;bottom:0;display:flex;align-items:center}.__ngx-selectbox-may .__item-list-browser ul li.__empty-items{color:#ff7f74;background-color:#fff4f4;cursor:auto}.__ngx-selectbox-may .__item-list-browser ul li:last-child{border-bottom:none}.__ngx-selectbox-may .__item-list-browser .__item-search{padding:5px;display:flex;position:relative}.__ngx-selectbox-may .__item-list-browser .__item-search::before{content:"\\f002";position:absolute;font-family:FontAwesome;right:16px;-webkit-text-stroke:.5px #fff;color:#ced0da;top:0;bottom:0;display:flex;align-items:center}.__ngx-selectbox-may .__item-list-browser .__item-search input[type=text]{width:100%;border:1px solid #dfe3e9;border-radius:4px;padding:8px 30px 8px 10px;outline:0}.__ngx-selectbox-may .__item-list-browser .__item-search input[type=text]:focus{border:1px solid #2ea2f8;box-shadow:0 0 0 3px #2ea2f84d}.__ngx-selectbox-may .__item-list-browser ul::-webkit-scrollbar{width:11px;height:18px}.__ngx-selectbox-may .__item-list-browser ul::-webkit-scrollbar-thumb{height:6px;border:3px solid transparent;background-clip:padding-box;-webkit-border-radius:7px;background-color:rgba(0,0,0,.15);-webkit-box-shadow:inset -1px -1px 0 rgba(0,0,0,.05) inset 1px 1px 0 rgba(0,0,0,.05)}.__ngx-selectbox-may .__item-list-browser ul::-webkit-scrollbar-button{width:0;height:0;display:none}.__ngx-selectbox-may .__item-list-browser ul::-webkit-scrollbar-corner{background-color:transparent}.__ngx-selectbox-may .__loading-text{position:absolute;background-color:#e5e5e5;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;padding-left:10px;border-radius:4px;z-index:2}']}]}],e.ctorParameters=function(){return[{type:o.ElementRef},{type:r}]},e.propDecorators={items:[{type:o.Input,args:["items"]}],cssClass:[{type:o.Input,args:["css-class"]}],valueField:[{type:o.Input,args:["value-field"]}],labelField:[{type:o.Input,args:["label-field"]}],placeholder:[{type:o.Input,args:["placeholder"]}],emptyText:[{type:o.Input,args:["empty-text"]}],showEmptyResultText:[{type:o.Input,args:["show-empty-text"]}],isMulti:[{type:o.Input,args:["is-multi"]}],isLoading:[{type:o.Input,args:["is-loading"]}],loadingText:[{type:o.Input,args:["loading-text"]}],onKeyUp:[{type:o.Output,args:["search-keyup"]}],onSelect:[{type:o.Output,args:["on-select-item"]}],onBlur:[{type:o.Output,args:["on-blur"]}],searchField:[{type:o.ViewChild,args:["search_field"]}],listItems:[{type:o.ViewChildren,args:["li_item"]}],actionTemplate:[{type:o.ContentChild,args:["actionTemplate"]}],content:[{type:o.ViewChild,args:["item_window"]}]},e}(),c=function(){function e(){}return e.prototype.transform=function(e,t){return e&&t?e.filter(function(e){return-1!==e.label.toUpperCase().indexOf(t.toUpperCase())}):e},e.decorators=[{type:o.Pipe,args:[{name:"ngx_item_filter",pure:!1}]}],e}(),p=function(){function e(){}return e.decorators=[{type:o.NgModule,args:[{declarations:[a,c],imports:[i.BrowserModule,n.BrowserAnimationsModule,t.FormsModule],exports:[a]}]}],e}();e.NgxSelectboxMayService=r,e.NgxSelectboxMayComponent=a,e.NGXSelectMayRow=s,e.NGXSelectMayConfigs=l,e.NGXSelectboxMayPipe=c,e.NgxSelectboxMayModule=p,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-selectbox-may.umd.min.js.map