ngx-mat-dropdown/ngx-mat-dropdown.metadata.json

Angular Dropdown with search/filter option

{"__symbolic":"module","version":4,"metadata":{"MatDropdownService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"MatDropdownComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":15,"character":1},"arguments":[{"selector":"ngx-mat-dropdown","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  "],"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>"}]}],"members":{"dropdownCtrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3},"arguments":["ctrl"]}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"dropdownSettings":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3},"arguments":["dropdownSettings"]}]}],"dropdownDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3},"arguments":["disabled"]}]}],"getdropdownList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3},"arguments":["dropdownList"]}]}],"onselect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":3},"arguments":["selectedItems"]}]}],"onselectItems":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":77,"character":3},"arguments":["onselectItems"]}]}],"singleSelect":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":82,"character":3},"arguments":["singleSelect",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":82,"character":37}}]}]}],"innerSelectAll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":83,"character":3},"arguments":["innerSelectall",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":83,"character":39},"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"_filter":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"setInitialValue":[{"__symbolic":"method"}],"OnSelectedEvent":[{"__symbolic":"method"}],"AllClicked":[{"__symbolic":"method"}],"ischecked":[{"__symbolic":"method"}],"isIndeterminate":[{"__symbolic":"method"}],"openedChange":[{"__symbolic":"method"}]}},"MatDropdownModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"MatDropdownComponent"},{"__symbolic":"reference","name":"ɵa"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":16,"character":16},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":18,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":19,"character":4},{"__symbolic":"reference","module":"@angular/material/checkbox","name":"MatCheckboxModule","line":20,"character":4},{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelectModule","line":21,"character":4},{"__symbolic":"reference","module":"@angular/material/tooltip","name":"MatTooltipModule","line":21,"character":20}],"exports":[{"__symbolic":"reference","name":"MatDropdownComponent"}]}]}],"members":{}},"DropdownSettingsModel":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[null,null,null,null,null,null]}]}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"mat-select-search","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":22,"character":21},"useExisting":{"__symbolic":"reference","name":"ɵa"},"multi":true}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":27,"character":21},"member":"OnPush"},"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","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)}"]}]}],"members":{"placeholderLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":5}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":5},"arguments":["multiple"]}]}],"showSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":5},"arguments":["showSearch"]}]}],"noEntriesFoundLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":5}}]}],"searchSelectInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":39,"character":5},"arguments":["searchSelectInput",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":39,"character":44}}]}]}],"innerSelectSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":40,"character":5},"arguments":["innerSelectSearch",{"read":{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":40,"character":44}}]}]}],"isInsideMatOption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":42,"character":5},"arguments":["class.mat-select-search-inside-mat-option"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":72,"character":17},"arguments":[{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelect","line":72,"character":24}]}],null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":73,"character":55}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":73,"character":67},"arguments":[{"__symbolic":"reference","module":"@angular/material/core","name":"MatOption","line":73,"character":74}]}]],"parameters":[{"__symbolic":"reference","module":"@angular/material/select","name":"MatSelect","line":72,"character":53},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":73,"character":35},{"__symbolic":"reference","module":"@angular/material/core","name":"MatOption","line":73,"character":103}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"_handleKeydown":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"onInputChange":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"_focus":[{"__symbolic":"method"}],"_reset":[{"__symbolic":"method"}],"setOverlayClass":[{"__symbolic":"method"}],"initMultipleHandling":[{"__symbolic":"method"}],"getWidth":[{"__symbolic":"method"}],"_noEntriesFound":[{"__symbolic":"method"}],"toggleSelection":[{"__symbolic":"method"}],"ischecked":[{"__symbolic":"method"}],"isIndeterminate":[{"__symbolic":"method"}]}}},"origins":{"MatDropdownService":"./lib/mat-dropdown.service","MatDropdownComponent":"./lib/mat-dropdown.component","MatDropdownModule":"./lib/mat-dropdown.module","DropdownSettingsModel":"./lib/dropdown-settings.model","ɵa":"./lib/mat-select-search/mat-select-search.component"},"importAs":"ngx-mat-dropdown"}