@seniorsistemas/angular-components 16.13.2 → 17.0.0

package/fesm2015/seniorsistemas-angular-components.js

@@ -7975,6 +7975,1560 @@ EditableOverlayModule = __decorate([
     })
 ], EditableOverlayModule);
 
+const moment$7 = moment_;
+const YEAR = "year";
+const MONTH = "month";
+const DAY = "day";
+const HOUR = "hour";
+const MINUTE = "minute";
+const SECOND = "second";
+const MILLISECOND = "millisecond";
+class DateUtils {
+    static parse(date) {
+        return moment$7(date).toDate();
+    }
+    static toString(date, with_time = false) {
+        let result = with_time ? moment$7(date, "YYYY-MM-DD hh:mm:ss.SSS") : moment$7(date, "YYYY-MM-DD");
+        return result.toString();
+    }
+    static format(date, formatString = "YYYY-MM-DD HH:mm:ss.SSS", lang = "en") {
+        const monthName = moment$7(date)
+            .locale(lang)
+            .startOf("month")
+            .format("MMMM");
+        const monthNameCapitalized = monthName.charAt(0).toUpperCase() + monthName.slice(1);
+        const dateToFormat = moment$7(date);
+        const format_map = {
+            YYYY: dateToFormat.format("YYYY"),
+            MM: dateToFormat.format("MM"),
+            DD: dateToFormat.format("DD"),
+            HH: dateToFormat.format("HH"),
+            mm: dateToFormat.format("mm"),
+            ss: dateToFormat.format("ss"),
+            SSS: dateToFormat.format("SSS"),
+            D: dateToFormat.format("D"),
+            MMMM: monthNameCapitalized,
+            MMM: monthNameCapitalized,
+        };
+        let str = formatString;
+        const formattedValues = [];
+        Object.keys(format_map)
+            .sort((a, b) => b.length - a.length)
+            .forEach(key => {
+            if (str.includes(key)) {
+                str = str.replace(key, `$${formattedValues.length}`);
+                formattedValues.push(format_map[key]);
+            }
+        });
+        formattedValues.forEach((value, i) => {
+            str = str.replace(`$${i}`, value);
+        });
+        return str;
+    }
+    static diff(fistDate, secondDate, scale) {
+        const milliseconds = moment$7(fistDate).diff(secondDate, MILLISECOND);
+        const seconds = moment$7(fistDate).diff(secondDate, SECOND);
+        const minutes = moment$7(fistDate).diff(secondDate, MINUTE);
+        const hours = moment$7(fistDate).diff(secondDate, HOUR);
+        const days = moment$7(fistDate).diff(secondDate, DAY);
+        const months = moment$7(fistDate).diff(secondDate, MONTH);
+        const years = moment$7(fistDate).diff(secondDate, YEAR);
+        if (!scale.endsWith("s")) {
+            scale += "s";
+        }
+        return Math.floor({
+            milliseconds,
+            seconds,
+            minutes,
+            hours,
+            days,
+            months,
+            years,
+        }[scale]);
+    }
+    static today() {
+        const dateStr = moment$7().format("YYY-MM-DD");
+        return new Date(dateStr);
+    }
+    static now() {
+        return moment$7().toDate();
+    }
+    static add(date, quantity, scale) {
+        return moment$7(date).add(quantity, scale).toDate();
+    }
+    static startOf(date, scale) {
+        const scores = {
+            [YEAR]: 6,
+            [MONTH]: 5,
+            [DAY]: 4,
+            [HOUR]: 3,
+            [MINUTE]: 2,
+            [SECOND]: 1,
+            [MILLISECOND]: 0,
+        };
+        function shouldReset(_scale) {
+            const max_score = scores[scale];
+            return scores[_scale] <= max_score;
+        }
+        const vals = [
+            date.getFullYear(),
+            shouldReset(YEAR) ? 0 : date.getMonth(),
+            shouldReset(MONTH) ? 1 : date.getDate(),
+            shouldReset(DAY) ? 0 : date.getHours(),
+            shouldReset(HOUR) ? 0 : date.getMinutes(),
+            shouldReset(MINUTE) ? 0 : date.getSeconds(),
+            shouldReset(SECOND) ? 0 : date.getMilliseconds(),
+        ];
+        return new Date(vals[0], vals[1], vals[2], vals[3], vals[4], vals[5], vals[6]);
+    }
+    static clone(date) {
+        return moment$7(date).toDate();
+    }
+    static getDateValues(date) {
+        return [
+            date.getFullYear(),
+            date.getMonth(),
+            date.getDate(),
+            date.getHours(),
+            date.getMinutes(),
+            date.getSeconds(),
+            date.getMilliseconds(),
+        ];
+    }
+    static getDaysInMonth(date) {
+        return moment$7(date, "YYYY-MM").daysInMonth();
+    }
+}
+
+const $ = (expr, con) => {
+    return typeof expr === 'string'
+        ? (con || document).querySelector(expr)
+        : expr || null;
+};
+const createSVG = (tag, attrs) => {
+    const elem = document.createElementNS("http://www.w3.org/2000/svg", tag);
+    for (let attr in attrs) {
+        if (attr === "append_to") {
+            const parent = attrs.append_to;
+            parent.appendChild(elem);
+        }
+        else if (attr === "innerHTML") {
+            elem.innerHTML = attrs.innerHTML;
+        }
+        else {
+            elem.setAttribute(attr, attrs[attr]);
+        }
+    }
+    return elem;
+};
+const animateSVG = (svgElement, attr, from, to) => {
+    const animatedSvgElement = getAnimationElement(svgElement, attr, from, to);
+    if (animatedSvgElement === svgElement) {
+        // triggered 2nd time programmatically
+        // trigger artificial click event
+        const event = document.createEvent("HTMLEvents");
+        event.initEvent("click", true, true);
+        // event.eventName = 'click'; TODO: Ver porque esta propriedade não existe
+        animatedSvgElement.dispatchEvent(event);
+    }
+};
+const getAnimationElement = (svgElement, attr, from, to, dur = "0.4s", begin = "0.1s") => {
+    const animEl = svgElement.querySelector("animate");
+    if (animEl) {
+        $.attr(animEl, {
+            attributeName: attr,
+            from,
+            to,
+            dur,
+            begin: "click + " + begin,
+        }, null);
+        return svgElement;
+    }
+    const animateElement = createSVG("animate", {
+        attributeName: attr,
+        from,
+        to,
+        dur,
+        begin,
+        calcMode: "spline",
+        values: from + ";" + to,
+        keyTimes: "0; 1",
+        keySplines: cubic_bezier("ease-out"),
+    });
+    svgElement.appendChild(animateElement);
+    return svgElement;
+};
+const ɵ0 = getAnimationElement;
+const cubic_bezier = (name) => {
+    return {
+        ease: ".25 .1 .25 1",
+        linear: "0 0 1 1",
+        "ease-in": ".42 0 1 1",
+        "ease-out": "0 0 .58 1",
+        "ease-in-out": ".42 0 .58 1",
+    }[name];
+};
+const ɵ1 = cubic_bezier;
+$.on = (element, event, selector, callback) => {
+    if (!callback) {
+        callback = selector;
+        $.bind(element, event, callback);
+    }
+    else {
+        $.delegate(element, event, selector, callback);
+    }
+};
+$.off = (element, event, handler) => {
+    element.removeEventListener(event, handler);
+};
+$.bind = (element, event, callback) => {
+    event.split(/\s+/).forEach(function (event) {
+        element.addEventListener(event, callback);
+    });
+};
+$.delegate = (element, event, selector, callback) => {
+    element.addEventListener(event, function (e) {
+        const delegatedTarget = e.target.closest(selector);
+        if (delegatedTarget) {
+            e.delegatedTarget = delegatedTarget;
+            callback.call(this, e, delegatedTarget);
+        }
+    });
+};
+$.closest = (selector, element) => {
+    if (!element) {
+        return null;
+    }
+    if (element.matches(selector)) {
+        return element;
+    }
+    // TODO: Corrigir este problema
+    // return $.closest(selector, element.parentNode);
+};
+$.attr = (element, attr, value) => {
+    if (!value && typeof attr === "string") {
+        return element.getAttribute(attr);
+    }
+    if (typeof attr === "object") {
+        for (let key in attr) {
+            $.attr(element, key, attr[key]);
+        }
+        return;
+    }
+    element.setAttribute(attr, value);
+};
+
+var ViewMode;
+(function (ViewMode) {
+    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._setDefaults(gantt, task);
+        this._prepare();
+        this._draw();
+        this._bind();
+    }
+    get arrows() {
+        return this._arrows;
+    }
+    set arrows(arrows) {
+        this._arrows = arrows;
+    }
+    get task() {
+        return this._task;
+    }
+    get element() {
+        return this._element;
+    }
+    get group() {
+        return this._group;
+    }
+    updateBarPosition({ x, width }) {
+        const bar = this.element;
+        if (x) {
+            // get all x values of parent task
+            const xs = this.task.dependencies.map((dep) => {
+                return this._gantt.get_bar(dep).element.getX();
+            });
+            // child task must not go before parent
+            const valid_x = xs.reduce((prev, curr) => {
+                return x >= curr;
+            }, x);
+            if (!valid_x) {
+                width = null;
+                return;
+            }
+            this._updateAttr(bar, "x", x);
+        }
+        if (width && width >= this._gantt.options.columnWidth) {
+            this._updateAttr(bar, "width", width);
+        }
+        this._updateLabelPosition();
+        this._updateArrowPosition();
+    }
+    dateChanged() {
+        let changed = false;
+        const { newStartDate, newEndDate } = this._computeStartEndDate();
+        if (this.task.start !== newStartDate) {
+            changed = true;
+            this.task.start = newStartDate;
+        }
+        if (this.task.end !== newEndDate) {
+            changed = true;
+            this.task.end = newEndDate;
+        }
+        if (changed) {
+            this._gantt.trigger_event("onDateChange", [
+                this.task,
+                newStartDate,
+                DateUtils.add(newEndDate, -1, "second"),
+            ]);
+        }
+        ;
+    }
+    setActionCompleted() {
+        this._actionCompleted = true;
+        setTimeout(() => {
+            this._actionCompleted = false;
+        }, 1000);
+    }
+    _setDefaults(gantt, task) {
+        this._actionCompleted = false;
+        this._gantt = gantt;
+        this._task = task;
+    }
+    _prepare() {
+        this._prepareValues();
+        this._prepareHelpers();
+    }
+    _prepareValues() {
+        this._invalid = this.task.invalid;
+        this._height = this._gantt.options.barHeight;
+        this._x = this._computeX();
+        this._y = this._computeY();
+        this._cornerRadius = this._gantt.options.barCornerRadius;
+        this._duration = DateUtils.diff(this.task.end, this.task.start, "minute") / this._gantt.options.step / 60.0;
+        this._width = this._gantt.options.columnWidth * this._duration;
+        this._group = createSVG("g", {
+            class: "bar-wrapper " + (this.task.custom_class || ""),
+            "data-id": this.task.id,
+        });
+        this._barGroup = createSVG("g", {
+            class: "bar-group",
+            append_to: this.group,
+        });
+    }
+    _prepareHelpers() {
+        SVGElement.prototype.getX = function () {
+            return +this.getAttribute("x");
+        };
+        SVGElement.prototype.getY = function () {
+            return +this.getAttribute("y");
+        };
+        SVGElement.prototype.getWidth = function () {
+            return +this.getAttribute("width");
+        };
+        SVGElement.prototype.getHeight = function () {
+            return +this.getAttribute("height");
+        };
+        SVGElement.prototype.getEndX = function () {
+            return this.getX() + this.getWidth();
+        };
+    }
+    _draw() {
+        this._drawBar();
+        this._drawLabel();
+    }
+    _drawBar() {
+        this._element = createSVG("rect", {
+            x: this._x,
+            y: this._y,
+            width: this._width,
+            height: this._height,
+            rx: this._cornerRadius,
+            ry: this._cornerRadius,
+            class: "bar",
+            append_to: this._barGroup,
+            fill: this.task.color,
+        });
+        animateSVG(this.element, "width", 0, this._width);
+        if (this._invalid) {
+            this.element.classList.add("bar-invalid");
+        }
+    }
+    _drawLabel() {
+        createSVG("text", {
+            x: this._x + this._width / 2,
+            y: this._y + this._height / 2,
+            innerHTML: this.task.showTaskName ? this.task.name : "",
+            class: "bar-label",
+            append_to: this._barGroup,
+        });
+        // labels get BBox in the next tick
+        requestAnimationFrame(() => this._updateLabelPosition());
+    }
+    _bind() {
+        if (!this._invalid) {
+            this._setupClickEvent();
+        }
+    }
+    _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);
+    }
+    _showPopup() {
+        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,
+        });
+    }
+    _computeStartEndDate() {
+        const bar = this.element;
+        const xInUnits = bar.getX() / this._gantt.options.columnWidth;
+        const newStartDate = DateUtils.add(this._gantt.minDate, xInUnits * this._gantt.options.step, "hour");
+        const width_in_units = bar.getWidth() / this._gantt.options.columnWidth;
+        const newEndDate = DateUtils.add(newStartDate, width_in_units * this._gantt.options.step, "hour");
+        return { newStartDate, newEndDate };
+    }
+    _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;
+        }
+        return x;
+    }
+    _computeY() {
+        return (this._gantt.options.headerHeight +
+            this._gantt.options.padding +
+            this.task._index * (this._height + this._gantt.options.padding));
+    }
+    _updateAttr(element, attr, value) {
+        value = +value;
+        if (!isNaN(value)) {
+            element.setAttribute(attr, value);
+        }
+        return element;
+    }
+    _updateLabelPosition() {
+        const bar = this.element, label = this.group.querySelector(".bar-label");
+        if (label.getBBox().width > bar.getWidth()) {
+            label.classList.add("big");
+            label.setAttribute("x", bar.getX() + bar.getWidth() + 5);
+        }
+        else {
+            label.classList.remove("big");
+            label.setAttribute("x", bar.getX() + bar.getWidth() / 2);
+        }
+    }
+    _updateArrowPosition() {
+        this._arrows = this._arrows || [];
+        for (let arrow of this._arrows) {
+            arrow.update();
+        }
+    }
+}
+
+class Popup {
+    constructor(parent, customHtml) {
+        this.parent = parent;
+        this.customHtml = customHtml;
+        this.make();
+    }
+    show(options) {
+        if (!options.target_element) {
+            throw new Error("target_element is required to show popup");
+        }
+        if (!options.position) {
+            options.position = "left";
+        }
+        const target_element = options.target_element;
+        if (this.customHtml) {
+            let html = this.customHtml(options.task);
+            html += '<div class="pointer"></div>';
+            this.parent.innerHTML = html;
+            this.pointer = this.parent.querySelector(".pointer");
+        }
+        else {
+            // set data
+            this.title.innerHTML = options.title;
+            this.subtitle.innerHTML = options.subtitle;
+            this.parent.style.width = this.parent.clientWidth + "px";
+        }
+        // set position
+        let positionMeta;
+        if (target_element instanceof HTMLElement) {
+            positionMeta = target_element.getBoundingClientRect();
+        }
+        else if (target_element instanceof SVGElement) {
+            positionMeta = options.target_element.getBBox();
+        }
+        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)";
+            this.pointer.style.left = "-7px";
+            this.pointer.style.top = "2px";
+        }
+        // show
+        this.parent.style.opacity = 1;
+    }
+    make() {
+        this.parent.innerHTML = `
+        <div class="popup">
+            <div class="wrp-title">
+                <span class="title"></span>
+            </div>
+            <div class="wrp-subtitle">
+                <span class="icon fas fa-calendar-alt"></span>
+                <span class="subtitle"></span>
+            </div>
+            <div class="pointer"></div>
+        </div>
+        `;
+        this.hide();
+        this.title = this.parent.querySelector(".title");
+        this.subtitle = this.parent.querySelector(".subtitle");
+        this.pointer = this.parent.querySelector(".pointer");
+    }
+    hide() {
+        this.parent.style.opacity = 0;
+        this.parent.style.left = 0;
+    }
+}
+
+class Arrow {
+    constructor(gantt, fromTask, toTask) {
+        this._gantt = gantt;
+        this._fromTask = fromTask;
+        this._toTask = toTask;
+        this.calculatePath();
+        this.draw();
+    }
+    get fromTask() {
+        return this._fromTask;
+    }
+    get toTask() {
+        return this._toTask;
+    }
+    get element() {
+        return this._element;
+    }
+    update() {
+        this.calculatePath();
+        this._element.setAttribute("d", this._path);
+    }
+    calculatePath() {
+        let startX = this.fromTask.element.getX() + this.fromTask.element.getWidth() / 2;
+        const condition = () => this.toTask.element.getX() < startX + this._gantt.options.padding &&
+            startX > this.fromTask.element.getX() + this._gantt.options.padding;
+        while (condition()) {
+            startX -= 10;
+        }
+        const startY = this._gantt.options.headerHeight +
+            this._gantt.options.barHeight +
+            (this._gantt.options.padding + this._gantt.options.barHeight) *
+                this.fromTask.task._index +
+            this._gantt.options.padding;
+        const endX = this.toTask.element.getX() - this._gantt.options.padding / 2;
+        const endY = this._gantt.options.headerHeight +
+            this._gantt.options.barHeight / 2 +
+            (this._gantt.options.padding + this._gantt.options.barHeight) *
+                this.toTask.task._index +
+            this._gantt.options.padding;
+        const fromIsBelowTo = this.fromTask.task._index > this.toTask.task._index;
+        const curve = this._gantt.options.arrowCurve;
+        const clockwise = fromIsBelowTo ? 1 : 0;
+        const curveY = fromIsBelowTo ? -curve : curve;
+        const offset = fromIsBelowTo
+            ? endY + this._gantt.options.arrowCurve
+            : endY - this._gantt.options.arrowCurve;
+        this._path = `
+            M ${startX} ${startY}
+            V ${offset}
+            a ${curve} ${curve} 0 0 ${clockwise} ${curve} ${curveY}
+            L ${endX} ${endY}
+            m -5 -5
+            l 5 5
+            l -5 5`;
+        if (this.toTask.element.getX() < this.fromTask.element.getX() + this._gantt.options.padding) {
+            const down1 = this._gantt.options.padding / 2 - curve;
+            const down2 = this.toTask.element.getY() + this.toTask.element.getHeight() / 2 - curveY;
+            const left = this.toTask.element.getX() - this._gantt.options.padding;
+            this._path = `
+                M ${startX} ${startY}
+                v ${down1}
+                a ${curve} ${curve} 0 0 1 -${curve} ${curve}
+                H ${left}
+                a ${curve} ${curve} 0 0 ${clockwise} -${curve} ${curveY}
+                V ${down2}
+                a ${curve} ${curve} 0 0 ${clockwise} ${curve} ${curveY}
+                L ${endX} ${endY}
+                m -5 -5
+                l 5 5
+                l -5 5`;
+        }
+    }
+    draw() {
+        this._element = createSVG("path", {
+            d: this._path,
+            "data-from": this.fromTask.task.id,
+            "data-to": this.toTask.task.id,
+        });
+    }
+}
+
+const defaultOptions = {
+    headerHeight: 94,
+    columnWidth: 30,
+    step: 24,
+    barHeight: 20,
+    barCornerRadius: 0,
+    arrowCurve: 4,
+    padding: 24,
+    viewMode: ViewMode.Day,
+    dateFormat: "YYYY-MM-DD",
+    popupTrigger: "click",
+    customPopupHtml: null,
+    language: "en",
+};
+
+class Gantt {
+    constructor(wrapper, tasks, options) {
+        this.setup_wrapper(wrapper);
+        this.setup_options(options);
+        this.setup_tasks(tasks);
+        // initialize with default view mode
+        this.change_view_mode();
+        this.bind_events();
+    }
+    get minDate() {
+        return this._minDate;
+    }
+    get maxDate() {
+        return this._maxDate;
+    }
+    setup_wrapper(element) {
+        let svg_element, wrapper_element;
+        // CSS Selector is passed
+        if (typeof element === "string") {
+            element = document.querySelector(element);
+        }
+        // get the SVGElement
+        if (element instanceof HTMLElement) {
+            wrapper_element = element;
+            svg_element = element.querySelector("svg");
+        }
+        else if (element instanceof SVGElement) {
+            svg_element = element;
+        }
+        else {
+            throw new TypeError("Frappé Gantt only supports usage of a string CSS selector, HTML DOM element or SVG DOM element for the \'element\' parameter");
+        }
+        // svg element
+        if (!svg_element) {
+            // create it
+            this.$svg = createSVG("svg", {
+                append_to: wrapper_element,
+                class: "gantt",
+            });
+        }
+        else {
+            this.$svg = svg_element;
+            this.$svg.classList.add("gantt");
+        }
+        // wrapper element
+        this.$container = document.createElement("div");
+        this.$container.classList.add("gantt-container");
+        const parent_element = this.$svg.parentElement;
+        parent_element.appendChild(this.$container);
+        this.$container.appendChild(this.$svg);
+        // popup wrapper
+        this.popup_wrapper = document.createElement("div");
+        this.popup_wrapper.classList.add("popup-wrapper");
+        this.$container.appendChild(this.popup_wrapper);
+    }
+    setup_options(options) {
+        this.options = Object.assign({}, defaultOptions, options);
+    }
+    setup_tasks(tasks) {
+        // prepare tasks
+        this.tasks = tasks.map((task, i) => {
+            //standard colors if needed
+            task.color = task.color || '#7892A1';
+            // convert to Date objects
+            task._start = DateUtils.parse(task.start);
+            task._end = DateUtils.parse(task.end);
+            // make task invalid if duration too large
+            if (DateUtils.diff(task._end, task._start, "year") > 10) {
+                task.end = null;
+            }
+            // cache index
+            task._index = i;
+            if (typeof task._row_id === "number") {
+                task._index = task._row_id;
+            }
+            // invalid dates
+            if (!task.start && !task.end) {
+                const today = DateUtils.today();
+                task._start = today;
+                task._end = DateUtils.add(today, 2, "day");
+            }
+            if (!task.start && task.end) {
+                task._start = DateUtils.add(task._end, -2, 'day');
+            }
+            if (task.start && !task.end) {
+                task._end = DateUtils.add(task._start, 2, "day");
+            }
+            // if hours is not set, assume the last day is full day
+            // e.g: 2018-09-09 becomes 2018-09-09 23:59:59
+            const task_end_values = DateUtils.getDateValues(task._end);
+            if (task_end_values.slice(3).every((d) => d === 0)) {
+                task._end = DateUtils.add(task._end, 24, "hour");
+            }
+            // invalid flag
+            if (!task.start || !task.end) {
+                task.invalid = true;
+            }
+            // dependencies
+            if (typeof task.dependencies === "string" || !task.dependencies) {
+                let deps = [];
+                if (task.dependencies) {
+                    deps = task.dependencies
+                        .split(',')
+                        .map((d) => d.trim())
+                        .filter((d) => d);
+                }
+                task.dependencies = deps;
+            }
+            // uids
+            if (!task.id) {
+                task.id = generate_id(task);
+            }
+            return task;
+        });
+        this.setup_dependencies();
+    }
+    setup_dependencies() {
+        this.dependency_map = {};
+        for (let t of this.tasks) {
+            for (let d of t.dependencies) {
+                this.dependency_map[d] = this.dependency_map[d] || [];
+                this.dependency_map[d].push(t.id);
+            }
+        }
+    }
+    refresh(tasks) {
+        this.setup_tasks(tasks);
+        this.change_view_mode();
+    }
+    change_view_mode(mode = this.options.viewMode) {
+        this.update_view_scale(mode);
+        this.setup_dates();
+        this.render();
+        // fire viewmode_change event
+        this.trigger_event("onViewChange", [mode]);
+    }
+    update_view_scale(view_mode) {
+        this.options.viewMode = view_mode;
+        // this.isHourView = false;
+        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;
+            this.options.columnWidth = 50;
+        }
+        else if (view_mode === ViewMode.HalfDay) {
+            this.options.step = 24 / 2;
+            this.options.columnWidth = 50;
+        }
+        else if (view_mode === ViewMode.QuarterDay) {
+            this.options.step = 24 / 4;
+            this.options.columnWidth = 50;
+        }
+        else if (view_mode === ViewMode.Week) {
+            this.options.step = 24 * 7;
+            this.options.columnWidth = 140;
+        }
+        else if (view_mode === ViewMode.Month) {
+            this.options.step = 24 * 30;
+            this.options.columnWidth = 120;
+        }
+        else if (view_mode === ViewMode.Year) {
+            this.options.step = 24 * 365;
+            this.options.columnWidth = 120;
+        }
+    }
+    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;
+        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;
+            }
+            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.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");
+                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");
+                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");
+                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");
+                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");
+                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");
+                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");
+                break;
+        }
+    }
+    setup_date_values() {
+        this.dates = [];
+        let cur_date = null;
+        while (cur_date === null || cur_date < this.maxDate) {
+            if (!cur_date) {
+                cur_date = DateUtils.clone(this.minDate);
+            }
+            else {
+                if (this.view_is(ViewMode.Year)) {
+                    cur_date = DateUtils.add(cur_date, 1, "year");
+                }
+                else if (this.view_is(ViewMode.Month)) {
+                    cur_date = DateUtils.add(cur_date, 1, "month");
+                }
+                else {
+                    cur_date = DateUtils.add(cur_date, this.options.step, 'hour');
+                }
+            }
+            this.dates.push(cur_date);
+        }
+        console.log("cur_date", cur_date);
+        console.log("dates", this.dates);
+    }
+    bind_events() {
+        this.bind_grid_click();
+        this.bind_bar_events();
+    }
+    render() {
+        this.clear();
+        this.setup_layers();
+        this.make_grid();
+        this.make_dates();
+        this.make_bars();
+        this.make_arrows();
+        this.map_arrows_on_bars();
+        this.set_width();
+        this.set_scroll_position();
+    }
+    setup_layers() {
+        this.layers = {};
+        const layers = ["grid", "date", "arrow", "progress", "bar", "details"];
+        // make group layers
+        for (let layer of layers) {
+            this.layers[layer] = createSVG('g', {
+                class: layer,
+                append_to: this.$svg,
+            });
+        }
+    }
+    make_grid() {
+        this.make_grid_background();
+        this.make_grid_rows();
+        this.make_grid_header();
+        this.make_grid_highlights();
+        this.make_grid_ticks();
+    }
+    make_grid_background() {
+        const grid_width = this.dates.length * this.options.columnWidth;
+        const distinct_rows = [...new Set(this.tasks.map((x) => x._row_id))];
+        const grid_height = this.options.headerHeight +
+            this.options.padding / 2 +
+            (this.options.barHeight + this.options.padding) *
+                distinct_rows.length;
+        createSVG("rect", {
+            x: 0,
+            y: 0,
+            width: grid_width,
+            height: grid_height,
+            class: "grid-background",
+            append_to: this.layers.grid,
+        });
+        $.attr(this.$svg, {
+            height: grid_height,
+            width: "100%",
+        }, null);
+    }
+    make_grid_rows() {
+        const rows_layer = createSVG("g", { append_to: this.layers.grid });
+        const lines_layer = createSVG("g", { append_to: this.layers.grid });
+        const row_width = this.dates.length * this.options.columnWidth;
+        const row_height = this.options.barHeight + this.options.padding;
+        //TODO:  ajustar o posicionamento das linhas
+        let row_y = this.options.headerHeight + this.options.padding / 2;
+        this.tasks.forEach(_ => {
+            createSVG("rect", {
+                x: 0,
+                y: row_y,
+                width: row_width,
+                height: row_height,
+                class: "grid-row",
+                append_to: rows_layer,
+            });
+            createSVG("line", {
+                x1: 0,
+                y1: row_y + row_height,
+                x2: row_width,
+                y2: row_y + row_height,
+                class: "row-line",
+                append_to: lines_layer,
+            });
+            row_y += this.options.barHeight + this.options.padding;
+        });
+    }
+    make_grid_header() {
+        // const addIsHourView = this.isHourView ? 25 : 10
+        const header_width = this.dates.length * this.options.columnWidth;
+        const header_height = this.options.headerHeight + 10;
+        createSVG("rect", {
+            x: 0,
+            y: 0,
+            width: header_width,
+            height: header_height,
+            class: "grid-header",
+            append_to: this.layers.grid,
+        });
+    }
+    make_grid_ticks() {
+        let tick_x = 0;
+        let tick_y = this.options.headerHeight + this.options.padding / 2;
+        let tick_height = (this.options.barHeight + this.options.padding) *
+            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) {
+                tick_class += " thick";
+            }
+            // thick tick for first week
+            if (this.view_is(ViewMode.Week) &&
+                date.getDate() >= 1 &&
+                date.getDate() < 8) {
+                tick_class += " thick";
+            }
+            // thick ticks for quarters
+            if (this.view_is(ViewMode.Month) && date.getMonth() % 3 === 0) {
+                tick_class += " thick";
+            }
+            createSVG("path", {
+                d: `M ${tick_x} ${tick_y} v ${tick_height}`,
+                class: tick_class,
+                append_to: this.layers.grid,
+            });
+            if (this.view_is(ViewMode.Month)) {
+                tick_x +=
+                    (DateUtils.getDaysInMonth(date) *
+                        this.options.columnWidth) /
+                        30;
+            }
+            else {
+                tick_x += this.options.columnWidth;
+            }
+        }
+    }
+    make_grid_highlights() {
+        if (this.view_is(ViewMode.Day)) {
+            const width = this.options.columnWidth;
+            const height = (this.options.barHeight + this.options.padding) *
+                this.tasks.length +
+                this.options.headerHeight +
+                this.options.padding / 2;
+            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 isWeekend = (date.getDay() == 0 || date.getDay() == 6);
+                let className;
+                if (isToday) {
+                    className = "today-highlight";
+                    y = (this.options.headerHeight + this.options.padding) / 2;
+                }
+                else if (isWeekend) {
+                    className = "weekend-highlight";
+                }
+                const rx = 3;
+                const ry = 3;
+                if (isToday || isWeekend) {
+                    createSVG("rect", {
+                        x,
+                        y,
+                        rx,
+                        ry,
+                        width,
+                        height,
+                        class: className,
+                        append_to: this.layers.grid
+                    });
+                }
+                x += this.options.columnWidth;
+            }
+        }
+    }
+    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,
+                innerHTML: date.lower_text,
+                class: "title-2",
+                append_to: this.layers.date,
+            });
+            if (date.upper_text) {
+                const $upper_text = createSVG("text", {
+                    x: date.upper_x,
+                    y: date.upper_y,
+                    innerHTML: date.upper_text,
+                    class: "upper-text",
+                    append_to: this.layers.date,
+                });
+                // remove out-of-bound dates
+                if ($upper_text.getBBox().x2 > this.layers.grid.getBBox().width) {
+                    $upper_text.remove();
+                }
+            }
+        }
+    }
+    get_dates_to_draw() {
+        let last_date = null;
+        const dates = this.dates.map((date, i) => {
+            const d = this.get_date_info(date, last_date, i);
+            last_date = date;
+            return d;
+        });
+        return dates;
+    }
+    get_date_info(date, last_date, i) {
+        if (!last_date) {
+            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)
+                : "",
+            weekLower: date.getMonth() !== last_date.getMonth()
+                ? 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),
+            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()
+                    ? DateUtils.format(date, "D MMM", this.options.language)
+                    : DateUtils.format(date, "D", this.options.language)
+                : "",
+            dayUpper: date.getMonth() !== last_date.getMonth()
+                ? DateUtils.format(date, "MMMM", this.options.language)
+                : "",
+            weekUpper: date.getMonth() !== last_date.getMonth()
+                ? DateUtils.format(date, "MMMM", this.options.language)
+                : "",
+            monthUpper: date.getFullYear() !== last_date.getFullYear()
+                ? DateUtils.format(date, "YYYY", this.options.language)
+                : "",
+            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)
+                : "",
+        };
+        // 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,
+        };
+        const x_pos = {
+            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,
+            halfDayUpper: this.options.columnWidth * 2 / 2,
+            dayLower: this.options.columnWidth / 2,
+            dayUpper: (this.options.columnWidth * 30) / 2,
+            weekLower: 0,
+            weekUpper: (this.options.columnWidth * 4) / 2,
+            monthLower: this.options.columnWidth / 2,
+            monthUpper: (this.options.columnWidth * 12) / 2,
+            yearLower: this.options.columnWidth / 2,
+            yearUpper: (this.options.columnWidth * 30) / 2,
+        };
+        return {
+            upper_text: date_text[`${this.options.viewMode}Upper`],
+            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,
+            lower_x: base_pos.x + x_pos[`${this.options.viewMode}Lower`],
+            lower_y: base_pos.lower_y,
+            date,
+        };
+    }
+    make_bars() {
+        this.bars = this.tasks.map((task) => {
+            const bar = new Bar(this, task);
+            this.layers.bar.appendChild(bar.group);
+            return bar;
+        });
+    }
+    make_arrows() {
+        this.arrows = [];
+        for (let task of this.tasks) {
+            let arrows = [];
+            arrows = task.dependencies
+                .map((task_id) => {
+                const dependency = this.get_task(task_id);
+                if (!dependency)
+                    return;
+                const arrow = new Arrow(this, this.bars[dependency._index], // from_task
+                this.bars[task._index] // to_task
+                );
+                this.layers.arrow.appendChild(arrow.element);
+                return arrow;
+            })
+                .filter(Boolean); // filter falsy values
+            this.arrows = this.arrows.concat(arrows);
+        }
+    }
+    map_arrows_on_bars() {
+        for (let bar of this.bars) {
+            bar.arrows = this.arrows.filter((arrow) => {
+                return (arrow.fromTask.task.id === bar.task.id ||
+                    arrow.toTask.task.id === bar.task.id);
+            });
+        }
+    }
+    set_width() {
+        const cur_width = this.$svg.getBoundingClientRect().width;
+        const actual_width = this.$svg
+            .querySelector(".grid .grid-row")
+            .getAttribute("width");
+        if (cur_width < actual_width) {
+            this.$svg.setAttribute("width", actual_width);
+        }
+    }
+    set_scroll_position() {
+        const parent_element = this.$svg.parentElement;
+        if (!parent_element)
+            return;
+        const hours_before_first_task = DateUtils.diff(this.get_oldest_starting_date(), this.minDate, "hour");
+        const scroll_pos = (hours_before_first_task / this.options.step) *
+            this.options.columnWidth -
+            this.options.columnWidth;
+        parent_element.scrollLeft = scroll_pos;
+    }
+    bind_grid_click() {
+        $.on(this.$svg, this.options.popupTrigger, ".grid-row, .grid-header", () => {
+            this.unselect_all();
+            this.hide_popup();
+        });
+    }
+    bind_bar_events() {
+        let is_dragging = false;
+        let x_on_start = 0;
+        let is_resizing_left = false;
+        let is_resizing_right = false;
+        let parent_bar_id = null;
+        let bars = [];
+        this.bar_being_dragged = null;
+        function action_in_progress() {
+            return is_dragging || is_resizing_left || is_resizing_right;
+        }
+        $.on(this.$svg, "mousedown", ".bar-wrapper, .handle", (e, element) => {
+            const bar_wrapper = $.closest(".bar-wrapper", element);
+            if (element.classList.contains("left")) {
+                is_resizing_left = true;
+            }
+            else if (element.classList.contains("right")) {
+                is_resizing_right = true;
+            }
+            else if (element.classList.contains("bar-wrapper")) {
+                is_dragging = true;
+            }
+            bar_wrapper.classList.add("active");
+            x_on_start = e.offsetX;
+            parent_bar_id = bar_wrapper.getAttribute("data-id");
+            const ids = [
+                parent_bar_id,
+                ...this.get_all_dependent_tasks(parent_bar_id),
+            ];
+            bars = ids.map((id) => this.get_bar(id));
+            this.bar_being_dragged = parent_bar_id;
+            bars.forEach((bar) => {
+                const $bar = bar.element;
+                $bar.ox = $bar.getX();
+                $bar.oy = $bar.getY();
+                $bar.owidth = $bar.getWidth();
+                $bar.finaldx = 0;
+            });
+        });
+        $.on(this.$svg, "mousemove", (e) => {
+            if (!action_in_progress()) {
+                return;
+            }
+            const dx = e.offsetX - x_on_start;
+            bars.forEach((bar) => {
+                const $bar = bar.element;
+                $bar.finaldx = this.get_snap_position(dx);
+                this.hide_popup();
+                if (is_resizing_left) {
+                    if (parent_bar_id === bar.task.id) {
+                        bar.updateBarPosition({
+                            x: $bar.ox + $bar.finaldx,
+                            width: $bar.owidth - $bar.finaldx,
+                        });
+                    }
+                    else {
+                        bar.updateBarPosition({
+                            x: $bar.ox + $bar.finaldx,
+                        });
+                    }
+                }
+                else if (is_resizing_right) {
+                    if (parent_bar_id === bar.task.id) {
+                        bar.updateBarPosition({
+                            width: $bar.owidth + $bar.finaldx,
+                        });
+                    }
+                }
+                else if (is_dragging) {
+                    bar.updateBarPosition({ x: $bar.ox + $bar.finaldx });
+                }
+            });
+        }, null);
+        document.addEventListener("mouseup", (e) => {
+            if (is_dragging || is_resizing_left || is_resizing_right) {
+                bars.forEach((bar) => bar.group.classList.remove("active"));
+            }
+            is_dragging = false;
+            is_resizing_left = false;
+            is_resizing_right = false;
+        });
+        $.on(this.$svg, "mouseup", (e) => {
+            this.bar_being_dragged = null;
+            bars.forEach((bar) => {
+                const $bar = bar.element;
+                if (!$bar.finaldx)
+                    return;
+                bar.dateChanged();
+                bar.setActionCompleted();
+            });
+        }, null);
+    }
+    get_all_dependent_tasks(task_id) {
+        let out = [];
+        let to_process = [task_id];
+        while (to_process.length) {
+            const deps = to_process.reduce((acc, curr) => {
+                acc = acc.concat(this.dependency_map[curr]);
+                return acc;
+            }, []);
+            out = out.concat(deps);
+            to_process = deps.filter((d) => !to_process.includes(d));
+        }
+        return out.filter(Boolean);
+    }
+    get_snap_position(dx) {
+        let odx = dx, rem, position;
+        if (this.view_is(ViewMode.Hour)) {
+            rem = dx % (this.options.columnWidth / 6);
+            position = odx - rem + (rem < this.options.columnWidth / 12 ? 0 : this.options.columnWidth / 6);
+        }
+        else if (this.view_is(ViewMode.Week)) {
+            rem = dx % (this.options.columnWidth / 7);
+            position = odx - rem + (rem < this.options.columnWidth / 14 ? 0 : this.options.columnWidth / 7);
+        }
+        else if (this.view_is(ViewMode.Month)) {
+            rem = dx % (this.options.columnWidth / 30);
+            position = odx - rem + (rem < this.options.columnWidth / 60 ? 0 : this.options.columnWidth / 30);
+        }
+        else {
+            rem = dx % this.options.columnWidth;
+            position = odx - rem + (rem < this.options.columnWidth / 2 ? 0 : this.options.columnWidth);
+        }
+        return position;
+    }
+    unselect_all() {
+        [...this.$svg.querySelectorAll(".bar-wrapper")].forEach((el) => {
+            el.classList.remove("active");
+        });
+    }
+    view_is(modes) {
+        if (Array.isArray(modes)) {
+            return modes.some((mode) => this.options.viewMode === mode);
+        }
+        return this.options.viewMode === modes;
+    }
+    get_task(id) {
+        return this.tasks.find((task) => {
+            return task.id === id;
+        });
+    }
+    get_bar(id) {
+        return this.bars.find((bar) => {
+            return bar.task.id === id;
+        });
+    }
+    show_popup(options) {
+        if (!this.popup) {
+            this.popup = new Popup(this.popup_wrapper, this.options.customPopupHtml);
+        }
+        this.popup.show(options);
+    }
+    hide_popup() {
+        this.popup && this.popup.hide();
+    }
+    trigger_event(event, args) {
+        if (this.options[event]) {
+            this.options[event].apply(null, args);
+        }
+    }
+    get_oldest_starting_date() {
+        return this.tasks
+            .map((task) => task._start)
+            .reduce((prev_date, cur_date) => cur_date <= prev_date ? cur_date : prev_date);
+    }
+    clear() {
+        this.$svg.innerHTML = '';
+    }
+}
+function generate_id(task) {
+    return task.name + "_" + Math.random().toString(36).slice(2, 12);
+}
+
+let GanttComponent = class GanttComponent {
+    constructor() {
+        this.multipleTaskPerLine = false;
+        this.showSideTable = true;
+        this.viewMode = ViewMode.Day;
+        this.taskClicked = new EventEmitter();
+        this.taskDateChanged = new EventEmitter();
+        this.viewChanged = new EventEmitter();
+    }
+    ngOnInit() {
+        this._validateViewMode();
+    }
+    ngAfterViewInit() {
+        this._gantt = new Gantt("#gantt", this._filterTask(this.tasks), {
+            viewMode: this.viewMode,
+            marginBeforeStart: this.marginBeforeStart,
+            marginAfterEnd: this.marginAfterEnd,
+            language: "pt-BR",
+            onClick: (task) => this.taskClicked.emit(task),
+            onDateChange: (task, start, end) => this.taskDateChanged.emit({ task, start, end }),
+            onViewChange: (viewMode) => this.viewChanged.emit(viewMode),
+        });
+    }
+    ngOnChanges(changes) {
+        if (!this._gantt) {
+            return;
+        }
+        if (changes.viewMode) {
+            this._gantt.options.viewMode = changes.viewMode.currentValue;
+            this._gantt.change_view_mode();
+        }
+        if (changes.tasks) {
+            this._gantt.refresh(this._filterTask(changes.tasks.currentValue));
+        }
+    }
+    _filterTask(tasksGroups) {
+        const tasks = [];
+        if (this.multipleTaskPerLine) {
+            tasksGroups.forEach((group, index) => {
+                tasks.push(...group.tasks.map((task) => {
+                    return Object.assign(Object.assign({}, task), { _row_id: index });
+                }));
+            }, []);
+        }
+        else {
+            let i = 0;
+            tasksGroups.forEach((group) => {
+                tasks.push(...group.tasks.map((task) => {
+                    return Object.assign(Object.assign({}, task), { _row_id: i++ });
+                }));
+            }, []);
+        }
+        return tasks;
+    }
+    _validateViewMode() {
+        if (![
+            ViewMode.Hour,
+            ViewMode.QuarterDay,
+            ViewMode.HalfDay,
+            ViewMode.Day,
+            ViewMode.Week,
+            ViewMode.Month,
+            ViewMode.Year,
+        ].includes(this.viewMode)) {
+            throw new Error("Invalid gantt view mode");
+        }
+    }
+};
+__decorate([
+    Input()
+], GanttComponent.prototype, "columnTitle", void 0);
+__decorate([
+    Input()
+], GanttComponent.prototype, "multipleTaskPerLine", void 0);
+__decorate([
+    Input()
+], GanttComponent.prototype, "showSideTable", void 0);
+__decorate([
+    Input()
+], GanttComponent.prototype, "viewMode", void 0);
+__decorate([
+    Input()
+], GanttComponent.prototype, "tasks", void 0);
+__decorate([
+    Input()
+], GanttComponent.prototype, "marginBeforeStart", void 0);
+__decorate([
+    Input()
+], GanttComponent.prototype, "marginAfterEnd", void 0);
+__decorate([
+    Output()
+], GanttComponent.prototype, "taskClicked", void 0);
+__decorate([
+    Output()
+], GanttComponent.prototype, "taskDateChanged", void 0);
+__decorate([
+    Output()
+], GanttComponent.prototype, "viewChanged", 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>",
+        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}"]
+    })
+], GanttComponent);
+
+let SideTableComponent = class SideTableComponent {
+    constructor() {
+        this.ROW_HEIGHT = 44;
+        this.multipleTaskPerLine = false;
+    }
+};
+__decorate([
+    Input()
+], SideTableComponent.prototype, "columnTitle", void 0);
+__decorate([
+    Input()
+], SideTableComponent.prototype, "tasks", void 0);
+__decorate([
+    Input()
+], SideTableComponent.prototype, "multipleTaskPerLine", void 0);
+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}"]
+    })
+], SideTableComponent);
+
+let GanttModule = class GanttModule {
+};
+GanttModule = __decorate([
+    NgModule({
+        imports: [CommonModule],
+        declarations: [
+            GanttComponent,
+            SideTableComponent,
+        ],
+        exports: [GanttComponent],
+    })
+], GanttModule);
+
 let HeaderComponent = class HeaderComponent {
 };
 HeaderComponent = __decorate([
@@ -10785,7 +12339,7 @@ function getCompletionResults(context) {
     startCompletionResultsSearch(context);
 }
 let cancelLastCompletionSearch = () => { };
-const ɵ0 = cancelLastCompletionSearch;
+const ɵ0$1 = cancelLastCompletionSearch;
 let codeMirrorViewElement;
 /*
  * Starts a new completionResults's async search.
@@ -11998,5 +13552,5 @@ const fallback = {
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionModule, AccordionPanelComponent, AngularComponentsModule, AutocompleteField, BadgeColors, BadgeComponent, BadgeModule, BaseFieldComponent, BignumberField, BignumberInputDirective, BignumberInputModule, BooleanField, BooleanOptionsLabel, BreadcrumbComponent, BreadcrumbModule, Breakpoints, ButtonComponent, ButtonModule, ButtonPriority, ButtonSize, CalendarField, CalendarLocaleOptions, CalendarMaskDirective, CalendarMaskModule, ChipsField, CodeEditorModule, CollapseLinkComponent, CollapseLinkModule, ControlErrorsComponent, ControlErrorsModule, CountryPhonePickerComponent, CountryPhonePickerModule, CurrencyField, CustomFieldsComponent, CustomFieldsModule, CustomFieldsService, DEFAULT_CALENDAR_LOCALE_OPTIONS, DEFAULT_LOCALE_OPTIONS, DEFAULT_NUMBER_LOCALE_OPTIONS, DebounceUtils, DoubleClickDirective, DynamicConfig, DynamicFormComponent, DynamicFormModule, DynamicType, EditableOverlayDirective, EditableOverlayModule, EmptyStateComponent, EmptyStateModule, EnumBadgeColors, EnumColumnFieldType, EnumSeverity, ExportUtils, Field, FieldType, Fieldset, FileUploadComponent, FileUploadModule, FileValidation, FormField, GlobalSearchComponent, GlobalSearchDropdownItemComponent, GlobalSearchModule, GlobalSearchSizeEnum, HostProjectConfigsInjectionToken, ImageCropperComponent, ImageCropperModule, ImageCropperService, InfoSignDirective, InfoSignModule, Languages, LoadingStateComponent, LoadingStateDirective, LoadingStateModule, LocaleModule, LocaleOptions, LocaleService, LocalizedCurrencyPipe, LocalizedCurrencyPipeOptions, LocalizedDateImpurePipe, LocalizedDatePipe, LocalizedNumberInputDirective, LocalizedNumberInputModule, LocalizedNumberPipe, LocalizedTimeImpurePipe, LocalizedTimePipe, LongPressDirective, LookupComponent, LookupField, MaskFormatterModule, MaskFormatterPipe, MouseEventsModule, NavigationDirective, NumberAlignmentOption, NumberField, NumberInputDirective, NumberInputModule, NumberLocaleOptions, ObjectCardComponent, ObjectCardFieldComponent, ObjectCardMainComponent, ObjectCardModule, Option, Ordination, PanelComponent, PanelModule, PasswordField, PasswordStrengthComponent, PasswordStrengthDirective, PasswordStrengthModule, PasswordStrengthPositions, PasswordStrengths, ProductHeaderComponent, ProductHeaderModule, ProfilePicturePickerComponent, ProfilePicturePickerModule, ProgressBarColors, ProgressBarComponent, ProgressBarModule, RadioButtonField, RatingScaleComponent, RatingScaleModule, RationButtonOption, RowTogllerDirective, Section, SelectField, SelectOption, SidebarComponent, SidebarModule, SlidePanelComponent, SlidePanelModule, SplitButtonComponent, SplitButtonModule, SplitButtonType, StatsCardComponent, StatsCardModule, StepState, StepsComponent, StepsModule, Structure, TableFrozenPositionDirective, TableHeaderCheckboxComponent, TableHeaderCheckboxModule, TableModule, TaxCalculationLanguageConfigs, TextAreaField, TextField, Themes, ThumbnailComponent, ThumbnailModule, ThumbnailSize, TileComponent, TileModule, TimelineComponent, TimelineItem, TimelineItemSeverity, TimelineItemSize, TimelineModule, TokenListComponent, TokenListModule, TooltipModule, TooltipPosition, ValidateErrors, WorkspaceSwitchComponent, WorkspaceSwitchModule, countries, fallback, TooltipComponent as ɵa, TooltipDirective as ɵb, SelectFieldComponent as ɵba, TextAreaFieldComponent as ɵbb, TextFieldComponent as ɵbc, BooleanSwitchFieldComponent as ɵbd, PasswordFieldComponent as ɵbe, SliderFieldComponent as ɵbf, DecimalField as ɵbh, StructureModule as ɵbi, HeaderComponent as ɵbj, FooterComponent as ɵbk, NumberLocaleOptions as ɵbl, ThumbnailService as ɵbm, BorderButtonModule as ɵbn, BorderButtonComponent as ɵbo, TimelineItemModule as ɵbp, TimelineIconItemComponent as ɵbq, HorizontalTimelineModule as ɵbr, HorizontalTimelineComponent as ɵbs, VerticalTimelineModule as ɵbt, VerticalTimelineComponent as ɵbu, RangeLineComponent as ɵbv, CollapseOptionComponent as ɵbw, CollapsedItemsComponent as ɵbx, VerticalItemsComponent as ɵby, InfiniteScrollModule as ɵbz, CountryPhonePickerService as ɵc, InfiniteScrollDirective as ɵca, CustomTranslationsModule as ɵcb, CodeEditorComponent as ɵcc, CoreFacade as ɵcd, CodeMirror6Core as ɵce, LocalizedCurrencyImpurePipe as ɵd, LocalizedBignumberPipe as ɵe, LocalizedBignumberImpurePipe as ɵf, EmptyStateGoBackComponent as ɵg, FileUploadService as ɵh, InfoSignComponent as ɵi, TableColumnsComponent as ɵj, TablePagingComponent as ɵk, AutocompleteFieldComponent as ɵl, BooleanFieldComponent as ɵm, CalendarFieldComponent as ɵn, ChipsFieldComponent as ɵo, CurrencyFieldComponent as ɵp, DynamicFieldComponent as ɵq, DynamicFormDirective as ɵr, FieldsetComponent as ɵs, FileUploadComponent$1 as ɵt, LookupFieldComponent as ɵu, NumberFieldComponent as ɵv, BignumberFieldComponent as ɵw, RadioButtonComponent as ɵx, RowComponent as ɵy, SectionComponent as ɵz };
+export { AccordionComponent, AccordionModule, AccordionPanelComponent, AngularComponentsModule, AutocompleteField, BadgeColors, BadgeComponent, BadgeModule, BaseFieldComponent, BignumberField, BignumberInputDirective, BignumberInputModule, BooleanField, BooleanOptionsLabel, BreadcrumbComponent, BreadcrumbModule, Breakpoints, ButtonComponent, ButtonModule, ButtonPriority, ButtonSize, CalendarField, CalendarLocaleOptions, CalendarMaskDirective, CalendarMaskModule, ChipsField, CodeEditorModule, CollapseLinkComponent, CollapseLinkModule, ControlErrorsComponent, ControlErrorsModule, CountryPhonePickerComponent, CountryPhonePickerModule, CurrencyField, CustomFieldsComponent, CustomFieldsModule, CustomFieldsService, DEFAULT_CALENDAR_LOCALE_OPTIONS, DEFAULT_LOCALE_OPTIONS, DEFAULT_NUMBER_LOCALE_OPTIONS, DebounceUtils, DoubleClickDirective, DynamicConfig, DynamicFormComponent, DynamicFormModule, DynamicType, EditableOverlayDirective, EditableOverlayModule, EmptyStateComponent, EmptyStateModule, EnumBadgeColors, EnumColumnFieldType, EnumSeverity, ExportUtils, Field, FieldType, Fieldset, FileUploadComponent, FileUploadModule, FileValidation, FormField, GanttComponent, GanttModule, GlobalSearchComponent, GlobalSearchDropdownItemComponent, GlobalSearchModule, GlobalSearchSizeEnum, HostProjectConfigsInjectionToken, ImageCropperComponent, ImageCropperModule, ImageCropperService, InfoSignDirective, InfoSignModule, Languages, LoadingStateComponent, LoadingStateDirective, LoadingStateModule, LocaleModule, LocaleOptions, LocaleService, LocalizedCurrencyPipe, LocalizedCurrencyPipeOptions, LocalizedDateImpurePipe, LocalizedDatePipe, LocalizedNumberInputDirective, LocalizedNumberInputModule, LocalizedNumberPipe, LocalizedTimeImpurePipe, LocalizedTimePipe, LongPressDirective, LookupComponent, LookupField, MaskFormatterModule, MaskFormatterPipe, MouseEventsModule, NavigationDirective, NumberAlignmentOption, NumberField, NumberInputDirective, NumberInputModule, NumberLocaleOptions, ObjectCardComponent, ObjectCardFieldComponent, ObjectCardMainComponent, ObjectCardModule, Option, Ordination, PanelComponent, PanelModule, PasswordField, PasswordStrengthComponent, PasswordStrengthDirective, PasswordStrengthModule, PasswordStrengthPositions, PasswordStrengths, ProductHeaderComponent, ProductHeaderModule, ProfilePicturePickerComponent, ProfilePicturePickerModule, ProgressBarColors, ProgressBarComponent, ProgressBarModule, RadioButtonField, RatingScaleComponent, RatingScaleModule, RationButtonOption, RowTogllerDirective, Section, SelectField, SelectOption, SidebarComponent, SidebarModule, SlidePanelComponent, SlidePanelModule, SplitButtonComponent, SplitButtonModule, SplitButtonType, StatsCardComponent, StatsCardModule, StepState, StepsComponent, StepsModule, Structure, TableFrozenPositionDirective, TableHeaderCheckboxComponent, TableHeaderCheckboxModule, TableModule, TaxCalculationLanguageConfigs, TextAreaField, TextField, Themes, ThumbnailComponent, ThumbnailModule, ThumbnailSize, TileComponent, TileModule, TimelineComponent, TimelineItem, TimelineItemSeverity, TimelineItemSize, TimelineModule, TokenListComponent, TokenListModule, TooltipModule, TooltipPosition, ValidateErrors, ViewMode, WorkspaceSwitchComponent, WorkspaceSwitchModule, countries, fallback, TooltipComponent as ɵa, TooltipDirective as ɵb, SelectFieldComponent as ɵba, TextAreaFieldComponent as ɵbb, TextFieldComponent as ɵbc, BooleanSwitchFieldComponent as ɵbd, PasswordFieldComponent as ɵbe, SliderFieldComponent as ɵbf, DecimalField as ɵbh, SideTableComponent as ɵbi, StructureModule as ɵbj, HeaderComponent as ɵbk, FooterComponent as ɵbl, NumberLocaleOptions as ɵbm, ThumbnailService as ɵbn, BorderButtonModule as ɵbo, BorderButtonComponent as ɵbp, TimelineItemModule as ɵbq, TimelineIconItemComponent as ɵbr, HorizontalTimelineModule as ɵbs, HorizontalTimelineComponent as ɵbt, VerticalTimelineModule as ɵbu, VerticalTimelineComponent as ɵbv, RangeLineComponent as ɵbw, CollapseOptionComponent as ɵbx, CollapsedItemsComponent as ɵby, VerticalItemsComponent as ɵbz, CountryPhonePickerService as ɵc, InfiniteScrollModule as ɵca, InfiniteScrollDirective as ɵcb, CustomTranslationsModule as ɵcc, CodeEditorComponent as ɵcd, CoreFacade as ɵce, CodeMirror6Core as ɵcf, LocalizedCurrencyImpurePipe as ɵd, LocalizedBignumberPipe as ɵe, LocalizedBignumberImpurePipe as ɵf, EmptyStateGoBackComponent as ɵg, FileUploadService as ɵh, InfoSignComponent as ɵi, TableColumnsComponent as ɵj, TablePagingComponent as ɵk, AutocompleteFieldComponent as ɵl, BooleanFieldComponent as ɵm, CalendarFieldComponent as ɵn, ChipsFieldComponent as ɵo, CurrencyFieldComponent as ɵp, DynamicFieldComponent as ɵq, DynamicFormDirective as ɵr, FieldsetComponent as ɵs, FileUploadComponent$1 as ɵt, LookupFieldComponent as ɵu, NumberFieldComponent as ɵv, BignumberFieldComponent as ɵw, RadioButtonComponent as ɵx, RowComponent as ɵy, SectionComponent as ɵz };
 //# sourceMappingURL=seniorsistemas-angular-components.js.map