@seniorsistemas/angular-components 17.1.4 → 17.1.5

package/fesm5/seniorsistemas-angular-components.js

@@ -8736,11 +8736,12 @@ var DateUtils = /** @class */ (function () {
             .startOf("month")
             .format("MMMM");
         var monthNameCapitalized = monthName.charAt(0).toUpperCase() + monthName.slice(1);
-        var dateToFormat = moment$7(date);
+        var dateToFormat = moment$7(date).locale(lang);
         var format_map = {
             YYYY: dateToFormat.format("YYYY"),
             MM: dateToFormat.format("MM"),
             DD: dateToFormat.format("DD"),
+            ddd: dateToFormat.format("ddd").toUpperCase().replace(".", ""),
             HH: dateToFormat.format("HH"),
             mm: dateToFormat.format("mm"),
             ss: dateToFormat.format("ss"),
@@ -8963,6 +8964,7 @@ $.attr = function (element, attr, value) {
 
 var ViewMode;
 (function (ViewMode) {
+    ViewMode["QuarterHour"] = "quarterHour";
     ViewMode["Hour"] = "hour";
     ViewMode["QuarterDay"] = "quarterDay";
     ViewMode["HalfDay"] = "halfDay";
@@ -9213,7 +9215,7 @@ var Bar = /** @class */ (function () {
     Bar.prototype._computeX = function () {
         var _a = this._gantt.options, step = _a.step, columnWidth = _a.columnWidth;
         var x;
-        if (this._gantt.view_is([ViewMode.Hour, ViewMode.QuarterDay, ViewMode.HalfDay, ViewMode.Day])) {
+        if (this._gantt.view_is([ViewMode.QuarterHour, ViewMode.Hour, ViewMode.QuarterDay, ViewMode.HalfDay, ViewMode.Day])) {
             var diff = DateUtils.diff(this.task.start, this._gantt.minDate, "minutes");
             x = (diff / step) * (columnWidth / 60);
         }
@@ -9620,7 +9622,11 @@ var Gantt = /** @class */ (function () {
     Gantt.prototype.update_view_scale = function (view_mode) {
         this.options.viewMode = view_mode;
         // this.isHourView = false;
-        if (view_mode === ViewMode.Hour) {
+        if (view_mode === ViewMode.QuarterHour) {
+            this.options.step = 24 / 24 / 4;
+            this.options.columnWidth = 50;
+        }
+        else if (view_mode === ViewMode.Hour) {
             this.options.step = 24 / 24;
             this.options.columnWidth = 50;
         }
@@ -9654,12 +9660,12 @@ var Gantt = /** @class */ (function () {
     };
     Gantt.prototype.setup_gantt_dates = function () {
         var e_3, _a;
-        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
         this._minDate = null;
         this._maxDate = null;
         try {
-            for (var _r = __values(this.tasks), _s = _r.next(); !_s.done; _s = _r.next()) {
-                var task = _s.value;
+            for (var _t = __values(this.tasks), _u = _t.next(); !_u.done; _u = _t.next()) {
+                var task = _u.value;
                 // set global start and end date
                 if (!this.minDate || task.start < this.minDate) {
                     this._minDate = DateUtils.startOf(task.start, 'day');
@@ -9672,40 +9678,41 @@ var Gantt = /** @class */ (function () {
         catch (e_3_1) { e_3 = { error: e_3_1 }; }
         finally {
             try {
-                if (_s && !_s.done && (_a = _r.return)) _a.call(_r);
+                if (_u && !_u.done && (_a = _t.return)) _a.call(_t);
             }
             finally { if (e_3) throw e_3.error; }
         }
-        this._realMinDate = this.minDate;
-        this._realMaxDate = this.maxDate;
         switch (this.options.viewMode) {
+            case ViewMode.QuarterHour:
+                this._minDate = DateUtils.add(this.minDate, -((_b = this.options.marginBeforeStart) !== null && _b !== void 0 ? _b : 15), "minutes");
+                this._maxDate = DateUtils.add(this.maxDate, (_c = this.options.marginAfterEnd) !== null && _c !== void 0 ? _c : 15, "minutes");
             case ViewMode.Hour:
-                this._minDate = DateUtils.add(this.minDate, -((_b = this.options.marginBeforeStart) !== null && _b !== void 0 ? _b : 1), "hour");
-                this._maxDate = DateUtils.add(this.maxDate, (_c = this.options.marginAfterEnd) !== null && _c !== void 0 ? _c : 1, "hour");
+                this._minDate = DateUtils.add(this.minDate, -((_d = this.options.marginBeforeStart) !== null && _d !== void 0 ? _d : 1), "hour");
+                this._maxDate = DateUtils.add(this.maxDate, (_e = this.options.marginAfterEnd) !== null && _e !== void 0 ? _e : 1, "hour");
                 break;
             case ViewMode.QuarterDay:
-                this._minDate = DateUtils.add(this.minDate, -((_d = this.options.marginBeforeStart) !== null && _d !== void 0 ? _d : 6), "hour");
-                this._maxDate = DateUtils.add(this.maxDate, (_e = this.options.marginAfterEnd) !== null && _e !== void 0 ? _e : 6, "hour");
+                this._minDate = DateUtils.add(this.minDate, -((_f = this.options.marginBeforeStart) !== null && _f !== void 0 ? _f : 6), "hour");
+                this._maxDate = DateUtils.add(this.maxDate, (_g = this.options.marginAfterEnd) !== null && _g !== void 0 ? _g : 6, "hour");
                 break;
             case ViewMode.HalfDay:
-                this._minDate = DateUtils.add(this.minDate, -((_f = this.options.marginBeforeStart) !== null && _f !== void 0 ? _f : 12), "hour");
-                this._maxDate = DateUtils.add(this.maxDate, (_g = this.options.marginAfterEnd) !== null && _g !== void 0 ? _g : 12, "hour");
+                this._minDate = DateUtils.add(this.minDate, -((_h = this.options.marginBeforeStart) !== null && _h !== void 0 ? _h : 12), "hour");
+                this._maxDate = DateUtils.add(this.maxDate, (_j = this.options.marginAfterEnd) !== null && _j !== void 0 ? _j : 12, "hour");
                 break;
             case ViewMode.Day:
-                this._minDate = DateUtils.add(this.minDate, -((_h = this.options.marginBeforeStart) !== null && _h !== void 0 ? _h : 1), "day");
-                this._maxDate = DateUtils.add(this.maxDate, (_j = this.options.marginAfterEnd) !== null && _j !== void 0 ? _j : 1, "day");
+                this._minDate = DateUtils.add(this.minDate, -((_k = this.options.marginBeforeStart) !== null && _k !== void 0 ? _k : 1), "day");
+                this._maxDate = DateUtils.add(this.maxDate, (_l = this.options.marginAfterEnd) !== null && _l !== void 0 ? _l : 1, "day");
                 break;
             case ViewMode.Week:
-                this._minDate = DateUtils.add(this.minDate, -((_k = this.options.marginBeforeStart) !== null && _k !== void 0 ? _k : 1), "week");
-                this._maxDate = DateUtils.add(this.maxDate, (_l = this.options.marginAfterEnd) !== null && _l !== void 0 ? _l : 1, "week");
+                this._minDate = DateUtils.add(this.minDate, -((_m = this.options.marginBeforeStart) !== null && _m !== void 0 ? _m : 1), "week");
+                this._maxDate = DateUtils.add(this.maxDate, (_o = this.options.marginAfterEnd) !== null && _o !== void 0 ? _o : 1, "week");
                 break;
             case ViewMode.Month:
-                this._minDate = DateUtils.add(this.minDate, -((_m = this.options.marginBeforeStart) !== null && _m !== void 0 ? _m : 1), "month");
-                this._maxDate = DateUtils.add(this.maxDate, (_o = this.options.marginAfterEnd) !== null && _o !== void 0 ? _o : 1, "month");
+                this._minDate = DateUtils.add(this.minDate, -((_p = this.options.marginBeforeStart) !== null && _p !== void 0 ? _p : 1), "month");
+                this._maxDate = DateUtils.add(this.maxDate, (_q = this.options.marginAfterEnd) !== null && _q !== void 0 ? _q : 1, "month");
                 break;
             case ViewMode.Year:
-                this._minDate = DateUtils.add(this.minDate, -((_p = this.options.marginBeforeStart) !== null && _p !== void 0 ? _p : 1), "year");
-                this._maxDate = DateUtils.add(this.maxDate, (_q = this.options.marginAfterEnd) !== null && _q !== void 0 ? _q : 1, "year");
+                this._minDate = DateUtils.add(this.minDate, -((_r = this.options.marginBeforeStart) !== null && _r !== void 0 ? _r : 1), "year");
+                this._maxDate = DateUtils.add(this.maxDate, (_s = this.options.marginAfterEnd) !== null && _s !== void 0 ? _s : 1, "year");
                 break;
         }
     };
@@ -9733,8 +9740,6 @@ var Gantt = /** @class */ (function () {
             var columnWidth = (this.options.containerWidth - 1) / this.dates.length;
             this.options.columnWidth = columnWidth < 45 ? 45 : columnWidth;
         }
-        console.log("cur_date", cur_date);
-        console.log("dates", this.dates);
     };
     Gantt.prototype.bind_events = function () {
         this.bind_grid_click();
@@ -9854,23 +9859,24 @@ var Gantt = /** @class */ (function () {
             for (var _b = __values(this.dates), _c = _b.next(); !_c.done; _c = _b.next()) {
                 var date = _c.value;
                 var tick_class = "tick";
-                // thick tick for monday
-                if (this.view_is(ViewMode.Day) && date.getDate() === 1) {
+                if (this.view_is(ViewMode.QuarterHour) && date.getHours() === 0 && date.getMinutes() === 0) {
+                    // thick tick for first hour of day.
+                    tick_class += " thick";
+                }
+                else if (this.view_is([ViewMode.Hour, ViewMode.QuarterDay, ViewMode.HalfDay]) && date.getHours() === 0) {
+                    // thick tick for first hour of day.
                     tick_class += " thick";
                 }
-                // thick tick for first week
-                if (this.view_is(ViewMode.Week) &&
-                    date.getDate() >= 1 &&
-                    date.getDate() < 8) {
+                else if (this.view_is(ViewMode.Day) && date.getDate() === 1) {
+                    // thick tick for monday
                     tick_class += " thick";
                 }
-                // thick ticks for quarters
-                if (this.view_is(ViewMode.Month) && date.getMonth() % 3 === 0) {
+                else if (this.view_is(ViewMode.Week) && date.getDate() >= 1 && date.getDate() < 8) {
+                    // thick tick for first week
                     tick_class += " thick";
                 }
-                // Thick ticks for hours
-                if (this.view_is(ViewMode.Hour) &&
-                    date.getHours() == 0) {
+                else if (this.view_is(ViewMode.Month) && date.getMonth() % 3 === 0) {
+                    // thick ticks for quarters
                     tick_class += " thick";
                 }
                 createSVG("path", {
@@ -9910,7 +9916,7 @@ var Gantt = /** @class */ (function () {
                 for (var _b = __values(this.dates), _c = _b.next(); !_c.done; _c = _b.next()) {
                     var date = _c.value;
                     var y = (this.options.headerHeight + this.options.padding) / 2;
-                    var isToday = date.toString() == DateUtils.today();
+                    var isToday = date == DateUtils.today();
                     var isWeekend = (date.getDay() == 0 || date.getDay() == 6);
                     var className = void 0;
                     if (isToday) {
@@ -9948,19 +9954,8 @@ var Gantt = /** @class */ (function () {
     };
     Gantt.prototype.make_dates = function () {
         var dates = this.get_dates_to_draw();
-        var isHourView = this.view_is([ViewMode.Hour, ViewMode.QuarterDay, ViewMode.HalfDay]);
-        var counter = 0;
         for (var i = 0; i < dates.length; i++) {
             var date = dates[i];
-            if (isHourView && date.date >= this._realMinDate && date.date <= this._realMaxDate) {
-                createSVG("text", {
-                    x: date.lower_x,
-                    y: date.lower_y,
-                    innerHTML: "H" + counter++ * this.options.step,
-                    class: "title-1",
-                    append_to: this.layers.date,
-                });
-            }
             createSVG("text", {
                 x: date.lower_x,
                 y: date.lower_y + 20,
@@ -9968,6 +9963,15 @@ var Gantt = /** @class */ (function () {
                 class: "title-2",
                 append_to: this.layers.date,
             });
+            if (date.middle_text) {
+                createSVG("text", {
+                    x: date.middle_x,
+                    y: date.middle_y,
+                    innerHTML: date.middle_text,
+                    class: "middle-text",
+                    append_to: this.layers.date,
+                });
+            }
             if (date.upper_text) {
                 var $upper_text = createSVG("text", {
                     x: date.upper_x,
@@ -9998,67 +10002,93 @@ var Gantt = /** @class */ (function () {
             last_date = DateUtils.add(date, 1, "year");
         }
         var date_text = {
-            hourLower: DateUtils.format(date, "HH:mm", this.options.language),
-            quarterDayLower: DateUtils.format(date, "HH:mm", this.options.language),
-            halfDayLower: DateUtils.format(date, "HH:mm", this.options.language),
-            dayLower: DateUtils.format(date, "D", this.options.language),
-            weekLower: date.getMonth() !== last_date.getMonth()
+            // quarter hour
+            quarterHourUpper: date.getDate() !== last_date.getDate()
                 ? DateUtils.format(date, "D MMM", this.options.language)
-                : DateUtils.format(date, "D", this.options.language),
-            monthLower: DateUtils.format(date, "MMMM", this.options.language),
-            yearLower: DateUtils.format(date, "YYYY", this.options.language),
+                : "",
+            quarterHourLower: DateUtils.format(date, "HH:mm", this.options.language),
+            // hour
+            hourUpper: date.getDate() !== last_date.getDate()
+                ? DateUtils.format(date, "D MMM", this.options.language)
+                : "",
+            hourLower: DateUtils.format(date, "HH:mm", this.options.language),
+            // quarter day
             quarterDayUpper: date.getDate() !== last_date.getDate()
                 ? DateUtils.format(date, "D MMM", this.options.language)
                 : "",
+            quarterDayLower: DateUtils.format(date, "HH:mm", this.options.language),
+            // half day
             halfDayUpper: (date.getDate() !== last_date.getDate())
                 ? (((date.getMonth() !== last_date.getMonth()) || i < 2)
                     ? DateUtils.format(date, "D MMM", this.options.language)
                     : DateUtils.format(date, "D", this.options.language))
                 : "",
+            halfDayLower: DateUtils.format(date, "HH:mm", this.options.language),
+            // day
             dayUpper: ((date.getMonth() !== last_date.getMonth()) || i === 0)
                 ? DateUtils.format(date, "MMMM", this.options.language)
                 : "",
+            dayMiddle: DateUtils.format(date, "ddd", this.options.language),
+            dayLower: DateUtils.format(date, "D", this.options.language),
+            // week
             weekUpper: date.getMonth() !== last_date.getMonth()
                 ? DateUtils.format(date, "MMMM", this.options.language)
                 : "",
+            weekLower: date.getMonth() !== last_date.getMonth()
+                ? DateUtils.format(date, "D MMM", this.options.language)
+                : DateUtils.format(date, "D", this.options.language),
+            // month
             monthUpper: date.getFullYear() !== last_date.getFullYear()
                 ? DateUtils.format(date, "YYYY", this.options.language)
                 : "",
+            monthLower: DateUtils.format(date, "MMMM", this.options.language),
+            // year
             yearUpper: date.getFullYear() !== last_date.getFullYear()
                 ? DateUtils.format(date, "YYYY", this.options.language)
                 : "",
-            hourUpper: date.getDate() !== last_date.getDate()
-                ? DateUtils.format(date, "D MMM", this.options.language)
-                : "",
+            yearLower: DateUtils.format(date, "YYYY", this.options.language),
         };
         // Descontando 20 para adcionar uma segunda linha de informação no cabeçalho
         var base_pos = {
             x: i * this.options.columnWidth,
-            lower_y: this.options.headerHeight - 20,
             upper_y: this.options.headerHeight - 20 - 25,
+            middle_y: this.options.headerHeight - 20,
+            lower_y: this.options.headerHeight - 20,
         };
-        debugger;
         var x_pos = {
-            hourLower: this.options.columnWidth / 2,
+            quarterHourUpper: (this.dates.length < 14) ? (this.options.columnWidth) : (this.options.columnWidth * 24 / 2),
+            quarterHourMiddle: this.options.columnWidth / 2,
+            quarterHourLower: this.options.columnWidth / 2,
             hourUpper: (this.dates.length < 14) ? (this.options.columnWidth) : (this.options.columnWidth * 24 / 2),
-            quarterDayLower: this.options.columnWidth / 2,
+            hourMiddle: this.options.columnWidth / 2,
+            hourLower: this.options.columnWidth / 2,
             quarterDayUpper: this.options.columnWidth * 4 / 2,
-            halfDayLower: this.options.columnWidth / 2,
+            quarterDayMiddle: this.options.columnWidth / 2,
+            quarterDayLower: this.options.columnWidth / 2,
             halfDayUpper: this.options.columnWidth * 2 / 2,
-            dayLower: this.options.columnWidth / 2,
+            halfDayMiddle: this.options.columnWidth / 2,
+            halfDayLower: this.options.columnWidth / 2,
             dayUpper: (this.dates.length < 15) ? (this.options.columnWidth) : ((this.options.columnWidth * 30) / 2),
-            weekLower: 0,
+            dayMiddle: this.options.columnWidth / 2 - 12,
+            dayLower: this.options.columnWidth / 2,
             weekUpper: (this.options.columnWidth * 4) / 2,
+            weekMiddle: 0,
+            weekLower: 0,
+            monthUpper: (this.dates.length < 15) ? (this.options.columnWidth) : ((this.options.columnWidth * 12) / 2),
+            monthMiddle: 0,
             monthLower: this.options.columnWidth / 2,
-            monthUpper: (this.options.columnWidth * 12) / 2,
-            yearLower: this.options.columnWidth / 2,
             yearUpper: (this.options.columnWidth * 30) / 2,
+            yearMiddle: this.options.columnWidth / 2,
+            yearLower: this.options.columnWidth / 2,
         };
         return {
             upper_text: date_text[this.options.viewMode + "Upper"],
+            middle_text: date_text[this.options.viewMode + "Middle"],
             lower_text: date_text[this.options.viewMode + "Lower"],
             upper_x: base_pos.x + x_pos[this.options.viewMode + "Upper"],
             upper_y: base_pos.upper_y,
+            middle_x: base_pos.x + x_pos[this.options.viewMode + "Middle"],
+            middle_y: base_pos.middle_y,
             lower_x: base_pos.x + x_pos[this.options.viewMode + "Lower"],
             lower_y: base_pos.lower_y,
             date: date,
@@ -10350,6 +10380,7 @@ var GanttComponent = /** @class */ (function () {
     }
     GanttComponent.prototype.ngOnInit = function () {
         this._validateViewMode();
+        this._validateTasks();
     };
     GanttComponent.prototype.ngAfterViewInit = function () {
         var _this = this;
@@ -10360,7 +10391,7 @@ var GanttComponent = /** @class */ (function () {
             viewMode: this.viewMode,
             marginBeforeStart: this.marginBeforeStart,
             marginAfterEnd: this.marginAfterEnd,
-            language: "pt-BR",
+            language: "pt-br",
             allowMovement: this.allowMovement,
             hasPopup: this.hasPopup,
             containerWidth: this.containerWidth,
@@ -10404,6 +10435,7 @@ var GanttComponent = /** @class */ (function () {
     };
     GanttComponent.prototype._validateViewMode = function () {
         if (![
+            ViewMode.QuarterHour,
             ViewMode.Hour,
             ViewMode.QuarterDay,
             ViewMode.HalfDay,
@@ -10415,6 +10447,15 @@ var GanttComponent = /** @class */ (function () {
             throw new Error("Invalid gantt view mode");
         }
     };
+    GanttComponent.prototype._validateTasks = function () {
+        this.tasks.forEach(function (group) {
+            group.tasks.forEach(function (task) {
+                if (task.start > task.end) {
+                    throw new Error("invalid task. The start date must be less than the end date.");
+                }
+            });
+        });
+    };
     __decorate([
         Input()
     ], GanttComponent.prototype, "columnTitle", void 0);
@@ -10474,7 +10515,7 @@ var GanttComponent = /** @class */ (function () {
             selector: "s-gantt",
             template: "<div class=\"outer\" #outer>\n    <div #side>\n        <gantt-side-table\n            *ngIf=\"showSideTable\"\n            [tasks]=\"tasks\"\n            [columnTitle]=\"columnTitle\"\n            [multipleTaskPerLine]=\"multipleTaskPerLine\">\n        </gantt-side-table>\n    </div>\n    <svg id=\"gantt\"></svg>\n</div>\n",
             encapsulation: ViewEncapsulation.None,
-            styles: [".outer{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:start;align-items:flex-start;-ms-flex-line-pack:center;align-content:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:row;flex-direction:row}", ".gantt{border:1px solid #e0e0e0}.gantt .weekend-highlight{fill:#b8c2cc;opacity:.5;stroke:#ebeff2;stroke-width:1}.gantt .grid-background{fill:none}.gantt .grid-header,.gantt .grid-row{fill:#fff}.gantt .grid-row:nth-child(even){fill:#f5f5f5}.gantt .row-line{stroke:#ebeff2}.gantt .tick{stroke:#e0e0e0;stroke-width:.4}.gantt .tick.thick{stroke:#533a3a8c;stroke-width:.4}.gantt .today-highlight{fill:#ffe979;opacity:.5}.gantt .arrow{fill:none;stroke:#666;stroke-width:1.4}.gantt .bar{opacity:.8;stroke:#8d99a6;stroke-width:0;transition:stroke-width .3s;-webkit-user-select:none;-ms-user-select:none;user-select:none}.gantt .bar-invalid{fill:transparent;stroke:#8d99a6;stroke-dasharray:5;stroke-width:1}.gantt .bar-invalid~.bar-label{fill:#555}.gantt .bar-label{fill:#fff;text-anchor:middle;font-size:12px;font-weight:lighter}.gantt .bar-label.big{fill:#555;text-anchor:start}.gantt .bar-wrapper{cursor:pointer;outline:0}.gantt .bar-wrapper.active .bar,.gantt .bar-wrapper:hover .bar{opacity:1}.gantt .bar-wrapper.active .bar{stroke:#212533;stroke-width:2}.gantt .lower-text,.gantt .upper-text{font-size:12px;text-anchor:middle}.gantt .upper-text{fill:#555}.gantt .lower-text{fill:#333}.gantt .hide{display:none}.gantt-container{border-left:1px solid #e0e0e0;font-size:12px;overflow:auto;position:relative}.gantt-container .title-1{fill:#999;font-size:12px;font-weight:400;line-height:150%;text-anchor:middle}.gantt-container .title-2{fill:#333;font-size:14px;font-weight:400;line-height:150%;text-anchor:middle}.gantt-container .popup-wrapper{left:0;position:absolute;top:0}.gantt-container .popup-wrapper .popup{background:#0e1119;border-radius:2px;color:#fff;padding:8px;font-family:\"Open Sans\" sans-serif;line-height:150%;font-weight:400}.gantt-container .popup-wrapper .popup .wrp-title{border-bottom:1px solid #525966;padding-bottom:10px}.gantt-container .popup-wrapper .popup .wrp-title .title{font-size:14px}.gantt-container .popup-wrapper .popup .wrp-subtitle{color:#dfe2e5;padding-top:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.gantt-container .popup-wrapper .popup .wrp-subtitle .icon{margin-right:10px}.gantt-container .popup-wrapper .popup .wrp-subtitle .subtitle{font-size:12px}.gantt-container .popup-wrapper .popup .pointer{border:6px solid transparent;border-top-color:#0e1119;height:6px;margin-left:-4px;position:absolute}"]
+            styles: [".outer{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:start;align-items:flex-start;-ms-flex-line-pack:center;align-content:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:row;flex-direction:row}", ".gantt{border:1px solid #e0e0e0}.gantt .weekend-highlight{fill:#b8c2cc;opacity:.5;stroke:#ebeff2;stroke-width:1}.gantt .grid-background{fill:none}.gantt .grid-header,.gantt .grid-row{fill:#fff}.gantt .grid-row:nth-child(even){fill:#f5f5f5}.gantt .row-line{stroke:#ebeff2}.gantt .tick{stroke:#e0e0e0;stroke-width:.4}.gantt .tick.thick{stroke:#428bca;stroke-width:2}.gantt .today-highlight{fill:#ffe979;opacity:.5}.gantt .arrow{fill:none;stroke:#666;stroke-width:1.4}.gantt .bar{opacity:.8;stroke:#8d99a6;stroke-width:0;transition:stroke-width .3s;-webkit-user-select:none;-ms-user-select:none;user-select:none}.gantt .bar-invalid{fill:transparent;stroke:#8d99a6;stroke-dasharray:5;stroke-width:1}.gantt .bar-invalid~.bar-label{fill:#555}.gantt .bar-label{fill:#fff;text-anchor:middle;font-size:12px;font-weight:lighter}.gantt .bar-label.big{fill:#555;text-anchor:start}.gantt .bar-wrapper{cursor:pointer;outline:0}.gantt .bar-wrapper.active .bar,.gantt .bar-wrapper:hover .bar{opacity:1}.gantt .bar-wrapper.active .bar{stroke:#212533;stroke-width:2}.gantt .lower-text,.gantt .upper-text{font-size:12px;text-anchor:middle}.gantt .upper-text{fill:#555}.gantt .lower-text{fill:#333}.gantt .hide{display:none}.gantt-container{border-left:1px solid #e0e0e0;font-size:12px;overflow:auto;position:relative}.gantt-container .title-1{fill:#999;font-size:12px;font-weight:400;line-height:150%;text-anchor:middle}.gantt-container .title-2{fill:#333;font-size:14px;font-weight:400;line-height:150%;text-anchor:middle}.gantt-container .popup-wrapper{left:0;position:absolute;top:0}.gantt-container .popup-wrapper .popup{background:#0e1119;border-radius:2px;color:#fff;padding:8px;font-family:\"Open Sans\" sans-serif;line-height:150%;font-weight:400}.gantt-container .popup-wrapper .popup .wrp-title{border-bottom:1px solid #525966;padding-bottom:10px}.gantt-container .popup-wrapper .popup .wrp-title .title{font-size:14px}.gantt-container .popup-wrapper .popup .wrp-subtitle{color:#dfe2e5;padding-top:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.gantt-container .popup-wrapper .popup .wrp-subtitle .icon{margin-right:10px}.gantt-container .popup-wrapper .popup .wrp-subtitle .subtitle{font-size:12px}.gantt-container .popup-wrapper .popup .pointer{border:6px solid transparent;border-top-color:#0e1119;height:6px;margin-left:-4px;position:absolute}"]
         })
     ], GanttComponent);
     return GanttComponent;
@@ -10485,6 +10526,12 @@ var SideTableComponent = /** @class */ (function () {
         this.ROW_HEIGHT = 44;
         this.multipleTaskPerLine = false;
     }
+    SideTableComponent.prototype.ngOnInit = function () {
+        this._removeEmptyTasks();
+    };
+    SideTableComponent.prototype._removeEmptyTasks = function () {
+        this.tasks = this.tasks.filter(function (task) { return task.tasks.length; });
+    };
     __decorate([
         Input()
     ], SideTableComponent.prototype, "columnTitle", void 0);