@den4ik92/ng2-smart-table 19.4.0 → 19.4.2
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 +140 -135
- package/fesm2022/den4ik92-ng2-smart-table.mjs.map +1 -1
- package/lib/components/thead/rows/thead-filters-row.component.d.ts +2 -2
- package/lib/components/thead/thead.component.d.ts +3 -0
- package/lib/lib/data-set/column.d.ts +1 -2
- package/package.json +1 -1
|
@@ -381,7 +381,6 @@ class Column {
|
|
|
381
381
|
this.isEditable = true;
|
|
382
382
|
this.isAddable = true;
|
|
383
383
|
this.isFilterable = false;
|
|
384
|
-
this.sortDirection = 'asc';
|
|
385
384
|
this.editor = false;
|
|
386
385
|
this.filter = false;
|
|
387
386
|
this.editorInputClass = dataSet.editorInputClass;
|
|
@@ -399,11 +398,10 @@ class Column {
|
|
|
399
398
|
if (settings.type === 'custom' && settings.renderComponent) {
|
|
400
399
|
this.renderComponent = settings.renderComponent;
|
|
401
400
|
}
|
|
402
|
-
this.isFilterable =
|
|
403
|
-
this.isSortable = settings.sort ??
|
|
401
|
+
this.isFilterable = !!settings['filter'];
|
|
402
|
+
this.isSortable = settings.sort ?? false;
|
|
404
403
|
this.isEditable = settings.editable ?? true;
|
|
405
404
|
this.isAddable = settings.addable ?? true;
|
|
406
|
-
this.sortDirection = settings.sortDirection || 'asc';
|
|
407
405
|
this.compareFunction = settings.compareFunction;
|
|
408
406
|
this.valuePrepareFunction = settings.valuePrepareFunction;
|
|
409
407
|
this.filterFunction = settings.filterFunction;
|
|
@@ -541,13 +539,13 @@ class DataSource {
|
|
|
541
539
|
}
|
|
542
540
|
const foundIndex = this.filters().findIndex((filter) => filter.field === newFilter.field);
|
|
543
541
|
if (foundIndex === -1) {
|
|
544
|
-
if (newFilter.search) {
|
|
542
|
+
if (newFilter.search !== null) {
|
|
545
543
|
this.filters.set([...this.filters(), newFilter]);
|
|
546
544
|
}
|
|
547
545
|
}
|
|
548
546
|
else {
|
|
549
547
|
const filtersTemp = this.filters();
|
|
550
|
-
if (newFilter.search) {
|
|
548
|
+
if (newFilter.search !== null) {
|
|
551
549
|
filtersTemp[foundIndex].search = newFilter.search;
|
|
552
550
|
}
|
|
553
551
|
else {
|
|
@@ -820,11 +818,11 @@ class PagerComponent {
|
|
|
820
818
|
this.source().setPaging(1, +target.value);
|
|
821
819
|
}
|
|
822
820
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
823
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: PagerComponent, isStandalone: true, selector: "ng2-smart-table-pager", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (shouldShow()) {\n<div class=\"ng2-smart-pagination-wrap\">\n
|
|
821
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: PagerComponent, isStandalone: true, selector: "ng2-smart-table-pager", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (shouldShow()) {\n <div class=\"ng2-smart-pagination-wrap\">\n @if ((pagingConf().perPageSelect?.length || 0) > 0) {\n <div></div>\n }\n <nav class=\"ng2-smart-pagination-nav\">\n <ul class=\"ng2-smart-pagination pagination\">\n <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === 1\">\n <a\n class=\"ng2-smart-page-link page-link\"\n href=\"#\"\n (click)=\"$event.preventDefault(); currentPage() === 1 ? false : paginate(1)\"\n aria-label=\"First\">\n <span aria-hidden=\"true\">«</span>\n </a>\n </li>\n <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === 1\">\n <a\n class=\"ng2-smart-page-link page-link page-link-prev\"\n href=\"#\"\n (click)=\"$event.preventDefault(); currentPage() === 1 ? false : prev()\"\n aria-label=\"Prev\">\n <span aria-hidden=\"true\"><</span>\n </a>\n </li>\n @for (page of pages(); track $index) {\n <li class=\"ng2-smart-page-item page-item\" [class.active]=\"currentPage() === page\">\n @if (currentPage() === page || isString(page)) {\n <span class=\"ng2-smart-page-link page-link\">{{ page }}</span>\n } @else {\n <a class=\"ng2-smart-page-link page-link\" href=\"#\" (click)=\"$event.preventDefault(); paginate(page)\">{{\n page\n }}</a>\n }\n </li>\n }\n <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === lastPage()\">\n <a\n class=\"ng2-smart-page-link page-link page-link-next\"\n href=\"#\"\n (click)=\"$event.preventDefault(); currentPage() === lastPage() ? false : next()\"\n aria-label=\"Next\">\n <span aria-hidden=\"true\">></span>\n </a>\n </li>\n <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === lastPage()\">\n <a\n class=\"ng2-smart-page-link page-link\"\n href=\"#\"\n (click)=\"$event.preventDefault(); currentPage() === lastPage() ? false : paginate(lastPage())\"\n aria-label=\"Last\">\n <span aria-hidden=\"true\">»</span>\n </a>\n </li>\n </ul>\n </nav>\n @if ((pagingConf().perPageSelect?.length || 0) > 0) {\n <nav class=\"ng2-smart-pagination-per-page\">\n <label for=\"per-page\"> Per Page: </label>\n <select (change)=\"onChangePerPage($any($event.target))\" [ngModel]=\"currentPerPage()\" id=\"per-page\">\n @for (item of pagingConf().perPageSelect; track $index) {\n <option [value]=\"item\">{{ item }}</option>\n }\n </select>\n </nav>\n }\n </div>\n}\n", styles: [".ng2-smart-pagination{display:inline-flex;align-items:center;font-size:.875em;padding:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline;padding:.2rem}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}.ng2-smart-pagination-nav{margin:0 auto}.ng2-smart-pagination-wrap{display:flex;align-items:center;justify-content:space-between}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
824
822
|
}
|
|
825
823
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: PagerComponent, decorators: [{
|
|
826
824
|
type: Component,
|
|
827
|
-
args: [{ selector: 'ng2-smart-table-pager', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], template: "@if (shouldShow()) {\n<div class=\"ng2-smart-pagination-wrap\">\n
|
|
825
|
+
args: [{ selector: 'ng2-smart-table-pager', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], template: "@if (shouldShow()) {\n <div class=\"ng2-smart-pagination-wrap\">\n @if ((pagingConf().perPageSelect?.length || 0) > 0) {\n <div></div>\n }\n <nav class=\"ng2-smart-pagination-nav\">\n <ul class=\"ng2-smart-pagination pagination\">\n <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === 1\">\n <a\n class=\"ng2-smart-page-link page-link\"\n href=\"#\"\n (click)=\"$event.preventDefault(); currentPage() === 1 ? false : paginate(1)\"\n aria-label=\"First\">\n <span aria-hidden=\"true\">«</span>\n </a>\n </li>\n <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === 1\">\n <a\n class=\"ng2-smart-page-link page-link page-link-prev\"\n href=\"#\"\n (click)=\"$event.preventDefault(); currentPage() === 1 ? false : prev()\"\n aria-label=\"Prev\">\n <span aria-hidden=\"true\"><</span>\n </a>\n </li>\n @for (page of pages(); track $index) {\n <li class=\"ng2-smart-page-item page-item\" [class.active]=\"currentPage() === page\">\n @if (currentPage() === page || isString(page)) {\n <span class=\"ng2-smart-page-link page-link\">{{ page }}</span>\n } @else {\n <a class=\"ng2-smart-page-link page-link\" href=\"#\" (click)=\"$event.preventDefault(); paginate(page)\">{{\n page\n }}</a>\n }\n </li>\n }\n <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === lastPage()\">\n <a\n class=\"ng2-smart-page-link page-link page-link-next\"\n href=\"#\"\n (click)=\"$event.preventDefault(); currentPage() === lastPage() ? false : next()\"\n aria-label=\"Next\">\n <span aria-hidden=\"true\">></span>\n </a>\n </li>\n <li class=\"ng2-smart-page-item page-item\" [class.disabled]=\"currentPage() === lastPage()\">\n <a\n class=\"ng2-smart-page-link page-link\"\n href=\"#\"\n (click)=\"$event.preventDefault(); currentPage() === lastPage() ? false : paginate(lastPage())\"\n aria-label=\"Last\">\n <span aria-hidden=\"true\">»</span>\n </a>\n </li>\n </ul>\n </nav>\n @if ((pagingConf().perPageSelect?.length || 0) > 0) {\n <nav class=\"ng2-smart-pagination-per-page\">\n <label for=\"per-page\"> Per Page: </label>\n <select (change)=\"onChangePerPage($any($event.target))\" [ngModel]=\"currentPerPage()\" id=\"per-page\">\n @for (item of pagingConf().perPageSelect; track $index) {\n <option [value]=\"item\">{{ item }}</option>\n }\n </select>\n </nav>\n }\n </div>\n}\n", styles: [".ng2-smart-pagination{display:inline-flex;align-items:center;font-size:.875em;padding:0}.ng2-smart-pagination .ng2-smart-page-item{display:inline;padding:.2rem}.ng2-smart-pagination .page-link-next,.ng2-smart-pagination .page-link-prev{font-size:10px}.ng2-smart-pagination-nav{margin:0 auto}.ng2-smart-pagination-wrap{display:flex;align-items:center;justify-content:space-between}\n"] }]
|
|
828
826
|
}] });
|
|
829
827
|
|
|
830
828
|
class CheckboxEditorComponent extends BaseEditorComponent {
|
|
@@ -1297,13 +1295,13 @@ class TrowComponent {
|
|
|
1297
1295
|
this.row()?.isInEditing.set(false);
|
|
1298
1296
|
}
|
|
1299
1297
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TrowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1300
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TrowComponent, isStandalone: true, selector: "[ng2-st-trow]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null }, isCreateRow: { classPropertyName: "isCreateRow", publicName: "isCreateRow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", editCancel: "editCancel", editConfirmed: "editConfirmed", deleteEmitter: "deleteEmitter", createConfirmed: "createConfirmed", customActionEmitter: "customActionEmitter", userClickedRow: "userClickedRow", multipleSelectRow: "multipleSelectRow" }, host: { properties: { "class.ng2-smart-card": "isMobileView()" } }, ngImport: i0, template: "@if (isMobileView()) {\n <td colspan=\"50\">\n <div class=\"ng2-smart-card-header\">\n <ng-container [ngTemplateOutlet]=\"multiselectCheckbox\"></ng-container>\n <div class=\"ng2-smart-card-actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n </div>\n <div class=\"ng2-smart-card-content\">\n @for (cell of row().visibleCells(); track cell.id + $index) {\n <div class=\"ng2-smart-card-field\">\n <div class=\"ng2-smart-card-field-label\">{{ cell.title }}</div>\n <div class=\"ng2-smart-card-field-value\">\n <ng2-smart-table-cell [cell]=\"cell\" [isInEditing]=\"!!row().isInEditing()\"> </ng2-smart-table-cell>\n </div>\n </div>\n }\n </div>\n </td>\n} @else {\n <ng-container [ngTemplateOutlet]=\"multiselectCheckbox\"></ng-container>\n @if (grid().actionIsOnLeft()) {\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n }\n @for (cell of row().visibleCells(); track cell.id + $index) {\n <td\n [class]=\"cell.columnClass\"\n [style]=\"cell.styles\">\n <ng2-smart-table-cell [cell]=\"cell\" [isInEditing]=\"!!row().isInEditing()\"> </ng2-smart-table-cell>\n </td>\n }\n @if (grid().actionIsOnRight()) {\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n }\n}\n\n<ng-template #actions>\n @if (isCreateRow() || row().isInEditing()) {\n <td class=\"ng2-smart-actions\">\n <ng2-st-tbody-create-cancel\n [grid]=\"grid()\"\n [rowIndex]=\"row().index || 0\"\n (cancelEdit)=\"onCancelEdit()\"\n (save)=\"onSave()\"\n [rowPending]=\"!!row().pending()\"></ng2-st-tbody-create-cancel>\n </td>\n } @else {\n @if (grid().isActionsVisible()) {\n <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n <ng2-row-actions\n [grid]=\"grid()\"\n [row]=\"row()\"\n (customActionEmitter)=\"customActionEmitter.emit($event)\"\n (editEmitter)=\"edit.emit()\"\n (deleteEmitter)=\"deleteEmitter.emit()\"></ng2-row-actions>\n </td>\n }\n }\n</ng-template>\n\n<ng-template #multiselectCheckbox>\n @if (grid().isMultiSelectVisible() && !isCreateRow()) {\n <td\n class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n (click)=\"$event.stopPropagation(); multipleSelectRow.emit(row())\">\n <input\n type=\"checkbox\"\n [id]=\"'row-' + row().index + '_select-checkbox'\"\n class=\"form-control\"\n [ngModel]=\"row().isSelected()\" />\n </td>\n }
|
|
1298
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TrowComponent, isStandalone: true, selector: "[ng2-st-trow]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null }, isCreateRow: { classPropertyName: "isCreateRow", publicName: "isCreateRow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", editCancel: "editCancel", editConfirmed: "editConfirmed", deleteEmitter: "deleteEmitter", createConfirmed: "createConfirmed", customActionEmitter: "customActionEmitter", userClickedRow: "userClickedRow", multipleSelectRow: "multipleSelectRow" }, host: { properties: { "class.ng2-smart-card": "isMobileView()" } }, ngImport: i0, template: "@if (isMobileView()) {\n <td colspan=\"50\">\n <div class=\"ng2-smart-card-header\">\n <ng-container [ngTemplateOutlet]=\"multiselectCheckbox\"></ng-container>\n <div class=\"ng2-smart-card-actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n </div>\n <div class=\"ng2-smart-card-content\">\n @for (cell of row().visibleCells(); track cell.id + $index) {\n <div class=\"ng2-smart-card-field\">\n <div class=\"ng2-smart-card-field-label\">{{ cell.title }}</div>\n <div class=\"ng2-smart-card-field-value\">\n <ng2-smart-table-cell [cell]=\"cell\" [isInEditing]=\"!!row().isInEditing()\"> </ng2-smart-table-cell>\n </div>\n </div>\n }\n </div>\n </td>\n} @else {\n <ng-container [ngTemplateOutlet]=\"multiselectCheckbox\"></ng-container>\n @if (grid().actionIsOnLeft()) {\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n }\n @for (cell of row().visibleCells(); track cell.id + $index) {\n <td\n [class]=\"cell.columnClass\"\n [style]=\"cell.styles\">\n <ng2-smart-table-cell [cell]=\"cell\" [isInEditing]=\"!!row().isInEditing()\"> </ng2-smart-table-cell>\n </td>\n }\n @if (grid().actionIsOnRight()) {\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n }\n}\n\n<ng-template #actions>\n @if (isCreateRow() || row().isInEditing()) {\n <td class=\"ng2-smart-actions\">\n <ng2-st-tbody-create-cancel\n [grid]=\"grid()\"\n [rowIndex]=\"row().index || 0\"\n (cancelEdit)=\"onCancelEdit()\"\n (save)=\"onSave()\"\n [rowPending]=\"!!row().pending()\"></ng2-st-tbody-create-cancel>\n </td>\n } @else {\n @if (grid().isActionsVisible()) {\n <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n <ng2-row-actions\n [grid]=\"grid()\"\n [row]=\"row()\"\n (customActionEmitter)=\"customActionEmitter.emit($event)\"\n (editEmitter)=\"edit.emit()\"\n (deleteEmitter)=\"deleteEmitter.emit()\"></ng2-row-actions>\n </td>\n }\n }\n</ng-template>\n\n<ng-template #multiselectCheckbox>\n @if (grid().isMultiSelectVisible() && !isCreateRow()) {\n <td\n class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n (click)=\"$event.stopPropagation(); multipleSelectRow.emit(row())\">\n <input\n type=\"checkbox\"\n [id]=\"'row-' + row().index + '_select-checkbox'\"\n class=\"form-control\"\n [ngModel]=\"row().isSelected()\" />\n </td>\n }\n</ng-template>\n", styles: [":host .ng2-smart-action-multiple-select{margin-right:.5rem}:host.ng2-smart-card{display:block;margin-bottom:1rem;border-radius:.5rem;overflow:hidden;box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));background-color:var(--smart-table-bg, #ffffff)}:host.ng2-smart-card td{display:block;padding:0;border:none}:host.ng2-smart-card td .ng2-smart-actions{margin:.5rem}:host.ng2-smart-card td .ng2-smart-card-header{display:flex;align-items:center;gap:.5rem;justify-content:space-between}:host.ng2-smart-card td .ng2-smart-card-content{padding:1rem;display:grid;gap:.75rem}@media (min-width: 400px){:host.ng2-smart-card td .ng2-smart-card-content{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}:host.ng2-smart-card td .ng2-smart-card-content .ng2-smart-card-field .ng2-smart-card-field-label{font-weight:600;color:inherit;margin-bottom:.35rem;font-size:.9em}:host.ng2-smart-card td .ng2-smart-card-content .ng2-smart-card-field .ng2-smart-card-field-value{word-break:break-word}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CellComponent, selector: "ng2-smart-table-cell", inputs: ["cell", "isInEditing"] }, { kind: "component", type: RowActionsComponent, selector: "ng2-row-actions", inputs: ["grid", "row"], outputs: ["editEmitter", "deleteEmitter", "customActionEmitter"] }, { kind: "component", type: TbodyCreateCancelComponent, selector: "ng2-st-tbody-create-cancel", inputs: ["grid", "rowIndex", "rowPending"], outputs: ["save", "cancelEdit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1301
1299
|
}
|
|
1302
1300
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TrowComponent, decorators: [{
|
|
1303
1301
|
type: Component,
|
|
1304
1302
|
args: [{ selector: '[ng2-st-trow]', imports: [NgTemplateOutlet, FormsModule, CellComponent, RowActionsComponent, TbodyCreateCancelComponent], host: {
|
|
1305
1303
|
'[class.ng2-smart-card]': 'isMobileView()',
|
|
1306
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isMobileView()) {\n <td colspan=\"50\">\n <div class=\"ng2-smart-card-header\">\n <ng-container [ngTemplateOutlet]=\"multiselectCheckbox\"></ng-container>\n <div class=\"ng2-smart-card-actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n </div>\n <div class=\"ng2-smart-card-content\">\n @for (cell of row().visibleCells(); track cell.id + $index) {\n <div class=\"ng2-smart-card-field\">\n <div class=\"ng2-smart-card-field-label\">{{ cell.title }}</div>\n <div class=\"ng2-smart-card-field-value\">\n <ng2-smart-table-cell [cell]=\"cell\" [isInEditing]=\"!!row().isInEditing()\"> </ng2-smart-table-cell>\n </div>\n </div>\n }\n </div>\n </td>\n} @else {\n <ng-container [ngTemplateOutlet]=\"multiselectCheckbox\"></ng-container>\n @if (grid().actionIsOnLeft()) {\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n }\n @for (cell of row().visibleCells(); track cell.id + $index) {\n <td\n [class]=\"cell.columnClass\"\n [style]=\"cell.styles\">\n <ng2-smart-table-cell [cell]=\"cell\" [isInEditing]=\"!!row().isInEditing()\"> </ng2-smart-table-cell>\n </td>\n }\n @if (grid().actionIsOnRight()) {\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n }\n}\n\n<ng-template #actions>\n @if (isCreateRow() || row().isInEditing()) {\n <td class=\"ng2-smart-actions\">\n <ng2-st-tbody-create-cancel\n [grid]=\"grid()\"\n [rowIndex]=\"row().index || 0\"\n (cancelEdit)=\"onCancelEdit()\"\n (save)=\"onSave()\"\n [rowPending]=\"!!row().pending()\"></ng2-st-tbody-create-cancel>\n </td>\n } @else {\n @if (grid().isActionsVisible()) {\n <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n <ng2-row-actions\n [grid]=\"grid()\"\n [row]=\"row()\"\n (customActionEmitter)=\"customActionEmitter.emit($event)\"\n (editEmitter)=\"edit.emit()\"\n (deleteEmitter)=\"deleteEmitter.emit()\"></ng2-row-actions>\n </td>\n }\n }\n</ng-template>\n\n<ng-template #multiselectCheckbox>\n @if (grid().isMultiSelectVisible() && !isCreateRow()) {\n <td\n class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n (click)=\"$event.stopPropagation(); multipleSelectRow.emit(row())\">\n <input\n type=\"checkbox\"\n [id]=\"'row-' + row().index + '_select-checkbox'\"\n class=\"form-control\"\n [ngModel]=\"row().isSelected()\" />\n </td>\n }
|
|
1304
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isMobileView()) {\n <td colspan=\"50\">\n <div class=\"ng2-smart-card-header\">\n <ng-container [ngTemplateOutlet]=\"multiselectCheckbox\"></ng-container>\n <div class=\"ng2-smart-card-actions\">\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n </div>\n </div>\n <div class=\"ng2-smart-card-content\">\n @for (cell of row().visibleCells(); track cell.id + $index) {\n <div class=\"ng2-smart-card-field\">\n <div class=\"ng2-smart-card-field-label\">{{ cell.title }}</div>\n <div class=\"ng2-smart-card-field-value\">\n <ng2-smart-table-cell [cell]=\"cell\" [isInEditing]=\"!!row().isInEditing()\"> </ng2-smart-table-cell>\n </div>\n </div>\n }\n </div>\n </td>\n} @else {\n <ng-container [ngTemplateOutlet]=\"multiselectCheckbox\"></ng-container>\n @if (grid().actionIsOnLeft()) {\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n }\n @for (cell of row().visibleCells(); track cell.id + $index) {\n <td\n [class]=\"cell.columnClass\"\n [style]=\"cell.styles\">\n <ng2-smart-table-cell [cell]=\"cell\" [isInEditing]=\"!!row().isInEditing()\"> </ng2-smart-table-cell>\n </td>\n }\n @if (grid().actionIsOnRight()) {\n <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n }\n}\n\n<ng-template #actions>\n @if (isCreateRow() || row().isInEditing()) {\n <td class=\"ng2-smart-actions\">\n <ng2-st-tbody-create-cancel\n [grid]=\"grid()\"\n [rowIndex]=\"row().index || 0\"\n (cancelEdit)=\"onCancelEdit()\"\n (save)=\"onSave()\"\n [rowPending]=\"!!row().pending()\"></ng2-st-tbody-create-cancel>\n </td>\n } @else {\n @if (grid().isActionsVisible()) {\n <td class=\"ng2-smart-actions\" (click)=\"$event.stopPropagation()\">\n <ng2-row-actions\n [grid]=\"grid()\"\n [row]=\"row()\"\n (customActionEmitter)=\"customActionEmitter.emit($event)\"\n (editEmitter)=\"edit.emit()\"\n (deleteEmitter)=\"deleteEmitter.emit()\"></ng2-row-actions>\n </td>\n }\n }\n</ng-template>\n\n<ng-template #multiselectCheckbox>\n @if (grid().isMultiSelectVisible() && !isCreateRow()) {\n <td\n class=\"ng2-smart-actions ng2-smart-action-multiple-select\"\n (click)=\"$event.stopPropagation(); multipleSelectRow.emit(row())\">\n <input\n type=\"checkbox\"\n [id]=\"'row-' + row().index + '_select-checkbox'\"\n class=\"form-control\"\n [ngModel]=\"row().isSelected()\" />\n </td>\n }\n</ng-template>\n", styles: [":host .ng2-smart-action-multiple-select{margin-right:.5rem}:host.ng2-smart-card{display:block;margin-bottom:1rem;border-radius:.5rem;overflow:hidden;box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));background-color:var(--smart-table-bg, #ffffff)}:host.ng2-smart-card td{display:block;padding:0;border:none}:host.ng2-smart-card td .ng2-smart-actions{margin:.5rem}:host.ng2-smart-card td .ng2-smart-card-header{display:flex;align-items:center;gap:.5rem;justify-content:space-between}:host.ng2-smart-card td .ng2-smart-card-content{padding:1rem;display:grid;gap:.75rem}@media (min-width: 400px){:host.ng2-smart-card td .ng2-smart-card-content{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}:host.ng2-smart-card td .ng2-smart-card-content .ng2-smart-card-field .ng2-smart-card-field-label{font-weight:600;color:inherit;margin-bottom:.35rem;font-size:.9em}:host.ng2-smart-card td .ng2-smart-card-content .ng2-smart-card-field .ng2-smart-card-field-value{word-break:break-word}\n"] }]
|
|
1307
1305
|
}] });
|
|
1308
1306
|
|
|
1309
1307
|
class Ng2SmartTableTbodyComponent {
|
|
@@ -1349,109 +1347,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
1349
1347
|
args: [{ selector: '[ng2-st-tbody]', imports: [FormsModule, TrowComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (grid().createFormShown()) {\n <tr\n ng2-st-trow\n class=\"ng2-smart-row\"\n [grid]=\"grid()\"\n [row]=\"grid().getNewRow()\"\n [isCreateRow]=\"true\"\n [source]=\"source()\"\n [isMobileView]=\"isMobileView()\"\n (createConfirmed)=\"createConfirmed.emit()\"\n ></tr>\n}\n@for (row of grid().dataSet.getRows(); track trackByIdOrIndex($index, row)) {\n <tr\n ng2-st-trow\n class=\"ng2-smart-row\"\n [grid]=\"grid()\"\n [source]=\"source()\"\n [row]=\"row\"\n [class]=\"rowClassFunction()(row.rowData)\"\n [isMobileView]=\"isMobileView()\"\n [class.selected]=\"row.isSelected()\"\n (click)=\"userClickedRow.emit(row)\"\n (edit)=\"edit.emit(row)\"\n (editConfirmed)=\"editConfirmed.emit(row)\"\n (editCancel)=\"editCancel.emit(row)\"\n (deleteEmitter)=\"deleteEmitter.emit(row)\"\n (customActionEmitter)=\"customActionEmitted($event, row)\"\n (multipleSelectRow)=\"multipleSelectRow.emit($event)\"></tr>\n} @empty {\n <tr>\n <td colspan=\"50\">\n {{ noDataMessage() }}\n </td>\n </tr>\n}\n" }]
|
|
1350
1348
|
}] });
|
|
1351
1349
|
|
|
1352
|
-
class AddButtonComponent {
|
|
1353
|
-
constructor() {
|
|
1354
|
-
this.grid = input.required();
|
|
1355
|
-
this.create = output();
|
|
1356
|
-
this.isActionAdd = computed(() => {
|
|
1357
|
-
const actions = this.grid().settings().actions;
|
|
1358
|
-
if (!actions) {
|
|
1359
|
-
return false;
|
|
1360
|
-
}
|
|
1361
|
-
return !!actions.add;
|
|
1362
|
-
});
|
|
1363
|
-
this.addNewButtonContent = computed(() => {
|
|
1364
|
-
const addParams = this.grid().settings()?.add;
|
|
1365
|
-
if (!addParams) {
|
|
1366
|
-
return 'Add New';
|
|
1367
|
-
}
|
|
1368
|
-
return addParams?.addButtonContent || 'Add New';
|
|
1369
|
-
});
|
|
1370
|
-
}
|
|
1371
|
-
onAdd(event) {
|
|
1372
|
-
event.preventDefault();
|
|
1373
|
-
event.stopPropagation();
|
|
1374
|
-
this.create.emit();
|
|
1375
|
-
}
|
|
1376
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AddButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1377
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AddButtonComponent, isStandalone: true, selector: "[ng2-st-add-button]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { create: "create" }, host: { classAttribute: "ng2-smart-actions-title ng2-smart-actions-title-add" }, ngImport: i0, template: `
|
|
1378
|
-
@if (isActionAdd()) {
|
|
1379
|
-
<a
|
|
1380
|
-
href="#"
|
|
1381
|
-
class="ng2-smart-action ng2-smart-action-add-add"
|
|
1382
|
-
[innerHTML]="addNewButtonContent()"
|
|
1383
|
-
(click)="onAdd($event)"></a>
|
|
1384
|
-
}
|
|
1385
|
-
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1386
|
-
}
|
|
1387
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AddButtonComponent, decorators: [{
|
|
1388
|
-
type: Component,
|
|
1389
|
-
args: [{
|
|
1390
|
-
selector: '[ng2-st-add-button]',
|
|
1391
|
-
template: `
|
|
1392
|
-
@if (isActionAdd()) {
|
|
1393
|
-
<a
|
|
1394
|
-
href="#"
|
|
1395
|
-
class="ng2-smart-action ng2-smart-action-add-add"
|
|
1396
|
-
[innerHTML]="addNewButtonContent()"
|
|
1397
|
-
(click)="onAdd($event)"></a>
|
|
1398
|
-
}
|
|
1399
|
-
`,
|
|
1400
|
-
host: {
|
|
1401
|
-
class: 'ng2-smart-actions-title ng2-smart-actions-title-add',
|
|
1402
|
-
},
|
|
1403
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1404
|
-
}]
|
|
1405
|
-
}] });
|
|
1406
|
-
|
|
1407
|
-
class ColumnTitleComponent {
|
|
1408
|
-
constructor() {
|
|
1409
|
-
this.source = input.required();
|
|
1410
|
-
this.column = input.required();
|
|
1411
|
-
this.currentSortDirection = computed(() => {
|
|
1412
|
-
const { field, direction } = this.source().getSort();
|
|
1413
|
-
return this.column().id === field ? direction : null;
|
|
1414
|
-
});
|
|
1415
|
-
this.currentSortDirectionSymbol = computed(() => {
|
|
1416
|
-
return !this.currentSortDirection() ? '' : this.currentSortDirection() === 'asc' ? '↑' : '↓';
|
|
1417
|
-
});
|
|
1418
|
-
}
|
|
1419
|
-
_sort(event) {
|
|
1420
|
-
event.preventDefault();
|
|
1421
|
-
const { id: field, title } = this.column();
|
|
1422
|
-
this.source().setSort({
|
|
1423
|
-
field,
|
|
1424
|
-
title,
|
|
1425
|
-
direction: this.currentSortDirection() === 'desc' ? 'asc' : 'desc',
|
|
1426
|
-
compare: this.column().compareFunction,
|
|
1427
|
-
});
|
|
1428
|
-
}
|
|
1429
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1430
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ColumnTitleComponent, isStandalone: true, selector: "ng2-st-column-title", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
1431
|
-
@if (column().isSortable) {
|
|
1432
|
-
<a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort">
|
|
1433
|
-
{{ column().title }}
|
|
1434
|
-
<span class="sort-direction">{{ currentSortDirectionSymbol() }}</span>
|
|
1435
|
-
</a>
|
|
1436
|
-
} @else {
|
|
1437
|
-
<span class="ng2-smart-sort">{{ column().title }}</span>
|
|
1438
|
-
}
|
|
1439
|
-
`, isInline: true, styles: ["a.sort{white-space:nowrap}a.sort.asc,a.sort.desc{font-weight:700}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1440
|
-
}
|
|
1441
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, decorators: [{
|
|
1442
|
-
type: Component,
|
|
1443
|
-
args: [{ selector: 'ng2-st-column-title', template: `
|
|
1444
|
-
@if (column().isSortable) {
|
|
1445
|
-
<a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort">
|
|
1446
|
-
{{ column().title }}
|
|
1447
|
-
<span class="sort-direction">{{ currentSortDirectionSymbol() }}</span>
|
|
1448
|
-
</a>
|
|
1449
|
-
} @else {
|
|
1450
|
-
<span class="ng2-smart-sort">{{ column().title }}</span>
|
|
1451
|
-
}
|
|
1452
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["a.sort{white-space:nowrap}a.sort.asc,a.sort.desc{font-weight:700}\n"] }]
|
|
1453
|
-
}] });
|
|
1454
|
-
|
|
1455
1350
|
class CheckboxFilterComponent extends BaseFilterComponent {
|
|
1456
1351
|
constructor() {
|
|
1457
1352
|
super();
|
|
@@ -1490,7 +1385,6 @@ class CheckboxFilterComponent extends BaseFilterComponent {
|
|
|
1490
1385
|
(ngModelChange)="setCheckFilter($event)"
|
|
1491
1386
|
[class]="inputClass()"
|
|
1492
1387
|
class="form-control" />
|
|
1493
|
-
<label [for]="column().id">{{ column().title }}</label>
|
|
1494
1388
|
@if (filterIsActive()) {
|
|
1495
1389
|
<a href="#" (click)="resetFilter($event)">{{ column().getFilterConfig()?.resetText || 'reset' }}</a>
|
|
1496
1390
|
}
|
|
@@ -1508,7 +1402,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
1508
1402
|
(ngModelChange)="setCheckFilter($event)"
|
|
1509
1403
|
[class]="inputClass()"
|
|
1510
1404
|
class="form-control" />
|
|
1511
|
-
<label [for]="column().id">{{ column().title }}</label>
|
|
1512
1405
|
@if (filterIsActive()) {
|
|
1513
1406
|
<a href="#" (click)="resetFilter($event)">{{ column().getFilterConfig()?.resetText || 'reset' }}</a>
|
|
1514
1407
|
}
|
|
@@ -1548,7 +1441,7 @@ class SelectFilterComponent extends BaseFilterComponent {
|
|
|
1548
1441
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1549
1442
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: SelectFilterComponent, isStandalone: true, selector: "ng2-select-filter", usesInheritance: true, ngImport: i0, template: `
|
|
1550
1443
|
<select [class]="inputClass()" class="form-control" [formControl]="inputControl">
|
|
1551
|
-
<option value="">{{ column().getFilterConfig().selectText }}</option>
|
|
1444
|
+
<option value="null">{{ column().getFilterConfig().selectText || 'all' }}</option>
|
|
1552
1445
|
@for (option of column().getFilterConfig().list; track $index) {
|
|
1553
1446
|
<option [value]="option.value">
|
|
1554
1447
|
{{ option.title }}
|
|
@@ -1563,7 +1456,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
1563
1456
|
selector: 'ng2-select-filter',
|
|
1564
1457
|
template: `
|
|
1565
1458
|
<select [class]="inputClass()" class="form-control" [formControl]="inputControl">
|
|
1566
|
-
<option value="">{{ column().getFilterConfig().selectText }}</option>
|
|
1459
|
+
<option value="null">{{ column().getFilterConfig().selectText || 'all' }}</option>
|
|
1567
1460
|
@for (option of column().getFilterConfig().list; track $index) {
|
|
1568
1461
|
<option [value]="option.value">
|
|
1569
1462
|
{{ option.title }}
|
|
@@ -1789,22 +1682,119 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
1789
1682
|
`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CustomFilterComponent, BuildInFilterComponent], styles: [":host .ng2-smart-filter ::ng-deep input,:host .ng2-smart-filter ::ng-deep select{width:100%;line-height:normal;padding:.375em .75em;font-weight:400}:host .ng2-smart-filter ::ng-deep input[type=search]{box-sizing:inherit}:host .ng2-smart-filter ::ng-deep .completer-dropdown-holder{font-weight:400}:host .ng2-smart-filter ::ng-deep a{font-weight:400}\n"] }]
|
|
1790
1683
|
}] });
|
|
1791
1684
|
|
|
1685
|
+
class AddButtonComponent {
|
|
1686
|
+
constructor() {
|
|
1687
|
+
this.grid = input.required();
|
|
1688
|
+
this.create = output();
|
|
1689
|
+
this.isActionAdd = computed(() => {
|
|
1690
|
+
const actions = this.grid().settings().actions;
|
|
1691
|
+
if (!actions) {
|
|
1692
|
+
return false;
|
|
1693
|
+
}
|
|
1694
|
+
return !!actions.add;
|
|
1695
|
+
});
|
|
1696
|
+
this.addNewButtonContent = computed(() => {
|
|
1697
|
+
const addParams = this.grid().settings()?.add;
|
|
1698
|
+
if (!addParams) {
|
|
1699
|
+
return 'Add New';
|
|
1700
|
+
}
|
|
1701
|
+
return addParams?.addButtonContent || 'Add New';
|
|
1702
|
+
});
|
|
1703
|
+
}
|
|
1704
|
+
onAdd(event) {
|
|
1705
|
+
event.preventDefault();
|
|
1706
|
+
event.stopPropagation();
|
|
1707
|
+
this.create.emit();
|
|
1708
|
+
}
|
|
1709
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AddButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1710
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: AddButtonComponent, isStandalone: true, selector: "[ng2-st-add-button]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { create: "create" }, host: { classAttribute: "ng2-smart-actions-title ng2-smart-actions-title-add" }, ngImport: i0, template: `
|
|
1711
|
+
@if (isActionAdd()) {
|
|
1712
|
+
<a
|
|
1713
|
+
href="#"
|
|
1714
|
+
class="ng2-smart-action ng2-smart-action-add-add"
|
|
1715
|
+
[innerHTML]="addNewButtonContent()"
|
|
1716
|
+
(click)="onAdd($event)"></a>
|
|
1717
|
+
}
|
|
1718
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1719
|
+
}
|
|
1720
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AddButtonComponent, decorators: [{
|
|
1721
|
+
type: Component,
|
|
1722
|
+
args: [{
|
|
1723
|
+
selector: '[ng2-st-add-button]',
|
|
1724
|
+
template: `
|
|
1725
|
+
@if (isActionAdd()) {
|
|
1726
|
+
<a
|
|
1727
|
+
href="#"
|
|
1728
|
+
class="ng2-smart-action ng2-smart-action-add-add"
|
|
1729
|
+
[innerHTML]="addNewButtonContent()"
|
|
1730
|
+
(click)="onAdd($event)"></a>
|
|
1731
|
+
}
|
|
1732
|
+
`,
|
|
1733
|
+
host: {
|
|
1734
|
+
class: 'ng2-smart-actions-title ng2-smart-actions-title-add',
|
|
1735
|
+
},
|
|
1736
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1737
|
+
}]
|
|
1738
|
+
}] });
|
|
1739
|
+
|
|
1740
|
+
class ColumnTitleComponent {
|
|
1741
|
+
constructor() {
|
|
1742
|
+
this.source = input.required();
|
|
1743
|
+
this.column = input.required();
|
|
1744
|
+
this.currentSortDirection = computed(() => {
|
|
1745
|
+
const { field, direction } = this.source().getSort();
|
|
1746
|
+
return this.column().id === field ? direction : null;
|
|
1747
|
+
});
|
|
1748
|
+
this.currentSortDirectionSymbol = computed(() => {
|
|
1749
|
+
return !this.currentSortDirection() ? '' : this.currentSortDirection() === 'asc' ? '↑' : '↓';
|
|
1750
|
+
});
|
|
1751
|
+
}
|
|
1752
|
+
_sort(event) {
|
|
1753
|
+
event.preventDefault();
|
|
1754
|
+
const { id: field, title } = this.column();
|
|
1755
|
+
this.source().setSort({
|
|
1756
|
+
field,
|
|
1757
|
+
title,
|
|
1758
|
+
direction: this.currentSortDirection() === 'desc' ? 'asc' : 'desc',
|
|
1759
|
+
compare: this.column().compareFunction,
|
|
1760
|
+
});
|
|
1761
|
+
}
|
|
1762
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1763
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: ColumnTitleComponent, isStandalone: true, selector: "ng2-st-column-title", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
1764
|
+
@if (column().isSortable) {
|
|
1765
|
+
<a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort">
|
|
1766
|
+
{{ column().title }}
|
|
1767
|
+
<span class="sort-direction">{{ currentSortDirectionSymbol() }}</span>
|
|
1768
|
+
</a>
|
|
1769
|
+
} @else {
|
|
1770
|
+
<span class="ng2-smart-sort">{{ column().title }}</span>
|
|
1771
|
+
}
|
|
1772
|
+
`, isInline: true, styles: ["a.sort{white-space:nowrap}a.sort.asc,a.sort.desc{font-weight:700}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1773
|
+
}
|
|
1774
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: ColumnTitleComponent, decorators: [{
|
|
1775
|
+
type: Component,
|
|
1776
|
+
args: [{ selector: 'ng2-st-column-title', template: `
|
|
1777
|
+
@if (column().isSortable) {
|
|
1778
|
+
<a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort">
|
|
1779
|
+
{{ column().title }}
|
|
1780
|
+
<span class="sort-direction">{{ currentSortDirectionSymbol() }}</span>
|
|
1781
|
+
</a>
|
|
1782
|
+
} @else {
|
|
1783
|
+
<span class="ng2-smart-sort">{{ column().title }}</span>
|
|
1784
|
+
}
|
|
1785
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["a.sort{white-space:nowrap}a.sort.asc,a.sort.desc{font-weight:700}\n"] }]
|
|
1786
|
+
}] });
|
|
1787
|
+
|
|
1792
1788
|
class TheadFiltersRowComponent {
|
|
1793
1789
|
constructor() {
|
|
1794
1790
|
this.grid = input.required();
|
|
1795
1791
|
this.source = input.required();
|
|
1796
1792
|
this.withoutCreateButton = input(false);
|
|
1793
|
+
this.inputClass = input('');
|
|
1797
1794
|
this.create = output();
|
|
1798
|
-
this.filterInputClass = computed(() => {
|
|
1799
|
-
const filterOptions = this.grid().settings()?.filter;
|
|
1800
|
-
if (!filterOptions) {
|
|
1801
|
-
return '';
|
|
1802
|
-
}
|
|
1803
|
-
return filterOptions.inputClass || '';
|
|
1804
|
-
});
|
|
1805
1795
|
}
|
|
1806
1796
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TheadFiltersRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1807
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadFiltersRowComponent, isStandalone: true, selector: "[ng2-st-thead-filters-row]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, withoutCreateButton: { classPropertyName: "withoutCreateButton", publicName: "withoutCreateButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { create: "create" }, ngImport: i0, template: `
|
|
1797
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TheadFiltersRowComponent, isStandalone: true, selector: "[ng2-st-thead-filters-row]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, withoutCreateButton: { classPropertyName: "withoutCreateButton", publicName: "withoutCreateButton", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { create: "create" }, ngImport: i0, template: `
|
|
1808
1798
|
@if (grid().isMultiSelectVisible()) {
|
|
1809
1799
|
<th></th>
|
|
1810
1800
|
}
|
|
@@ -1813,7 +1803,7 @@ class TheadFiltersRowComponent {
|
|
|
1813
1803
|
}
|
|
1814
1804
|
@for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
|
|
1815
1805
|
<th class="ng2-smart-th {{ column.id }}">
|
|
1816
|
-
<ng2-smart-table-filter [source]="source()" [column]="column" [inputClass]="
|
|
1806
|
+
<ng2-smart-table-filter [source]="source()" [column]="column" [inputClass]="inputClass()">
|
|
1817
1807
|
</ng2-smart-table-filter>
|
|
1818
1808
|
</th>
|
|
1819
1809
|
}
|
|
@@ -1835,7 +1825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
1835
1825
|
}
|
|
1836
1826
|
@for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {
|
|
1837
1827
|
<th class="ng2-smart-th {{ column.id }}">
|
|
1838
|
-
<ng2-smart-table-filter [source]="source()" [column]="column" [inputClass]="
|
|
1828
|
+
<ng2-smart-table-filter [source]="source()" [column]="column" [inputClass]="inputClass()">
|
|
1839
1829
|
</ng2-smart-table-filter>
|
|
1840
1830
|
</th>
|
|
1841
1831
|
}
|
|
@@ -1956,8 +1946,19 @@ class Ng2SmartTableTheadComponent {
|
|
|
1956
1946
|
this.columnsWithSort = computed(() => this.grid()
|
|
1957
1947
|
.dataSet.getColumns()
|
|
1958
1948
|
.filter((column) => column.isSortable));
|
|
1949
|
+
this.columnsWithSortLength = computed(() => this.columnsWithSort().length);
|
|
1950
|
+
this.columnsWithFiltersLength = computed(() => this.grid()
|
|
1951
|
+
.dataSet.getColumns()
|
|
1952
|
+
.filter((column) => column.isFilterable).length);
|
|
1959
1953
|
this.currentSortConfig = computed(() => this.source().getSort());
|
|
1960
1954
|
this.dropdown = signal(null);
|
|
1955
|
+
this.filterInputClass = computed(() => {
|
|
1956
|
+
const filterOptions = this.grid().settings()?.filter;
|
|
1957
|
+
if (!filterOptions) {
|
|
1958
|
+
return '';
|
|
1959
|
+
}
|
|
1960
|
+
return filterOptions.inputClass || '';
|
|
1961
|
+
});
|
|
1961
1962
|
}
|
|
1962
1963
|
toggleDropdown(type) {
|
|
1963
1964
|
this.dropdown.update((value) => {
|
|
@@ -1982,17 +1983,18 @@ class Ng2SmartTableTheadComponent {
|
|
|
1982
1983
|
this.dropdown.set(null);
|
|
1983
1984
|
}
|
|
1984
1985
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1985
|
-
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 <div class=\"current-column-title\">\n
|
|
1986
|
+
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 {{ currentSortConfig().title }}\n <span class=\"sort-direction\">{{ currentSortConfig().direction === 'asc' ? '\u2191' : '\u2193' }}</span>\n </a>\n @if (columnsWithSortLength() > 1) {\n <button\n class=\"sort-dropdown-toggle-button\"\n (click)=\"toggleDropdown('sort')\"\n [class.active]=\"dropdown() === 'sort'\"\n aria-label=\"Toggle sort options\">\n <span class=\"sort-icon\">\u25BC</span>\n </button>\n }\n </div>\n }\n\n <div class=\"header-actions\">\n @if (columnsWithFiltersLength()) {\n <button class=\"filter-toggle\" (click)=\"toggleDropdown('filters')\" aria-label=\"Toggle filters\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\">\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <path\n stroke=\"#000000\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z\"></path>\n </g>\n </svg>\n </button>\n }\n </div>\n </div>\n </th>\n </tr>\n <tr class=\"mobile-header-bottom-row\">\n <th colspan=\"50\" [class.dialog-active]=\"dropdown()\">\n <div class=\"overlay\" (click)=\"toggleDropdown(null)\"></div>\n <div class=\"dropdown\">\n <div class=\"dropdown-header\">\n @if (dropdown() === 'filters') {\n <button type=\"button\" (click)=\"clearAllFilters()\" aria-label=\"Close filters\">reset all</button>\n } @else {\n <p></p>\n }\n <button type=\"button\" class=\"close-dialog-button\" (click)=\"toggleDropdown(null)\" aria-label=\"Close filters\">\n <span></span>\n </button>\n </div>\n <div class=\"dropdown-content\">\n @if (dropdown() === 'sort') {\n @for (column of columnsWithSort(); track $index) {\n <th class=\"titles\">\n <ng2-st-column-title class=\"sort-option\" [column]=\"column\" [source]=\"source()\"></ng2-st-column-title>\n </th>\n }\n }\n @if (dropdown() === 'filters') {\n <ng-container [ngTemplateOutlet]=\"mobileFilters\"></ng-container>\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 (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\n<ng-template #mobileFilters>\n <div class=\"ng2-smart-mobil-filters\">\n @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {\n @if (column.isFilterable) {\n <div class=\"ng2-smart-filter\">\n <label for=\"\" class=\"ng2-smart-filter-label\">{{ column.title }}</label>\n <ng2-smart-table-filter [source]=\"source()\" [column]=\"column\" [inputClass]=\"filterInputClass()\">\n </ng2-smart-table-filter>\n </div>\n }\n }\n </div>\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)}tr.mobile-header-top-row .mobile-header-content .filter-toggle svg{height:1rem;width:1rem}tr.mobile-header-bottom-row{position:relative}tr.mobile-header-bottom-row .dropdown{position:absolute;opacity:0;pointer-events:none;top:1rem;left:50%;translate:-50%;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%));z-index:10;max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto;transition:opacity .3s ease}tr.mobile-header-bottom-row .dialog-active .dropdown{opacity:1;pointer-events:all}tr.mobile-header-bottom-row .dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}tr.mobile-header-bottom-row .dropdown-content{display:flex;flex-direction:column}tr.mobile-header-bottom-row .dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}tr.mobile-header-bottom-row .dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}tr.mobile-header-bottom-row .close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}tr.mobile-header-bottom-row .close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}tr.mobile-header-bottom-row .close-dialog-button:after,tr.mobile-header-bottom-row .close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}tr.mobile-header-bottom-row .close-dialog-button:before{rotate:45deg}tr.mobile-header-bottom-row .close-dialog-button:after{position:absolute;rotate:-45deg}.overlay{position:fixed;background:var(--table-header-dropdown-overlay-background, color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));inset:0;z-index:-20}.dialog-active .overlay{z-index:2}.dropdown{z-index:1}\n"], dependencies: [{ kind: "component", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: ["grid", "source"], outputs: ["selectAllRows"] }, { kind: "component", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: ["grid"], outputs: ["create"] }, { kind: "component", type: FilterComponent, selector: "ng2-smart-table-filter", inputs: ["column", "source", "inputClass"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["source", "column"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1986
1987
|
}
|
|
1987
1988
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
|
|
1988
1989
|
type: Component,
|
|
1989
1990
|
args: [{ selector: '[ng2-st-thead]', imports: [
|
|
1990
1991
|
TheadTitlesRowComponent,
|
|
1991
1992
|
AddButtonComponent,
|
|
1993
|
+
FilterComponent,
|
|
1992
1994
|
ColumnTitleComponent,
|
|
1993
1995
|
TheadFiltersRowComponent,
|
|
1994
1996
|
NgTemplateOutlet,
|
|
1995
|
-
], 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 <div class=\"current-column-title\">\n
|
|
1997
|
+
], 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 {{ currentSortConfig().title }}\n <span class=\"sort-direction\">{{ currentSortConfig().direction === 'asc' ? '\u2191' : '\u2193' }}</span>\n </a>\n @if (columnsWithSortLength() > 1) {\n <button\n class=\"sort-dropdown-toggle-button\"\n (click)=\"toggleDropdown('sort')\"\n [class.active]=\"dropdown() === 'sort'\"\n aria-label=\"Toggle sort options\">\n <span class=\"sort-icon\">\u25BC</span>\n </button>\n }\n </div>\n }\n\n <div class=\"header-actions\">\n @if (columnsWithFiltersLength()) {\n <button class=\"filter-toggle\" (click)=\"toggleDropdown('filters')\" aria-label=\"Toggle filters\">\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\">\n <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n <g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g>\n <g id=\"SVGRepo_iconCarrier\">\n <path\n stroke=\"#000000\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z\"></path>\n </g>\n </svg>\n </button>\n }\n </div>\n </div>\n </th>\n </tr>\n <tr class=\"mobile-header-bottom-row\">\n <th colspan=\"50\" [class.dialog-active]=\"dropdown()\">\n <div class=\"overlay\" (click)=\"toggleDropdown(null)\"></div>\n <div class=\"dropdown\">\n <div class=\"dropdown-header\">\n @if (dropdown() === 'filters') {\n <button type=\"button\" (click)=\"clearAllFilters()\" aria-label=\"Close filters\">reset all</button>\n } @else {\n <p></p>\n }\n <button type=\"button\" class=\"close-dialog-button\" (click)=\"toggleDropdown(null)\" aria-label=\"Close filters\">\n <span></span>\n </button>\n </div>\n <div class=\"dropdown-content\">\n @if (dropdown() === 'sort') {\n @for (column of columnsWithSort(); track $index) {\n <th class=\"titles\">\n <ng2-st-column-title class=\"sort-option\" [column]=\"column\" [source]=\"source()\"></ng2-st-column-title>\n </th>\n }\n }\n @if (dropdown() === 'filters') {\n <ng-container [ngTemplateOutlet]=\"mobileFilters\"></ng-container>\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 (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\n<ng-template #mobileFilters>\n <div class=\"ng2-smart-mobil-filters\">\n @for (column of grid().dataSet.getVisibleColumns(); track column.id + $index) {\n @if (column.isFilterable) {\n <div class=\"ng2-smart-filter\">\n <label for=\"\" class=\"ng2-smart-filter-label\">{{ column.title }}</label>\n <ng2-smart-table-filter [source]=\"source()\" [column]=\"column\" [inputClass]=\"filterInputClass()\">\n </ng2-smart-table-filter>\n </div>\n }\n }\n </div>\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)}tr.mobile-header-top-row .mobile-header-content .filter-toggle svg{height:1rem;width:1rem}tr.mobile-header-bottom-row{position:relative}tr.mobile-header-bottom-row .dropdown{position:absolute;opacity:0;pointer-events:none;top:1rem;left:50%;translate:-50%;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%));z-index:10;max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto;transition:opacity .3s ease}tr.mobile-header-bottom-row .dialog-active .dropdown{opacity:1;pointer-events:all}tr.mobile-header-bottom-row .dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}tr.mobile-header-bottom-row .dropdown-content{display:flex;flex-direction:column}tr.mobile-header-bottom-row .dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}tr.mobile-header-bottom-row .dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}tr.mobile-header-bottom-row .close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}tr.mobile-header-bottom-row .close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}tr.mobile-header-bottom-row .close-dialog-button:after,tr.mobile-header-bottom-row .close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}tr.mobile-header-bottom-row .close-dialog-button:before{rotate:45deg}tr.mobile-header-bottom-row .close-dialog-button:after{position:absolute;rotate:-45deg}.overlay{position:fixed;background:var(--table-header-dropdown-overlay-background, color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));inset:0;z-index:-20}.dialog-active .overlay{z-index:2}.dropdown{z-index:1}\n"] }]
|
|
1996
1998
|
}] });
|
|
1997
1999
|
|
|
1998
2000
|
class DataSet {
|
|
@@ -2263,15 +2265,18 @@ class Grid {
|
|
|
2263
2265
|
if (!columns || !columns.length) {
|
|
2264
2266
|
return false;
|
|
2265
2267
|
}
|
|
2266
|
-
|
|
2267
|
-
if (!
|
|
2268
|
+
let initialSortColumn = columns?.find((column) => column?.sortDirection);
|
|
2269
|
+
if (!initialSortColumn) {
|
|
2270
|
+
initialSortColumn = columns?.find((column) => column.sort);
|
|
2271
|
+
}
|
|
2272
|
+
if (!initialSortColumn) {
|
|
2268
2273
|
return false;
|
|
2269
2274
|
}
|
|
2270
2275
|
return {
|
|
2271
|
-
field:
|
|
2272
|
-
title:
|
|
2273
|
-
direction:
|
|
2274
|
-
compare:
|
|
2276
|
+
field: initialSortColumn.key,
|
|
2277
|
+
title: initialSortColumn.title,
|
|
2278
|
+
direction: initialSortColumn.sortDirection || 'asc',
|
|
2279
|
+
compare: initialSortColumn.compareFunction,
|
|
2275
2280
|
};
|
|
2276
2281
|
}
|
|
2277
2282
|
getSelectedRowsData() {
|