@den4ik92/ng2-smart-table 19.5.46 → 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 +83 -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 +3 -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,
|
|
@@ -670,11 +670,15 @@ class LocalDataSource extends DataSource {
|
|
|
670
670
|
this.filteredAndSorted = computed(() => {
|
|
671
671
|
let list = this.data().slice(0);
|
|
672
672
|
const filters = this.filters();
|
|
673
|
+
const sortConf = this.sortConf();
|
|
673
674
|
if (filters.length) {
|
|
674
675
|
list = list.filter((element) => isElementSatisfied(element, filters));
|
|
675
676
|
}
|
|
676
|
-
if (
|
|
677
|
-
const { field, direction, compare } =
|
|
677
|
+
if (sortConf) {
|
|
678
|
+
const { field, direction, compare } = sortConf;
|
|
679
|
+
if (!field) {
|
|
680
|
+
return list;
|
|
681
|
+
}
|
|
678
682
|
list = localSort(list, field, direction, compare);
|
|
679
683
|
}
|
|
680
684
|
return list;
|
|
@@ -1438,11 +1442,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
1438
1442
|
|
|
1439
1443
|
class ColumnTitleComponent {
|
|
1440
1444
|
constructor() {
|
|
1441
|
-
this.
|
|
1445
|
+
this.currentSort = input.required();
|
|
1442
1446
|
this.column = input.required();
|
|
1447
|
+
this.sortEmit = output();
|
|
1443
1448
|
this.currentSortDirection = computed(() => {
|
|
1444
|
-
const
|
|
1445
|
-
|
|
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;
|
|
1446
1455
|
});
|
|
1447
1456
|
this.currentSortDirectionSymbol = computed(() => {
|
|
1448
1457
|
return !this.currentSortDirection() ? '' : this.currentSortDirection() === 'asc' ? '↑' : '↓';
|
|
@@ -1450,16 +1459,17 @@ class ColumnTitleComponent {
|
|
|
1450
1459
|
}
|
|
1451
1460
|
_sort(event) {
|
|
1452
1461
|
event.preventDefault();
|
|
1453
|
-
|
|
1454
|
-
this.
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
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
|
+
// });
|
|
1460
1470
|
}
|
|
1461
1471
|
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: {
|
|
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: `
|
|
1463
1473
|
@if (column().isSortable) {
|
|
1464
1474
|
<a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort">
|
|
1465
1475
|
{{ column().title }}
|
|
@@ -1974,10 +1984,11 @@ class TheadTitlesRowComponent {
|
|
|
1974
1984
|
constructor() {
|
|
1975
1985
|
this.grid = input.required();
|
|
1976
1986
|
this.source = input.required();
|
|
1987
|
+
this.sortEmit = output();
|
|
1977
1988
|
this.selectAllRows = output();
|
|
1978
1989
|
}
|
|
1979
1990
|
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: `
|
|
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: `
|
|
1981
1992
|
@if (grid().isMultiSelectVisible()) {
|
|
1982
1993
|
<th ng2-st-checkbox-select-all [grid]="grid()" (click)="selectAllRows.emit()"></th>
|
|
1983
1994
|
}
|
|
@@ -1986,13 +1997,16 @@ class TheadTitlesRowComponent {
|
|
|
1986
1997
|
}
|
|
1987
1998
|
@for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
|
|
1988
1999
|
<th class="ng2-smart-th {{ column.id }}" [class]="column.class">
|
|
1989
|
-
<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>
|
|
1990
2004
|
</th>
|
|
1991
2005
|
}
|
|
1992
2006
|
@if (grid().actionIsOnRight() && grid().isActionsVisible()) {
|
|
1993
2007
|
<th ng2-st-actions-title [grid]="grid()"></th>
|
|
1994
2008
|
}
|
|
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: ["
|
|
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 }); }
|
|
1996
2010
|
}
|
|
1997
2011
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadTitlesRowComponent, decorators: [{
|
|
1998
2012
|
type: Component,
|
|
@@ -2007,7 +2021,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
2007
2021
|
}
|
|
2008
2022
|
@for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
|
|
2009
2023
|
<th class="ng2-smart-th {{ column.id }}" [class]="column.class">
|
|
2010
|
-
<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>
|
|
2011
2028
|
</th>
|
|
2012
2029
|
}
|
|
2013
2030
|
@if (grid().actionIsOnRight() && grid().isActionsVisible()) {
|
|
@@ -2048,23 +2065,61 @@ class Ng2SmartTableTheadComponent {
|
|
|
2048
2065
|
}
|
|
2049
2066
|
return filterOptions.inputClass || '';
|
|
2050
2067
|
});
|
|
2068
|
+
this.lastColumnSort = null;
|
|
2051
2069
|
}
|
|
2052
2070
|
toggleDropdown(state) {
|
|
2053
2071
|
this.filterDropdownIsOpen.update((value) => state ?? !value);
|
|
2054
2072
|
}
|
|
2055
2073
|
sortByColumn(column) {
|
|
2056
2074
|
const sort = this.currentSortConfig();
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
direction
|
|
2063
|
-
|
|
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));
|
|
2064
2098
|
this.filterDropdownIsOpen.set(false);
|
|
2065
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
|
+
}
|
|
2066
2121
|
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
|
|
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 }); }
|
|
2068
2123
|
}
|
|
2069
2124
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
|
|
2070
2125
|
type: Component,
|
|
@@ -2076,7 +2131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
2076
2131
|
TheadFiltersRowComponent,
|
|
2077
2132
|
NgTemplateOutlet,
|
|
2078
2133
|
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
|
|
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"] }]
|
|
2080
2135
|
}] });
|
|
2081
2136
|
|
|
2082
2137
|
class DataSet {
|
|
@@ -2331,7 +2386,7 @@ class Grid {
|
|
|
2331
2386
|
}
|
|
2332
2387
|
prepareSource(source, initialSort, initialPaging) {
|
|
2333
2388
|
const preparedSource = source || new LocalDataSource();
|
|
2334
|
-
if (initialSort && !source?.getSort()
|
|
2389
|
+
if (initialSort && !source?.getSort()?.field) {
|
|
2335
2390
|
preparedSource.setSort(initialSort, false);
|
|
2336
2391
|
}
|
|
2337
2392
|
if (initialPaging && initialPaging?.display) {
|