@tapsellorg/angular-material-library
Version:
Angular library for Tapsell
208 lines (200 loc) • 15.6 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, input, ContentChild, ViewEncapsulation, Component, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginator } from '@angular/material/paginator';
import { PghFilterChipsComponent } from '@tapsellorg/angular-material-library/src/lib/filter-chips';
import { PghDateRangePickerComponent } from '@tapsellorg/angular-material-library/src/lib/date-range-picker';
import { MatSort } from '@angular/material/sort';
import { PghRefreshButtonComponent } from '@tapsellorg/angular-material-library/src/lib/refresh-button';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import { __decorate } from 'tslib';
import { DataSource } from '@angular/cdk/table';
import { Subject, BehaviorSubject } from 'rxjs';
import { PghLoader, pghLoader } from '@tapsellorg/angular-material-library/src/lib/loader';
import { takeUntil } from 'rxjs/operators';
import { pghDebounceTime } from '@tapsellorg/angular-material-library/src/lib/common';
class PghTableDateRangePickerDirective {
constructor() { }
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghTableDateRangePickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: PghTableDateRangePickerDirective, isStandalone: false, selector: "[pgh-table-date-range-picker]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghTableDateRangePickerDirective, decorators: [{
type: Directive,
args: [{
selector: '[pgh-table-date-range-picker]',
standalone: false,
}]
}], ctorParameters: () => [] });
class PghTableHeaderDirective {
constructor() { }
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghTableHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: PghTableHeaderDirective, isStandalone: false, selector: "[pgh-table-header]", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghTableHeaderDirective, decorators: [{
type: Directive,
args: [{
selector: '[pgh-table-header]',
standalone: false,
}]
}], ctorParameters: () => [] });
class PghTableBoxComponent {
constructor() {
this.tableTitle = input(undefined);
this.datasource = input(undefined);
this.maxHeightVh = input(undefined);
}
ngAfterViewInit() {
this.initializeDatasource();
this.getTableData();
}
initializeDatasource() {
if (this.matPaginator) {
this.datasource()?.setPaginator(this.matPaginator);
}
if (this.matSort) {
this.datasource()?.setSorter(this.matSort);
}
if (this.filterChipsComponent) {
this.datasource()?.setFilter(this.filterChipsComponent);
}
if (this.dateRangePickerComponent) {
this.datasource()?.setDateFilter(this.dateRangePickerComponent);
}
if (this.refreshButtonComponent) {
this.datasource()?.setRefresher(this.refreshButtonComponent);
}
}
getTableData() {
this.datasource()?.triggerLoadData();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghTableBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: PghTableBoxComponent, isStandalone: false, selector: "pgh-table-box", inputs: { tableTitle: { classPropertyName: "tableTitle", publicName: "tableTitle", isSignal: true, isRequired: false, transformFunction: null }, datasource: { classPropertyName: "datasource", publicName: "datasource", isSignal: true, isRequired: false, transformFunction: null }, maxHeightVh: { classPropertyName: "maxHeightVh", publicName: "maxHeightVh", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "filterChipsComponent", first: true, predicate: PghFilterChipsComponent, descendants: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true }, { propertyName: "dateRangePickerComponent", first: true, predicate: PghDateRangePickerComponent, descendants: true }, { propertyName: "dateRangePickerDirective", first: true, predicate: PghTableDateRangePickerDirective, descendants: true }, { propertyName: "headerDirective", first: true, predicate: PghTableHeaderDirective, descendants: true }, { propertyName: "refreshButtonComponent", first: true, predicate: PghRefreshButtonComponent, descendants: true }], ngImport: i0, template: "<div class=\"pgh-table-box\">\n <div class=\"pgh-table-box-header\" [hidden]=\"!tableTitle() && !headerDirective\">\n @if (tableTitle()) {\n <h4>{{ tableTitle() }}</h4>\n }\n <ng-content select=\"[pgh-table-header]\"></ng-content>\n </div>\n <div class=\"pgh-table-box-header\" [hidden]=\"!dateRangePickerDirective && !refreshButtonComponent\">\n <ng-content select=\"[pgh-table-date-range-picker]\"></ng-content>\n <ng-content select=\"[pgh-table-refresh-button]\"></ng-content>\n </div>\n\n <div\n class=\"pgh-filters-wrapper\"\n [hidden]=\"!filtersWrapperRef.innerHTML.trim() && !actionButtonsWrapperRef.innerHTML.trim()\"\n >\n <div #filtersWrapperRef>\n <ng-content select=\"pgh-filter-chips\"></ng-content>\n <ng-content select=\"[pgh-table-filters]\"></ng-content>\n </div>\n <div #actionButtonsWrapperRef class=\"pgh-action-buttons\">\n <ng-content select=\"[pgh-action-buttons]\"></ng-content>\n </div>\n </div>\n\n <div class=\"overflow-x-auto\" [style.max-height.vh]=\"maxHeightVh()\">\n <ng-content></ng-content>\n </div>\n @if (matPaginator) {\n <div class=\"pgh-table-footer-container\">\n <ng-content select=\"mat-paginator\"></ng-content>\n </div>\n }\n</div>\n", styles: [".font-monospaced-numbers{font-feature-settings:\"ss03\"!important}.font-english-numbers{font-feature-settings:normal!important}.font-weight-light{font-weight:300}.font-weight-normal{font-weight:400}.font-weight-bold{font-weight:600}.black-50{background-color:hsl(var(--_body-hue),var(--_body-saturation),var(--lightness-0),50%)!important}.white-50{background-color:hsl(var(--_body-hue),var(--_body-saturation),var(--lightness-1000),50%)!important}.pgh-table-box{background:var(--fff);box-shadow:var(--shadow);border-radius:var(--box-radius)}.box .pgh-table-box{box-shadow:none}.pgh-table-box-header{display:flex;align-items:center;padding-block:.25rem;padding-inline:1rem;min-height:3.125rem;border-bottom:1px solid var(--light-border-color)}.pgh-table-box-header h4{font-weight:600;font-size:1rem;margin-bottom:0}.pgh-action-buttons{display:flex;align-items:center}.mat-mdc-paginator{background:transparent}\n"], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghTableBoxComponent, decorators: [{
type: Component,
args: [{ selector: 'pgh-table-box', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"pgh-table-box\">\n <div class=\"pgh-table-box-header\" [hidden]=\"!tableTitle() && !headerDirective\">\n @if (tableTitle()) {\n <h4>{{ tableTitle() }}</h4>\n }\n <ng-content select=\"[pgh-table-header]\"></ng-content>\n </div>\n <div class=\"pgh-table-box-header\" [hidden]=\"!dateRangePickerDirective && !refreshButtonComponent\">\n <ng-content select=\"[pgh-table-date-range-picker]\"></ng-content>\n <ng-content select=\"[pgh-table-refresh-button]\"></ng-content>\n </div>\n\n <div\n class=\"pgh-filters-wrapper\"\n [hidden]=\"!filtersWrapperRef.innerHTML.trim() && !actionButtonsWrapperRef.innerHTML.trim()\"\n >\n <div #filtersWrapperRef>\n <ng-content select=\"pgh-filter-chips\"></ng-content>\n <ng-content select=\"[pgh-table-filters]\"></ng-content>\n </div>\n <div #actionButtonsWrapperRef class=\"pgh-action-buttons\">\n <ng-content select=\"[pgh-action-buttons]\"></ng-content>\n </div>\n </div>\n\n <div class=\"overflow-x-auto\" [style.max-height.vh]=\"maxHeightVh()\">\n <ng-content></ng-content>\n </div>\n @if (matPaginator) {\n <div class=\"pgh-table-footer-container\">\n <ng-content select=\"mat-paginator\"></ng-content>\n </div>\n }\n</div>\n", styles: [".font-monospaced-numbers{font-feature-settings:\"ss03\"!important}.font-english-numbers{font-feature-settings:normal!important}.font-weight-light{font-weight:300}.font-weight-normal{font-weight:400}.font-weight-bold{font-weight:600}.black-50{background-color:hsl(var(--_body-hue),var(--_body-saturation),var(--lightness-0),50%)!important}.white-50{background-color:hsl(var(--_body-hue),var(--_body-saturation),var(--lightness-1000),50%)!important}.pgh-table-box{background:var(--fff);box-shadow:var(--shadow);border-radius:var(--box-radius)}.box .pgh-table-box{box-shadow:none}.pgh-table-box-header{display:flex;align-items:center;padding-block:.25rem;padding-inline:1rem;min-height:3.125rem;border-bottom:1px solid var(--light-border-color)}.pgh-table-box-header h4{font-weight:600;font-size:1rem;margin-bottom:0}.pgh-action-buttons{display:flex;align-items:center}.mat-mdc-paginator{background:transparent}\n"] }]
}], ctorParameters: () => [], propDecorators: { filterChipsComponent: [{
type: ContentChild,
args: [PghFilterChipsComponent]
}], matPaginator: [{
type: ContentChild,
args: [MatPaginator]
}], matSort: [{
type: ContentChild,
args: [MatSort]
}], dateRangePickerComponent: [{
type: ContentChild,
args: [PghDateRangePickerComponent]
}], dateRangePickerDirective: [{
type: ContentChild,
args: [PghTableDateRangePickerDirective]
}], headerDirective: [{
type: ContentChild,
args: [PghTableHeaderDirective]
}], refreshButtonComponent: [{
type: ContentChild,
args: [PghRefreshButtonComponent]
}] } });
class PghTableModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: PghTableModule, declarations: [PghTableBoxComponent, PghTableDateRangePickerDirective, PghTableHeaderDirective], imports: [CommonModule, MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule], exports: [PghTableBoxComponent, PghTableDateRangePickerDirective, PghTableHeaderDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghTableModule, imports: [CommonModule, MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghTableModule, decorators: [{
type: NgModule,
args: [{
declarations: [PghTableBoxComponent, PghTableDateRangePickerDirective, PghTableHeaderDirective],
imports: [CommonModule, MatButtonModule, MatMenuModule, MatIconModule, MatTooltipModule],
exports: [PghTableBoxComponent, PghTableDateRangePickerDirective, PghTableHeaderDirective],
}]
}] });
class PghTableDatasource extends DataSource {
constructor(config) {
super();
this.config = config;
this.DEFAULT_PAGE_SIZE = 20;
this._destroyed$ = new Subject();
this.dataSubject = new BehaviorSubject([]);
this.triggerLoadDataSubject = new Subject();
this.dataLength = 0;
this.loader = new PghLoader(['overlay', 'big']);
this.trackBy = (index, item) => item[this.config.idField];
}
connect(_collectionViewer) {
return this.dataSubject.asObservable();
}
disconnect(_collectionViewer) {
this.dataSubject.complete();
this._destroyed$.next(undefined);
this._destroyed$.complete();
}
setPaginator(paginator) {
if (!paginator)
return;
this.paginator = paginator;
this.paginator.page.pipe(takeUntil(this._destroyed$)).subscribe(() => {
this.triggerLoadData();
});
}
setSorter(sorter) {
this.sorter = sorter;
this.sorter.sortChange.pipe(takeUntil(this._destroyed$)).subscribe(() => {
this.triggerLoadData();
});
}
setFilter(filterChipsComponent) {
this.paginator?.firstPage();
this.filterChipsComponent = filterChipsComponent;
this.filterChipsComponent.search.subscribe((data) => {
this.filterChipsFilterData = data;
this.triggerLoadData();
});
}
setDateFilter(dateRangePickerComponent) {
this.dateRangePickerComponent = dateRangePickerComponent;
this.dateRangePickerSelectedRange = this.dateRangePickerComponent.getSelectedDateRange();
this.dateRangePickerComponent.rangeChange.subscribe(data => {
this.dateRangePickerSelectedRange = data;
this.triggerLoadData();
});
}
setRefresher(refreshButtonComponent) {
this.refreshButtonComponent = refreshButtonComponent;
this.refreshButtonComponent?.refreshDataEvent.subscribe(() => {
this.triggerLoadData();
});
}
triggerLoadData() {
this.triggerLoadDataSubject.next(true);
this.loadData({
pageOptions: {
index: this.paginator?.pageIndex ?? 0,
size: this.paginator?.pageSize ?? this.DEFAULT_PAGE_SIZE,
},
sortOptions: this.sorter?.active
? {
field: this.sorter.active,
direction: this.sorter.direction,
}
: undefined,
filterChipsFilterData: this.filterChipsFilterData,
dateRangePickerSelectedRange: this.dateRangePickerSelectedRange,
})
.pipe(pghLoader(this.loader), takeUntil(this.triggerLoadDataSubject))
.subscribe(response => {
this.dataSubject.next(response.data);
this.dataLength = response.totalItems;
});
}
}
__decorate([
pghDebounceTime(200)
], PghTableDatasource.prototype, "triggerLoadData", null);
/**
* Generated bundle index. Do not edit.
*/
export { PghTableBoxComponent, PghTableDatasource, PghTableDateRangePickerDirective, PghTableHeaderDirective, PghTableModule };
//# sourceMappingURL=tapsellorg-angular-material-library-src-lib-table.mjs.map