ngx-dropdown-search/bundles/ngx-dropdown-search.umd.min.js

A configurable dropdown box with search functionality for Angular 4.

!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.ng=e.ng||{},e.ng["ngx-dropdown-search"]=e.ng["ngx-dropdown-search"]||{}),e.ng.core,e.ng.common,e.ng.forms)}(this,function(e,t,n,s){"use strict";var i=function(){function e(){this.displayProperty="name",this.secondaryDisplayProperty="",this.filterProperty="name",this.secondaryFilterProperty="",this.disabled=!1,this.noResultsMessage="No results found",this.validationMessage="",this.loading=!1,this.maxWidth="100%",this.itemSelected=new t.EventEmitter,this.itemDeselected=new t.EventEmitter,this.displayResults=!1,this.displayValidationMessage=!1,this.elementCurrentlyHasFocus=!1}return e.prototype.ngOnInit=function(){this.filteredResults=this.resultSet},e.prototype.toggleResultsDisplay=function(){this.displayResults?(this.hideResults(!0),this.textarea.nativeElement.blur()):this.focusTextareaAndShowResults()},e.prototype.focusTextareaAndShowResults=function(){this.filteredResults=this.resultSet,this.textarea.nativeElement.focus(),this.displayResults=!0},e.prototype.hideResults=function(e){void 0===e&&(e=!1),this.elementCurrentlyHasFocus&&!e||(this.displayResults=!1,this.searchFilter="",this.filteredResults=this.resultSet)},e.prototype.setItem=function(e,t){e.stopPropagation(),this.selectedItem=t,this.itemSelected.emit(t),this.displayResults=!1,this.searchFilter="",this.displayValidationMessage=!1,this.filteredResults=this.resultSet},e.prototype.resetSelectedItem=function(){var e=this;this.itemDeselected.emit(this.selectedItem),this.selectedItem=null,setTimeout(function(){e.textarea.nativeElement.focus()},0),this.resultSet&&(this.displayResults=!0)},e.prototype.displayResultsAndApplyFilter=function(){var e=this;this.displayResults=!0,this.searchFilter&&this.searchFilter.length>0&&this.resultSet?this.filteredResults=this.resultSet.filter(function(t){return e.secondaryFilterProperty?(t[e.filterProperty]+" "+t[e.secondaryFilterProperty]).toLowerCase().includes(e.searchFilter.toLowerCase()):t[e.filterProperty].toLowerCase().includes(e.searchFilter.toLowerCase())}):this.filteredResults=this.resultSet},e.prototype.isValid=function(){return null!=this.selectedItem||(this.displayValidationMessage=!0,!1)},e.prototype.preventBlur=function(e){e.preventDefault(),this.textarea.nativeElement.focus()},e.prototype.resetFilter=function(){this.searchFilter="",this.filteredResults=this.resultSet,this.textarea.nativeElement.focus()},e.decorators=[{type:t.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            \x3c!-- Keeping this here for now - Styles and HTML for mutliple selections --\x3e\n            \x3c!-- <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> --\x3e\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    "]}]}],e.ctorParameters=function(){return[]},e.propDecorators={displayProperty:[{type:t.Input}],secondaryDisplayProperty:[{type:t.Input}],filterProperty:[{type:t.Input}],secondaryFilterProperty:[{type:t.Input}],resultSet:[{type:t.Input}],placeholder:[{type:t.Input}],disabled:[{type:t.Input}],conditionalMessage:[{type:t.Input}],noResultsMessage:[{type:t.Input}],validationMessage:[{type:t.Input}],loading:[{type:t.Input}],selectedItem:[{type:t.Input}],maxWidth:[{type:t.Input}],itemSelected:[{type:t.Output}],itemDeselected:[{type:t.Output}],textarea:[{type:t.ViewChild,args:["textarea"]}]},e}(),r=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,s.FormsModule],exports:[i],declarations:[i],providers:[]}]}],e.ctorParameters=function(){return[]},e}();e.DropdownSearchModule=r,e.DropdownSearchSelectorComponent=i,Object.defineProperty(e,"__esModule",{value:!0})});