@seniorsistemas/angular-components 17.1.3 → 17.1.5

package/bundles/seniorsistemas-angular-components.umd.js

@@ -8883,11 +8883,12 @@
                 .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"),
@@ -9110,17 +9111,19 @@
 
 
     (function (ViewMode) {
+        ViewMode["QuarterHour"] = "quarterHour";
+        ViewMode["Hour"] = "hour";
         ViewMode["QuarterDay"] = "quarterDay";
         ViewMode["HalfDay"] = "halfDay";
         ViewMode["Day"] = "day";
         ViewMode["Week"] = "week";
         ViewMode["Month"] = "month";
         ViewMode["Year"] = "year";
-        ViewMode["Hour"] = "hour";
     })(exports.ViewMode || (exports.ViewMode = {}));
 
     var Bar = /** @class */ (function () {
         function Bar(gantt, task) {
+            this._isPopUpOpen = false;
             this._setDefaults(gantt, task);
             this._prepare();
             this._draw();
@@ -9291,38 +9294,62 @@
             }
         };
         Bar.prototype._setupClickEvent = function () {
+            //TODO
             var _this = this;
-            $.on(this.group, "focus " + this._gantt.options.popupTrigger, function (e) {
-                // just finished a move action, wait for a few seconds
-                if (!_this._actionCompleted) {
-                    _this._showPopup();
-                    _this._gantt.unselect_all();
-                    _this.group.classList.add("active");
-                }
-            }, null);
-            $.on(this.group, "dblclick", function (e) {
-                // just finished a move action, wait for a few seconds
-                if (!_this._actionCompleted) {
-                    _this._gantt.trigger_event("onClick", [_this.task]);
-                }
-            }, null);
+            if (this._gantt.options.hasPopup) {
+                $.on(this.group, "focus " + this._gantt.options.popupTrigger, function (e) {
+                    // just finished a move action, wait for a few seconds
+                    if (!_this._actionCompleted) {
+                        _this._showPopup();
+                        _this._gantt.unselect_all();
+                        _this.group.classList.add("active");
+                    }
+                }, null);
+                $.on(this.group, "dblclick", function (e) {
+                    // just finished a move action, wait for a few seconds
+                    if (!_this._actionCompleted) {
+                        _this._gantt.trigger_event("onClick", [_this.task]);
+                    }
+                }, null);
+            }
+            else {
+                $.on(this.group, "mouseenter", function (e) {
+                    if (!_this._isPopUpOpen) {
+                        _this._showPopup({
+                            x: e.clientX,
+                            y: _this.group.getBoundingClientRect().top + 30,
+                            position: 'middle'
+                        });
+                        _this._isPopUpOpen = true;
+                    }
+                }, null);
+                $.on(this.group, "mouseleave", function (e) {
+                    _this._gantt.hide_popup();
+                    _this._isPopUpOpen = false;
+                }, null);
+                $.on(this.group, "focus click", function (e) {
+                    if (!_this._actionCompleted) {
+                        _this._gantt.unselect_all();
+                        _this.group.classList.add("active");
+                        _this._gantt.trigger_event("onClick", [_this.task]);
+                    }
+                }, null);
+            }
         };
-        Bar.prototype._showPopup = function () {
+        Bar.prototype._showPopup = function (args) {
             if (this._gantt.bar_being_dragged) {
                 return;
             }
-            var formatString = this._gantt.view_is(exports.ViewMode.Hour)
-                ? "HH:ss"
-                : "MMM D";
-            var start_date = DateUtils.format(this.task.start, formatString, this._gantt.options.language);
-            var end_date = DateUtils.format(DateUtils.add(this.task.end, -1, "second"), formatString, this._gantt.options.language);
-            var subtitle = start_date + " - " + end_date;
-            this._gantt.show_popup({
-                target_element: this.element,
-                title: this.task.name,
-                subtitle: subtitle,
-                task: this.task,
-            });
+            var subtitle = {};
+            if (!this._gantt.options.showOnlyHours) {
+                subtitle.startDate = DateUtils.format(this.task.start, 'DD/MM/YYYY', this._gantt.options.language);
+                subtitle.endDate = DateUtils.format(this.task.end, 'DD/MM/YYYY', this._gantt.options.language);
+            }
+            if (!this._gantt.options.showOnlyDays) {
+                subtitle.startHour = DateUtils.format(this.task.start, 'HH:mm:ss', this._gantt.options.language);
+                subtitle.endHour = DateUtils.format(this.task.end, 'HH:mm:ss', this._gantt.options.language);
+            }
+            this._gantt.show_popup(__assign({ target_element: this.element, title: this.task.name, subtitle: subtitle, task: this.task }, args));
         };
         Bar.prototype._computeStartEndDate = function () {
             var bar = this.element;
@@ -9334,11 +9361,14 @@
         };
         Bar.prototype._computeX = function () {
             var _a = this._gantt.options, step = _a.step, columnWidth = _a.columnWidth;
-            var diff = DateUtils.diff(this.task.start, this._gantt.minDate, "hour");
-            var x = (diff / step) * columnWidth;
-            if (this._gantt.view_is(exports.ViewMode.Month)) {
-                var diff_1 = DateUtils.diff(this.task.start, this._gantt.minDate, "day");
-                x = (diff_1 * columnWidth) / 30;
+            var x;
+            if (this._gantt.view_is([exports.ViewMode.QuarterHour, exports.ViewMode.Hour, exports.ViewMode.QuarterDay, exports.ViewMode.HalfDay, exports.ViewMode.Day])) {
+                var diff = DateUtils.diff(this.task.start, this._gantt.minDate, "minutes");
+                x = (diff / step) * (columnWidth / 60);
+            }
+            else {
+                var diff = DateUtils.diff(this.task.start, this._gantt.minDate, "hour");
+                x = (diff / step) * (columnWidth);
             }
             return x;
         };
@@ -9392,6 +9422,7 @@
             this.make();
         }
         Popup.prototype.show = function (options) {
+            var _a, _b, _c, _d;
             if (!options.target_element) {
                 throw new Error("target_element is required to show popup");
             }
@@ -9399,6 +9430,7 @@
                 options.position = "left";
             }
             var target_element = options.target_element;
+            this.parent.style.display = 'block';
             if (this.customHtml) {
                 var html = this.customHtml(options.task);
                 html += '<div class="pointer"></div>';
@@ -9408,7 +9440,10 @@
             else {
                 // set data
                 this.title.innerHTML = options.title;
-                this.subtitle.innerHTML = options.subtitle;
+                this.startDate.innerHTML = (_a = options.subtitle.startDate) !== null && _a !== void 0 ? _a : '';
+                this.startHour.innerHTML = (_b = options.subtitle.startHour) !== null && _b !== void 0 ? _b : '';
+                this.endDate.innerHTML = (_c = options.subtitle.endDate) !== null && _c !== void 0 ? _c : '';
+                this.endHour.innerHTML = (_d = options.subtitle.endHour) !== null && _d !== void 0 ? _d : '';
                 this.parent.style.width = this.parent.clientWidth + "px";
             }
             // set position
@@ -9419,7 +9454,23 @@
             else if (target_element instanceof SVGElement) {
                 positionMeta = options.target_element.getBBox();
             }
-            if (options.position === 'left') {
+            if (options.position === 'middle') {
+                this.parent.style.position = 'fixed';
+                this.parent.style.top = options.y + "px";
+                this.pointer.style.transform = "rotateZ(180deg)";
+                this.pointer.style.top = "-10px";
+                if ((options.x - 17) + this.parent.offsetWidth > window.innerWidth) {
+                    this.parent.style.left = (options.x - this.parent.offsetWidth + 17) + "px";
+                    this.pointer.style.right = "16px";
+                    this.pointer.style.left = "auto";
+                }
+                else {
+                    this.parent.style.left = (options.x - 17) + "px";
+                    this.pointer.style.left = "16px";
+                    this.pointer.style.right = "auto";
+                }
+            }
+            else if (options.position === 'left') {
                 this.parent.style.left = positionMeta.x + (positionMeta.width + 10) + "px";
                 this.parent.style.top = positionMeta.y + "px";
                 this.pointer.style.transform = "rotateZ(90deg)";
@@ -9430,14 +9481,18 @@
             this.parent.style.opacity = 1;
         };
         Popup.prototype.make = function () {
-            this.parent.innerHTML = "\n        <div class=\"popup\">\n            <div class=\"wrp-title\">\n                <span class=\"title\"></span>\n            </div>\n            <div class=\"wrp-subtitle\">\n                <span class=\"icon fas fa-calendar-alt\"></span>\n                <span class=\"subtitle\"></span>\n            </div>\n            <div class=\"pointer\"></div>\n        </div>\n        ";
+            this.parent.innerHTML = "\n        <div class=\"popup\">\n            <div class=\"wrp-title\">\n                <span class=\"title\"></span>\n            </div>\n            <div class=\"wrp-subtitle\">\n                <span class=\"icon fas fa-calendar-alt\"></span>\n                <div style=\"margin-right: 15px\">\n                    <p class=\"startDate\"></p>\n                    <p class=\"startHour\"></p>\n                </div>\n                <div>\n                    <p class=\"endDate\"></p>\n                    <p class=\"endHour\"></p>\n                </div>\n            </div>\n            <div class=\"pointer\"></div>\n        </div>\n        ";
             this.hide();
             this.title = this.parent.querySelector(".title");
-            this.subtitle = this.parent.querySelector(".subtitle");
+            this.startDate = this.parent.querySelector(".startDate");
+            this.startHour = this.parent.querySelector(".startHour");
+            this.endDate = this.parent.querySelector(".endDate");
+            this.endHour = this.parent.querySelector(".endHour");
             this.pointer = this.parent.querySelector(".pointer");
         };
         Popup.prototype.hide = function () {
             this.parent.style.opacity = 0;
+            this.parent.style.display = 'none';
             this.parent.style.left = 0;
         };
         return Popup;
@@ -9535,12 +9590,16 @@
         popupTrigger: "click",
         customPopupHtml: null,
         language: "en",
+        allowMovement: true,
+        hasPopup: true,
+        showOnlyHours: false,
+        showOnlyDays: false,
     };
 
     var Gantt = /** @class */ (function () {
         function Gantt(wrapper, tasks, options) {
-            this.setup_wrapper(wrapper);
             this.setup_options(options);
+            this.setup_wrapper(wrapper);
             this.setup_tasks(tasks);
             // initialize with default view mode
             this.change_view_mode();
@@ -9592,6 +9651,9 @@
             // wrapper element
             this.$container = document.createElement("div");
             this.$container.classList.add("gantt-container");
+            if (this.options.containerWidth) {
+                this.$container.style.width = this.options.containerWidth + 'px';
+            }
             var parent_element = this.$svg.parentElement;
             parent_element.appendChild(this.$container);
             this.$container.appendChild(this.$svg);
@@ -9697,6 +9759,7 @@
         };
         Gantt.prototype.change_view_mode = function (mode) {
             if (mode === void 0) { mode = this.options.viewMode; }
+            this.setup_gantt_dates();
             this.update_view_scale(mode);
             this.setup_dates();
             this.render();
@@ -9706,10 +9769,13 @@
         Gantt.prototype.update_view_scale = function (view_mode) {
             this.options.viewMode = view_mode;
             // this.isHourView = false;
-            if (view_mode === exports.ViewMode.Hour) {
+            if (view_mode === exports.ViewMode.QuarterHour) {
+                this.options.step = 24 / 24 / 4;
+                this.options.columnWidth = 50;
+            }
+            else if (view_mode === exports.ViewMode.Hour) {
                 this.options.step = 24 / 24;
                 this.options.columnWidth = 50;
-                // this.isHourView = true;
             }
             else if (view_mode === exports.ViewMode.Day) {
                 this.options.step = 24;
@@ -9737,20 +9803,19 @@
             }
         };
         Gantt.prototype.setup_dates = function () {
-            this.setup_gantt_dates();
             this.setup_date_values();
         };
         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 = task.start;
+                        this._minDate = DateUtils.startOf(task.start, 'day');
                     }
                     if (!this.maxDate || task.end > this.maxDate) {
                         this._maxDate = task.end;
@@ -9760,40 +9825,41 @@
             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 exports.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 exports.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 exports.ViewMode.QuarterDay:
-                    this._minDate = DateUtils.add(this.minDate, -((_d = this.options.marginBeforeStart) !== null && _d !== void 0 ? _d : 12), "hour");
-                    this._maxDate = DateUtils.add(this.maxDate, (_e = this.options.marginAfterEnd) !== null && _e !== void 0 ? _e : 12, "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 exports.ViewMode.HalfDay:
-                    this._minDate = DateUtils.add(this.minDate, -((_f = this.options.marginBeforeStart) !== null && _f !== void 0 ? _f : 1), "day");
-                    this._maxDate = DateUtils.add(this.maxDate, (_g = this.options.marginAfterEnd) !== null && _g !== void 0 ? _g : 1, "day");
+                    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 exports.ViewMode.Day:
-                    this._minDate = DateUtils.add(this.minDate, -((_h = this.options.marginBeforeStart) !== null && _h !== void 0 ? _h : 3), "day");
-                    this._maxDate = DateUtils.add(this.maxDate, (_j = this.options.marginAfterEnd) !== null && _j !== void 0 ? _j : 3, "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 exports.ViewMode.Week:
-                    this._minDate = DateUtils.add(this.minDate, -((_k = this.options.marginBeforeStart) !== null && _k !== void 0 ? _k : 1), "month");
-                    this._maxDate = DateUtils.add(this.maxDate, (_l = this.options.marginAfterEnd) !== null && _l !== void 0 ? _l : 1, "month");
+                    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 exports.ViewMode.Month:
-                    this._minDate = DateUtils.add(this.minDate, -((_m = this.options.marginBeforeStart) !== null && _m !== void 0 ? _m : 1), "year");
-                    this._maxDate = DateUtils.add(this.maxDate, (_o = this.options.marginAfterEnd) !== null && _o !== void 0 ? _o : 1, "year");
+                    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 exports.ViewMode.Year:
-                    this._minDate = DateUtils.add(this.minDate, -((_p = this.options.marginBeforeStart) !== null && _p !== void 0 ? _p : 2), "year");
-                    this._maxDate = DateUtils.add(this.maxDate, (_q = this.options.marginAfterEnd) !== null && _q !== void 0 ? _q : 2, "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;
             }
         };
@@ -9817,8 +9883,10 @@
                 }
                 this.dates.push(cur_date);
             }
-            console.log("cur_date", cur_date);
-            console.log("dates", this.dates);
+            if (this.options.containerWidth) {
+                var columnWidth = (this.options.containerWidth - 1) / this.dates.length;
+                this.options.columnWidth = columnWidth < 45 ? 45 : columnWidth;
+            }
         };
         Gantt.prototype.bind_events = function () {
             this.bind_grid_click();
@@ -9866,6 +9934,9 @@
         };
         Gantt.prototype.make_grid_background = function () {
             var grid_width = this.dates.length * this.options.columnWidth;
+            if (this.options.containerWidth) {
+                grid_width = this.options.containerWidth;
+            }
             var distinct_rows = __spread(new Set(this.tasks.map(function (x) { return x._row_id; })));
             var grid_height = this.options.headerHeight +
                 this.options.padding / 2 +
@@ -9935,18 +10006,24 @@
                 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(exports.ViewMode.Day) && date.getDate() === 1) {
+                    if (this.view_is(exports.ViewMode.QuarterHour) && date.getHours() === 0 && date.getMinutes() === 0) {
+                        // thick tick for first hour of day.
+                        tick_class += " thick";
+                    }
+                    else if (this.view_is([exports.ViewMode.Hour, exports.ViewMode.QuarterDay, exports.ViewMode.HalfDay]) && date.getHours() === 0) {
+                        // thick tick for first hour of day.
+                        tick_class += " thick";
+                    }
+                    else if (this.view_is(exports.ViewMode.Day) && date.getDate() === 1) {
+                        // thick tick for monday
                         tick_class += " thick";
                     }
-                    // thick tick for first week
-                    if (this.view_is(exports.ViewMode.Week) &&
-                        date.getDate() >= 1 &&
-                        date.getDate() < 8) {
+                    else if (this.view_is(exports.ViewMode.Week) && date.getDate() >= 1 && date.getDate() < 8) {
+                        // thick tick for first week
                         tick_class += " thick";
                     }
-                    // thick ticks for quarters
-                    if (this.view_is(exports.ViewMode.Month) && date.getMonth() % 3 === 0) {
+                    else if (this.view_is(exports.ViewMode.Month) && date.getMonth() % 3 === 0) {
+                        // thick ticks for quarters
                         tick_class += " thick";
                     }
                     createSVG("path", {
@@ -9986,7 +10063,7 @@
                     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) {
@@ -10024,19 +10101,8 @@
         };
         Gantt.prototype.make_dates = function () {
             var dates = this.get_dates_to_draw();
-            var isHourView = this.view_is([exports.ViewMode.Hour, exports.ViewMode.QuarterDay, exports.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,
@@ -10044,6 +10110,15 @@
                     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,
@@ -10074,68 +10149,93 @@
                 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: date.getDate() !== last_date.getDate()
-                    ? DateUtils.format(date, "D", this.options.language)
+                // quarter hour
+                quarterHourUpper: date.getDate() !== last_date.getDate()
+                    ? DateUtils.format(date, "D MMM", this.options.language)
                     : "",
-                weekLower: date.getMonth() !== last_date.getMonth()
+                quarterHourLower: DateUtils.format(date, "HH:mm", this.options.language),
+                // hour
+                hourUpper: 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),
+                    : "",
+                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)
                     : "",
-                halfDayUpper: date.getDate() !== last_date.getDate()
-                    ? date.getMonth() !== last_date.getMonth()
+                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)
+                        : DateUtils.format(date, "D", this.options.language))
                     : "",
-                dayUpper: date.getMonth() !== last_date.getMonth()
+                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)
                     : "",
-                hour: date.getHours() !== last_date.getHours()
-                    ? DateUtils.format(date, "HH:mm", 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,
             };
             var x_pos = {
+                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),
+                hourMiddle: this.options.columnWidth / 2,
                 hourLower: this.options.columnWidth / 2,
-                hourUpper: this.options.columnWidth * 24 / 2,
-                quarterDayLower: 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,
+                halfDayMiddle: this.options.columnWidth / 2,
+                halfDayLower: this.options.columnWidth / 2,
+                dayUpper: (this.dates.length < 15) ? (this.options.columnWidth) : ((this.options.columnWidth * 30) / 2),
+                dayMiddle: this.options.columnWidth / 2 - 12,
                 dayLower: this.options.columnWidth / 2,
-                dayUpper: (this.options.columnWidth * 30) / 2,
-                weekLower: 0,
                 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,
@@ -10253,7 +10353,7 @@
                 else if (element.classList.contains("right")) {
                     is_resizing_right = true;
                 }
-                else if (element.classList.contains("bar-wrapper")) {
+                else if (element.classList.contains("bar-wrapper") && _this.options.allowMovement) {
                     is_dragging = true;
                 }
                 bar_wrapper.classList.add("active");
@@ -10307,7 +10407,7 @@
                 });
             }, null);
             document.addEventListener("mouseup", function (e) {
-                if (is_dragging || is_resizing_left || is_resizing_right) {
+                if (is_dragging || is_resizing_left || is_resizing_right || !_this.options.allowMovement) {
                     bars.forEach(function (bar) { return bar.group.classList.remove("active"); });
                 }
                 is_dragging = false;
@@ -10416,20 +10516,34 @@
             this.multipleTaskPerLine = false;
             this.showSideTable = true;
             this.viewMode = exports.ViewMode.Day;
+            this.allowMovement = true;
+            this.hasPopup = true;
+            this.fullWidth = false;
+            this.showOnlyHours = false;
+            this.showOnlyDays = false;
             this.taskClicked = new core.EventEmitter();
             this.taskDateChanged = new core.EventEmitter();
             this.viewChanged = new core.EventEmitter();
         }
         GanttComponent.prototype.ngOnInit = function () {
             this._validateViewMode();
+            this._validateTasks();
         };
         GanttComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
+            if (this.fullWidth) {
+                this.containerWidth = this.outer.nativeElement.offsetWidth - this.side.nativeElement.offsetWidth;
+            }
             this._gantt = new Gantt("#gantt", this._filterTask(this.tasks), {
                 viewMode: this.viewMode,
                 marginBeforeStart: this.marginBeforeStart,
                 marginAfterEnd: this.marginAfterEnd,
-                language: "pt-BR",
+                language: "pt-br",
+                allowMovement: this.allowMovement,
+                hasPopup: this.hasPopup,
+                containerWidth: this.containerWidth,
+                showOnlyHours: this.showOnlyHours,
+                showOnlyDays: this.showOnlyDays,
                 onClick: function (task) { return _this.taskClicked.emit(task); },
                 onDateChange: function (task, start, end) { return _this.taskDateChanged.emit({ task: task, start: start, end: end }); },
                 onViewChange: function (viewMode) { return _this.viewChanged.emit(viewMode); },
@@ -10468,6 +10582,7 @@
         };
         GanttComponent.prototype._validateViewMode = function () {
             if (![
+                exports.ViewMode.QuarterHour,
                 exports.ViewMode.Hour,
                 exports.ViewMode.QuarterDay,
                 exports.ViewMode.HalfDay,
@@ -10479,6 +10594,15 @@
                 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([
             core.Input()
         ], GanttComponent.prototype, "columnTitle", void 0);
@@ -10500,6 +10624,24 @@
         __decorate([
             core.Input()
         ], GanttComponent.prototype, "marginAfterEnd", void 0);
+        __decorate([
+            core.Input()
+        ], GanttComponent.prototype, "allowMovement", void 0);
+        __decorate([
+            core.Input()
+        ], GanttComponent.prototype, "hasPopup", void 0);
+        __decorate([
+            core.Input()
+        ], GanttComponent.prototype, "containerWidth", void 0);
+        __decorate([
+            core.Input()
+        ], GanttComponent.prototype, "fullWidth", void 0);
+        __decorate([
+            core.Input()
+        ], GanttComponent.prototype, "showOnlyHours", void 0);
+        __decorate([
+            core.Input()
+        ], GanttComponent.prototype, "showOnlyDays", void 0);
         __decorate([
             core.Output()
         ], GanttComponent.prototype, "taskClicked", void 0);
@@ -10509,12 +10651,18 @@
         __decorate([
             core.Output()
         ], GanttComponent.prototype, "viewChanged", void 0);
+        __decorate([
+            core.ViewChild('outer')
+        ], GanttComponent.prototype, "outer", void 0);
+        __decorate([
+            core.ViewChild('side')
+        ], GanttComponent.prototype, "side", void 0);
         GanttComponent = __decorate([
             core.Component({
                 selector: "s-gantt",
-                template: "<div class=\"outer\">\n    <gantt-side-table\n        *ngIf=\"showSideTable\"\n        [tasks]=\"tasks\"\n        [columnTitle]=\"columnTitle\"\n        [multipleTaskPerLine]=\"multipleTaskPerLine\">\n    </gantt-side-table>\n    <svg id=\"gantt\"></svg>\n</div>",
+                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: core.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:.2}.gantt .tick.thick{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}.gantt-container .popup-wrapper .popup .wrp-subtitle .icon{margin-right:8px}.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;
@@ -10525,6 +10673,12 @@
             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([
             core.Input()
         ], SideTableComponent.prototype, "columnTitle", void 0);
@@ -10537,8 +10691,8 @@
         SideTableComponent = __decorate([
             core.Component({
                 selector: 'gantt-side-table',
-                template: "<div class=\"side-table\">\n    <div class=\"column-title\">\n        <span>{{ columnTitle }}</span>\n    </div>\n    <div class=\"tasks\">\n        <div *ngFor=\"let task of tasks; let i = index\" class=\"task\" [ngStyle]=\"{'height.px': multipleTaskPerLine\n                ? ROW_HEIGHT\n                : ROW_HEIGHT * task.tasks.length}\">\n            <div class=\"title\">\n                {{ task.title }}\n            </div>\n            <div class=\"subtitle\">\n                {{ task.subtitle }}\n            </div>\n        </div>\n    </div>\n</div>",
-                styles: [".side-table{background:#fff;height:100%;min-width:175px}.side-table .column-title{height:106px;border:1px solid #e0e0e0;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center;padding:8px}.side-table .column-title span{font-family:\"Open Sans\" sans-serif;font-size:14px;font-weight:700;line-height:150%}.side-table .task{-ms-flex-align:center;align-items:center;background-color:#fff;border:1px solid #e0e0e0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-family:\"Open Sans\" sans-serif;font-weight:400;-ms-flex-pack:center;justify-content:center;line-height:150%;padding:5px}.side-table .task .title{color:#333;font-size:14px}.side-table .task .subtitle{color:#999;font-size:12px}"]
+                template: "<div class=\"side-table\">\n    <div class=\"column-title\">\n        <span>{{ columnTitle }}</span>\n    </div>\n    <div class=\"tasks\" >\n        <div\n            *ngFor=\"let task of tasks; let i = index\"\n            class=\"task\"\n            [ngStyle]=\"{'height.px': multipleTaskPerLine\n                    ? ROW_HEIGHT\n                    : ROW_HEIGHT * task.tasks.length}\"\n            [sTooltip]=\"task.title.length > 20 || task.subtitle.length > 20 ? '<span><strong>' + task.title + ' </strong></br><span> ' + task.subtitle + ' </span></span>' : '' \"\n            [escape]=\"false\">\n                <div class=\"title\">\n                    {{ task.title }}\n                </div>\n                <div class=\"subtitle\">\n                    {{ task.subtitle }}\n                </div>\n        </div>\n    </div>\n</div>\n",
+                styles: [".side-table{background:#fff;height:100%;min-width:175px}.side-table .column-title{height:106px;border:1px solid #e0e0e0;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center;padding:8px}.side-table .column-title span{font-family:\"Open Sans\" sans-serif;font-size:14px;font-weight:700;line-height:150%}.side-table .task{-ms-flex-align:center;align-items:center;background-color:#fff;border:1px solid #e0e0e0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-family:\"Open Sans\",sans-serif;font-weight:400;-ms-flex-pack:center;justify-content:center;line-height:150%;padding:0 5px}.side-table .task .title{color:#333;font-size:14px;max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side-table .task .subtitle{color:#999;font-size:12px;max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"]
             })
         ], SideTableComponent);
         return SideTableComponent;
@@ -10549,7 +10703,7 @@
         }
         GanttModule = __decorate([
             core.NgModule({
-                imports: [common.CommonModule],
+                imports: [common.CommonModule, TooltipModule],
                 declarations: [
                     GanttComponent,
                     SideTableComponent,