@den4ik92/ng2-smart-table 19.6.43 → 19.6.46
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 +100 -92
- package/fesm2022/den4ik92-ng2-smart-table.mjs.map +1 -1
- package/lib/components/cell/cell-editors/checkbox-editor.component.d.ts +5 -4
- package/lib/components/filter/custom-filter.component.d.ts +5 -2
- package/lib/components/filter/filter-types/base-filter.component.d.ts +4 -3
- package/lib/components/filter/filter-types/checkbox-filter.component.d.ts +1 -3
- package/lib/components/filter/filter-types/select-filter.component.d.ts +7 -1
- package/lib/components/filter/filter.component.d.ts +1 -1
- package/lib/lib/data-set/column.d.ts +2 -2
- package/lib/lib/data-source/data-source.d.ts +3 -2
- package/lib/lib/grid.d.ts +2 -1
- package/lib/lib/interfaces/smart-table.models.d.ts +29 -11
- package/lib/ng2-smart-table.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed, ChangeDetectionStrategy, Component,
|
|
2
|
+
import { input, computed, ChangeDetectionStrategy, Component, effect, signal, inject, ElementRef, Directive, untracked, 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, finalize } from 'rxjs/operators';
|
|
@@ -27,12 +27,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
27
27
|
class BaseFilterComponent {
|
|
28
28
|
constructor() {
|
|
29
29
|
this.delay = 300;
|
|
30
|
-
this.query = input(
|
|
30
|
+
this.query = input(null);
|
|
31
31
|
this.inputClass = input('');
|
|
32
32
|
this.source = input.required();
|
|
33
33
|
this.column = input.required();
|
|
34
34
|
this.filterEmitter = input.required();
|
|
35
35
|
this.inputControl = new UntypedFormControl();
|
|
36
|
+
this.placeholder = '';
|
|
37
|
+
effect(() => {
|
|
38
|
+
this.inputControl?.setValue(this.query(), { emitEvent: false });
|
|
39
|
+
});
|
|
36
40
|
}
|
|
37
41
|
ngOnDestroy() {
|
|
38
42
|
if (this.changesSubscription) {
|
|
@@ -45,22 +49,18 @@ class BaseFilterComponent {
|
|
|
45
49
|
.subscribe((value) => {
|
|
46
50
|
this.setFilter(value);
|
|
47
51
|
});
|
|
48
|
-
|
|
49
|
-
ngOnChanges({ query }) {
|
|
50
|
-
if (query) {
|
|
51
|
-
this.inputControl?.setValue(query.currentValue, { emitEvent: false });
|
|
52
|
-
}
|
|
52
|
+
this.placeholder = this.column()?.getFilterConfig()?.placeholder || this.column()?.getFilterConfig()?.selectText;
|
|
53
53
|
}
|
|
54
54
|
setFilter(query) {
|
|
55
55
|
this.filterEmitter().emit(query);
|
|
56
56
|
}
|
|
57
57
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
58
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: BaseFilterComponent, isStandalone: true, selector: "ng2-base-filter-component", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, filterEmitter: { classPropertyName: "filterEmitter", publicName: "filterEmitter", isSignal: true, isRequired: true, transformFunction: null } },
|
|
58
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: BaseFilterComponent, isStandalone: true, selector: "ng2-base-filter-component", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, filterEmitter: { classPropertyName: "filterEmitter", publicName: "filterEmitter", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
59
59
|
}
|
|
60
60
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BaseFilterComponent, decorators: [{
|
|
61
61
|
type: Component,
|
|
62
62
|
args: [{ template: '', selector: 'ng2-base-filter-component', changeDetection: ChangeDetectionStrategy.OnPush }]
|
|
63
|
-
}] });
|
|
63
|
+
}], ctorParameters: () => [] });
|
|
64
64
|
|
|
65
65
|
/**
|
|
66
66
|
* Extending object that entered in first argument.
|
|
@@ -238,11 +238,11 @@ class TableColumnsEditorComponent {
|
|
|
238
238
|
this.stateHasChanged.set(JSON.stringify(this.grid()?.currentColumnsSortState) !== JSON.stringify(this.currentState));
|
|
239
239
|
}
|
|
240
240
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableColumnsEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
241
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableColumnsEditorComponent, isStandalone: true, selector: "ng2-table-columns-editor", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, close: { classPropertyName: "close", publicName: "close", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"sort-card\">\n <div class=\"sort-card-header\">\n <h6>Table columns setup</h6>\n </div>\n <div class=\"sort-card-body\">\n <div
|
|
241
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableColumnsEditorComponent, isStandalone: true, selector: "ng2-table-columns-editor", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, close: { classPropertyName: "close", publicName: "close", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"sort-card\">\n <div class=\"sort-card-header\">\n <h6>Table columns setup</h6>\n </div>\n <div class=\"sort-card-body\">\n <div class=\"list\" cdkDropList [cdkDropListData]=\"currentState\" (cdkDropListDropped)=\"drop($event)\">\n @for (column of currentState; track column.key + i; let i = $index) {\n <div\n cdkDrag\n [cdkDragLockAxis]=\"'y'\"\n [cdkDragStartDelay]=\"grid()?.columnSortDragDelay() || 300\"\n [cdkDragDisabled]=\"column.moveDisabled\"\n class=\"drag-row\"\n #dragRow\n [style.--drag-row-height]=\"50\">\n <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n <div class=\"index-cell\">\n {{ i + 1 }}\n </div>\n <label class=\"sort-column-checkbox-wrap\" [for]=\"'sort-column-checkbox-' + i\">\n <span></span>\n <input\n [disabled]=\"column.moveDisabled\"\n [id]=\"'sort-column-checkbox-' + i\"\n title=\"Active state. If checked the column will be displayed\"\n type=\"checkbox\"\n class=\"sort-column-checkbox-input\"\n [checked]=\"!column.hide\"\n (change)=\"setVisibility(i)\" />\n <span></span>\n </label>\n {{ column.title }}\n </div>\n }\n </div>\n </div>\n @if (stateHasChanged()) {\n <div class=\"sort-card-footer\">\n <button class=\"reset-button\" (click)=\"resetChanges()\">reset</button>\n <button class=\"update-button\" (click)=\"setAndUpdate()\">Update</button>\n </div>\n }\n</div>\n", styles: [".list{overflow:auto;display:flex;flex-direction:column;gap:.3rem;max-height:100%}.drag-row{border:solid 1px var(--drag-row-border-color, #ccc);border-radius:.3rem;display:flex;align-items:center;box-sizing:border-box;cursor:grab;background:var(--smart-table-bg-even, #ffffff);box-shadow:0 0 6px 1px #ebebeb33}.drag-row.cdk-drag-disabled{filter:opacity(.5);cursor:not-allowed}.drag-row .index-cell{min-width:2.2rem;border-right:1px solid var(--drag-row-border-color, #ccc)}.drag-row>div{padding:.3rem}.drag-row .sort-column-checkbox-wrap{margin:0 .5rem}.cdk-drag-preview{box-sizing:border-box;border-radius:.3rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list.cdk-drop-list-dragging .drag-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-placeholder{background:var(--drag-placeholder-background, #ccc);border:dotted 3px #999;min-height:var(--drag-row-heightpx, 2.5rem);transition:transform .25s cubic-bezier(0,0,.2,1)}.overlay-card nb-card-body{padding:.25rem;max-height:100%}.sort-card{box-shadow:0 0 6px 1px #0003;min-width:18rem;padding:.25rem;max-height:80dvh;background:var(--smart-table-bg, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--sort-card-header-divider-color, #edf1f7)}.sort-card .sort-card-header h6{margin:0}.sort-card .sort-card-body{padding:.5rem 0}.sort-card .sort-card-footer{border-top:1px solid var(--sort-card-header-divider-color, #edf1f7);display:flex;align-items:center;justify-content:end;gap:1rem;padding:1rem}.sort-card .sort-card-footer .update-button,.sort-card .sort-card-footer .reset-button{border-radius:.3rem;padding:.4rem 1rem;border:none;color:#fff;font-size:.875rem;font-weight:700;text-transform:uppercase}.sort-card .sort-card-footer .update-button{background-color:#36f}.sort-card .sort-card-footer .update-button:hover{background-color:#598bff}.sort-card .sort-card-footer .reset-button{background-color:#ff3d71}.sort-card .sort-card-footer .reset-button:hover{background-color:#ff708d}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
242
242
|
}
|
|
243
243
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableColumnsEditorComponent, decorators: [{
|
|
244
244
|
type: Component,
|
|
245
|
-
args: [{ selector: 'ng2-table-columns-editor', imports: [CdkDropList, CdkDrag, CdkDragPlaceholder], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sort-card\">\n <div class=\"sort-card-header\">\n <h6>Table columns setup</h6>\n </div>\n <div class=\"sort-card-body\">\n <div
|
|
245
|
+
args: [{ selector: 'ng2-table-columns-editor', imports: [CdkDropList, CdkDrag, CdkDragPlaceholder], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sort-card\">\n <div class=\"sort-card-header\">\n <h6>Table columns setup</h6>\n </div>\n <div class=\"sort-card-body\">\n <div class=\"list\" cdkDropList [cdkDropListData]=\"currentState\" (cdkDropListDropped)=\"drop($event)\">\n @for (column of currentState; track column.key + i; let i = $index) {\n <div\n cdkDrag\n [cdkDragLockAxis]=\"'y'\"\n [cdkDragStartDelay]=\"grid()?.columnSortDragDelay() || 300\"\n [cdkDragDisabled]=\"column.moveDisabled\"\n class=\"drag-row\"\n #dragRow\n [style.--drag-row-height]=\"50\">\n <div class=\"drag-placeholder\" *cdkDragPlaceholder></div>\n <div class=\"index-cell\">\n {{ i + 1 }}\n </div>\n <label class=\"sort-column-checkbox-wrap\" [for]=\"'sort-column-checkbox-' + i\">\n <span></span>\n <input\n [disabled]=\"column.moveDisabled\"\n [id]=\"'sort-column-checkbox-' + i\"\n title=\"Active state. If checked the column will be displayed\"\n type=\"checkbox\"\n class=\"sort-column-checkbox-input\"\n [checked]=\"!column.hide\"\n (change)=\"setVisibility(i)\" />\n <span></span>\n </label>\n {{ column.title }}\n </div>\n }\n </div>\n </div>\n @if (stateHasChanged()) {\n <div class=\"sort-card-footer\">\n <button class=\"reset-button\" (click)=\"resetChanges()\">reset</button>\n <button class=\"update-button\" (click)=\"setAndUpdate()\">Update</button>\n </div>\n }\n</div>\n", styles: [".list{overflow:auto;display:flex;flex-direction:column;gap:.3rem;max-height:100%}.drag-row{border:solid 1px var(--drag-row-border-color, #ccc);border-radius:.3rem;display:flex;align-items:center;box-sizing:border-box;cursor:grab;background:var(--smart-table-bg-even, #ffffff);box-shadow:0 0 6px 1px #ebebeb33}.drag-row.cdk-drag-disabled{filter:opacity(.5);cursor:not-allowed}.drag-row .index-cell{min-width:2.2rem;border-right:1px solid var(--drag-row-border-color, #ccc)}.drag-row>div{padding:.3rem}.drag-row .sort-column-checkbox-wrap{margin:0 .5rem}.cdk-drag-preview{box-sizing:border-box;border-radius:.3rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list.cdk-drop-list-dragging .drag-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-placeholder{background:var(--drag-placeholder-background, #ccc);border:dotted 3px #999;min-height:var(--drag-row-heightpx, 2.5rem);transition:transform .25s cubic-bezier(0,0,.2,1)}.overlay-card nb-card-body{padding:.25rem;max-height:100%}.sort-card{box-shadow:0 0 6px 1px #0003;min-width:18rem;padding:.25rem;max-height:80dvh;background:var(--smart-table-bg, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--sort-card-header-divider-color, #edf1f7)}.sort-card .sort-card-header h6{margin:0}.sort-card .sort-card-body{padding:.5rem 0}.sort-card .sort-card-footer{border-top:1px solid var(--sort-card-header-divider-color, #edf1f7);display:flex;align-items:center;justify-content:end;gap:1rem;padding:1rem}.sort-card .sort-card-footer .update-button,.sort-card .sort-card-footer .reset-button{border-radius:.3rem;padding:.4rem 1rem;border:none;color:#fff;font-size:.875rem;font-weight:700;text-transform:uppercase}.sort-card .sort-card-footer .update-button{background-color:#36f}.sort-card .sort-card-footer .update-button:hover{background-color:#598bff}.sort-card .sort-card-footer .reset-button{background-color:#ff3d71}.sort-card .sort-card-footer .reset-button:hover{background-color:#ff708d}\n"] }]
|
|
246
246
|
}], ctorParameters: () => [] });
|
|
247
247
|
|
|
248
248
|
class SmartTableColumnEditorDirective {
|
|
@@ -411,8 +411,8 @@ class Column {
|
|
|
411
411
|
if (settings.type === 'custom' && settings.renderComponent) {
|
|
412
412
|
this.renderComponent = settings.renderComponent;
|
|
413
413
|
}
|
|
414
|
-
if (settings.type === 'custom' && settings.
|
|
415
|
-
this.renderComponentInputs = settings.
|
|
414
|
+
if (settings.type === 'custom' && settings.inputs) {
|
|
415
|
+
this.renderComponentInputs = settings.inputs;
|
|
416
416
|
}
|
|
417
417
|
this.isFilterable = !!settings['filter'];
|
|
418
418
|
this.isSortable = settings.sort ?? false;
|
|
@@ -426,7 +426,7 @@ class Column {
|
|
|
426
426
|
if (this.editor) {
|
|
427
427
|
return this.editor?.config;
|
|
428
428
|
}
|
|
429
|
-
return
|
|
429
|
+
return undefined;
|
|
430
430
|
}
|
|
431
431
|
getFilterType() {
|
|
432
432
|
return this.filter && this.filter.type;
|
|
@@ -435,7 +435,7 @@ class Column {
|
|
|
435
435
|
if (this.filter) {
|
|
436
436
|
return this.filter?.config;
|
|
437
437
|
}
|
|
438
|
-
return
|
|
438
|
+
return undefined;
|
|
439
439
|
}
|
|
440
440
|
}
|
|
441
441
|
|
|
@@ -498,8 +498,8 @@ class DataSource {
|
|
|
498
498
|
perPageSelect: [],
|
|
499
499
|
});
|
|
500
500
|
this.data = signal([]);
|
|
501
|
-
this.getSort =
|
|
502
|
-
this.getFilters =
|
|
501
|
+
this.getSort = this.sortConf;
|
|
502
|
+
this.getFilters = this.filters;
|
|
503
503
|
}
|
|
504
504
|
refresh() {
|
|
505
505
|
this.emitOnChanged({ action: SmartTableOnChangedEventName.refresh });
|
|
@@ -560,7 +560,9 @@ class DataSource {
|
|
|
560
560
|
return;
|
|
561
561
|
}
|
|
562
562
|
const foundIndex = this.filters().findIndex((filter) => filter.field === newFilter.field);
|
|
563
|
-
const newSearchString = typeof newFilter.search === 'undefined' || newFilter.search === null
|
|
563
|
+
const newSearchString = typeof newFilter.search === 'undefined' || newFilter.search === null || newFilter.search === 'null'
|
|
564
|
+
? ''
|
|
565
|
+
: `${newFilter.search}`;
|
|
564
566
|
if (foundIndex === -1) {
|
|
565
567
|
if (newSearchString?.length) {
|
|
566
568
|
this.filters.set([...this.filters(), newFilter]);
|
|
@@ -861,18 +863,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
861
863
|
|
|
862
864
|
class CheckboxEditorComponent extends BaseEditorComponent {
|
|
863
865
|
constructor() {
|
|
864
|
-
super();
|
|
865
|
-
this.trueVal =
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
866
|
+
super(...arguments);
|
|
867
|
+
this.trueVal = true;
|
|
868
|
+
this.falseVal = false;
|
|
869
|
+
}
|
|
870
|
+
ngOnInit() {
|
|
871
|
+
this.trueVal = this.cell().column.getEditorConfig()?.true || true;
|
|
872
|
+
this.falseVal = this.cell().column.getEditorConfig()?.false || false;
|
|
871
873
|
}
|
|
872
874
|
onChange(event) {
|
|
873
|
-
this.cell().setNewValue(event.target.checked ? this.trueVal
|
|
875
|
+
this.cell().setNewValue(event.target.checked ? this.trueVal : this.falseVal);
|
|
874
876
|
}
|
|
875
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxEditorComponent, deps:
|
|
877
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
876
878
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: CheckboxEditorComponent, isStandalone: true, selector: "ng2-checkbox-editor", usesInheritance: true, ngImport: i0, template: `
|
|
877
879
|
<input
|
|
878
880
|
[class]="inputClass()"
|
|
@@ -881,7 +883,7 @@ class CheckboxEditorComponent extends BaseEditorComponent {
|
|
|
881
883
|
[name]="cell().id"
|
|
882
884
|
[disabled]="!cell().isEditable()"
|
|
883
885
|
(change)="onChange($event)"
|
|
884
|
-
[checked]="cell().getValue() === trueVal
|
|
886
|
+
[checked]="cell().getValue() === trueVal" />
|
|
885
887
|
`, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
886
888
|
}
|
|
887
889
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxEditorComponent, decorators: [{
|
|
@@ -894,9 +896,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
894
896
|
[name]="cell().id"
|
|
895
897
|
[disabled]="!cell().isEditable()"
|
|
896
898
|
(change)="onChange($event)"
|
|
897
|
-
[checked]="cell().getValue() === trueVal
|
|
899
|
+
[checked]="cell().getValue() === trueVal" />
|
|
898
900
|
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"] }]
|
|
899
|
-
}]
|
|
901
|
+
}] });
|
|
900
902
|
|
|
901
903
|
class InputEditorComponent extends BaseEditorComponent {
|
|
902
904
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -1061,7 +1063,6 @@ class EditCellComponent {
|
|
|
1061
1063
|
constructor() {
|
|
1062
1064
|
this.cell = input.required();
|
|
1063
1065
|
}
|
|
1064
|
-
// readonly inputClass = input('');
|
|
1065
1066
|
getEditorType() {
|
|
1066
1067
|
const editor = this.cell().column.editor;
|
|
1067
1068
|
if (editor) {
|
|
@@ -1503,7 +1504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1503
1504
|
|
|
1504
1505
|
class CheckboxFilterComponent extends BaseFilterComponent {
|
|
1505
1506
|
constructor() {
|
|
1506
|
-
super();
|
|
1507
|
+
super(...arguments);
|
|
1507
1508
|
this.filterIsActive = computed(() => this.query() !== null);
|
|
1508
1509
|
this.currentState = computed(() => {
|
|
1509
1510
|
const valuesConfig = this.getValuesConfig(this.column().getFilterConfig());
|
|
@@ -1529,7 +1530,7 @@ class CheckboxFilterComponent extends BaseFilterComponent {
|
|
|
1529
1530
|
event.stopPropagation();
|
|
1530
1531
|
this.setFilter(null);
|
|
1531
1532
|
}
|
|
1532
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxFilterComponent, deps:
|
|
1533
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1533
1534
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CheckboxFilterComponent, isStandalone: true, selector: "ng2-checkbox-filter", usesInheritance: true, ngImport: i0, template: `
|
|
1534
1535
|
<div class="checkbox-filter-wrapper">
|
|
1535
1536
|
<input
|
|
@@ -1545,7 +1546,7 @@ class CheckboxFilterComponent extends BaseFilterComponent {
|
|
|
1545
1546
|
}}</a>
|
|
1546
1547
|
}
|
|
1547
1548
|
</div>
|
|
1548
|
-
`, isInline: true, styles: [".checkbox-filter-wrapper{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.checkbox-filter-wrapper input{width:auto}\n"], dependencies: [{ 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"] }
|
|
1549
|
+
`, isInline: true, styles: [".checkbox-filter-wrapper{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.checkbox-filter-wrapper input{width:auto}\n"], dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1549
1550
|
}
|
|
1550
1551
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CheckboxFilterComponent, decorators: [{
|
|
1551
1552
|
type: Component,
|
|
@@ -1564,8 +1565,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1564
1565
|
}}</a>
|
|
1565
1566
|
}
|
|
1566
1567
|
</div>
|
|
1567
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule
|
|
1568
|
-
}]
|
|
1568
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule], styles: [".checkbox-filter-wrapper{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}.checkbox-filter-wrapper input{width:auto}\n"] }]
|
|
1569
|
+
}] });
|
|
1569
1570
|
|
|
1570
1571
|
class InputFilterComponent extends BaseFilterComponent {
|
|
1571
1572
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
@@ -1575,8 +1576,8 @@ class InputFilterComponent extends BaseFilterComponent {
|
|
|
1575
1576
|
[formControl]="inputControl"
|
|
1576
1577
|
class="form-control"
|
|
1577
1578
|
type="text"
|
|
1578
|
-
placeholder="{{ column().title }}" />
|
|
1579
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type:
|
|
1579
|
+
placeholder="{{ placeholder || column().title }}" />
|
|
1580
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1580
1581
|
}
|
|
1581
1582
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: InputFilterComponent, decorators: [{
|
|
1582
1583
|
type: Component,
|
|
@@ -1588,25 +1589,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1588
1589
|
[formControl]="inputControl"
|
|
1589
1590
|
class="form-control"
|
|
1590
1591
|
type="text"
|
|
1591
|
-
placeholder="{{ column().title }}" />
|
|
1592
|
+
placeholder="{{ placeholder || column().title }}" />
|
|
1592
1593
|
`,
|
|
1593
1594
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1594
|
-
imports: [
|
|
1595
|
+
imports: [ReactiveFormsModule],
|
|
1595
1596
|
}]
|
|
1596
1597
|
}] });
|
|
1597
1598
|
|
|
1598
1599
|
class SelectFilterComponent extends BaseFilterComponent {
|
|
1600
|
+
constructor() {
|
|
1601
|
+
super(...arguments);
|
|
1602
|
+
this.optionsList = signal([]);
|
|
1603
|
+
}
|
|
1604
|
+
ngOnInit() {
|
|
1605
|
+
super.ngOnInit();
|
|
1606
|
+
const config = this.column().getFilterConfig();
|
|
1607
|
+
this.optionsList.set(config?.list || []);
|
|
1608
|
+
}
|
|
1599
1609
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1600
1610
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SelectFilterComponent, isStandalone: true, selector: "ng2-select-filter", usesInheritance: true, ngImport: i0, template: `
|
|
1601
1611
|
<select [class]="inputClass()" class="form-control" [formControl]="inputControl">
|
|
1602
|
-
<option value="">{{
|
|
1603
|
-
@for (option of
|
|
1612
|
+
<option [value]="null">{{ placeholder || 'all' }}</option>
|
|
1613
|
+
@for (option of optionsList(); track $index) {
|
|
1604
1614
|
<option [value]="option.value">
|
|
1605
1615
|
{{ option.title }}
|
|
1606
1616
|
</option>
|
|
1607
1617
|
}
|
|
1608
1618
|
</select>
|
|
1609
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type:
|
|
1619
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1610
1620
|
}
|
|
1611
1621
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SelectFilterComponent, decorators: [{
|
|
1612
1622
|
type: Component,
|
|
@@ -1614,8 +1624,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1614
1624
|
selector: 'ng2-select-filter',
|
|
1615
1625
|
template: `
|
|
1616
1626
|
<select [class]="inputClass()" class="form-control" [formControl]="inputControl">
|
|
1617
|
-
<option value="">{{
|
|
1618
|
-
@for (option of
|
|
1627
|
+
<option [value]="null">{{ placeholder || 'all' }}</option>
|
|
1628
|
+
@for (option of optionsList(); track $index) {
|
|
1619
1629
|
<option [value]="option.value">
|
|
1620
1630
|
{{ option.title }}
|
|
1621
1631
|
</option>
|
|
@@ -1623,13 +1633,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1623
1633
|
</select>
|
|
1624
1634
|
`,
|
|
1625
1635
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1626
|
-
imports: [
|
|
1636
|
+
imports: [ReactiveFormsModule],
|
|
1627
1637
|
}]
|
|
1628
1638
|
}] });
|
|
1629
1639
|
|
|
1630
1640
|
class BuildInFilterComponent {
|
|
1631
1641
|
constructor() {
|
|
1632
|
-
this.query = input(
|
|
1642
|
+
this.query = input(null);
|
|
1633
1643
|
this.inputClass = input('');
|
|
1634
1644
|
this.source = input.required();
|
|
1635
1645
|
this.column = input.required();
|
|
@@ -1710,33 +1720,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1710
1720
|
|
|
1711
1721
|
class CustomFilterComponent {
|
|
1712
1722
|
constructor() {
|
|
1713
|
-
this.
|
|
1714
|
-
const columnFilter = this.column().filter;
|
|
1715
|
-
if (!columnFilter || columnFilter.type !== 'custom') {
|
|
1716
|
-
return null;
|
|
1717
|
-
}
|
|
1718
|
-
return columnFilter.component;
|
|
1719
|
-
});
|
|
1720
|
-
this.query = input('');
|
|
1723
|
+
this.query = input(null);
|
|
1721
1724
|
this.inputClass = input('');
|
|
1722
1725
|
this.source = input.required();
|
|
1723
1726
|
this.column = input.required();
|
|
1724
1727
|
this.filter = output();
|
|
1728
|
+
this.componentInputs = computed(() => {
|
|
1729
|
+
let inputs = {
|
|
1730
|
+
query: this.query(),
|
|
1731
|
+
inputClass: this.inputClass(),
|
|
1732
|
+
source: this.source(),
|
|
1733
|
+
column: this.column(),
|
|
1734
|
+
filterEmitter: this.filter,
|
|
1735
|
+
};
|
|
1736
|
+
const columnFilter = this.column().filter;
|
|
1737
|
+
if (columnFilter && columnFilter.type === 'custom') {
|
|
1738
|
+
if (columnFilter.config?.inputs) {
|
|
1739
|
+
inputs = { ...inputs, ...columnFilter.config?.inputs };
|
|
1740
|
+
}
|
|
1741
|
+
}
|
|
1742
|
+
return inputs;
|
|
1743
|
+
});
|
|
1744
|
+
}
|
|
1745
|
+
ngOnInit() {
|
|
1746
|
+
const columnFilter = this.column().filter;
|
|
1747
|
+
if (columnFilter && columnFilter.type === 'custom') {
|
|
1748
|
+
this.customFilterComponent = columnFilter.component;
|
|
1749
|
+
}
|
|
1725
1750
|
}
|
|
1726
1751
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CustomFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1727
1752
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: CustomFilterComponent, isStandalone: true, selector: "ng2-custom-table-filter", inputs: { query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { filter: "filter" }, ngImport: i0, template: `
|
|
1728
|
-
@if (customFilterComponent
|
|
1729
|
-
<ng-template
|
|
1730
|
-
*ngComponentOutlet="
|
|
1731
|
-
component;
|
|
1732
|
-
inputs: {
|
|
1733
|
-
query: query(),
|
|
1734
|
-
inputClass: inputClass(),
|
|
1735
|
-
source: source(),
|
|
1736
|
-
column: column(),
|
|
1737
|
-
filterEmitter: filter,
|
|
1738
|
-
}
|
|
1739
|
-
"></ng-template>
|
|
1753
|
+
@if (customFilterComponent) {
|
|
1754
|
+
<ng-template *ngComponentOutlet="customFilterComponent; inputs: componentInputs()"></ng-template>
|
|
1740
1755
|
}
|
|
1741
1756
|
`, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1742
1757
|
}
|
|
@@ -1746,18 +1761,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1746
1761
|
selector: 'ng2-custom-table-filter',
|
|
1747
1762
|
imports: [NgComponentOutlet],
|
|
1748
1763
|
template: `
|
|
1749
|
-
@if (customFilterComponent
|
|
1750
|
-
<ng-template
|
|
1751
|
-
*ngComponentOutlet="
|
|
1752
|
-
component;
|
|
1753
|
-
inputs: {
|
|
1754
|
-
query: query(),
|
|
1755
|
-
inputClass: inputClass(),
|
|
1756
|
-
source: source(),
|
|
1757
|
-
column: column(),
|
|
1758
|
-
filterEmitter: filter,
|
|
1759
|
-
}
|
|
1760
|
-
"></ng-template>
|
|
1764
|
+
@if (customFilterComponent) {
|
|
1765
|
+
<ng-template *ngComponentOutlet="customFilterComponent; inputs: componentInputs()"></ng-template>
|
|
1761
1766
|
}
|
|
1762
1767
|
`,
|
|
1763
1768
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
@@ -1766,15 +1771,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1766
1771
|
|
|
1767
1772
|
class FilterComponent {
|
|
1768
1773
|
constructor() {
|
|
1774
|
+
this.column = input.required();
|
|
1775
|
+
this.source = input.required();
|
|
1776
|
+
this.inputClass = input('');
|
|
1769
1777
|
this.query = computed(() => {
|
|
1770
1778
|
const columnFilter = this.source()
|
|
1771
1779
|
.getFilters()
|
|
1772
1780
|
.find((filter) => filter.field === this.column().id);
|
|
1773
1781
|
return columnFilter?.search ?? null;
|
|
1774
1782
|
});
|
|
1775
|
-
this.column = input.required();
|
|
1776
|
-
this.source = input.required();
|
|
1777
|
-
this.inputClass = input('');
|
|
1778
1783
|
}
|
|
1779
1784
|
onFilter(query) {
|
|
1780
1785
|
const columnFilter = this.column().filter;
|
|
@@ -2261,6 +2266,12 @@ class Grid {
|
|
|
2261
2266
|
this.actionIsOnRight = computed(() => {
|
|
2262
2267
|
return this.settings().actionsPosition === 'right';
|
|
2263
2268
|
});
|
|
2269
|
+
this.columnSortDragDelay = computed(() => {
|
|
2270
|
+
return this.settings().columnSort?.dragDelay || 300;
|
|
2271
|
+
});
|
|
2272
|
+
this.columnStateStorageKey = computed(() => {
|
|
2273
|
+
return this.settings().columnSort?.stateStorageKey;
|
|
2274
|
+
});
|
|
2264
2275
|
this.setSource(source, settings);
|
|
2265
2276
|
this.setSettings(settings);
|
|
2266
2277
|
}
|
|
@@ -2277,7 +2288,7 @@ class Grid {
|
|
|
2277
2288
|
}
|
|
2278
2289
|
setSettings(settings) {
|
|
2279
2290
|
this.updateSettingsAndDataSet(settings);
|
|
2280
|
-
if (settings.columnSort) {
|
|
2291
|
+
if (settings.columnSort?.active) {
|
|
2281
2292
|
this.setColumnsSortState(settings.columns);
|
|
2282
2293
|
}
|
|
2283
2294
|
}
|
|
@@ -2470,8 +2481,8 @@ class Grid {
|
|
|
2470
2481
|
...this.settings(),
|
|
2471
2482
|
columns: await this.getSortedTableColumns(this.currentColumnsSortState, this.settings()?.columns),
|
|
2472
2483
|
}, 'columnRefresh');
|
|
2473
|
-
if (this.columnStateStorageKey) {
|
|
2474
|
-
setLocalStorage(this.columnStateStorageKey, this.currentColumnsSortState);
|
|
2484
|
+
if (this.columnStateStorageKey()) {
|
|
2485
|
+
setLocalStorage(this.columnStateStorageKey(), this.currentColumnsSortState);
|
|
2475
2486
|
}
|
|
2476
2487
|
if (emitEvent) {
|
|
2477
2488
|
this.columnsSortedEmitter.emit(this.currentColumnsSortState);
|
|
@@ -2479,11 +2490,11 @@ class Grid {
|
|
|
2479
2490
|
}
|
|
2480
2491
|
setColumnsSortState(columns) {
|
|
2481
2492
|
const columnsState = this.getColumnsStateFromSettings(columns);
|
|
2482
|
-
if (this.columnStateStorageKey) {
|
|
2483
|
-
const storageState = getLocalStorage(this.columnStateStorageKey);
|
|
2493
|
+
if (this.columnStateStorageKey()) {
|
|
2494
|
+
const storageState = getLocalStorage(this.columnStateStorageKey());
|
|
2484
2495
|
if (!storageState) {
|
|
2485
2496
|
this.currentColumnsSortState = columnsState;
|
|
2486
|
-
setLocalStorage(this.columnStateStorageKey, columnsState);
|
|
2497
|
+
setLocalStorage(this.columnStateStorageKey(), columnsState);
|
|
2487
2498
|
return;
|
|
2488
2499
|
}
|
|
2489
2500
|
const merged = this.getMergedColumnStates(storageState, columnsState);
|
|
@@ -2516,9 +2527,6 @@ class Grid {
|
|
|
2516
2527
|
});
|
|
2517
2528
|
return [...filtered, ...newColumns];
|
|
2518
2529
|
}
|
|
2519
|
-
get columnStateStorageKey() {
|
|
2520
|
-
return this.settings().columnSortStorageKey;
|
|
2521
|
-
}
|
|
2522
2530
|
}
|
|
2523
2531
|
|
|
2524
2532
|
class Ng2SmartTableComponent {
|
|
@@ -2537,7 +2545,7 @@ class Ng2SmartTableComponent {
|
|
|
2537
2545
|
* <div #paginationSlot>
|
|
2538
2546
|
* </div>
|
|
2539
2547
|
* inside component
|
|
2540
|
-
* readonly paginationContainerRef = viewChild
|
|
2548
|
+
* readonly paginationContainerRef = viewChild('paginationSlot', {
|
|
2541
2549
|
* read: ViewContainerRef,
|
|
2542
2550
|
* });
|
|
2543
2551
|
*/
|