@den4ik92/ng2-smart-table 19.0.5 → 19.0.6
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 +19 -15
- package/fesm2022/den4ik92-ng2-smart-table.mjs.map +1 -1
- package/lib/components/table-columns-editor/column-editor.directive.d.ts +3 -2
- package/lib/components/table-columns-editor/table-columns-editor.component.d.ts +5 -5
- package/lib/lib/grid.d.ts +4 -4
- package/lib/lib/interfaces/smart-table.models.d.ts +3 -3
- package/lib/ng2-smart-table.component.d.ts +2 -2
- package/package.json +1 -1
|
@@ -2,12 +2,12 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { output, Component, Input, input, signal, effect, computed, inject, ElementRef, Directive, ViewContainerRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
|
|
3
3
|
import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
|
|
4
4
|
import { ComponentPortal } from '@angular/cdk/portal';
|
|
5
|
-
import { moveItemInArray, CdkDropList, CdkDrag, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
|
|
6
5
|
import { Subject } from 'rxjs';
|
|
6
|
+
import { takeUntil, debounceTime, distinctUntilChanged, skip } from 'rxjs/operators';
|
|
7
|
+
import { moveItemInArray, CdkDropList, CdkDrag, CdkDragPlaceholder } from '@angular/cdk/drag-drop';
|
|
7
8
|
import * as i1 from '@angular/forms';
|
|
8
9
|
import { FormsModule, UntypedFormControl, ReactiveFormsModule, NgControl } from '@angular/forms';
|
|
9
10
|
import { NgComponentOutlet } from '@angular/common';
|
|
10
|
-
import { debounceTime, distinctUntilChanged, skip } from 'rxjs/operators';
|
|
11
11
|
|
|
12
12
|
function prepareValue(value) { return value; }
|
|
13
13
|
class Cell {
|
|
@@ -285,16 +285,16 @@ function getLocalStorage(key) {
|
|
|
285
285
|
class TableColumnsEditorComponent {
|
|
286
286
|
constructor() {
|
|
287
287
|
this.infoText = "You can drag and drop columns as you wish and also disable unnecessary ones.";
|
|
288
|
-
this.grid = input
|
|
288
|
+
this.grid = input();
|
|
289
289
|
this.close = input.required();
|
|
290
290
|
this.currentState = [];
|
|
291
291
|
this.stateHasChanged = signal(false);
|
|
292
292
|
effect(() => {
|
|
293
|
-
this.currentState = cloneArrayOfObject(this.grid()
|
|
293
|
+
this.currentState = cloneArrayOfObject(this.grid()?.currentColumnsSortState || []);
|
|
294
294
|
});
|
|
295
295
|
}
|
|
296
296
|
resetChanges() {
|
|
297
|
-
this.currentState = cloneArrayOfObject(this.grid()
|
|
297
|
+
this.currentState = cloneArrayOfObject(this.grid()?.currentColumnsSortState || []);
|
|
298
298
|
this.stateHasChanged.set(false);
|
|
299
299
|
}
|
|
300
300
|
drop(event) {
|
|
@@ -306,32 +306,35 @@ class TableColumnsEditorComponent {
|
|
|
306
306
|
this.updateChangedState();
|
|
307
307
|
}
|
|
308
308
|
setAndUpdate() {
|
|
309
|
-
this.grid()
|
|
309
|
+
this.grid()?.applyColumnsSortState(this.currentState);
|
|
310
310
|
this.close()();
|
|
311
311
|
this.stateHasChanged.set(false);
|
|
312
312
|
}
|
|
313
313
|
updateChangedState() {
|
|
314
|
-
this.stateHasChanged.set(JSON.stringify(this.grid()
|
|
314
|
+
this.stateHasChanged.set(JSON.stringify(this.grid()?.currentColumnsSortState) !== JSON.stringify(this.currentState));
|
|
315
315
|
}
|
|
316
316
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TableColumnsEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
317
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TableColumnsEditorComponent, isStandalone: true, selector: "ngx-table-columns-editor", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired:
|
|
317
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: TableColumnsEditorComponent, isStandalone: true, selector: "ngx-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\n class=\"list\"\n cdkDropList\n [cdkDropListData]=\"currentState\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n @for (column of currentState; track column.key; let i = $index) {\n\n <div\n cdkDrag\n [cdkDragLockAxis]=\"'y'\"\n [cdkDragStartDelay]=\"300\"\n [cdkDragDisabled]=\"column.moveDisabled\"\n class=\"drag-row\"\n #dragRow\n [style.--drag-row-height]=\"50\"\n >\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 />\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(--drag-row-background, #ffffff);box-shadow:0 0 6px 1px #ebebeb33}.drag-row.cdk-drag-disabled{filter:opacity(.5);cursor:not-allowed}.drag-row .index-cell{min-width:2.2rem;border-right:1px solid var(--drag-row-border-color, #ccc)}.drag-row>div{padding:.3rem}.drag-row .sort-column-checkbox-wrap{margin:0 .5rem}.cdk-drag-preview{box-sizing:border-box;border-radius:.3rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list.cdk-drop-list-dragging .drag-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-placeholder{background:var(--drag-placeholder-background, #ccc);border:dotted 3px #999;min-height:var(--drag-row-heightpx, 2.5rem);transition:transform .25s cubic-bezier(0,0,.2,1)}.overlay-card nb-card-body{padding:.25rem;max-height:100%}.sort-card{box-shadow:0 0 6px 1px #0003;min-width:18rem;padding:.25rem;max-height:80dvh;background:var(--sort-card-background, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--sort-card-header-divider-color, #edf1f7)}.sort-card .sort-card-header h6{margin:0}.sort-card .sort-card-body{padding:.5rem 0}.sort-card .sort-card-footer{border-top:1px solid var(--sort-card-header-divider-color, #edf1f7);display:flex;align-items:center;justify-content:end;gap:1rem;padding:1rem}.sort-card .sort-card-footer .update-button,.sort-card .sort-card-footer .reset-button{border-radius:.3rem;padding:.4rem 1rem;border:none;color:#fff;font-size:.875rem;font-weight:700;text-transform:uppercase}.sort-card .sort-card-footer .update-button{background-color:#36f}.sort-card .sort-card-footer .update-button:hover{background-color:#598bff}.sort-card .sort-card-footer .reset-button{background-color:#ff3d71}.sort-card .sort-card-footer .reset-button:hover{background-color:#ff708d}\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }] }); }
|
|
318
318
|
}
|
|
319
319
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: TableColumnsEditorComponent, decorators: [{
|
|
320
320
|
type: Component,
|
|
321
|
-
args: [{ selector: "ngx-table-columns-editor", imports: [CdkDropList, CdkDrag, CdkDragPlaceholder], template: "<div class=\"sort-card\">\n <div class=\"sort-card-header\">\n <
|
|
321
|
+
args: [{ selector: "ngx-table-columns-editor", imports: [CdkDropList, CdkDrag, CdkDragPlaceholder], 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\n class=\"list\"\n cdkDropList\n [cdkDropListData]=\"currentState\"\n (cdkDropListDropped)=\"drop($event)\"\n >\n @for (column of currentState; track column.key; let i = $index) {\n\n <div\n cdkDrag\n [cdkDragLockAxis]=\"'y'\"\n [cdkDragStartDelay]=\"300\"\n [cdkDragDisabled]=\"column.moveDisabled\"\n class=\"drag-row\"\n #dragRow\n [style.--drag-row-height]=\"50\"\n >\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 />\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(--drag-row-background, #ffffff);box-shadow:0 0 6px 1px #ebebeb33}.drag-row.cdk-drag-disabled{filter:opacity(.5);cursor:not-allowed}.drag-row .index-cell{min-width:2.2rem;border-right:1px solid var(--drag-row-border-color, #ccc)}.drag-row>div{padding:.3rem}.drag-row .sort-column-checkbox-wrap{margin:0 .5rem}.cdk-drag-preview{box-sizing:border-box;border-radius:.3rem;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.list.cdk-drop-list-dragging .drag-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.drag-placeholder{background:var(--drag-placeholder-background, #ccc);border:dotted 3px #999;min-height:var(--drag-row-heightpx, 2.5rem);transition:transform .25s cubic-bezier(0,0,.2,1)}.overlay-card nb-card-body{padding:.25rem;max-height:100%}.sort-card{box-shadow:0 0 6px 1px #0003;min-width:18rem;padding:.25rem;max-height:80dvh;background:var(--sort-card-background, #ffffff);border-radius:.5rem}.sort-card .sort-card-header{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid var(--sort-card-header-divider-color, #edf1f7)}.sort-card .sort-card-header h6{margin:0}.sort-card .sort-card-body{padding:.5rem 0}.sort-card .sort-card-footer{border-top:1px solid var(--sort-card-header-divider-color, #edf1f7);display:flex;align-items:center;justify-content:end;gap:1rem;padding:1rem}.sort-card .sort-card-footer .update-button,.sort-card .sort-card-footer .reset-button{border-radius:.3rem;padding:.4rem 1rem;border:none;color:#fff;font-size:.875rem;font-weight:700;text-transform:uppercase}.sort-card .sort-card-footer .update-button{background-color:#36f}.sort-card .sort-card-footer .update-button:hover{background-color:#598bff}.sort-card .sort-card-footer .reset-button{background-color:#ff3d71}.sort-card .sort-card-footer .reset-button:hover{background-color:#ff708d}\n"] }]
|
|
322
322
|
}], ctorParameters: () => [] });
|
|
323
323
|
|
|
324
324
|
class SmartTableColumnEditorDirective {
|
|
325
325
|
constructor() {
|
|
326
|
-
this.tableComponent = input
|
|
326
|
+
this.tableComponent = input();
|
|
327
327
|
this.grid = computed(() => {
|
|
328
|
-
return this.tableComponent()
|
|
328
|
+
return this.tableComponent()?.grid;
|
|
329
329
|
});
|
|
330
330
|
this.overlay = inject(Overlay);
|
|
331
331
|
this.elementRef = inject(ElementRef);
|
|
332
|
+
this.destroy$ = new Subject();
|
|
332
333
|
}
|
|
333
334
|
ngOnDestroy() {
|
|
334
335
|
this.overlayRef?.dispose();
|
|
336
|
+
this.destroy$.next();
|
|
337
|
+
this.destroy$.complete();
|
|
335
338
|
}
|
|
336
339
|
showDropdown() {
|
|
337
340
|
this.overlayRef = this.overlay.create(this.getOverlayConfig());
|
|
@@ -339,11 +342,12 @@ class SmartTableColumnEditorDirective {
|
|
|
339
342
|
const dropdownRef = this.overlayRef.attach(componentPortal);
|
|
340
343
|
dropdownRef.setInput("grid", this.grid());
|
|
341
344
|
dropdownRef.setInput("close", this.hide.bind(this));
|
|
342
|
-
this.overlayRef?.backdropClick().subscribe(() => this.hide());
|
|
345
|
+
this.overlayRef?.backdropClick().pipe(takeUntil(this.destroy$)).subscribe(() => this.hide());
|
|
343
346
|
}
|
|
344
347
|
hide() {
|
|
345
348
|
this.overlayRef?.detach();
|
|
346
349
|
this.overlayRef?.dispose();
|
|
350
|
+
this.destroy$.next();
|
|
347
351
|
}
|
|
348
352
|
buttonClick() {
|
|
349
353
|
this.showDropdown();
|
|
@@ -398,7 +402,7 @@ class SmartTableColumnEditorDirective {
|
|
|
398
402
|
});
|
|
399
403
|
}
|
|
400
404
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SmartTableColumnEditorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
401
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.3", type: SmartTableColumnEditorDirective, isStandalone: true, selector: "[smartTableColumnEditor]", inputs: { tableComponent: { classPropertyName: "tableComponent", publicName: "tableComponent", isSignal: true, isRequired:
|
|
405
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.3", type: SmartTableColumnEditorDirective, isStandalone: true, selector: "[smartTableColumnEditor]", inputs: { tableComponent: { classPropertyName: "tableComponent", publicName: "tableComponent", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "buttonClick()" } }, ngImport: i0 }); }
|
|
402
406
|
}
|
|
403
407
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SmartTableColumnEditorDirective, decorators: [{
|
|
404
408
|
type: Directive,
|
|
@@ -1517,7 +1521,7 @@ class Grid {
|
|
|
1517
1521
|
key: column.key,
|
|
1518
1522
|
title: column.title,
|
|
1519
1523
|
hide: !!column.hide,
|
|
1520
|
-
|
|
1524
|
+
moveDisabled: !!column.moveDisabled,
|
|
1521
1525
|
}));
|
|
1522
1526
|
}
|
|
1523
1527
|
getMergedColumnStates(newState, columnsState) {
|
|
@@ -1527,7 +1531,7 @@ class Grid {
|
|
|
1527
1531
|
newState.forEach((state) => {
|
|
1528
1532
|
const fined = columnsSettings.find((column) => column.title === state.title && column.key === state.key);
|
|
1529
1533
|
if (fined) {
|
|
1530
|
-
filtered.push({ ...fined, hide: fined.
|
|
1534
|
+
filtered.push({ ...fined, hide: fined.moveDisabled ? fined.hide : state.hide });
|
|
1531
1535
|
}
|
|
1532
1536
|
});
|
|
1533
1537
|
// find new columns witch not exist in storage state
|