@worktile/gantt 19.0.0 → 19.0.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/class/item.d.ts +2 -0
- package/components/table/body/gantt-table-body.component.d.ts +11 -5
- package/components/table/gantt-table.scss +21 -1
- package/components/table/header/gantt-table-header.component.d.ts +5 -3
- package/fesm2022/worktile-gantt.mjs +91 -49
- package/fesm2022/worktile-gantt.mjs.map +1 -1
- package/gantt-dom.service.d.ts +1 -1
- package/gantt.component.d.ts +2 -1
- package/gantt.component.scss +8 -0
- package/package.json +1 -1
- package/table/gantt-table.component.d.ts +6 -2
|
@@ -278,6 +278,7 @@ class GanttItemInternal {
|
|
|
278
278
|
});
|
|
279
279
|
this.color = this.origin.color;
|
|
280
280
|
this.barStyle = this.origin.barStyle;
|
|
281
|
+
this.laneStyle = this.origin.laneStyle;
|
|
281
282
|
this.linkable = this.origin.linkable === undefined ? true : this.origin.linkable;
|
|
282
283
|
this.draggable = this.origin.draggable === undefined ? true : this.origin.draggable;
|
|
283
284
|
this.itemDraggable = this.origin.itemDraggable;
|
|
@@ -2043,7 +2044,7 @@ function createSvgElement(qualifiedName, className) {
|
|
|
2043
2044
|
}
|
|
2044
2045
|
class GanttBarDrag {
|
|
2045
2046
|
get dragDisabled() {
|
|
2046
|
-
return !this.item()
|
|
2047
|
+
return !this.item()?.draggable || !this.ganttUpper.draggable;
|
|
2047
2048
|
}
|
|
2048
2049
|
get linkDragDisabled() {
|
|
2049
2050
|
return !this.item().linkable || !this.ganttUpper.linkable;
|
|
@@ -3563,7 +3564,7 @@ class GanttMainComponent {
|
|
|
3563
3564
|
this.ganttRoot.scrollToDate(date);
|
|
3564
3565
|
}
|
|
3565
3566
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttMainComponent, deps: [{ token: GANTT_UPPER_TOKEN }, { token: GanttDomService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3566
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GanttMainComponent, isStandalone: true, selector: "gantt-main", inputs: { viewportItems: "viewportItems", flatItems: "flatItems", groupHeaderTemplate: "groupHeaderTemplate", itemTemplate: "itemTemplate", barTemplate: "barTemplate", rangeTemplate: "rangeTemplate", baselineTemplate: "baselineTemplate", ganttRoot: "ganttRoot", quickTimeFocus: "quickTimeFocus" }, outputs: { barClick: "barClick", lineClick: "lineClick" }, host: { properties: { "class.gantt-main-container": "this.ganttMainClass" } }, ngImport: i0, template: "<gantt-links-overlay [flatItems]=\"flatItems\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<div class=\"gantt-main-groups\" [style.width.px]=\"ganttUpper.view.width\">\n @for (data of viewportItems; track trackBy($index, data)) {\n @if (data | isGanttGroup) {\n <div class=\"gantt-group\" [style.height.px]=\"ganttUpper.styles.lineHeight\" [ngClass]=\"data.class\">\n <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: data }\"></ng-template>\n </div>\n }\n @if (!(data | isGanttGroup)) {\n <div\n class=\"gantt-item\"\n [style.height.px]=\"ganttUpper.styles.lineHeight\"\n [class.gantt-main-item-active]=\"ganttUpper.isSelected(data.id)\"\n >\n @if (data.type | isGanttCustomItem) {\n <ng-template\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{\n item: data.origin,\n refs: data.refs,\n baseline: ganttUpper.baselineItemsMap[data.id]?.origin,\n baselineRefs: ganttUpper.baselineItemsMap[data.id]?.refs\n }\"\n >\n </ng-template>\n }\n @if ((data.type | isGanttRangeItem) || (data.type | isGanttBarItem)) {\n @if (data.type | isGanttRangeItem) {\n <gantt-range [template]=\"rangeTemplate\" [item]=\"data\"></gantt-range>\n }\n @if (data.type | isGanttBarItem) {\n <gantt-bar [item]=\"data\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n }\n @if (ganttUpper.baselineItemsMap[data.id]) {\n <gantt-baseline [baselineItem]=\"ganttUpper.baselineItemsMap[data.id]\" [template]=\"baselineTemplate\"></gantt-baseline>\n }\n }\n </div>\n }\n }\n</div>\n\n@if (quickTimeFocus) {\n <div class=\"gantt-quick-time-focus-container\" [style.width.px]=\"ganttUpper.view.width\">\n <div class=\"gantt-quick-time-focus\" [style.width.px]=\"dom.visibleRangeX().max - dom.visibleRangeX().min\">\n @for (data of viewportItems; track trackBy(i, data); let i = $index) {\n @let item = toItemType(data);\n <div class=\"gantt-quick-time-focus-item\" [style.height.px]=\"ganttUpper.styles.lineHeight\">\n <span class=\"ml-2\">\n @if (item.refs
|
|
3567
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GanttMainComponent, isStandalone: true, selector: "gantt-main", inputs: { viewportItems: "viewportItems", flatItems: "flatItems", groupHeaderTemplate: "groupHeaderTemplate", itemTemplate: "itemTemplate", barTemplate: "barTemplate", rangeTemplate: "rangeTemplate", baselineTemplate: "baselineTemplate", ganttRoot: "ganttRoot", quickTimeFocus: "quickTimeFocus" }, outputs: { barClick: "barClick", lineClick: "lineClick" }, host: { properties: { "class.gantt-main-container": "this.ganttMainClass" } }, ngImport: i0, template: "<gantt-links-overlay [flatItems]=\"flatItems\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<div class=\"gantt-main-groups\" [style.width.px]=\"ganttUpper.view.width\">\n @for (data of viewportItems; track trackBy($index, data)) {\n @if (data | isGanttGroup) {\n <div class=\"gantt-group\" [style.height.px]=\"ganttUpper.styles.lineHeight\" [ngClass]=\"data.class\">\n <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: data }\"></ng-template>\n </div>\n }\n @if (!(data | isGanttGroup)) {\n <div\n class=\"gantt-item\"\n [style.height.px]=\"ganttUpper.styles.lineHeight\"\n [style]=\"data.laneStyle\"\n [class.gantt-main-item-active]=\"ganttUpper.isSelected(data.id)\"\n >\n @if (data.type | isGanttCustomItem) {\n <ng-template\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{\n item: data.origin,\n refs: data.refs,\n baseline: ganttUpper.baselineItemsMap[data.id]?.origin,\n baselineRefs: ganttUpper.baselineItemsMap[data.id]?.refs\n }\"\n >\n </ng-template>\n }\n @if ((data.type | isGanttRangeItem) || (data.type | isGanttBarItem)) {\n @if (data.type | isGanttRangeItem) {\n <gantt-range [template]=\"rangeTemplate\" [item]=\"data\"></gantt-range>\n }\n @if (data.type | isGanttBarItem) {\n <gantt-bar [item]=\"data\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n }\n @if (ganttUpper.baselineItemsMap[data.id]) {\n <gantt-baseline [baselineItem]=\"ganttUpper.baselineItemsMap[data.id]\" [template]=\"baselineTemplate\"></gantt-baseline>\n }\n }\n </div>\n }\n }\n</div>\n\n@if (quickTimeFocus) {\n <div class=\"gantt-quick-time-focus-container\" [style.width.px]=\"ganttUpper.view.width\">\n <div class=\"gantt-quick-time-focus\" [style.width.px]=\"dom.visibleRangeX().max - dom.visibleRangeX().min\">\n @for (data of viewportItems; track trackBy(i, data); let i = $index) {\n @let item = toItemType(data);\n <div class=\"gantt-quick-time-focus-item\" [style.height.px]=\"ganttUpper.styles.lineHeight\">\n <span class=\"ml-2\">\n @if (item.refs?.x < dom.visibleRangeX().min && item.refs?.width) {\n <a class=\"gantt-quick-time-focus-item-arrow link-secondary\" href=\"javascript:;\" (click)=\"quickTime(item.origin, 'left')\">\n <gantt-icon iconName=\"arrow-left\"></gantt-icon>\n </a>\n }\n </span>\n <span class=\"mr-2\">\n @if (item.refs?.x + item.refs?.width > dom.visibleRangeX().max && item.refs?.width) {\n <a class=\"gantt-quick-time-focus-item-arrow link-secondary\" href=\"javascript:;\" (click)=\"quickTime(item.origin, 'right')\">\n <gantt-icon iconName=\"arrow-right\"></gantt-icon>\n </a>\n }\n </span>\n </div>\n }\n </div>\n </div>\n}\n", dependencies: [{ kind: "component", type: GanttLinksComponent, selector: "gantt-links-overlay", inputs: ["flatItems"], outputs: ["lineClick"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgxGanttRangeComponent, selector: "ngx-gantt-range,gantt-range" }, { kind: "component", type: NgxGanttBarComponent, selector: "ngx-gantt-bar,gantt-bar", outputs: ["barClick"] }, { kind: "component", type: NgxGanttBaselineComponent, selector: "ngx-gantt-baseline,gantt-baseline", inputs: ["baselineItem", "template"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }, { kind: "pipe", type: IsGanttBarItemPipe, name: "isGanttBarItem" }, { kind: "pipe", type: IsGanttCustomItemPipe, name: "isGanttCustomItem" }, { kind: "pipe", type: IsGanttGroupPipe, name: "isGanttGroup" }, { kind: "component", type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }] }); }
|
|
3567
3568
|
}
|
|
3568
3569
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttMainComponent, decorators: [{
|
|
3569
3570
|
type: Component,
|
|
@@ -3579,7 +3580,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
|
|
|
3579
3580
|
IsGanttCustomItemPipe,
|
|
3580
3581
|
IsGanttGroupPipe,
|
|
3581
3582
|
GanttIconComponent
|
|
3582
|
-
], template: "<gantt-links-overlay [flatItems]=\"flatItems\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<div class=\"gantt-main-groups\" [style.width.px]=\"ganttUpper.view.width\">\n @for (data of viewportItems; track trackBy($index, data)) {\n @if (data | isGanttGroup) {\n <div class=\"gantt-group\" [style.height.px]=\"ganttUpper.styles.lineHeight\" [ngClass]=\"data.class\">\n <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: data }\"></ng-template>\n </div>\n }\n @if (!(data | isGanttGroup)) {\n <div\n class=\"gantt-item\"\n [style.height.px]=\"ganttUpper.styles.lineHeight\"\n [class.gantt-main-item-active]=\"ganttUpper.isSelected(data.id)\"\n >\n @if (data.type | isGanttCustomItem) {\n <ng-template\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{\n item: data.origin,\n refs: data.refs,\n baseline: ganttUpper.baselineItemsMap[data.id]?.origin,\n baselineRefs: ganttUpper.baselineItemsMap[data.id]?.refs\n }\"\n >\n </ng-template>\n }\n @if ((data.type | isGanttRangeItem) || (data.type | isGanttBarItem)) {\n @if (data.type | isGanttRangeItem) {\n <gantt-range [template]=\"rangeTemplate\" [item]=\"data\"></gantt-range>\n }\n @if (data.type | isGanttBarItem) {\n <gantt-bar [item]=\"data\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n }\n @if (ganttUpper.baselineItemsMap[data.id]) {\n <gantt-baseline [baselineItem]=\"ganttUpper.baselineItemsMap[data.id]\" [template]=\"baselineTemplate\"></gantt-baseline>\n }\n }\n </div>\n }\n }\n</div>\n\n@if (quickTimeFocus) {\n <div class=\"gantt-quick-time-focus-container\" [style.width.px]=\"ganttUpper.view.width\">\n <div class=\"gantt-quick-time-focus\" [style.width.px]=\"dom.visibleRangeX().max - dom.visibleRangeX().min\">\n @for (data of viewportItems; track trackBy(i, data); let i = $index) {\n @let item = toItemType(data);\n <div class=\"gantt-quick-time-focus-item\" [style.height.px]=\"ganttUpper.styles.lineHeight\">\n <span class=\"ml-2\">\n @if (item.refs
|
|
3583
|
+
], template: "<gantt-links-overlay [flatItems]=\"flatItems\" (lineClick)=\"lineClick.emit($event)\"></gantt-links-overlay>\n<div class=\"gantt-main-groups\" [style.width.px]=\"ganttUpper.view.width\">\n @for (data of viewportItems; track trackBy($index, data)) {\n @if (data | isGanttGroup) {\n <div class=\"gantt-group\" [style.height.px]=\"ganttUpper.styles.lineHeight\" [ngClass]=\"data.class\">\n <ng-template [ngTemplateOutlet]=\"groupHeaderTemplate\" [ngTemplateOutletContext]=\"{ group: data }\"></ng-template>\n </div>\n }\n @if (!(data | isGanttGroup)) {\n <div\n class=\"gantt-item\"\n [style.height.px]=\"ganttUpper.styles.lineHeight\"\n [style]=\"data.laneStyle\"\n [class.gantt-main-item-active]=\"ganttUpper.isSelected(data.id)\"\n >\n @if (data.type | isGanttCustomItem) {\n <ng-template\n [ngTemplateOutlet]=\"itemTemplate\"\n [ngTemplateOutletContext]=\"{\n item: data.origin,\n refs: data.refs,\n baseline: ganttUpper.baselineItemsMap[data.id]?.origin,\n baselineRefs: ganttUpper.baselineItemsMap[data.id]?.refs\n }\"\n >\n </ng-template>\n }\n @if ((data.type | isGanttRangeItem) || (data.type | isGanttBarItem)) {\n @if (data.type | isGanttRangeItem) {\n <gantt-range [template]=\"rangeTemplate\" [item]=\"data\"></gantt-range>\n }\n @if (data.type | isGanttBarItem) {\n <gantt-bar [item]=\"data\" [template]=\"barTemplate\" (barClick)=\"barClick.emit($event)\"></gantt-bar>\n }\n @if (ganttUpper.baselineItemsMap[data.id]) {\n <gantt-baseline [baselineItem]=\"ganttUpper.baselineItemsMap[data.id]\" [template]=\"baselineTemplate\"></gantt-baseline>\n }\n }\n </div>\n }\n }\n</div>\n\n@if (quickTimeFocus) {\n <div class=\"gantt-quick-time-focus-container\" [style.width.px]=\"ganttUpper.view.width\">\n <div class=\"gantt-quick-time-focus\" [style.width.px]=\"dom.visibleRangeX().max - dom.visibleRangeX().min\">\n @for (data of viewportItems; track trackBy(i, data); let i = $index) {\n @let item = toItemType(data);\n <div class=\"gantt-quick-time-focus-item\" [style.height.px]=\"ganttUpper.styles.lineHeight\">\n <span class=\"ml-2\">\n @if (item.refs?.x < dom.visibleRangeX().min && item.refs?.width) {\n <a class=\"gantt-quick-time-focus-item-arrow link-secondary\" href=\"javascript:;\" (click)=\"quickTime(item.origin, 'left')\">\n <gantt-icon iconName=\"arrow-left\"></gantt-icon>\n </a>\n }\n </span>\n <span class=\"mr-2\">\n @if (item.refs?.x + item.refs?.width > dom.visibleRangeX().max && item.refs?.width) {\n <a class=\"gantt-quick-time-focus-item-arrow link-secondary\" href=\"javascript:;\" (click)=\"quickTime(item.origin, 'right')\">\n <gantt-icon iconName=\"arrow-right\"></gantt-icon>\n </a>\n }\n </span>\n </div>\n }\n </div>\n </div>\n}\n" }]
|
|
3583
3584
|
}], ctorParameters: () => [{ type: GanttUpper, decorators: [{
|
|
3584
3585
|
type: Inject,
|
|
3585
3586
|
args: [GANTT_UPPER_TOKEN]
|
|
@@ -3647,8 +3648,9 @@ class GanttTableHeaderComponent {
|
|
|
3647
3648
|
ngOnInit() {
|
|
3648
3649
|
this.columnsChange();
|
|
3649
3650
|
this.columns.changes.pipe(takeUntil$1(this.unsubscribe$)).subscribe(() => {
|
|
3650
|
-
this.
|
|
3651
|
-
|
|
3651
|
+
if (!this.gantt?.table?.width && !this.customWidth) {
|
|
3652
|
+
this.columnsChange();
|
|
3653
|
+
}
|
|
3652
3654
|
});
|
|
3653
3655
|
}
|
|
3654
3656
|
columnsChange() {
|
|
@@ -3659,7 +3661,8 @@ class GanttTableHeaderComponent {
|
|
|
3659
3661
|
}
|
|
3660
3662
|
tableWidth += Number(column.columnWidth.replace('px', ''));
|
|
3661
3663
|
});
|
|
3662
|
-
this.tableWidth = tableWidth;
|
|
3664
|
+
this.tableWidth = this.gantt?.table?.width ?? this.customWidth ?? this.getCalcWidth(tableWidth);
|
|
3665
|
+
this.gantt.cdr.detectChanges();
|
|
3663
3666
|
}
|
|
3664
3667
|
dragFixed(config) {
|
|
3665
3668
|
if (config.movedWidth < config.minWidth) {
|
|
@@ -3708,7 +3711,7 @@ class GanttTableHeaderComponent {
|
|
|
3708
3711
|
if (this.gantt.table) {
|
|
3709
3712
|
this.gantt.table.columnChanges.emit({ columns: this.columns });
|
|
3710
3713
|
}
|
|
3711
|
-
this.tableWidth = this.tableWidth - beforeWidth + columnWidth;
|
|
3714
|
+
this.tableWidth = this.gantt?.table?.width ?? this.customWidth ?? this.getCalcWidth(this.tableWidth - beforeWidth + columnWidth);
|
|
3712
3715
|
this.hideAuxiliaryLine();
|
|
3713
3716
|
event.source.reset();
|
|
3714
3717
|
}
|
|
@@ -3717,17 +3720,10 @@ class GanttTableHeaderComponent {
|
|
|
3717
3720
|
const left = target.getBoundingClientRect().left;
|
|
3718
3721
|
const tableWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
|
|
3719
3722
|
const dragWidth = left - this.dragStartLeft;
|
|
3720
|
-
|
|
3721
|
-
this.
|
|
3722
|
-
const lastColumnWidth = parseInt(column.columnWidth, 10);
|
|
3723
|
-
const distributeWidth = parseInt(String(dragWidth * (lastColumnWidth / tableWidth)), 10);
|
|
3724
|
-
const columnWidth = Math.max(lastColumnWidth + distributeWidth || 0, minColumnWidth);
|
|
3725
|
-
column.columnWidth = coerceCssPixelValue(columnWidth);
|
|
3726
|
-
tempWidth += columnWidth;
|
|
3727
|
-
});
|
|
3728
|
-
this.tableWidth = tempWidth;
|
|
3723
|
+
this.tableWidth = this.getCalcWidth(parseInt(tableWidth + dragWidth, 10));
|
|
3724
|
+
this.customWidth = this.tableWidth;
|
|
3729
3725
|
if (this.gantt.table) {
|
|
3730
|
-
this.gantt.table.
|
|
3726
|
+
this.gantt.table.resizeChange.emit(this.tableWidth);
|
|
3731
3727
|
}
|
|
3732
3728
|
this.hideAuxiliaryLine();
|
|
3733
3729
|
event.source.reset();
|
|
@@ -3742,16 +3738,19 @@ class GanttTableHeaderComponent {
|
|
|
3742
3738
|
hideAuxiliaryLine() {
|
|
3743
3739
|
this.resizeLineElementRef.nativeElement.style.display = 'none';
|
|
3744
3740
|
}
|
|
3741
|
+
getCalcWidth(width) {
|
|
3742
|
+
return this.gantt.table?.maxWidth && width > this.gantt.table?.maxWidth ? this.gantt.table?.maxWidth : width;
|
|
3743
|
+
}
|
|
3745
3744
|
ngOnDestroy() {
|
|
3746
3745
|
this.unsubscribe$.next();
|
|
3747
3746
|
this.unsubscribe$.complete();
|
|
3748
3747
|
}
|
|
3749
3748
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttTableHeaderComponent, deps: [{ token: i0.ElementRef }, { token: GANTT_ABSTRACT_TOKEN }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3750
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GanttTableHeaderComponent, isStandalone: true, selector: "gantt-table-header", inputs: { columns: "columns" }, host: { properties: { "class": "this.className", "style.height": "this.height", "style.line-height": "this.lineHeight" } }, viewQueries: [{ propertyName: "resizeLineElementRef", first: true, predicate: ["resizeLine"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"gantt-table-header-container\">\n @for (column of columns; track $index) {\n <div class=\"gantt-table-column\" [style.width]=\"column.columnWidth\">\n @if (column.headerTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"column.headerTemplateRef\"> </ng-container>\n } @else {\n {{ column.name }}\n }\n <div\n class=\"column-resize-handle\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n cdkDragBoundary=\".gantt\"\n (cdkDragMoved)=\"onResizeMoved($event, column)\"\n (cdkDragStarted)=\"onResizeStarted($event)\"\n (cdkDragEnded)=\"onResizeEnded($event, column)\"\n ></div>\n </div>\n }\n</div>\n\n<div\n class=\"table-resize-handle\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n cdkDragBoundary=\".gantt\"\n (cdkDragMoved)=\"onResizeMoved($event)\"\n (cdkDragStarted)=\"onResizeStarted($event)\"\n (cdkDragEnded)=\"onOverallResizeEnded($event)\"\n></div>\n\n<div #resizeLine class=\"table-resize-auxiliary-line\"></div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }] }); }
|
|
3749
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GanttTableHeaderComponent, isStandalone: true, selector: "gantt-table-header", inputs: { columns: "columns" }, host: { properties: { "class": "this.className", "style.height": "this.height", "style.line-height": "this.lineHeight" } }, viewQueries: [{ propertyName: "resizeLineElementRef", first: true, predicate: ["resizeLine"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"gantt-table-header-container\" [style.width.px]=\"tableWidth\" cdkScrollable>\n @for (column of columns; track $index) {\n <div class=\"gantt-table-column\" [style.width]=\"column.columnWidth\">\n @if (column.headerTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"column.headerTemplateRef\"> </ng-container>\n } @else {\n {{ column.name }}\n }\n <div\n class=\"column-resize-handle\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n cdkDragBoundary=\".gantt\"\n (cdkDragMoved)=\"onResizeMoved($event, column)\"\n (cdkDragStarted)=\"onResizeStarted($event)\"\n (cdkDragEnded)=\"onResizeEnded($event, column)\"\n ></div>\n </div>\n }\n <div class=\"gantt-table-column\"></div>\n</div>\n\n@if (gantt?.table?.settingsSlot) {\n <ng-template [ngTemplateOutlet]=\"gantt?.table?.settingsSlot\"></ng-template>\n}\n\n<div\n class=\"table-resize-handle\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n cdkDragBoundary=\".gantt\"\n (cdkDragMoved)=\"onResizeMoved($event)\"\n (cdkDragStarted)=\"onResizeStarted($event)\"\n (cdkDragEnded)=\"onOverallResizeEnded($event)\"\n></div>\n\n<div #resizeLine class=\"table-resize-auxiliary-line\"></div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }] }); }
|
|
3751
3750
|
}
|
|
3752
3751
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttTableHeaderComponent, decorators: [{
|
|
3753
3752
|
type: Component,
|
|
3754
|
-
args: [{ selector: 'gantt-table-header', imports: [NgTemplateOutlet, CdkDrag], template: "<div class=\"gantt-table-header-container\">\n @for (column of columns; track $index) {\n <div class=\"gantt-table-column\" [style.width]=\"column.columnWidth\">\n @if (column.headerTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"column.headerTemplateRef\"> </ng-container>\n } @else {\n {{ column.name }}\n }\n <div\n class=\"column-resize-handle\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n cdkDragBoundary=\".gantt\"\n (cdkDragMoved)=\"onResizeMoved($event, column)\"\n (cdkDragStarted)=\"onResizeStarted($event)\"\n (cdkDragEnded)=\"onResizeEnded($event, column)\"\n ></div>\n </div>\n }\n</div>\n\n<div\n class=\"table-resize-handle\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n cdkDragBoundary=\".gantt\"\n (cdkDragMoved)=\"onResizeMoved($event)\"\n (cdkDragStarted)=\"onResizeStarted($event)\"\n (cdkDragEnded)=\"onOverallResizeEnded($event)\"\n></div>\n\n<div #resizeLine class=\"table-resize-auxiliary-line\"></div>\n" }]
|
|
3753
|
+
args: [{ selector: 'gantt-table-header', imports: [NgTemplateOutlet, CdkDrag], template: "<div class=\"gantt-table-header-container\" [style.width.px]=\"tableWidth\" cdkScrollable>\n @for (column of columns; track $index) {\n <div class=\"gantt-table-column\" [style.width]=\"column.columnWidth\">\n @if (column.headerTemplateRef) {\n <ng-container [ngTemplateOutlet]=\"column.headerTemplateRef\"> </ng-container>\n } @else {\n {{ column.name }}\n }\n <div\n class=\"column-resize-handle\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n cdkDragBoundary=\".gantt\"\n (cdkDragMoved)=\"onResizeMoved($event, column)\"\n (cdkDragStarted)=\"onResizeStarted($event)\"\n (cdkDragEnded)=\"onResizeEnded($event, column)\"\n ></div>\n </div>\n }\n <div class=\"gantt-table-column\"></div>\n</div>\n\n@if (gantt?.table?.settingsSlot) {\n <ng-template [ngTemplateOutlet]=\"gantt?.table?.settingsSlot\"></ng-template>\n}\n\n<div\n class=\"table-resize-handle\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n cdkDragBoundary=\".gantt\"\n (cdkDragMoved)=\"onResizeMoved($event)\"\n (cdkDragStarted)=\"onResizeStarted($event)\"\n (cdkDragEnded)=\"onOverallResizeEnded($event)\"\n></div>\n\n<div #resizeLine class=\"table-resize-auxiliary-line\"></div>\n" }]
|
|
3755
3754
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
3756
3755
|
type: Inject,
|
|
3757
3756
|
args: [GANTT_ABSTRACT_TOKEN]
|
|
@@ -3783,11 +3782,12 @@ class GanttTableBodyComponent {
|
|
|
3783
3782
|
get viewportItems() {
|
|
3784
3783
|
return this._viewportItems;
|
|
3785
3784
|
}
|
|
3786
|
-
constructor(gantt, ganttUpper, cdr, document) {
|
|
3785
|
+
constructor(gantt, ganttUpper, cdr, document, ngZone) {
|
|
3787
3786
|
this.gantt = gantt;
|
|
3788
3787
|
this.ganttUpper = ganttUpper;
|
|
3789
3788
|
this.cdr = cdr;
|
|
3790
3789
|
this.document = document;
|
|
3790
|
+
this.ngZone = ngZone;
|
|
3791
3791
|
this.draggable = false;
|
|
3792
3792
|
this.dragDropped = new EventEmitter();
|
|
3793
3793
|
this.dragStarted = new EventEmitter();
|
|
@@ -3817,6 +3817,7 @@ class GanttTableBodyComponent {
|
|
|
3817
3817
|
});
|
|
3818
3818
|
}
|
|
3819
3819
|
ngAfterViewInit() {
|
|
3820
|
+
this.initialize();
|
|
3820
3821
|
this.cdkDrags.changes
|
|
3821
3822
|
.pipe(startWith$1(this.cdkDrags), takeUntil$1(this.destroy$))
|
|
3822
3823
|
.subscribe((drags) => {
|
|
@@ -3836,6 +3837,32 @@ class GanttTableBodyComponent {
|
|
|
3836
3837
|
this.onItemDragMoved(event);
|
|
3837
3838
|
});
|
|
3838
3839
|
}
|
|
3840
|
+
initialize() {
|
|
3841
|
+
this.sideContainer = this.document.getElementsByClassName('gantt-side-container')[0];
|
|
3842
|
+
this.headerContainer = this.document.getElementsByClassName('gantt-table-header-container')[0];
|
|
3843
|
+
this.footerContainer = this.document.getElementsByClassName('gantt-table-footer')[0];
|
|
3844
|
+
this.monitorScrollChange();
|
|
3845
|
+
}
|
|
3846
|
+
monitorScrollChange() {
|
|
3847
|
+
const scrollObservers = [
|
|
3848
|
+
fromEvent(this.sideContainer, 'scroll', passiveListenerOptions),
|
|
3849
|
+
fromEvent(this.headerContainer, 'scroll', passiveListenerOptions)
|
|
3850
|
+
];
|
|
3851
|
+
this.ngZone.runOutsideAngular(() => merge(...scrollObservers)
|
|
3852
|
+
.pipe(takeUntil$1(this.destroy$))
|
|
3853
|
+
.subscribe((event) => {
|
|
3854
|
+
const target = event.currentTarget;
|
|
3855
|
+
const classList = target.classList;
|
|
3856
|
+
if (classList.contains('gantt-table-header-container')) {
|
|
3857
|
+
this.sideContainer && (this.sideContainer.scrollLeft = target.scrollLeft);
|
|
3858
|
+
this.footerContainer && (this.footerContainer.scrollLeft = target.scrollLeft);
|
|
3859
|
+
}
|
|
3860
|
+
else {
|
|
3861
|
+
this.headerContainer && (this.headerContainer.scrollLeft = target.scrollLeft);
|
|
3862
|
+
this.footerContainer && (this.footerContainer.scrollLeft = target.scrollLeft);
|
|
3863
|
+
}
|
|
3864
|
+
}));
|
|
3865
|
+
}
|
|
3839
3866
|
expandGroup(group) {
|
|
3840
3867
|
this.gantt.expandGroup(group);
|
|
3841
3868
|
}
|
|
@@ -4030,12 +4057,12 @@ class GanttTableBodyComponent {
|
|
|
4030
4057
|
this.document.querySelectorAll('.drop-position-after').forEach((element) => element.classList.remove('drop-position-after'));
|
|
4031
4058
|
this.document.querySelectorAll('.drop-position-inside').forEach((element) => element.classList.remove('drop-position-inside'));
|
|
4032
4059
|
}
|
|
4033
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttTableBodyComponent, deps: [{ token: GANTT_ABSTRACT_TOKEN }, { token: GANTT_UPPER_TOKEN }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4034
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GanttTableBodyComponent, isStandalone: true, selector: "gantt-table-body", inputs: { viewportItems: "viewportItems", flatItems: "flatItems", columns: "columns", groupTemplate: "groupTemplate", emptyTemplate: "emptyTemplate", rowBeforeTemplate: "rowBeforeTemplate", rowAfterTemplate: "rowAfterTemplate", draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", dragStarted: "dragStarted", dragEnded: "dragEnded", itemClick: "itemClick" }, host: { properties: { "class.gantt-table-draggable": "this.draggable", "class.gantt-table-body": "this.ganttTableClass", "class.gantt-table-empty": "this.ganttTableEmptyClass", "class.gantt-table-dragging": "this.ganttTableDragging" } }, viewQueries: [{ propertyName: "cdkDrags", predicate: (CdkDrag), descendants: true }], ngImport: i0, template: "<div\n class=\"gantt-table-body-container\"\n cdkDropList\n [cdkDropListAutoScrollStep]=\"6\"\n [cdkDropListData]=\"viewportItems\"\n [cdkDropListSortingDisabled]=\"true\"\n (cdkDropListDropped)=\"onListDropped($event)\"\n>\n @if (!viewportItems?.length) {\n @if (!emptyTemplate) {\n <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n }\n <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n }\n\n @if (viewportItems && viewportItems.length > 0) {\n @for (item of viewportItems; track trackBy($index, item)) {\n @if (item | isGanttGroup) {\n <div class=\"gantt-table-group\" [style.height.px]=\"gantt.styles.lineHeight\" [ngClass]=\"item.class\">\n <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n @if (groupTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n ></ng-template>\n } @else {\n <span class=\"group-title\">{{ item.title }}</span>\n }\n </div>\n </div>\n }\n @if (!(item | isGanttGroup)) {\n <div\n (click)=\"itemClick.emit({ event: $event, current: item.origin, selectedValue: item.origin })\"\n cdkDrag\n [cdkDragData]=\"item\"\n [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n (cdkDragStarted)=\"onItemDragStarted($event)\"\n (cdkDragEnded)=\"onItemDragEnded($event)\"\n (cdkDragMoved)=\"emitItemDragMoved($event)\"\n class=\"gantt-table-item\"\n [class.gantt-table-item-with-group]=\"hasGroup\"\n [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n [style.height.px]=\"gantt.styles.lineHeight\"\n [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"rowBeforeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n @for (column of columns; track $index; let first = $first) {\n <div [classList]=\"column.classList\" [style.width]=\"column.columnWidth\">\n <!-- drag icon -->\n @if (first && draggable) {\n <gantt-icon\n class=\"gantt-drag-handle\"\n iconName=\"drag\"\n cdkDragHandle\n [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n ></gantt-icon>\n }\n <!-- expand icon -->\n @if (column?.showExpandIcon || (!hasExpandIcon && first)) {\n <div class=\"gantt-expand-icon\" [style.marginLeft.px]=\"item.level * 20\">\n @if (item.level < gantt.maxLevel - 1 && ((gantt.async && item.expandable) || item.children?.length > 0)) {\n @if (!item.loading) {\n <gantt-icon\n class=\"expand-icon\"\n [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n (click)=\"expandChildren($event, item)\"\n >\n </gantt-icon>\n }\n @if (item.loading) {\n <gantt-icon [iconName]=\"'loading'\"></gantt-icon>\n }\n }\n </div>\n }\n <!-- column content -->\n <div class=\"gantt-table-column-content\">\n <ng-template\n [ngTemplateOutlet]=\"column.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n </div>\n </div>\n }\n <ng-template\n [ngTemplateOutlet]=\"rowAfterTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n </div>\n }\n }\n }\n</div>\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: "component", type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }, { kind: "pipe", type: IsGanttGroupPipe, name: "isGanttGroup" }] }); }
|
|
4060
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttTableBodyComponent, deps: [{ token: GANTT_ABSTRACT_TOKEN }, { token: GANTT_UPPER_TOKEN }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4061
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.3", type: GanttTableBodyComponent, isStandalone: true, selector: "gantt-table-body", inputs: { viewportItems: "viewportItems", flatItems: "flatItems", columns: "columns", groupTemplate: "groupTemplate", emptyTemplate: "emptyTemplate", rowBeforeTemplate: "rowBeforeTemplate", rowAfterTemplate: "rowAfterTemplate", draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", dragStarted: "dragStarted", dragEnded: "dragEnded", itemClick: "itemClick" }, host: { properties: { "class.gantt-table-draggable": "this.draggable", "class.gantt-table-body": "this.ganttTableClass", "class.gantt-table-empty": "this.ganttTableEmptyClass", "class.gantt-table-dragging": "this.ganttTableDragging" } }, viewQueries: [{ propertyName: "cdkDrags", predicate: (CdkDrag), descendants: true }], ngImport: i0, template: "<div\n class=\"gantt-table-body-container\"\n cdkDropList\n [cdkDropListAutoScrollStep]=\"6\"\n [cdkDropListData]=\"viewportItems\"\n [cdkDropListSortingDisabled]=\"true\"\n (cdkDropListDropped)=\"onListDropped($event)\"\n>\n @if (!viewportItems?.length) {\n @if (!emptyTemplate) {\n <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n }\n <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n }\n\n @if (viewportItems && viewportItems.length > 0) {\n @for (item of viewportItems; track trackBy($index, item)) {\n @if (item | isGanttGroup) {\n <div class=\"gantt-table-group\" [style.height.px]=\"gantt.styles.lineHeight\" [ngClass]=\"item.class\">\n <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n @if (groupTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n ></ng-template>\n } @else {\n <span class=\"group-title\">{{ item.title }}</span>\n }\n </div>\n </div>\n }\n @if (!(item | isGanttGroup)) {\n <div\n (click)=\"itemClick.emit({ event: $event, current: item.origin, selectedValue: item.origin })\"\n cdkDrag\n [cdkDragData]=\"item\"\n [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n (cdkDragStarted)=\"onItemDragStarted($event)\"\n (cdkDragEnded)=\"onItemDragEnded($event)\"\n (cdkDragMoved)=\"emitItemDragMoved($event)\"\n class=\"gantt-table-item\"\n [class.gantt-table-item-with-group]=\"hasGroup\"\n [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n [style.height.px]=\"gantt.styles.lineHeight\"\n [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"rowBeforeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n @for (column of columns; track $index; let first = $first) {\n <div [classList]=\"column.classList\" [style.width]=\"column.columnWidth\">\n <!-- drag icon -->\n @if (first && draggable) {\n <gantt-icon\n class=\"gantt-drag-handle\"\n iconName=\"drag\"\n cdkDragHandle\n [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n ></gantt-icon>\n }\n <!-- expand icon -->\n @if (column?.showExpandIcon || (!hasExpandIcon && first)) {\n <div class=\"gantt-expand-icon\" [style.marginLeft.px]=\"item.level * 20\">\n @if (item.level < gantt.maxLevel - 1 && ((gantt.async && item.expandable) || item.children?.length > 0)) {\n @if (!item.loading) {\n <gantt-icon\n class=\"expand-icon\"\n [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n (click)=\"expandChildren($event, item)\"\n >\n </gantt-icon>\n }\n @if (item.loading) {\n <gantt-icon [iconName]=\"'loading'\"></gantt-icon>\n }\n }\n </div>\n }\n <!-- column content -->\n <div class=\"gantt-table-column-content\">\n <ng-template\n [ngTemplateOutlet]=\"column.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n </div>\n </div>\n }\n <div class=\"gantt-table-column\"></div>\n <ng-template\n [ngTemplateOutlet]=\"rowAfterTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n </div>\n }\n }\n }\n</div>\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: "component", type: GanttIconComponent, selector: "gantt-icon", inputs: ["iconName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: IsGanttRangeItemPipe, name: "isGanttRangeItem" }, { kind: "pipe", type: IsGanttGroupPipe, name: "isGanttGroup" }] }); }
|
|
4035
4062
|
}
|
|
4036
4063
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttTableBodyComponent, decorators: [{
|
|
4037
4064
|
type: Component,
|
|
4038
|
-
args: [{ selector: 'gantt-table-body', imports: [CdkDropList, GanttIconComponent, NgTemplateOutlet, NgClass, CdkDrag, CdkDragHandle, IsGanttRangeItemPipe, IsGanttGroupPipe], template: "<div\n class=\"gantt-table-body-container\"\n cdkDropList\n [cdkDropListAutoScrollStep]=\"6\"\n [cdkDropListData]=\"viewportItems\"\n [cdkDropListSortingDisabled]=\"true\"\n (cdkDropListDropped)=\"onListDropped($event)\"\n>\n @if (!viewportItems?.length) {\n @if (!emptyTemplate) {\n <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n }\n <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n }\n\n @if (viewportItems && viewportItems.length > 0) {\n @for (item of viewportItems; track trackBy($index, item)) {\n @if (item | isGanttGroup) {\n <div class=\"gantt-table-group\" [style.height.px]=\"gantt.styles.lineHeight\" [ngClass]=\"item.class\">\n <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n @if (groupTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n ></ng-template>\n } @else {\n <span class=\"group-title\">{{ item.title }}</span>\n }\n </div>\n </div>\n }\n @if (!(item | isGanttGroup)) {\n <div\n (click)=\"itemClick.emit({ event: $event, current: item.origin, selectedValue: item.origin })\"\n cdkDrag\n [cdkDragData]=\"item\"\n [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n (cdkDragStarted)=\"onItemDragStarted($event)\"\n (cdkDragEnded)=\"onItemDragEnded($event)\"\n (cdkDragMoved)=\"emitItemDragMoved($event)\"\n class=\"gantt-table-item\"\n [class.gantt-table-item-with-group]=\"hasGroup\"\n [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n [style.height.px]=\"gantt.styles.lineHeight\"\n [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"rowBeforeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n @for (column of columns; track $index; let first = $first) {\n <div [classList]=\"column.classList\" [style.width]=\"column.columnWidth\">\n <!-- drag icon -->\n @if (first && draggable) {\n <gantt-icon\n class=\"gantt-drag-handle\"\n iconName=\"drag\"\n cdkDragHandle\n [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n ></gantt-icon>\n }\n <!-- expand icon -->\n @if (column?.showExpandIcon || (!hasExpandIcon && first)) {\n <div class=\"gantt-expand-icon\" [style.marginLeft.px]=\"item.level * 20\">\n @if (item.level < gantt.maxLevel - 1 && ((gantt.async && item.expandable) || item.children?.length > 0)) {\n @if (!item.loading) {\n <gantt-icon\n class=\"expand-icon\"\n [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n (click)=\"expandChildren($event, item)\"\n >\n </gantt-icon>\n }\n @if (item.loading) {\n <gantt-icon [iconName]=\"'loading'\"></gantt-icon>\n }\n }\n </div>\n }\n <!-- column content -->\n <div class=\"gantt-table-column-content\">\n <ng-template\n [ngTemplateOutlet]=\"column.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n </div>\n </div>\n }\n <ng-template\n [ngTemplateOutlet]=\"rowAfterTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n </div>\n }\n }\n }\n</div>\n" }]
|
|
4065
|
+
args: [{ selector: 'gantt-table-body', imports: [CdkDropList, GanttIconComponent, NgTemplateOutlet, NgClass, CdkDrag, CdkDragHandle, IsGanttRangeItemPipe, IsGanttGroupPipe], template: "<div\n class=\"gantt-table-body-container\"\n cdkDropList\n [cdkDropListAutoScrollStep]=\"6\"\n [cdkDropListData]=\"viewportItems\"\n [cdkDropListSortingDisabled]=\"true\"\n (cdkDropListDropped)=\"onListDropped($event)\"\n>\n @if (!viewportItems?.length) {\n @if (!emptyTemplate) {\n <gantt-icon class=\"empty-icon\" iconName=\"empty\"></gantt-icon>\n <div class=\"empty-text\">\u6CA1\u6709\u6570\u636E</div>\n }\n <ng-template [ngTemplateOutlet]=\"emptyTemplate\"></ng-template>\n }\n\n @if (viewportItems && viewportItems.length > 0) {\n @for (item of viewportItems; track trackBy($index, item)) {\n @if (item | isGanttGroup) {\n <div class=\"gantt-table-group\" [style.height.px]=\"gantt.styles.lineHeight\" [ngClass]=\"item.class\">\n <div class=\"gantt-table-group-title\" [class.expanded]=\"item.expanded\" (click)=\"expandGroup(item)\">\n <gantt-icon class=\"expand-icon\" [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"></gantt-icon>\n @if (groupTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, group: item.origin }\"\n ></ng-template>\n } @else {\n <span class=\"group-title\">{{ item.title }}</span>\n }\n </div>\n </div>\n }\n @if (!(item | isGanttGroup)) {\n <div\n (click)=\"itemClick.emit({ event: $event, current: item.origin, selectedValue: item.origin })\"\n cdkDrag\n [cdkDragData]=\"item\"\n [cdkDragDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n (cdkDragStarted)=\"onItemDragStarted($event)\"\n (cdkDragEnded)=\"onItemDragEnded($event)\"\n (cdkDragMoved)=\"emitItemDragMoved($event)\"\n class=\"gantt-table-item\"\n [class.gantt-table-item-with-group]=\"hasGroup\"\n [class.gantt-table-item-first-level-group]=\"item.level === 0 && (item.type | isGanttRangeItem)\"\n [style.height.px]=\"gantt.styles.lineHeight\"\n [style.lineHeight.px]=\"gantt.styles.lineHeight\"\n [class.gantt-table-item-active]=\"ganttUpper.isSelected(item.id)\"\n >\n <ng-template\n [ngTemplateOutlet]=\"rowBeforeTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n @for (column of columns; track $index; let first = $first) {\n <div [classList]=\"column.classList\" [style.width]=\"column.columnWidth\">\n <!-- drag icon -->\n @if (first && draggable) {\n <gantt-icon\n class=\"gantt-drag-handle\"\n iconName=\"drag\"\n cdkDragHandle\n [cdkDragHandleDisabled]=\"(draggable && item.itemDraggable === false) || !draggable\"\n ></gantt-icon>\n }\n <!-- expand icon -->\n @if (column?.showExpandIcon || (!hasExpandIcon && first)) {\n <div class=\"gantt-expand-icon\" [style.marginLeft.px]=\"item.level * 20\">\n @if (item.level < gantt.maxLevel - 1 && ((gantt.async && item.expandable) || item.children?.length > 0)) {\n @if (!item.loading) {\n <gantt-icon\n class=\"expand-icon\"\n [iconName]=\"item.expanded ? 'angle-down' : 'angle-right'\"\n (click)=\"expandChildren($event, item)\"\n >\n </gantt-icon>\n }\n @if (item.loading) {\n <gantt-icon [iconName]=\"'loading'\"></gantt-icon>\n }\n }\n </div>\n }\n <!-- column content -->\n <div class=\"gantt-table-column-content\">\n <ng-template\n [ngTemplateOutlet]=\"column.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n </div>\n </div>\n }\n <div class=\"gantt-table-column\"></div>\n <ng-template\n [ngTemplateOutlet]=\"rowAfterTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: item.origin, item: item.origin }\"\n ></ng-template>\n </div>\n }\n }\n }\n</div>\n" }]
|
|
4039
4066
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4040
4067
|
type: Inject,
|
|
4041
4068
|
args: [GANTT_ABSTRACT_TOKEN]
|
|
@@ -4045,7 +4072,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
|
|
|
4045
4072
|
}] }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
|
|
4046
4073
|
type: Inject,
|
|
4047
4074
|
args: [DOCUMENT]
|
|
4048
|
-
}] }], propDecorators: { viewportItems: [{
|
|
4075
|
+
}] }, { type: i0.NgZone }], propDecorators: { viewportItems: [{
|
|
4049
4076
|
type: Input
|
|
4050
4077
|
}], flatItems: [{
|
|
4051
4078
|
type: Input
|
|
@@ -4119,6 +4146,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
|
|
|
4119
4146
|
args: ['style.top']
|
|
4120
4147
|
}] } });
|
|
4121
4148
|
|
|
4149
|
+
class GanttScrollbarComponent {
|
|
4150
|
+
constructor(ganttUpper) {
|
|
4151
|
+
this.ganttUpper = ganttUpper;
|
|
4152
|
+
this.hasFooter = false;
|
|
4153
|
+
}
|
|
4154
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttScrollbarComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4155
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: GanttScrollbarComponent, isStandalone: true, selector: "gantt-scrollbar", inputs: { hasFooter: "hasFooter", tableWidth: "tableWidth", ganttRoot: "ganttRoot" }, ngImport: i0, template: "<div\n class=\"gantt-scrollbar\"\n [ngClass]=\"{ 'gantt-scrollbar-bg': hasFooter }\"\n [style.height.px]=\"ganttRoot?.horizontalScrollbarHeight + 1\"\n [style.right.px]=\"ganttRoot?.verticalScrollbarWidth\"\n>\n <div class=\"gantt-table-scrollbar\" [class.with-scrollbar]=\"ganttRoot?.horizontalScrollbarHeight\" [style.width.px]=\"tableWidth\"></div>\n <div class=\"gantt-main-scrollbar\">\n <div class=\"h-100\" [style.width.px]=\"ganttRoot['view']?.width\"></div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
4156
|
+
}
|
|
4157
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttScrollbarComponent, decorators: [{
|
|
4158
|
+
type: Component,
|
|
4159
|
+
args: [{ selector: 'gantt-scrollbar', imports: [NgClass], template: "<div\n class=\"gantt-scrollbar\"\n [ngClass]=\"{ 'gantt-scrollbar-bg': hasFooter }\"\n [style.height.px]=\"ganttRoot?.horizontalScrollbarHeight + 1\"\n [style.right.px]=\"ganttRoot?.verticalScrollbarWidth\"\n>\n <div class=\"gantt-table-scrollbar\" [class.with-scrollbar]=\"ganttRoot?.horizontalScrollbarHeight\" [style.width.px]=\"tableWidth\"></div>\n <div class=\"gantt-main-scrollbar\">\n <div class=\"h-100\" [style.width.px]=\"ganttRoot['view']?.width\"></div>\n </div>\n</div>\n" }]
|
|
4160
|
+
}], ctorParameters: () => [{ type: GanttUpper, decorators: [{
|
|
4161
|
+
type: Inject,
|
|
4162
|
+
args: [GANTT_UPPER_TOKEN]
|
|
4163
|
+
}] }], propDecorators: { hasFooter: [{
|
|
4164
|
+
type: Input
|
|
4165
|
+
}], tableWidth: [{
|
|
4166
|
+
type: Input
|
|
4167
|
+
}], ganttRoot: [{
|
|
4168
|
+
type: Input
|
|
4169
|
+
}] } });
|
|
4170
|
+
|
|
4122
4171
|
class GanttPrintService {
|
|
4123
4172
|
constructor() { }
|
|
4124
4173
|
setInlineStyles(targetElem) {
|
|
@@ -4413,10 +4462,11 @@ class NgxGanttTableComponent {
|
|
|
4413
4462
|
this.dragStarted = new EventEmitter();
|
|
4414
4463
|
this.dragEnded = new EventEmitter();
|
|
4415
4464
|
this.columnChanges = new EventEmitter();
|
|
4465
|
+
this.resizeChange = new EventEmitter();
|
|
4416
4466
|
this.itemClick = new EventEmitter();
|
|
4417
4467
|
}
|
|
4418
4468
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4419
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: NgxGanttTableComponent, isStandalone: true, selector: "ngx-gantt-table", inputs: { draggable: "draggable", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", dragStarted: "dragStarted", dragEnded: "dragEnded", columnChanges: "columnChanges", itemClick: "itemClick" }, queries: [{ propertyName: "rowBeforeTemplate", first: true, predicate: ["rowBeforeSlot"], descendants: true, static: true }, { propertyName: "rowAfterTemplate", first: true, predicate: ["rowAfterSlot"], descendants: true, static: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "tableFooterTemplate", first: true, predicate: ["tableFooter"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true }); }
|
|
4469
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: NgxGanttTableComponent, isStandalone: true, selector: "ngx-gantt-table", inputs: { draggable: "draggable", maxWidth: "maxWidth", width: "width", dropEnterPredicate: "dropEnterPredicate" }, outputs: { dragDropped: "dragDropped", dragStarted: "dragStarted", dragEnded: "dragEnded", columnChanges: "columnChanges", resizeChange: "resizeChange", itemClick: "itemClick" }, queries: [{ propertyName: "rowBeforeTemplate", first: true, predicate: ["rowBeforeSlot"], descendants: true, static: true }, { propertyName: "rowAfterTemplate", first: true, predicate: ["rowAfterSlot"], descendants: true, static: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "tableFooterTemplate", first: true, predicate: ["tableFooter"], descendants: true, static: true }, { propertyName: "settingsSlot", first: true, predicate: ["settingsSlot"], descendants: true, static: true }], ngImport: i0, template: '', isInline: true }); }
|
|
4420
4470
|
}
|
|
4421
4471
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttTableComponent, decorators: [{
|
|
4422
4472
|
type: Component,
|
|
@@ -4427,6 +4477,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
|
|
|
4427
4477
|
}]
|
|
4428
4478
|
}], propDecorators: { draggable: [{
|
|
4429
4479
|
type: Input
|
|
4480
|
+
}], maxWidth: [{
|
|
4481
|
+
type: Input
|
|
4482
|
+
}], width: [{
|
|
4483
|
+
type: Input
|
|
4430
4484
|
}], dropEnterPredicate: [{
|
|
4431
4485
|
type: Input
|
|
4432
4486
|
}], dragDropped: [{
|
|
@@ -4437,6 +4491,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
|
|
|
4437
4491
|
type: Output
|
|
4438
4492
|
}], columnChanges: [{
|
|
4439
4493
|
type: Output
|
|
4494
|
+
}], resizeChange: [{
|
|
4495
|
+
type: Output
|
|
4440
4496
|
}], itemClick: [{
|
|
4441
4497
|
type: Output
|
|
4442
4498
|
}], rowBeforeTemplate: [{
|
|
@@ -4451,28 +4507,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
|
|
|
4451
4507
|
}], tableFooterTemplate: [{
|
|
4452
4508
|
type: ContentChild,
|
|
4453
4509
|
args: ['tableFooter', { static: true }]
|
|
4454
|
-
}]
|
|
4455
|
-
|
|
4456
|
-
|
|
4457
|
-
constructor(ganttUpper) {
|
|
4458
|
-
this.ganttUpper = ganttUpper;
|
|
4459
|
-
this.hasFooter = false;
|
|
4460
|
-
}
|
|
4461
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttScrollbarComponent, deps: [{ token: GANTT_UPPER_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4462
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.3", type: GanttScrollbarComponent, isStandalone: true, selector: "gantt-scrollbar", inputs: { hasFooter: "hasFooter", tableWidth: "tableWidth", ganttRoot: "ganttRoot" }, ngImport: i0, template: "<div\n class=\"gantt-scrollbar\"\n [ngClass]=\"{ 'gantt-scrollbar-bg': hasFooter }\"\n [style.height.px]=\"ganttRoot?.horizontalScrollbarHeight + 1\"\n [style.right.px]=\"ganttRoot?.verticalScrollbarWidth\"\n>\n <div class=\"gantt-table-scrollbar\" [class.with-scrollbar]=\"ganttRoot?.horizontalScrollbarHeight\" [style.width.px]=\"tableWidth\"></div>\n <div class=\"gantt-main-scrollbar\">\n <div class=\"h-100\" [style.width.px]=\"ganttRoot['view']?.width\"></div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
4463
|
-
}
|
|
4464
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: GanttScrollbarComponent, decorators: [{
|
|
4465
|
-
type: Component,
|
|
4466
|
-
args: [{ selector: 'gantt-scrollbar', imports: [NgClass], template: "<div\n class=\"gantt-scrollbar\"\n [ngClass]=\"{ 'gantt-scrollbar-bg': hasFooter }\"\n [style.height.px]=\"ganttRoot?.horizontalScrollbarHeight + 1\"\n [style.right.px]=\"ganttRoot?.verticalScrollbarWidth\"\n>\n <div class=\"gantt-table-scrollbar\" [class.with-scrollbar]=\"ganttRoot?.horizontalScrollbarHeight\" [style.width.px]=\"tableWidth\"></div>\n <div class=\"gantt-main-scrollbar\">\n <div class=\"h-100\" [style.width.px]=\"ganttRoot['view']?.width\"></div>\n </div>\n</div>\n" }]
|
|
4467
|
-
}], ctorParameters: () => [{ type: GanttUpper, decorators: [{
|
|
4468
|
-
type: Inject,
|
|
4469
|
-
args: [GANTT_UPPER_TOKEN]
|
|
4470
|
-
}] }], propDecorators: { hasFooter: [{
|
|
4471
|
-
type: Input
|
|
4472
|
-
}], tableWidth: [{
|
|
4473
|
-
type: Input
|
|
4474
|
-
}], ganttRoot: [{
|
|
4475
|
-
type: Input
|
|
4510
|
+
}], settingsSlot: [{
|
|
4511
|
+
type: ContentChild,
|
|
4512
|
+
args: ['settingsSlot', { static: true }]
|
|
4476
4513
|
}] } });
|
|
4477
4514
|
|
|
4478
4515
|
class NgxGanttComponent extends GanttUpper {
|
|
@@ -4704,6 +4741,11 @@ class NgxGanttComponent extends GanttUpper {
|
|
|
4704
4741
|
count: this.flatItems.length
|
|
4705
4742
|
});
|
|
4706
4743
|
}
|
|
4744
|
+
changeView(type) {
|
|
4745
|
+
super.changeView(type);
|
|
4746
|
+
this.viewportItems = this.flatItems.slice(this.rangeStart, this.rangeEnd);
|
|
4747
|
+
this.computeTempDataRefs();
|
|
4748
|
+
}
|
|
4707
4749
|
expandGroups(expanded) {
|
|
4708
4750
|
this.groups.forEach((group) => {
|
|
4709
4751
|
group.setExpand(expanded);
|
|
@@ -4736,7 +4778,7 @@ class NgxGanttComponent extends GanttUpper {
|
|
|
4736
4778
|
provide: GANTT_ABSTRACT_TOKEN,
|
|
4737
4779
|
useExisting: forwardRef(() => NgxGanttComponent)
|
|
4738
4780
|
}
|
|
4739
|
-
], queries: [{ propertyName: "table", first: true, predicate: NgxGanttTableComponent, descendants: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, static: true }, { propertyName: "columns", predicate: NgxGanttTableColumnComponent, descendants: true }], viewQueries: [{ propertyName: "ganttRoot", first: true, predicate: ["ganttRoot"], descendants: true }, { propertyName: "virtualScroll", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ngx-gantt-root #ganttRoot>\n <div class=\"gantt-header\">\n <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n <div class=\"gantt-container-header\">\n <gantt-calendar-header [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"></gantt-calendar-header>\n </div>\n </div>\n @if (loading) {\n <gantt-loader></gantt-loader>\n }\n\n <cdk-virtual-scroll-viewport\n class=\"gantt-virtual-scroll-viewport\"\n [ngClass]=\"{\n 'gantt-normal-viewport': !virtualScrollEnabled,\n 'gantt-scroll-container': virtualScrollEnabled,\n 'with-footer': table?.tableFooterTemplate || footerTemplate\n }\"\n [style.top.px]=\"styles.headerHeight\"\n [itemSize]=\"styles.lineHeight\"\n [minBufferPx]=\"styles.lineHeight * 10\"\n [maxBufferPx]=\"styles.lineHeight * 20\"\n (scrolledIndexChange)=\"scrolledIndexChange($event)\"\n >\n <ng-container *cdkVirtualFor=\"let item of flatItems; trackBy: trackBy\"></ng-container>\n <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\" [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\n <div class=\"gantt-side-container\">\n <div class=\"gantt-table\">\n <gantt-table-body\n [flatItems]=\"flatItems\"\n [viewportItems]=\"viewportItems\"\n [columns]=\"columns\"\n [groupTemplate]=\"groupTemplate\"\n [emptyTemplate]=\"table.tableEmptyTemplate || tableEmptyTemplate\"\n [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n [draggable]=\"table.draggable\"\n [dropEnterPredicate]=\"table.dropEnterPredicate\"\n (dragDropped)=\"table.dragDropped.emit($event)\"\n (dragStarted)=\"itemDragStarted($event)\"\n (dragEnded)=\"itemDragEnded($event)\"\n (itemClick)=\"selectItem($event)\"\n >\n </gantt-table-body>\n </div>\n </div>\n </div>\n <div class=\"gantt-container\">\n <gantt-calendar-grid\n [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"\n [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n ></gantt-calendar-grid>\n <div class=\"gantt-main\">\n <gantt-main\n [ganttRoot]=\"ganttRoot\"\n [flatItems]=\"flatItems\"\n [viewportItems]=\"viewportItems\"\n [groupHeaderTemplate]=\"groupHeaderTemplate\"\n [itemTemplate]=\"itemTemplate\"\n [barTemplate]=\"barTemplate\"\n [rangeTemplate]=\"rangeTemplate\"\n [baselineTemplate]=\"baselineTemplate\"\n [quickTimeFocus]=\"quickTimeFocus\"\n (barClick)=\"barClick.emit($event)\"\n (lineClick)=\"lineClick.emit($event)\"\n >\n </gantt-main>\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n\n <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n\n <gantt-scrollbar\n [ganttRoot]=\"ganttRoot\"\n [hasFooter]=\"!!table?.tableFooterTemplate\"\n [tableWidth]=\"tableHeader.tableWidth\"\n ></gantt-scrollbar>\n\n @if (table?.tableFooterTemplate || footerTemplate) {\n <div
|
|
4781
|
+
], queries: [{ propertyName: "table", first: true, predicate: NgxGanttTableComponent, descendants: true }, { propertyName: "tableEmptyTemplate", first: true, predicate: ["tableEmpty"], descendants: true, static: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true, static: true }, { propertyName: "columns", predicate: NgxGanttTableColumnComponent, descendants: true }], viewQueries: [{ propertyName: "ganttRoot", first: true, predicate: ["ganttRoot"], descendants: true }, { propertyName: "virtualScroll", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ngx-gantt-root #ganttRoot>\n <div class=\"gantt-header\">\n <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n <div class=\"gantt-container-header\">\n <gantt-calendar-header [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"></gantt-calendar-header>\n </div>\n </div>\n @if (loading) {\n <gantt-loader></gantt-loader>\n }\n\n <cdk-virtual-scroll-viewport\n class=\"gantt-virtual-scroll-viewport\"\n [ngClass]=\"{\n 'gantt-normal-viewport': !virtualScrollEnabled,\n 'gantt-scroll-container': virtualScrollEnabled,\n 'with-footer': table?.tableFooterTemplate || footerTemplate\n }\"\n [style.top.px]=\"styles.headerHeight\"\n [itemSize]=\"styles.lineHeight\"\n [minBufferPx]=\"styles.lineHeight * 10\"\n [maxBufferPx]=\"styles.lineHeight * 20\"\n (scrolledIndexChange)=\"scrolledIndexChange($event)\"\n >\n <ng-container *cdkVirtualFor=\"let item of flatItems; trackBy: trackBy\"></ng-container>\n <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\" [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\n <div class=\"gantt-side-container\">\n <div class=\"gantt-table\">\n <gantt-table-body\n [flatItems]=\"flatItems\"\n [viewportItems]=\"viewportItems\"\n [columns]=\"columns\"\n [groupTemplate]=\"groupTemplate\"\n [emptyTemplate]=\"table.tableEmptyTemplate || tableEmptyTemplate\"\n [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n [draggable]=\"table.draggable\"\n [dropEnterPredicate]=\"table.dropEnterPredicate\"\n (dragDropped)=\"table.dragDropped.emit($event)\"\n (dragStarted)=\"itemDragStarted($event)\"\n (dragEnded)=\"itemDragEnded($event)\"\n (itemClick)=\"selectItem($event)\"\n >\n </gantt-table-body>\n </div>\n </div>\n </div>\n <div class=\"gantt-container\">\n <gantt-calendar-grid\n [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"\n [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n ></gantt-calendar-grid>\n <div class=\"gantt-main\">\n <gantt-main\n [ganttRoot]=\"ganttRoot\"\n [flatItems]=\"flatItems\"\n [viewportItems]=\"viewportItems\"\n [groupHeaderTemplate]=\"groupHeaderTemplate\"\n [itemTemplate]=\"itemTemplate\"\n [barTemplate]=\"barTemplate\"\n [rangeTemplate]=\"rangeTemplate\"\n [baselineTemplate]=\"baselineTemplate\"\n [quickTimeFocus]=\"quickTimeFocus\"\n (barClick)=\"barClick.emit($event)\"\n (lineClick)=\"lineClick.emit($event)\"\n >\n </gantt-main>\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n\n <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n\n <gantt-scrollbar\n [ganttRoot]=\"ganttRoot\"\n [hasFooter]=\"!!table?.tableFooterTemplate\"\n [tableWidth]=\"tableHeader.tableWidth\"\n ></gantt-scrollbar>\n\n @if (table?.tableFooterTemplate || footerTemplate) {\n <div\n class=\"gantt-footer\"\n cdkScrollable\n [style.right.px]=\"ganttRoot.verticalScrollbarWidth\"\n [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n >\n @if (table?.tableFooterTemplate) {\n <div class=\"gantt-table-footer\" [style.width.px]=\"tableHeader.tableWidth + 1\">\n <ng-template [ngTemplateOutlet]=\"table?.tableFooterTemplate\" [ngTemplateOutletContext]=\"{ columns: columns }\"> </ng-template>\n </div>\n }\n @if (footerTemplate) {\n <div class=\"gantt-container-footer\">\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"> </ng-template>\n </div>\n }\n </div>\n }\n</ngx-gantt-root>\n", dependencies: [{ kind: "component", type: NgxGanttRootComponent, selector: "ngx-gantt-root", inputs: ["sideWidth"] }, { kind: "component", type: GanttTableHeaderComponent, selector: "gantt-table-header", inputs: ["columns"] }, { kind: "component", type: GanttCalendarHeaderComponent, selector: "gantt-calendar-header" }, { kind: "component", type: GanttLoaderComponent, selector: "gantt-loader" }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: GanttTableBodyComponent, selector: "gantt-table-body", inputs: ["viewportItems", "flatItems", "columns", "groupTemplate", "emptyTemplate", "rowBeforeTemplate", "rowAfterTemplate", "draggable", "dropEnterPredicate"], outputs: ["dragDropped", "dragStarted", "dragEnded", "itemClick"] }, { kind: "component", type: GanttCalendarGridComponent, selector: "gantt-calendar-grid" }, { kind: "component", type: GanttMainComponent, selector: "gantt-main", inputs: ["viewportItems", "flatItems", "groupHeaderTemplate", "itemTemplate", "barTemplate", "rangeTemplate", "baselineTemplate", "ganttRoot", "quickTimeFocus"], outputs: ["barClick", "lineClick"] }, { kind: "component", type: GanttDragBackdropComponent, selector: "gantt-drag-backdrop" }, { kind: "component", type: GanttScrollbarComponent, selector: "gantt-scrollbar", inputs: ["hasFooter", "tableWidth", "ganttRoot"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4740
4782
|
}
|
|
4741
4783
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImport: i0, type: NgxGanttComponent, decorators: [{
|
|
4742
4784
|
type: Component,
|
|
@@ -4764,7 +4806,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.3", ngImpor
|
|
|
4764
4806
|
GanttDragBackdropComponent,
|
|
4765
4807
|
GanttScrollbarComponent,
|
|
4766
4808
|
NgTemplateOutlet
|
|
4767
|
-
], template: "<ngx-gantt-root #ganttRoot>\n <div class=\"gantt-header\">\n <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n <div class=\"gantt-container-header\">\n <gantt-calendar-header [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"></gantt-calendar-header>\n </div>\n </div>\n @if (loading) {\n <gantt-loader></gantt-loader>\n }\n\n <cdk-virtual-scroll-viewport\n class=\"gantt-virtual-scroll-viewport\"\n [ngClass]=\"{\n 'gantt-normal-viewport': !virtualScrollEnabled,\n 'gantt-scroll-container': virtualScrollEnabled,\n 'with-footer': table?.tableFooterTemplate || footerTemplate\n }\"\n [style.top.px]=\"styles.headerHeight\"\n [itemSize]=\"styles.lineHeight\"\n [minBufferPx]=\"styles.lineHeight * 10\"\n [maxBufferPx]=\"styles.lineHeight * 20\"\n (scrolledIndexChange)=\"scrolledIndexChange($event)\"\n >\n <ng-container *cdkVirtualFor=\"let item of flatItems; trackBy: trackBy\"></ng-container>\n <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\" [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\n <div class=\"gantt-side-container\">\n <div class=\"gantt-table\">\n <gantt-table-body\n [flatItems]=\"flatItems\"\n [viewportItems]=\"viewportItems\"\n [columns]=\"columns\"\n [groupTemplate]=\"groupTemplate\"\n [emptyTemplate]=\"table.tableEmptyTemplate || tableEmptyTemplate\"\n [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n [draggable]=\"table.draggable\"\n [dropEnterPredicate]=\"table.dropEnterPredicate\"\n (dragDropped)=\"table.dragDropped.emit($event)\"\n (dragStarted)=\"itemDragStarted($event)\"\n (dragEnded)=\"itemDragEnded($event)\"\n (itemClick)=\"selectItem($event)\"\n >\n </gantt-table-body>\n </div>\n </div>\n </div>\n <div class=\"gantt-container\">\n <gantt-calendar-grid\n [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"\n [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n ></gantt-calendar-grid>\n <div class=\"gantt-main\">\n <gantt-main\n [ganttRoot]=\"ganttRoot\"\n [flatItems]=\"flatItems\"\n [viewportItems]=\"viewportItems\"\n [groupHeaderTemplate]=\"groupHeaderTemplate\"\n [itemTemplate]=\"itemTemplate\"\n [barTemplate]=\"barTemplate\"\n [rangeTemplate]=\"rangeTemplate\"\n [baselineTemplate]=\"baselineTemplate\"\n [quickTimeFocus]=\"quickTimeFocus\"\n (barClick)=\"barClick.emit($event)\"\n (lineClick)=\"lineClick.emit($event)\"\n >\n </gantt-main>\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n\n <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n\n <gantt-scrollbar\n [ganttRoot]=\"ganttRoot\"\n [hasFooter]=\"!!table?.tableFooterTemplate\"\n [tableWidth]=\"tableHeader.tableWidth\"\n ></gantt-scrollbar>\n\n @if (table?.tableFooterTemplate || footerTemplate) {\n <div
|
|
4809
|
+
], template: "<ngx-gantt-root #ganttRoot>\n <div class=\"gantt-header\">\n <gantt-table-header #tableHeader [columns]=\"columns\"></gantt-table-header>\n <div class=\"gantt-container-header\">\n <gantt-calendar-header [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"></gantt-calendar-header>\n </div>\n </div>\n @if (loading) {\n <gantt-loader></gantt-loader>\n }\n\n <cdk-virtual-scroll-viewport\n class=\"gantt-virtual-scroll-viewport\"\n [ngClass]=\"{\n 'gantt-normal-viewport': !virtualScrollEnabled,\n 'gantt-scroll-container': virtualScrollEnabled,\n 'with-footer': table?.tableFooterTemplate || footerTemplate\n }\"\n [style.top.px]=\"styles.headerHeight\"\n [itemSize]=\"styles.lineHeight\"\n [minBufferPx]=\"styles.lineHeight * 10\"\n [maxBufferPx]=\"styles.lineHeight * 20\"\n (scrolledIndexChange)=\"scrolledIndexChange($event)\"\n >\n <ng-container *cdkVirtualFor=\"let item of flatItems; trackBy: trackBy\"></ng-container>\n <div class=\"gantt-side\" [style.width.px]=\"tableHeader.tableWidth + 1\" [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\">\n <div class=\"gantt-side-container\">\n <div class=\"gantt-table\">\n <gantt-table-body\n [flatItems]=\"flatItems\"\n [viewportItems]=\"viewportItems\"\n [columns]=\"columns\"\n [groupTemplate]=\"groupTemplate\"\n [emptyTemplate]=\"table.tableEmptyTemplate || tableEmptyTemplate\"\n [rowBeforeTemplate]=\"table?.rowBeforeTemplate\"\n [rowAfterTemplate]=\"table?.rowAfterTemplate\"\n [draggable]=\"table.draggable\"\n [dropEnterPredicate]=\"table.dropEnterPredicate\"\n (dragDropped)=\"table.dragDropped.emit($event)\"\n (dragStarted)=\"itemDragStarted($event)\"\n (dragEnded)=\"itemDragEnded($event)\"\n (itemClick)=\"selectItem($event)\"\n >\n </gantt-table-body>\n </div>\n </div>\n </div>\n <div class=\"gantt-container\">\n <gantt-calendar-grid\n [style.padding-right.px]=\"ganttRoot.verticalScrollbarWidth\"\n [style.padding-bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n ></gantt-calendar-grid>\n <div class=\"gantt-main\">\n <gantt-main\n [ganttRoot]=\"ganttRoot\"\n [flatItems]=\"flatItems\"\n [viewportItems]=\"viewportItems\"\n [groupHeaderTemplate]=\"groupHeaderTemplate\"\n [itemTemplate]=\"itemTemplate\"\n [barTemplate]=\"barTemplate\"\n [rangeTemplate]=\"rangeTemplate\"\n [baselineTemplate]=\"baselineTemplate\"\n [quickTimeFocus]=\"quickTimeFocus\"\n (barClick)=\"barClick.emit($event)\"\n (lineClick)=\"lineClick.emit($event)\"\n >\n </gantt-main>\n </div>\n </div>\n </cdk-virtual-scroll-viewport>\n\n <gantt-drag-backdrop [style.left.px]=\"tableHeader.tableWidth + 1\"></gantt-drag-backdrop>\n\n <gantt-scrollbar\n [ganttRoot]=\"ganttRoot\"\n [hasFooter]=\"!!table?.tableFooterTemplate\"\n [tableWidth]=\"tableHeader.tableWidth\"\n ></gantt-scrollbar>\n\n @if (table?.tableFooterTemplate || footerTemplate) {\n <div\n class=\"gantt-footer\"\n cdkScrollable\n [style.right.px]=\"ganttRoot.verticalScrollbarWidth\"\n [style.bottom.px]=\"ganttRoot.horizontalScrollbarHeight\"\n >\n @if (table?.tableFooterTemplate) {\n <div class=\"gantt-table-footer\" [style.width.px]=\"tableHeader.tableWidth + 1\">\n <ng-template [ngTemplateOutlet]=\"table?.tableFooterTemplate\" [ngTemplateOutletContext]=\"{ columns: columns }\"> </ng-template>\n </div>\n }\n @if (footerTemplate) {\n <div class=\"gantt-container-footer\">\n <ng-template [ngTemplateOutlet]=\"footerTemplate\"> </ng-template>\n </div>\n }\n </div>\n }\n</ngx-gantt-root>\n" }]
|
|
4768
4810
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$1.ViewportRuler }, { type: undefined, decorators: [{
|
|
4769
4811
|
type: Inject,
|
|
4770
4812
|
args: [GANTT_GLOBAL_CONFIG]
|