@den4ik92/ng2-smart-table 19.5.46 → 19.5.51
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/fesm2022/den4ik92-ng2-smart-table.mjs +94 -38
- package/fesm2022/den4ik92-ng2-smart-table.mjs.map +1 -1
- package/lib/components/cell/cell-view-mode/custom-view.component.d.ts +4 -0
- package/lib/components/thead/cells/title/title.component.d.ts +4 -4
- package/lib/components/thead/rows/thead-titles-row.component.d.ts +3 -1
- package/lib/components/thead/thead.component.d.ts +4 -1
- package/lib/lib/data-set/column.d.ts +3 -1
- package/lib/lib/data-source/data-source.d.ts +3 -3
- package/lib/lib/data-source/server/server.data-source.d.ts +1 -1
- package/lib/lib/interfaces/smart-table.models.d.ts +12 -2
- package/package.json +1 -1
|
@@ -395,6 +395,7 @@ class Column {
|
|
|
395
395
|
this.isFilterable = false;
|
|
396
396
|
this.editor = false;
|
|
397
397
|
this.filter = false;
|
|
398
|
+
this.renderComponentInputs = {};
|
|
398
399
|
this.editorInputClass = dataSet.editorInputClass;
|
|
399
400
|
this.title = settings.title;
|
|
400
401
|
this.class = settings.class || '';
|
|
@@ -410,6 +411,9 @@ class Column {
|
|
|
410
411
|
if (settings.type === 'custom' && settings.renderComponent) {
|
|
411
412
|
this.renderComponent = settings.renderComponent;
|
|
412
413
|
}
|
|
414
|
+
if (settings.type === 'custom' && settings.renderComponentInputs) {
|
|
415
|
+
this.renderComponentInputs = settings.renderComponentInputs;
|
|
416
|
+
}
|
|
413
417
|
this.isFilterable = !!settings['filter'];
|
|
414
418
|
this.isSortable = settings.sort ?? false;
|
|
415
419
|
this.isEditable = settings.editable ?? true;
|
|
@@ -484,7 +488,7 @@ var SmartTableOnChangedEventName;
|
|
|
484
488
|
class DataSource {
|
|
485
489
|
constructor() {
|
|
486
490
|
this.onChangedSource = new Subject();
|
|
487
|
-
this.sortConf = signal(
|
|
491
|
+
this.sortConf = signal(null);
|
|
488
492
|
this.filters = signal([]);
|
|
489
493
|
this.pagingConf = signal({
|
|
490
494
|
page: 1,
|
|
@@ -670,11 +674,15 @@ class LocalDataSource extends DataSource {
|
|
|
670
674
|
this.filteredAndSorted = computed(() => {
|
|
671
675
|
let list = this.data().slice(0);
|
|
672
676
|
const filters = this.filters();
|
|
677
|
+
const sortConf = this.sortConf();
|
|
673
678
|
if (filters.length) {
|
|
674
679
|
list = list.filter((element) => isElementSatisfied(element, filters));
|
|
675
680
|
}
|
|
676
|
-
if (
|
|
677
|
-
const { field, direction, compare } =
|
|
681
|
+
if (sortConf) {
|
|
682
|
+
const { field, direction, compare } = sortConf;
|
|
683
|
+
if (!field) {
|
|
684
|
+
return list;
|
|
685
|
+
}
|
|
678
686
|
list = localSort(list, field, direction, compare);
|
|
679
687
|
}
|
|
680
688
|
return list;
|
|
@@ -1093,23 +1101,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
1093
1101
|
class CustomViewComponent {
|
|
1094
1102
|
constructor() {
|
|
1095
1103
|
this.cell = input.required();
|
|
1104
|
+
this.inputs = computed(() => ({
|
|
1105
|
+
rowData: this.cell().row.rowData(),
|
|
1106
|
+
value: this.cell().getValue(),
|
|
1107
|
+
...this.cell().column.renderComponentInputs,
|
|
1108
|
+
}));
|
|
1096
1109
|
}
|
|
1097
1110
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1098
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: CustomViewComponent, isStandalone: true, selector: "ng2-custom-view-component", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<ng-template
|
|
1099
|
-
*ngComponentOutlet="
|
|
1100
|
-
cell().column.renderComponent;
|
|
1101
|
-
inputs: { rowData: cell().row.rowData(), value: cell().getValue() }
|
|
1102
|
-
"></ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1111
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.3", type: CustomViewComponent, isStandalone: true, selector: "ng2-custom-view-component", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<ng-template *ngComponentOutlet="cell().column.renderComponent!; inputs: inputs()"></ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1103
1112
|
}
|
|
1104
1113
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: CustomViewComponent, decorators: [{
|
|
1105
1114
|
type: Component,
|
|
1106
1115
|
args: [{
|
|
1107
1116
|
selector: 'ng2-custom-view-component',
|
|
1108
|
-
template: `<ng-template
|
|
1109
|
-
*ngComponentOutlet="
|
|
1110
|
-
cell().column.renderComponent;
|
|
1111
|
-
inputs: { rowData: cell().row.rowData(), value: cell().getValue() }
|
|
1112
|
-
"></ng-template>`,
|
|
1117
|
+
template: `<ng-template *ngComponentOutlet="cell().column.renderComponent!; inputs: inputs()"></ng-template>`,
|
|
1113
1118
|
imports: [NgComponentOutlet],
|
|
1114
1119
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1115
1120
|
}]
|
|
@@ -1438,11 +1443,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
1438
1443
|
|
|
1439
1444
|
class ColumnTitleComponent {
|
|
1440
1445
|
constructor() {
|
|
1441
|
-
this.
|
|
1446
|
+
this.currentSort = input.required();
|
|
1442
1447
|
this.column = input.required();
|
|
1448
|
+
this.sortEmit = output();
|
|
1443
1449
|
this.currentSortDirection = computed(() => {
|
|
1444
|
-
const
|
|
1445
|
-
|
|
1450
|
+
const sort = this.currentSort();
|
|
1451
|
+
if (!sort) {
|
|
1452
|
+
return null;
|
|
1453
|
+
}
|
|
1454
|
+
const { field, direction, title } = sort;
|
|
1455
|
+
return this.column().id === field && this.column().title === title ? direction : null;
|
|
1446
1456
|
});
|
|
1447
1457
|
this.currentSortDirectionSymbol = computed(() => {
|
|
1448
1458
|
return !this.currentSortDirection() ? '' : this.currentSortDirection() === 'asc' ? '↑' : '↓';
|
|
@@ -1450,16 +1460,17 @@ class ColumnTitleComponent {
|
|
|
1450
1460
|
}
|
|
1451
1461
|
_sort(event) {
|
|
1452
1462
|
event.preventDefault();
|
|
1453
|
-
|
|
1454
|
-
this.
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1463
|
+
this.sortEmit.emit();
|
|
1464
|
+
// const { id: field, title } = this.column();
|
|
1465
|
+
// this.source().setSort({
|
|
1466
|
+
// field,
|
|
1467
|
+
// title,
|
|
1468
|
+
// direction: this.currentSortDirection() === 'desc' ? 'asc' : 'desc',
|
|
1469
|
+
// compare: this.column().compareFunction,
|
|
1470
|
+
// });
|
|
1460
1471
|
}
|
|
1461
1472
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1462
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ColumnTitleComponent, isStandalone: true, selector: "ng2-st-column-title", inputs: {
|
|
1473
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ColumnTitleComponent, isStandalone: true, selector: "ng2-st-column-title", inputs: { currentSort: { classPropertyName: "currentSort", publicName: "currentSort", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { sortEmit: "sortEmit" }, ngImport: i0, template: `
|
|
1463
1474
|
@if (column().isSortable) {
|
|
1464
1475
|
<a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort">
|
|
1465
1476
|
{{ column().title }}
|
|
@@ -1974,10 +1985,11 @@ class TheadTitlesRowComponent {
|
|
|
1974
1985
|
constructor() {
|
|
1975
1986
|
this.grid = input.required();
|
|
1976
1987
|
this.source = input.required();
|
|
1988
|
+
this.sortEmit = output();
|
|
1977
1989
|
this.selectAllRows = output();
|
|
1978
1990
|
}
|
|
1979
1991
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadTitlesRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1980
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadTitlesRowComponent, isStandalone: true, selector: "[ng2-st-thead-titles-row]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectAllRows: "selectAllRows" }, ngImport: i0, template: `
|
|
1992
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadTitlesRowComponent, isStandalone: true, selector: "[ng2-st-thead-titles-row]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { sortEmit: "sortEmit", selectAllRows: "selectAllRows" }, ngImport: i0, template: `
|
|
1981
1993
|
@if (grid().isMultiSelectVisible()) {
|
|
1982
1994
|
<th ng2-st-checkbox-select-all [grid]="grid()" (click)="selectAllRows.emit()"></th>
|
|
1983
1995
|
}
|
|
@@ -1986,13 +1998,16 @@ class TheadTitlesRowComponent {
|
|
|
1986
1998
|
}
|
|
1987
1999
|
@for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
|
|
1988
2000
|
<th class="ng2-smart-th {{ column.id }}" [class]="column.class">
|
|
1989
|
-
<ng2-st-column-title
|
|
2001
|
+
<ng2-st-column-title
|
|
2002
|
+
[currentSort]="source().getSort()"
|
|
2003
|
+
[column]="column"
|
|
2004
|
+
(sortEmit)="sortEmit.emit(column)"></ng2-st-column-title>
|
|
1990
2005
|
</th>
|
|
1991
2006
|
}
|
|
1992
2007
|
@if (grid().actionIsOnRight() && grid().isActionsVisible()) {
|
|
1993
2008
|
<th ng2-st-actions-title [grid]="grid()"></th>
|
|
1994
2009
|
}
|
|
1995
|
-
`, isInline: true, dependencies: [{ kind: "component", type: CheckboxSelectAllComponent, selector: "[ng2-st-checkbox-select-all]", inputs: ["grid"] }, { kind: "component", type: ActionsTitleComponent, selector: "[ng2-st-actions-title]", inputs: ["grid"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["
|
|
2010
|
+
`, isInline: true, dependencies: [{ kind: "component", type: CheckboxSelectAllComponent, selector: "[ng2-st-checkbox-select-all]", inputs: ["grid"] }, { kind: "component", type: ActionsTitleComponent, selector: "[ng2-st-actions-title]", inputs: ["grid"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["currentSort", "column"], outputs: ["sortEmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1996
2011
|
}
|
|
1997
2012
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadTitlesRowComponent, decorators: [{
|
|
1998
2013
|
type: Component,
|
|
@@ -2007,7 +2022,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
2007
2022
|
}
|
|
2008
2023
|
@for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
|
|
2009
2024
|
<th class="ng2-smart-th {{ column.id }}" [class]="column.class">
|
|
2010
|
-
<ng2-st-column-title
|
|
2025
|
+
<ng2-st-column-title
|
|
2026
|
+
[currentSort]="source().getSort()"
|
|
2027
|
+
[column]="column"
|
|
2028
|
+
(sortEmit)="sortEmit.emit(column)"></ng2-st-column-title>
|
|
2011
2029
|
</th>
|
|
2012
2030
|
}
|
|
2013
2031
|
@if (grid().actionIsOnRight() && grid().isActionsVisible()) {
|
|
@@ -2048,23 +2066,61 @@ class Ng2SmartTableTheadComponent {
|
|
|
2048
2066
|
}
|
|
2049
2067
|
return filterOptions.inputClass || '';
|
|
2050
2068
|
});
|
|
2069
|
+
this.lastColumnSort = null;
|
|
2051
2070
|
}
|
|
2052
2071
|
toggleDropdown(state) {
|
|
2053
2072
|
this.filterDropdownIsOpen.update((value) => state ?? !value);
|
|
2054
2073
|
}
|
|
2055
2074
|
sortByColumn(column) {
|
|
2056
2075
|
const sort = this.currentSortConfig();
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
direction
|
|
2063
|
-
|
|
2076
|
+
if (!column && !sort) {
|
|
2077
|
+
return;
|
|
2078
|
+
}
|
|
2079
|
+
let newSort = null;
|
|
2080
|
+
if (column) {
|
|
2081
|
+
let direction = 'asc';
|
|
2082
|
+
if (sort && sort.field === column.id && sort.title === column.title) {
|
|
2083
|
+
direction = sort.direction === 'asc' ? 'desc' : 'asc';
|
|
2084
|
+
}
|
|
2085
|
+
newSort = {
|
|
2086
|
+
field: column.id,
|
|
2087
|
+
title: column.title,
|
|
2088
|
+
direction: direction,
|
|
2089
|
+
};
|
|
2090
|
+
}
|
|
2091
|
+
else if (sort) {
|
|
2092
|
+
newSort = {
|
|
2093
|
+
field: sort.field,
|
|
2094
|
+
title: sort.title,
|
|
2095
|
+
direction: sort.direction === 'asc' ? 'desc' : 'asc',
|
|
2096
|
+
};
|
|
2097
|
+
}
|
|
2098
|
+
this.source().setSort(this.getPrepareSort(newSort));
|
|
2064
2099
|
this.filterDropdownIsOpen.set(false);
|
|
2065
2100
|
}
|
|
2101
|
+
getPrepareSort(newSort) {
|
|
2102
|
+
if (!this.grid().settings().resetSortOnThirdClick) {
|
|
2103
|
+
return newSort;
|
|
2104
|
+
}
|
|
2105
|
+
if (!newSort) {
|
|
2106
|
+
this.lastColumnSort = null;
|
|
2107
|
+
return null;
|
|
2108
|
+
}
|
|
2109
|
+
if (!this.lastColumnSort ||
|
|
2110
|
+
newSort.field !== this.lastColumnSort.field ||
|
|
2111
|
+
newSort.title !== this.lastColumnSort.title) {
|
|
2112
|
+
this.lastColumnSort = { ...newSort, count: 1 };
|
|
2113
|
+
return newSort;
|
|
2114
|
+
}
|
|
2115
|
+
if (this.lastColumnSort.count === 2) {
|
|
2116
|
+
this.lastColumnSort = null;
|
|
2117
|
+
return null;
|
|
2118
|
+
}
|
|
2119
|
+
this.lastColumnSort.count++;
|
|
2120
|
+
return newSort;
|
|
2121
|
+
}
|
|
2066
2122
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2067
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableTheadComponent, isStandalone: true, selector: "[ng2-st-thead]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectAllRows: "selectAllRows", create: "create" }, ngImport: i0, template: "@if (isMobileView()) {\n <tr class=\"ng2-smart-titles mobile-header mobile-header-top-row\">\n <th colspan=\"50\">\n <div class=\"mobile-header-content\">\n <div ng2-st-add-button [grid]=\"grid()\" (create)=\"create.emit($event)\"></div>\n @if (columnsWithSortLength()) {\n <div class=\"current-column-title\">\n <a href=\"#\" (click)=\"$event.preventDefault(); sortByColumn()\" class=\"ng2-smart-sort-link sort\">\n
|
|
2123
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableTheadComponent, isStandalone: true, selector: "[ng2-st-thead]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectAllRows: "selectAllRows", create: "create" }, ngImport: i0, template: "@if (isMobileView()) {\n <tr class=\"ng2-smart-titles mobile-header mobile-header-top-row\">\n <th colspan=\"50\">\n <div class=\"mobile-header-content\">\n <div ng2-st-add-button [grid]=\"grid()\" (create)=\"create.emit($event)\"></div>\n @if (columnsWithSortLength()) {\n <div class=\"current-column-title\">\n @if (currentSortConfig(); as sortConfig) {\n <a href=\"#\" (click)=\"$event.preventDefault(); sortByColumn()\" class=\"ng2-smart-sort-link sort\">\n {{ sortConfig.title }}\n <span class=\"sort-direction\">{{ sortConfig.direction === 'asc' ? '\u2191' : '\u2193' }}</span>\n </a>\n }\n\n @if (columnsWithSortLength() > 1) {\n <button\n #sortTrigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n class=\"sort-dropdown-toggle-button\"\n (click)=\"toggleDropdown()\"\n [class.active]=\"filterDropdownIsOpen()\"\n aria-label=\"Toggle sort options\">\n <span class=\"sort-icon\">\u25BC</span>\n </button>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"sortTrigger\"\n [cdkConnectedOverlayOpen]=\"filterDropdownIsOpen()\"\n [cdkConnectedOverlayWidth]=\"300\"\n [cdkConnectedOverlayPositions]=\"[\n {\n originX: 'center',\n originY: 'bottom',\n overlayX: 'center',\n overlayY: 'top',\n },\n ]\"\n (overlayOutsideClick)=\"toggleDropdown(false)\">\n <div class=\"dropdown\">\n <div class=\"dropdown-header\">\n <p></p>\n <button\n type=\"button\"\n class=\"close-dialog-button\"\n (click)=\"toggleDropdown(false)\"\n aria-label=\"Close filters\">\n <span></span>\n </button>\n </div>\n <div class=\"dropdown-content\">\n @for (column of columnsWithSort(); track $index) {\n <th class=\"titles\">\n <ng2-st-column-title\n class=\"sort-option\"\n [column]=\"column\"\n (sortEmit)=\"sortByColumn(column)\"\n [currentSort]=\"currentSortConfig()\"></ng2-st-column-title>\n </th>\n }\n </div>\n </div>\n </ng-template>\n }\n </div>\n }\n\n <div class=\"header-actions\">\n @if (columnsWithFiltersLength()) {\n <ng2-mobile-filters [grid]=\"grid()\" [source]=\"source()\" [filterInputClass]=\"filterInputClass()\">\n </ng2-mobile-filters>\n }\n </div>\n </div>\n </th>\n </tr>\n} @else {\n <!-- Desktop view header -->\n @if (!isHideHeader()) {\n <tr\n ng2-st-thead-titles-row\n class=\"ng2-smart-titles\"\n [grid]=\"grid()\"\n [source]=\"source()\"\n (sortEmit)=\"sortByColumn($event)\"\n (selectAllRows)=\"selectAllRows.emit()\"></tr>\n }\n\n @if (!isHideSubHeader()) {\n <ng-container [ngTemplateOutlet]=\"filtersRow\"></ng-container>\n }\n}\n\n<ng-template #filtersRow>\n <tr\n ng2-st-thead-filters-row\n class=\"ng2-smart-filters\"\n [grid]=\"grid()\"\n [inputClass]=\"filterInputClass()\"\n [withoutCreateButton]=\"isMobileView()\"\n [source]=\"source()\"\n (create)=\"create.emit()\"></tr>\n</ng-template>\n", styles: ["tr.mobile-header-top-row .mobile-header-content{display:flex;align-items:center;justify-content:space-between}tr.mobile-header-top-row .mobile-header-content .current-column-title{font-weight:700;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button{transition:transform .2s ease}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button.active{transform:rotate(180deg)}.dropdown{z-index:1;padding:.8rem 1rem;border:none;border-radius:.5rem;background:var(--smart-table-bg, #fff);box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto}.dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.dropdown-content{display:flex;flex-direction:column}.dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}.dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}.close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}.close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}.close-dialog-button:after,.close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}.close-dialog-button:before{rotate:45deg}.close-dialog-button:after{position:absolute;rotate:-45deg}\n"], dependencies: [{ kind: "component", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: ["grid", "source"], outputs: ["sortEmit", "selectAllRows"] }, { kind: "component", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: ["grid"], outputs: ["create"] }, { kind: "component", type: MobileFiltersComponent, selector: "ng2-mobile-filters", inputs: ["grid", "source", "filterInputClass"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["currentSort", "column"], outputs: ["sortEmit"] }, { kind: "component", type: TheadFiltersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: ["grid", "source", "withoutCreateButton", "inputClass"], outputs: ["create"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2068
2124
|
}
|
|
2069
2125
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
|
|
2070
2126
|
type: Component,
|
|
@@ -2076,7 +2132,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
2076
2132
|
TheadFiltersRowComponent,
|
|
2077
2133
|
NgTemplateOutlet,
|
|
2078
2134
|
OverlayModule,
|
|
2079
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isMobileView()) {\n <tr class=\"ng2-smart-titles mobile-header mobile-header-top-row\">\n <th colspan=\"50\">\n <div class=\"mobile-header-content\">\n <div ng2-st-add-button [grid]=\"grid()\" (create)=\"create.emit($event)\"></div>\n @if (columnsWithSortLength()) {\n <div class=\"current-column-title\">\n <a href=\"#\" (click)=\"$event.preventDefault(); sortByColumn()\" class=\"ng2-smart-sort-link sort\">\n
|
|
2135
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isMobileView()) {\n <tr class=\"ng2-smart-titles mobile-header mobile-header-top-row\">\n <th colspan=\"50\">\n <div class=\"mobile-header-content\">\n <div ng2-st-add-button [grid]=\"grid()\" (create)=\"create.emit($event)\"></div>\n @if (columnsWithSortLength()) {\n <div class=\"current-column-title\">\n @if (currentSortConfig(); as sortConfig) {\n <a href=\"#\" (click)=\"$event.preventDefault(); sortByColumn()\" class=\"ng2-smart-sort-link sort\">\n {{ sortConfig.title }}\n <span class=\"sort-direction\">{{ sortConfig.direction === 'asc' ? '\u2191' : '\u2193' }}</span>\n </a>\n }\n\n @if (columnsWithSortLength() > 1) {\n <button\n #sortTrigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n class=\"sort-dropdown-toggle-button\"\n (click)=\"toggleDropdown()\"\n [class.active]=\"filterDropdownIsOpen()\"\n aria-label=\"Toggle sort options\">\n <span class=\"sort-icon\">\u25BC</span>\n </button>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"sortTrigger\"\n [cdkConnectedOverlayOpen]=\"filterDropdownIsOpen()\"\n [cdkConnectedOverlayWidth]=\"300\"\n [cdkConnectedOverlayPositions]=\"[\n {\n originX: 'center',\n originY: 'bottom',\n overlayX: 'center',\n overlayY: 'top',\n },\n ]\"\n (overlayOutsideClick)=\"toggleDropdown(false)\">\n <div class=\"dropdown\">\n <div class=\"dropdown-header\">\n <p></p>\n <button\n type=\"button\"\n class=\"close-dialog-button\"\n (click)=\"toggleDropdown(false)\"\n aria-label=\"Close filters\">\n <span></span>\n </button>\n </div>\n <div class=\"dropdown-content\">\n @for (column of columnsWithSort(); track $index) {\n <th class=\"titles\">\n <ng2-st-column-title\n class=\"sort-option\"\n [column]=\"column\"\n (sortEmit)=\"sortByColumn(column)\"\n [currentSort]=\"currentSortConfig()\"></ng2-st-column-title>\n </th>\n }\n </div>\n </div>\n </ng-template>\n }\n </div>\n }\n\n <div class=\"header-actions\">\n @if (columnsWithFiltersLength()) {\n <ng2-mobile-filters [grid]=\"grid()\" [source]=\"source()\" [filterInputClass]=\"filterInputClass()\">\n </ng2-mobile-filters>\n }\n </div>\n </div>\n </th>\n </tr>\n} @else {\n <!-- Desktop view header -->\n @if (!isHideHeader()) {\n <tr\n ng2-st-thead-titles-row\n class=\"ng2-smart-titles\"\n [grid]=\"grid()\"\n [source]=\"source()\"\n (sortEmit)=\"sortByColumn($event)\"\n (selectAllRows)=\"selectAllRows.emit()\"></tr>\n }\n\n @if (!isHideSubHeader()) {\n <ng-container [ngTemplateOutlet]=\"filtersRow\"></ng-container>\n }\n}\n\n<ng-template #filtersRow>\n <tr\n ng2-st-thead-filters-row\n class=\"ng2-smart-filters\"\n [grid]=\"grid()\"\n [inputClass]=\"filterInputClass()\"\n [withoutCreateButton]=\"isMobileView()\"\n [source]=\"source()\"\n (create)=\"create.emit()\"></tr>\n</ng-template>\n", styles: ["tr.mobile-header-top-row .mobile-header-content{display:flex;align-items:center;justify-content:space-between}tr.mobile-header-top-row .mobile-header-content .current-column-title{font-weight:700;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button{transition:transform .2s ease}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button.active{transform:rotate(180deg)}.dropdown{z-index:1;padding:.8rem 1rem;border:none;border-radius:.5rem;background:var(--smart-table-bg, #fff);box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto}.dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.dropdown-content{display:flex;flex-direction:column}.dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}.dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}.close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}.close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}.close-dialog-button:after,.close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}.close-dialog-button:before{rotate:45deg}.close-dialog-button:after{position:absolute;rotate:-45deg}\n"] }]
|
|
2080
2136
|
}] });
|
|
2081
2137
|
|
|
2082
2138
|
class DataSet {
|
|
@@ -2331,7 +2387,7 @@ class Grid {
|
|
|
2331
2387
|
}
|
|
2332
2388
|
prepareSource(source, initialSort, initialPaging) {
|
|
2333
2389
|
const preparedSource = source || new LocalDataSource();
|
|
2334
|
-
if (initialSort && !source?.getSort()
|
|
2390
|
+
if (initialSort && !source?.getSort()?.field) {
|
|
2335
2391
|
preparedSource.setSort(initialSort, false);
|
|
2336
2392
|
}
|
|
2337
2393
|
if (initialPaging && initialPaging?.display) {
|