ngx-st-tables 17.0.9 → 17.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/material-table/material-table-caption/material-table-caption.component.mjs +9 -3
- package/esm2022/lib/components/material-table/material-table.component.mjs +43 -23
- package/fesm2022/ngx-st-tables.mjs +49 -23
- package/fesm2022/ngx-st-tables.mjs.map +1 -1
- package/lib/components/material-table/material-table-caption/material-table-caption.component.d.ts +3 -1
- package/lib/components/material-table/material-table.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -568,6 +568,7 @@ class MaterialTableCaptionComponent extends StSubscribeDestroyComponent {
|
|
|
568
568
|
this.initFilters = {};
|
|
569
569
|
this._columns = [];
|
|
570
570
|
this.captionDataChanged = new EventEmitter();
|
|
571
|
+
this.resetTableSettings = new EventEmitter();
|
|
571
572
|
this.showFilterButton = false;
|
|
572
573
|
this.selectedColumns = new FormControl([]);
|
|
573
574
|
this.globalSearch = new FormControl('');
|
|
@@ -630,6 +631,9 @@ class MaterialTableCaptionComponent extends StSubscribeDestroyComponent {
|
|
|
630
631
|
this.emitCaptionDataChanged();
|
|
631
632
|
});
|
|
632
633
|
}
|
|
634
|
+
resetTable() {
|
|
635
|
+
this.resetTableSettings.emit(true);
|
|
636
|
+
}
|
|
633
637
|
emitCaptionDataChanged() {
|
|
634
638
|
this.captionDataChanged.emit({
|
|
635
639
|
selectedColumns: this.selectedColumns.value || [],
|
|
@@ -650,11 +654,11 @@ class MaterialTableCaptionComponent extends StSubscribeDestroyComponent {
|
|
|
650
654
|
filtersKeys.filter(key => this.filters[key]).length || 0;
|
|
651
655
|
}
|
|
652
656
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableCaptionComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
653
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: { globalSearchSettings: "globalSearchSettings", allowPickColumns: "allowPickColumns", allowReorderColumns: "allowReorderColumns", initGlobalSearch: "initGlobalSearch", initFilters: "initFilters", columns: "columns" }, outputs: { captionDataChanged: "captionDataChanged" }, usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"st-material-table-caption row align-items-center\"\r\n [ngClass]=\"{\r\n 'justify-content-between': allowPickColumns && globalSearchSettings?.show,\r\n 'justify-content-end': !allowPickColumns && globalSearchSettings?.show\r\n }\"\r\n>\r\n @if (allowPickColumns) {\r\n <div class=\"col-auto d-flex align-items-center\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-select [formControl]=\"selectedColumns\" multiple>\r\n <mat-select-trigger>\r\n {{ selectedColumns.value ? selectedColumns.value.length : 0 }}\r\n columns selected\r\n </mat-select-trigger>\r\n @for (column of columns; track column.field) {\r\n <mat-option [value]=\"column.field\">{{\r\n column.translateColumnName || column.field\r\n }}</mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n @if (allowReorderColumns) {\r\n <button mat-icon-button (click)=\"openReorderColumnsDialog()\">\r\n <mat-icon class=\"reorder-icon\">low_priority</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n @if (globalSearchSettings?.show) {\r\n <div class=\"col-auto d-flex align-items-center\">\r\n @if (showFilterButton) {\r\n <button mat-icon-button (click)=\"openFilterDialog()\">\r\n <mat-icon\r\n [matBadge]=\"activeFiltersCount\"\r\n [matBadgeHidden]=\"!activeFiltersCount\"\r\n [matBadgeSize]=\"'small'\"\r\n matBadgePosition=\"before\"\r\n >filter_alt</mat-icon\r\n >\r\n </button>\r\n }\r\n\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n [formControl]=\"globalSearch\"\r\n [placeholder]=\"globalSearchSettings?.label || 'Global Search'\"\r\n />\r\n <button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"globalSearch.setValue('')\"\r\n >\r\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".st-material-table-caption{width:100%;margin-top:5px}.st-material-table-caption .reorder-icon{transform:scaleX(-1) rotate(90deg)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i8$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i10$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
657
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: { globalSearchSettings: "globalSearchSettings", allowPickColumns: "allowPickColumns", allowReorderColumns: "allowReorderColumns", initGlobalSearch: "initGlobalSearch", initFilters: "initFilters", columns: "columns" }, outputs: { captionDataChanged: "captionDataChanged", resetTableSettings: "resetTableSettings" }, usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"st-material-table-caption row align-items-center\"\r\n [ngClass]=\"{\r\n 'justify-content-between': allowPickColumns && globalSearchSettings?.show,\r\n 'justify-content-end': !allowPickColumns && globalSearchSettings?.show\r\n }\"\r\n>\r\n @if (allowPickColumns) {\r\n <div class=\"col-auto d-flex align-items-center\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-select [formControl]=\"selectedColumns\" multiple>\r\n <mat-select-trigger>\r\n {{ selectedColumns.value ? selectedColumns.value.length : 0 }}\r\n columns selected\r\n </mat-select-trigger>\r\n @for (column of columns; track column.field) {\r\n <mat-option [value]=\"column.field\">{{\r\n column.translateColumnName || column.field\r\n }}</mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <button mat-icon-button (click)=\"resetTable()\">\r\n <mat-icon class=\"reorder-icon\">refresh</mat-icon>\r\n </button>\r\n\r\n @if (allowReorderColumns) {\r\n <button mat-icon-button (click)=\"openReorderColumnsDialog()\">\r\n <mat-icon class=\"reorder-icon\">low_priority</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n @if (globalSearchSettings?.show) {\r\n <div class=\"col-auto d-flex align-items-center\">\r\n @if (showFilterButton) {\r\n <button mat-icon-button (click)=\"openFilterDialog()\">\r\n <mat-icon\r\n [matBadge]=\"activeFiltersCount\"\r\n [matBadgeHidden]=\"!activeFiltersCount\"\r\n [matBadgeSize]=\"'small'\"\r\n matBadgePosition=\"before\"\r\n >filter_alt</mat-icon\r\n >\r\n </button>\r\n }\r\n\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n [formControl]=\"globalSearch\"\r\n [placeholder]=\"globalSearchSettings?.label || 'Global Search'\"\r\n />\r\n <button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"globalSearch.setValue('')\"\r\n >\r\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".st-material-table-caption{width:100%;margin-top:5px}.st-material-table-caption .reorder-icon{transform:scaleX(-1) rotate(90deg)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i8$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i10$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
654
658
|
}
|
|
655
659
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableCaptionComponent, decorators: [{
|
|
656
660
|
type: Component,
|
|
657
|
-
args: [{ selector: 'st-material-table-caption', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"st-material-table-caption row align-items-center\"\r\n [ngClass]=\"{\r\n 'justify-content-between': allowPickColumns && globalSearchSettings?.show,\r\n 'justify-content-end': !allowPickColumns && globalSearchSettings?.show\r\n }\"\r\n>\r\n @if (allowPickColumns) {\r\n <div class=\"col-auto d-flex align-items-center\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-select [formControl]=\"selectedColumns\" multiple>\r\n <mat-select-trigger>\r\n {{ selectedColumns.value ? selectedColumns.value.length : 0 }}\r\n columns selected\r\n </mat-select-trigger>\r\n @for (column of columns; track column.field) {\r\n <mat-option [value]=\"column.field\">{{\r\n column.translateColumnName || column.field\r\n }}</mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n @if (allowReorderColumns) {\r\n <button mat-icon-button (click)=\"openReorderColumnsDialog()\">\r\n <mat-icon class=\"reorder-icon\">low_priority</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n @if (globalSearchSettings?.show) {\r\n <div class=\"col-auto d-flex align-items-center\">\r\n @if (showFilterButton) {\r\n <button mat-icon-button (click)=\"openFilterDialog()\">\r\n <mat-icon\r\n [matBadge]=\"activeFiltersCount\"\r\n [matBadgeHidden]=\"!activeFiltersCount\"\r\n [matBadgeSize]=\"'small'\"\r\n matBadgePosition=\"before\"\r\n >filter_alt</mat-icon\r\n >\r\n </button>\r\n }\r\n\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n [formControl]=\"globalSearch\"\r\n [placeholder]=\"globalSearchSettings?.label || 'Global Search'\"\r\n />\r\n <button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"globalSearch.setValue('')\"\r\n >\r\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".st-material-table-caption{width:100%;margin-top:5px}.st-material-table-caption .reorder-icon{transform:scaleX(-1) rotate(90deg)}\n"] }]
|
|
661
|
+
args: [{ selector: 'st-material-table-caption', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n class=\"st-material-table-caption row align-items-center\"\r\n [ngClass]=\"{\r\n 'justify-content-between': allowPickColumns && globalSearchSettings?.show,\r\n 'justify-content-end': !allowPickColumns && globalSearchSettings?.show\r\n }\"\r\n>\r\n @if (allowPickColumns) {\r\n <div class=\"col-auto d-flex align-items-center\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-select [formControl]=\"selectedColumns\" multiple>\r\n <mat-select-trigger>\r\n {{ selectedColumns.value ? selectedColumns.value.length : 0 }}\r\n columns selected\r\n </mat-select-trigger>\r\n @for (column of columns; track column.field) {\r\n <mat-option [value]=\"column.field\">{{\r\n column.translateColumnName || column.field\r\n }}</mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <button mat-icon-button (click)=\"resetTable()\">\r\n <mat-icon class=\"reorder-icon\">refresh</mat-icon>\r\n </button>\r\n\r\n @if (allowReorderColumns) {\r\n <button mat-icon-button (click)=\"openReorderColumnsDialog()\">\r\n <mat-icon class=\"reorder-icon\">low_priority</mat-icon>\r\n </button>\r\n }\r\n </div>\r\n }\r\n\r\n @if (globalSearchSettings?.show) {\r\n <div class=\"col-auto d-flex align-items-center\">\r\n @if (showFilterButton) {\r\n <button mat-icon-button (click)=\"openFilterDialog()\">\r\n <mat-icon\r\n [matBadge]=\"activeFiltersCount\"\r\n [matBadgeHidden]=\"!activeFiltersCount\"\r\n [matBadgeSize]=\"'small'\"\r\n matBadgePosition=\"before\"\r\n >filter_alt</mat-icon\r\n >\r\n </button>\r\n }\r\n\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n [formControl]=\"globalSearch\"\r\n [placeholder]=\"globalSearchSettings?.label || 'Global Search'\"\r\n />\r\n <button\r\n matSuffix\r\n mat-icon-button\r\n aria-label=\"Clear\"\r\n (click)=\"globalSearch.setValue('')\"\r\n >\r\n <mat-icon style=\"font-size: 22px\">close</mat-icon>\r\n </button>\r\n </mat-form-field>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".st-material-table-caption{width:100%;margin-top:5px}.st-material-table-caption .reorder-icon{transform:scaleX(-1) rotate(90deg)}\n"] }]
|
|
658
662
|
}], ctorParameters: () => [{ type: i1.MatDialog }], propDecorators: { globalSearchSettings: [{
|
|
659
663
|
type: Input
|
|
660
664
|
}], allowPickColumns: [{
|
|
@@ -669,6 +673,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
669
673
|
type: Input
|
|
670
674
|
}], captionDataChanged: [{
|
|
671
675
|
type: Output
|
|
676
|
+
}], resetTableSettings: [{
|
|
677
|
+
type: Output
|
|
672
678
|
}] } });
|
|
673
679
|
|
|
674
680
|
class MaterialTableComponent extends StSubscribeDestroyComponent {
|
|
@@ -676,10 +682,10 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
|
|
|
676
682
|
this._data = data || [];
|
|
677
683
|
if (this.tableSource) {
|
|
678
684
|
this.tableSource.data = data;
|
|
679
|
-
if (!this.lazyLoading) {
|
|
680
|
-
this.paginator.pageIndex = this.pageIndex;
|
|
685
|
+
if (!this.lazyLoading && this.localStorageData) {
|
|
686
|
+
this.paginator.pageIndex = this.localStorageData.pageIndex;
|
|
681
687
|
//@ts-ignore
|
|
682
|
-
this.paginator._emitPageEvent(this.pageIndex);
|
|
688
|
+
this.paginator._emitPageEvent(this.localStorageData.pageIndex);
|
|
683
689
|
}
|
|
684
690
|
}
|
|
685
691
|
this.changeDetectorRef.markForCheck();
|
|
@@ -703,9 +709,9 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
|
|
|
703
709
|
this.columns = [];
|
|
704
710
|
this.selectedColumns = [];
|
|
705
711
|
this.selectedColumnsString = [];
|
|
706
|
-
this.pageIndex = 0;
|
|
707
712
|
this.initFilters = {};
|
|
708
713
|
this.initGlobalSearch = '';
|
|
714
|
+
this.showTable = true;
|
|
709
715
|
}
|
|
710
716
|
ngOnInit() {
|
|
711
717
|
this.loadLocalStorageData();
|
|
@@ -713,6 +719,7 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
|
|
|
713
719
|
}
|
|
714
720
|
ngAfterViewInit() {
|
|
715
721
|
this.setInitTable();
|
|
722
|
+
this.setSortPageSubscription();
|
|
716
723
|
}
|
|
717
724
|
captionDataChanged(event) {
|
|
718
725
|
console.log('captionDataChanged', event);
|
|
@@ -723,8 +730,8 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
|
|
|
723
730
|
}
|
|
724
731
|
this.localStorageData = {
|
|
725
732
|
...event,
|
|
726
|
-
pageSize: this.pageSize,
|
|
727
|
-
pageIndex: this.pageIndex,
|
|
733
|
+
pageSize: this.paginator.pageSize,
|
|
734
|
+
pageIndex: this.paginator.pageIndex,
|
|
728
735
|
sortField: this.sort.active,
|
|
729
736
|
sortOrder: this.sort.direction,
|
|
730
737
|
};
|
|
@@ -745,6 +752,22 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
|
|
|
745
752
|
return true;
|
|
746
753
|
}
|
|
747
754
|
}
|
|
755
|
+
resetTableSettings() {
|
|
756
|
+
this.showTable = false;
|
|
757
|
+
this.changeDetectorRef.markForCheck();
|
|
758
|
+
this.setNewEmptyLocalStorageData();
|
|
759
|
+
this.updateDataToLocalStorage();
|
|
760
|
+
this.emitLazyLoading();
|
|
761
|
+
this.initFilters = {};
|
|
762
|
+
this.initGlobalSearch = '';
|
|
763
|
+
this.sort.sort({ id: '', start: 'asc', disableClear: false });
|
|
764
|
+
setTimeout(() => {
|
|
765
|
+
this.showTable = true;
|
|
766
|
+
this.setDisplayedColumns();
|
|
767
|
+
this.setInitTable();
|
|
768
|
+
this.changeDetectorRef.markForCheck();
|
|
769
|
+
}, 100);
|
|
770
|
+
}
|
|
748
771
|
createCustomFilterForLocalTable() {
|
|
749
772
|
// let filterFunction = function (data: any, filter: string): boolean {
|
|
750
773
|
// let searchTerms = JSON.parse(filter);
|
|
@@ -804,13 +827,14 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
|
|
|
804
827
|
}
|
|
805
828
|
updateDataToLocalStorage() {
|
|
806
829
|
if (this.localStorageName) {
|
|
830
|
+
console.log('updateDataToLocalStorage', this.localStorageData);
|
|
807
831
|
localStorage.setItem(this.localStorageName, JSON.stringify(this.localStorageData));
|
|
808
832
|
}
|
|
809
833
|
}
|
|
810
834
|
setInitTable() {
|
|
811
835
|
this.tableSource = new MatTableDataSource(this._data);
|
|
812
|
-
this.paginator.pageSize = this.pageSize;
|
|
813
|
-
this.paginator.pageIndex = this.pageIndex;
|
|
836
|
+
this.paginator.pageSize = this.localStorageData.pageSize;
|
|
837
|
+
this.paginator.pageIndex = this.localStorageData.pageIndex;
|
|
814
838
|
if (this.localStorageData.sortField && this.localStorageData.sortOrder) {
|
|
815
839
|
const disableClear = false;
|
|
816
840
|
this.sort.sort({ id: '', start: 'asc', disableClear });
|
|
@@ -825,7 +849,11 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
|
|
|
825
849
|
this.tableSource.sort = this.sort;
|
|
826
850
|
}
|
|
827
851
|
this.emitLazyLoading();
|
|
828
|
-
|
|
852
|
+
}
|
|
853
|
+
setSortPageSubscription() {
|
|
854
|
+
this.sort.sortChange
|
|
855
|
+
.pipe(takeUntil(this.ngDestroyed$), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)))
|
|
856
|
+
.subscribe(res => {
|
|
829
857
|
this.localStorageData = {
|
|
830
858
|
...this.localStorageData,
|
|
831
859
|
sortField: res.active,
|
|
@@ -834,13 +862,13 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
|
|
|
834
862
|
this.updateDataToLocalStorage();
|
|
835
863
|
this.emitLazyLoading();
|
|
836
864
|
});
|
|
837
|
-
this.paginator.page
|
|
838
|
-
this.
|
|
839
|
-
|
|
865
|
+
this.paginator.page
|
|
866
|
+
.pipe(takeUntil(this.ngDestroyed$), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)))
|
|
867
|
+
.subscribe(res => {
|
|
840
868
|
this.localStorageData = {
|
|
841
869
|
...this.localStorageData,
|
|
842
|
-
pageIndex: this.pageIndex,
|
|
843
|
-
pageSize: this.pageSize,
|
|
870
|
+
pageIndex: this.paginator.pageIndex,
|
|
871
|
+
pageSize: this.paginator.pageSize,
|
|
844
872
|
};
|
|
845
873
|
this.updateDataToLocalStorage();
|
|
846
874
|
this.emitLazyLoading();
|
|
@@ -888,8 +916,6 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
|
|
|
888
916
|
const localStorageData = localStorage.getItem(this.localStorageName);
|
|
889
917
|
if (localStorageData) {
|
|
890
918
|
this.localStorageData = JSON.parse(localStorageData);
|
|
891
|
-
this.pageSize = this.localStorageData.pageSize || this.pageSize;
|
|
892
|
-
this.pageIndex = this.localStorageData.pageIndex || this.pageIndex;
|
|
893
919
|
this.initFilters = this.localStorageData.filters || {};
|
|
894
920
|
this.initGlobalSearch = this.localStorageData.globalSearch;
|
|
895
921
|
}
|
|
@@ -904,21 +930,21 @@ class MaterialTableComponent extends StSubscribeDestroyComponent {
|
|
|
904
930
|
setNewEmptyLocalStorageData() {
|
|
905
931
|
this.localStorageData = {
|
|
906
932
|
pageSize: this.pageSize,
|
|
907
|
-
pageIndex:
|
|
908
|
-
selectedColumns:
|
|
933
|
+
pageIndex: 0,
|
|
934
|
+
selectedColumns: this.initColumns.map(col => col.field),
|
|
909
935
|
globalSearch: '',
|
|
910
|
-
columnsOrder:
|
|
936
|
+
columnsOrder: this.initColumns.map(col => col.field),
|
|
911
937
|
filters: {},
|
|
912
938
|
sortField: '',
|
|
913
939
|
sortOrder: 'asc',
|
|
914
940
|
};
|
|
915
941
|
}
|
|
916
942
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
917
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableComponent, selector: "ngx-st-material-table", inputs: { tableSettings: "tableSettings", globalSearchSettings: "globalSearchSettings", pageSize: "pageSize", dataLength: "dataLength", allowPickColumns: "allowPickColumns", allowReorderColumns: "allowReorderColumns", localStorageName: "localStorageName", lazyLoading: "lazyLoading", isLoading: "isLoading", initColumns: "initColumns", data: "data" }, outputs: { loadData: "loadData" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"st-material-table\">\n @if (isLoading) {\n <div class=\"loading-spinner\">\n <mat-spinner color=\"accent\"></mat-spinner>\n </div>\n }\n\n <st-material-table-caption\n [allowPickColumns]=\"allowPickColumns\"\n [globalSearchSettings]=\"globalSearchSettings\"\n [columns]=\"columns\"\n [initFilters]=\"initFilters\"\n [initGlobalSearch]=\"initGlobalSearch\"\n (captionDataChanged)=\"captionDataChanged($event)\"\n ></st-material-table-caption>\n\n <table\n [ngClass]=\"{ 'no-hover': !tableSettings?.rowClickAction }\"\n mat-table\n [dataSource]=\"tableSource\"\n matSort\n >\n @for (column of selectedColumns; track column) {\n <ng-container [matColumnDef]=\"column.field\">\n <th\n mat-header-cell\n *matHeaderCellDef\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\n mat-sort-header\n [disabled]=\"!column.sort\"\n >\n {{ column.translateColumnName }}\n </th>\n <td\n mat-cell\n *matCellDef=\"let element\"\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\n >\n @if (column.actions && column.actions!.length > 0) {\n <div\n class=\"actions-container\"\n style=\"overflow-y: hidden\"\n [ngClass]=\"{ 'justify-content-end': column.flexRight }\"\n >\n @for (action of column.actions; track action) {\n @if (checkIfActionVisible(element, action)) {\n @if (!action.url && action.action) {\n <button\n style=\"padding: 7px 7px; width: 40px; height: 40px\"\n class=\"col-auto\"\n mat-icon-button\n type=\"button\"\n matTooltip=\"{{ action.tooltipName || '' }}\"\n [matTooltipDisabled]=\"!action.tooltipName\"\n (click)=\"action.action(element)\"\n >\n <mat-icon>{{ action.iconName }}</mat-icon>\n </button>\n }\n @if (action.url) {\n <a [routerLink]=\"action.url\">\n <button\n class=\"col-auto\"\n mat-icon-button\n type=\"button\"\n matTooltip=\"{{ action.tooltipName || '' }}\"\n [matTooltipDisabled]=\"!action.tooltipName\"\n >\n <mat-icon>{{ action.iconName }}</mat-icon>\n </button>\n </a>\n }\n }\n }\n </div>\n }\n @if (!column.actions) {\n @if (column.translateValue) {\n <p style=\"margin: 0; padding: 0\">\n {{ column.translateValue![element[column.field]] || '' }}\n </p>\n }\n @if (!column.translateValue) {\n @if (!column.type || column.type === 'string') {\n <p style=\"margin: 0; padding: 0\">{{ element[column.field] }}</p>\n }\n @if (column.type === 'date') {\n <p style=\"margin: 0; padding: 0\">\n {{ element[column.field] | stDateTimeFormatPipe }}\n </p>\n }\n }\n }\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: selectedColumnsString\"\n (click)=\"\n tableSettings?.rowClickAction ? tableSettings.rowClickAction(row) : null\n \"\n ></tr>\n </table>\n <mat-paginator\n [showFirstLastButtons]=\"true\"\n [pageIndex]=\"pageIndex\"\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\n [length]=\"dataLength\"\n ></mat-paginator>\n</div>\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;align-items:center;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:2rem}\n", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a mat-icon{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr.active td{border-bottom-color:#0000001f!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover td{border-bottom-color:#0000001f!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: ["globalSearchSettings", "allowPickColumns", "allowReorderColumns", "initGlobalSearch", "initFilters", "columns"], outputs: ["captionDataChanged"] }, { kind: "pipe", type: i16.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
943
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: MaterialTableComponent, selector: "ngx-st-material-table", inputs: { tableSettings: "tableSettings", globalSearchSettings: "globalSearchSettings", pageSize: "pageSize", dataLength: "dataLength", allowPickColumns: "allowPickColumns", allowReorderColumns: "allowReorderColumns", localStorageName: "localStorageName", lazyLoading: "lazyLoading", isLoading: "isLoading", initColumns: "initColumns", data: "data" }, outputs: { loadData: "loadData" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"st-material-table\">\n @if (isLoading) {\n <div class=\"loading-spinner\">\n <mat-spinner color=\"accent\"></mat-spinner>\n </div>\n }\n\n @if (showTable) {\n <st-material-table-caption\n [allowPickColumns]=\"allowPickColumns\"\n [globalSearchSettings]=\"globalSearchSettings\"\n [columns]=\"columns\"\n [initFilters]=\"initFilters\"\n [initGlobalSearch]=\"initGlobalSearch\"\n (captionDataChanged)=\"captionDataChanged($event)\"\n (resetTableSettings)=\"resetTableSettings()\"\n ></st-material-table-caption>\n }\n\n <table\n [ngClass]=\"{ 'no-hover': !tableSettings?.rowClickAction }\"\n mat-table\n [dataSource]=\"tableSource\"\n matSort\n >\n @for (column of selectedColumns; track column) {\n <ng-container [matColumnDef]=\"column.field\">\n <th\n mat-header-cell\n *matHeaderCellDef\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\n mat-sort-header\n [disabled]=\"!column.sort\"\n >\n {{ column.translateColumnName }}\n </th>\n <td\n mat-cell\n *matCellDef=\"let element\"\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\n >\n @if (column.actions && column.actions!.length > 0) {\n <div\n class=\"actions-container\"\n style=\"overflow-y: hidden\"\n [ngClass]=\"{ 'justify-content-end': column.flexRight }\"\n >\n @for (action of column.actions; track action) {\n @if (checkIfActionVisible(element, action)) {\n @if (!action.url && action.action) {\n <button\n style=\"padding: 7px 7px; width: 40px; height: 40px\"\n class=\"col-auto\"\n mat-icon-button\n type=\"button\"\n matTooltip=\"{{ action.tooltipName || '' }}\"\n [matTooltipDisabled]=\"!action.tooltipName\"\n (click)=\"action.action(element)\"\n >\n <mat-icon>{{ action.iconName }}</mat-icon>\n </button>\n }\n @if (action.url) {\n <a [routerLink]=\"action.url\">\n <button\n class=\"col-auto\"\n mat-icon-button\n type=\"button\"\n matTooltip=\"{{ action.tooltipName || '' }}\"\n [matTooltipDisabled]=\"!action.tooltipName\"\n >\n <mat-icon>{{ action.iconName }}</mat-icon>\n </button>\n </a>\n }\n }\n }\n </div>\n }\n @if (!column.actions) {\n @if (column.translateValue) {\n <p style=\"margin: 0; padding: 0\">\n {{ column.translateValue![element[column.field]] || '' }}\n </p>\n }\n @if (!column.translateValue) {\n @if (!column.type || column.type === 'string') {\n <p style=\"margin: 0; padding: 0\">{{ element[column.field] }}</p>\n }\n @if (column.type === 'date') {\n <p style=\"margin: 0; padding: 0\">\n {{ element[column.field] | stDateTimeFormatPipe }}\n </p>\n }\n }\n }\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: selectedColumnsString\"\n (click)=\"\n tableSettings?.rowClickAction ? tableSettings.rowClickAction(row) : null\n \"\n ></tr>\n </table>\n <mat-paginator\n [showFirstLastButtons]=\"true\"\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\n [length]=\"dataLength\"\n ></mat-paginator>\n</div>\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;align-items:center;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:2rem}\n", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a mat-icon{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr.active td{border-bottom-color:#0000001f!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover td{border-bottom-color:#0000001f!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i6$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i12.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MaterialTableCaptionComponent, selector: "st-material-table-caption", inputs: ["globalSearchSettings", "allowPickColumns", "allowReorderColumns", "initGlobalSearch", "initFilters", "columns"], outputs: ["captionDataChanged", "resetTableSettings"] }, { kind: "pipe", type: i16.DateTimeFormatPipe, name: "stDateTimeFormatPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
918
944
|
}
|
|
919
945
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MaterialTableComponent, decorators: [{
|
|
920
946
|
type: Component,
|
|
921
|
-
args: [{ selector: 'ngx-st-material-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"st-material-table\">\n @if (isLoading) {\n <div class=\"loading-spinner\">\n <mat-spinner color=\"accent\"></mat-spinner>\n </div>\n }\n\n <st-material-table-caption\n
|
|
947
|
+
args: [{ selector: 'ngx-st-material-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"st-material-table\">\n @if (isLoading) {\n <div class=\"loading-spinner\">\n <mat-spinner color=\"accent\"></mat-spinner>\n </div>\n }\n\n @if (showTable) {\n <st-material-table-caption\n [allowPickColumns]=\"allowPickColumns\"\n [globalSearchSettings]=\"globalSearchSettings\"\n [columns]=\"columns\"\n [initFilters]=\"initFilters\"\n [initGlobalSearch]=\"initGlobalSearch\"\n (captionDataChanged)=\"captionDataChanged($event)\"\n (resetTableSettings)=\"resetTableSettings()\"\n ></st-material-table-caption>\n }\n\n <table\n [ngClass]=\"{ 'no-hover': !tableSettings?.rowClickAction }\"\n mat-table\n [dataSource]=\"tableSource\"\n matSort\n >\n @for (column of selectedColumns; track column) {\n <ng-container [matColumnDef]=\"column.field\">\n <th\n mat-header-cell\n *matHeaderCellDef\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\n mat-sort-header\n [disabled]=\"!column.sort\"\n >\n {{ column.translateColumnName }}\n </th>\n <td\n mat-cell\n *matCellDef=\"let element\"\n style=\"{{ column.width ? 'width:' + column.width : '' }}\"\n >\n @if (column.actions && column.actions!.length > 0) {\n <div\n class=\"actions-container\"\n style=\"overflow-y: hidden\"\n [ngClass]=\"{ 'justify-content-end': column.flexRight }\"\n >\n @for (action of column.actions; track action) {\n @if (checkIfActionVisible(element, action)) {\n @if (!action.url && action.action) {\n <button\n style=\"padding: 7px 7px; width: 40px; height: 40px\"\n class=\"col-auto\"\n mat-icon-button\n type=\"button\"\n matTooltip=\"{{ action.tooltipName || '' }}\"\n [matTooltipDisabled]=\"!action.tooltipName\"\n (click)=\"action.action(element)\"\n >\n <mat-icon>{{ action.iconName }}</mat-icon>\n </button>\n }\n @if (action.url) {\n <a [routerLink]=\"action.url\">\n <button\n class=\"col-auto\"\n mat-icon-button\n type=\"button\"\n matTooltip=\"{{ action.tooltipName || '' }}\"\n [matTooltipDisabled]=\"!action.tooltipName\"\n >\n <mat-icon>{{ action.iconName }}</mat-icon>\n </button>\n </a>\n }\n }\n }\n </div>\n }\n @if (!column.actions) {\n @if (column.translateValue) {\n <p style=\"margin: 0; padding: 0\">\n {{ column.translateValue![element[column.field]] || '' }}\n </p>\n }\n @if (!column.translateValue) {\n @if (!column.type || column.type === 'string') {\n <p style=\"margin: 0; padding: 0\">{{ element[column.field] }}</p>\n }\n @if (column.type === 'date') {\n <p style=\"margin: 0; padding: 0\">\n {{ element[column.field] | stDateTimeFormatPipe }}\n </p>\n }\n }\n }\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"selectedColumnsString\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: selectedColumnsString\"\n (click)=\"\n tableSettings?.rowClickAction ? tableSettings.rowClickAction(row) : null\n \"\n ></tr>\n </table>\n <mat-paginator\n [showFirstLastButtons]=\"true\"\n [pageSizeOptions]=\"[5, 10, 15, 20, 25]\"\n [length]=\"dataLength\"\n ></mat-paginator>\n</div>\n", styles: [".st-material-table{position:relative}.st-material-table .loading-spinner{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000026;z-index:1;display:flex;align-items:center;justify-content:center}.st-material-table .loading-spinner mat-spinner{margin-top:2rem}\n", ".search-form button{height:40px}.search-form mat-form-field:first-child{padding-left:0}.search-form mat-form-field:last-child{padding-right:0}.search-form .clear{padding:0}.search-form .clear mat-icon{height:20px;width:20px;font-size:20px;cursor:pointer}table{width:100%;box-shadow:none}table th.mat-mdc-header-cell,table td.mat-mdc-cell,table td.mat-mdc-footer-cell{padding:0}table th.mat-mdc-header-cell:first-of-type,table td.mat-mdc-cell:first-of-type,table td.mat-mdc-footer-cell:first-of-type{padding-left:12px}table th.mat-mdc-header-cell:last-of-type,table td.mat-mdc-cell:last-of-type,table td.mat-mdc-footer-cell:last-of-type{padding-right:12px}table::ng-deep thead tr{background-color:#fff9c4;height:40px!important}table::ng-deep thead tr th{border-color:#fdd835;color:#0000008a;font-size:12px}table::ng-deep tbody>tr{cursor:pointer}table::ng-deep tbody>tr.active{background-color:#a5d6a7}table::ng-deep tbody>tr.active td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr:hover{background-color:#a5d6a7!important}table::ng-deep tbody>tr:hover td{border-bottom-color:#81c784!important}table::ng-deep tbody>tr.disabled{cursor:not-allowed}table::ng-deep tbody>tr.disabled:hover{background-color:inherit!important}table::ng-deep tbody>tr.detail-row{height:0;cursor:default}table::ng-deep tbody>tr.detail-row:hover{background-color:transparent}table::ng-deep tbody>tr.detail-row .element-detail{overflow:hidden;display:flex}table::ng-deep tbody>tr.detail-row .element-detail p{padding:20px 0;margin-bottom:0;white-space:pre-wrap}table::ng-deep tbody>tr td i.active-row{color:#1b5e20;font-weight:700;font-size:25px;height:25px;width:25px;margin-top:2px}table::ng-deep tbody>tr td>div{max-height:200px;overflow:hidden;overflow-y:auto}table::ng-deep tbody>tr td a button{color:#000}table::ng-deep tbody>tr td a mat-icon{color:#333}table::ng-deep .mat-column-active{width:48px}table.no-hover::ng-deep tbody tr{cursor:default}table.no-hover::ng-deep tbody tr.active{background-color:transparent!important}table.no-hover::ng-deep tbody tr.active td{border-bottom-color:#0000001f!important}table.no-hover::ng-deep tbody tr:hover{background-color:transparent!important}table.no-hover::ng-deep tbody tr:hover td{border-bottom-color:#0000001f!important}table.admin-table::ng-deep .actions-cell{width:100px}\n"] }]
|
|
922
948
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { paginator: [{
|
|
923
949
|
type: ViewChild,
|
|
924
950
|
args: [MatPaginator]
|