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

Angular Dropdown with search/filter option

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@angular/material/select"),require("rxjs"),require("rxjs/operators"),require("@angular/material/core"),require("@angular/common"),require("@angular/material/tooltip"),require("@angular/material/form-field"),require("@angular/material/input"),require("@angular/material/icon"),require("@angular/material/checkbox")):"function"==typeof define&&define.amd?define("ngx-mat-dropdown",["exports","@angular/core","@angular/forms","@angular/material/select","rxjs","rxjs/operators","@angular/material/core","@angular/common","@angular/material/tooltip","@angular/material/form-field","@angular/material/input","@angular/material/icon","@angular/material/checkbox"],t):t((e=e||self)["ngx-mat-dropdown"]={},e.ng.core,e.ng.forms,e.ng.material.select,e.rxjs,e.rxjs.operators,e.ng.material.core,e.ng.common,e.ng.material.tooltip,e.ng.material.formField,e.ng.material.input,e.ng.material.icon,e.ng.material.checkbox)}(this,(function(e,t,n,i,o,a,r,s,l,c,p,d,h){"use strict";var u=function(){function e(){}return e.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],e.ctorParameters=function(){return[]},e.ɵprov=t.ɵɵdefineInjectable({factory:function(){return new e},token:e,providedIn:"root"}),e}(),m=function(e,t,n,i,o,a){void 0===e&&(e=""),void 0===t&&(t=!1),void 0===n&&(n="Search"),void 0===i&&(i="name"),void 0===o&&(o="key"),void 0===a&&(a="Code"),this.id=e,this.multiple=t,this.placeholder=n,this.labelKey=i,this.keyValue=o,this.tooltip=a||i};var g=function(){function e(){this.dropdownCtrl=new n.FormControl,this.appearance="outline",this.FilterCtrl=new n.FormControl,this.dropdownList=[],this.onselectItems=new t.EventEmitter,this.filteredBanks=new o.ReplaySubject(1),this._onDestroy=new o.Subject}return Object.defineProperty(e.prototype,"dropdownDisabled",{set:function(e){e?this.dropdownCtrl.disable():this.dropdownCtrl.enable()},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"getdropdownList",{set:function(e){e&&(this.dropdownList=e,this.filteredBanks.next(e.slice()))},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"onselect",{set:function(e){e?(this.selectedItems=e,this.dropdownCtrl.setValue(e)):(this.dropdownSettings.multiple?this.selectedItems=[]:this.selectedItems=null,this.dropdownCtrl.setValue(e))},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){var e=this;this.FilterCtrl.valueChanges.pipe(a.takeUntil(this._onDestroy)).subscribe((function(){var t=e.FilterCtrl.value;e._filter(t)}))},e.prototype._filter=function(e){var t=this;e?this.filteredBanks.next(this.dropdownList.filter((function(n){return n[t.dropdownSettings.labelKey].toLowerCase().includes(e.val.toLowerCase())}))):this.filteredBanks.next(this.dropdownList.slice())},e.prototype.ngAfterViewInit=function(){this.dropdownSettings.multiple||this.setInitialValue()},e.prototype.ngOnDestroy=function(){this._onDestroy.next(),this._onDestroy.complete()},e.prototype.setInitialValue=function(){var e=this;this.filteredBanks.pipe(a.take(1),a.takeUntil(this._onDestroy)).subscribe((function(){e.singleSelect.compareWith=function(t,n){if(t&&n)return t[e.dropdownSettings.keyValue]===n[e.dropdownSettings.keyValue]}}))},e.prototype.OnSelectedEvent=function(e){this.onselectItems.emit(e.source)},e.prototype.AllClicked=function(e){if(e.checked){var t=this.dropdownList.map((function(e){return e}));this.dropdownCtrl.setValue(t)}else this.dropdownCtrl.setValue([]);this.onselectItems.emit(this.dropdownCtrl)},e.prototype.ischecked=function(e){var t=this.dropdownCtrl.value;return this.dropdownList&&t&&t.length>0&&this.dropdownList.length==t.length},e.prototype.isIndeterminate=function(){var e=this.dropdownCtrl.value;return this.dropdownList&&e&&e.length>0&&e.length<this.dropdownList.length},e.prototype.openedChange=function(){if(this.innerSelectAll&&this.innerSelectAll.nativeElement){for(var e,t=this.innerSelectAll.nativeElement;t=t.parentElement;)if(t.classList.contains("mat-select-panel")){e=t;break}if(e){this.innerSelectAll.nativeElement.style.width=e.clientWidth+"px";this.innerSelectAll.nativeElement.childNodes}}},e.decorators=[{type:t.Component,args:[{selector:"ngx-mat-dropdown",template:'<mat-form-field appearance="{{appearance}}">\r\n    <mat-label>{{dropdownSettings?.placeholder}}</mat-label>\r\n    <mat-select disableOptionCentering [formControl]="dropdownCtrl" [attr.id]="dropdownSettings?.id" \r\n                (selectionChange)="OnSelectedEvent($event)"\r\n                [placeholder]="dropdownSettings.placeholder " \r\n                #singleSelect [multiple]="dropdownSettings?.multiple" \r\n                matTooltip="{{selectedItems ? selectedItems[dropdownSettings.labelKey] : \'\'}}"\r\n                [multiple]="dropdownSettings?.multiple">\r\n        <mat-select-search [formControl]="FilterCtrl" [multiple]="dropdownSettings?.multiple" *ngIf="dropdownList.length > 5"></mat-select-search>\r\n        <div #innerSelectall [style.top.px]="dropdownList?.length <= 5 ? 0 : 44" class="mat-select-all-inner" *ngIf="dropdownList?.length !== 0 && dropdownSettings.multiple" >\r\n            <mat-checkbox class="mat-option mat-select-checkbox" [disableRipple]="true" [indeterminate]="isIndeterminate()" [checked]="ischecked(check)" (change)="AllClicked($event)" #check>\r\n                {{ check.checked  ? (\'Unselect All\' ) : (\'Select All\' ) }}\r\n            </mat-checkbox>\r\n        </div>\r\n        <mat-option *ngIf="dropdownList.length && !dropdownSettings.multiple">None</mat-option>\r\n        <mat-option  *ngFor="let item of filteredBanks | async" [value]="item" \r\n                matTooltip="{{item[dropdownSettings.labelKey]}}">\r\n            {{ item[dropdownSettings.labelKey] }}\r\n        </mat-option>\r\n    </mat-select>\r\n</mat-form-field>',styles:["\n  .mat-select-all-inner {\n    position: absolute;\n    top: 52px;\n    width: calc(100% + 3px);\n    \n    background: white;\n    z-index: 100;\n    font-size: inherit;\n    box-shadow: none;\n    border-radius: 0;\n    -webkit-transform: translate3d(0,0,0);\n}\n\n  "]}]}],e.ctorParameters=function(){return[]},e.propDecorators={dropdownCtrl:[{type:t.Input,args:["ctrl"]}],appearance:[{type:t.Input}],dropdownSettings:[{type:t.Input,args:["dropdownSettings"]}],dropdownDisabled:[{type:t.Input,args:["disabled"]}],getdropdownList:[{type:t.Input,args:["dropdownList"]}],onselect:[{type:t.Input,args:["selectedItems"]}],onselectItems:[{type:t.Output,args:["onselectItems"]}],singleSelect:[{type:t.ViewChild,args:["singleSelect",{read:t.ElementRef}]}],innerSelectAll:[{type:t.ViewChild,args:["innerSelectall",{read:t.ElementRef,static:!0}]}]},e}();var f=function(){function e(e,n,i){void 0===i&&(i=null),this.matSelect=e,this.changeDetectorRef=n,this.matOption=i,this.placeholderLabel="Search",this.multiple=!1,this.showSearch=!0,this.noEntriesFoundLabel="No Data",this.onChange=function(e){},this.onTouched=function(e){},this.overlayClassSet=!1,this.change=new t.EventEmitter,this.AllClicked=new t.EventEmitter,this._onDestroy=new o.Subject}return Object.defineProperty(e.prototype,"isInsideMatOption",{get:function(){return!!this.matOption},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"value",{get:function(){return this._value},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){var e=this,t="mat-select-search-panel";this.matSelect.panelClass?Array.isArray(this.matSelect.panelClass)?this.matSelect.panelClass.push(t):"string"==typeof this.matSelect.panelClass?this.matSelect.panelClass=[this.matSelect.panelClass,t]:"object"==typeof this.matSelect.panelClass&&(this.matSelect.panelClass[t]=!0):this.matSelect.panelClass=t,this.matOption&&(this.matOption.disabled=!0,this.matOption._getHostElement().classList.add("contains-mat-select-search")),this.matSelect.openedChange.pipe(a.delay(1),a.takeUntil(this._onDestroy)).subscribe((function(t){t?(e.getWidth(),e._focus()):e._reset()})),this.matSelect.openedChange.pipe(a.take(1)).pipe(a.takeUntil(this._onDestroy)).subscribe((function(){e._options=e.matSelect.options,e._options.changes.pipe(a.takeUntil(e._onDestroy)).subscribe((function(){var t=e.matSelect._keyManager;t&&e.matSelect.panelOpen&&setTimeout((function(){t.setFirstItemActive(),e.getWidth(),e.matOption&&(e._noEntriesFound()?e.matOption._getHostElement().classList.add("mat-select-search-no-entries-found"):e.matOption._getHostElement().classList.remove("mat-select-search-no-entries-found"))}),1)}))})),this.change.pipe(a.takeUntil(this._onDestroy)).subscribe((function(){e.changeDetectorRef.detectChanges()})),this.initMultipleHandling()},e.prototype.ngOnDestroy=function(){this._onDestroy.next(),this._onDestroy.complete()},e.prototype.ngAfterViewInit=function(){var e=this;setTimeout((function(){e.setOverlayClass()})),this.matSelect.openedChange.pipe(a.take(1),a.takeUntil(this._onDestroy)).subscribe((function(){e.matSelect.options.changes.pipe(a.takeUntil(e._onDestroy)).subscribe((function(){e.changeDetectorRef.markForCheck()}))}))},e.prototype._handleKeydown=function(e){32===e.keyCode&&e.stopPropagation()},e.prototype.writeValue=function(e){e!==this._value&&(this._value=e,this.change.emit({type:"Text",val:e}))},e.prototype.onInputChange=function(e){e!==this._value&&(this._value=e,this.onChange({type:"Text",val:e}),this.change.emit({type:"Text",val:e}))},e.prototype.onBlur=function(e){this.writeValue(e),this.onTouched()},e.prototype.registerOnChange=function(e){this.onChange=e},e.prototype.registerOnTouched=function(e){this.onTouched=e},e.prototype._focus=function(){if(this.searchSelectInput&&this.matSelect.panel){var e=this.matSelect.panel.nativeElement,t=e.scrollTop;this.searchSelectInput.nativeElement.focus(),e.scrollTop=t}},e.prototype._reset=function(e){this.searchSelectInput&&(this.searchSelectInput.nativeElement.value="",this.onInputChange(""),e&&this._focus())},e.prototype.setOverlayClass=function(){var e=this;if(!this.overlayClassSet){var t=["cdk-overlay-pane-select-search"];this.matOption||t.push("cdk-overlay-pane-select-search-with-offset"),this.matSelect.overlayDir.attach.pipe(a.takeUntil(this._onDestroy)).subscribe((function(){var n,i;if(e.searchSelectInput)for(n=e.searchSelectInput.nativeElement;n=n.parentElement;)if(n.classList.contains("cdk-overlay-pane")){i=n;break}i&&t.forEach((function(e){i.classList.add(e)}))})),this.overlayClassSet=!0}},e.prototype.initMultipleHandling=function(){var e=this;this.matSelect.valueChange.pipe(a.takeUntil(this._onDestroy)).subscribe((function(t){if(e.matSelect.multiple){var n=!1;if(e._value&&e._value.length&&e.previousSelectedValues&&Array.isArray(e.previousSelectedValues)){t&&Array.isArray(t)||(t=[]);var i=e.matSelect.options.map((function(e){return e.value}));e.previousSelectedValues.forEach((function(e){-1===t.indexOf(e)&&-1===i.indexOf(e)&&(t.push(e),n=!0)}))}n&&e.matSelect._onChange(t),e.previousSelectedValues=t}}))},e.prototype.getWidth=function(){if(this.innerSelectSearch&&this.innerSelectSearch.nativeElement){for(var e,t=this.innerSelectSearch.nativeElement;t=t.parentElement;)if(t.classList.contains("mat-select-panel")){e=t;break}e&&(this.innerSelectSearch.nativeElement.style.width=e.clientWidth+"px")}},e.prototype._noEntriesFound=function(){if(this._options)return this.matOption?this.noEntriesFoundLabel&&this.value&&1===this._options.length:this.noEntriesFoundLabel&&this.value&&0===this._options.length},e.prototype.toggleSelection=function(e,t){e.checked,this.onChange({type:"Check",val:e.checked}),this.change.emit({type:"Check",val:e.checked})},e.prototype.ischecked=function(e){console.log(this.matSelect.options,this.matSelect.value);var t=this.matSelect.selected;return this.matSelect.options&&t&&t.length>0&&this.matSelect.options.length==t.length},e.prototype.isIndeterminate=function(){var e=this.matSelect.selected;return this.matSelect.options&&e.length>0&&e.length<this.matSelect.options.length},e.decorators=[{type:t.Component,args:[{selector:"mat-select-search",template:'\r\n<input *ngIf="showSearch" matInput class="mat-select-search-input mat-select-search-hidden" />\r\n<input matInput class="mat-select-checkbox mat-select-search-hidden"*ngIf="multiple"  />\r\n\r\n<div #innerSelectSearch class="mat-select-search-inner" *ngIf="showSearch"\r\n     [ngClass]="{\'mat-select-search-inner-multiple\': matSelect.multiple}">\r\n    <input matInput autocomplete="off"\r\n           class="mat-select-search-input"\r\n           #searchSelectInput\r\n           (keydown)="_handleKeydown($event)"\r\n           (input)="onInputChange($event.target.value)"\r\n           (blur)="onBlur($event.target.value)"\r\n           placeholder="Search" />\r\n    <button mat-button *ngIf="value"\r\n            mat-icon-button\r\n            aria-label="Clear"\r\n            (click)="_reset(true)"\r\n            class="mat-select-search-clear">\r\n        <mat-icon>close</mat-icon>\r\n    </button>\r\n</div>\r\n\r\n<div *ngIf="noEntriesFoundLabel && value && _options?.length === 0"\r\n     class="mat-select-search-no-entries-found">\r\n    {{noEntriesFoundLabel}}\r\n</div>\r\n',providers:[{provide:n.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return e})),multi:!0}],changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[".mat-select-search-hidden{visibility:hidden}.mat-select-search-inner{position:absolute;top:0;width:calc(100% + 3px);border-bottom:1px solid #ccc;background:#fff;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;-webkit-transform:translate3d(0,0,0)}.mat-select-search-inner.mat-select-search-inner-multiple{width:100%}::ng-deep .mat-select-search-panel{transform:none!important;overflow-x:hidden}.mat-select-search-input{padding:10px 30px 10px 10px;box-sizing:border-box}.mat-select-checkbox{padding:10px;box-sizing:border-box}.mat-select-search-no-entries-found{padding:10px}.mat-select-search-clear{position:absolute;right:4px;top:5px}:host.mat-select-search-inside-mat-option .mat-select-search-input{padding-top:0;padding-bottom:0;height:3em;line-height:3em}:host.mat-select-search-inside-mat-option .mat-select-checkbox{padding-top:0;padding-bottom:0;height:3em;line-height:3em}:host.mat-select-search-inside-mat-option .mat-select-search-clear{top:3px}::ng-deep .cdk-overlay-pane-select-search.cdk-overlay-pane-select-search-with-offset{margin-top:0}::ng-deep .mat-option[aria-disabled=true].contains-mat-select-search{position:static;padding:0}::ng-deep .mat-option[aria-disabled=true].contains-mat-select-search .mat-icon{margin-right:0}::ng-deep .mat-option[aria-disabled=true].contains-mat-select-search .mat-option-pseudo-checkbox{display:none}::ng-deep .mat-option[aria-disabled=true].contains-mat-select-search.mat-select-search-no-entries-found{height:6em}.mat-select-all-inner{position:absolute;top:52px;width:calc(100% + 3px);background:#fff;z-index:100;font-size:inherit;box-shadow:none;border-radius:0;-webkit-transform:translate3d(0,0,0)}"]}]}],e.ctorParameters=function(){return[{type:i.MatSelect,decorators:[{type:t.Inject,args:[i.MatSelect]}]},{type:t.ChangeDetectorRef},{type:r.MatOption,decorators:[{type:t.Optional},{type:t.Inject,args:[r.MatOption]}]}]},e.propDecorators={placeholderLabel:[{type:t.Input}],multiple:[{type:t.Input,args:["multiple"]}],showSearch:[{type:t.Input,args:["showSearch"]}],noEntriesFoundLabel:[{type:t.Input}],searchSelectInput:[{type:t.ViewChild,args:["searchSelectInput",{read:t.ElementRef}]}],innerSelectSearch:[{type:t.ViewChild,args:["innerSelectSearch",{read:t.ElementRef}]}],isInsideMatOption:[{type:t.HostBinding,args:["class.mat-select-search-inside-mat-option"]}]},e}();var y=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{declarations:[g,f],imports:[s.CommonModule,n.FormsModule,n.ReactiveFormsModule,c.MatFormFieldModule,p.MatInputModule,d.MatIconModule,h.MatCheckboxModule,i.MatSelectModule,l.MatTooltipModule],exports:[g]}]}],e}();e.DropdownSettingsModel=m,e.MatDropdownComponent=g,e.MatDropdownModule=y,e.MatDropdownService=u,e.ɵa=f,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ngx-mat-dropdown.umd.min.js.map