@alfiob/ng-datatable
Version:
ng-datatable - fully customizable & easy to use datatable library
105 lines (103 loc) • 16.3 kB
JavaScript
import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class ColumnFilterComponent {
constructor() {
this.close = new EventEmitter();
this.filterChange = new EventEmitter();
}
ngOnInit() {
document.addEventListener('click', this.closeMethod.bind(this));
}
ngOnDestroy() {
document.removeEventListener('click', this.closeMethod.bind(this));
}
closeMethod() {
this.close.emit();
}
select(condition) {
this.column.condition = condition;
if (condition === '') {
this.column.value = '';
}
this.filterChange.emit(this.column);
}
}
ColumnFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ColumnFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ColumnFilterComponent, selector: "column-filter", inputs: { column: "column" }, outputs: { close: "close", filterChange: "filterChange" }, ngImport: i0, template: `
<div class="bh-filter-menu bh-absolute bh-z-[1] bh-bg-white bh-shadow-md bh-rounded-md bh-top-full bh-right-0 bh-w-32 bh-mt-1">
<div class="bh-text-[13px] bh-font-normal bh-rounded bh-overflow-hidden" (click)="closeMethod(); $event.stopPropagation()">
<button type="button" [class.active]="column.condition === ''" (click)="select('')">No filter</button>
<ng-container *ngIf="column.type === 'string'">
<button type="button" [class.active]="column.condition === 'contain'" (click)="select('contain')">Contain</button>
<button type="button" [class.active]="column.condition === 'not_contain'" (click)="select('not_contain')">Not contain</button>
<button type="button" [class.active]="column.condition === 'equal'" (click)="select('equal')">Equal</button>
<button type="button" [class.active]="column.condition === 'not_equal'" (click)="select('not_equal')">Not equal</button>
<button type="button" [class.active]="column.condition === 'start_with'" (click)="select('start_with')">Starts with</button>
<button type="button" [class.active]="column.condition === 'end_with'" (click)="select('end_with')">Ends with</button>
</ng-container>
<ng-container *ngIf="column.type === 'number'">
<button type="button" [class.active]="column.condition === 'equal'" (click)="select('equal')">Equal</button>
<button type="button" [class.active]="column.condition === 'not_equal'" (click)="select('not_equal')">Not Equal</button>
<button type="button" [class.active]="column.condition === 'greater_than'" (click)="select('greater_than')">Greater than</button>
<button type="button" [class.active]="column.condition === 'greater_than_equal'" (click)="select('greater_than_equal')">Greater than or equal</button>
<button type="button" [class.active]="column.condition === 'less_than'" (click)="select('less_than')">Less than</button>
<button type="button" [class.active]="column.condition === 'less_than_equal'" (click)="select('less_than_equal')">Less than or equal</button>
</ng-container>
<ng-container *ngIf="column.type === 'date'">
<button type="button" [ngClass]="{ active: column.condition === 'equal' }" (click)="select('equal')">Equal</button>
<button type="button" [ngClass]="{ active: column.condition === 'not_equal' }" (click)="select('not_equal')">Not equal</button>
<button type="button" [ngClass]="{ active: column.condition === 'greater_than' }" (click)="select('greater_than')">Greater than</button>
<button type="button" [ngClass]="{ active: column.condition === 'less_than' }" (click)="select('less_than')">Less than</button>
</ng-container>
<button type="button" [ngClass]="{ active: column.condition === 'is_null' }" (click)="select('is_null')">Is null</button>
<button type="button" [ngClass]="{ active: column.condition === 'is_not_null' }" (click)="select('is_not_null')">Not null</button>
</div>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ColumnFilterComponent, decorators: [{
type: Component,
args: [{
selector: 'column-filter',
template: `
<div class="bh-filter-menu bh-absolute bh-z-[1] bh-bg-white bh-shadow-md bh-rounded-md bh-top-full bh-right-0 bh-w-32 bh-mt-1">
<div class="bh-text-[13px] bh-font-normal bh-rounded bh-overflow-hidden" (click)="closeMethod(); $event.stopPropagation()">
<button type="button" [class.active]="column.condition === ''" (click)="select('')">No filter</button>
<ng-container *ngIf="column.type === 'string'">
<button type="button" [class.active]="column.condition === 'contain'" (click)="select('contain')">Contain</button>
<button type="button" [class.active]="column.condition === 'not_contain'" (click)="select('not_contain')">Not contain</button>
<button type="button" [class.active]="column.condition === 'equal'" (click)="select('equal')">Equal</button>
<button type="button" [class.active]="column.condition === 'not_equal'" (click)="select('not_equal')">Not equal</button>
<button type="button" [class.active]="column.condition === 'start_with'" (click)="select('start_with')">Starts with</button>
<button type="button" [class.active]="column.condition === 'end_with'" (click)="select('end_with')">Ends with</button>
</ng-container>
<ng-container *ngIf="column.type === 'number'">
<button type="button" [class.active]="column.condition === 'equal'" (click)="select('equal')">Equal</button>
<button type="button" [class.active]="column.condition === 'not_equal'" (click)="select('not_equal')">Not Equal</button>
<button type="button" [class.active]="column.condition === 'greater_than'" (click)="select('greater_than')">Greater than</button>
<button type="button" [class.active]="column.condition === 'greater_than_equal'" (click)="select('greater_than_equal')">Greater than or equal</button>
<button type="button" [class.active]="column.condition === 'less_than'" (click)="select('less_than')">Less than</button>
<button type="button" [class.active]="column.condition === 'less_than_equal'" (click)="select('less_than_equal')">Less than or equal</button>
</ng-container>
<ng-container *ngIf="column.type === 'date'">
<button type="button" [ngClass]="{ active: column.condition === 'equal' }" (click)="select('equal')">Equal</button>
<button type="button" [ngClass]="{ active: column.condition === 'not_equal' }" (click)="select('not_equal')">Not equal</button>
<button type="button" [ngClass]="{ active: column.condition === 'greater_than' }" (click)="select('greater_than')">Greater than</button>
<button type="button" [ngClass]="{ active: column.condition === 'less_than' }" (click)="select('less_than')">Less than</button>
</ng-container>
<button type="button" [ngClass]="{ active: column.condition === 'is_null' }" (click)="select('is_null')">Is null</button>
<button type="button" [ngClass]="{ active: column.condition === 'is_not_null' }" (click)="select('is_not_null')">Not null</button>
</div>
</div>
`,
}]
}], ctorParameters: function () { return []; }, propDecorators: { column: [{
type: Input
}], close: [{
type: Output,
args: ['close']
}], filterChange: [{
type: Output,
args: ['filterChange']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sdW1uLWZpbHRlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2xpYi9jb2x1bW4tZmlsdGVyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQXFDdkUsTUFBTSxPQUFPLHFCQUFxQjtJQUk5QjtRQUZpQixVQUFLLEdBQXNCLElBQUksWUFBWSxFQUFPLENBQUM7UUFDNUMsaUJBQVksR0FBc0IsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQUNuRSxDQUFDO0lBRWhCLFFBQVE7UUFDSixRQUFRLENBQUMsZ0JBQWdCLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7SUFDcEUsQ0FBQztJQUVELFdBQVc7UUFDUCxRQUFRLENBQUMsbUJBQW1CLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUM7SUFDdkUsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3RCLENBQUM7SUFFRCxNQUFNLENBQUMsU0FBYztRQUNqQixJQUFJLENBQUMsTUFBTSxDQUFDLFNBQVMsR0FBRyxTQUFTLENBQUM7UUFDbEMsSUFBSSxTQUFTLEtBQUssRUFBRSxFQUFFO1lBQ2xCLElBQUksQ0FBQyxNQUFNLENBQUMsS0FBSyxHQUFHLEVBQUUsQ0FBQztTQUMxQjtRQUVELElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUN4QyxDQUFDOzttSEF6QlEscUJBQXFCO3VHQUFyQixxQkFBcUIsOElBakNwQjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztLQStCVDs0RkFFUSxxQkFBcUI7a0JBbkNqQyxTQUFTO21CQUFDO29CQUNQLFFBQVEsRUFBRSxlQUFlO29CQUN6QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7S0ErQlQ7aUJBQ0o7MEVBRVksTUFBTTtzQkFBZCxLQUFLO2dCQUNXLEtBQUs7c0JBQXJCLE1BQU07dUJBQUMsT0FBTztnQkFDUyxZQUFZO3NCQUFuQyxNQUFNO3VCQUFDLGNBQWMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ2NvbHVtbi1maWx0ZXInLFxyXG4gICAgdGVtcGxhdGU6IGBcclxuICAgICAgICA8ZGl2IGNsYXNzPVwiYmgtZmlsdGVyLW1lbnUgYmgtYWJzb2x1dGUgYmgtei1bMV0gYmgtYmctd2hpdGUgYmgtc2hhZG93LW1kIGJoLXJvdW5kZWQtbWQgYmgtdG9wLWZ1bGwgYmgtcmlnaHQtMCBiaC13LTMyIGJoLW10LTFcIj5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImJoLXRleHQtWzEzcHhdIGJoLWZvbnQtbm9ybWFsIGJoLXJvdW5kZWQgYmgtb3ZlcmZsb3ctaGlkZGVuXCIgKGNsaWNrKT1cImNsb3NlTWV0aG9kKCk7ICRldmVudC5zdG9wUHJvcGFnYXRpb24oKVwiPlxyXG4gICAgICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgW2NsYXNzLmFjdGl2ZV09XCJjb2x1bW4uY29uZGl0aW9uID09PSAnJ1wiIChjbGljayk9XCJzZWxlY3QoJycpXCI+Tm8gZmlsdGVyPC9idXR0b24+XHJcbiAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiY29sdW1uLnR5cGUgPT09ICdzdHJpbmcnXCI+XHJcbiAgICAgICAgICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgW2NsYXNzLmFjdGl2ZV09XCJjb2x1bW4uY29uZGl0aW9uID09PSAnY29udGFpbidcIiAoY2xpY2spPVwic2VsZWN0KCdjb250YWluJylcIj5Db250YWluPC9idXR0b24+XHJcbiAgICAgICAgICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgW2NsYXNzLmFjdGl2ZV09XCJjb2x1bW4uY29uZGl0aW9uID09PSAnbm90X2NvbnRhaW4nXCIgKGNsaWNrKT1cInNlbGVjdCgnbm90X2NvbnRhaW4nKVwiPk5vdCBjb250YWluPC9idXR0b24+XHJcbiAgICAgICAgICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgW2NsYXNzLmFjdGl2ZV09XCJjb2x1bW4uY29uZGl0aW9uID09PSAnZXF1YWwnXCIgKGNsaWNrKT1cInNlbGVjdCgnZXF1YWwnKVwiPkVxdWFsPC9idXR0b24+XHJcbiAgICAgICAgICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgW2NsYXNzLmFjdGl2ZV09XCJjb2x1bW4uY29uZGl0aW9uID09PSAnbm90X2VxdWFsJ1wiIChjbGljayk9XCJzZWxlY3QoJ25vdF9lcXVhbCcpXCI+Tm90IGVxdWFsPC9idXR0b24+XHJcbiAgICAgICAgICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgW2NsYXNzLmFjdGl2ZV09XCJjb2x1bW4uY29uZGl0aW9uID09PSAnc3RhcnRfd2l0aCdcIiAoY2xpY2spPVwic2VsZWN0KCdzdGFydF93aXRoJylcIj5TdGFydHMgd2l0aDwvYnV0dG9uPlxyXG4gICAgICAgICAgICAgICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIFtjbGFzcy5hY3RpdmVdPVwiY29sdW1uLmNvbmRpdGlvbiA9PT0gJ2VuZF93aXRoJ1wiIChjbGljayk9XCJzZWxlY3QoJ2VuZF93aXRoJylcIj5FbmRzIHdpdGg8L2J1dHRvbj5cclxuICAgICAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxyXG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImNvbHVtbi50eXBlID09PSAnbnVtYmVyJ1wiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIFtjbGFzcy5hY3RpdmVdPVwiY29sdW1uLmNvbmRpdGlvbiA9PT0gJ2VxdWFsJ1wiIChjbGljayk9XCJzZWxlY3QoJ2VxdWFsJylcIj5FcXVhbDwvYnV0dG9uPlxyXG4gICAgICAgICAgICAgICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIFtjbGFzcy5hY3RpdmVdPVwiY29sdW1uLmNvbmRpdGlvbiA9PT0gJ25vdF9lcXVhbCdcIiAoY2xpY2spPVwic2VsZWN0KCdub3RfZXF1YWwnKVwiPk5vdCBFcXVhbDwvYnV0dG9uPlxyXG4gICAgICAgICAgICAgICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIFtjbGFzcy5hY3RpdmVdPVwiY29sdW1uLmNvbmRpdGlvbiA9PT0gJ2dyZWF0ZXJfdGhhbidcIiAoY2xpY2spPVwic2VsZWN0KCdncmVhdGVyX3RoYW4nKVwiPkdyZWF0ZXIgdGhhbjwvYnV0dG9uPlxyXG4gICAgICAgICAgICAgICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIFtjbGFzcy5hY3RpdmVdPVwiY29sdW1uLmNvbmRpdGlvbiA9PT0gJ2dyZWF0ZXJfdGhhbl9lcXVhbCdcIiAoY2xpY2spPVwic2VsZWN0KCdncmVhdGVyX3RoYW5fZXF1YWwnKVwiPkdyZWF0ZXIgdGhhbiBvciBlcXVhbDwvYnV0dG9uPlxyXG4gICAgICAgICAgICAgICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIFtjbGFzcy5hY3RpdmVdPVwiY29sdW1uLmNvbmRpdGlvbiA9PT0gJ2xlc3NfdGhhbidcIiAoY2xpY2spPVwic2VsZWN0KCdsZXNzX3RoYW4nKVwiPkxlc3MgdGhhbjwvYnV0dG9uPlxyXG4gICAgICAgICAgICAgICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIFtjbGFzcy5hY3RpdmVdPVwiY29sdW1uLmNvbmRpdGlvbiA9PT0gJ2xlc3NfdGhhbl9lcXVhbCdcIiAoY2xpY2spPVwic2VsZWN0KCdsZXNzX3RoYW5fZXF1YWwnKVwiPkxlc3MgdGhhbiBvciBlcXVhbDwvYnV0dG9uPlxyXG4gICAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XHJcbiAgICAgICAgICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiY29sdW1uLnR5cGUgPT09ICdkYXRlJ1wiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIFtuZ0NsYXNzXT1cInsgYWN0aXZlOiBjb2x1bW4uY29uZGl0aW9uID09PSAnZXF1YWwnIH1cIiAoY2xpY2spPVwic2VsZWN0KCdlcXVhbCcpXCI+RXF1YWw8L2J1dHRvbj5cclxuICAgICAgICAgICAgICAgICAgICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIiBbbmdDbGFzc109XCJ7IGFjdGl2ZTogY29sdW1uLmNvbmRpdGlvbiA9PT0gJ25vdF9lcXVhbCcgfVwiIChjbGljayk9XCJzZWxlY3QoJ25vdF9lcXVhbCcpXCI+Tm90IGVxdWFsPC9idXR0b24+XHJcbiAgICAgICAgICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgW25nQ2xhc3NdPVwieyBhY3RpdmU6IGNvbHVtbi5jb25kaXRpb24gPT09ICdncmVhdGVyX3RoYW4nIH1cIiAoY2xpY2spPVwic2VsZWN0KCdncmVhdGVyX3RoYW4nKVwiPkdyZWF0ZXIgdGhhbjwvYnV0dG9uPlxyXG4gICAgICAgICAgICAgICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIFtuZ0NsYXNzXT1cInsgYWN0aXZlOiBjb2x1bW4uY29uZGl0aW9uID09PSAnbGVzc190aGFuJyB9XCIgKGNsaWNrKT1cInNlbGVjdCgnbGVzc190aGFuJylcIj5MZXNzIHRoYW48L2J1dHRvbj5cclxuICAgICAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxyXG5cclxuICAgICAgICAgICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIFtuZ0NsYXNzXT1cInsgYWN0aXZlOiBjb2x1bW4uY29uZGl0aW9uID09PSAnaXNfbnVsbCcgfVwiIChjbGljayk9XCJzZWxlY3QoJ2lzX251bGwnKVwiPklzIG51bGw8L2J1dHRvbj5cclxuICAgICAgICAgICAgICAgIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIFtuZ0NsYXNzXT1cInsgYWN0aXZlOiBjb2x1bW4uY29uZGl0aW9uID09PSAnaXNfbm90X251bGwnIH1cIiAoY2xpY2spPVwic2VsZWN0KCdpc19ub3RfbnVsbCcpXCI+Tm90IG51bGw8L2J1dHRvbj5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICBgLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgQ29sdW1uRmlsdGVyQ29tcG9uZW50IHtcclxuICAgIEBJbnB1dCgpIGNvbHVtbjogYW55O1xyXG4gICAgQE91dHB1dCgnY2xvc2UnKSBjbG9zZTogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuICAgIEBPdXRwdXQoJ2ZpbHRlckNoYW5nZScpIGZpbHRlckNoYW5nZTogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuICAgIGNvbnN0cnVjdG9yKCkge31cclxuXHJcbiAgICBuZ09uSW5pdCgpIHtcclxuICAgICAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIHRoaXMuY2xvc2VNZXRob2QuYmluZCh0aGlzKSk7XHJcbiAgICB9XHJcblxyXG4gICAgbmdPbkRlc3Ryb3koKSB7XHJcbiAgICAgICAgZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignY2xpY2snLCB0aGlzLmNsb3NlTWV0aG9kLmJpbmQodGhpcykpO1xyXG4gICAgfVxyXG5cclxuICAgIGNsb3NlTWV0aG9kKCkge1xyXG4gICAgICAgIHRoaXMuY2xvc2UuZW1pdCgpO1xyXG4gICAgfVxyXG5cclxuICAgIHNlbGVjdChjb25kaXRpb246IGFueSkge1xyXG4gICAgICAgIHRoaXMuY29sdW1uLmNvbmRpdGlvbiA9IGNvbmRpdGlvbjtcclxuICAgICAgICBpZiAoY29uZGl0aW9uID09PSAnJykge1xyXG4gICAgICAgICAgICB0aGlzLmNvbHVtbi52YWx1ZSA9ICcnO1xyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgdGhpcy5maWx0ZXJDaGFuZ2UuZW1pdCh0aGlzLmNvbHVtbik7XHJcbiAgICB9XHJcbn1cclxuIl19