@seniorsistemas/angular-components 17.1.3 → 17.1.5

package/fesm2015/seniorsistemas-angular-components.js

@@ -8096,11 +8096,12 @@ class DateUtils {
             .startOf("month")
             .format("MMMM");
         const monthNameCapitalized = monthName.charAt(0).toUpperCase() + monthName.slice(1);
-        const dateToFormat = moment$7(date);
+        const dateToFormat = moment$7(date).locale(lang);
         const 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"),
@@ -8319,17 +8320,19 @@ $.attr = (element, attr, value) => {
 
 var ViewMode;
 (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";
 })(ViewMode || (ViewMode = {}));
 
 class Bar {
     constructor(gantt, task) {
+        this._isPopUpOpen = false;
         this._setDefaults(gantt, task);
         this._prepare();
         this._draw();
@@ -8480,37 +8483,61 @@ class Bar {
         }
     }
     _setupClickEvent() {
-        $.on(this.group, "focus " + this._gantt.options.popupTrigger, (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", (e) => {
-            // just finished a move action, wait for a few seconds
-            if (!this._actionCompleted) {
-                this._gantt.trigger_event("onClick", [this.task]);
-            }
-        }, null);
+        //TODO
+        if (this._gantt.options.hasPopup) {
+            $.on(this.group, "focus " + this._gantt.options.popupTrigger, (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", (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", (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", (e) => {
+                this._gantt.hide_popup();
+                this._isPopUpOpen = false;
+            }, null);
+            $.on(this.group, "focus click", (e) => {
+                if (!this._actionCompleted) {
+                    this._gantt.unselect_all();
+                    this.group.classList.add("active");
+                    this._gantt.trigger_event("onClick", [this.task]);
+                }
+            }, null);
+        }
     }
-    _showPopup() {
+    _showPopup(args) {
         if (this._gantt.bar_being_dragged) {
             return;
         }
-        const formatString = this._gantt.view_is(ViewMode.Hour)
-            ? "HH:ss"
-            : "MMM D";
-        const start_date = DateUtils.format(this.task.start, formatString, this._gantt.options.language);
-        const end_date = DateUtils.format(DateUtils.add(this.task.end, -1, "second"), formatString, this._gantt.options.language);
-        const subtitle = start_date + " - " + end_date;
-        this._gantt.show_popup({
-            target_element: this.element,
-            title: this.task.name,
-            subtitle: subtitle,
-            task: this.task,
-        });
+        const 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(Object.assign({ target_element: this.element, title: this.task.name, subtitle: subtitle, task: this.task }, args));
     }
     _computeStartEndDate() {
         const bar = this.element;
@@ -8522,11 +8549,14 @@ class Bar {
     }
     _computeX() {
         const { step, columnWidth } = this._gantt.options;
-        const diff = DateUtils.diff(this.task.start, this._gantt.minDate, "hour");
-        let x = (diff / step) * columnWidth;
-        if (this._gantt.view_is(ViewMode.Month)) {
-            const diff = DateUtils.diff(this.task.start, this._gantt.minDate, "day");
-            x = (diff * columnWidth) / 30;
+        let x;
+        if (this._gantt.view_is([ViewMode.QuarterHour, ViewMode.Hour, ViewMode.QuarterDay, ViewMode.HalfDay, ViewMode.Day])) {
+            const diff = DateUtils.diff(this.task.start, this._gantt.minDate, "minutes");
+            x = (diff / step) * (columnWidth / 60);
+        }
+        else {
+            const diff = DateUtils.diff(this.task.start, this._gantt.minDate, "hour");
+            x = (diff / step) * (columnWidth);
         }
         return x;
     }
@@ -8568,6 +8598,7 @@ class Popup {
         this.make();
     }
     show(options) {
+        var _a, _b, _c, _d;
         if (!options.target_element) {
             throw new Error("target_element is required to show popup");
         }
@@ -8575,6 +8606,7 @@ class Popup {
             options.position = "left";
         }
         const target_element = options.target_element;
+        this.parent.style.display = 'block';
         if (this.customHtml) {
             let html = this.customHtml(options.task);
             html += '<div class="pointer"></div>';
@@ -8584,7 +8616,10 @@ class Popup {
         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
@@ -8595,7 +8630,23 @@ class Popup {
         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)";
@@ -8613,18 +8664,29 @@ class Popup {
             </div>
             <div class="wrp-subtitle">
                 <span class="icon fas fa-calendar-alt"></span>
-                <span class="subtitle"></span>
+                <div style="margin-right: 15px">
+                    <p class="startDate"></p>
+                    <p class="startHour"></p>
+                </div>
+                <div>
+                    <p class="endDate"></p>
+                    <p class="endHour"></p>
+                </div>
             </div>
             <div class="pointer"></div>
         </div>
         `;
         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");
     }
     hide() {
         this.parent.style.opacity = 0;
+        this.parent.style.display = 'none';
         this.parent.style.left = 0;
     }
 }
@@ -8723,12 +8785,16 @@ const defaultOptions = {
     popupTrigger: "click",
     customPopupHtml: null,
     language: "en",
+    allowMovement: true,
+    hasPopup: true,
+    showOnlyHours: false,
+    showOnlyDays: false,
 };
 
 class Gantt {
     constructor(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();
@@ -8772,6 +8838,9 @@ class Gantt {
         // 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';
+        }
         const parent_element = this.$svg.parentElement;
         parent_element.appendChild(this.$container);
         this.$container.appendChild(this.$svg);
@@ -8855,6 +8924,7 @@ class Gantt {
         this.change_view_mode();
     }
     change_view_mode(mode = this.options.viewMode) {
+        this.setup_gantt_dates();
         this.update_view_scale(mode);
         this.setup_dates();
         this.render();
@@ -8864,10 +8934,13 @@ class Gantt {
     update_view_scale(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;
-            // this.isHourView = true;
         }
         else if (view_mode === ViewMode.Day) {
             this.options.step = 24;
@@ -8895,52 +8968,52 @@ class Gantt {
         }
     }
     setup_dates() {
-        this.setup_gantt_dates();
         this.setup_date_values();
     }
     setup_gantt_dates() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         this._minDate = null;
         this._maxDate = null;
         for (let task of this.tasks) {
             // 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;
             }
         }
-        this._realMinDate = this.minDate;
-        this._realMaxDate = this.maxDate;
         switch (this.options.viewMode) {
+            case ViewMode.QuarterHour:
+                this._minDate = DateUtils.add(this.minDate, -((_a = this.options.marginBeforeStart) !== null && _a !== void 0 ? _a : 15), "minutes");
+                this._maxDate = DateUtils.add(this.maxDate, (_b = this.options.marginAfterEnd) !== null && _b !== void 0 ? _b : 15, "minutes");
             case ViewMode.Hour:
-                this._minDate = DateUtils.add(this.minDate, -((_a = this.options.marginBeforeStart) !== null && _a !== void 0 ? _a : 1), "hour");
-                this._maxDate = DateUtils.add(this.maxDate, (_b = this.options.marginAfterEnd) !== null && _b !== void 0 ? _b : 1, "hour");
+                this._minDate = DateUtils.add(this.minDate, -((_c = this.options.marginBeforeStart) !== null && _c !== void 0 ? _c : 1), "hour");
+                this._maxDate = DateUtils.add(this.maxDate, (_d = this.options.marginAfterEnd) !== null && _d !== void 0 ? _d : 1, "hour");
                 break;
             case ViewMode.QuarterDay:
-                this._minDate = DateUtils.add(this.minDate, -((_c = this.options.marginBeforeStart) !== null && _c !== void 0 ? _c : 12), "hour");
-                this._maxDate = DateUtils.add(this.maxDate, (_d = this.options.marginAfterEnd) !== null && _d !== void 0 ? _d : 12, "hour");
+                this._minDate = DateUtils.add(this.minDate, -((_e = this.options.marginBeforeStart) !== null && _e !== void 0 ? _e : 6), "hour");
+                this._maxDate = DateUtils.add(this.maxDate, (_f = this.options.marginAfterEnd) !== null && _f !== void 0 ? _f : 6, "hour");
                 break;
             case ViewMode.HalfDay:
-                this._minDate = DateUtils.add(this.minDate, -((_e = this.options.marginBeforeStart) !== null && _e !== void 0 ? _e : 1), "day");
-                this._maxDate = DateUtils.add(this.maxDate, (_f = this.options.marginAfterEnd) !== null && _f !== void 0 ? _f : 1, "day");
+                this._minDate = DateUtils.add(this.minDate, -((_g = this.options.marginBeforeStart) !== null && _g !== void 0 ? _g : 12), "hour");
+                this._maxDate = DateUtils.add(this.maxDate, (_h = this.options.marginAfterEnd) !== null && _h !== void 0 ? _h : 12, "hour");
                 break;
             case ViewMode.Day:
-                this._minDate = DateUtils.add(this.minDate, -((_g = this.options.marginBeforeStart) !== null && _g !== void 0 ? _g : 3), "day");
-                this._maxDate = DateUtils.add(this.maxDate, (_h = this.options.marginAfterEnd) !== null && _h !== void 0 ? _h : 3, "day");
+                this._minDate = DateUtils.add(this.minDate, -((_j = this.options.marginBeforeStart) !== null && _j !== void 0 ? _j : 1), "day");
+                this._maxDate = DateUtils.add(this.maxDate, (_k = this.options.marginAfterEnd) !== null && _k !== void 0 ? _k : 1, "day");
                 break;
             case ViewMode.Week:
-                this._minDate = DateUtils.add(this.minDate, -((_j = this.options.marginBeforeStart) !== null && _j !== void 0 ? _j : 1), "month");
-                this._maxDate = DateUtils.add(this.maxDate, (_k = this.options.marginAfterEnd) !== null && _k !== void 0 ? _k : 1, "month");
+                this._minDate = DateUtils.add(this.minDate, -((_l = this.options.marginBeforeStart) !== null && _l !== void 0 ? _l : 1), "week");
+                this._maxDate = DateUtils.add(this.maxDate, (_m = this.options.marginAfterEnd) !== null && _m !== void 0 ? _m : 1, "week");
                 break;
             case ViewMode.Month:
-                this._minDate = DateUtils.add(this.minDate, -((_l = this.options.marginBeforeStart) !== null && _l !== void 0 ? _l : 1), "year");
-                this._maxDate = DateUtils.add(this.maxDate, (_m = this.options.marginAfterEnd) !== null && _m !== void 0 ? _m : 1, "year");
+                this._minDate = DateUtils.add(this.minDate, -((_o = this.options.marginBeforeStart) !== null && _o !== void 0 ? _o : 1), "month");
+                this._maxDate = DateUtils.add(this.maxDate, (_p = this.options.marginAfterEnd) !== null && _p !== void 0 ? _p : 1, "month");
                 break;
             case ViewMode.Year:
-                this._minDate = DateUtils.add(this.minDate, -((_o = this.options.marginBeforeStart) !== null && _o !== void 0 ? _o : 2), "year");
-                this._maxDate = DateUtils.add(this.maxDate, (_p = this.options.marginAfterEnd) !== null && _p !== void 0 ? _p : 2, "year");
+                this._minDate = DateUtils.add(this.minDate, -((_q = this.options.marginBeforeStart) !== null && _q !== void 0 ? _q : 1), "year");
+                this._maxDate = DateUtils.add(this.maxDate, (_r = this.options.marginAfterEnd) !== null && _r !== void 0 ? _r : 1, "year");
                 break;
         }
     }
@@ -8964,8 +9037,10 @@ class Gantt {
             }
             this.dates.push(cur_date);
         }
-        console.log("cur_date", cur_date);
-        console.log("dates", this.dates);
+        if (this.options.containerWidth) {
+            const columnWidth = (this.options.containerWidth - 1) / this.dates.length;
+            this.options.columnWidth = columnWidth < 45 ? 45 : columnWidth;
+        }
     }
     bind_events() {
         this.bind_grid_click();
@@ -9001,7 +9076,10 @@ class Gantt {
         this.make_grid_ticks();
     }
     make_grid_background() {
-        const grid_width = this.dates.length * this.options.columnWidth;
+        let grid_width = this.dates.length * this.options.columnWidth;
+        if (this.options.containerWidth) {
+            grid_width = this.options.containerWidth;
+        }
         const distinct_rows = [...new Set(this.tasks.map((x) => x._row_id))];
         const grid_height = this.options.headerHeight +
             this.options.padding / 2 +
@@ -9067,18 +9145,24 @@ class Gantt {
             this.tasks.length;
         for (let date of this.dates) {
             let 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";
             }
-            // thick tick for first week
-            if (this.view_is(ViewMode.Week) &&
-                date.getDate() >= 1 &&
-                date.getDate() < 8) {
+            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 ticks for quarters
-            if (this.view_is(ViewMode.Month) && date.getMonth() % 3 === 0) {
+            else if (this.view_is(ViewMode.Day) && date.getDate() === 1) {
+                // thick tick for monday
+                tick_class += " thick";
+            }
+            else if (this.view_is(ViewMode.Week) && date.getDate() >= 1 && date.getDate() < 8) {
+                // thick tick for first week
+                tick_class += " thick";
+            }
+            else if (this.view_is(ViewMode.Month) && date.getMonth() % 3 === 0) {
+                // thick ticks for quarters
                 tick_class += " thick";
             }
             createSVG("path", {
@@ -9107,7 +9191,7 @@ class Gantt {
             let x = 0;
             for (let date of this.dates) {
                 let y = (this.options.headerHeight + this.options.padding) / 2;
-                let isToday = date.toString() == DateUtils.today();
+                let isToday = date == DateUtils.today();
                 let isWeekend = (date.getDay() == 0 || date.getDay() == 6);
                 let className;
                 if (isToday) {
@@ -9137,19 +9221,8 @@ class Gantt {
     }
     make_dates() {
         const dates = this.get_dates_to_draw();
-        const isHourView = this.view_is([ViewMode.Hour, ViewMode.QuarterDay, ViewMode.HalfDay]);
-        let counter = 0;
         for (let i = 0; i < dates.length; i++) {
             const 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,
@@ -9157,6 +9230,15 @@ class Gantt {
                 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) {
                 const $upper_text = createSVG("text", {
                     x: date.upper_x,
@@ -9186,68 +9268,93 @@ class Gantt {
             last_date = DateUtils.add(date, 1, "year");
         }
         const 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
         const 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,
         };
         const 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,
@@ -9331,7 +9438,7 @@ class Gantt {
             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");
@@ -9386,7 +9493,7 @@ class Gantt {
             });
         }, null);
         document.addEventListener("mouseup", (e) => {
-            if (is_dragging || is_resizing_left || is_resizing_right) {
+            if (is_dragging || is_resizing_left || is_resizing_right || !this.options.allowMovement) {
                 bars.forEach((bar) => bar.group.classList.remove("active"));
             }
             is_dragging = false;
@@ -9490,19 +9597,33 @@ let GanttComponent = class GanttComponent {
         this.multipleTaskPerLine = false;
         this.showSideTable = true;
         this.viewMode = ViewMode.Day;
+        this.allowMovement = true;
+        this.hasPopup = true;
+        this.fullWidth = false;
+        this.showOnlyHours = false;
+        this.showOnlyDays = false;
         this.taskClicked = new EventEmitter();
         this.taskDateChanged = new EventEmitter();
         this.viewChanged = new EventEmitter();
     }
     ngOnInit() {
         this._validateViewMode();
+        this._validateTasks();
     }
     ngAfterViewInit() {
+        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: (task) => this.taskClicked.emit(task),
             onDateChange: (task, start, end) => this.taskDateChanged.emit({ task, start, end }),
             onViewChange: (viewMode) => this.viewChanged.emit(viewMode),
@@ -9541,6 +9662,7 @@ let GanttComponent = class GanttComponent {
     }
     _validateViewMode() {
         if (![
+            ViewMode.QuarterHour,
             ViewMode.Hour,
             ViewMode.QuarterDay,
             ViewMode.HalfDay,
@@ -9552,6 +9674,15 @@ let GanttComponent = class GanttComponent {
             throw new Error("Invalid gantt view mode");
         }
     }
+    _validateTasks() {
+        this.tasks.forEach(group => {
+            group.tasks.forEach(task => {
+                if (task.start > task.end) {
+                    throw new Error("invalid task. The start date must be less than the end date.");
+                }
+            });
+        });
+    }
 };
 __decorate([
     Input()
@@ -9574,6 +9705,24 @@ __decorate([
 __decorate([
     Input()
 ], GanttComponent.prototype, "marginAfterEnd", void 0);
+__decorate([
+    Input()
+], GanttComponent.prototype, "allowMovement", void 0);
+__decorate([
+    Input()
+], GanttComponent.prototype, "hasPopup", void 0);
+__decorate([
+    Input()
+], GanttComponent.prototype, "containerWidth", void 0);
+__decorate([
+    Input()
+], GanttComponent.prototype, "fullWidth", void 0);
+__decorate([
+    Input()
+], GanttComponent.prototype, "showOnlyHours", void 0);
+__decorate([
+    Input()
+], GanttComponent.prototype, "showOnlyDays", void 0);
 __decorate([
     Output()
 ], GanttComponent.prototype, "taskClicked", void 0);
@@ -9583,12 +9732,18 @@ __decorate([
 __decorate([
     Output()
 ], GanttComponent.prototype, "viewChanged", void 0);
+__decorate([
+    ViewChild('outer')
+], GanttComponent.prototype, "outer", void 0);
+__decorate([
+    ViewChild('side')
+], GanttComponent.prototype, "side", void 0);
 GanttComponent = __decorate([
     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: 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);
 
@@ -9597,6 +9752,12 @@ let SideTableComponent = class SideTableComponent {
         this.ROW_HEIGHT = 44;
         this.multipleTaskPerLine = false;
     }
+    ngOnInit() {
+        this._removeEmptyTasks();
+    }
+    _removeEmptyTasks() {
+        this.tasks = this.tasks.filter(task => task.tasks.length);
+    }
 };
 __decorate([
     Input()
@@ -9610,8 +9771,8 @@ __decorate([
 SideTableComponent = __decorate([
     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);
 
@@ -9619,7 +9780,7 @@ let GanttModule = class GanttModule {
 };
 GanttModule = __decorate([
     NgModule({
-        imports: [CommonModule],
+        imports: [CommonModule, TooltipModule],
         declarations: [
             GanttComponent,
             SideTableComponent,