@devlukaszmichalak/mat-select-filter
Version:
A filter for mat-select
1 lines • 11.9 kB
Source Map (JSON)
{"version":3,"file":"devlukaszmichalak-mat-select-filter.mjs","sources":["../../../projects/lib/src/lib/mat-select-filter.component.ts","../../../projects/lib/src/lib/mat-select-filter.module.ts","../../../projects/lib/src/public_api.ts","../../../projects/lib/src/devlukaszmichalak-mat-select-filter.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';\r\nimport { FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';\r\nimport { A, NINE, SPACE, Z, ZERO } from '@angular/cdk/keycodes';\r\nimport { debounceTime, Subscription, take, timer } from 'rxjs';\r\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\r\nimport { CommonModule } from '@angular/common';\r\nimport { MatInputModule } from '@angular/material/input';\r\n\r\n@Component({\r\n selector: 'mat-select-filter',\r\n template: `\r\n <form [formGroup]=\"searchForm\" class=\"mat-filter\" [ngStyle]=\"{'background-color': color ? color : 'white'}\">\r\n <div>\r\n <input #input class=\"mat-filter-input\" matInput placeholder=\"{{placeholder}}\" formControlName=\"value\"\r\n (keydown)=\"handleKeydown($event)\">\r\n <mat-spinner *ngIf=\"localSpinner && showSpinner\" class=\"spinner\" diameter=\"16\"></mat-spinner>\r\n </div>\r\n <div *ngIf=\"noResults\"\r\n class=\"noResultsMessage\">\r\n {{ noResultsMessage }}\r\n </div>\r\n </form>\r\n `,\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n MatProgressSpinnerModule,\r\n MatInputModule\r\n ],\r\n styleUrls: ['./mat-select-filter.component.scss']\r\n})\r\nexport class MatSelectFilterComponent implements OnInit, OnDestroy {\r\n private searchFormValueChangesSubscription?: Subscription;\r\n @ViewChild('input', {static: true}) input: any;\r\n \r\n @Input('array') array: any[] = [];\r\n @Input('placeholder') placeholder: string = 'Search...';\r\n @Input('color') color?: string;\r\n @Input('displayMember') displayMember?: string;\r\n @Input('showSpinner') showSpinner = true;\r\n @Input('noResultsMessage') noResultsMessage = 'No results';\r\n @Input('hasGroup') hasGroup?: boolean;\r\n @Input('groupArrayName') groupArrayName?: string;\r\n @Input('filterDebounceTime') filterDebounceTime: number = 0;\r\n \r\n @Output() filteredReturn = new EventEmitter<any>();\r\n \r\n noResults = false;\r\n localSpinner = false;\r\n \r\n public filteredItems: any[] = [];\r\n \r\n public searchForm: UntypedFormGroup = this.fb.group({\r\n value: ''\r\n });\r\n \r\n constructor(private fb: UntypedFormBuilder) {\r\n }\r\n \r\n ngOnInit(): void {\r\n this.searchFormValueChangesSubscription = this.searchForm.valueChanges\r\n .pipe(debounceTime(this.filterDebounceTime))\r\n .subscribe(value => {\r\n this.localSpinner = true;\r\n \r\n const userInputLowerCase = value['value'].toLowerCase();\r\n \r\n if (userInputLowerCase) {\r\n this.filterArray(userInputLowerCase);\r\n \r\n // NO RESULTS VALIDATION\r\n this.noResults = this.filteredItems == null || this.filteredItems.length === 0;\r\n \r\n } else {\r\n this.filteredItems = this.array.slice();\r\n this.noResults = false;\r\n }\r\n \r\n this.filteredReturn.emit(this.filteredItems);\r\n timer(2000)\r\n .pipe(take(1))\r\n .subscribe(() => this.localSpinner = false);\r\n });\r\n \r\n timer(500)\r\n .pipe(take(1))\r\n .subscribe(() => this.input.nativeElement.focus());\r\n }\r\n \r\n private filterArray(userInputLowerCase: string): void {\r\n // IF THE DISPLAY MEMBER INPUT IS SET WE CHECK THE SPECIFIC PROPERTY\r\n if (this.displayMember == null) {\r\n this.filteredItems = this.array.filter((name: any) => name.toLowerCase().includes(userInputLowerCase));\r\n \r\n } else if (this.hasGroup && this.groupArrayName && this.displayMember) {\r\n this.filteredItems = this.array\r\n .map((a: any) => {\r\n const objCopy = {...a};\r\n objCopy[this.groupArrayName!] = objCopy[this.groupArrayName!].filter((g: any) => g[this.displayMember!].toLowerCase().includes(userInputLowerCase));\r\n return objCopy;\r\n })\r\n .filter((x: any) => x[this.groupArrayName!].length > 0);\r\n \r\n // OTHERWISE, WE CHECK THE ENTIRE STRING\r\n } else {\r\n this.filteredItems = this.array.filter((item: any) => item[this.displayMember!].toLowerCase().includes(userInputLowerCase));\r\n }\r\n }\r\n \r\n handleKeydown(event: KeyboardEvent): void {\r\n const isAlphanumeric = (event.key && event.key.length === 1) ||\r\n (event.keyCode >= A && event.keyCode <= Z) ||\r\n (event.keyCode >= ZERO && event.keyCode <= NINE) ||\r\n (event.keyCode === SPACE);\r\n \r\n // PREVENT PROPAGATION FOR ALL ALPHANUMERIC CHARACTERS IN ORDER TO AVOID SELECTION ISSUES\r\n if (isAlphanumeric) {\r\n event.stopPropagation();\r\n }\r\n }\r\n \r\n ngOnDestroy(): void {\r\n this.filteredReturn.emit(this.array);\r\n this.searchFormValueChangesSubscription!.unsubscribe();\r\n }\r\n \r\n}\r\n","import { MatSelectFilterComponent } from './mat-select-filter.component';\r\nimport { NgModule } from '@angular/core';\r\n\r\n@NgModule({\r\n declarations: [],\r\n imports: [MatSelectFilterComponent],\r\n exports: [MatSelectFilterComponent]\r\n})\r\nexport class MatSelectFilterModule {\r\n}\r\n","/*\r\n * Public API Surface of mat-select-filter\r\n */\r\n\r\nexport * from './lib/mat-select-filter.component';\r\nexport * from './lib/mat-select-filter.module';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}