@worktile/gantt 12.1.0-next.0 → 12.1.3

package/main.bundle.scss

@@ -46,280 +46,248 @@ $gantt-table-header-drag-line-width: 3px !default;
 $gantt-table-header-drag-line-color: #348fe4 !default;
 
 .gantt {
-  width: 100%;
-  height: 100%;
-  background-color: $gantt-bg-color;
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  color: $gantt-color;
-  opacity: 0;
-
-  svg {
-    overflow: visible !important;
-  }
-
-  .gantt-side {
-    border-right: 1px solid $gantt-border-color;
+    width: 100%;
+    height: 100%;
+    background-color: $gantt-bg-color;
     position: relative;
-    z-index: 3;
-    // overflow-x: scroll;
-    box-shadow: $gantt-side-shadow;
+    overflow: hidden;
+    display: flex;
+    color: $gantt-color;
+    opacity: 0;
 
-    .gantt-side-header {
-      box-sizing: border-box;
-      height: $gantt-header-height;
+    svg {
+        overflow: visible !important;
     }
 
-    .gantt-side-container {
-      height: 100%;
-      background-color: $gantt-bg-color;
-      overflow-y: auto;
+    .gantt-side {
+        border-right: 1px solid $gantt-border-color;
+        position: relative;
+        z-index: 3;
+        // overflow-x: scroll;
+        box-shadow: $gantt-side-shadow;
 
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-  }
+        .gantt-side-header {
+            box-sizing: border-box;
+            height: $gantt-header-height;
+        }
 
-  .gantt-container {
-    flex: 1;
-    position: relative;
-    display: flex;
-    overflow: hidden;
-    background-color: $gantt-container-background-color;
-  }
-  .gantt-main-container {
-    width: 100%;
-    height: calc(100% - #{$gantt-header-height});
-    position: absolute;
-    top: $gantt-header-height;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    overflow: auto;
-    background-color: $gantt-container-background-color;
+        .gantt-side-container {
+            height: 100%;
+            background-color: $gantt-bg-color;
+            overflow-y: auto;
 
-    .gantt-main-groups,
-    .gantt-main-items {
-      overflow: hidden;
-      min-height: 100%;
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
     }
 
-    .gantt-group {
-      height: $gantt-group-height;
-      background: $gantt-group-background-color;
-      border-bottom: 1px solid $gantt-border-color;
-      box-sizing: border-box;
+    .gantt-container {
+        flex: 1;
+        position: relative;
+        display: flex;
+        overflow: hidden;
+        background-color: $gantt-container-background-color;
     }
 
-    .gantt-item {
-      border-bottom: 1px solid $gantt-border-color;
-      box-sizing: border-box;
-      position: relative;
+    .gantt-main-container {
+        width: 100%;
+        height: calc(100% - #{$gantt-header-height});
+        flex: 1;
+        position: absolute;
+        top: $gantt-header-height;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        overflow: auto;
+        background-color: $gantt-container-background-color;
+
+        .gantt-main-groups,
+        .gantt-main-items {
+            overflow: hidden;
+            min-height: 100%;
+        }
+
+        .gantt-group {
+            height: $gantt-group-height;
+            background: $gantt-group-background-color;
+            border-bottom: 1px solid $gantt-border-color;
+            box-sizing: border-box;
+        }
+
+        .gantt-item {
+            border-bottom: 1px solid $gantt-border-color;
+            box-sizing: border-box;
+            position: relative;
+
+            &.gantt-main-item-active {
+                background-color: rgba($color: $gantt-table-header-drag-line-color, $alpha: 0.1);
+            }
+        }
+
     }
-  }
+}
 
-  .gantt-virtual-scroll-viewport {
-    position: absolute;
-    left: 0;
-    top: $gantt-header-height;
-    right: 0;
-    bottom: 0;
-    z-index: 2;
-    .cdk-virtual-scroll-content-wrapper {
-      width: 100%;
-      min-width: unset;
-      display: flex;
-      min-height: 100%;
-      .gantt-container {
-        .gantt-main-container {
-          height: 100%;
-          top: 0;
+.gantt-table {
+  display: block;
+  &-empty {
+    height: 100%;
+    position: relative;
+    .gantt-table-body {
+      position: absolute;
+      text-align: center;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      margin-top: 22px;
+      .empty-icon {
+        svg {
+          height: 78px;
+          width: 78px;
         }
       }
+      .empty-text {
+        color: #cacaca;
+      }
     }
   }
-}
 
-.gantt-header {
-  display: flex;
-  overflow: hidden;
-  height: 100%;
-  .gantt-container-header {
-    flex: 1;
-    overflow: hidden;
-    background-color: #fafafa;
+  &-drag-trigger {
+    width: $gantt-table-header-drag-line-width;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    cursor: ew-resize;
+    z-index: 1;
+
+    &:hover {
+      background: $gantt-table-header-drag-line-color;
+      z-index: 2;
+    }
   }
-}
 
-.gantt-table-header {
-  text-align: center;
-  background: #fff;
-  height: $gantt-header-height;
-  line-height: $gantt-header-height;
-  box-shadow: $gantt-side-shadow;
-  position: relative;
-  z-index: 3;
-  border-right: 1px solid $gantt-border-color;
-
-  .gantt-table-column {
-    font-weight: 400;
+  &-drag-auxiliary-line {
+    width: $gantt-table-header-drag-line-width;
+    background: $gantt-table-header-drag-line-color;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
+    display: none;
   }
-}
 
-.gantt-table-body {
-  display: block;
-  .gantt-table-group {
+  .gantt-table-row {
     display: flex;
-    height: $gantt-group-height;
-    background: $gantt-group-background-color;
-    padding: 0 10px;
-    align-items: center;
-    border-bottom: 1px solid $gantt-border-color;
     box-sizing: border-box;
-    position: relative;
+    border-bottom: 1px solid $gantt-border-color;
 
-    .gantt-table-group-title {
-      cursor: pointer;
+    .gantt-table-column {
+      overflow: hidden;
+      border-right: 1px solid $gantt-border-color;
+      box-sizing: border-box;
+      position: relative;
 
-      .expand-icon {
-        color: #aaa;
-        margin-right: 6px;
+      &:last-child {
+        border-right: none;
       }
     }
   }
 
-  .gantt-table-item {
-    cursor: pointer;
-    &-first-level-group {
-      background: $gantt-group-background-color;
-    }
+  .gantt-table-header {
+    text-align: center;
+    position: sticky;
+    top: 0;
+    background: #fff;
+    z-index: 2;
+    height: $gantt-header-height;
+    line-height: $gantt-header-height;
 
-    &-with-group {
-      .gantt-table-column {
-        &:first-child {
-          padding: 0 15px 0 32px;
-        }
-      }
+    .gantt-table-column {
+      font-weight: 400;
     }
+  }
 
-    .gantt-table-column {
+  .gantt-table-body {
+    .gantt-table-group {
       display: flex;
-      padding: $gantt-table-td-padding;
+      height: $gantt-group-height;
+      background: $gantt-group-background-color;
+      padding: 0 10px;
+      align-items: center;
+      border-bottom: 1px solid $gantt-border-color;
+      box-sizing: border-box;
+      position: relative;
 
-      &:last-child {
-        border-right: none;
-      }
-    }
+      .gantt-table-group-title {
+        cursor: pointer;
 
-    .gantt-table-column-content {
-      flex: 1;
-      position: relative;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+        .expand-icon {
+          color: #aaa;
+          margin-right: 6px;
+        }
+      }
     }
 
-    &:hover {
-      background-color: $gantt-container-background-color;
-    }
-  }
+    .gantt-table-item {
+      cursor: pointer;
+      &-first-level-group {
+        background: $gantt-group-background-color;
+      }
 
-  .gantt-expand-icon {
-    display: inline-block;
-    width: 20px;
-    color: #aaa;
-  }
-}
-.gantt-table-empty {
-  height: 100%;
-  position: relative;
-  .gantt-table-body-container {
-    position: absolute;
-    text-align: center;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    margin-top: 22px;
-    .empty-icon {
-      svg {
-        height: 78px;
-        width: 78px;
+      &-with-group {
+        .gantt-table-column {
+          &:first-child {
+            padding: 0 15px 0 32px;
+          }
+        }
       }
-    }
-    .empty-text {
-      color: #cacaca;
-    }
-  }
-}
 
-.gantt-table-drag-trigger {
-  width: $gantt-table-header-drag-line-width;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  cursor: ew-resize;
-  height: 5000px;
-  &.column-drag-trigger {
-    height: unset;
-    z-index: 1;
-  }
+      .gantt-table-column {
+        display: flex;
+        padding: $gantt-table-td-padding;
 
-  &:hover {
-    background: $gantt-table-header-drag-line-color;
-  }
-}
+        &:last-child {
+          border-right: none;
+        }
+      }
 
-.gantt-table-drag-auxiliary-line {
-  width: $gantt-table-header-drag-line-width;
-  background: $gantt-table-header-drag-line-color;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 100;
-  display: none;
-  height: 5000px;
-}
+      .gantt-table-column-content {
+        flex: 1;
+        position: relative;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
 
-.gantt-table-row {
-  display: flex;
-  box-sizing: border-box;
-  border-bottom: 1px solid $gantt-border-color;
+      &:hover {
+        background-color: $gantt-container-background-color;
+      }
 
-  .gantt-table-column {
-    overflow: hidden;
-    border-right: 1px solid $gantt-border-color;
-    box-sizing: border-box;
-    position: relative;
+      &-active {
+        background-color: rgba($color: $gantt-table-header-drag-line-color, $alpha: 0.1);
+        &:hover {
+          background-color: rgba($color: $gantt-table-header-drag-line-color, $alpha: 0.1);
+        }
+      }
+    }
 
-    &:last-child {
-      border-right: none;
+    .gantt-expand-icon {
+      display: inline-block;
+      width: 20px;
+      color: #aaa;
     }
   }
 }
 
-.gantt-calendar {
+.gantt-calendar-overlay {
   display: block;
   height: 100%;
   overflow: hidden;
-  svg {
-    position: relative;
-    z-index: 1;
-    background-color: $gantt-bg-color;
-    overflow: visible;
-  }
-  line {
-    shape-rendering: crispEdges;
-  }
 
-  .primary-line {
-    stroke: $gantt-date-primary-border;
-  }
   .gantt-calendar-today-overlay {
     position: relative;
-    z-index: 1;
+    z-index: 2;
     .today-rect {
       width: 35px;
       height: 24px;
@@ -338,17 +306,21 @@ $gantt-table-header-drag-line-color: #348fe4 !default;
       margin-left: -2px;
     }
   }
-}
-.gantt-calendar-header {
-  position: relative;
-  z-index: 2;
-  height: $gantt-header-height;
-  .gantt-calendar-today-overlay {
-      z-index: 2;
+
+  .gantt-calendar-overlay-main {
+    position: relative;
+    z-index: 1;
+    background-color: $gantt-bg-color;
   }
-  .header-line {
-    stroke: $gantt-border-color;
+
+  svg {
+    overflow: visible;
   }
+
+  line {
+    shape-rendering: crispEdges;
+  }
+
   .primary-text {
     fill: $gantt-date-primary-color;
     font-size: $gantt-date-primary-font-size;
@@ -367,12 +339,9 @@ $gantt-table-header-drag-line-color: #348fe4 !default;
   .secondary-text {
     text-anchor: middle;
   }
-}
-.gantt-calendar-grid {
-  position: absolute;
-  width: 100%;
-  .gantt-calendar-grid-main {
-    background-color: transparent;
+
+  .primary-line {
+    stroke: $gantt-date-primary-border;
   }
 
   .secondary-line {
@@ -380,6 +349,10 @@ $gantt-table-header-drag-line-color: #348fe4 !default;
     stroke: #cacaca;
   }
 
+  .header-line {
+    stroke: $gantt-border-color;
+  }
+
   .secondary-backdrop {
     fill: $gantt-date-week-backdrop-bg;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worktile/gantt",
-  "version": "12.1.0-next.0",
+  "version": "12.1.3",
   "schematics": "./schematics/collection.json",
   "peerDependencies": {
     "@angular/common": "^12.0.0",

package/public-api.d.ts

@@ -12,3 +12,4 @@ export * from './views/view';
 export * from './gantt-item-upper';
 export * from './gantt.pipe';
 export * from './gantt-print.service';
+export * from './gantt.config';

package/table/gantt-table.component.d.ts

@@ -1,10 +1,12 @@
-import { EventEmitter, OnInit } from '@angular/core';
+import { EventEmitter, OnInit, TemplateRef } from '@angular/core';
 import { GanttTableEvent } from '../class';
 import * as i0 from "@angular/core";
 export declare class NgxGanttTableComponent implements OnInit {
     columnChanges: EventEmitter<GanttTableEvent>;
+    rowBeforeTemplate: TemplateRef<any>;
+    rowAfterTemplate: TemplateRef<any>;
     constructor();
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxGanttTableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NgxGanttTableComponent, "ngx-gantt-table", never, {}, { "columnChanges": "columnChanges"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NgxGanttTableComponent, "ngx-gantt-table", never, {}, { "columnChanges": "columnChanges"; }, ["rowBeforeTemplate", "rowAfterTemplate"], never>;
 }

package/utils/helpers.d.ts

@@ -1,4 +1,4 @@
-import { GanttItemInternal } from '../class/item';
+import { GanttItem, GanttItemInternal } from '../class/item';
 export interface Dictionary<T = unknown> {
     [key: string]: T;
 }
@@ -8,7 +8,5 @@ export declare function isUndefined(value: any): boolean;
 export declare function hexToRgb(color: string, opacity?: number): string;
 export declare function uniqBy<T = unknown>(array: T[], key: keyof T): any[];
 export declare function flatten<T = unknown>(array: T[]): any;
-export declare function recursiveItems(items: GanttItemInternal[], level?: number): any[];
-export declare function keyBy<T>(array: T[], key: T extends object ? keyof T : never): {
-    [key: string]: T;
-};
+export declare function recursiveItems(items: GanttItemInternal[]): any[];
+export declare function getFlatItems(items: GanttItem[]): any[];

package/views/view.d.ts

@@ -1,6 +1,7 @@
 import { GanttDate, GanttDateUtil } from '../utils/date';
 import { GanttDatePoint } from '../class/date-point';
 import { BehaviorSubject } from 'rxjs';
+import { GanttDateFormat } from '../gantt.config';
 export declare const primaryDatePointTop = 18;
 export declare const secondaryDatePointTop = 36;
 export interface GanttViewDate {
@@ -15,6 +16,7 @@ export interface GanttViewOptions {
     cellWidth?: number;
     addAmount?: number;
     addUnit?: GanttDateUtil;
+    dateFormat?: GanttDateFormat;
 }
 export declare abstract class GanttView {
     start$: BehaviorSubject<GanttDate>;

package/components/calendar/header/calendar-header.component.d.ts

@@ -1,21 +0,0 @@
-import { OnInit, NgZone, ElementRef } from '@angular/core';
-import { GanttDatePoint } from '../../../class/date-point';
-import { GanttUpper } from '../../../gantt-upper';
-import { GanttViewType } from '../../../class';
-import * as i0 from "@angular/core";
-export declare class GanttCalendarHeaderComponent implements OnInit {
-    ganttUpper: GanttUpper;
-    private ngZone;
-    private elementRef;
-    get view(): import("@worktile/gantt").GanttView;
-    private unsubscribe$;
-    headerHeight: number;
-    viewTypes: typeof GanttViewType;
-    className: string;
-    constructor(ganttUpper: GanttUpper, ngZone: NgZone, elementRef: ElementRef<HTMLElement>);
-    ngOnInit(): void;
-    setTodayPoint(): void;
-    trackBy(point: GanttDatePoint, index: number): string | number;
-    static ɵfac: i0.ɵɵFactoryDeclaration<GanttCalendarHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GanttCalendarHeaderComponent, "gantt-calendar-header", never, {}, {}, never, never>;
-}

package/components/table/body/gantt-table-body.component.d.ts

@@ -1,24 +0,0 @@
-import { TemplateRef, QueryList, OnInit } from '@angular/core';
-import { GanttItemInternal, GanttGroupInternal } from '../../../class';
-import { NgxGanttTableColumnComponent } from '../../../table/gantt-column.component';
-import { GanttAbstractComponent } from '../../../gantt-abstract';
-import * as i0 from "@angular/core";
-export declare class GanttTableBodyComponent implements OnInit {
-    gantt: GanttAbstractComponent;
-    columnList: QueryList<NgxGanttTableColumnComponent>;
-    hasGroup: boolean;
-    flatData: (GanttGroupInternal | GanttItemInternal)[];
-    set tempData(data: (GanttGroupInternal | GanttItemInternal)[]);
-    set columns(columns: QueryList<NgxGanttTableColumnComponent>);
-    groupTemplate: TemplateRef<any>;
-    emptyTemplate: TemplateRef<any>;
-    ganttTableClass: boolean;
-    ganttTableEmptyClass: boolean;
-    constructor(gantt: GanttAbstractComponent);
-    ngOnInit(): void;
-    expandGroup(group: GanttGroupInternal): void;
-    expandChildren(item: GanttItemInternal): void;
-    trackBy(item: GanttGroupInternal | GanttItemInternal, index: number): string | number;
-    static ɵfac: i0.ɵɵFactoryDeclaration<GanttTableBodyComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GanttTableBodyComponent, "gantt-table-body", never, { "tempData": "tempData"; "columns": "columns"; "groupTemplate": "groupTemplate"; "emptyTemplate": "emptyTemplate"; }, {}, never, never>;
-}

package/components/table/header/gantt-table-header.component.d.ts

@@ -1,29 +0,0 @@
-import { QueryList, OnInit, ElementRef, AfterViewInit } from '@angular/core';
-import { NgxGanttTableColumnComponent } from '../../../table/gantt-column.component';
-import { CdkDragEnd, CdkDragMove, CdkDragStart } from '@angular/cdk/drag-drop';
-import { GanttAbstractComponent } from '../../../gantt-abstract';
-import * as i0 from "@angular/core";
-export declare const defaultColumnWidth = 100;
-export declare const minColumnWidth = 80;
-export declare class GanttTableHeaderComponent implements OnInit, AfterViewInit {
-    private elementRef;
-    private gantt;
-    columnList: QueryList<NgxGanttTableColumnComponent>;
-    dragStartLeft: number;
-    tableWidth: number;
-    set columns(columns: QueryList<NgxGanttTableColumnComponent>);
-    draglineElementRef: ElementRef<HTMLElement>;
-    className: string;
-    constructor(elementRef: ElementRef, gantt: GanttAbstractComponent);
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
-    private dragFixed;
-    dragStarted(event: CdkDragStart): void;
-    dragMoved(event: CdkDragMove, column?: NgxGanttTableColumnComponent): void;
-    columnDragEnded(event: CdkDragEnd, column: NgxGanttTableColumnComponent): void;
-    tableDragEnded(event: CdkDragEnd): void;
-    private showAuxiliaryLine;
-    private hideAuxiliaryLine;
-    static ɵfac: i0.ɵɵFactoryDeclaration<GanttTableHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GanttTableHeaderComponent, "gantt-table-header", never, { "columns": "columns"; }, {}, never, never>;
-}