@ng-nest/ui 20.2.0 → 20.2.2
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/core/index.d.ts +2 -25
- package/dialog/index.d.ts +19 -1
- package/fesm2022/ng-nest-ui-core.mjs +1 -201
- package/fesm2022/ng-nest-ui-core.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-dialog.mjs +58 -10
- package/fesm2022/ng-nest-ui-dialog.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-message-box.mjs +24 -11
- package/fesm2022/ng-nest-ui-message-box.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-message.mjs +4 -4
- package/fesm2022/ng-nest-ui-message.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-notification.mjs +4 -4
- package/fesm2022/ng-nest-ui-notification.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-table.mjs +32 -10
- package/fesm2022/ng-nest-ui-table.mjs.map +1 -1
- package/fesm2022/ng-nest-ui-tag.mjs +10 -4
- package/fesm2022/ng-nest-ui-tag.mjs.map +1 -1
- package/message/index.d.ts +1 -3
- package/message-box/index.d.ts +4 -3
- package/notification/index.d.ts +1 -3
- package/package.json +37 -37
- package/table/index.d.ts +4 -1
- package/tag/index.d.ts +4 -0
|
@@ -684,7 +684,7 @@ class XTableHeadComponent extends XTableHeadProperty {
|
|
|
684
684
|
this.sort = signal([], ...(ngDevMode ? [{ debugName: "sort" }] : []));
|
|
685
685
|
this.sortStr = signal('', ...(ngDevMode ? [{ debugName: "sortStr" }] : []));
|
|
686
686
|
this.theadStyle = computed(() => {
|
|
687
|
-
let height = this.
|
|
687
|
+
let height = this.getHeaderHeight();
|
|
688
688
|
if (this.cellConfig() && this.cellConfig().cells) {
|
|
689
689
|
const spt = this.cellConfig().cells?.map((x) => {
|
|
690
690
|
const gridAreaSpt = x.gridArea?.split('/');
|
|
@@ -693,7 +693,7 @@ class XTableHeadComponent extends XTableHeadProperty {
|
|
|
693
693
|
height = ((Math.max(...spt) - 1) * height);
|
|
694
694
|
}
|
|
695
695
|
return {
|
|
696
|
-
['min-height']: `${
|
|
696
|
+
['min-height']: `${height}px`
|
|
697
697
|
};
|
|
698
698
|
}, ...(ngDevMode ? [{ debugName: "theadStyle" }] : []));
|
|
699
699
|
this.thClassMap = computed(() => ({
|
|
@@ -814,7 +814,7 @@ class XTableHeadComponent extends XTableHeadProperty {
|
|
|
814
814
|
this.table.columnDragEnded.emit(column);
|
|
815
815
|
}
|
|
816
816
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableHeadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
817
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XTableHeadComponent, isStandalone: true, selector: "x-table-head", viewQueries: [{ propertyName: "thead", first: true, predicate: ["thead"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<thead\r\n #thead\r\n [ngStyle]=\"theadStyle()\"\r\n [class.x-table-head-top]=\"position() === 'top'\"\r\n [class.x-table-head-bottom]=\"position() === 'bottom'\"\r\n>\r\n @if (cellConfig()) {\r\n <tr [style.gridTemplateColumns]=\"cellConfig()!.gridTemplateColumns\" [style.min-height.px]=\"
|
|
817
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XTableHeadComponent, isStandalone: true, selector: "x-table-head", viewQueries: [{ propertyName: "thead", first: true, predicate: ["thead"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<thead\r\n #thead\r\n [ngStyle]=\"theadStyle()\"\r\n [class.x-table-head-top]=\"position() === 'top'\"\r\n [class.x-table-head-bottom]=\"position() === 'bottom'\"\r\n>\r\n @if (cellConfig()) {\r\n <tr [style.gridTemplateColumns]=\"cellConfig()!.gridTemplateColumns\" [style.min-height.px]=\"getHeaderHeight()\">\r\n @for (column of cellConfig()!.cells; track column.id) {\r\n <th\r\n [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n [class.x-table-width-drag]=\"column.dragWidth\"\r\n [style.grid-area]=\"column.gridArea\"\r\n [style.left.px]=\"column.left\"\r\n [style.right.px]=\"column.right\"\r\n [style.min-height.px]=\"getHeaderHeight()\"\r\n [title]=\"column?.label\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n @if (column.dragWidth) {\r\n <div\r\n class=\"x-table-drag-width\"\r\n x-drag\r\n (dragMoved)=\"dragWidthMoved($event, column)\"\r\n (dragStarted)=\"dragWidthStarted($event, column)\"\r\n (dragEnded)=\"dragWidthEnded($event, column)\"\r\n ></div>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"columnsTpl\"></ng-container>\r\n }\r\n @if (table.headSearchTpl()) {\r\n <ng-container *ngTemplateOutlet=\"columnsTpl; context: { case: 'search' }\"></ng-container>\r\n }\r\n</thead>\r\n\r\n<ng-template #columnsTpl let-case=\"case\">\r\n <tr\r\n cdkDropList\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListSorted)=\"dropListSorted($event)\"\r\n (cdkDropListDropped)=\"dropListDropped($event)\"\r\n [style.height.px]=\"getHeaderHeight()\"\r\n [style.min-height.px]=\"getHeaderHeight()\"\r\n [style.padding-right.px]=\"scrollYWidth()\"\r\n [style.min-width.px]=\"scrollXWidth()\"\r\n [class.x-table-search]=\"case === 'search'\"\r\n >\r\n @for (column of initColumns(); track column.id) {\r\n <th\r\n cdkDrag\r\n [cdkDragDisabled]=\"column.draggingWidth || !column.dragColumn\"\r\n (cdkDragStarted)=\"dragStarted($event, column)\"\r\n (cdkDragEnded)=\"dragEnded(column)\"\r\n [ngClass]=\"thClassMap()\"\r\n [class.x-table-th]=\"true\"\r\n [class.x-table-sticky]=\"table.getSticky(column)\"\r\n [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n [style.min-height.px]=\"getHeaderHeight()\"\r\n [style.width.px]=\"getColumnWidth(column)\"\r\n [style.left.px]=\"column.left\"\r\n [style.right.px]=\"getColumnRight(column.right)\"\r\n [style.flex]=\"getFlex(column)\"\r\n >\r\n @switch (case) {\r\n @case ('search') {\r\n <ng-container *xOutlet=\"table.headSearchTpl()!; context: { $column: column }\"></ng-container>\r\n }\r\n @default {\r\n <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n @if (column.dragWidth) {\r\n <div\r\n class=\"x-table-drag-width\"\r\n x-drag\r\n (dragMoved)=\"dragWidthMoved($event, column)\"\r\n (dragStarted)=\"dragWidthStarted($event, column);\"\r\n (dragEnded)=\"dragWidthEnded($event, column)\"\r\n ></div>\r\n }\r\n }\r\n }\r\n </th>\r\n }\r\n </tr>\r\n</ng-template>\r\n\r\n<ng-template #columnBaseTpl let-column=\"column\">\r\n @switch (column.type) {\r\n @case ('checkbox') {\r\n @if (column.headChecked) {\r\n <x-checkbox\r\n [data]=\"[{ id: true, label: column.label }]\"\r\n [(ngModel)]=\"table.checkedValues()[column.id]\"\r\n (ngModelChange)=\"table.headChecked($event, column)\"\r\n [indeterminate]=\"table.checkedValues()[column.id + table.indeterminate()]\"\r\n single\r\n ></x-checkbox>\r\n }\r\n @if (!column.headChecked) {\r\n <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n }\r\n }\r\n @case ('index') {\r\n <a\r\n ><ng-container *xOutlet=\"columnTpl()[column.id]; context: { $column: column }\">\r\n <ng-container *xOutlet=\"table.headThTpl(); context: { $column: column }\">\r\n {{ column.label }}\r\n </ng-container>\r\n </ng-container></a\r\n >\r\n }\r\n @default {\r\n <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #cloumnDefaultTpl let-column=\"column\">\r\n <a [class.x-table-sort]=\"column.sort\" (click)=\"onSort(column)\" [style.text-align]=\"column.textAlign\">\r\n <ng-container *xOutlet=\"columnTpl()[column.id]; context: { $column: column }\">\r\n <ng-container *xOutlet=\"table.headThTpl(); context: { $column: column }\">\r\n {{ column.label }}\r\n </ng-container>\r\n </ng-container>\r\n @if (column.sort) {\r\n <x-icon\r\n type=\"fto-bar-chart\"\r\n class=\"x-table-sort-icon\"\r\n [class.x-table-icon-up]=\"sortStr() === column.id + ' desc'\"\r\n [class.x-table-icon-down]=\"sortStr() === column.id + ' asc'\"\r\n ></x-icon>\r\n }\r\n </a>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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: XDragDirective, selector: "[x-drag]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2.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: i2.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: "component", type: XCheckboxComponent, selector: "x-checkbox" }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XIconComponent, selector: "x-icon" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
818
818
|
}
|
|
819
819
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableHeadComponent, decorators: [{
|
|
820
820
|
type: Component,
|
|
@@ -828,7 +828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImpor
|
|
|
828
828
|
XCheckboxComponent,
|
|
829
829
|
XOutletDirective,
|
|
830
830
|
XIconComponent
|
|
831
|
-
], encapsulation: ViewEncapsulation.None, template: "<thead\r\n #thead\r\n [ngStyle]=\"theadStyle()\"\r\n [class.x-table-head-top]=\"position() === 'top'\"\r\n [class.x-table-head-bottom]=\"position() === 'bottom'\"\r\n>\r\n @if (cellConfig()) {\r\n <tr [style.gridTemplateColumns]=\"cellConfig()!.gridTemplateColumns\" [style.min-height.px]=\"
|
|
831
|
+
], encapsulation: ViewEncapsulation.None, template: "<thead\r\n #thead\r\n [ngStyle]=\"theadStyle()\"\r\n [class.x-table-head-top]=\"position() === 'top'\"\r\n [class.x-table-head-bottom]=\"position() === 'bottom'\"\r\n>\r\n @if (cellConfig()) {\r\n <tr [style.gridTemplateColumns]=\"cellConfig()!.gridTemplateColumns\" [style.min-height.px]=\"getHeaderHeight()\">\r\n @for (column of cellConfig()!.cells; track column.id) {\r\n <th\r\n [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n [class.x-table-width-drag]=\"column.dragWidth\"\r\n [style.grid-area]=\"column.gridArea\"\r\n [style.left.px]=\"column.left\"\r\n [style.right.px]=\"column.right\"\r\n [style.min-height.px]=\"getHeaderHeight()\"\r\n [title]=\"column?.label\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n @if (column.dragWidth) {\r\n <div\r\n class=\"x-table-drag-width\"\r\n x-drag\r\n (dragMoved)=\"dragWidthMoved($event, column)\"\r\n (dragStarted)=\"dragWidthStarted($event, column)\"\r\n (dragEnded)=\"dragWidthEnded($event, column)\"\r\n ></div>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"columnsTpl\"></ng-container>\r\n }\r\n @if (table.headSearchTpl()) {\r\n <ng-container *ngTemplateOutlet=\"columnsTpl; context: { case: 'search' }\"></ng-container>\r\n }\r\n</thead>\r\n\r\n<ng-template #columnsTpl let-case=\"case\">\r\n <tr\r\n cdkDropList\r\n cdkDropListOrientation=\"horizontal\"\r\n (cdkDropListSorted)=\"dropListSorted($event)\"\r\n (cdkDropListDropped)=\"dropListDropped($event)\"\r\n [style.height.px]=\"getHeaderHeight()\"\r\n [style.min-height.px]=\"getHeaderHeight()\"\r\n [style.padding-right.px]=\"scrollYWidth()\"\r\n [style.min-width.px]=\"scrollXWidth()\"\r\n [class.x-table-search]=\"case === 'search'\"\r\n >\r\n @for (column of initColumns(); track column.id) {\r\n <th\r\n cdkDrag\r\n [cdkDragDisabled]=\"column.draggingWidth || !column.dragColumn\"\r\n (cdkDragStarted)=\"dragStarted($event, column)\"\r\n (cdkDragEnded)=\"dragEnded(column)\"\r\n [ngClass]=\"thClassMap()\"\r\n [class.x-table-th]=\"true\"\r\n [class.x-table-sticky]=\"table.getSticky(column)\"\r\n [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n [style.min-height.px]=\"getHeaderHeight()\"\r\n [style.width.px]=\"getColumnWidth(column)\"\r\n [style.left.px]=\"column.left\"\r\n [style.right.px]=\"getColumnRight(column.right)\"\r\n [style.flex]=\"getFlex(column)\"\r\n >\r\n @switch (case) {\r\n @case ('search') {\r\n <ng-container *xOutlet=\"table.headSearchTpl()!; context: { $column: column }\"></ng-container>\r\n }\r\n @default {\r\n <ng-container *ngTemplateOutlet=\"columnBaseTpl; context: { column: column }\"></ng-container>\r\n @if (column.dragWidth) {\r\n <div\r\n class=\"x-table-drag-width\"\r\n x-drag\r\n (dragMoved)=\"dragWidthMoved($event, column)\"\r\n (dragStarted)=\"dragWidthStarted($event, column);\"\r\n (dragEnded)=\"dragWidthEnded($event, column)\"\r\n ></div>\r\n }\r\n }\r\n }\r\n </th>\r\n }\r\n </tr>\r\n</ng-template>\r\n\r\n<ng-template #columnBaseTpl let-column=\"column\">\r\n @switch (column.type) {\r\n @case ('checkbox') {\r\n @if (column.headChecked) {\r\n <x-checkbox\r\n [data]=\"[{ id: true, label: column.label }]\"\r\n [(ngModel)]=\"table.checkedValues()[column.id]\"\r\n (ngModelChange)=\"table.headChecked($event, column)\"\r\n [indeterminate]=\"table.checkedValues()[column.id + table.indeterminate()]\"\r\n single\r\n ></x-checkbox>\r\n }\r\n @if (!column.headChecked) {\r\n <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n }\r\n }\r\n @case ('index') {\r\n <a\r\n ><ng-container *xOutlet=\"columnTpl()[column.id]; context: { $column: column }\">\r\n <ng-container *xOutlet=\"table.headThTpl(); context: { $column: column }\">\r\n {{ column.label }}\r\n </ng-container>\r\n </ng-container></a\r\n >\r\n }\r\n @default {\r\n <ng-container *ngTemplateOutlet=\"cloumnDefaultTpl; context: { column: column }\"></ng-container>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #cloumnDefaultTpl let-column=\"column\">\r\n <a [class.x-table-sort]=\"column.sort\" (click)=\"onSort(column)\" [style.text-align]=\"column.textAlign\">\r\n <ng-container *xOutlet=\"columnTpl()[column.id]; context: { $column: column }\">\r\n <ng-container *xOutlet=\"table.headThTpl(); context: { $column: column }\">\r\n {{ column.label }}\r\n </ng-container>\r\n </ng-container>\r\n @if (column.sort) {\r\n <x-icon\r\n type=\"fto-bar-chart\"\r\n class=\"x-table-sort-icon\"\r\n [class.x-table-icon-up]=\"sortStr() === column.id + ' desc'\"\r\n [class.x-table-icon-down]=\"sortStr() === column.id + ' asc'\"\r\n ></x-icon>\r\n }\r\n </a>\r\n</ng-template>\r\n" }]
|
|
832
832
|
}], propDecorators: { thead: [{ type: i0.ViewChild, args: ['thead', { isSignal: true }] }] } });
|
|
833
833
|
|
|
834
834
|
class XTableFootComponent extends XTableFootProperty {
|
|
@@ -986,6 +986,7 @@ class XTableBodyComponent extends XTableBodyProperty {
|
|
|
986
986
|
this.footHeight = signal(0, ...(ngDevMode ? [{ debugName: "footHeight" }] : []));
|
|
987
987
|
this.paginationHeight = signal(0, ...(ngDevMode ? [{ debugName: "paginationHeight" }] : []));
|
|
988
988
|
this.checkboxDragging = signal(false, ...(ngDevMode ? [{ debugName: "checkboxDragging" }] : []));
|
|
989
|
+
this.expandChanged = signal(false, ...(ngDevMode ? [{ debugName: "expandChanged" }] : []));
|
|
989
990
|
this.bodyHeightSignal = computed(() => {
|
|
990
991
|
const adaptionHeight = this.adaptionHeight();
|
|
991
992
|
if (adaptionHeight && adaptionHeight > 0) {
|
|
@@ -1018,6 +1019,27 @@ class XTableBodyComponent extends XTableBodyProperty {
|
|
|
1018
1019
|
}
|
|
1019
1020
|
return this.maxBufferPx();
|
|
1020
1021
|
}, ...(ngDevMode ? [{ debugName: "maxBufferPxSignal" }] : []));
|
|
1022
|
+
this.treeData = computed(() => {
|
|
1023
|
+
if (!this.table.treeTable())
|
|
1024
|
+
return [];
|
|
1025
|
+
this.expandChanged();
|
|
1026
|
+
const treeData = [];
|
|
1027
|
+
const addItems = (data) => {
|
|
1028
|
+
for (let item of data) {
|
|
1029
|
+
treeData.push(item);
|
|
1030
|
+
if (item.children && item.children.length > 0 && item.expanded) {
|
|
1031
|
+
addItems(item.children);
|
|
1032
|
+
}
|
|
1033
|
+
}
|
|
1034
|
+
};
|
|
1035
|
+
addItems(this.data());
|
|
1036
|
+
return treeData;
|
|
1037
|
+
}, ...(ngDevMode ? [{ debugName: "treeData" }] : []));
|
|
1038
|
+
this.rows = computed(() => {
|
|
1039
|
+
if (!this.table.treeTable())
|
|
1040
|
+
return this.data();
|
|
1041
|
+
return this.treeData();
|
|
1042
|
+
}, ...(ngDevMode ? [{ debugName: "rows" }] : []));
|
|
1021
1043
|
effect(() => {
|
|
1022
1044
|
if (this.virtualBody()) {
|
|
1023
1045
|
this.virtualBody()['_scrollStrategy']['_minBufferPx'] = this.minBufferPxSignal();
|
|
@@ -1119,7 +1141,6 @@ class XTableBodyComponent extends XTableBodyProperty {
|
|
|
1119
1141
|
this.table.scrollXWidth.set(ele.offsetWidth + ele.scrollWidth - ele.clientWidth);
|
|
1120
1142
|
}
|
|
1121
1143
|
this.virtualBody().checkViewportSize();
|
|
1122
|
-
// this.table.cdr.detectChanges();
|
|
1123
1144
|
}
|
|
1124
1145
|
setStyle() {
|
|
1125
1146
|
let height = this.rowHeight() === 0 ? '' : this.rowHeight();
|
|
@@ -1165,15 +1186,16 @@ class XTableBodyComponent extends XTableBodyProperty {
|
|
|
1165
1186
|
this.activatedRow.set(row);
|
|
1166
1187
|
this.rowClick.emit(row);
|
|
1167
1188
|
}
|
|
1168
|
-
onExpanded(
|
|
1189
|
+
onExpanded(event, node) {
|
|
1169
1190
|
node.expanded = !node.expanded;
|
|
1170
|
-
|
|
1191
|
+
this.expandChanged.update((x) => !x);
|
|
1192
|
+
event?.stopPropagation();
|
|
1171
1193
|
}
|
|
1172
1194
|
trackByItem(_index, item) {
|
|
1173
1195
|
return item.id;
|
|
1174
1196
|
}
|
|
1175
1197
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1176
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XTableBodyComponent, isStandalone: true, selector: "x-table-body", viewQueries: [{ propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true, isSignal: true }, { propertyName: "virtualBody", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<tbody #tbody [class.x-table-body-checkbox-dragging]=\"checkboxDragging()\">\r\n @if (cellConfig()) {\r\n @for (row of data(); track row.id; let i = $index) {\r\n <tr [style.gridTemplateColumns]=\"cellConfig()!.gridTemplateColumns\" [attr.data-row-key]=\"row.id\">\r\n @for (column of cellConfig()!.cells; track column; let j = $index) {\r\n <td\r\n [title]=\"getTitle(row, column)\"\r\n [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n [style.left.px]=\"column.left\"\r\n [style.right.px]=\"column.right\"\r\n [style.grid-area]=\"column.gridArea\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-container>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n } @else {\r\n @if (virtualScroll()) {\r\n <cdk-virtual-scroll-viewport\r\n #virtualBody\r\n [itemSize]=\"getItemSize()\"\r\n [minBufferPx]=\"minBufferPxSignal()\"\r\n [maxBufferPx]=\"maxBufferPxSignal()\"\r\n [style.height.px]=\"bodyHeightSignal()\"\r\n >\r\n <tr\r\n *cdkVirtualFor=\"let row of
|
|
1198
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: XTableBodyComponent, isStandalone: true, selector: "x-table-body", viewQueries: [{ propertyName: "tbody", first: true, predicate: ["tbody"], descendants: true, isSignal: true }, { propertyName: "virtualBody", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<tbody #tbody [class.x-table-body-checkbox-dragging]=\"checkboxDragging()\">\r\n @if (cellConfig()) {\r\n @for (row of data(); track row.id; let i = $index) {\r\n <tr [style.gridTemplateColumns]=\"cellConfig()!.gridTemplateColumns\" [attr.data-row-key]=\"row.id\">\r\n @for (column of cellConfig()!.cells; track column; let j = $index) {\r\n <td\r\n [title]=\"getTitle(row, column)\"\r\n [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n [style.left.px]=\"column.left\"\r\n [style.right.px]=\"column.right\"\r\n [style.grid-area]=\"column.gridArea\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-container>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n } @else {\r\n @if (virtualScroll()) {\r\n <cdk-virtual-scroll-viewport\r\n #virtualBody\r\n [itemSize]=\"getItemSize()\"\r\n [minBufferPx]=\"minBufferPxSignal()\"\r\n [maxBufferPx]=\"maxBufferPxSignal()\"\r\n [style.height.px]=\"bodyHeightSignal()\"\r\n >\r\n <tr\r\n *cdkVirtualFor=\"let row of rows(); let index = index; trackBy: trackByItem\"\r\n [class.x-table-activated]=\"allowSelectRow() && activatedRow()?.id === row.id\"\r\n [style.height.px]=\"getRowHeight()\"\r\n [style.min-height.px]=\"getRowHeight()\"\r\n (click)=\"onRowClick($event, row)\"\r\n [attr.data-row-key]=\"row.id\"\r\n >\r\n <!-- rowHeight \u4E3A 0 \u7684\u65F6\u5019\uFF0Cindex \u4E0B\u6807\u83B7\u53D6\u4E0D\u5230 -->\r\n <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: getIndex(index, row) }\"></ng-container>\r\n </tr>\r\n </cdk-virtual-scroll-viewport>\r\n } @else {\r\n @for (row of rows(); track row.id; let i = $index) {\r\n <tr\r\n [class.x-table-activated]=\"allowSelectRow() && activatedRow()?.id === row.id\"\r\n [style.height.px]=\"getRowHeight()\"\r\n [style.min-height.px]=\"getRowHeight()\"\r\n (click)=\"onRowClick($event, row)\"\r\n [attr.data-row-key]=\"row.id\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: i }\"></ng-container>\r\n </tr>\r\n }\r\n }\r\n }\r\n @if (table.showEmpty() && isEmpty() && level() === 0) {\r\n <x-empty [img]=\"table.emptyImg()!\" [content]=\"table.emptyContent()!\"></x-empty>\r\n }\r\n</tbody>\r\n\r\n<ng-template #rowTpl let-row=\"row\" let-i=\"i\">\r\n <ng-container *xOutlet=\"rowDefault; context: { row: row, i: i, level: row.level }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #rowDefault let-row=\"row\" let-i=\"i\">\r\n @for (column of columns(); track column.id; let j = $index) {\r\n <td\r\n [style.width.px]=\"column.width\"\r\n [style.flex]=\"getFlex(column)\"\r\n [title]=\"getTitle(row, column)\"\r\n [class.x-table-dragging]=\"column.dragging\"\r\n [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n [style.left.px]=\"column.left\"\r\n [style.right.px]=\"column.right\"\r\n [ngClass]=\"!rowClass() ? {} : rowClass()!(row, i)\"\r\n >\r\n <ng-template *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-template>\r\n </td>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #cellTpl let-column=\"column\" let-row=\"row\" let-i=\"i\">\r\n @switch (column.type) {\r\n @case ('checkbox') {\r\n <x-checkbox\r\n xTableCheckboxDragSelect\r\n [dragRows]=\"data()\"\r\n [dragRow]=\"row\"\r\n [dragColumn]=\"column\"\r\n (dragStart)=\"checkboxDragging.set(true)\"\r\n (dragEnd)=\"checkboxDragging.set(false); table.setCheckbox($event, column)\"\r\n [dragDisabled]=\"row.disabled || column.checkboxDragDisabled || table.checkboxDragDisabled()\"\r\n [data]=\"[{ id: true, label: '' }]\"\r\n [(ngModel)]=\"row[column.id]\"\r\n [disabled]=\"row.disabled\"\r\n (ngModelChange)=\"table.bodyChecked(column, row)\"\r\n single\r\n ></x-checkbox>\r\n }\r\n @case ('index') {\r\n <div>{{ table.getIndex(i) }}</div>\r\n }\r\n @default {\r\n @if (table.isExpandColumn(column)) {\r\n <x-button\r\n [class.is-leaf]=\"!row.leaf\"\r\n [class.is-expanded]=\"row.expanded\"\r\n (click)=\"onExpanded($event, row)\"\r\n icon=\"fto-chevron-right\"\r\n size=\"mini\"\r\n onlyIcon\r\n flat\r\n plain\r\n class=\"x-table-expand\"\r\n [style.margin-left.rem]=\"row.level - 0.5\"\r\n ></x-button>\r\n }\r\n <ng-container\r\n *xOutlet=\"columnTpl()[column.id]; context: { $column: column, $row: row, $index: table.getIndex(i) }\"\r\n >\r\n <ng-container *xOutlet=\"table.bodyTdTpl(); context: { $column: column, $row: row, $index: table.getIndex(i) }\">\r\n @if ((table.bodyInnerHTML() && column.innerHTML !== false) || column.innerHTML) {\r\n <div x-inner-html [html]=\"row[column.id]\" [style]=\"{ textAlign: column.textAlign }\"></div>\r\n } @else {\r\n <div [style.text-align]=\"column.textAlign\">{{ row[column.id] }}</div>\r\n }\r\n {{ table.rowExpand() && table.rowExpand()!.id === column.id ? 'x-table-body-level-' + row.level : '' }}\r\n </ng-container>\r\n </ng-container>\r\n }\r\n }\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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: XEmptyComponent, selector: "x-empty" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { kind: "component", type: XCheckboxComponent, selector: "x-checkbox" }, { kind: "component", type: XButtonComponent, selector: "x-button" }, { kind: "component", type: XInnerHTMLComponent, selector: "[x-inner-html], x-inner-html", inputs: ["html", "style"] }, { kind: "directive", type: XTableCheckboxDragSelectDirective, selector: "[xTableCheckboxDragSelect]", inputs: ["dragRows", "dragRow", "dragColumn", "dragDisabled"], outputs: ["dragStart", "dragMove", "dragEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1177
1199
|
}
|
|
1178
1200
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: XTableBodyComponent, decorators: [{
|
|
1179
1201
|
type: Component,
|
|
@@ -1188,7 +1210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImpor
|
|
|
1188
1210
|
XButtonComponent,
|
|
1189
1211
|
XInnerHTMLComponent,
|
|
1190
1212
|
XTableCheckboxDragSelectDirective
|
|
1191
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<tbody #tbody [class.x-table-body-checkbox-dragging]=\"checkboxDragging()\">\r\n @if (cellConfig()) {\r\n @for (row of data(); track row.id; let i = $index) {\r\n <tr [style.gridTemplateColumns]=\"cellConfig()!.gridTemplateColumns\" [attr.data-row-key]=\"row.id\">\r\n @for (column of cellConfig()!.cells; track column; let j = $index) {\r\n <td\r\n [title]=\"getTitle(row, column)\"\r\n [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n [style.left.px]=\"column.left\"\r\n [style.right.px]=\"column.right\"\r\n [style.grid-area]=\"column.gridArea\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-container>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n } @else {\r\n @if (virtualScroll()) {\r\n <cdk-virtual-scroll-viewport\r\n #virtualBody\r\n [itemSize]=\"getItemSize()\"\r\n [minBufferPx]=\"minBufferPxSignal()\"\r\n [maxBufferPx]=\"maxBufferPxSignal()\"\r\n [style.height.px]=\"bodyHeightSignal()\"\r\n >\r\n <tr\r\n *cdkVirtualFor=\"let row of
|
|
1213
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<tbody #tbody [class.x-table-body-checkbox-dragging]=\"checkboxDragging()\">\r\n @if (cellConfig()) {\r\n @for (row of data(); track row.id; let i = $index) {\r\n <tr [style.gridTemplateColumns]=\"cellConfig()!.gridTemplateColumns\" [attr.data-row-key]=\"row.id\">\r\n @for (column of cellConfig()!.cells; track column; let j = $index) {\r\n <td\r\n [title]=\"getTitle(row, column)\"\r\n [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n [style.left.px]=\"column.left\"\r\n [style.right.px]=\"column.right\"\r\n [style.grid-area]=\"column.gridArea\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-container>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n } @else {\r\n @if (virtualScroll()) {\r\n <cdk-virtual-scroll-viewport\r\n #virtualBody\r\n [itemSize]=\"getItemSize()\"\r\n [minBufferPx]=\"minBufferPxSignal()\"\r\n [maxBufferPx]=\"maxBufferPxSignal()\"\r\n [style.height.px]=\"bodyHeightSignal()\"\r\n >\r\n <tr\r\n *cdkVirtualFor=\"let row of rows(); let index = index; trackBy: trackByItem\"\r\n [class.x-table-activated]=\"allowSelectRow() && activatedRow()?.id === row.id\"\r\n [style.height.px]=\"getRowHeight()\"\r\n [style.min-height.px]=\"getRowHeight()\"\r\n (click)=\"onRowClick($event, row)\"\r\n [attr.data-row-key]=\"row.id\"\r\n >\r\n <!-- rowHeight \u4E3A 0 \u7684\u65F6\u5019\uFF0Cindex \u4E0B\u6807\u83B7\u53D6\u4E0D\u5230 -->\r\n <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: getIndex(index, row) }\"></ng-container>\r\n </tr>\r\n </cdk-virtual-scroll-viewport>\r\n } @else {\r\n @for (row of rows(); track row.id; let i = $index) {\r\n <tr\r\n [class.x-table-activated]=\"allowSelectRow() && activatedRow()?.id === row.id\"\r\n [style.height.px]=\"getRowHeight()\"\r\n [style.min-height.px]=\"getRowHeight()\"\r\n (click)=\"onRowClick($event, row)\"\r\n [attr.data-row-key]=\"row.id\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"rowTpl; context: { row: row, i: i }\"></ng-container>\r\n </tr>\r\n }\r\n }\r\n }\r\n @if (table.showEmpty() && isEmpty() && level() === 0) {\r\n <x-empty [img]=\"table.emptyImg()!\" [content]=\"table.emptyContent()!\"></x-empty>\r\n }\r\n</tbody>\r\n\r\n<ng-template #rowTpl let-row=\"row\" let-i=\"i\">\r\n <ng-container *xOutlet=\"rowDefault; context: { row: row, i: i, level: row.level }\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-template #rowDefault let-row=\"row\" let-i=\"i\">\r\n @for (column of columns(); track column.id; let j = $index) {\r\n <td\r\n [style.width.px]=\"column.width\"\r\n [style.flex]=\"getFlex(column)\"\r\n [title]=\"getTitle(row, column)\"\r\n [class.x-table-dragging]=\"column.dragging\"\r\n [class.x-table-sticky]=\"table.getStickyLeft(column) || table.getStickyRight(column)\"\r\n [class.x-table-sticky-left]=\"table.getStickyLeft(column)\"\r\n [class.x-table-sticky-right]=\"table.getStickyRight(column)\"\r\n [class.x-table-sticky-left-last]=\"table.getStickyLeftLast(column)\"\r\n [class.x-table-sticky-right-first]=\"table.getStickyRightFirst(column)\"\r\n [style.left.px]=\"column.left\"\r\n [style.right.px]=\"column.right\"\r\n [ngClass]=\"!rowClass() ? {} : rowClass()!(row, i)\"\r\n >\r\n <ng-template *ngTemplateOutlet=\"cellTpl; context: { column: column, row: row, i: i }\"></ng-template>\r\n </td>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #cellTpl let-column=\"column\" let-row=\"row\" let-i=\"i\">\r\n @switch (column.type) {\r\n @case ('checkbox') {\r\n <x-checkbox\r\n xTableCheckboxDragSelect\r\n [dragRows]=\"data()\"\r\n [dragRow]=\"row\"\r\n [dragColumn]=\"column\"\r\n (dragStart)=\"checkboxDragging.set(true)\"\r\n (dragEnd)=\"checkboxDragging.set(false); table.setCheckbox($event, column)\"\r\n [dragDisabled]=\"row.disabled || column.checkboxDragDisabled || table.checkboxDragDisabled()\"\r\n [data]=\"[{ id: true, label: '' }]\"\r\n [(ngModel)]=\"row[column.id]\"\r\n [disabled]=\"row.disabled\"\r\n (ngModelChange)=\"table.bodyChecked(column, row)\"\r\n single\r\n ></x-checkbox>\r\n }\r\n @case ('index') {\r\n <div>{{ table.getIndex(i) }}</div>\r\n }\r\n @default {\r\n @if (table.isExpandColumn(column)) {\r\n <x-button\r\n [class.is-leaf]=\"!row.leaf\"\r\n [class.is-expanded]=\"row.expanded\"\r\n (click)=\"onExpanded($event, row)\"\r\n icon=\"fto-chevron-right\"\r\n size=\"mini\"\r\n onlyIcon\r\n flat\r\n plain\r\n class=\"x-table-expand\"\r\n [style.margin-left.rem]=\"row.level - 0.5\"\r\n ></x-button>\r\n }\r\n <ng-container\r\n *xOutlet=\"columnTpl()[column.id]; context: { $column: column, $row: row, $index: table.getIndex(i) }\"\r\n >\r\n <ng-container *xOutlet=\"table.bodyTdTpl(); context: { $column: column, $row: row, $index: table.getIndex(i) }\">\r\n @if ((table.bodyInnerHTML() && column.innerHTML !== false) || column.innerHTML) {\r\n <div x-inner-html [html]=\"row[column.id]\" [style]=\"{ textAlign: column.textAlign }\"></div>\r\n } @else {\r\n <div [style.text-align]=\"column.textAlign\">{{ row[column.id] }}</div>\r\n }\r\n {{ table.rowExpand() && table.rowExpand()!.id === column.id ? 'x-table-body-level-' + row.level : '' }}\r\n </ng-container>\r\n </ng-container>\r\n }\r\n }\r\n</ng-template>\r\n" }]
|
|
1192
1214
|
}], ctorParameters: () => [], propDecorators: { tbody: [{ type: i0.ViewChild, args: ['tbody', { isSignal: true }] }], virtualBody: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }] } });
|
|
1193
1215
|
|
|
1194
1216
|
class XTableComponent extends XTableProperty {
|
|
@@ -1482,7 +1504,7 @@ class XTableComponent extends XTableProperty {
|
|
|
1482
1504
|
if (XIsEmpty(nodes))
|
|
1483
1505
|
return;
|
|
1484
1506
|
nodes.forEach((x) => {
|
|
1485
|
-
x.expanded = Boolean(this.expandedAll);
|
|
1507
|
+
x.expanded = Boolean(this.expandedAll());
|
|
1486
1508
|
setChildren(x.children);
|
|
1487
1509
|
});
|
|
1488
1510
|
};
|