@den4ik92/ng2-smart-table 19.6.46 → 19.6.48
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.
|
@@ -238,11 +238,11 @@ class TableColumnsEditorComponent {
|
|
|
238
238
|
this.stateHasChanged.set(JSON.stringify(this.grid()?.currentColumnsSortState) !== JSON.stringify(this.currentState));
|
|
239
239
|
}
|
|
240
240
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableColumnsEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
241
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableColumnsEditorComponent, isStandalone: true, selector: "ng2-table-columns-editor", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, close: { classPropertyName: "close", publicName: "close", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"sort-card\">\n <div class=\"sort-card-header\">\n <h6>Table columns setup</h6>\n </div>\n <div class=\"sort-card-body\">\n <div 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() ||
|
|
241
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableColumnsEditorComponent, isStandalone: true, selector: "ng2-table-columns-editor", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, close: { classPropertyName: "close", publicName: "close", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"sort-card\">\n <div class=\"sort-card-header\">\n <h6>Table columns setup</h6>\n </div>\n <div class=\"sort-card-body\">\n <div class=\"list\" cdkDropList [cdkDropListData]=\"currentState\" (cdkDropListDropped)=\"drop($event)\">\n @for (column of currentState; track column.key + i; let i = $index) {\n <div\n cdkDrag\n [cdkDragLockAxis]=\"'y'\"\n [cdkDragStartDelay]=\"grid()?.columnSortDragDelay() || 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"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
242
242
|
}
|
|
243
243
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableColumnsEditorComponent, decorators: [{
|
|
244
244
|
type: Component,
|
|
245
|
-
args: [{ selector: 'ng2-table-columns-editor', imports: [CdkDropList, CdkDrag, CdkDragPlaceholder], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sort-card\">\n <div class=\"sort-card-header\">\n <h6>Table columns setup</h6>\n </div>\n <div class=\"sort-card-body\">\n <div 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() ||
|
|
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 {
|
|
@@ -2267,7 +2267,7 @@ class Grid {
|
|
|
2267
2267
|
return this.settings().actionsPosition === 'right';
|
|
2268
2268
|
});
|
|
2269
2269
|
this.columnSortDragDelay = computed(() => {
|
|
2270
|
-
return this.settings().columnSort?.dragDelay ||
|
|
2270
|
+
return this.settings().columnSort?.dragDelay || 0;
|
|
2271
2271
|
});
|
|
2272
2272
|
this.columnStateStorageKey = computed(() => {
|
|
2273
2273
|
return this.settings().columnSort?.stateStorageKey;
|