mat-select-autocomplete/bundles/mat-select-autocomplete.umd.min.js

Angular material select component with autocomplete and select all features

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/material/icon"),require("@angular/material/select"),require("@angular/material/form-field"),require("@angular/forms"),require("@angular/material")):"function"==typeof define&&define.amd?define("mat-select-autocomplete",["exports","@angular/core","@angular/common","@angular/material/icon","@angular/material/select","@angular/material/form-field","@angular/forms","@angular/material"],t):t(e["mat-select-autocomplete"]={},e.ng.core,e.ng.common,e.ng.material.icon,e.ng.material.select,e.ng.material["form-field"],e.ng.forms,e.ng.material)}(this,function(e,t,n,l,i,o,r,s){"use strict";var a=function(){function e(){}return e.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],e.ctorParameters=function(){return[]},e.ngInjectableDef=t.defineInjectable({factory:function(){return new e},token:e,providedIn:"root"}),e}(),c=function(){function e(){this.selectPlaceholder="search...",this.disabled=!1,this.display="display",this.value="value",this.formControl=new r.FormControl,this.errorMsg="Field is required",this.showErrorMsg=!1,this.multiple=!0,this.labelCount=1,this.appearance="standard",this.selectionChange=new t.EventEmitter,this.filteredOptions=[],this.selectedValue=[],this.selectAllChecked=!1,this.displayString=""}return e.prototype.ngOnChanges=function(){this.disabled?this.formControl.disable():this.formControl.enable(),this.filteredOptions=this.options,this.selectedOptions?this.selectedValue=this.selectedOptions:this.formControl.value&&(this.selectedValue=this.formControl.value)},e.prototype.ngDoCheck=function(){this.selectedValue.length||this.selectionChange.emit(this.selectedValue)},e.prototype.toggleDropdown=function(){this.selectElem.toggle()},e.prototype.toggleSelectAll=function(e){var t=this;if(e.checked)this.filteredOptions.forEach(function(e){t.selectedValue.includes(e[t.value])||(t.selectedValue=t.selectedValue.concat([e[t.value]]))});else{var n=this.getFilteredOptionsValues();this.selectedValue=this.selectedValue.filter(function(e){return!n.includes(e)})}this.selectionChange.emit(this.selectedValue)},e.prototype.filterItem=function(t){var n=this;this.filteredOptions=this.options.filter(function(e){return-1<e[n.display].toLowerCase().indexOf(t.toLowerCase())}),this.selectAllChecked=!0,this.filteredOptions.forEach(function(e){n.selectedValue.includes(e[n.value])||(n.selectAllChecked=!1)}),this.filteredOptions.length||(this.selectAllChecked=!1)},e.prototype.hideOption=function(e){return!(-1<this.filteredOptions.indexOf(e))},e.prototype.getFilteredOptionsValues=function(){var t=[];return this.filteredOptions.forEach(function(e){t.push(e.value)}),t},e.prototype.onDisplayString=function(){var n=this;if(this.displayString="",this.selectedValue&&this.selectedValue.length){var e=[];if(this.multiple){for(var t=function(t){e[t]=l.options.filter(function(e){return e[n.value]===n.selectedValue[t]})[0]},l=this,i=0;i<this.labelCount;i++)t(i);if(e.length){for(i=0;i<e.length;i++)e[i]&&e[i][this.display]&&(this.displayString+=e[i][this.display]+",");this.displayString=this.displayString.slice(0,-1),1<this.selectedValue.length&&this.selectedValue.length>this.labelCount&&(this.displayString+=" (+"+(this.selectedValue.length-this.labelCount)+" others)")}}else(e=this.options.filter(function(e){return e[n.value]===n.selectedValue})).length&&(this.displayString=e[0][this.display])}return this.displayString},e.prototype.onSelectionChange=function(e){var t=this.getFilteredOptionsValues(),n=0;this.multiple&&(this.selectedValue.filter(function(e){t.includes(e)&&n++}),this.selectAllChecked=n===this.filteredOptions.length),this.selectedValue=e.value,this.selectionChange.emit(this.selectedValue)},e.prototype.trackByFn=function(e,t){return t.value},e.decorators=[{type:t.Component,args:[{selector:"mat-select-autocomplete",template:'\n    <mat-form-field appearance="{{ appearance }}">\n      <mat-select\n        #selectElem\n        [placeholder]="placeholder"\n        [formControl]="formControl"\n        [multiple]="multiple"\n        [(ngModel)]="selectedValue"\n        (selectionChange)="onSelectionChange($event)"\n      >\n        <div class="box-search">\n          <mat-checkbox\n            *ngIf="multiple"\n            color="primary"\n            class="box-select-all"\n            [(ngModel)]="selectAllChecked"\n            (change)="toggleSelectAll($event)"\n          ></mat-checkbox>\n          <input\n            #searchInput\n            type="text"\n            [ngClass]="{ \'pl-1\': !multiple }"\n            (input)="filterItem(searchInput.value)"\n            [placeholder]="selectPlaceholder"\n          />\n          <div\n            class="box-search-icon"\n            (click)="filterItem(\'\'); searchInput.value = \'\'"\n          >\n            <button mat-icon-button class="search-button">\n              <mat-icon class="mat-24" aria-label="Search icon">clear</mat-icon>\n            </button>\n          </div>\n        </div>\n        <mat-select-trigger>\n          {{ onDisplayString() }}\n        </mat-select-trigger>\n        <mat-option\n          *ngFor="let option of options; trackBy: trackByFn"\n          [disabled]="option.disabled"\n          [value]="option[value]"\n          [style.display]="hideOption(option) ? \'none\' : \'flex\'"\n          >{{ option[display] }}\n        </mat-option>\n      </mat-select>\n      <mat-hint style="color:red" *ngIf="showErrorMsg">{{ errorMsg }}</mat-hint>\n    </mat-form-field>\n  ',styles:["\n      .box-search {\n        margin: 8px;\n        border-radius: 2px;\n        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16),\n          0 0 0 1px rgba(0, 0, 0, 0.08);\n        transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);\n        display: flex;\n      }\n      .box-search input {\n        flex: 1;\n        border: none;\n        outline: none;\n      }\n      .box-select-all {\n        width: 36px;\n        line-height: 33px;\n        color: #808080;\n        text-align: center;\n      }\n      .search-button {\n        width: 36px;\n        height: 36px;\n        line-height: 33px;\n        color: #808080;\n      }\n      .pl-1 {\n        padding-left: 1rem;\n      }\n    "]}]}],e.ctorParameters=function(){return[]},e.propDecorators={selectPlaceholder:[{type:t.Input}],placeholder:[{type:t.Input}],options:[{type:t.Input}],disabled:[{type:t.Input}],display:[{type:t.Input}],value:[{type:t.Input}],formControl:[{type:t.Input}],errorMsg:[{type:t.Input}],showErrorMsg:[{type:t.Input}],selectedOptions:[{type:t.Input}],multiple:[{type:t.Input}],labelCount:[{type:t.Input}],appearance:[{type:t.Input}],selectionChange:[{type:t.Output}],selectElem:[{type:t.ViewChild,args:["selectElem"]}]},e}(),u=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[r.FormsModule,n.CommonModule,l.MatIconModule,s.MatButtonModule,i.MatSelectModule,s.MatCheckboxModule,o.MatFormFieldModule,r.ReactiveFormsModule],declarations:[c],exports:[c]}]}],e}();e.SelectAutocompleteService=a,e.SelectAutocompleteComponent=c,e.SelectAutocompleteModule=u,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=mat-select-autocomplete.umd.min.js.map