ng-custom-select/bundles/ng-custom-select.umd.min.js

Create customizable Angular2+ dropdown/datalist with your own styles

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("rxjs"),require("rxjs/operators"),require("@angular/common")):"function"==typeof define&&define.amd?define("ng-custom-select",["exports","@angular/core","@angular/forms","rxjs","rxjs/operators","@angular/common"],t):t(e["ng-custom-select"]={},e.ng.core,e.ng.forms,e.rxjs,e.rxjs.operators,e.ng.common)}(this,function(e,t,n,i,o,s){"use strict";var r=function(){function e(e){this._eref=e,this.onChange=new t.EventEmitter,this.active=!1,this.propagateChange=function(e){},this.searchTerm=new n.FormControl}return e.prototype.writeValue=function(e){(this.selectedItem=e)&&Object.keys(e).length&&this.searchTerm.setValue(e[this.displayKey]||e)},e.prototype.registerOnTouched=function(){},e.prototype.registerOnChange=function(e){this.propagateChange=e},e.prototype.validate=function(){return this.selectedItem?null:{required:!0}},e.prototype.ngOnInit=function(){var e=this;this.selectedItem=this.options[0],setTimeout(function(){e.getCaretPosition()}),this.displayKey||"object"!=typeof this.options[0]||(this.displayKey=Object.keys(this.options[0])[0]),this.searchTerm.setValue(this.options[0][this.displayKey]||this.options[0]),this.filterOptions=Object.assign([],this.options),this.isDatalist&&this.initSearch()},e.prototype.initSearch=function(){var s=this;this.searchKeys&&this.searchKeys.length||!this.displayKey||"object"!=typeof this.options[0]?this.displayKey&&"object"==typeof this.options[0]||(this.searchKeys=["0"]):this.searchKeys=[this.displayKey],i.fromEvent(this.searchInput.nativeElement,"input").pipe(o.map(function(e){return e.target.value}),o.debounceTime(100),o.distinctUntilChanged(),o.switchMap(function(o){return i.of(s.options.filter(function(e){for(var t=0,n=s.searchKeys.length;t<n;t++){if("object"==typeof e&&-1<e[s.searchKeys[t]].toString().toLowerCase().indexOf(o.toLowerCase()))return e;if("object"!=typeof e&&-1<e.toString().toLowerCase().indexOf(o.toLowerCase()))return e}}))})).subscribe(function(e){s.filterOptions=e})},e.prototype.changeValue=function(e){this.searchTerm.setValue(e[this.displayKey]||e),this.propagateChange(e),this.onChange.emit(e),this.selectedItem=e,this.filterOptions=this.isDatalist?Object.assign([],this.options):this.filterOptions},e.prototype.closeDropdown=function(e){this._eref.nativeElement.contains(e.target)||(this.active=!1,this.searchTerm.setValue(this.selectedItem[this.displayKey]||this.selectedItem),this.filterOptions=Object.assign([],this.options))},e.prototype.getCaretPosition=function(){var e=window.getComputedStyle(this._eref.nativeElement.querySelector(".ng-dropdown-wrapper"),null);this.positionRight=e.getPropertyValue("padding-right")},e.decorators=[{type:t.Component,args:[{selector:"ng-select",template:'<div class="ng-dropdown-wrapper" [class]="styleGuide?.selectBoxClass" tabindex="0" (click)="active=!active" [ngClass]="{\'active\':active, \'disabled\': disable}">\n    <input type="text" name="searchTerm" tabindex="-1" [formControl]="searchTerm" [readonly]="!isDatalist" #searchInput>\n    <span [class]="styleGuide?.caretClass" id="caret" [ngStyle]="{\'right\':positionRight}" [ngClass]="{\'icon\':!styleGuide?.caretClass}"></span>\n    <ul [ngClass]="{\'ng-dropdown-menu\' : true}" [class]="styleGuide?.selectMenuClass">\n        <li *ngFor="let option of filterOptions" (click)="changeValue(option)" [class]="styleGuide?.optionsClass">\n            <span>{{option[displayKey] || option}}</span>\n        </li>\n    </ul>\n</div>',styles:['@charset "UTF-8";.ng-dropdown-wrapper{display:inline-block;position:relative}.ng-dropdown-wrapper input[type=text]{width:90%;border:none;outline:0;text-transform:capitalize}.ng-dropdown-wrapper #caret{position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:999}.ng-dropdown-wrapper .icon::after{content:"▼";text-align:center;pointer-events:none}.ng-dropdown-wrapper .ng-dropdown-menu{display:none;position:absolute;top:102%;left:0;right:0;list-style:none;overflow:auto;z-index:9999}.ng-dropdown-wrapper .ng-dropdown-menu li span{text-transform:capitalize;transition:all .3s ease-out}.ng-dropdown-wrapper.active #caret{-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}.ng-dropdown-wrapper.active .ng-dropdown-menu{display:block}.disabled{cursor:not-allowed;pointer-events:none;opacity:.7;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}'],host:{"(document:click)":"closeDropdown($event)"},providers:[{provide:n.NG_VALUE_ACCESSOR,useExisting:t.forwardRef(function(){return e}),multi:!0},{provide:n.NG_VALIDATORS,useExisting:t.forwardRef(function(){return e}),multi:!0}]}]}],e.ctorParameters=function(){return[{type:t.ElementRef}]},e.propDecorators={options:[{type:t.Input}],displayKey:[{type:t.Input}],styleGuide:[{type:t.Input}],isDatalist:[{type:t.Input}],disable:[{type:t.Input}],searchKeys:[{type:t.Input}],searchInput:[{type:t.ViewChild,args:["searchInput"]}],onChange:[{type:t.Output}]},e}(),a=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[s.CommonModule,n.FormsModule,n.ReactiveFormsModule],declarations:[r],exports:[r]}]}],e}();e.NgSelectComponent=r,e.NgSelectModule=a,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ng-custom-select.umd.min.js.map