@worktile/gantt 11.0.2 → 12.0.1

package/gantt.component.d.ts

@@ -1,28 +0,0 @@
-import { OnInit, ElementRef, EventEmitter, ChangeDetectorRef, NgZone, OnChanges, OnDestroy, SimpleChanges, QueryList, AfterViewInit, TemplateRef } from '@angular/core';
-import { Observable } from 'rxjs';
-import { GanttUpper } from './gantt-upper';
-import { GanttLinkDragEvent, GanttLineClickEvent, GanttItemInternal, GanttItem } from './class';
-import { NgxGanttTableColumnComponent } from './table/gantt-column.component';
-import { NgxGanttTableComponent } from './table/gantt-table.component';
-export declare const defaultColumnWidth = 100;
-export declare const minColumnWidth = 80;
-export declare class NgxGanttComponent extends GanttUpper implements OnInit, AfterViewInit, OnChanges, OnDestroy {
-    maxLevel: number;
-    async: boolean;
-    childrenResolve: (GanttItem: any) => Observable<GanttItem[]>;
-    linkable: boolean;
-    linkDragStarted: EventEmitter<GanttLinkDragEvent<unknown>>;
-    linkDragEnded: EventEmitter<GanttLinkDragEvent<unknown>>;
-    lineClick: EventEmitter<GanttLineClickEvent<unknown>>;
-    table: NgxGanttTableComponent;
-    columns: QueryList<NgxGanttTableColumnComponent>;
-    tableEmptyTemplate: TemplateRef<any>;
-    private ngUnsubscribe$;
-    sideTableWidth: number;
-    constructor(elementRef: ElementRef<HTMLElement>, cdr: ChangeDetectorRef, ngZone: NgZone);
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
-    expandChildren(item: GanttItemInternal): void;
-    ngOnDestroy(): void;
-}

package/gantt.module.d.ts

@@ -1,2 +0,0 @@
-export declare class NgxGanttModule {
-}

package/gantt.pipe.d.ts

@@ -1,11 +0,0 @@
-import { PipeTransform } from '@angular/core';
-import { GanttItemType } from './class';
-export declare class IsGanttRangeItemPipe implements PipeTransform {
-    transform(value: GanttItemType): boolean;
-}
-export declare class IsGanttBarItemPipe implements PipeTransform {
-    transform(value: GanttItemType): boolean;
-}
-export declare class IsGanttCustomItemPipe implements PipeTransform {
-    transform(value: GanttItemType): boolean;
-}

package/gantt.styles.d.ts

@@ -1,15 +0,0 @@
-export declare const defaultStyles: {
-    lineHeight: number;
-    barHeight: number;
-};
-export declare const headerHeight = 44;
-export declare type GanttStyles = typeof defaultStyles;
-export declare const sideWidth = 400;
-export declare const sideMiddleWidth = 500;
-export declare const sideMaxWidth = 600;
-export declare const sideMinWidth = 400;
-export declare const barBackground = "#348fe4";
-export declare const rangeHeight = 17;
-export declare const todayHeight = 24;
-export declare const todayWidth = 35;
-export declare const todayBorderRadius = 4;

package/root.component.d.ts

@@ -1,25 +0,0 @@
-import { OnInit, NgZone, ElementRef, TemplateRef } from '@angular/core';
-import { GanttDomService } from './gantt-dom.service';
-import { GanttDragContainer } from './gantt-drag-container';
-import { GanttUpper } from './gantt-upper';
-import { GanttPrintService } from './gantt-print.service';
-export declare class NgxGanttRootComponent implements OnInit {
-    private elementRef;
-    private ngZone;
-    private dom;
-    dragContainer: GanttDragContainer;
-    private ganttUpper;
-    private printService;
-    sideWidth: number;
-    ganttClass: boolean;
-    sideTemplate: TemplateRef<any>;
-    mainTemplate: TemplateRef<any>;
-    private unsubscribe$;
-    private get view();
-    constructor(elementRef: ElementRef<HTMLElement>, ngZone: NgZone, dom: GanttDomService, dragContainer: GanttDragContainer, ganttUpper: GanttUpper, printService: GanttPrintService);
-    ngOnInit(): void;
-    private setupViewScroll;
-    private setupResize;
-    private setupScrollClass;
-    private scrollToToday;
-}

package/style.scss

