@worktile/gantt 12.2.3 → 13.0.0

package/gantt-item-upper.d.ts

@@ -9,7 +9,7 @@ export declare abstract class GanttItemUpper implements OnChanges, OnInit, OnDes
     template: TemplateRef<any>;
     item: GanttItemInternal;
     firstChange: boolean;
-    unsubscribe$: Subject<unknown>;
+    unsubscribe$: Subject<void>;
     constructor(elementRef: ElementRef<HTMLElement>, ganttUpper: GanttUpper);
     ngOnInit(): void;
     ngOnChanges(): void;

package/gantt-upper.d.ts

@@ -50,7 +50,7 @@ export declare abstract class GanttUpper implements OnChanges, OnInit, OnDestroy
     get element(): HTMLElement;
     firstChange: boolean;
     dragContainer: GanttDragContainer;
-    unsubscribe$: Subject<unknown>;
+    unsubscribe$: Subject<void>;
     selectionModel: SelectionModel<string>;
     private groupsMap;
     private _selectable;

package/gantt.component.scss

@@ -0,0 +1,83 @@
+@use 'styles/variables';
+
+.gantt {
+  width: 100%;
+  height: 100%;
+  background-color: variables.$gantt-bg-color;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  color: variables.$gantt-color;
+  opacity: 0;
+
+  svg {
+    overflow: visible !important;
+  }
+
+  .gantt-side {
+    border-right: 1px solid variables.$gantt-border-color;
+    position: relative;
+    z-index: 3;
+    // overflow-x: scroll;
+    box-shadow: variables.$gantt-side-shadow;
+
+    .gantt-side-header {
+      box-sizing: border-box;
+      height: variables.$gantt-header-height;
+    }
+
+    .gantt-side-container {
+      height: 100%;
+      background-color: variables.$gantt-bg-color;
+      overflow-y: auto;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+
+  .gantt-container {
+    flex: 1;
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    background-color: variables.$gantt-container-background-color;
+  }
+
+  .gantt-main-container {
+    width: 100%;
+    height: calc(100% - #{variables.$gantt-header-height});
+    flex: 1;
+    position: absolute;
+    top: variables.$gantt-header-height;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: auto;
+    background-color: variables.$gantt-container-background-color;
+
+    .gantt-main-groups,
+    .gantt-main-items {
+      overflow: hidden;
+      min-height: 100%;
+    }
+
+    .gantt-group {
+      height: variables.$gantt-group-height;
+      background: variables.$gantt-group-background-color;
+      border-bottom: 1px solid variables.$gantt-border-color;
+      box-sizing: border-box;
+    }
+
+    .gantt-item {
+      border-bottom: 1px solid variables.$gantt-border-color;
+      box-sizing: border-box;
+      position: relative;
+
+      &.gantt-main-item-active {
+        background-color: rgba($color: variables.$gantt-table-header-drag-line-color, $alpha: 0.1);
+      }
+    }
+  }
+}

package/package.json

@@ -1,19 +1,45 @@
 {
   "name": "@worktile/gantt",
-  "version": "12.2.3",
+  "version": "13.0.0",
   "schematics": "./schematics/collection.json",
+  "exports": {
+    ".": {
+      "sass": "./styles/index.scss",
+      "types": "./worktile-gantt.d.ts",
+      "esm2020": "./esm2020/worktile-gantt.mjs",
+      "es2020": "./fesm2020/worktile-gantt.mjs",
+      "es2015": "./fesm2015/worktile-gantt.mjs",
+      "node": "./fesm2015/worktile-gantt.mjs",
+      "default": "./fesm2020/worktile-gantt.mjs"
+    },
+    "./styles/variables": {
+      "sass": "./styles/variables.scss"
+    },
+    "./styles/index": {
+      "sass": "./styles/index.scss"
+    },
+    "./styles/*": {
+      "sass": "./styles/*"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    }
+  },
   "peerDependencies": {
-    "@angular/common": "^12.0.0",
-    "@angular/core": "^12.0.0"
+    "@angular/common": ">=13.0.0",
+    "@angular/core": ">=13.0.0",
+    "@angular/cdk": ">=13.0.0",
+    "rxjs": "^6.5.0 || ^7.0.0",
+    "date-fns": ">=2.0.0"
   },
-  "main": "bundles/worktile-gantt.umd.js",
-  "module": "fesm2015/worktile-gantt.js",
-  "es2015": "fesm2015/worktile-gantt.js",
-  "esm2015": "esm2015/worktile-gantt.js",
-  "fesm2015": "fesm2015/worktile-gantt.js",
+  "module": "fesm2015/worktile-gantt.mjs",
+  "es2020": "fesm2020/worktile-gantt.mjs",
+  "esm2020": "esm2020/worktile-gantt.mjs",
+  "fesm2020": "fesm2020/worktile-gantt.mjs",
+  "fesm2015": "fesm2015/worktile-gantt.mjs",
   "typings": "worktile-gantt.d.ts",
   "sideEffects": false,
   "dependencies": {
-    "tslib": "^2.2.0"
+    "tslib": "^2.3.0"
   }
 }

package/styles/index.scss

@@ -0,0 +1,9 @@
+@use './variables.scss';
+@use '../gantt.component.scss';
+@use '../components/table/gantt-table.component.scss';
+@use '../components/calendar/calendar.component.scss';
+@use '../components/drag-backdrop/drag-backdrop.component.scss';
+@use '../components/bar/bar.component.scss';
+@use '../components/range/range.component.scss';
+@use '../components/icon/icon.component.scss';
+@use '../components/links/links.component.scss';

package/styles/variables.scss

@@ -0,0 +1,46 @@
+// 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;