-
Notifications
You must be signed in to change notification settings - Fork 27
/
text-filter.component.ts
63 lines (55 loc) · 1.53 KB
/
text-filter.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
import { Component, Input, Output, ElementRef, EventEmitter } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import debounce from 'lodash-es/debounce';
import { SuperTableFilter, ColumnState } from '../models/interfaces';
import { SuperTableState } from '../services/super-table-state.service';
@Component({
/* tslint:disable-next-line */
selector: '[super-table-text-filter]',
template: `
<input
class="form-control input-sm"
type="text"
[(ngModel)]="column.filterValue"
(ngModelChange)="onModelChange()"
[attr.placeholder]="filter.placeholder"
[attr.title]="filter.title"
[ngClass]="{ hasContent: !!column.filterValue }" />
<button tabindex="-1" *ngIf="column.filterValue" class="clear-btn" role="button" (click)="clearFilter($event)">×</button>
`,
styles: [`
:host {
position: relative;
}
input {
width: 100%;
font-size: 90%;
border: none;
border-radius: 0;
}
.hasContent {
background: #dff7ff;
}
.clear-btn {
position: absolute;
background: transparent;
color: black;
right: 0;
top: 0;
border: none;
font-size: 120%;
}
`]
})
export class TextFilterComponent {
@Input() filter: SuperTableFilter;
@Input() column: ColumnState;
onModelChange: Function = debounce(function() {
this.state.notify();
}, 200);
public clearFilter() {
this.column.filterValue = '';
this.state.notify();
}
constructor(private state: SuperTableState) {}
}