@@ -1,645 +0,0 @@
-// basic
-$gantt-color: #333 !default;
-$gantt-header-height: 44px !default;
-$gantt-border-color: #eee !default;
-$gantt-bg-color: #fff !default;
-$gantt-side-shadow: 12px 0 16px -10px rgba(0, 0, 0, 0.15) !default;
-$gantt-container-background-color: #fafafa !default;
-$gantt-item-height: 44px !default;
-$gantt-group-background-color: rgba(
-  $color: #f3f3f3,
-  $alpha: 0.5
-) !default;
-$gantt-group-height: 44px !default;
-$gantt-table-td-padding: 0 15px !default;
-
-// calendar
-$gantt-date-primary-color: #888 !default;
-$gantt-date-primary-font-size: 14px !default;
-$gantt-date-primary-border: #ddd !default;
-$gantt-date-secondary-color: #333 !default;
-$gantt-date-secondary-font-size: 14px !default;
-$gantt-date-secondary-weekend-color: #aaa !default;
-$gantt-date-week-backdrop-bg: rgba(
-  $color: #f3f3f3,
-  $alpha: 0.5
-) !default;
-$gantt-date-today-color: #ff9f73 !default;
-$gantt-date-today-text-color: #fff !default;
-
-// bar
-$gantt-bar-bg: #fff !default;
-$gantt-bar-layer-bg: #fff !default;
-$gantt-bar-handle-color: #cacaca !default;
-$gantt-bar-handle-height: 12px !default;
-$gantt-bar-background-color: #348fe4 !default;
-
-// drag
-$gantt-item-drag-mask-color: #348fe4 !default;
-$gantt-link-dragging-line-color: #348fe4 !default;
-
-// link
-$gantt-link-line-color: #348fe4 !default;
-
-// table
-$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;
-  }
-
-  .gantt-side {
-    border-right: 1px solid $gantt-border-color;
-    position: relative;
-    z-index: 3;
-    // overflow-x: scroll;
-    box-shadow: $gantt-side-shadow;
-
-    .gantt-side-header {
-      box-sizing: border-box;
-      height: $gantt-header-height;
-    }
-
-    .gantt-side-container {
-      height: 100%;
-      background-color: $gantt-bg-color;
-      overflow-y: auto;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-  }
-
-  .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});
-    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-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;
-      }
-    }
-  }
-
-  &-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;
-    }
-  }
-
-  &-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-row {
-    display: flex;
-    box-sizing: border-box;
-    border-bottom: 1px solid $gantt-border-color;
-
-    .gantt-table-column {
-      overflow: hidden;
-      border-right: 1px solid $gantt-border-color;
-      box-sizing: border-box;
-      position: relative;
-
-      &:last-child {
-        border-right: none;
-      }
-    }
-  }
-
-  .gantt-table-header {
-    text-align: center;
-    position: sticky;
-    top: 0;
-    background: #fff;
-    z-index: 2;
-    height: $gantt-header-height;
-    line-height: $gantt-header-height;
-
-    .gantt-table-column {
-      font-weight: 400;
-    }
-  }
-
-  .gantt-table-body {
-    .gantt-table-group {
-      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;
-
-      .gantt-table-group-title {
-        cursor: pointer;
-
-        .expand-icon {
-          color: #aaa;
-          margin-right: 6px;
-        }
-      }
-    }
-
-    .gantt-table-item {
-      cursor: pointer;
-      &-first-level-group {
-        background: $gantt-group-background-color;
-      }
-
-      &-with-group {
-        .gantt-table-column {
-          &:first-child {
-            padding: 0 15px 0 32px;
-          }
-        }
-      }
-
-      .gantt-table-column {
-        display: flex;
-        padding: $gantt-table-td-padding;
-
-        &:last-child {
-          border-right: none;
-        }
-      }
-
-      .gantt-table-column-content {
-        flex: 1;
-        position: relative;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      &:hover {
-        background-color: $gantt-container-background-color;
-      }
-    }
-
-    .gantt-expand-icon {
-      display: inline-block;
-      width: 20px;
-      color: #aaa;
-    }
-  }
-}
-
-.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: $gantt-date-today-color;
-      color: $gantt-date-today-text-color;
-      text-align: center;
-      border-radius: 4px;
-    }
-    .today-line {
-      position: absolute;
-      width: 3px;
-      background: $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: $gantt-bg-color;
-  }
-
-  svg {
-    overflow: visible;
-  }
-
-  line {
-    shape-rendering: crispEdges;
-  }
-
-  .primary-text {
-    fill: $gantt-date-primary-color;
-    font-size: $gantt-date-primary-font-size;
-  }
-
-  .secondary-text {
-    fill: $gantt-date-secondary-color;
-    font-size: $gantt-date-secondary-font-size;
-
-    &-weekend {
-      fill: $gantt-date-secondary-weekend-color;
-    }
-  }
-
-  .primary-text,
-  .secondary-text {
-    text-anchor: middle;
-  }
-
-  .primary-line {
-    stroke: $gantt-date-primary-border;
-  }
-
-  .secondary-line {
-    stroke-dasharray: 2px 5px;
-    stroke: #cacaca;
-  }
-
-  .header-line {
-    stroke: $gantt-border-color;
-  }
-
-  .secondary-backdrop {
-    fill: $gantt-date-week-backdrop-bg;
-  }
-}
-
-.gantt-drag-backdrop {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 2;
-    display: none;
-}
-
-.gantt-drag-mask {
-    position: absolute;
-    top: $gantt-header-height;
-    z-index: 1;
-    height: 100%;
-    display: none;
-    background: rgba($color: $gantt-item-drag-mask-color, $alpha: 0.05);
-
-    .date-range {
-        width: 100%;
-        min-width: 120px;
-        top: -23px;
-        background: $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: $gantt-link-dragging-line-color;
-        stroke-width: 2px;
-    }
-}
-
-$gantt-bar-layer-append-width: 32px;
-$gantt-bar-layer-append-height: 42px;
-$gantt-bar-link-height: 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: $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: $gantt-bar-handle-height;
-                background: $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: $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: $gantt-bar-layer-append-width / 2 * -1;
-        top: $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: $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();
-    }
-
-    &-link-drop {
-        .gantt-bar-border {
-            display: block;
-        }
-
-        .gantt-bar-content {
-            box-shadow: none;
-        }
-    }
-}
-
-.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;
-    }
-  }
-}
-
-.gantt-icon {
-    font-size: 1rem;
-    line-height: 0;
-
-    svg {
-        width: 1em;
-        height: 1em;
-        fill: currentColor;
-        vertical-align: -0.125em;
-        background-repeat: no-repeat;
-    }
-
-}
-
-.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: $gantt-header-height;
-  left: 0;
-  z-index: 2000;
-
-  .link-dragging-line {
-    stroke: $gantt-link-line-color;
-    stroke-width: 2px;
-  }
-}
-