@den4ik92/ng2-smart-table 19.5.45 → 19.5.50
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 +93 -28
- package/fesm2022/den4ik92-ng2-smart-table.mjs.map +1 -1
- 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-source/data-source.d.ts +8 -3
- package/lib/lib/data-source/server/server.data-source.d.ts +1 -1
- package/lib/lib/interfaces/smart-table.models.d.ts +2 -1
- package/package.json +1 -1
|
@@ -484,7 +484,7 @@ var SmartTableOnChangedEventName;
|
|
|
484
484
|
class DataSource {
|
|
485
485
|
constructor() {
|
|
486
486
|
this.onChangedSource = new Subject();
|
|
487
|
-
this.sortConf = signal(
|
|
487
|
+
this.sortConf = signal(null);
|
|
488
488
|
this.filters = signal([]);
|
|
489
489
|
this.pagingConf = signal({
|
|
490
490
|
page: 1,
|
|
@@ -513,16 +513,19 @@ class DataSource {
|
|
|
513
513
|
}
|
|
514
514
|
async appendMany(elements) {
|
|
515
515
|
this.data.update((old) => [...old, ...elements]);
|
|
516
|
+
this.updateTotal(elements.length);
|
|
516
517
|
this.emitOnChanged({ action: SmartTableOnChangedEventName.appendMany, newItems: elements });
|
|
517
518
|
return Promise.resolve(true);
|
|
518
519
|
}
|
|
519
520
|
async add(element) {
|
|
520
521
|
this.data.update((old) => [...old, element]);
|
|
522
|
+
this.updateTotal(1);
|
|
521
523
|
this.emitOnChanged({ action: SmartTableOnChangedEventName.add, newItems: [element] });
|
|
522
524
|
return Promise.resolve(true);
|
|
523
525
|
}
|
|
524
526
|
async remove(element) {
|
|
525
527
|
this.data.update((old) => old.filter((el) => !isObjectsIdentical(el, element)));
|
|
528
|
+
this.updateTotal(-1);
|
|
526
529
|
this.emitOnChanged({ action: SmartTableOnChangedEventName.remove, item: element }, this.data());
|
|
527
530
|
return Promise.resolve(true);
|
|
528
531
|
}
|
|
@@ -603,6 +606,13 @@ class DataSource {
|
|
|
603
606
|
};
|
|
604
607
|
this.onChangedSource.next(actionData);
|
|
605
608
|
}
|
|
609
|
+
/**
|
|
610
|
+
* @param difference number to plus total
|
|
611
|
+
* @example -2 or 2
|
|
612
|
+
*/
|
|
613
|
+
updateTotal(difference) {
|
|
614
|
+
this.pagingConf.update((old) => ({ ...old, total: old.total + difference }));
|
|
615
|
+
}
|
|
606
616
|
}
|
|
607
617
|
|
|
608
618
|
function exactMatch(value, search) {
|
|
@@ -660,11 +670,15 @@ class LocalDataSource extends DataSource {
|
|
|
660
670
|
this.filteredAndSorted = computed(() => {
|
|
661
671
|
let list = this.data().slice(0);
|
|
662
672
|
const filters = this.filters();
|
|
673
|
+
const sortConf = this.sortConf();
|
|
663
674
|
if (filters.length) {
|
|
664
675
|
list = list.filter((element) => isElementSatisfied(element, filters));
|
|
665
676
|
}
|
|
666
|
-
if (
|
|
667
|
-
const { field, direction, compare } =
|
|
677
|
+
if (sortConf) {
|
|
678
|
+
const { field, direction, compare } = sortConf;
|
|
679
|
+
if (!field) {
|
|
680
|
+
return list;
|
|
681
|
+
}
|
|
668
682
|
list = localSort(list, field, direction, compare);
|
|
669
683
|
}
|
|
670
684
|
return list;
|
|
@@ -1428,11 +1442,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
1428
1442
|
|
|
1429
1443
|
class ColumnTitleComponent {
|
|
1430
1444
|
constructor() {
|
|
1431
|
-
this.
|
|
1445
|
+
this.currentSort = input.required();
|
|
1432
1446
|
this.column = input.required();
|
|
1447
|
+
this.sortEmit = output();
|
|
1433
1448
|
this.currentSortDirection = computed(() => {
|
|
1434
|
-
const
|
|
1435
|
-
|
|
1449
|
+
const sort = this.currentSort();
|
|
1450
|
+
if (!sort) {
|
|
1451
|
+
return null;
|
|
1452
|
+
}
|
|
1453
|
+
const { field, direction, title } = sort;
|
|
1454
|
+
return this.column().id === field && this.column().title === title ? direction : null;
|
|
1436
1455
|
});
|
|
1437
1456
|
this.currentSortDirectionSymbol = computed(() => {
|
|
1438
1457
|
return !this.currentSortDirection() ? '' : this.currentSortDirection() === 'asc' ? '↑' : '↓';
|
|
@@ -1440,16 +1459,17 @@ class ColumnTitleComponent {
|
|
|
1440
1459
|
}
|
|
1441
1460
|
_sort(event) {
|
|
1442
1461
|
event.preventDefault();
|
|
1443
|
-
|
|
1444
|
-
this.
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1462
|
+
this.sortEmit.emit();
|
|
1463
|
+
// const { id: field, title } = this.column();
|
|
1464
|
+
// this.source().setSort({
|
|
1465
|
+
// field,
|
|
1466
|
+
// title,
|
|
1467
|
+
// direction: this.currentSortDirection() === 'desc' ? 'asc' : 'desc',
|
|
1468
|
+
// compare: this.column().compareFunction,
|
|
1469
|
+
// });
|
|
1450
1470
|
}
|
|
1451
1471
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1452
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ColumnTitleComponent, isStandalone: true, selector: "ng2-st-column-title", inputs: {
|
|
1472
|
+
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: `
|
|
1453
1473
|
@if (column().isSortable) {
|
|
1454
1474
|
<a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort">
|
|
1455
1475
|
{{ column().title }}
|
|
@@ -1964,10 +1984,11 @@ class TheadTitlesRowComponent {
|
|
|
1964
1984
|
constructor() {
|
|
1965
1985
|
this.grid = input.required();
|
|
1966
1986
|
this.source = input.required();
|
|
1987
|
+
this.sortEmit = output();
|
|
1967
1988
|
this.selectAllRows = output();
|
|
1968
1989
|
}
|
|
1969
1990
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadTitlesRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1970
|
-
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: `
|
|
1991
|
+
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: `
|
|
1971
1992
|
@if (grid().isMultiSelectVisible()) {
|
|
1972
1993
|
<th ng2-st-checkbox-select-all [grid]="grid()" (click)="selectAllRows.emit()"></th>
|
|
1973
1994
|
}
|
|
@@ -1976,13 +1997,16 @@ class TheadTitlesRowComponent {
|
|
|
1976
1997
|
}
|
|
1977
1998
|
@for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
|
|
1978
1999
|
<th class="ng2-smart-th {{ column.id }}" [class]="column.class">
|
|
1979
|
-
<ng2-st-column-title
|
|
2000
|
+
<ng2-st-column-title
|
|
2001
|
+
[currentSort]="source().getSort()"
|
|
2002
|
+
[column]="column"
|
|
2003
|
+
(sortEmit)="sortEmit.emit(column)"></ng2-st-column-title>
|
|
1980
2004
|
</th>
|
|
1981
2005
|
}
|
|
1982
2006
|
@if (grid().actionIsOnRight() && grid().isActionsVisible()) {
|
|
1983
2007
|
<th ng2-st-actions-title [grid]="grid()"></th>
|
|
1984
2008
|
}
|
|
1985
|
-
`, 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: ["
|
|
2009
|
+
`, 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 }); }
|
|
1986
2010
|
}
|
|
1987
2011
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadTitlesRowComponent, decorators: [{
|
|
1988
2012
|
type: Component,
|
|
@@ -1997,7 +2021,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
1997
2021
|
}
|
|
1998
2022
|
@for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
|
|
1999
2023
|
<th class="ng2-smart-th {{ column.id }}" [class]="column.class">
|
|
2000
|
-
<ng2-st-column-title
|
|
2024
|
+
<ng2-st-column-title
|
|
2025
|
+
[currentSort]="source().getSort()"
|
|
2026
|
+
[column]="column"
|
|
2027
|
+
(sortEmit)="sortEmit.emit(column)"></ng2-st-column-title>
|
|
2001
2028
|
</th>
|
|
2002
2029
|
}
|
|
2003
2030
|
@if (grid().actionIsOnRight() && grid().isActionsVisible()) {
|
|
@@ -2038,23 +2065,61 @@ class Ng2SmartTableTheadComponent {
|
|
|
2038
2065
|
}
|
|
2039
2066
|
return filterOptions.inputClass || '';
|
|
2040
2067
|
});
|
|
2068
|
+
this.lastColumnSort = null;
|
|
2041
2069
|
}
|
|
2042
2070
|
toggleDropdown(state) {
|
|
2043
2071
|
this.filterDropdownIsOpen.update((value) => state ?? !value);
|
|
2044
2072
|
}
|
|
2045
2073
|
sortByColumn(column) {
|
|
2046
2074
|
const sort = this.currentSortConfig();
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
direction
|
|
2053
|
-
|
|
2075
|
+
if (!column && !sort) {
|
|
2076
|
+
return;
|
|
2077
|
+
}
|
|
2078
|
+
let newSort = null;
|
|
2079
|
+
if (column) {
|
|
2080
|
+
let direction = 'asc';
|
|
2081
|
+
if (sort && sort.field === column.id && sort.title === column.title) {
|
|
2082
|
+
direction = sort.direction === 'asc' ? 'desc' : 'asc';
|
|
2083
|
+
}
|
|
2084
|
+
newSort = {
|
|
2085
|
+
field: column.id,
|
|
2086
|
+
title: column.title,
|
|
2087
|
+
direction: direction,
|
|
2088
|
+
};
|
|
2089
|
+
}
|
|
2090
|
+
else if (sort) {
|
|
2091
|
+
newSort = {
|
|
2092
|
+
field: sort.field,
|
|
2093
|
+
title: sort.title,
|
|
2094
|
+
direction: sort.direction === 'asc' ? 'desc' : 'asc',
|
|
2095
|
+
};
|
|
2096
|
+
}
|
|
2097
|
+
this.source().setSort(this.getPrepareSort(newSort));
|
|
2054
2098
|
this.filterDropdownIsOpen.set(false);
|
|
2055
2099
|
}
|
|
2100
|
+
getPrepareSort(newSort) {
|
|
2101
|
+
if (!this.grid().settings().resetSortOnThirdClick) {
|
|
2102
|
+
return newSort;
|
|
2103
|
+
}
|
|
2104
|
+
if (!newSort) {
|
|
2105
|
+
this.lastColumnSort = null;
|
|
2106
|
+
return null;
|
|
2107
|
+
}
|
|
2108
|
+
if (!this.lastColumnSort ||
|
|
2109
|
+
newSort.field !== this.lastColumnSort.field ||
|
|
2110
|
+
newSort.title !== this.lastColumnSort.title) {
|
|
2111
|
+
this.lastColumnSort = { ...newSort, count: 1 };
|
|
2112
|
+
return newSort;
|
|
2113
|
+
}
|
|
2114
|
+
if (this.lastColumnSort.count === 2) {
|
|
2115
|
+
this.lastColumnSort = null;
|
|
2116
|
+
return null;
|
|
2117
|
+
}
|
|
2118
|
+
this.lastColumnSort.count++;
|
|
2119
|
+
return newSort;
|
|
2120
|
+
}
|
|
2056
2121
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2057
|
-
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
|
|
2122
|
+
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 }); }
|
|
2058
2123
|
}
|
|
2059
2124
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
|
|
2060
2125
|
type: Component,
|
|
@@ -2066,7 +2131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
2066
2131
|
TheadFiltersRowComponent,
|
|
2067
2132
|
NgTemplateOutlet,
|
|
2068
2133
|
OverlayModule,
|
|
2069
|
-
], 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
|
|
2134
|
+
], 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"] }]
|
|
2070
2135
|
}] });
|
|
2071
2136
|
|
|
2072
2137
|
class DataSet {
|
|
@@ -2321,7 +2386,7 @@ class Grid {
|
|
|
2321
2386
|
}
|
|
2322
2387
|
prepareSource(source, initialSort, initialPaging) {
|
|
2323
2388
|
const preparedSource = source || new LocalDataSource();
|
|
2324
|
-
if (initialSort && !source?.getSort()
|
|
2389
|
+
if (initialSort && !source?.getSort()?.field) {
|
|
2325
2390
|
preparedSource.setSort(initialSort, false);
|
|
2326
2391
|
}
|
|
2327
2392
|
if (initialPaging && initialPaging?.display) {
|