@den4ik92/ng2-smart-table 19.6.47 → 20.0.0
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 +253 -253
- package/fesm2022/den4ik92-ng2-smart-table.mjs.map +1 -1
- package/index.d.ts +626 -5
- package/package.json +5 -5
- package/lib/components/cell/cell-edit-mode/build-in-editor.component.d.ts +0 -8
- package/lib/components/cell/cell-edit-mode/custom-edit.component.d.ts +0 -11
- package/lib/components/cell/cell-edit-mode/edit-cell.component.d.ts +0 -9
- package/lib/components/cell/cell-editors/base-editor.component.d.ts +0 -12
- package/lib/components/cell/cell-editors/checkbox-editor.component.d.ts +0 -11
- package/lib/components/cell/cell-editors/input-editor.component.d.ts +0 -6
- package/lib/components/cell/cell-editors/select-editor.component.d.ts +0 -6
- package/lib/components/cell/cell-editors/textarea-editor.component.d.ts +0 -6
- package/lib/components/cell/cell-view-mode/custom-view.component.d.ts +0 -11
- package/lib/components/cell/cell-view-mode/view-cell.component.d.ts +0 -7
- package/lib/components/cell/cell.component.d.ts +0 -8
- package/lib/components/filter/build-in-filter.component.d.ts +0 -12
- package/lib/components/filter/custom-filter.component.d.ts +0 -16
- package/lib/components/filter/filter-types/base-filter.component.d.ts +0 -32
- package/lib/components/filter/filter-types/checkbox-filter.component.d.ts +0 -11
- package/lib/components/filter/filter-types/input-filter.component.d.ts +0 -6
- package/lib/components/filter/filter-types/select-filter.component.d.ts +0 -12
- package/lib/components/filter/filter.component.d.ts +0 -12
- package/lib/components/pager/pager.component.d.ts +0 -24
- package/lib/components/table-columns-editor/column-editor.directive.d.ts +0 -19
- package/lib/components/table-columns-editor/table-columns-editor.component.d.ts +0 -19
- package/lib/components/tbody/create-cancel/create-cancel.component.d.ts +0 -13
- package/lib/components/tbody/row-actions/row-actions.component.d.ts +0 -23
- package/lib/components/tbody/tbody.component.d.ts +0 -25
- package/lib/components/tbody/trow/trow.component.d.ts +0 -23
- package/lib/components/thead/cells/actions-title.component.d.ts +0 -8
- package/lib/components/thead/cells/add-button.component.d.ts +0 -11
- package/lib/components/thead/cells/checkbox-select-all.component.d.ts +0 -7
- package/lib/components/thead/cells/title/title.component.d.ts +0 -13
- package/lib/components/thead/mobile-filters/mobile-filters.component.d.ts +0 -21
- package/lib/components/thead/rows/thead-filters-row.component.d.ts +0 -12
- package/lib/components/thead/rows/thead-titles-row.component.d.ts +0 -12
- package/lib/components/thead/thead.component.d.ts +0 -26
- package/lib/lib/data-set/cell.d.ts +0 -17
- package/lib/lib/data-set/column.d.ts +0 -30
- package/lib/lib/data-set/data-set.d.ts +0 -39
- package/lib/lib/data-set/row.d.ts +0 -18
- package/lib/lib/data-source/data-source.d.ts +0 -37
- package/lib/lib/data-source/local/local.data-source.d.ts +0 -17
- package/lib/lib/data-source/local/local.filter.d.ts +0 -2
- package/lib/lib/data-source/local/local.pager.d.ts +0 -1
- package/lib/lib/data-source/local/local.sorter.d.ts +0 -3
- package/lib/lib/data-source/server/server.data-source.d.ts +0 -24
- package/lib/lib/grid.d.ts +0 -45
- package/lib/lib/helpers.d.ts +0 -25
- package/lib/lib/interfaces/smart-table.models.d.ts +0 -266
- package/lib/ng2-smart-table.component.d.ts +0 -91
- package/public-api.d.ts +0 -12
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed, ChangeDetectionStrategy, Component, effect, signal, inject, ElementRef, Directive, untracked, ViewContainerRef, ViewChild, output, viewChild } from '@angular/core';
|
|
2
|
+
import { input, computed, ChangeDetectionStrategy, Component, effect, signal, inject, ElementRef, Directive, untracked, ViewContainerRef, ViewChild, output, viewChild, NgZone, Injector } 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';
|
|
@@ -13,13 +13,13 @@ import { NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
|
|
|
13
13
|
|
|
14
14
|
class BaseEditorComponent {
|
|
15
15
|
constructor() {
|
|
16
|
-
this.cell = input.required();
|
|
17
|
-
this.inputClass = computed(() => this.cell().column.editorInputClass);
|
|
16
|
+
this.cell = input.required(...(ngDevMode ? [{ debugName: "cell" }] : []));
|
|
17
|
+
this.inputClass = computed(() => this.cell().column.editorInputClass, ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
|
|
18
18
|
}
|
|
19
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
20
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
19
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: BaseEditorComponent, isStandalone: true, selector: "ng2-editor-base-component", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
21
21
|
}
|
|
22
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
22
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseEditorComponent, decorators: [{
|
|
23
23
|
type: Component,
|
|
24
24
|
args: [{ template: '', selector: 'ng2-editor-base-component', changeDetection: ChangeDetectionStrategy.OnPush }]
|
|
25
25
|
}] });
|
|
@@ -27,11 +27,11 @@ 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(null);
|
|
31
|
-
this.inputClass = input('');
|
|
32
|
-
this.source = input.required();
|
|
33
|
-
this.column = input.required();
|
|
34
|
-
this.filterEmitter = input.required();
|
|
30
|
+
this.query = input(null, ...(ngDevMode ? [{ debugName: "query" }] : []));
|
|
31
|
+
this.inputClass = input('', ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
|
|
32
|
+
this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
|
|
33
|
+
this.column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
|
|
34
|
+
this.filterEmitter = input.required(...(ngDevMode ? [{ debugName: "filterEmitter" }] : []));
|
|
35
35
|
this.inputControl = new UntypedFormControl();
|
|
36
36
|
this.placeholder = '';
|
|
37
37
|
effect(() => {
|
|
@@ -54,10 +54,10 @@ class BaseFilterComponent {
|
|
|
54
54
|
setFilter(query) {
|
|
55
55
|
this.filterEmitter().emit(query);
|
|
56
56
|
}
|
|
57
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
58
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
57
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
58
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", 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
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
60
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BaseFilterComponent, decorators: [{
|
|
61
61
|
type: Component,
|
|
62
62
|
args: [{ template: '', selector: 'ng2-base-filter-component', changeDetection: ChangeDetectionStrategy.OnPush }]
|
|
63
63
|
}], ctorParameters: () => [] });
|
|
@@ -209,10 +209,10 @@ function CheckParentElementClassRecursive(element, className) {
|
|
|
209
209
|
class TableColumnsEditorComponent {
|
|
210
210
|
constructor() {
|
|
211
211
|
this.infoText = 'You can drag and drop columns as you wish and also disable unnecessary ones.';
|
|
212
|
-
this.grid = input();
|
|
213
|
-
this.close = input.required();
|
|
212
|
+
this.grid = input(...(ngDevMode ? [undefined, { debugName: "grid" }] : []));
|
|
213
|
+
this.close = input.required(...(ngDevMode ? [{ debugName: "close" }] : []));
|
|
214
214
|
this.currentState = [];
|
|
215
|
-
this.stateHasChanged = signal(false);
|
|
215
|
+
this.stateHasChanged = signal(false, ...(ngDevMode ? [{ debugName: "stateHasChanged" }] : []));
|
|
216
216
|
effect(() => {
|
|
217
217
|
this.currentState = cloneArrayOfObject(this.grid()?.currentColumnsSortState || []);
|
|
218
218
|
});
|
|
@@ -237,20 +237,20 @@ class TableColumnsEditorComponent {
|
|
|
237
237
|
updateChangedState() {
|
|
238
238
|
this.stateHasChanged.set(JSON.stringify(this.grid()?.currentColumnsSortState) !== JSON.stringify(this.currentState));
|
|
239
239
|
}
|
|
240
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
241
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
240
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TableColumnsEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
241
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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() || 0\"\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;background:var(--smart-table-bg, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:.5rem 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{max-height:54dvh;overflow:auto;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:.5rem 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", "cdkDropListHasAnchor"], 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
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
243
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", 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 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() || 0\"\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;
|
|
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() || 0\"\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;background:var(--smart-table-bg, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:.5rem 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{max-height:54dvh;overflow:auto;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:.5rem 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 {
|
|
249
249
|
constructor() {
|
|
250
|
-
this.tableComponent = input();
|
|
250
|
+
this.tableComponent = input(...(ngDevMode ? [undefined, { debugName: "tableComponent" }] : []));
|
|
251
251
|
this.grid = computed(() => {
|
|
252
252
|
return this.tableComponent()?.grid;
|
|
253
|
-
});
|
|
253
|
+
}, ...(ngDevMode ? [{ debugName: "grid" }] : []));
|
|
254
254
|
this.overlay = inject(Overlay);
|
|
255
255
|
this.elementRef = inject(ElementRef);
|
|
256
256
|
this.destroy$ = new Subject();
|
|
@@ -328,10 +328,10 @@ class SmartTableColumnEditorDirective {
|
|
|
328
328
|
backdropClass: 'cdk-overlay-transparent-backdrop',
|
|
329
329
|
});
|
|
330
330
|
}
|
|
331
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
332
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
331
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SmartTableColumnEditorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
332
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.4", type: SmartTableColumnEditorDirective, isStandalone: true, selector: "[ng2SmartTableColumnEditor]", inputs: { tableComponent: { classPropertyName: "tableComponent", publicName: "tableComponent", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "buttonClicked()" } }, ngImport: i0 }); }
|
|
333
333
|
}
|
|
334
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
334
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SmartTableColumnEditorDirective, decorators: [{
|
|
335
335
|
type: Directive,
|
|
336
336
|
args: [{
|
|
337
337
|
selector: '[ng2SmartTableColumnEditor]',
|
|
@@ -346,7 +346,7 @@ class Cell {
|
|
|
346
346
|
this.value = value;
|
|
347
347
|
this.row = row;
|
|
348
348
|
this.column = column;
|
|
349
|
-
this.newValue = signal(null);
|
|
349
|
+
this.newValue = signal(null, ...(ngDevMode ? [{ debugName: "newValue" }] : []));
|
|
350
350
|
this.columnClass = '';
|
|
351
351
|
this.styles = '';
|
|
352
352
|
this.title = '';
|
|
@@ -444,13 +444,13 @@ class Row {
|
|
|
444
444
|
this.index = index;
|
|
445
445
|
this.rowDataObj = rowDataObj;
|
|
446
446
|
this.columnsList = columnsList;
|
|
447
|
-
this.pending = signal(false);
|
|
448
|
-
this.isSelected = signal(false);
|
|
449
|
-
this.isInEditing = signal(false);
|
|
450
|
-
this.cells = computed(() => this.columns().map((column) => this.createCell(column, this.rowData())));
|
|
451
|
-
this.rowData = signal({});
|
|
452
|
-
this.columns = signal([]);
|
|
453
|
-
this.visibleCells = computed(() => this.cells().filter((cell) => !cell.column.hide));
|
|
447
|
+
this.pending = signal(false, ...(ngDevMode ? [{ debugName: "pending" }] : []));
|
|
448
|
+
this.isSelected = signal(false, ...(ngDevMode ? [{ debugName: "isSelected" }] : []));
|
|
449
|
+
this.isInEditing = signal(false, ...(ngDevMode ? [{ debugName: "isInEditing" }] : []));
|
|
450
|
+
this.cells = computed(() => this.columns().map((column) => this.createCell(column, this.rowData())), ...(ngDevMode ? [{ debugName: "cells" }] : []));
|
|
451
|
+
this.rowData = signal({}, ...(ngDevMode ? [{ debugName: "rowData" }] : []));
|
|
452
|
+
this.columns = signal([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
|
|
453
|
+
this.visibleCells = computed(() => this.cells().filter((cell) => !cell.column.hide), ...(ngDevMode ? [{ debugName: "visibleCells" }] : []));
|
|
454
454
|
this.rowData.set(rowDataObj);
|
|
455
455
|
this.columns.set(columnsList);
|
|
456
456
|
}
|
|
@@ -488,16 +488,16 @@ var SmartTableOnChangedEventName;
|
|
|
488
488
|
class DataSource {
|
|
489
489
|
constructor() {
|
|
490
490
|
this.onChangedSource = new Subject();
|
|
491
|
-
this.sortConf = signal(null);
|
|
492
|
-
this.filters = signal([]);
|
|
491
|
+
this.sortConf = signal(null, ...(ngDevMode ? [{ debugName: "sortConf" }] : []));
|
|
492
|
+
this.filters = signal([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
|
|
493
493
|
this.pagingConf = signal({
|
|
494
494
|
page: 1,
|
|
495
495
|
perPage: 100,
|
|
496
496
|
total: 0,
|
|
497
497
|
display: false,
|
|
498
498
|
perPageSelect: [],
|
|
499
|
-
});
|
|
500
|
-
this.data = signal([]);
|
|
499
|
+
}, ...(ngDevMode ? [{ debugName: "pagingConf" }] : []));
|
|
500
|
+
this.data = signal([], ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
501
501
|
this.getSort = this.sortConf;
|
|
502
502
|
this.getFilters = this.filters;
|
|
503
503
|
}
|
|
@@ -688,11 +688,11 @@ class LocalDataSource extends DataSource {
|
|
|
688
688
|
list = localSort(list, field, direction, compare);
|
|
689
689
|
}
|
|
690
690
|
return list;
|
|
691
|
-
});
|
|
691
|
+
}, ...(ngDevMode ? [{ debugName: "filteredAndSorted" }] : []));
|
|
692
692
|
this.paginatedList = computed(() => {
|
|
693
693
|
return this.paginate(this.filteredAndSorted());
|
|
694
|
-
});
|
|
695
|
-
this.count = computed(() => this.filteredAndSorted().length);
|
|
694
|
+
}, ...(ngDevMode ? [{ debugName: "paginatedList" }] : []));
|
|
695
|
+
this.count = computed(() => this.filteredAndSorted().length, ...(ngDevMode ? [{ debugName: "count" }] : []));
|
|
696
696
|
this.data.set(data);
|
|
697
697
|
}
|
|
698
698
|
async load(data) {
|
|
@@ -751,8 +751,8 @@ class ServerDataSource extends DataSource {
|
|
|
751
751
|
constructor(paramPrepareFunction, requestFunction, initPagingConf) {
|
|
752
752
|
super();
|
|
753
753
|
this.initPagingConf = initPagingConf;
|
|
754
|
-
this.count = computed(() => this.pagingConf().total);
|
|
755
|
-
this.pending = signal(false);
|
|
754
|
+
this.count = computed(() => this.pagingConf().total, ...(ngDevMode ? [{ debugName: "count" }] : []));
|
|
755
|
+
this.pending = signal(false, ...(ngDevMode ? [{ debugName: "pending" }] : []));
|
|
756
756
|
this.pagingConf.update((old) => ({ ...old, ...this.initPagingConf }));
|
|
757
757
|
this.paramPrepareFunction = paramPrepareFunction;
|
|
758
758
|
this.requestFunction = requestFunction;
|
|
@@ -792,17 +792,17 @@ class ServerDataSource extends DataSource {
|
|
|
792
792
|
|
|
793
793
|
class PagerComponent {
|
|
794
794
|
constructor() {
|
|
795
|
-
this.source = input.required();
|
|
796
|
-
this.content = input();
|
|
797
|
-
this.pagingConf = computed(() => this.source().pagingConf());
|
|
798
|
-
this.currentPerPage = computed(() => this.pagingConf().perPage);
|
|
799
|
-
this.currentPage = computed(() => this.pagingConf().page);
|
|
800
|
-
this.isShowTotal = computed(() => !!this.pagingConf().showTotal);
|
|
801
|
-
this.count = computed(() => this.source().count());
|
|
802
|
-
this.nextButtonText = computed(() => this.pagingConf().nextButtonText);
|
|
803
|
-
this.prevButtonText = computed(() => this.pagingConf().nextButtonText);
|
|
804
|
-
this.lastPage = computed(() => Math.ceil(this.count() / this.currentPerPage()) || 1);
|
|
805
|
-
this.pages = computed(() => this.getPages(this.currentPage(), this.lastPage(), this.count()));
|
|
795
|
+
this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
|
|
796
|
+
this.content = input(...(ngDevMode ? [undefined, { debugName: "content" }] : []));
|
|
797
|
+
this.pagingConf = computed(() => this.source().pagingConf(), ...(ngDevMode ? [{ debugName: "pagingConf" }] : []));
|
|
798
|
+
this.currentPerPage = computed(() => this.pagingConf().perPage, ...(ngDevMode ? [{ debugName: "currentPerPage" }] : []));
|
|
799
|
+
this.currentPage = computed(() => this.pagingConf().page, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
|
|
800
|
+
this.isShowTotal = computed(() => !!this.pagingConf().showTotal, ...(ngDevMode ? [{ debugName: "isShowTotal" }] : []));
|
|
801
|
+
this.count = computed(() => this.source().count(), ...(ngDevMode ? [{ debugName: "count" }] : []));
|
|
802
|
+
this.nextButtonText = computed(() => this.pagingConf().nextButtonText, ...(ngDevMode ? [{ debugName: "nextButtonText" }] : []));
|
|
803
|
+
this.prevButtonText = computed(() => this.pagingConf().nextButtonText, ...(ngDevMode ? [{ debugName: "prevButtonText" }] : []));
|
|
804
|
+
this.lastPage = computed(() => Math.ceil(this.count() / this.currentPerPage()) || 1, ...(ngDevMode ? [{ debugName: "lastPage" }] : []));
|
|
805
|
+
this.pages = computed(() => this.getPages(this.currentPage(), this.lastPage(), this.count()), ...(ngDevMode ? [{ debugName: "pages" }] : []));
|
|
806
806
|
}
|
|
807
807
|
paginate(page) {
|
|
808
808
|
this.source().setPage(page);
|
|
@@ -853,10 +853,10 @@ class PagerComponent {
|
|
|
853
853
|
}
|
|
854
854
|
this.source().setPaging(1, +target.value);
|
|
855
855
|
}
|
|
856
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
857
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
856
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
857
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: PagerComponent, isStandalone: true, selector: "ng2-smart-table-pager", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"ng2-smart-table-pagination__wrap\">\n <div class=\"total-wrap\">\n <ng-content>\n @if (content()) {\n <ng-template [ngTemplateOutlet]=\"content()!\"></ng-template>\n } @else {\n @if (isShowTotal()) {\n <span class=\"total-count\"> Total: {{ count() }} </span>\n }\n }\n </ng-content>\n </div>\n <nav class=\"ng2-smart-table-pagination__nav\">\n <ul class=\"ng2-smart-table-pagination__list\">\n <li class=\"ng2-smart-table-pagination__list-item\" [class.disabled]=\"currentPage() <= 1\">\n <a tabindex=\"0\" (keyup)=\"prev()\" (click)=\"prev()\" aria-label=\"Prev\">\n @if (prevButtonText(); as text) {\n {{ text }}\n } @else {\n « Previous\n }\n </a>\n </li>\n @for (page of pages(); track $index) {\n <li class=\"ng2-smart-table-pagination__list-item\" [class.active]=\"currentPage() === page\">\n @if (isString(page) || currentPage() === page) {\n <span>\n {{ page }}\n </span>\n } @else {\n <a [tabindex]=\"page\" (keyup)=\"paginate(page)\" (click)=\"paginate(page)\">{{ page }}</a>\n }\n </li>\n }\n <li class=\"ng2-smart-table-pagination__list-item\" [class.disabled]=\"currentPage() >= lastPage()\">\n <a tabindex=\"10\" (keyup)=\"next()\" (click)=\"next()\" aria-label=\"Next\">\n @if (nextButtonText(); as text) {\n {{ text }}\n } @else {\n Next »\n }\n </a>\n </li>\n </ul>\n </nav>\n <div>\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\n (change)=\"onChangePerPage($any($event.target))\"\n [ngModel]=\"currentPerPage()\"\n id=\"ng2-smart-pagination-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</div>\n", styles: [".ng2-smart-table-pagination__wrap{width:100%;display:inline-flex;align-items:center;font-size:.875em;padding:1rem}.ng2-smart-table-pagination__nav{margin:0 auto}.ng2-smart-table-pagination__list{margin:0;list-style:none;display:flex}.ng2-smart-table-pagination__list-item span,.ng2-smart-table-pagination__list-item a{color:var(--layout-text-color);padding:.2rem .5rem}.ng2-smart-table-pagination__list-item:not(.disabled) a{cursor:pointer}.ng2-smart-table-pagination__list-item:not(.disabled) a:hover{background-color:var(--layout-background-color);color:var(--layout-text-color)}.ng2-smart-table-pagination__list-item.active span{background-color:var(--card-header-primary-background-color);color:var(--card-header-primary-text-color)}.ng2-smart-table-pagination__list-item.disabled{opacity:.5}\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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
858
858
|
}
|
|
859
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
859
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: PagerComponent, decorators: [{
|
|
860
860
|
type: Component,
|
|
861
861
|
args: [{ selector: 'ng2-smart-table-pager', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, NgTemplateOutlet], template: "<div class=\"ng2-smart-table-pagination__wrap\">\n <div class=\"total-wrap\">\n <ng-content>\n @if (content()) {\n <ng-template [ngTemplateOutlet]=\"content()!\"></ng-template>\n } @else {\n @if (isShowTotal()) {\n <span class=\"total-count\"> Total: {{ count() }} </span>\n }\n }\n </ng-content>\n </div>\n <nav class=\"ng2-smart-table-pagination__nav\">\n <ul class=\"ng2-smart-table-pagination__list\">\n <li class=\"ng2-smart-table-pagination__list-item\" [class.disabled]=\"currentPage() <= 1\">\n <a tabindex=\"0\" (keyup)=\"prev()\" (click)=\"prev()\" aria-label=\"Prev\">\n @if (prevButtonText(); as text) {\n {{ text }}\n } @else {\n « Previous\n }\n </a>\n </li>\n @for (page of pages(); track $index) {\n <li class=\"ng2-smart-table-pagination__list-item\" [class.active]=\"currentPage() === page\">\n @if (isString(page) || currentPage() === page) {\n <span>\n {{ page }}\n </span>\n } @else {\n <a [tabindex]=\"page\" (keyup)=\"paginate(page)\" (click)=\"paginate(page)\">{{ page }}</a>\n }\n </li>\n }\n <li class=\"ng2-smart-table-pagination__list-item\" [class.disabled]=\"currentPage() >= lastPage()\">\n <a tabindex=\"10\" (keyup)=\"next()\" (click)=\"next()\" aria-label=\"Next\">\n @if (nextButtonText(); as text) {\n {{ text }}\n } @else {\n Next »\n }\n </a>\n </li>\n </ul>\n </nav>\n <div>\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\n (change)=\"onChangePerPage($any($event.target))\"\n [ngModel]=\"currentPerPage()\"\n id=\"ng2-smart-pagination-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</div>\n", styles: [".ng2-smart-table-pagination__wrap{width:100%;display:inline-flex;align-items:center;font-size:.875em;padding:1rem}.ng2-smart-table-pagination__nav{margin:0 auto}.ng2-smart-table-pagination__list{margin:0;list-style:none;display:flex}.ng2-smart-table-pagination__list-item span,.ng2-smart-table-pagination__list-item a{color:var(--layout-text-color);padding:.2rem .5rem}.ng2-smart-table-pagination__list-item:not(.disabled) a{cursor:pointer}.ng2-smart-table-pagination__list-item:not(.disabled) a:hover{background-color:var(--layout-background-color);color:var(--layout-text-color)}.ng2-smart-table-pagination__list-item.active span{background-color:var(--card-header-primary-background-color);color:var(--card-header-primary-text-color)}.ng2-smart-table-pagination__list-item.disabled{opacity:.5}\n"] }]
|
|
862
862
|
}] });
|
|
@@ -874,8 +874,8 @@ class CheckboxEditorComponent extends BaseEditorComponent {
|
|
|
874
874
|
onChange(event) {
|
|
875
875
|
this.cell().setNewValue(event.target.checked ? this.trueVal : this.falseVal);
|
|
876
876
|
}
|
|
877
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
878
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
877
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckboxEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
878
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: CheckboxEditorComponent, isStandalone: true, selector: "ng2-checkbox-editor", usesInheritance: true, ngImport: i0, template: `
|
|
879
879
|
<input
|
|
880
880
|
[class]="inputClass()"
|
|
881
881
|
type="checkbox"
|
|
@@ -886,7 +886,7 @@ class CheckboxEditorComponent extends BaseEditorComponent {
|
|
|
886
886
|
[checked]="cell().getValue() === trueVal" />
|
|
887
887
|
`, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
888
888
|
}
|
|
889
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
889
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckboxEditorComponent, decorators: [{
|
|
890
890
|
type: Component,
|
|
891
891
|
args: [{ selector: 'ng2-checkbox-editor', template: `
|
|
892
892
|
<input
|
|
@@ -901,8 +901,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
901
901
|
}] });
|
|
902
902
|
|
|
903
903
|
class InputEditorComponent extends BaseEditorComponent {
|
|
904
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
905
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
904
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
905
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: InputEditorComponent, isStandalone: true, selector: "ng2-input-editor", usesInheritance: true, ngImport: i0, template: `
|
|
906
906
|
<input
|
|
907
907
|
type="text"
|
|
908
908
|
[class]="inputClass()"
|
|
@@ -914,7 +914,7 @@ class InputEditorComponent extends BaseEditorComponent {
|
|
|
914
914
|
[disabled]="!cell().isEditable()" />
|
|
915
915
|
`, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
916
916
|
}
|
|
917
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
917
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputEditorComponent, decorators: [{
|
|
918
918
|
type: Component,
|
|
919
919
|
args: [{ selector: 'ng2-input-editor', template: `
|
|
920
920
|
<input
|
|
@@ -930,8 +930,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
930
930
|
}] });
|
|
931
931
|
|
|
932
932
|
class SelectEditorComponent extends BaseEditorComponent {
|
|
933
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
934
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
933
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
934
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SelectEditorComponent, isStandalone: true, selector: "ng2-select-editor", usesInheritance: true, ngImport: i0, template: `
|
|
935
935
|
<select
|
|
936
936
|
[class]="inputClass()"
|
|
937
937
|
class="form-control"
|
|
@@ -947,7 +947,7 @@ class SelectEditorComponent extends BaseEditorComponent {
|
|
|
947
947
|
</select>
|
|
948
948
|
`, isInline: true, 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 }); }
|
|
949
949
|
}
|
|
950
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
950
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectEditorComponent, decorators: [{
|
|
951
951
|
type: Component,
|
|
952
952
|
args: [{
|
|
953
953
|
selector: 'ng2-select-editor',
|
|
@@ -972,8 +972,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
972
972
|
}] });
|
|
973
973
|
|
|
974
974
|
class TextareaEditorComponent extends BaseEditorComponent {
|
|
975
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
976
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
975
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TextareaEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
976
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: TextareaEditorComponent, isStandalone: true, selector: "ng2-textarea-editor", usesInheritance: true, ngImport: i0, template: `
|
|
977
977
|
<textarea
|
|
978
978
|
[class]="inputClass()"
|
|
979
979
|
class="form-control"
|
|
@@ -985,7 +985,7 @@ class TextareaEditorComponent extends BaseEditorComponent {
|
|
|
985
985
|
</textarea>
|
|
986
986
|
`, isInline: true, styles: [":host input,:host textarea{width:100%;line-height:normal;padding:.375em .75em}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
987
987
|
}
|
|
988
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
988
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TextareaEditorComponent, decorators: [{
|
|
989
989
|
type: Component,
|
|
990
990
|
args: [{ selector: 'ng2-textarea-editor', template: `
|
|
991
991
|
<textarea
|
|
@@ -1009,12 +1009,12 @@ class BuildInEditorComponent extends BaseEditorComponent {
|
|
|
1009
1009
|
return editor.type || 'text';
|
|
1010
1010
|
}
|
|
1011
1011
|
return 'text';
|
|
1012
|
-
});
|
|
1012
|
+
}, ...(ngDevMode ? [{ debugName: "editorType" }] : []));
|
|
1013
1013
|
}
|
|
1014
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1015
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1014
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BuildInEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1015
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: BuildInEditorComponent, isStandalone: true, selector: "ng2-table-cell-build-in-editor", usesInheritance: true, ngImport: i0, template: "<div role=\"none\" (click)=\"$event.stopPropagation()\">\n @switch (editorType()) {\n @case ('list') {\n <ng2-select-editor [cell]=\"cell()\"> </ng2-select-editor>\n }\n @case ('textarea') {\n <ng2-textarea-editor [cell]=\"cell()\"> </ng2-textarea-editor>\n }\n @case ('checkbox') {\n <ng2-checkbox-editor [cell]=\"cell()\"> </ng2-checkbox-editor>\n }\n @default {\n <ng2-input-editor [cell]=\"cell()\"> </ng2-input-editor>\n }\n }\n</div>\n", dependencies: [{ kind: "component", type: SelectEditorComponent, selector: "ng2-select-editor" }, { kind: "component", type: TextareaEditorComponent, selector: "ng2-textarea-editor" }, { kind: "component", type: CheckboxEditorComponent, selector: "ng2-checkbox-editor" }, { kind: "component", type: InputEditorComponent, selector: "ng2-input-editor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1016
1016
|
}
|
|
1017
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1017
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BuildInEditorComponent, decorators: [{
|
|
1018
1018
|
type: Component,
|
|
1019
1019
|
args: [{ selector: 'ng2-table-cell-build-in-editor', imports: [SelectEditorComponent, TextareaEditorComponent, CheckboxEditorComponent, InputEditorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div role=\"none\" (click)=\"$event.stopPropagation()\">\n @switch (editorType()) {\n @case ('list') {\n <ng2-select-editor [cell]=\"cell()\"> </ng2-select-editor>\n }\n @case ('textarea') {\n <ng2-textarea-editor [cell]=\"cell()\"> </ng2-textarea-editor>\n }\n @case ('checkbox') {\n <ng2-checkbox-editor [cell]=\"cell()\"> </ng2-checkbox-editor>\n }\n @default {\n <ng2-input-editor [cell]=\"cell()\"> </ng2-input-editor>\n }\n }\n</div>\n" }]
|
|
1020
1020
|
}] });
|
|
@@ -1044,10 +1044,10 @@ class CustomEditComponent extends BaseEditorComponent {
|
|
|
1044
1044
|
this.customComponent.destroy();
|
|
1045
1045
|
}
|
|
1046
1046
|
}
|
|
1047
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1048
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1047
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CustomEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1048
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: CustomEditComponent, isStandalone: true, selector: "ng2-table-cell-custom-editor", viewQueries: [{ propertyName: "dynamicTarget", first: true, predicate: ["dynamicTarget"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: ` <ng-template #dynamicTarget></ng-template> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1049
1049
|
}
|
|
1050
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1050
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CustomEditComponent, decorators: [{
|
|
1051
1051
|
type: Component,
|
|
1052
1052
|
args: [{
|
|
1053
1053
|
selector: 'ng2-table-cell-custom-editor',
|
|
@@ -1061,7 +1061,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1061
1061
|
|
|
1062
1062
|
class EditCellComponent {
|
|
1063
1063
|
constructor() {
|
|
1064
|
-
this.cell = input.required();
|
|
1064
|
+
this.cell = input.required(...(ngDevMode ? [{ debugName: "cell" }] : []));
|
|
1065
1065
|
}
|
|
1066
1066
|
getEditorType() {
|
|
1067
1067
|
const editor = this.cell().column.editor;
|
|
@@ -1070,8 +1070,8 @@ class EditCellComponent {
|
|
|
1070
1070
|
}
|
|
1071
1071
|
return 'text';
|
|
1072
1072
|
}
|
|
1073
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1074
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1073
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EditCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1074
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: EditCellComponent, isStandalone: true, selector: "ng2-table-cell-edit-mode", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
1075
1075
|
<div>
|
|
1076
1076
|
@switch (getEditorType()) {
|
|
1077
1077
|
@case ('custom') {
|
|
@@ -1084,7 +1084,7 @@ class EditCellComponent {
|
|
|
1084
1084
|
</div>
|
|
1085
1085
|
`, isInline: true, dependencies: [{ kind: "component", type: CustomEditComponent, selector: "ng2-table-cell-custom-editor" }, { kind: "component", type: BuildInEditorComponent, selector: "ng2-table-cell-build-in-editor" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1086
1086
|
}
|
|
1087
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1087
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: EditCellComponent, decorators: [{
|
|
1088
1088
|
type: Component,
|
|
1089
1089
|
args: [{
|
|
1090
1090
|
selector: 'ng2-table-cell-edit-mode',
|
|
@@ -1107,17 +1107,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1107
1107
|
|
|
1108
1108
|
class CustomViewComponent {
|
|
1109
1109
|
constructor() {
|
|
1110
|
-
this.cell = input.required();
|
|
1110
|
+
this.cell = input.required(...(ngDevMode ? [{ debugName: "cell" }] : []));
|
|
1111
1111
|
this.inputs = computed(() => ({
|
|
1112
1112
|
rowData: this.cell().row.rowData(),
|
|
1113
1113
|
value: this.cell().getValue(),
|
|
1114
1114
|
...this.cell().column.renderComponentInputs,
|
|
1115
|
-
}));
|
|
1115
|
+
}), ...(ngDevMode ? [{ debugName: "inputs" }] : []));
|
|
1116
1116
|
}
|
|
1117
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1118
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1117
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CustomViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1118
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: CustomViewComponent, isStandalone: true, selector: "ng2-custom-view-component", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<ng-template *ngComponentOutlet="cell().column.renderComponent!; inputs: inputs()"></ng-template>`, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1119
1119
|
}
|
|
1120
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1120
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CustomViewComponent, decorators: [{
|
|
1121
1121
|
type: Component,
|
|
1122
1122
|
args: [{
|
|
1123
1123
|
selector: 'ng2-custom-view-component',
|
|
@@ -1129,10 +1129,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1129
1129
|
|
|
1130
1130
|
class ViewCellComponent {
|
|
1131
1131
|
constructor() {
|
|
1132
|
-
this.cell = input.required();
|
|
1132
|
+
this.cell = input.required(...(ngDevMode ? [{ debugName: "cell" }] : []));
|
|
1133
1133
|
}
|
|
1134
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1135
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1134
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ViewCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1135
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ViewCellComponent, isStandalone: true, selector: "ng2-table-cell-view-mode", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
|
|
1136
1136
|
<div>
|
|
1137
1137
|
@switch (cell().column.type) {
|
|
1138
1138
|
@case ('custom') {
|
|
@@ -1148,7 +1148,7 @@ class ViewCellComponent {
|
|
|
1148
1148
|
</div>
|
|
1149
1149
|
`, isInline: true, dependencies: [{ kind: "component", type: CustomViewComponent, selector: "ng2-custom-view-component", inputs: ["cell"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1150
1150
|
}
|
|
1151
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1151
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ViewCellComponent, decorators: [{
|
|
1152
1152
|
type: Component,
|
|
1153
1153
|
args: [{
|
|
1154
1154
|
selector: 'ng2-table-cell-view-mode',
|
|
@@ -1174,11 +1174,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1174
1174
|
|
|
1175
1175
|
class CellComponent {
|
|
1176
1176
|
constructor() {
|
|
1177
|
-
this.cell = input.required();
|
|
1178
|
-
this.isInEditing = input(false);
|
|
1177
|
+
this.cell = input.required(...(ngDevMode ? [{ debugName: "cell" }] : []));
|
|
1178
|
+
this.isInEditing = input(false, ...(ngDevMode ? [{ debugName: "isInEditing" }] : []));
|
|
1179
1179
|
}
|
|
1180
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1181
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1180
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1181
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: CellComponent, isStandalone: true, selector: "ng2-smart-table-cell", inputs: { cell: { classPropertyName: "cell", publicName: "cell", isSignal: true, isRequired: true, transformFunction: null }, isInEditing: { classPropertyName: "isInEditing", publicName: "isInEditing", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
1182
1182
|
@if (!isInEditing()) {
|
|
1183
1183
|
<ng2-table-cell-view-mode [cell]="cell()"></ng2-table-cell-view-mode>
|
|
1184
1184
|
} @else {
|
|
@@ -1186,7 +1186,7 @@ class CellComponent {
|
|
|
1186
1186
|
}
|
|
1187
1187
|
`, isInline: true, dependencies: [{ kind: "component", type: ViewCellComponent, selector: "ng2-table-cell-view-mode", inputs: ["cell"] }, { kind: "component", type: EditCellComponent, selector: "ng2-table-cell-edit-mode", inputs: ["cell"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1188
1188
|
}
|
|
1189
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1189
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CellComponent, decorators: [{
|
|
1190
1190
|
type: Component,
|
|
1191
1191
|
args: [{
|
|
1192
1192
|
selector: 'ng2-smart-table-cell',
|
|
@@ -1204,32 +1204,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1204
1204
|
|
|
1205
1205
|
class TbodyCreateCancelComponent {
|
|
1206
1206
|
constructor() {
|
|
1207
|
-
this.grid = input.required();
|
|
1208
|
-
this.rowIndex = input();
|
|
1209
|
-
this.rowPending = input(false);
|
|
1207
|
+
this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
|
|
1208
|
+
this.rowIndex = input(...(ngDevMode ? [undefined, { debugName: "rowIndex" }] : []));
|
|
1209
|
+
this.rowPending = input(false, ...(ngDevMode ? [{ debugName: "rowPending" }] : []));
|
|
1210
1210
|
this.save = output();
|
|
1211
1211
|
this.cancelEdit = output();
|
|
1212
1212
|
this.cancelButtonContent = computed(() => {
|
|
1213
1213
|
const edit = this.grid().settings().edit;
|
|
1214
1214
|
return edit ? edit.cancelButtonContent || 'Cancel' : 'Cancel';
|
|
1215
|
-
});
|
|
1215
|
+
}, ...(ngDevMode ? [{ debugName: "cancelButtonContent" }] : []));
|
|
1216
1216
|
this.saveButtonContent = computed(() => {
|
|
1217
1217
|
const edit = this.grid().settings().edit;
|
|
1218
1218
|
return edit ? edit.saveButtonContent || 'Save' : 'Save';
|
|
1219
|
-
});
|
|
1219
|
+
}, ...(ngDevMode ? [{ debugName: "saveButtonContent" }] : []));
|
|
1220
1220
|
}
|
|
1221
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1222
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1221
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TbodyCreateCancelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1222
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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 }); }
|
|
1223
1223
|
}
|
|
1224
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1224
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TbodyCreateCancelComponent, decorators: [{
|
|
1225
1225
|
type: Component,
|
|
1226
1226
|
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"] }]
|
|
1227
1227
|
}] });
|
|
1228
1228
|
|
|
1229
1229
|
class RowActionsComponent {
|
|
1230
1230
|
constructor() {
|
|
1231
|
-
this.grid = input.required();
|
|
1232
|
-
this.row = input.required();
|
|
1231
|
+
this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
|
|
1232
|
+
this.row = input.required(...(ngDevMode ? [{ debugName: "row" }] : []));
|
|
1233
1233
|
this.editEmitter = output();
|
|
1234
1234
|
this.deleteEmitter = output();
|
|
1235
1235
|
this.customActionEmitter = output();
|
|
@@ -1240,7 +1240,7 @@ class RowActionsComponent {
|
|
|
1240
1240
|
}
|
|
1241
1241
|
const list = actions.custom.filter((action) => !action.hasPermissionFunction ? true : action.hasPermissionFunction(this.row().rowData()));
|
|
1242
1242
|
return list;
|
|
1243
|
-
});
|
|
1243
|
+
}, ...(ngDevMode ? [{ debugName: "customActions" }] : []));
|
|
1244
1244
|
this.isActionEditActive = computed(() => {
|
|
1245
1245
|
const actions = this.grid().settings().actions;
|
|
1246
1246
|
const editConfig = this.grid().settings().edit;
|
|
@@ -1251,7 +1251,7 @@ class RowActionsComponent {
|
|
|
1251
1251
|
return true;
|
|
1252
1252
|
}
|
|
1253
1253
|
return editConfig.hasPermissionFunction(this.row().rowData());
|
|
1254
|
-
});
|
|
1254
|
+
}, ...(ngDevMode ? [{ debugName: "isActionEditActive" }] : []));
|
|
1255
1255
|
this.isActionDeleteActive = computed(() => {
|
|
1256
1256
|
const actions = this.grid().settings().actions;
|
|
1257
1257
|
const deleteConfig = this.grid().settings().delete;
|
|
@@ -1262,24 +1262,24 @@ class RowActionsComponent {
|
|
|
1262
1262
|
return true;
|
|
1263
1263
|
}
|
|
1264
1264
|
return deleteConfig.hasPermissionFunction(this.row().rowData());
|
|
1265
|
-
});
|
|
1265
|
+
}, ...(ngDevMode ? [{ debugName: "isActionDeleteActive" }] : []));
|
|
1266
1266
|
this.isExternalMode = computed(() => {
|
|
1267
1267
|
return this.grid().settings().mode === 'external';
|
|
1268
|
-
});
|
|
1268
|
+
}, ...(ngDevMode ? [{ debugName: "isExternalMode" }] : []));
|
|
1269
1269
|
this.editRowButtonContent = computed(() => {
|
|
1270
1270
|
const edit = this.grid().settings().edit;
|
|
1271
1271
|
return edit ? edit.editButtonContent || 'Edit' : 'Edit';
|
|
1272
|
-
});
|
|
1272
|
+
}, ...(ngDevMode ? [{ debugName: "editRowButtonContent" }] : []));
|
|
1273
1273
|
this.deleteRowButtonContent = computed(() => {
|
|
1274
1274
|
const deleteConfig = this.grid().settings().delete;
|
|
1275
1275
|
return deleteConfig ? deleteConfig.deleteButtonContent || 'Delete' : 'Delete';
|
|
1276
|
-
});
|
|
1276
|
+
}, ...(ngDevMode ? [{ debugName: "deleteRowButtonContent" }] : []));
|
|
1277
1277
|
this.allActionsCountArray = computed(() => {
|
|
1278
1278
|
let length = this.customActions().length;
|
|
1279
1279
|
length += this.isActionDeleteActive() ? 1 : 0;
|
|
1280
1280
|
length += this.isActionEditActive() ? 1 : 0;
|
|
1281
1281
|
return new Array(length).fill('');
|
|
1282
|
-
});
|
|
1282
|
+
}, ...(ngDevMode ? [{ debugName: "allActionsCountArray" }] : []));
|
|
1283
1283
|
}
|
|
1284
1284
|
onCustom(action) {
|
|
1285
1285
|
this.customActionEmitter.emit(action.name);
|
|
@@ -1294,21 +1294,21 @@ class RowActionsComponent {
|
|
|
1294
1294
|
event.stopPropagation();
|
|
1295
1295
|
this.deleteEmitter.emit();
|
|
1296
1296
|
}
|
|
1297
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1298
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1297
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RowActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1298
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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: [":host{display:flex}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1299
1299
|
}
|
|
1300
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1300
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: RowActionsComponent, decorators: [{
|
|
1301
1301
|
type: Component,
|
|
1302
1302
|
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: [":host{display:flex}\n"] }]
|
|
1303
1303
|
}] });
|
|
1304
1304
|
|
|
1305
1305
|
class TrowComponent {
|
|
1306
1306
|
constructor() {
|
|
1307
|
-
this.grid = input.required();
|
|
1308
|
-
this.source = input.required();
|
|
1309
|
-
this.row = input.required();
|
|
1310
|
-
this.isMobileView = input(false);
|
|
1311
|
-
this.isCreateRow = input(false);
|
|
1307
|
+
this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
|
|
1308
|
+
this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
|
|
1309
|
+
this.row = input.required(...(ngDevMode ? [{ debugName: "row" }] : []));
|
|
1310
|
+
this.isMobileView = input(false, ...(ngDevMode ? [{ debugName: "isMobileView" }] : []));
|
|
1311
|
+
this.isCreateRow = input(false, ...(ngDevMode ? [{ debugName: "isCreateRow" }] : []));
|
|
1312
1312
|
this.edit = output();
|
|
1313
1313
|
this.editCancel = output();
|
|
1314
1314
|
this.editConfirmed = output();
|
|
@@ -1334,10 +1334,10 @@ class TrowComponent {
|
|
|
1334
1334
|
this.editCancel.emit();
|
|
1335
1335
|
this.row()?.isInEditing.set(false);
|
|
1336
1336
|
}
|
|
1337
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1338
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1337
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TrowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1338
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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\" (click)=\"$event.stopPropagation()\">\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 }); }
|
|
1339
1339
|
}
|
|
1340
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1340
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TrowComponent, decorators: [{
|
|
1341
1341
|
type: Component,
|
|
1342
1342
|
args: [{ selector: '[ng2-st-trow]', imports: [NgTemplateOutlet, FormsModule, CellComponent, RowActionsComponent, TbodyCreateCancelComponent], host: {
|
|
1343
1343
|
'[class.ng2-smart-card]': 'isMobileView()',
|
|
@@ -1346,10 +1346,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1346
1346
|
|
|
1347
1347
|
class Ng2SmartTableTbodyComponent {
|
|
1348
1348
|
constructor() {
|
|
1349
|
-
this.grid = input.required();
|
|
1350
|
-
this.source = input.required();
|
|
1351
|
-
this.rowClassFunction = input(() => '');
|
|
1352
|
-
this.isMobileView = input(false);
|
|
1349
|
+
this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
|
|
1350
|
+
this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
|
|
1351
|
+
this.rowClassFunction = input(() => '', ...(ngDevMode ? [{ debugName: "rowClassFunction" }] : []));
|
|
1352
|
+
this.isMobileView = input(false, ...(ngDevMode ? [{ debugName: "isMobileView" }] : []));
|
|
1353
1353
|
this.edit = output();
|
|
1354
1354
|
this.editConfirmed = output();
|
|
1355
1355
|
this.editCancel = output();
|
|
@@ -1367,7 +1367,7 @@ class Ng2SmartTableTbodyComponent {
|
|
|
1367
1367
|
// });
|
|
1368
1368
|
this.noDataMessage = computed(() => {
|
|
1369
1369
|
return this.grid().settings().noDataMessage || 'No data found';
|
|
1370
|
-
});
|
|
1370
|
+
}, ...(ngDevMode ? [{ debugName: "noDataMessage" }] : []));
|
|
1371
1371
|
}
|
|
1372
1372
|
rowClicked(row) {
|
|
1373
1373
|
if (row.isInEditing()) {
|
|
@@ -1385,17 +1385,17 @@ class Ng2SmartTableTbodyComponent {
|
|
|
1385
1385
|
trackByIdOrIndex(index, item) {
|
|
1386
1386
|
return item?.id || index;
|
|
1387
1387
|
}
|
|
1388
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1389
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1388
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Ng2SmartTableTbodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1389
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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 }); }
|
|
1390
1390
|
}
|
|
1391
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1391
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Ng2SmartTableTbodyComponent, decorators: [{
|
|
1392
1392
|
type: Component,
|
|
1393
1393
|
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" }]
|
|
1394
1394
|
}] });
|
|
1395
1395
|
|
|
1396
1396
|
class AddButtonComponent {
|
|
1397
1397
|
constructor() {
|
|
1398
|
-
this.grid = input.required();
|
|
1398
|
+
this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
|
|
1399
1399
|
this.create = output();
|
|
1400
1400
|
this.isActionAdd = computed(() => {
|
|
1401
1401
|
const actions = this.grid().settings().actions;
|
|
@@ -1403,22 +1403,22 @@ class AddButtonComponent {
|
|
|
1403
1403
|
return false;
|
|
1404
1404
|
}
|
|
1405
1405
|
return !!actions.add;
|
|
1406
|
-
});
|
|
1406
|
+
}, ...(ngDevMode ? [{ debugName: "isActionAdd" }] : []));
|
|
1407
1407
|
this.addNewButtonContent = computed(() => {
|
|
1408
1408
|
const addParams = this.grid().settings()?.add;
|
|
1409
1409
|
if (!addParams) {
|
|
1410
1410
|
return 'Add New';
|
|
1411
1411
|
}
|
|
1412
1412
|
return addParams?.addButtonContent || 'Add New';
|
|
1413
|
-
});
|
|
1413
|
+
}, ...(ngDevMode ? [{ debugName: "addNewButtonContent" }] : []));
|
|
1414
1414
|
}
|
|
1415
1415
|
onAdd(event) {
|
|
1416
1416
|
event.preventDefault();
|
|
1417
1417
|
event.stopPropagation();
|
|
1418
1418
|
this.create.emit();
|
|
1419
1419
|
}
|
|
1420
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1421
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1420
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AddButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1421
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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: `
|
|
1422
1422
|
@if (isActionAdd()) {
|
|
1423
1423
|
<a
|
|
1424
1424
|
href="#"
|
|
@@ -1428,7 +1428,7 @@ class AddButtonComponent {
|
|
|
1428
1428
|
}
|
|
1429
1429
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1430
1430
|
}
|
|
1431
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1431
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AddButtonComponent, decorators: [{
|
|
1432
1432
|
type: Component,
|
|
1433
1433
|
args: [{
|
|
1434
1434
|
selector: '[ng2-st-add-button]',
|
|
@@ -1450,8 +1450,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1450
1450
|
|
|
1451
1451
|
class ColumnTitleComponent {
|
|
1452
1452
|
constructor() {
|
|
1453
|
-
this.currentSort = input.required();
|
|
1454
|
-
this.column = input.required();
|
|
1453
|
+
this.currentSort = input.required(...(ngDevMode ? [{ debugName: "currentSort" }] : []));
|
|
1454
|
+
this.column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
|
|
1455
1455
|
this.sortEmit = output();
|
|
1456
1456
|
this.currentSortDirection = computed(() => {
|
|
1457
1457
|
const sort = this.currentSort();
|
|
@@ -1460,10 +1460,10 @@ class ColumnTitleComponent {
|
|
|
1460
1460
|
}
|
|
1461
1461
|
const { field, direction, title } = sort;
|
|
1462
1462
|
return this.column().id === field && this.column().title === title ? direction : null;
|
|
1463
|
-
});
|
|
1463
|
+
}, ...(ngDevMode ? [{ debugName: "currentSortDirection" }] : []));
|
|
1464
1464
|
this.currentSortDirectionSymbol = computed(() => {
|
|
1465
1465
|
return !this.currentSortDirection() ? '' : this.currentSortDirection() === 'asc' ? '↑' : '↓';
|
|
1466
|
-
});
|
|
1466
|
+
}, ...(ngDevMode ? [{ debugName: "currentSortDirectionSymbol" }] : []));
|
|
1467
1467
|
}
|
|
1468
1468
|
_sort(event) {
|
|
1469
1469
|
event.preventDefault();
|
|
@@ -1476,8 +1476,8 @@ class ColumnTitleComponent {
|
|
|
1476
1476
|
// compare: this.column().compareFunction,
|
|
1477
1477
|
// });
|
|
1478
1478
|
}
|
|
1479
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1480
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1479
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ColumnTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1480
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: ColumnTitleComponent, isStandalone: true, selector: "ng2-st-column-title", inputs: { currentSort: { classPropertyName: "currentSort", publicName: "currentSort", isSignal: true, isRequired: true, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { sortEmit: "sortEmit" }, ngImport: i0, template: `
|
|
1481
1481
|
@if (column().isSortable) {
|
|
1482
1482
|
<a href="#" (click)="_sort($event)" class="ng2-smart-sort-link sort">
|
|
1483
1483
|
{{ column().title }}
|
|
@@ -1488,7 +1488,7 @@ class ColumnTitleComponent {
|
|
|
1488
1488
|
}
|
|
1489
1489
|
`, isInline: true, styles: ["a.sort{white-space:nowrap}a.sort.asc,a.sort.desc{font-weight:700}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1490
1490
|
}
|
|
1491
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1491
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ColumnTitleComponent, decorators: [{
|
|
1492
1492
|
type: Component,
|
|
1493
1493
|
args: [{ selector: 'ng2-st-column-title', template: `
|
|
1494
1494
|
@if (column().isSortable) {
|
|
@@ -1505,11 +1505,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1505
1505
|
class CheckboxFilterComponent extends BaseFilterComponent {
|
|
1506
1506
|
constructor() {
|
|
1507
1507
|
super(...arguments);
|
|
1508
|
-
this.filterIsActive = computed(() => this.query() !== null);
|
|
1508
|
+
this.filterIsActive = computed(() => this.query() !== null, ...(ngDevMode ? [{ debugName: "filterIsActive" }] : []));
|
|
1509
1509
|
this.currentState = computed(() => {
|
|
1510
1510
|
const valuesConfig = this.getValuesConfig(this.column().getFilterConfig());
|
|
1511
1511
|
return this.query() === valuesConfig.trueVal ? true : this.query() === valuesConfig.falseVal ? false : false;
|
|
1512
|
-
});
|
|
1512
|
+
}, ...(ngDevMode ? [{ debugName: "currentState" }] : []));
|
|
1513
1513
|
}
|
|
1514
1514
|
getValuesConfig(filterConfig) {
|
|
1515
1515
|
try {
|
|
@@ -1530,8 +1530,8 @@ class CheckboxFilterComponent extends BaseFilterComponent {
|
|
|
1530
1530
|
event.stopPropagation();
|
|
1531
1531
|
this.setFilter(null);
|
|
1532
1532
|
}
|
|
1533
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1534
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1533
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckboxFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1534
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: CheckboxFilterComponent, isStandalone: true, selector: "ng2-checkbox-filter", usesInheritance: true, ngImport: i0, template: `
|
|
1535
1535
|
<div class="checkbox-filter-wrapper">
|
|
1536
1536
|
<input
|
|
1537
1537
|
[id]="column().id"
|
|
@@ -1548,7 +1548,7 @@ class CheckboxFilterComponent extends BaseFilterComponent {
|
|
|
1548
1548
|
</div>
|
|
1549
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 }); }
|
|
1550
1550
|
}
|
|
1551
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1551
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckboxFilterComponent, decorators: [{
|
|
1552
1552
|
type: Component,
|
|
1553
1553
|
args: [{ selector: 'ng2-checkbox-filter', template: `
|
|
1554
1554
|
<div class="checkbox-filter-wrapper">
|
|
@@ -1569,8 +1569,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1569
1569
|
}] });
|
|
1570
1570
|
|
|
1571
1571
|
class InputFilterComponent extends BaseFilterComponent {
|
|
1572
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1573
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
1572
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1573
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: InputFilterComponent, isStandalone: true, selector: "ng2-input-filter", usesInheritance: true, ngImport: i0, template: `
|
|
1574
1574
|
<input
|
|
1575
1575
|
[class]="inputClass()"
|
|
1576
1576
|
[formControl]="inputControl"
|
|
@@ -1579,7 +1579,7 @@ class InputFilterComponent extends BaseFilterComponent {
|
|
|
1579
1579
|
placeholder="{{ placeholder || column().title }}" />
|
|
1580
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 }); }
|
|
1581
1581
|
}
|
|
1582
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1582
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: InputFilterComponent, decorators: [{
|
|
1583
1583
|
type: Component,
|
|
1584
1584
|
args: [{
|
|
1585
1585
|
selector: 'ng2-input-filter',
|
|
@@ -1599,15 +1599,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1599
1599
|
class SelectFilterComponent extends BaseFilterComponent {
|
|
1600
1600
|
constructor() {
|
|
1601
1601
|
super(...arguments);
|
|
1602
|
-
this.optionsList = signal([]);
|
|
1602
|
+
this.optionsList = signal([], ...(ngDevMode ? [{ debugName: "optionsList" }] : []));
|
|
1603
1603
|
}
|
|
1604
1604
|
ngOnInit() {
|
|
1605
1605
|
super.ngOnInit();
|
|
1606
1606
|
const config = this.column().getFilterConfig();
|
|
1607
1607
|
this.optionsList.set(config?.list || []);
|
|
1608
1608
|
}
|
|
1609
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1610
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1609
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectFilterComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1610
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: SelectFilterComponent, isStandalone: true, selector: "ng2-select-filter", usesInheritance: true, ngImport: i0, template: `
|
|
1611
1611
|
<select [class]="inputClass()" class="form-control" [formControl]="inputControl">
|
|
1612
1612
|
<option [value]="null">{{ placeholder || 'all' }}</option>
|
|
1613
1613
|
@for (option of optionsList(); track $index) {
|
|
@@ -1618,7 +1618,7 @@ class SelectFilterComponent extends BaseFilterComponent {
|
|
|
1618
1618
|
</select>
|
|
1619
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 }); }
|
|
1620
1620
|
}
|
|
1621
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1621
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: SelectFilterComponent, decorators: [{
|
|
1622
1622
|
type: Component,
|
|
1623
1623
|
args: [{
|
|
1624
1624
|
selector: 'ng2-select-filter',
|
|
@@ -1639,14 +1639,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1639
1639
|
|
|
1640
1640
|
class BuildInFilterComponent {
|
|
1641
1641
|
constructor() {
|
|
1642
|
-
this.query = input(null);
|
|
1643
|
-
this.inputClass = input('');
|
|
1644
|
-
this.source = input.required();
|
|
1645
|
-
this.column = input.required();
|
|
1642
|
+
this.query = input(null, ...(ngDevMode ? [{ debugName: "query" }] : []));
|
|
1643
|
+
this.inputClass = input('', ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
|
|
1644
|
+
this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
|
|
1645
|
+
this.column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
|
|
1646
1646
|
this.filter = output();
|
|
1647
1647
|
}
|
|
1648
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1649
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1648
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BuildInFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1649
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: BuildInFilterComponent, isStandalone: true, selector: "ng2-build-in-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: `
|
|
1650
1650
|
@switch (column().getFilterType()) {
|
|
1651
1651
|
@case ('list') {
|
|
1652
1652
|
<ng2-select-filter
|
|
@@ -1678,7 +1678,7 @@ class BuildInFilterComponent {
|
|
|
1678
1678
|
}
|
|
1679
1679
|
`, isInline: true, dependencies: [{ kind: "component", type: SelectFilterComponent, selector: "ng2-select-filter" }, { kind: "component", type: CheckboxFilterComponent, selector: "ng2-checkbox-filter" }, { kind: "component", type: InputFilterComponent, selector: "ng2-input-filter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1680
1680
|
}
|
|
1681
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1681
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: BuildInFilterComponent, decorators: [{
|
|
1682
1682
|
type: Component,
|
|
1683
1683
|
args: [{
|
|
1684
1684
|
selector: 'ng2-build-in-table-filter',
|
|
@@ -1720,10 +1720,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1720
1720
|
|
|
1721
1721
|
class CustomFilterComponent {
|
|
1722
1722
|
constructor() {
|
|
1723
|
-
this.query = input(null);
|
|
1724
|
-
this.inputClass = input('');
|
|
1725
|
-
this.source = input.required();
|
|
1726
|
-
this.column = input.required();
|
|
1723
|
+
this.query = input(null, ...(ngDevMode ? [{ debugName: "query" }] : []));
|
|
1724
|
+
this.inputClass = input('', ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
|
|
1725
|
+
this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
|
|
1726
|
+
this.column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
|
|
1727
1727
|
this.filter = output();
|
|
1728
1728
|
this.componentInputs = computed(() => {
|
|
1729
1729
|
let inputs = {
|
|
@@ -1740,7 +1740,7 @@ class CustomFilterComponent {
|
|
|
1740
1740
|
}
|
|
1741
1741
|
}
|
|
1742
1742
|
return inputs;
|
|
1743
|
-
});
|
|
1743
|
+
}, ...(ngDevMode ? [{ debugName: "componentInputs" }] : []));
|
|
1744
1744
|
}
|
|
1745
1745
|
ngOnInit() {
|
|
1746
1746
|
const columnFilter = this.column().filter;
|
|
@@ -1748,14 +1748,14 @@ class CustomFilterComponent {
|
|
|
1748
1748
|
this.customFilterComponent = columnFilter.component;
|
|
1749
1749
|
}
|
|
1750
1750
|
}
|
|
1751
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1752
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1751
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CustomFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1752
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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: `
|
|
1753
1753
|
@if (customFilterComponent) {
|
|
1754
1754
|
<ng-template *ngComponentOutlet="customFilterComponent; inputs: componentInputs()"></ng-template>
|
|
1755
1755
|
}
|
|
1756
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1756
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1757
1757
|
}
|
|
1758
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1758
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CustomFilterComponent, decorators: [{
|
|
1759
1759
|
type: Component,
|
|
1760
1760
|
args: [{
|
|
1761
1761
|
selector: 'ng2-custom-table-filter',
|
|
@@ -1771,15 +1771,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1771
1771
|
|
|
1772
1772
|
class FilterComponent {
|
|
1773
1773
|
constructor() {
|
|
1774
|
-
this.column = input.required();
|
|
1775
|
-
this.source = input.required();
|
|
1776
|
-
this.inputClass = input('');
|
|
1774
|
+
this.column = input.required(...(ngDevMode ? [{ debugName: "column" }] : []));
|
|
1775
|
+
this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
|
|
1776
|
+
this.inputClass = input('', ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
|
|
1777
1777
|
this.query = computed(() => {
|
|
1778
1778
|
const columnFilter = this.source()
|
|
1779
1779
|
.getFilters()
|
|
1780
1780
|
.find((filter) => filter.field === this.column().id);
|
|
1781
1781
|
return columnFilter?.search ?? null;
|
|
1782
|
-
});
|
|
1782
|
+
}, ...(ngDevMode ? [{ debugName: "query" }] : []));
|
|
1783
1783
|
}
|
|
1784
1784
|
onFilter(query) {
|
|
1785
1785
|
const columnFilter = this.column().filter;
|
|
@@ -1790,8 +1790,8 @@ class FilterComponent {
|
|
|
1790
1790
|
filter: this.column().filterFunction,
|
|
1791
1791
|
});
|
|
1792
1792
|
}
|
|
1793
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1794
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1793
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1794
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: FilterComponent, isStandalone: true, selector: "ng2-smart-table-filter", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
1795
1795
|
@if (column().isFilterable) {
|
|
1796
1796
|
<div class="ng2-smart-filter">
|
|
1797
1797
|
@switch (column().getFilterType()) {
|
|
@@ -1818,7 +1818,7 @@ class FilterComponent {
|
|
|
1818
1818
|
}
|
|
1819
1819
|
`, isInline: true, 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"], dependencies: [{ kind: "component", type: CustomFilterComponent, selector: "ng2-custom-table-filter", inputs: ["query", "inputClass", "source", "column"], outputs: ["filter"] }, { kind: "component", type: BuildInFilterComponent, selector: "ng2-build-in-table-filter", inputs: ["query", "inputClass", "source", "column"], outputs: ["filter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1820
1820
|
}
|
|
1821
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1821
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: FilterComponent, decorators: [{
|
|
1822
1822
|
type: Component,
|
|
1823
1823
|
args: [{ selector: 'ng2-smart-table-filter', template: `
|
|
1824
1824
|
@if (column().isFilterable) {
|
|
@@ -1853,9 +1853,9 @@ class MobileFiltersComponent {
|
|
|
1853
1853
|
this.overlay = inject(Overlay);
|
|
1854
1854
|
this.contentTemplate = viewChild.required(CdkPortal);
|
|
1855
1855
|
this.reference = viewChild.required('reference');
|
|
1856
|
-
this.grid = input.required();
|
|
1857
|
-
this.source = input.required();
|
|
1858
|
-
this.filterInputClass = input.required();
|
|
1856
|
+
this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
|
|
1857
|
+
this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
|
|
1858
|
+
this.filterInputClass = input.required(...(ngDevMode ? [{ debugName: "filterInputClass" }] : []));
|
|
1859
1859
|
}
|
|
1860
1860
|
clearAllFilters() {
|
|
1861
1861
|
this.source().setFilters([]);
|
|
@@ -1888,24 +1888,24 @@ class MobileFiltersComponent {
|
|
|
1888
1888
|
backdropClass: 'cdk-overlay-transparent-backdrop',
|
|
1889
1889
|
});
|
|
1890
1890
|
}
|
|
1891
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1892
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1891
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MobileFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1892
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: MobileFiltersComponent, isStandalone: true, selector: "ng2-mobile-filters", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, filterInputClass: { classPropertyName: "filterInputClass", publicName: "filterInputClass", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: CdkPortal, descendants: true, isSignal: true }, { propertyName: "reference", first: true, predicate: ["reference"], descendants: true, isSignal: true }], ngImport: i0, template: "<button #reference class=\"filter-toggle\" (click)=\"show()\" 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 stroke=\"#000000\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z\"></path>\n </g>\n </svg>\n</button>\n\n<ng-template cdk-portal>\n <div class=\"dropdown table-filter-dropdown\">\n <div class=\"dropdown-header\">\n <button type=\"button\" class=\"clear-filters-button\" (click)=\"clearAllFilters()\" aria-label=\"Close filters\">\n reset all\n </button>\n <button type=\"button\" class=\"close-dialog-button\" (click)=\"hide()\" aria-label=\"Close dropdown\">\n <span></span>\n </button>\n </div>\n <div class=\"dropdown-content\">\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 </div>\n </div>\n</ng-template>\n", styles: [".dropdown{z-index:1;padding:.8rem 1rem;border:none;border-radius:.5rem;background:var(--smart-table-bg, #fff);box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto}.filter-toggle svg{height:1rem;width:1rem}.dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.dropdown-content{display:flex;flex-direction:column}.dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}.dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}.close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}.close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}.close-dialog-button:after,.close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}.close-dialog-button:before{rotate:45deg}.close-dialog-button:after{position:absolute;rotate:-45deg}\n"], dependencies: [{ kind: "component", type: FilterComponent, selector: "ng2-smart-table-filter", inputs: ["column", "source", "inputClass"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.TemplatePortalDirective, selector: "[cdk-portal], [portal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1893
1893
|
}
|
|
1894
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1894
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: MobileFiltersComponent, decorators: [{
|
|
1895
1895
|
type: Component,
|
|
1896
1896
|
args: [{ selector: 'ng2-mobile-filters', imports: [FilterComponent, PortalModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #reference class=\"filter-toggle\" (click)=\"show()\" 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 stroke=\"#000000\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 4H4v2l6 6v8.5l4-2.5v-6l6-6V4z\"></path>\n </g>\n </svg>\n</button>\n\n<ng-template cdk-portal>\n <div class=\"dropdown table-filter-dropdown\">\n <div class=\"dropdown-header\">\n <button type=\"button\" class=\"clear-filters-button\" (click)=\"clearAllFilters()\" aria-label=\"Close filters\">\n reset all\n </button>\n <button type=\"button\" class=\"close-dialog-button\" (click)=\"hide()\" aria-label=\"Close dropdown\">\n <span></span>\n </button>\n </div>\n <div class=\"dropdown-content\">\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 </div>\n </div>\n</ng-template>\n", styles: [".dropdown{z-index:1;padding:.8rem 1rem;border:none;border-radius:.5rem;background:var(--smart-table-bg, #fff);box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto}.filter-toggle svg{height:1rem;width:1rem}.dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.dropdown-content{display:flex;flex-direction:column}.dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}.dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}.close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}.close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}.close-dialog-button:after,.close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}.close-dialog-button:before{rotate:45deg}.close-dialog-button:after{position:absolute;rotate:-45deg}\n"] }]
|
|
1897
1897
|
}] });
|
|
1898
1898
|
|
|
1899
1899
|
class TheadFiltersRowComponent {
|
|
1900
1900
|
constructor() {
|
|
1901
|
-
this.grid = input.required();
|
|
1902
|
-
this.source = input.required();
|
|
1903
|
-
this.withoutCreateButton = input(false);
|
|
1904
|
-
this.inputClass = input('');
|
|
1901
|
+
this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
|
|
1902
|
+
this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
|
|
1903
|
+
this.withoutCreateButton = input(false, ...(ngDevMode ? [{ debugName: "withoutCreateButton" }] : []));
|
|
1904
|
+
this.inputClass = input('', ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
|
|
1905
1905
|
this.create = output();
|
|
1906
1906
|
}
|
|
1907
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1908
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1907
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TheadFiltersRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1908
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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: `
|
|
1909
1909
|
@if (grid().isMultiSelectVisible()) {
|
|
1910
1910
|
<th></th>
|
|
1911
1911
|
}
|
|
@@ -1923,7 +1923,7 @@ class TheadFiltersRowComponent {
|
|
|
1923
1923
|
}
|
|
1924
1924
|
`, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1925
1925
|
}
|
|
1926
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1926
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TheadFiltersRowComponent, decorators: [{
|
|
1927
1927
|
type: Component,
|
|
1928
1928
|
args: [{
|
|
1929
1929
|
selector: '[ng2-st-thead-filters-row]',
|
|
@@ -1951,19 +1951,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1951
1951
|
|
|
1952
1952
|
class ActionsTitleComponent {
|
|
1953
1953
|
constructor() {
|
|
1954
|
-
this.grid = input.required();
|
|
1954
|
+
this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
|
|
1955
1955
|
this.actionsColumnTitle = computed(() => {
|
|
1956
1956
|
const actions = this.grid().settings().actions;
|
|
1957
1957
|
if (!actions) {
|
|
1958
1958
|
return 'Actions';
|
|
1959
1959
|
}
|
|
1960
1960
|
return actions.columnTitle || 'Actions';
|
|
1961
|
-
});
|
|
1961
|
+
}, ...(ngDevMode ? [{ debugName: "actionsColumnTitle" }] : []));
|
|
1962
1962
|
}
|
|
1963
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1964
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1963
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ActionsTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1964
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: ActionsTitleComponent, isStandalone: true, selector: "[ng2-st-actions-title]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ng2-smart-actions" }, ngImport: i0, template: ` <div class="ng2-smart-title">{{ actionsColumnTitle() }}</div> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1965
1965
|
}
|
|
1966
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1966
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: ActionsTitleComponent, decorators: [{
|
|
1967
1967
|
type: Component,
|
|
1968
1968
|
args: [{
|
|
1969
1969
|
selector: '[ng2-st-actions-title]',
|
|
@@ -1977,12 +1977,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1977
1977
|
|
|
1978
1978
|
class CheckboxSelectAllComponent {
|
|
1979
1979
|
constructor() {
|
|
1980
|
-
this.grid = input.required();
|
|
1980
|
+
this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
|
|
1981
1981
|
}
|
|
1982
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1983
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1982
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckboxSelectAllComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1983
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", type: CheckboxSelectAllComponent, isStandalone: true, selector: "[ng2-st-checkbox-select-all]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ` <input type="checkbox" [ngModel]="this.grid().dataSet.isAllSelected()" /> `, isInline: true, 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 }); }
|
|
1984
1984
|
}
|
|
1985
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1985
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: CheckboxSelectAllComponent, decorators: [{
|
|
1986
1986
|
type: Component,
|
|
1987
1987
|
args: [{
|
|
1988
1988
|
selector: '[ng2-st-checkbox-select-all]',
|
|
@@ -1994,13 +1994,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1994
1994
|
|
|
1995
1995
|
class TheadTitlesRowComponent {
|
|
1996
1996
|
constructor() {
|
|
1997
|
-
this.grid = input.required();
|
|
1998
|
-
this.source = input.required();
|
|
1997
|
+
this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
|
|
1998
|
+
this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
|
|
1999
1999
|
this.sortEmit = output();
|
|
2000
2000
|
this.selectAllRows = output();
|
|
2001
2001
|
}
|
|
2002
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2003
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2002
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TheadTitlesRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2003
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: TheadTitlesRowComponent, isStandalone: true, selector: "[ng2-st-thead-titles-row]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { sortEmit: "sortEmit", selectAllRows: "selectAllRows" }, ngImport: i0, template: `
|
|
2004
2004
|
@if (grid().isMultiSelectVisible()) {
|
|
2005
2005
|
<th ng2-st-checkbox-select-all [grid]="grid()" (click)="selectAllRows.emit()"></th>
|
|
2006
2006
|
}
|
|
@@ -2020,7 +2020,7 @@ class TheadTitlesRowComponent {
|
|
|
2020
2020
|
}
|
|
2021
2021
|
`, isInline: true, dependencies: [{ kind: "component", type: CheckboxSelectAllComponent, selector: "[ng2-st-checkbox-select-all]", inputs: ["grid"] }, { kind: "component", type: ActionsTitleComponent, selector: "[ng2-st-actions-title]", inputs: ["grid"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["currentSort", "column"], outputs: ["sortEmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2022
2022
|
}
|
|
2023
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2023
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TheadTitlesRowComponent, decorators: [{
|
|
2024
2024
|
type: Component,
|
|
2025
2025
|
args: [{
|
|
2026
2026
|
selector: '[ng2-st-thead-titles-row]',
|
|
@@ -2050,33 +2050,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2050
2050
|
|
|
2051
2051
|
class Ng2SmartTableTheadComponent {
|
|
2052
2052
|
constructor() {
|
|
2053
|
-
this.grid = input.required();
|
|
2054
|
-
this.source = input.required();
|
|
2055
|
-
this.isMobileView = input(false);
|
|
2053
|
+
this.grid = input.required(...(ngDevMode ? [{ debugName: "grid" }] : []));
|
|
2054
|
+
this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
|
|
2055
|
+
this.isMobileView = input(false, ...(ngDevMode ? [{ debugName: "isMobileView" }] : []));
|
|
2056
2056
|
this.selectAllRows = output();
|
|
2057
2057
|
this.create = output();
|
|
2058
2058
|
this.isHideHeader = computed(() => {
|
|
2059
2059
|
return this.grid().settings()?.hideHeader || false;
|
|
2060
|
-
});
|
|
2060
|
+
}, ...(ngDevMode ? [{ debugName: "isHideHeader" }] : []));
|
|
2061
2061
|
this.isHideSubHeader = computed(() => {
|
|
2062
2062
|
return this.grid().settings()?.hideSubHeader || false;
|
|
2063
|
-
});
|
|
2063
|
+
}, ...(ngDevMode ? [{ debugName: "isHideSubHeader" }] : []));
|
|
2064
2064
|
this.columnsWithSort = computed(() => this.grid()
|
|
2065
2065
|
.dataSet.getColumns()
|
|
2066
|
-
.filter((column) => column.isSortable));
|
|
2067
|
-
this.columnsWithSortLength = computed(() => this.columnsWithSort().length);
|
|
2066
|
+
.filter((column) => column.isSortable), ...(ngDevMode ? [{ debugName: "columnsWithSort" }] : []));
|
|
2067
|
+
this.columnsWithSortLength = computed(() => this.columnsWithSort().length, ...(ngDevMode ? [{ debugName: "columnsWithSortLength" }] : []));
|
|
2068
2068
|
this.columnsWithFiltersLength = computed(() => this.grid()
|
|
2069
2069
|
.dataSet.getColumns()
|
|
2070
|
-
.filter((column) => column.isFilterable).length);
|
|
2071
|
-
this.currentSortConfig = computed(() => this.source().getSort());
|
|
2072
|
-
this.filterDropdownIsOpen = signal(false);
|
|
2070
|
+
.filter((column) => column.isFilterable).length, ...(ngDevMode ? [{ debugName: "columnsWithFiltersLength" }] : []));
|
|
2071
|
+
this.currentSortConfig = computed(() => this.source().getSort(), ...(ngDevMode ? [{ debugName: "currentSortConfig" }] : []));
|
|
2072
|
+
this.filterDropdownIsOpen = signal(false, ...(ngDevMode ? [{ debugName: "filterDropdownIsOpen" }] : []));
|
|
2073
2073
|
this.filterInputClass = computed(() => {
|
|
2074
2074
|
const filterOptions = this.grid().settings()?.filter;
|
|
2075
2075
|
if (!filterOptions) {
|
|
2076
2076
|
return '';
|
|
2077
2077
|
}
|
|
2078
2078
|
return filterOptions.inputClass || '';
|
|
2079
|
-
});
|
|
2079
|
+
}, ...(ngDevMode ? [{ debugName: "filterInputClass" }] : []));
|
|
2080
2080
|
this.lastColumnSort = null;
|
|
2081
2081
|
}
|
|
2082
2082
|
toggleDropdown(state) {
|
|
@@ -2130,10 +2130,10 @@ class Ng2SmartTableTheadComponent {
|
|
|
2130
2130
|
this.lastColumnSort.count++;
|
|
2131
2131
|
return newSort;
|
|
2132
2132
|
}
|
|
2133
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2134
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2133
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Ng2SmartTableTheadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2134
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: Ng2SmartTableTheadComponent, isStandalone: true, selector: "[ng2-st-thead]", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, isMobileView: { classPropertyName: "isMobileView", publicName: "isMobileView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectAllRows: "selectAllRows", create: "create" }, ngImport: i0, template: "@if (isMobileView()) {\n <tr class=\"ng2-smart-titles mobile-header mobile-header-top-row\">\n <th colspan=\"50\">\n <div class=\"mobile-header-content\">\n <div ng2-st-add-button [grid]=\"grid()\" (create)=\"create.emit($event)\"></div>\n @if (columnsWithSortLength()) {\n <div class=\"current-column-title\">\n @if (currentSortConfig(); as sortConfig) {\n <a href=\"#\" (click)=\"$event.preventDefault(); sortByColumn()\" class=\"ng2-smart-sort-link sort\">\n {{ sortConfig.title }}\n <span class=\"sort-direction\">{{ sortConfig.direction === 'asc' ? '\u2191' : '\u2193' }}</span>\n </a>\n }\n\n @if (columnsWithSortLength() > 1) {\n <button\n #sortTrigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n class=\"sort-dropdown-toggle-button\"\n (click)=\"toggleDropdown()\"\n [class.active]=\"filterDropdownIsOpen()\"\n aria-label=\"Toggle sort options\">\n <span class=\"sort-icon\">\u25BC</span>\n </button>\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"sortTrigger\"\n [cdkConnectedOverlayOpen]=\"filterDropdownIsOpen()\"\n [cdkConnectedOverlayWidth]=\"300\"\n [cdkConnectedOverlayPositions]=\"[\n {\n originX: 'center',\n originY: 'bottom',\n overlayX: 'center',\n overlayY: 'top',\n },\n ]\"\n (overlayOutsideClick)=\"toggleDropdown(false)\">\n <div class=\"dropdown\">\n <div class=\"dropdown-header\">\n <p></p>\n <button\n type=\"button\"\n class=\"close-dialog-button\"\n (click)=\"toggleDropdown(false)\"\n aria-label=\"Close filters\">\n <span></span>\n </button>\n </div>\n <div class=\"dropdown-content\">\n @for (column of columnsWithSort(); track $index) {\n <th class=\"titles\">\n <ng2-st-column-title\n class=\"sort-option\"\n [column]=\"column\"\n (sortEmit)=\"sortByColumn(column)\"\n [currentSort]=\"currentSortConfig()\"></ng2-st-column-title>\n </th>\n }\n </div>\n </div>\n </ng-template>\n }\n </div>\n }\n\n <div class=\"header-actions\">\n @if (columnsWithFiltersLength()) {\n <ng2-mobile-filters [grid]=\"grid()\" [source]=\"source()\" [filterInputClass]=\"filterInputClass()\">\n </ng2-mobile-filters>\n }\n </div>\n </div>\n </th>\n </tr>\n} @else {\n <!-- Desktop view header -->\n @if (!isHideHeader()) {\n <tr\n ng2-st-thead-titles-row\n class=\"ng2-smart-titles\"\n [grid]=\"grid()\"\n [source]=\"source()\"\n (sortEmit)=\"sortByColumn($event)\"\n (selectAllRows)=\"selectAllRows.emit()\"></tr>\n }\n\n @if (!isHideSubHeader()) {\n <ng-container [ngTemplateOutlet]=\"filtersRow\"></ng-container>\n }\n}\n\n<ng-template #filtersRow>\n <tr\n ng2-st-thead-filters-row\n class=\"ng2-smart-filters\"\n [grid]=\"grid()\"\n [inputClass]=\"filterInputClass()\"\n [withoutCreateButton]=\"isMobileView()\"\n [source]=\"source()\"\n (create)=\"create.emit()\"></tr>\n</ng-template>\n", styles: ["tr.mobile-header-top-row .mobile-header-content{display:flex;align-items:center;justify-content:space-between}tr.mobile-header-top-row .mobile-header-content .current-column-title{font-weight:700;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button{transition:transform .2s ease}tr.mobile-header-top-row .mobile-header-content button.sort-dropdown-toggle-button.active{transform:rotate(180deg)}.dropdown{z-index:1;padding:.8rem 1rem;border:none;border-radius:.5rem;background:var(--smart-table-bg, #fff);box-shadow:var(--table-card-shadow, 0 0 8px 5px color-mix(in oklab, var(--smart-table-bg, #d7d7d7) 30%, transparent 50%));max-height:var(--table-header-dropdown-max-height, 60dvh);width:var(--table-header-dropdown-width, 80dvw);max-width:30rem;overflow:auto}.dropdown-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.dropdown-content{display:flex;flex-direction:column}.dropdown-content ::ng-deep tr{display:flex;flex-direction:column;gap:.3rem}.dropdown-content ::ng-deep th.titles a{display:block;width:100%;padding:.3rem;color:inherit;border-bottom:1px solid var(--smart-table-separator, #d5d5d5)}.close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}.close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}.close-dialog-button:after,.close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}.close-dialog-button:before{rotate:45deg}.close-dialog-button:after{position:absolute;rotate:-45deg}\n"], dependencies: [{ kind: "component", type: TheadTitlesRowComponent, selector: "[ng2-st-thead-titles-row]", inputs: ["grid", "source"], outputs: ["sortEmit", "selectAllRows"] }, { kind: "component", type: AddButtonComponent, selector: "[ng2-st-add-button]", inputs: ["grid"], outputs: ["create"] }, { kind: "component", type: MobileFiltersComponent, selector: "ng2-mobile-filters", inputs: ["grid", "source", "filterInputClass"] }, { kind: "component", type: ColumnTitleComponent, selector: "ng2-st-column-title", inputs: ["currentSort", "column"], outputs: ["sortEmit"] }, { kind: "component", type: TheadFiltersRowComponent, selector: "[ng2-st-thead-filters-row]", inputs: ["grid", "source", "withoutCreateButton", "inputClass"], outputs: ["create"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2135
2135
|
}
|
|
2136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Ng2SmartTableTheadComponent, decorators: [{
|
|
2137
2137
|
type: Component,
|
|
2138
2138
|
args: [{ selector: '[ng2-st-thead]', imports: [
|
|
2139
2139
|
TheadTitlesRowComponent,
|
|
@@ -2150,16 +2150,16 @@ class DataSet {
|
|
|
2150
2150
|
constructor(dataList = [], columnSettings, editorInputClass) {
|
|
2151
2151
|
this.columnSettings = columnSettings;
|
|
2152
2152
|
this.editorInputClass = editorInputClass;
|
|
2153
|
-
this.data = signal([]);
|
|
2154
|
-
this.columns = signal([]);
|
|
2155
|
-
this.rows = signal([]);
|
|
2153
|
+
this.data = signal([], ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
2154
|
+
this.columns = signal([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
|
|
2155
|
+
this.rows = signal([], ...(ngDevMode ? [{ debugName: "rows" }] : []));
|
|
2156
2156
|
this.selectedRowsData = [];
|
|
2157
|
-
this.getColumns = computed(() => this.columns());
|
|
2158
|
-
this.getVisibleColumns = computed(() => this.columns().filter((column) => !column.hide));
|
|
2157
|
+
this.getColumns = computed(() => this.columns(), ...(ngDevMode ? [{ debugName: "getColumns" }] : []));
|
|
2158
|
+
this.getVisibleColumns = computed(() => this.columns().filter((column) => !column.hide), ...(ngDevMode ? [{ debugName: "getVisibleColumns" }] : []));
|
|
2159
2159
|
this.getRows = computed(() => {
|
|
2160
2160
|
return this.rows();
|
|
2161
|
-
});
|
|
2162
|
-
this.isAllSelected = computed(() => this.rows().every((row) => row.isSelected()));
|
|
2161
|
+
}, ...(ngDevMode ? [{ debugName: "getRows" }] : []));
|
|
2162
|
+
this.isAllSelected = computed(() => this.rows().every((row) => row.isSelected()), ...(ngDevMode ? [{ debugName: "isAllSelected" }] : []));
|
|
2163
2163
|
this.createColumns(columnSettings);
|
|
2164
2164
|
this.setData(dataList);
|
|
2165
2165
|
this.createNewRow();
|
|
@@ -2249,29 +2249,29 @@ class DataSet {
|
|
|
2249
2249
|
class Grid {
|
|
2250
2250
|
constructor(source, settings) {
|
|
2251
2251
|
this.currentColumnsSortState = [];
|
|
2252
|
-
this.settings = signal({});
|
|
2253
|
-
this.createFormShown = signal(false);
|
|
2252
|
+
this.settings = signal({}, ...(ngDevMode ? [{ debugName: "settings" }] : []));
|
|
2253
|
+
this.createFormShown = signal(false, ...(ngDevMode ? [{ debugName: "createFormShown" }] : []));
|
|
2254
2254
|
this.isMultiSelectVisible = computed(() => {
|
|
2255
2255
|
return this.settings().selectMode === 'multi';
|
|
2256
|
-
});
|
|
2256
|
+
}, ...(ngDevMode ? [{ debugName: "isMultiSelectVisible" }] : []));
|
|
2257
2257
|
this.isActionsVisible = computed(() => {
|
|
2258
2258
|
const actions = this.settings().actions;
|
|
2259
2259
|
if (!actions)
|
|
2260
2260
|
return false;
|
|
2261
2261
|
return actions.edit || actions.delete || !!actions?.custom?.length;
|
|
2262
|
-
});
|
|
2262
|
+
}, ...(ngDevMode ? [{ debugName: "isActionsVisible" }] : []));
|
|
2263
2263
|
this.actionIsOnLeft = computed(() => {
|
|
2264
2264
|
return (this.settings().actionsPosition || 'left') === 'left';
|
|
2265
|
-
});
|
|
2265
|
+
}, ...(ngDevMode ? [{ debugName: "actionIsOnLeft" }] : []));
|
|
2266
2266
|
this.actionIsOnRight = computed(() => {
|
|
2267
2267
|
return this.settings().actionsPosition === 'right';
|
|
2268
|
-
});
|
|
2268
|
+
}, ...(ngDevMode ? [{ debugName: "actionIsOnRight" }] : []));
|
|
2269
2269
|
this.columnSortDragDelay = computed(() => {
|
|
2270
2270
|
return this.settings().columnSort?.dragDelay || 0;
|
|
2271
|
-
});
|
|
2271
|
+
}, ...(ngDevMode ? [{ debugName: "columnSortDragDelay" }] : []));
|
|
2272
2272
|
this.columnStateStorageKey = computed(() => {
|
|
2273
2273
|
return this.settings().columnSort?.stateStorageKey;
|
|
2274
|
-
});
|
|
2274
|
+
}, ...(ngDevMode ? [{ debugName: "columnStateStorageKey" }] : []));
|
|
2275
2275
|
this.setSource(source, settings);
|
|
2276
2276
|
this.setSettings(settings);
|
|
2277
2277
|
}
|
|
@@ -2530,12 +2530,12 @@ class Grid {
|
|
|
2530
2530
|
}
|
|
2531
2531
|
|
|
2532
2532
|
class Ng2SmartTableComponent {
|
|
2533
|
-
constructor(
|
|
2534
|
-
this.elementRef =
|
|
2535
|
-
this.ngZone =
|
|
2536
|
-
this.injector =
|
|
2537
|
-
this.source = input.required();
|
|
2538
|
-
this.settings = input.required();
|
|
2533
|
+
constructor() {
|
|
2534
|
+
this.elementRef = inject(ElementRef);
|
|
2535
|
+
this.ngZone = inject(NgZone);
|
|
2536
|
+
this.injector = inject(Injector);
|
|
2537
|
+
this.source = input.required(...(ngDevMode ? [{ debugName: "source" }] : []));
|
|
2538
|
+
this.settings = input.required(...(ngDevMode ? [{ debugName: "settings" }] : []));
|
|
2539
2539
|
/**
|
|
2540
2540
|
* @description If you want to display pagination in your custom container, you can pass it to "paginationSlot".
|
|
2541
2541
|
* @example
|
|
@@ -2549,7 +2549,7 @@ class Ng2SmartTableComponent {
|
|
|
2549
2549
|
* read: ViewContainerRef,
|
|
2550
2550
|
* });
|
|
2551
2551
|
*/
|
|
2552
|
-
this.paginationSlot = input();
|
|
2552
|
+
this.paginationSlot = input(...(ngDevMode ? [undefined, { debugName: "paginationSlot" }] : []));
|
|
2553
2553
|
/**
|
|
2554
2554
|
* @description if you want to render custom data inside a container with pagination you can pass a TemplateRef
|
|
2555
2555
|
* @example
|
|
@@ -2570,7 +2570,7 @@ class Ng2SmartTableComponent {
|
|
|
2570
2570
|
* </ng-container>
|
|
2571
2571
|
* </ng2-smart-table>
|
|
2572
2572
|
*/
|
|
2573
|
-
this.paginationTemplateData = input();
|
|
2573
|
+
this.paginationTemplateData = input(...(ngDevMode ? [undefined, { debugName: "paginationTemplateData" }] : []));
|
|
2574
2574
|
this.multiRowSelect = output();
|
|
2575
2575
|
this.rowClicked = output();
|
|
2576
2576
|
this.columnsSorted = output();
|
|
@@ -2584,25 +2584,25 @@ class Ng2SmartTableComponent {
|
|
|
2584
2584
|
this.custom = output();
|
|
2585
2585
|
this.tableClass = computed(() => {
|
|
2586
2586
|
return this.settings().attr?.class || '';
|
|
2587
|
-
});
|
|
2587
|
+
}, ...(ngDevMode ? [{ debugName: "tableClass" }] : []));
|
|
2588
2588
|
this.tableId = computed(() => {
|
|
2589
2589
|
return this.settings().attr?.id || getRandomId();
|
|
2590
|
-
});
|
|
2590
|
+
}, ...(ngDevMode ? [{ debugName: "tableId" }] : []));
|
|
2591
2591
|
this.isPagerDisplay = computed(() => {
|
|
2592
2592
|
const { pager } = this.settings();
|
|
2593
2593
|
return pager ? pager.display : false;
|
|
2594
|
-
});
|
|
2594
|
+
}, ...(ngDevMode ? [{ debugName: "isPagerDisplay" }] : []));
|
|
2595
2595
|
this.rowClassFunction = computed(() => {
|
|
2596
2596
|
const settings = this.settings();
|
|
2597
2597
|
return settings.rowClassFunction ? (rowData) => settings.rowClassFunction(rowData) : () => '';
|
|
2598
|
-
});
|
|
2599
|
-
this.isMobileView = signal(false);
|
|
2598
|
+
}, ...(ngDevMode ? [{ debugName: "rowClassFunction" }] : []));
|
|
2599
|
+
this.isMobileView = signal(false, ...(ngDevMode ? [{ debugName: "isMobileView" }] : []));
|
|
2600
2600
|
this.tableWidthMobileBreakpoint = computed(() => {
|
|
2601
2601
|
return this.settings().tableWidthMobileBreakpoint;
|
|
2602
|
-
});
|
|
2602
|
+
}, ...(ngDevMode ? [{ debugName: "tableWidthMobileBreakpoint" }] : []));
|
|
2603
2603
|
this.isExternalMode = computed(() => {
|
|
2604
2604
|
return this.grid.settings().mode === 'external';
|
|
2605
|
-
});
|
|
2605
|
+
}, ...(ngDevMode ? [{ debugName: "isExternalMode" }] : []));
|
|
2606
2606
|
this.resizeObserver = null;
|
|
2607
2607
|
this.resizeDebounceTimer = null;
|
|
2608
2608
|
this.paginationComponentRef = null;
|
|
@@ -2748,13 +2748,13 @@ class Ng2SmartTableComponent {
|
|
|
2748
2748
|
this.resizeDebounceTimer = null;
|
|
2749
2749
|
}
|
|
2750
2750
|
}
|
|
2751
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2752
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2751
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Ng2SmartTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2752
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: Ng2SmartTableComponent, isStandalone: true, selector: "ng2-smart-table", inputs: { source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: true, transformFunction: null }, paginationSlot: { classPropertyName: "paginationSlot", publicName: "paginationSlot", isSignal: true, isRequired: false, transformFunction: null }, paginationTemplateData: { classPropertyName: "paginationTemplateData", publicName: "paginationTemplateData", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { multiRowSelect: "multiRowSelect", rowClicked: "rowClicked", columnsSorted: "columnsSorted", deleteEmitter: "deleteEmitter", deleteConfirm: "deleteConfirm", edit: "edit", editConfirm: "editConfirm", editCancel: "editCancel", create: "create", createConfirm: "createConfirm", custom: "custom" }, usesOnChanges: true, ngImport: i0, template: "<table [id]=\"tableId()\" [class]=\"tableClass()\" [class.mobile-view]=\"isMobileView()\">\n <thead\n ng2-st-thead\n [grid]=\"grid\"\n [source]=\"source()\"\n [isMobileView]=\"isMobileView()\"\n (create)=\"createEmitted()\"\n (selectAllRows)=\"onSelectAllRows()\"></thead>\n\n <tbody\n ng2-st-tbody\n [grid]=\"grid\"\n [source]=\"source()\"\n [rowClassFunction]=\"rowClassFunction()\"\n [isMobileView]=\"isMobileView()\"\n (deleteEmitter)=\"deleEmitted($event)\"\n (edit)=\"editEmitted($event)\"\n (editConfirmed)=\"editConfirmed($event)\"\n (editCancel)=\"editCanceled($event)\"\n (createConfirmed)=\"createConfirmed()\"\n (customActionEmitter)=\"customActionEmitted($event)\"\n (userClickedRow)=\"emitUserRowClicked($event)\"\n (multipleSelectRow)=\"multipleSelectRow($event)\"></tbody>\n</table>\n\n@if (isPagerDisplay() && !paginationSlot()) {\n <ng2-smart-table-pager [source]=\"source()\" [content]=\"paginationTemplateData()\">\n <ng-content select=\"[pager-content]\"></ng-content>\n </ng2-smart-table-pager>\n}\n", styles: [":host{max-width:100%;display:block}:host table{width:100%}:host .close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}:host .close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}:host .close-dialog-button:after,:host .close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}:host .close-dialog-button:before{rotate:45deg}:host .close-dialog-button:after{position:absolute;rotate:-45deg}\n"], dependencies: [{ kind: "component", type: Ng2SmartTableTheadComponent, selector: "[ng2-st-thead]", inputs: ["grid", "source", "isMobileView"], outputs: ["selectAllRows", "create"] }, { kind: "component", type: Ng2SmartTableTbodyComponent, selector: "[ng2-st-tbody]", inputs: ["grid", "source", "rowClassFunction", "isMobileView"], outputs: ["edit", "editConfirmed", "editCancel", "createConfirmed", "deleteEmitter", "customActionEmitter", "userClickedRow", "multipleSelectRow"] }, { kind: "component", type: PagerComponent, selector: "ng2-smart-table-pager", inputs: ["source", "content"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2753
2753
|
}
|
|
2754
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2754
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Ng2SmartTableComponent, decorators: [{
|
|
2755
2755
|
type: Component,
|
|
2756
2756
|
args: [{ selector: 'ng2-smart-table', imports: [Ng2SmartTableTheadComponent, Ng2SmartTableTbodyComponent, PagerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<table [id]=\"tableId()\" [class]=\"tableClass()\" [class.mobile-view]=\"isMobileView()\">\n <thead\n ng2-st-thead\n [grid]=\"grid\"\n [source]=\"source()\"\n [isMobileView]=\"isMobileView()\"\n (create)=\"createEmitted()\"\n (selectAllRows)=\"onSelectAllRows()\"></thead>\n\n <tbody\n ng2-st-tbody\n [grid]=\"grid\"\n [source]=\"source()\"\n [rowClassFunction]=\"rowClassFunction()\"\n [isMobileView]=\"isMobileView()\"\n (deleteEmitter)=\"deleEmitted($event)\"\n (edit)=\"editEmitted($event)\"\n (editConfirmed)=\"editConfirmed($event)\"\n (editCancel)=\"editCanceled($event)\"\n (createConfirmed)=\"createConfirmed()\"\n (customActionEmitter)=\"customActionEmitted($event)\"\n (userClickedRow)=\"emitUserRowClicked($event)\"\n (multipleSelectRow)=\"multipleSelectRow($event)\"></tbody>\n</table>\n\n@if (isPagerDisplay() && !paginationSlot()) {\n <ng2-smart-table-pager [source]=\"source()\" [content]=\"paginationTemplateData()\">\n <ng-content select=\"[pager-content]\"></ng-content>\n </ng2-smart-table-pager>\n}\n", styles: [":host{max-width:100%;display:block}:host table{width:100%}:host .close-dialog-button{display:flex;align-items:center;justify-content:center;border:none;background:none;width:2rem;height:2rem;padding:.5rem;border-radius:50%}:host .close-dialog-button:hover{box-shadow:0 0 5px 4px #dadada91}:host .close-dialog-button:after,:host .close-dialog-button:before{content:\"\";display:block;background-color:var(--smart-table-fg, #000);height:2px;width:1rem;border-radius:2px}:host .close-dialog-button:before{rotate:45deg}:host .close-dialog-button:after{position:absolute;rotate:-45deg}\n"] }]
|
|
2757
|
-
}]
|
|
2757
|
+
}] });
|
|
2758
2758
|
|
|
2759
2759
|
/**
|
|
2760
2760
|
* Generated bundle index. Do not edit.
|