@worktile/gantt 12.2.1 → 13.0.0-next.0

package/components/bar/bar-drag.d.ts

@@ -4,11 +4,13 @@ import { GanttDomService } from '../../gantt-dom.service';
 import { GanttDragContainer } from '../../gantt-drag-container';
 import { GanttItemInternal } from '../../class/item';
 import { GanttUpper } from '../../gantt-upper';
+import { NgxGanttRootComponent } from '../../root.component';
 import * as i0 from "@angular/core";
 export declare class GanttBarDrag implements OnDestroy {
     private dragDrop;
     private dom;
     private dragContainer;
+    private root;
     private ganttUpper;
     private barElement;
     private item;
@@ -18,7 +20,7 @@ export declare class GanttBarDrag implements OnDestroy {
     private barDragRef;
     private dragRefs;
     private destroy$;
-    constructor(dragDrop: DragDrop, dom: GanttDomService, dragContainer: GanttDragContainer);
+    constructor(dragDrop: DragDrop, dom: GanttDomService, dragContainer: GanttDragContainer, root: NgxGanttRootComponent);
     private createMouseEvents;
     private createBarDrag;
     private createBarHandleDrags;
@@ -32,6 +34,6 @@ export declare class GanttBarDrag implements OnDestroy {
     private destroyLinkDraggingLine;
     createDrags(elementRef: ElementRef, item: GanttItemInternal, ganttUpper: GanttUpper): void;
     ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<GanttBarDrag, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GanttBarDrag, [null, null, null, { skipSelf: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<GanttBarDrag>;
 }

package/components/bar/bar.component.d.ts

@@ -1,4 +1,4 @@
-import { OnInit, ElementRef, OnChanges, OnDestroy, EventEmitter, AfterViewInit } from '@angular/core';
+import { OnInit, ElementRef, OnChanges, OnDestroy, EventEmitter, AfterViewInit, QueryList, NgZone } from '@angular/core';
 import { GanttBarDrag } from './bar-drag';
 import { GanttDragContainer } from '../../gantt-drag-container';
 import { GanttBarClickEvent } from '../../class';
@@ -9,18 +9,18 @@ export declare class NgxGanttBarComponent extends GanttItemUpper implements OnIn
     private dragContainer;
     private drag;
     ganttUpper: GanttUpper;
+    private ngZone;
     barClick: EventEmitter<GanttBarClickEvent<unknown>>;
     contentElementRef: ElementRef<HTMLDivElement>;
     ganttItemClass: boolean;
+    handles: QueryList<ElementRef<HTMLElement>>;
     color: string;
-    constructor(dragContainer: GanttDragContainer, drag: GanttBarDrag, elementRef: ElementRef<HTMLDivElement>, ganttUpper: GanttUpper);
+    constructor(dragContainer: GanttDragContainer, drag: GanttBarDrag, elementRef: ElementRef<HTMLDivElement>, ganttUpper: GanttUpper, ngZone: NgZone);
     ngOnInit(): void;
     ngAfterViewInit(): void;
-    ngOnChanges(): void;
     onBarClick(event: Event): void;
     private setContentBackground;
     stopPropagation(event: Event): void;
-    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxGanttBarComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NgxGanttBarComponent, "ngx-gantt-bar,gantt-bar", never, {}, { "barClick": "barClick"; }, never, never>;
 }

package/components/bar/bar.component.scss

@@ -0,0 +1,201 @@
+@use 'sass:math';
+@use '../../styles/variables';
+
+$gantt-bar-layer-append-width: 32px;
+$gantt-bar-layer-append-height: 42px;
+$gantt-bar-link-height: 16px;
+$gantt-bar-link-handle-size: 16px;
+$gantt-bar-link-drop-border: 5px;
+
+@mixin link-handles {
+  .link-handles {
+    .handle {
+      position: absolute;
+      display: inline-block;
+      cursor: pointer;
+      width: $gantt-bar-link-height;
+      height: $gantt-bar-link-height;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1001;
+
+      &:first-child {
+        left: 0;
+        top: 0;
+      }
+
+      &:last-child {
+        right: 0;
+        bottom: 0;
+      }
+
+      .point {
+        color: #348fe4;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: #348fe4;
+        transition: 0.3 ease;
+
+        &:hover {
+          width: 12px;
+          height: 12px;
+        }
+      }
+    }
+  }
+}
+
+@mixin drag-handles {
+  .drag-handles {
+    background: variables.$gantt-bar-layer-bg;
+    width: 100%;
+    height: calc(100% - #{$gantt-bar-link-height} * 2);
+    position: absolute;
+    border-radius: 4px;
+    top: $gantt-bar-link-height;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
+
+    .handle {
+      width: 15px;
+      height: 100%;
+      position: absolute;
+      cursor: col-resize;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:before,
+      &:after {
+        content: '';
+        display: inline-block;
+        width: 1px;
+        height: variables.$gantt-bar-handle-height;
+        background: variables.$gantt-bar-handle-color;
+      }
+
+      &::before {
+        margin-right: 2px;
+      }
+
+      &:first-child {
+        left: 0;
+      }
+
+      &:last-child {
+        right: 0;
+      }
+    }
+  }
+}
+
+@mixin active-bar {
+  z-index: 1000;
+
+  .gantt-bar-layer {
+    display: block;
+    z-index: 1;
+  }
+
+  .gantt-bar-content {
+    z-index: 1;
+    box-shadow: none;
+  }
+
+  .cdk-drag {
+    transition: none;
+  }
+}
+
+.gantt-bar {
+  position: absolute;
+  border-radius: 4px;
+  z-index: 2;
+  background: variables.$gantt-bar-bg;
+
+  .gantt-bar-layer {
+    width: calc(100% + #{$gantt-bar-layer-append-width});
+    height: calc(100% + #{$gantt-bar-layer-append-height});
+    position: absolute;
+    border-radius: 4px;
+    left: math.div($gantt-bar-layer-append-width, 2) * -1;
+    top: math.div($gantt-bar-layer-append-height, 2) * -1;
+    display: none;
+    @include drag-handles();
+    @include link-handles();
+  }
+
+  .gantt-bar-border {
+    width: calc(100% + #{$gantt-bar-link-drop-border} * 2);
+    height: calc(100% + #{$gantt-bar-link-drop-border} * 2);
+    position: absolute;
+    border-radius: 4px;
+    left: $gantt-bar-link-drop-border * -1;
+    top: $gantt-bar-link-drop-border * -1;
+    display: none;
+    background: #fff;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .gantt-bar-content {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    cursor: pointer;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    background: variables.$gantt-bar-background-color;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    .gantt-bar-content-progress {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+    }
+  }
+
+  &-active {
+    @include active-bar();
+  }
+
+  &-single-drop-active {
+    .gantt-bar-border {
+      display: block;
+    }
+
+    .gantt-bar-content {
+      box-shadow: none;
+    }
+  }
+
+  &-drop-active {
+    @include active-bar();
+
+    .gantt-bar-layer {
+      .link-handles {
+        .handle {
+          width: $gantt-bar-link-handle-size + 10px;
+          height: 100%;
+
+          &:first-child {
+            left: -$gantt-bar-link-handle-size - 5px;
+          }
+
+          &:last-child {
+            right: -$gantt-bar-link-handle-size - 5px;
+          }
+
+          &:hover {
+            .point {
+              width: 12px;
+              height: 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -1,14 +1,13 @@
-import { OnInit, OnChanges, SimpleChanges, OnDestroy, NgZone, ElementRef, AfterViewInit } from '@angular/core';
+import { OnInit, OnDestroy, NgZone, ElementRef } from '@angular/core';
 import { GanttDatePoint } from '../../class/date-point';
 import { GanttUpper } from '../../gantt-upper';
 import { GanttViewType } from './../../class/view-type';
 import * as i0 from "@angular/core";
-export declare class GanttCalendarComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
+export declare class GanttCalendarComponent implements OnInit, OnDestroy {
     ganttUpper: GanttUpper;
     private ngZone;
     private elementRef;
     get view(): import("@worktile/gantt").GanttView;
-    private unsubscribe$;
     headerHeight: number;
     mainHeight: number;
     todayHeight: number;
@@ -16,11 +15,10 @@ export declare class GanttCalendarComponent implements OnInit, AfterViewInit, On
     todayBorderRadius: number;
     viewTypes: typeof GanttViewType;
     className: boolean;
+    private unsubscribe$;
     constructor(ganttUpper: GanttUpper, ngZone: NgZone, elementRef: ElementRef<HTMLElement>);
     setTodayPoint(): void;
     ngOnInit(): void;
-    ngAfterViewInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
     trackBy(index: number, point: GanttDatePoint): string | number;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GanttCalendarComponent, never>;

package/components/calendar/calendar.component.scss

@@ -0,0 +1,79 @@
+@use '../../styles/variables';
+
+.gantt-calendar-overlay {
+  display: block;
+  height: 100%;
+  overflow: hidden;
+
+  .gantt-calendar-today-overlay {
+    position: relative;
+    z-index: 2;
+    .today-rect {
+      width: 35px;
+      height: 24px;
+      position: absolute;
+      background: variables.$gantt-date-today-color;
+      color: variables.$gantt-date-today-text-color;
+      text-align: center;
+      border-radius: 4px;
+    }
+    .today-line {
+      position: absolute;
+      width: 3px;
+      background: variables.$gantt-date-today-color;
+      transform: scaleX(0.5);
+      transform-origin: 100% 0;
+      margin-left: -2px;
+    }
+  }
+
+  .gantt-calendar-overlay-main {
+    position: relative;
+    z-index: 1;
+    background-color: variables.$gantt-bg-color;
+  }
+
+  svg {
+    overflow: visible;
+  }
+
+  line {
+    shape-rendering: crispEdges;
+  }
+
+  .primary-text {
+    fill: variables.$gantt-date-primary-color;
+    font-size: variables.$gantt-date-primary-font-size;
+  }
+
+  .secondary-text {
+    fill: variables.$gantt-date-secondary-color;
+    font-size: variables.$gantt-date-secondary-font-size;
+
+    &-weekend {
+      fill: variables.$gantt-date-secondary-weekend-color;
+    }
+  }
+
+  .primary-text,
+  .secondary-text {
+    text-anchor: middle;
+  }
+
+  .primary-line {
+    stroke: variables.$gantt-date-primary-border;
+  }
+
+  .secondary-line {
+    stroke-dasharray: 2px 5px;
+    stroke: #cacaca;
+  }
+
+  .header-line {
+    stroke: variables.$gantt-border-color;
+  }
+
+  .secondary-backdrop {
+    fill: variables.$gantt-date-week-backdrop-bg;
+  }
+}

package/components/drag-backdrop/drag-backdrop.component.d.ts

@@ -1,9 +1,5 @@
-import { OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class GanttDragBackdropComponent implements OnInit {
-    backdropClass: boolean;
-    constructor();
-    ngOnInit(): void;
+export declare class GanttDragBackdropComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<GanttDragBackdropComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<GanttDragBackdropComponent, "gantt-drag-backdrop", never, {}, {}, never, never>;
 }

package/components/drag-backdrop/drag-backdrop.component.scss

@@ -0,0 +1,50 @@
+@use '../../styles/variables';
+
+.gantt-drag-backdrop {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  display: none;
+}
+
+.gantt-drag-mask {
+  position: absolute;
+  top: variables.$gantt-header-height;
+  z-index: 1;
+  height: 100%;
+  display: none;
+  background: rgba($color: variables.$gantt-item-drag-mask-color, $alpha: 0.05);
+
+  .date-range {
+    width: 100%;
+    min-width: 120px;
+    top: -23px;
+    background: variables.$gantt-item-drag-mask-color;
+    line-height: 23px;
+    border-radius: 4px;
+    color: #fff;
+    position: absolute;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px;
+    box-sizing: border-box;
+  }
+}
+
+.gantt-link-drag-container {
+  width: 100%;
+  height: 1px;
+  overflow: visible !important;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2000;
+
+  .link-dragging-line {
+    stroke: variables.$gantt-link-dragging-line-color;
+    stroke-width: 2px;
+  }
+}

package/components/icon/icon.component.d.ts

@@ -1,12 +1,10 @@
-import { OnInit, AfterViewInit, ElementRef } from '@angular/core';
+import { ElementRef } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class GanttIconComponent implements OnInit, AfterViewInit {
+export declare class GanttIconComponent {
     private elementRef;
     isIcon: boolean;
     set iconName(name: string);
     constructor(elementRef: ElementRef<HTMLElement>);
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
     setSvg(name: string): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GanttIconComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<GanttIconComponent, "gantt-icon", never, { "iconName": "iconName"; }, {}, never, never>;

package/components/icon/icon.component.scss

@@ -0,0 +1,13 @@
+.gantt-icon {
+    font-size: 1rem;
+    line-height: 0;
+
+    svg {
+        width: 1em;
+        height: 1em;
+        fill: currentColor;
+        vertical-align: -0.125em;
+        background-repeat: no-repeat;
+    }
+
+}

package/components/links/links.component.scss

@@ -0,0 +1,29 @@
+@use '../../styles/variables';
+
+.gantt-links-overlay {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  svg {
+    overflow: visible;
+    z-index: 2;
+    position: absolute;
+  }
+}
+
+.link-dragging-container {
+  width: 100%;
+  height: 1px;
+  overflow: visible !important;
+  position: absolute;
+  top: variables.$gantt-header-height;
+  left: 0;
+  z-index: 2000;
+
+  .link-dragging-line {
+    stroke: variables.$gantt-link-line-color;
+    stroke-width: 2px;
+  }
+}

package/components/main/gantt-main.component.d.ts

@@ -1,8 +1,8 @@
-import { OnInit, TemplateRef, EventEmitter } from '@angular/core';
+import { TemplateRef, EventEmitter } from '@angular/core';
 import { GanttGroupInternal, GanttItemInternal, GanttBarClickEvent, GanttLineClickEvent } from '../../class';
 import { GanttUpper } from '../../gantt-upper';
 import * as i0 from "@angular/core";
-export declare class GanttMainComponent implements OnInit {
+export declare class GanttMainComponent {
     ganttUpper: GanttUpper;
     groups: GanttGroupInternal[];
     items: GanttItemInternal[];
@@ -14,7 +14,6 @@ export declare class GanttMainComponent implements OnInit {
     lineClick: EventEmitter<GanttLineClickEvent<unknown>>;
     ganttMainClass: boolean;
     constructor(ganttUpper: GanttUpper);
-    ngOnInit(): void;
     trackBy(index: number, item: GanttGroupInternal | GanttItemInternal): string | number;
     static ɵfac: i0.ɵɵFactoryDeclaration<GanttMainComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<GanttMainComponent, "gantt-main", never, { "groups": "groups"; "items": "items"; "groupHeaderTemplate": "groupHeaderTemplate"; "itemTemplate": "itemTemplate"; "barTemplate": "barTemplate"; "rangeTemplate": "rangeTemplate"; }, { "barClick": "barClick"; "lineClick": "lineClick"; }, never, never>;

package/components/range/range.component.d.ts

@@ -1,13 +1,10 @@
-import { OnInit, ElementRef, OnChanges, OnDestroy } from '@angular/core';
+import { ElementRef } from '@angular/core';
 import { GanttUpper } from '../../gantt-upper';
 import { GanttItemUpper } from '../../gantt-item-upper';
 import * as i0 from "@angular/core";
-export declare class NgxGanttRangeComponent extends GanttItemUpper implements OnInit, OnChanges, OnDestroy {
+export declare class NgxGanttRangeComponent extends GanttItemUpper {
     ganttRangeClass: boolean;
     constructor(elementRef: ElementRef<HTMLDivElement>, ganttUpper: GanttUpper);
-    ngOnInit(): void;
-    ngOnChanges(): void;
-    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgxGanttRangeComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<NgxGanttRangeComponent, "ngx-gantt-range,gantt-range", never, {}, {}, never, never>;
 }

package/components/range/range.component.scss

@@ -0,0 +1,35 @@
+.gantt-range {
+  position: absolute;
+  z-index: 2;
+  .gantt-range-main {
+    height: 10px;
+    background: #dfdfdf;
+    border: 1px solid #888;
+    border-radius: 4px 4px 0 0;
+    box-sizing: border-box;
+    position: relative;
+    .gantt-range-main-progress {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      background: #888;
+    }
+  }
+  .gantt-range-triangle {
+    width: 0;
+    height: 0;
+    border-top: 7px solid #888;
+    position: absolute;
+    top: 10px;
+
+    &.left {
+      border-right: 6px solid transparent;
+      left: 0;
+    }
+    &.right {
+      border-left: 6px solid transparent;
+      right: 0;
+    }
+  }
+}

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

@@ -1,4 +1,4 @@
-import { TemplateRef, QueryList, OnInit, ElementRef, OnChanges, SimpleChanges, EventEmitter } from '@angular/core';
+import { TemplateRef, QueryList, ElementRef, OnChanges, SimpleChanges, EventEmitter } from '@angular/core';
 import { GanttItemInternal, GanttGroupInternal, GanttSelectedEvent } from '../../class';
 import { NgxGanttTableColumnComponent } from '../../table/gantt-column.component';
 import { CdkDragEnd, CdkDragMove, CdkDragStart } from '@angular/cdk/drag-drop';
@@ -7,7 +7,7 @@ import { GanttUpper } from '../../gantt-upper';
 import * as i0 from "@angular/core";
 export declare const defaultColumnWidth = 100;
 export declare const minColumnWidth = 80;
-export declare class GanttTableComponent implements OnInit, OnChanges {
+export declare class GanttTableComponent implements OnChanges {
     gantt: GanttAbstractComponent;
     ganttUpper: GanttUpper;
     private elementRef;
@@ -25,7 +25,6 @@ export declare class GanttTableComponent implements OnInit, OnChanges {
     ganttTableClass: boolean;
     ganttTableEmptyClass: boolean;
     constructor(gantt: GanttAbstractComponent, ganttUpper: GanttUpper, elementRef: ElementRef);
-    ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     private dragFixed;
     expandGroup(group: GanttGroupInternal): void;