angular-dropdown-component/bundles/angular-dropdown-component.umd.min.js

Even though a dropdown (select-option) is a pretty common utility but it still doesn't support basics such as search.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common","@angular/forms"],t):t(e["angular-dropdown-component"]={},e.ng.core,e.ng.common,e.ng.forms)}(this,function(e,t,n,o){"use strict";var i=function(){function e(){this.selectedOptionChange=new t.EventEmitter,this.ifContainerFocused=!1}return e.prototype.ngAfterViewInit=function(){var t=this;this.mutationObserverDOM=new MutationObserver(function(e){t.setContainerDimensions()}),this.mutationObserverDOM.observe(this.dropdownMenu.nativeElement,{childList:!0}),this.mutationObserverDOM.observe(this.dropdownMenu.nativeElement.children[1],{childList:!0}),this.filter?this.mutationObserverDOM.observe(this.dropdownMenu.nativeElement.children[1].children[1],{childList:!0}):this.mutationObserverDOM.observe(this.dropdownMenu.nativeElement.children[1].children[0],{childList:!0})},e.prototype.ngOnChanges=function(e){var t=this;if(e.hasOwnProperty("data")&&(this._data=this.data),this.data&&!this.selectedOption)this.setDefaultOption();else if(this.data&&this.selectedOption){if(this.selectedOption.hasOwnProperty("id"))this.data.forEach(function(e){e.id==t.selectedOption.id&&(t._selectedOption=e)});else if(this.selectedOption.hasOwnProperty("name"))this.data.forEach(function(e){e.name==t.selectedOption.name&&(t._selectedOption=e)});else if(this.editable)return void(this._selectedOption=this.selectedOption);this._selectedOption||this.setDefaultOption()}},e.prototype.setDefaultOption=function(){this.editable?this._selectedOption="":this._selectedOption=this.data[0]},e.prototype.setContainerDimensions=function(){var e,t=this.dropdownMenu.nativeElement.children[0].offsetHeight;this.filter?(t+=this.dropdownMenu.nativeElement.children[1].children[0].offsetHeight,e=this.dropdownMenu.nativeElement.children[1].children[1].children):e=this.dropdownMenu.nativeElement.children[1].children[0].children,t+=Array.from(e).reduce(function(e,t){return e+t.offsetHeight},0);var n=this.dropdownButton.nativeElement,o=n.getBoundingClientRect(),i=this.filter?this.dropdownFilter.nativeElement.offsetHeight:0,r=o.top,s=o.left,d=window.innerHeight-r-n.offsetHeight;window.innerWidth,n.offsetWidth;this.selectedItemFocusedStyles={width:n.offsetWidth-2+"px",height:n.offsetHeight-2+"px"},this.restOfListWithoutFilterFocusedStyles={"margin-top":i+"px"},t<d?(this.containerFocusedStyles={top:r+"px",left:s+"px",width:n.offsetWidth+"px","flex-direction":"column"},this.restOfListFocusedStyles={"margin-top":n.offsetHeight+"px"}):t<r?(this.containerFocusedStyles={bottom:d+"px",left:s+"px",width:n.offsetWidth+"px","flex-direction":"column-reverse"},this.restOfListFocusedStyles={"margin-bottom":n.offsetHeight+"px"},this.selectedItemFocusedStyles=Object.assign({},this.selectedItemFocusedStyles,{"border-top":"1px solid #e0e0e0"})):r<d?(this.containerFocusedStyles={top:r+"px",bottom:"20px",left:s+"px",width:n.offsetWidth+"px","flex-direction":"column"},this.restOfListFocusedStyles={"margin-top":n.offsetHeight+"px"}):(this.containerFocusedStyles={top:"20px",bottom:d+"px",left:s+"px",width:n.offsetWidth+"px","flex-direction":"column-reverse"},this.restOfListFocusedStyles={"margin-bottom":n.offsetHeight+"px"},this.selectedItemFocusedStyles=Object.assign({},this.selectedItemFocusedStyles,{"border-top":"1px solid #e0e0e0"}))},e.prototype.onFilterSearch=function(e){this.setSearchedItems(e.target.value)},e.prototype.setSearchedItems=function(t){this._data=this.data.filter(function(e){return-1!==e.name.toLowerCase().indexOf(t.toLowerCase())})},e.prototype.onInputFocus=function(e){this.dropdownInput.nativeElement.focus(),this.ifContainerFocused=!1},e.prototype.onInputChange=function(e){this._selectedOption=e.target.value,this.selectedOptionChange.emit(this._selectedOption)},e.prototype.onDropdownItemSelect=function(e,t){this._selectedOption=t,this.selectedOptionChange.emit(t),this.hideDropdown()},e.prototype.onDropdownMenuClick=function(e){this.clearSearchFilter(),this.setContainerDimensions(),e.target instanceof HTMLInputElement||this.showDropdown()},e.prototype.onDropdownBlur=function(e){this.dropdownFilter&&e.relatedTarget==this.dropdownFilter.nativeElement&&e.relatedTarget instanceof HTMLInputElement||(this.ifContainerFocused=!1,this.hideDropdown())},e.prototype.clearSearchFilter=function(){this.dropdownFilter&&(this.dropdownFilter.nativeElement.value="",this.setSearchedItems(""))},e.prototype.showDropdown=function(){this.dropdownMenu.nativeElement.focus()},e.prototype.hideDropdown=function(){this.dropdownMenu.nativeElement.blur()},e.prototype.ngOnDestroy=function(){this.mutationObserverDOM.disconnect()},e}();i.decorators=[{type:t.Component,args:[{selector:"ng-dropdown",template:'<ng-container>\n  <div class="ng-dropdown">\n    <span *ngIf="dTitle" [innerText]="dTitle" class="ng-dropdown__title"></span>\n    <ul class="ng-dropdown__container" tabindex="0" (focus)="ifContainerFocused=true" (blur)="onDropdownBlur($event)" [ngStyle]="ifContainerFocused ? containerFocusedStyles: {}"\n      #dropdownMenu>\n      <li [ngStyle]="ifContainerFocused ? selectedItemFocusedStyles: {}">\n        <a (click)="hideDropdown()">\n          <span *ngIf="!editable; else ifEditableList" (focus)="onInputFocus($event)" [innerText]="_selectedOption?.name"></span>\n          <ng-template #ifEditableList>\n            <input class="ng-dropdown__container--editable" [ngModel]="_selectedOption | GetSelectedNamePipe" (focus)="onInputFocus($event)"/>\n          </ng-template>\n          <img src="assets/downPopup.png" />\n        </a>\n      </li>\n      <ul class="ng-dropdown__container--list" [ngStyle]="ifContainerFocused ? restOfListFocusedStyles: {}">\n        <li *ngIf="filter" [ngStyle]="ifContainerFocused ? selectedItemFocusedStyles: {}">\n          <input #dropdownFilter class="ng-dropdown__container--list__filter" placeholder="Search" (keyup)="onFilterSearch($event)" (blur)="onDropdownBlur($event)" />\n        </li>\n        <ul class="ng-dropdown__container--list__sublist" [ngStyle]="ifContainerFocused ? restOfListWithoutFilterFocusedStyles: {}">\n          <ng-container *ngIf="_data?.length else noResults">\n            <li *ngFor="let option of _data" [ngClass]="_selectedOption?.name == option.name ? \'active\' : \'\'">\n              <a [innerText]="option.name" (click)="onDropdownItemSelect($event, option)"></a>\n            </li>\n          </ng-container>\n          <ng-template #noResults>\n            <li>\n              <a>No Results Found</a>\n            </li>\n          </ng-template>\n        </ul>\n      </ul>\n    </ul>\n    <div class="ng-dropdown__button" [ngClass]="disabled ? \'disabled\' : \'\'" (mouseup)="onDropdownMenuClick($event)" #dropdownButton>\n      <span *ngIf="!editable; else ifEditable" [innerText]="_selectedOption?.name"></span>\n      <ng-template #ifEditable>\n        <input #dropdownInput (keyup)="onInputChange($event)" [ngModel]="_selectedOption | GetSelectedNamePipe" />\n      </ng-template>\n      <img src="assets/downPopup.png" />\n    </div>\n  </div>\n</ng-container>\n',styles:[".ng-dropdown{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;padding-bottom:10px}.ng-dropdown .ng-dropdown__title{padding-bottom:5px}.ng-dropdown .ng-dropdown__button{background:#fff;border:1px solid #c9c9c9;padding:2px 10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;height:18px}.ng-dropdown .ng-dropdown__button span,.ng-dropdown__container>li a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ng-dropdown .ng-dropdown__button img{height:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ng-dropdown .ng-dropdown__button input,.ng-dropdown .ng-dropdown__container li input.ng-dropdown__container--editable{width:100%;height:100%;border:none;outline:0;overflow:hidden;text-overflow:ellipsis}.ng-dropdown .ng-dropdown__button.disabled{pointer-events:none;opacity:.7}.ng-dropdown .ng-dropdown__container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;background:#fff;list-style-type:none;border:1px solid #c9c9c9;position:fixed;left:-10000px;outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:100000;padding:0;margin:0;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}.ng-dropdown .ng-dropdown__container:focus{left:0}.ng-dropdown .ng-dropdown__container:focus+.ng-dropdown__button{pointer-events:none}.ng-dropdown .ng-dropdown__container li:hover{background-color:#e0e0e0;color:#000}.ng-dropdown .ng-dropdown__container>li:first-child a{height:100%}.ng-dropdown .ng-dropdown__container>li:first-child,.ng-dropdown__container--list>li:first-child{position:fixed;background-color:#fff}.ng-dropdown .ng-dropdown__container>li:first-child a,.ng-dropdown__container--list>li:first-child a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.ng-dropdown .ng-dropdown__container>li:first-child a img,.ng-dropdown__container--list>li:first-child a img{height:10px}.ng-dropdown .ng-dropdown__container>li:first-child:hover,.ng-dropdown__container--list>li:first-child:hover{color:initial}.ng-dropdown .ng-dropdown__container li a,.ng-dropdown__container--list>li:first-child li a{padding:0 10px;height:22px;line-height:22px;cursor:pointer;-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:block;text-align:left}.ng-dropdown .ng-dropdown__container li input.ng-dropdown__container--list__filter{width:100%;padding:0 9px;height:22px;outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;border:none;border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0}.ng-dropdown .ng-dropdown__container ul{list-style-type:none;padding:0;margin:0;overflow:auto}.ng-dropdown__container--list__sublist li:first-child{position:initial}.ng-dropdown__container--list__sublist li.active{background-color:#6fbbff;color:#fff}"]}]}],i.ctorParameters=function(){return[]},i.propDecorators={data:[{type:t.Input}],disabled:[{type:t.Input}],dTitle:[{type:t.Input}],selectedOption:[{type:t.Input}],filter:[{type:t.Input}],editable:[{type:t.Input}],selectedOptionChange:[{type:t.Output}],dropdownMenu:[{type:t.ViewChild,args:["dropdownMenu"]}],dropdownButton:[{type:t.ViewChild,args:["dropdownButton"]}],dropdownInput:[{type:t.ViewChild,args:["dropdownInput"]}],dropdownFilter:[{type:t.ViewChild,args:["dropdownFilter"]}]};var r=function(){function e(){}return e.prototype.transform=function(e){return"object"==typeof e?e.name:e},e}();r.decorators=[{type:t.Pipe,args:[{name:"GetSelectedNamePipe"}]}],r.ctorParameters=function(){return[]};var s=function(){};s.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,o.FormsModule],declarations:[i,r],exports:[i]}]}],s.ctorParameters=function(){return[]},e.DropdownModule=s,e.ɵa=i,e.ɵb=r,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=angular-dropdown-component.umd.min.js.map