@den4ik92/ng2-smart-table 19.4.8 → 19.5.1
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 +68 -75
- package/fesm2022/den4ik92-ng2-smart-table.mjs.map +1 -1
- package/lib/components/tbody/tbody.component.d.ts +1 -0
- package/lib/lib/data-set/data-set.d.ts +1 -1
- package/lib/lib/data-source/local/local.data-source.d.ts +2 -3
- package/lib/lib/data-source/local/local.filter.d.ts +1 -1
- package/lib/lib/data-source/local/local.sorter.d.ts +1 -3
- package/lib/lib/grid.d.ts +0 -1
- package/lib/lib/interfaces/smart-table.models.d.ts +2 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed,
|
|
2
|
+
import { input, computed, ChangeDetectionStrategy, Component, signal, effect, inject, ElementRef, Directive, ViewContainerRef, ViewChild, output, viewChild } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/forms';
|
|
4
4
|
import { UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
5
5
|
import { distinctUntilChanged, debounceTime, takeUntil, switchMap, take } from 'rxjs/operators';
|
|
@@ -200,7 +200,6 @@ function isObjectsIdentical(a, b) {
|
|
|
200
200
|
function CheckParentElementClassRecursive(element, className) {
|
|
201
201
|
if (!element)
|
|
202
202
|
return false;
|
|
203
|
-
console.log(element, element.classList.contains(className));
|
|
204
203
|
if (element.classList.contains(className)) {
|
|
205
204
|
return true;
|
|
206
205
|
}
|
|
@@ -523,12 +522,17 @@ class DataSource {
|
|
|
523
522
|
return Promise.resolve(true);
|
|
524
523
|
}
|
|
525
524
|
async remove(element) {
|
|
526
|
-
this.data.update((old) => old.filter((el) => el
|
|
527
|
-
this.emitOnChanged({ action: SmartTableOnChangedEventName.remove, item: element });
|
|
525
|
+
this.data.update((old) => old.filter((el) => !isObjectsIdentical(el, element)));
|
|
526
|
+
this.emitOnChanged({ action: SmartTableOnChangedEventName.remove, item: element }, this.data());
|
|
528
527
|
return Promise.resolve(true);
|
|
529
528
|
}
|
|
530
529
|
async update(oldItem, newItem) {
|
|
531
|
-
this.data.update((old) => old.map((el) =>
|
|
530
|
+
this.data.update((old) => old.map((el) => {
|
|
531
|
+
if (isObjectsIdentical(el, oldItem)) {
|
|
532
|
+
return newItem;
|
|
533
|
+
}
|
|
534
|
+
return el;
|
|
535
|
+
}));
|
|
532
536
|
this.emitOnChanged({ action: SmartTableOnChangedEventName.update, oldItem, newItem });
|
|
533
537
|
return Promise.resolve(true);
|
|
534
538
|
}
|
|
@@ -549,14 +553,15 @@ class DataSource {
|
|
|
549
553
|
return;
|
|
550
554
|
}
|
|
551
555
|
const foundIndex = this.filters().findIndex((filter) => filter.field === newFilter.field);
|
|
556
|
+
const newSearchString = typeof newFilter.search === 'undefined' || newFilter.search === null ? '' : `${newFilter.search}`;
|
|
552
557
|
if (foundIndex === -1) {
|
|
553
|
-
if (
|
|
558
|
+
if (newSearchString?.length) {
|
|
554
559
|
this.filters.set([...this.filters(), newFilter]);
|
|
555
560
|
}
|
|
556
561
|
}
|
|
557
562
|
else {
|
|
558
|
-
const filtersTemp = this.filters();
|
|
559
|
-
if (
|
|
563
|
+
const filtersTemp = this.filters().slice(0);
|
|
564
|
+
if (newSearchString?.length) {
|
|
560
565
|
filtersTemp[foundIndex].search = newFilter.search;
|
|
561
566
|
}
|
|
562
567
|
else {
|
|
@@ -596,25 +601,26 @@ class DataSource {
|
|
|
596
601
|
filters: this.getFilters(),
|
|
597
602
|
sort: this.getSort(),
|
|
598
603
|
};
|
|
599
|
-
if (eventData.action === SmartTableOnChangedEventName.remove) {
|
|
600
|
-
actionData.elements = (newElements || this.data()).filter((el) => el !== eventData.item);
|
|
601
|
-
}
|
|
602
604
|
this.onChangedSource.next(actionData);
|
|
603
605
|
}
|
|
604
606
|
}
|
|
605
607
|
|
|
606
|
-
function
|
|
608
|
+
function exactMatch(value, search) {
|
|
609
|
+
return value.toString().toLowerCase() === search.toString().toLowerCase();
|
|
610
|
+
}
|
|
611
|
+
function includeMatch(value, search) {
|
|
607
612
|
return value.toString().toLowerCase().includes(search.toString().toLowerCase());
|
|
608
613
|
}
|
|
609
|
-
|
|
614
|
+
function isElementSatisfied(element, filters) {
|
|
610
615
|
return filters.every((filter) => {
|
|
611
|
-
|
|
616
|
+
const search = `${filter.search}`;
|
|
617
|
+
if (!search?.length) {
|
|
612
618
|
return true;
|
|
613
619
|
}
|
|
614
|
-
const filterFunction = filter.filter ||
|
|
620
|
+
const filterFunction = filter.filter || (filter.type === 'list' ? exactMatch : includeMatch);
|
|
615
621
|
try {
|
|
616
622
|
const value = element[filter.field];
|
|
617
|
-
return filterFunction(value,
|
|
623
|
+
return filterFunction(value, search);
|
|
618
624
|
}
|
|
619
625
|
catch {
|
|
620
626
|
return false;
|
|
@@ -635,20 +641,37 @@ function compareValues(direction, a, b) {
|
|
|
635
641
|
}
|
|
636
642
|
return 0;
|
|
637
643
|
}
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
return compare
|
|
644
|
-
}
|
|
645
|
-
|
|
644
|
+
function localSort(data, field, direction, customCompare) {
|
|
645
|
+
const dir = direction === 'asc' ? 1 : -1;
|
|
646
|
+
const compare = customCompare ? customCompare : compareValues;
|
|
647
|
+
return data.sort((a, b) => {
|
|
648
|
+
try {
|
|
649
|
+
return compare(dir, a[field], b[field]);
|
|
650
|
+
}
|
|
651
|
+
catch {
|
|
652
|
+
return 0;
|
|
653
|
+
}
|
|
654
|
+
});
|
|
646
655
|
}
|
|
647
656
|
|
|
648
657
|
class LocalDataSource extends DataSource {
|
|
649
658
|
constructor(data = []) {
|
|
650
659
|
super();
|
|
651
|
-
this.filteredAndSorted =
|
|
660
|
+
this.filteredAndSorted = computed(() => {
|
|
661
|
+
let list = this.data().slice(0);
|
|
662
|
+
const filters = this.filters();
|
|
663
|
+
if (filters.length) {
|
|
664
|
+
list = list.filter((element) => isElementSatisfied(element, filters));
|
|
665
|
+
}
|
|
666
|
+
if (this.sortConf()) {
|
|
667
|
+
const { field, direction, compare } = this.sortConf();
|
|
668
|
+
list = localSort(list, field, direction, compare);
|
|
669
|
+
}
|
|
670
|
+
return list;
|
|
671
|
+
});
|
|
672
|
+
this.paginatedList = computed(() => {
|
|
673
|
+
return this.paginate(this.filteredAndSorted());
|
|
674
|
+
});
|
|
652
675
|
this.count = computed(() => this.filteredAndSorted().length);
|
|
653
676
|
this.data.set(data);
|
|
654
677
|
}
|
|
@@ -676,56 +699,21 @@ class LocalDataSource extends DataSource {
|
|
|
676
699
|
reset(silent = false) {
|
|
677
700
|
if (silent) {
|
|
678
701
|
this.filters.set([]);
|
|
679
|
-
this.sortConf.set({ field: '', title: '', direction: 'asc' });
|
|
680
702
|
this.pagingConf.update((old) => ({ ...old, page: 1 }));
|
|
681
703
|
}
|
|
682
704
|
else {
|
|
683
705
|
this.setFilters([], false);
|
|
684
|
-
this.setSort({ field: '', title: '', direction: 'asc' }, false);
|
|
685
706
|
if (this.pagingConf().display) {
|
|
686
707
|
this.setPage(1);
|
|
687
708
|
}
|
|
688
709
|
}
|
|
689
710
|
}
|
|
690
711
|
async emitOnChanged(event, newElements) {
|
|
691
|
-
|
|
692
|
-
const action = event.action;
|
|
693
|
-
if (['filter', 'refresh', 'load', 'add', 'prepend', 'appendMany'].includes(action)) {
|
|
694
|
-
renderData = await this.filter(newElements || this.data().slice(0));
|
|
695
|
-
renderData = await this.sort(renderData);
|
|
696
|
-
this.filteredAndSorted.set(renderData);
|
|
697
|
-
}
|
|
698
|
-
if (action === SmartTableOnChangedEventName.sort) {
|
|
699
|
-
renderData = await this.sort(renderData);
|
|
700
|
-
this.filteredAndSorted.set(renderData);
|
|
701
|
-
}
|
|
702
|
-
if (this.pagingConf().display &&
|
|
703
|
-
['page', 'paging', 'refresh', 'load', 'sort', 'filter'].includes(action)) {
|
|
704
|
-
renderData = this.paginate(this.filteredAndSorted());
|
|
705
|
-
}
|
|
706
|
-
super.emitOnChanged(event, renderData);
|
|
712
|
+
super.emitOnChanged(event, this.paginatedList());
|
|
707
713
|
if (this.pagingConf().display && this.isPageOutOfBounce()) {
|
|
708
714
|
this.setPage(this.pagingConf().page - 1);
|
|
709
715
|
}
|
|
710
716
|
}
|
|
711
|
-
async sort(data) {
|
|
712
|
-
if (this.sortConf()) {
|
|
713
|
-
return LocalSorter.sort(data, this.sortConf().field, this.sortConf().direction, this.sortConf().compare);
|
|
714
|
-
}
|
|
715
|
-
return data;
|
|
716
|
-
}
|
|
717
|
-
async filter(data) {
|
|
718
|
-
if (!this.filters.length) {
|
|
719
|
-
return data;
|
|
720
|
-
}
|
|
721
|
-
const filtered = [];
|
|
722
|
-
await Promise.all(data.map(async (element) => {
|
|
723
|
-
if (await isElementSatisfied(element, this.filters())) {
|
|
724
|
-
filtered.push(element);
|
|
725
|
-
}
|
|
726
|
-
}));
|
|
727
|
-
return filtered;
|
|
728
|
-
}
|
|
729
717
|
paginate(data) {
|
|
730
718
|
if (this.pagingConf().display) {
|
|
731
719
|
return paginateList(data, this.pagingConf().page, this.pagingConf().perPage);
|
|
@@ -1189,11 +1177,11 @@ class TbodyCreateCancelComponent {
|
|
|
1189
1177
|
});
|
|
1190
1178
|
}
|
|
1191
1179
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyCreateCancelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1192
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TbodyCreateCancelComponent, isStandalone: true, selector: "ng2-st-tbody-create-cancel", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: false, transformFunction: null }, rowPending: { classPropertyName: "rowPending", publicName: "rowPending", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", cancelEdit: "cancelEdit" }, ngImport: i0, template: "<div class=\"buttons-wrap\">\n @if (!rowPending()) {\n <a\n href=\"#\"\n [id]=\"'row-' + rowIndex() + '_editing-confirm-button'\"\n class=\"ng2-smart-action ng2-smart-action-edit-save\"\n [innerHTML]=\"saveButtonContent()\"\n (click)=\"$event.preventDefault(); save.emit($event)\"></a>\n <a\n href=\"#\"\n [id]=\"'row-' + rowIndex() + '_editing-cancel-button'\"\n class=\"ng2-smart-action ng2-smart-action-edit-cancel\"\n [innerHTML]=\"cancelButtonContent()\"\n (click)=\"$event.preventDefault(); cancelEdit.emit($event)\"></a>\n } @else {\n <
|
|
1180
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TbodyCreateCancelComponent, isStandalone: true, selector: "ng2-st-tbody-create-cancel", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: false, transformFunction: null }, rowPending: { classPropertyName: "rowPending", publicName: "rowPending", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", cancelEdit: "cancelEdit" }, ngImport: i0, template: "<div class=\"buttons-wrap\">\n @if (!rowPending()) {\n <a\n href=\"#\"\n [id]=\"'row-' + rowIndex() + '_editing-confirm-button'\"\n class=\"ng2-smart-action ng2-smart-action-edit-save\"\n [innerHTML]=\"saveButtonContent()\"\n (click)=\"$event.preventDefault(); save.emit($event)\"></a>\n <a\n href=\"#\"\n [id]=\"'row-' + rowIndex() + '_editing-cancel-button'\"\n class=\"ng2-smart-action ng2-smart-action-edit-cancel\"\n [innerHTML]=\"cancelButtonContent()\"\n (click)=\"$event.preventDefault(); cancelEdit.emit($event)\"></a>\n } @else {\n <a class=\"ng2-smart-action ng2-smart-action-edit-save\">\n <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n </a>\n <a class=\"ng2-smart-action ng2-smart-action-edit-save\">\n <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n </a>\n }\n</div>\n\n<ng-template #spinner>\n <svg\n role=\"none\"\n (click)=\"$event.stopPropagation()\"\n style=\"height: 2rem; width: 2rem\"\n version=\"1.1\"\n id=\"L9\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 100 100\"\n enable-background=\"new 0 0 0 0\"\n xml:space=\"preserve\">\n <path\n fill=\"#e9e9e9\"\n d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\">\n <animateTransform\n attributeName=\"transform\"\n attributeType=\"XML\"\n type=\"rotate\"\n dur=\"1s\"\n from=\"0 50 50\"\n to=\"360 50 50\"\n repeatCount=\"indefinite\" />\n </path>\n </svg>\n</ng-template>\n", styles: [".buttons-wrap{display:flex;gap:.5rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1193
1181
|
}
|
|
1194
1182
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TbodyCreateCancelComponent, decorators: [{
|
|
1195
1183
|
type: Component,
|
|
1196
|
-
args: [{ selector: 'ng2-st-tbody-create-cancel', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"buttons-wrap\">\n @if (!rowPending()) {\n <a\n href=\"#\"\n [id]=\"'row-' + rowIndex() + '_editing-confirm-button'\"\n class=\"ng2-smart-action ng2-smart-action-edit-save\"\n [innerHTML]=\"saveButtonContent()\"\n (click)=\"$event.preventDefault(); save.emit($event)\"></a>\n <a\n href=\"#\"\n [id]=\"'row-' + rowIndex() + '_editing-cancel-button'\"\n class=\"ng2-smart-action ng2-smart-action-edit-cancel\"\n [innerHTML]=\"cancelButtonContent()\"\n (click)=\"$event.preventDefault(); cancelEdit.emit($event)\"></a>\n } @else {\n <
|
|
1184
|
+
args: [{ selector: 'ng2-st-tbody-create-cancel', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"buttons-wrap\">\n @if (!rowPending()) {\n <a\n href=\"#\"\n [id]=\"'row-' + rowIndex() + '_editing-confirm-button'\"\n class=\"ng2-smart-action ng2-smart-action-edit-save\"\n [innerHTML]=\"saveButtonContent()\"\n (click)=\"$event.preventDefault(); save.emit($event)\"></a>\n <a\n href=\"#\"\n [id]=\"'row-' + rowIndex() + '_editing-cancel-button'\"\n class=\"ng2-smart-action ng2-smart-action-edit-cancel\"\n [innerHTML]=\"cancelButtonContent()\"\n (click)=\"$event.preventDefault(); cancelEdit.emit($event)\"></a>\n } @else {\n <a class=\"ng2-smart-action ng2-smart-action-edit-save\">\n <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n </a>\n <a class=\"ng2-smart-action ng2-smart-action-edit-save\">\n <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n </a>\n }\n</div>\n\n<ng-template #spinner>\n <svg\n role=\"none\"\n (click)=\"$event.stopPropagation()\"\n style=\"height: 2rem; width: 2rem\"\n version=\"1.1\"\n id=\"L9\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 100 100\"\n enable-background=\"new 0 0 0 0\"\n xml:space=\"preserve\">\n <path\n fill=\"#e9e9e9\"\n d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\">\n <animateTransform\n attributeName=\"transform\"\n attributeType=\"XML\"\n type=\"rotate\"\n dur=\"1s\"\n from=\"0 50 50\"\n to=\"360 50 50\"\n repeatCount=\"indefinite\" />\n </path>\n </svg>\n</ng-template>\n", styles: [".buttons-wrap{display:flex;gap:.5rem}\n"] }]
|
|
1197
1185
|
}] });
|
|
1198
1186
|
|
|
1199
1187
|
class RowActionsComponent {
|
|
@@ -1265,11 +1253,11 @@ class RowActionsComponent {
|
|
|
1265
1253
|
this.deleteEmitter.emit();
|
|
1266
1254
|
}
|
|
1267
1255
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: RowActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1268
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: RowActionsComponent, isStandalone: true, selector: "ng2-row-actions", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { editEmitter: "editEmitter", deleteEmitter: "deleteEmitter", customActionEmitter: "customActionEmitter" }, ngImport: i0, template: "@if (!row().pending()) {\n @if (isActionEditActive()) {\n <a\n href=\"#\"\n [id]=\"'row-' + row().index + '_action-edit-button'\"\n class=\"ng2-smart-action ng2-smart-action-edit-edit\"\n [innerHTML]=\"editRowButtonContent()\"\n (click)=\"$event.stopPropagation(); $event.preventDefault();onEdit($event)\"></a>\n }\n @if (isActionDeleteActive()) {\n <a\n href=\"#\"\n [id]=\"'row-' + row().index + '_action-delete-button'\"\n class=\"ng2-smart-action ng2-smart-action-delete-delete\"\n [innerHTML]=\"deleteRowButtonContent()\"\n (click)=\"$event.stopPropagation(); $event.preventDefault();onDelete($event)\"></a>\n }\n @for (action of customActions(); track action.name) {\n <a\n [id]=\"'row-' + row().index + '_action-' + action.name + '-button'\"\n href=\"#\"\n class=\"ng2-smart-action ng2-smart-action-custom-custom\"\n [innerHTML]=\"action.title\"\n (click)=\"$event.stopPropagation(); $event.preventDefault(); onCustom(action)\"></a>\n }\n} @else {\n @for (item of allActionsCountArray(); track $index) {\n <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n }\n}\n\n<ng-template #spinner>\n <svg\n role=\"none\"\n (click)=\"$event.stopPropagation()\"\n style=\"height: 2rem; width: 2rem\"\n version=\"1.1\"\n id=\"L9\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 100 100\"\n enable-background=\"new 0 0 0 0\"\n xml:space=\"preserve\">\n <path\n fill=\"#e9e9e9\"\n d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\">\n <animateTransform\n attributeName=\"transform\"\n attributeType=\"XML\"\n type=\"rotate\"\n dur=\"1s\"\n from=\"0 50 50\"\n to=\"360 50 50\"\n repeatCount=\"indefinite\" />\n </path>\n </svg>\n</ng-template>\n", styles: ["a~a{margin-left:.5rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1256
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: RowActionsComponent, isStandalone: true, selector: "ng2-row-actions", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { editEmitter: "editEmitter", deleteEmitter: "deleteEmitter", customActionEmitter: "customActionEmitter" }, ngImport: i0, template: "@if (!row().pending()) {\n @if (isActionEditActive()) {\n <a\n href=\"#\"\n [id]=\"'row-' + row().index + '_action-edit-button'\"\n class=\"ng2-smart-action ng2-smart-action-edit-edit\"\n [innerHTML]=\"editRowButtonContent()\"\n (click)=\"$event.stopPropagation(); $event.preventDefault(); onEdit($event)\"></a>\n }\n @if (isActionDeleteActive()) {\n <a\n href=\"#\"\n [id]=\"'row-' + row().index + '_action-delete-button'\"\n class=\"ng2-smart-action ng2-smart-action-delete-delete\"\n [innerHTML]=\"deleteRowButtonContent()\"\n (click)=\"$event.stopPropagation(); $event.preventDefault(); onDelete($event)\"></a>\n }\n @for (action of customActions(); track action.name) {\n <a\n [id]=\"'row-' + row().index + '_action-' + action.name + '-button'\"\n href=\"#\"\n class=\"ng2-smart-action ng2-smart-action-custom-custom\"\n [innerHTML]=\"action.title\"\n (click)=\"$event.stopPropagation(); $event.preventDefault(); onCustom(action)\"></a>\n }\n} @else {\n @for (item of allActionsCountArray(); track $index) {\n <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n }\n}\n\n<ng-template #spinner>\n <svg\n role=\"none\"\n (click)=\"$event.stopPropagation()\"\n style=\"height: 2rem; width: 2rem\"\n version=\"1.1\"\n id=\"L9\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 100 100\"\n enable-background=\"new 0 0 0 0\"\n xml:space=\"preserve\">\n <path\n fill=\"#e9e9e9\"\n d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\">\n <animateTransform\n attributeName=\"transform\"\n attributeType=\"XML\"\n type=\"rotate\"\n dur=\"1s\"\n from=\"0 50 50\"\n to=\"360 50 50\"\n repeatCount=\"indefinite\" />\n </path>\n </svg>\n</ng-template>\n", styles: ["a~a{margin-left:.5rem}:host{display:flex;gap:.5rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1269
1257
|
}
|
|
1270
1258
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: RowActionsComponent, decorators: [{
|
|
1271
1259
|
type: Component,
|
|
1272
|
-
args: [{ selector: 'ng2-row-actions', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!row().pending()) {\n @if (isActionEditActive()) {\n <a\n href=\"#\"\n [id]=\"'row-' + row().index + '_action-edit-button'\"\n class=\"ng2-smart-action ng2-smart-action-edit-edit\"\n [innerHTML]=\"editRowButtonContent()\"\n (click)=\"$event.stopPropagation(); $event.preventDefault();onEdit($event)\"></a>\n }\n @if (isActionDeleteActive()) {\n <a\n href=\"#\"\n [id]=\"'row-' + row().index + '_action-delete-button'\"\n class=\"ng2-smart-action ng2-smart-action-delete-delete\"\n [innerHTML]=\"deleteRowButtonContent()\"\n (click)=\"$event.stopPropagation(); $event.preventDefault();onDelete($event)\"></a>\n }\n @for (action of customActions(); track action.name) {\n <a\n [id]=\"'row-' + row().index + '_action-' + action.name + '-button'\"\n href=\"#\"\n class=\"ng2-smart-action ng2-smart-action-custom-custom\"\n [innerHTML]=\"action.title\"\n (click)=\"$event.stopPropagation(); $event.preventDefault(); onCustom(action)\"></a>\n }\n} @else {\n @for (item of allActionsCountArray(); track $index) {\n <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n }\n}\n\n<ng-template #spinner>\n <svg\n role=\"none\"\n (click)=\"$event.stopPropagation()\"\n style=\"height: 2rem; width: 2rem\"\n version=\"1.1\"\n id=\"L9\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 100 100\"\n enable-background=\"new 0 0 0 0\"\n xml:space=\"preserve\">\n <path\n fill=\"#e9e9e9\"\n d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\">\n <animateTransform\n attributeName=\"transform\"\n attributeType=\"XML\"\n type=\"rotate\"\n dur=\"1s\"\n from=\"0 50 50\"\n to=\"360 50 50\"\n repeatCount=\"indefinite\" />\n </path>\n </svg>\n</ng-template>\n", styles: ["a~a{margin-left:.5rem}\n"] }]
|
|
1260
|
+
args: [{ selector: 'ng2-row-actions', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!row().pending()) {\n @if (isActionEditActive()) {\n <a\n href=\"#\"\n [id]=\"'row-' + row().index + '_action-edit-button'\"\n class=\"ng2-smart-action ng2-smart-action-edit-edit\"\n [innerHTML]=\"editRowButtonContent()\"\n (click)=\"$event.stopPropagation(); $event.preventDefault(); onEdit($event)\"></a>\n }\n @if (isActionDeleteActive()) {\n <a\n href=\"#\"\n [id]=\"'row-' + row().index + '_action-delete-button'\"\n class=\"ng2-smart-action ng2-smart-action-delete-delete\"\n [innerHTML]=\"deleteRowButtonContent()\"\n (click)=\"$event.stopPropagation(); $event.preventDefault(); onDelete($event)\"></a>\n }\n @for (action of customActions(); track action.name) {\n <a\n [id]=\"'row-' + row().index + '_action-' + action.name + '-button'\"\n href=\"#\"\n class=\"ng2-smart-action ng2-smart-action-custom-custom\"\n [innerHTML]=\"action.title\"\n (click)=\"$event.stopPropagation(); $event.preventDefault(); onCustom(action)\"></a>\n }\n} @else {\n @for (item of allActionsCountArray(); track $index) {\n <ng-container [ngTemplateOutlet]=\"spinner\"></ng-container>\n }\n}\n\n<ng-template #spinner>\n <svg\n role=\"none\"\n (click)=\"$event.stopPropagation()\"\n style=\"height: 2rem; width: 2rem\"\n version=\"1.1\"\n id=\"L9\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n x=\"0px\"\n y=\"0px\"\n viewBox=\"0 0 100 100\"\n enable-background=\"new 0 0 0 0\"\n xml:space=\"preserve\">\n <path\n fill=\"#e9e9e9\"\n d=\"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50\">\n <animateTransform\n attributeName=\"transform\"\n attributeType=\"XML\"\n type=\"rotate\"\n dur=\"1s\"\n from=\"0 50 50\"\n to=\"360 50 50\"\n repeatCount=\"indefinite\" />\n </path>\n </svg>\n</ng-template>\n", styles: ["a~a{margin-left:.5rem}:host{display:flex;gap:.5rem}\n"] }]
|
|
1273
1261
|
}] });
|
|
1274
1262
|
|
|
1275
1263
|
class TrowComponent {
|
|
@@ -1305,13 +1293,13 @@ class TrowComponent {
|
|
|
1305
1293
|
this.row()?.isInEditing.set(false);
|
|
1306
1294
|
}
|
|
1307
1295
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TrowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1308
|
-
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
|
|
1296
|
+
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 [class]=\"cell.columnClass\" [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;text-align:center}: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 }); }
|
|
1309
1297
|
}
|
|
1310
1298
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TrowComponent, decorators: [{
|
|
1311
1299
|
type: Component,
|
|
1312
1300
|
args: [{ selector: '[ng2-st-trow]', imports: [NgTemplateOutlet, FormsModule, CellComponent, RowActionsComponent, TbodyCreateCancelComponent], host: {
|
|
1313
1301
|
'[class.ng2-smart-card]': 'isMobileView()',
|
|
1314
|
-
}, 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
|
|
1302
|
+
}, 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 [class]=\"cell.columnClass\" [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;text-align:center}: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"] }]
|
|
1315
1303
|
}] });
|
|
1316
1304
|
|
|
1317
1305
|
class Ng2SmartTableTbodyComponent {
|
|
@@ -1339,6 +1327,12 @@ class Ng2SmartTableTbodyComponent {
|
|
|
1339
1327
|
return this.grid().settings().noDataMessage || 'No data found';
|
|
1340
1328
|
});
|
|
1341
1329
|
}
|
|
1330
|
+
rowClicked(row) {
|
|
1331
|
+
if (row.isInEditing()) {
|
|
1332
|
+
return;
|
|
1333
|
+
}
|
|
1334
|
+
this.userClickedRow.emit(row);
|
|
1335
|
+
}
|
|
1342
1336
|
customActionEmitted(actionName, row) {
|
|
1343
1337
|
this.customActionEmitter.emit({
|
|
1344
1338
|
source: this.source(),
|
|
@@ -1350,11 +1344,11 @@ class Ng2SmartTableTbodyComponent {
|
|
|
1350
1344
|
return item?.id || index;
|
|
1351
1345
|
}
|
|
1352
1346
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTbodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1353
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableTbodyComponent, isStandalone: true, selector: "[ng2-st-tbody]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, rowClassFunction: { classPropertyName: "rowClassFunction", publicName: "rowClassFunction", isSignal: true, isRequired: false, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", editConfirmed: "editConfirmed", editCancel: "editCancel", createConfirmed: "createConfirmed", deleteEmitter: "deleteEmitter", customActionEmitter: "customActionEmitter", userClickedRow: "userClickedRow", multipleSelectRow: "multipleSelectRow" }, ngImport: i0, 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()\"
|
|
1347
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: Ng2SmartTableTbodyComponent, isStandalone: true, selector: "[ng2-st-tbody]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, rowClassFunction: { classPropertyName: "rowClassFunction", publicName: "rowClassFunction", isSignal: true, isRequired: false, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { edit: "edit", editConfirmed: "editConfirmed", editCancel: "editCancel", createConfirmed: "createConfirmed", deleteEmitter: "deleteEmitter", customActionEmitter: "customActionEmitter", userClickedRow: "userClickedRow", multipleSelectRow: "multipleSelectRow" }, ngImport: i0, 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()\"></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)=\"rowClicked(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", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: TrowComponent, selector: "[ng2-st-trow]", inputs: ["grid", "source", "row", "isMobileView", "isCreateRow"], outputs: ["edit", "editCancel", "editConfirmed", "deleteEmitter", "createConfirmed", "customActionEmitter", "userClickedRow", "multipleSelectRow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1354
1348
|
}
|
|
1355
1349
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
|
|
1356
1350
|
type: Component,
|
|
1357
|
-
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()\"
|
|
1351
|
+
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()\"></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)=\"rowClicked(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" }]
|
|
1358
1352
|
}] });
|
|
1359
1353
|
|
|
1360
1354
|
class AddButtonComponent {
|
|
@@ -1736,7 +1730,9 @@ class FilterComponent {
|
|
|
1736
1730
|
this.inputClass = input('');
|
|
1737
1731
|
}
|
|
1738
1732
|
onFilter(query) {
|
|
1733
|
+
const columnFilter = this.column().filter;
|
|
1739
1734
|
this.source().addFilter({
|
|
1735
|
+
type: columnFilter ? columnFilter.type : 'text',
|
|
1740
1736
|
field: this.column().id,
|
|
1741
1737
|
search: query,
|
|
1742
1738
|
filter: this.column().filterFunction,
|
|
@@ -2054,7 +2050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
2054
2050
|
}] });
|
|
2055
2051
|
|
|
2056
2052
|
class DataSet {
|
|
2057
|
-
constructor(
|
|
2053
|
+
constructor(dataList = [], columnSettings, editorInputClass) {
|
|
2058
2054
|
this.columnSettings = columnSettings;
|
|
2059
2055
|
this.editorInputClass = editorInputClass;
|
|
2060
2056
|
this.data = signal([]);
|
|
@@ -2068,7 +2064,7 @@ class DataSet {
|
|
|
2068
2064
|
});
|
|
2069
2065
|
this.isAllSelected = computed(() => this.rows().every((row) => row.isSelected()));
|
|
2070
2066
|
this.createColumns(columnSettings);
|
|
2071
|
-
this.setData(
|
|
2067
|
+
this.setData(dataList);
|
|
2072
2068
|
this.createNewRow();
|
|
2073
2069
|
}
|
|
2074
2070
|
setData(data) {
|
|
@@ -2181,9 +2177,6 @@ class Grid {
|
|
|
2181
2177
|
if (this.sourceOnChangedSubscription) {
|
|
2182
2178
|
this.sourceOnChangedSubscription.unsubscribe();
|
|
2183
2179
|
}
|
|
2184
|
-
if (this.sourceOnUpdatedSubscription) {
|
|
2185
|
-
this.sourceOnUpdatedSubscription.unsubscribe();
|
|
2186
|
-
}
|
|
2187
2180
|
}
|
|
2188
2181
|
getNewRow() {
|
|
2189
2182
|
return this.dataSet.newRow;
|
|
@@ -2292,7 +2285,7 @@ class Grid {
|
|
|
2292
2285
|
}
|
|
2293
2286
|
}
|
|
2294
2287
|
processDataChange(event) {
|
|
2295
|
-
if (
|
|
2288
|
+
if (['load', 'empty', 'refresh'].includes(event.action)) {
|
|
2296
2289
|
this.dataSet.resetAllSelection();
|
|
2297
2290
|
}
|
|
2298
2291
|
if (event.action === 'update') {
|