@sme.up/ketchup 9.2.0 → 9.3.0

package/dist/cjs/kup-custom-task-list-header_4.cjs.entry.js

@@ -0,0 +1,1317 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8f2f4159.js');
+const kupDates = require('./kup-dates-0e59b05d.js');
+const kupPlannerTimeFormatter = require('./kup-planner-time-formatter-a74e70f0.js');
+const kupPlannerRendererHelper = require('./kup-planner-renderer-helper-c2394940.js');
+const bar_helpers = require('./bar.helpers-f46a5a83.js');
+
+const customTaskListHeaderModuleCss = ".custom-task-list-wrapper{display:flex;justify-content:space-around;max-width:330px;place-items:\"center\";text-align:center;align-items:center}.title{font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toggler{max-width:max-content;padding:0 4px;text-align:right}.switch{position:relative;display:inline-block;width:30px;height:17px}.input{opacity:0;width:0;height:0}.input:checked+.slider{background-color:#003b77}.input:checked+.slider:before{-webkit-transform:translateX(13px);-ms-transform:translateX(13px);transform:translateX(13px)}.input:focus+.slider{box-shadow:0 0 1px #003b77}.slider{-webkit-transition:0.4s;cursor:pointer;background-color:#ccc;bottom:0;border-radius:17px;left:0;position:absolute;right:0;top:0;transition:0.4s}.slider:before{-webkit-transition:0.1s;background-color:white;border-radius:50%;bottom:2px;content:\"\";height:13px;left:2px;position:absolute;transition:0.1s;width:13px}.label{font-size:12px;padding:6px}.filter{font-size:12px}";
+
+const KupCustomTaskListHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.label = '';
+        this.doubleView = false;
+        this.setDoubleView = undefined;
+        this.fontFamily = undefined;
+        this.fontSize = undefined;
+    }
+    render() {
+        return (index.h("div", { class: "custom-task-list-wrapper", style: {
+                height: '50px',
+                fontFamily: this.fontFamily,
+                fontSize: this.fontSize,
+            } }, index.h("div", { class: "title" }, index.h("span", null, this.label)), this.setDoubleView !== undefined && (index.h("div", { class: "toggler" }, index.h("label", { htmlFor: "ch2", class: "switch" }, index.h("input", { class: "input", id: "ch2", type: "checkbox", checked: this.doubleView, onClick: () => this.setDoubleView(!this.doubleView) }), index.h("span", { class: "slider" })), index.h("span", { class: "label" }, "Previsioni")))));
+    }
+};
+KupCustomTaskListHeader.style = customTaskListHeaderModuleCss;
+
+const ganttTableModuleCss = ".container{padding:0 10px;margin-right:10px}.project{background:var(--kup-background-color, #ffffff);border:1px solid var(--kup-border-color, #acacac);border-radius:4px;box-sizing:border-box;color:var(--kup-text-color, #595959);cursor:pointer;display:grid;font-weight:400;grid-template-columns:var(--grid-project-columns, 1fr 1fr 1fr);place-items:center}.project>*{font-size:14px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.project .main{font-weight:700;width:100%;padding-left:4px}.subrow{cursor:pointer;display:grid;border-width:1px;border-style:solid;border-color:#acacac;border-bottom-left-radius:4px;border-bottom-right-radius:4px;box-sizing:border-box;grid-template-columns:var(--grid-fasi-columns, 1fr 1fr 1fr);place-items:center;background:#ffffff;color:#595959;font-weight:400}.subrow>*{font-size:12px;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}.subrow:has(+.subrow),.project:has(+.subrow){border-bottom-left-radius:0;border-bottom-right-radius:0}.timeline{cursor:pointer;display:grid;border-width:1px;border-style:solid;border-color:#cbcbcb;border-radius:4px;grid-template-columns:var(--grid-fasi-columns, 1fr 1fr 1fr);place-items:center;background:#fff;color:#595959;font-weight:400;box-sizing:border-box}.timeline>*{font-size:14px;line-height:24px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.timeline .main{font-weight:700;width:100%;padding-left:4px}";
+
+const KupCustomTaskListTable = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ganttId = undefined;
+        this.tasks = [];
+        this.rowHeight = 0;
+        this.rowWidth = '';
+        this.fontFamily = '';
+        this.fontSize = '';
+        this.setSelectedTask = undefined;
+        this.onclickTaskList = undefined;
+        this.ondblclickTaskList = undefined;
+        this.oncontextmenuTaskList = undefined;
+    }
+    render() {
+        const kupDates$1 = new kupDates.KupDates();
+        return (index.h("div", { class: "container" }, this.tasks.map((task) => {
+            var _a, _b, _c;
+            return (index.h(index.Fragment, null, task.type === 'project' ? (index.h("div", { class: "project", style: {
+                    height: `${this.rowHeight}px`,
+                    width: this.rowWidth,
+                    fontFamily: this.fontFamily,
+                    fontSize: this.fontSize,
+                    gridTemplateColumns: `repeat(${task.valuesToShow.length}, 1fr)`,
+                }, onClick: () => {
+                    this.setSelectedTask(task.id);
+                    this.onclickTaskList(task.id);
+                }, onDblClick: () => {
+                    this.setSelectedTask(task.id);
+                    this.ondblclickTaskList(task.id);
+                }, onContextMenu: (e) => {
+                    e.preventDefault();
+                    this.setSelectedTask(task.id);
+                    this.oncontextmenuTaskList(e, task.id);
+                } }, (_a = task.valuesToShow) === null || _a === void 0 ? void 0 : _a.map((v, index$1) => (index.h("span", { class: index$1 === 0 ? 'main' : undefined, title: v.length > 10 ? v : undefined, key: `task_${task.id}_valuesToShow_${index$1}` }, v === '#START#'
+                ? kupDates$1.formatToLocaleSimple(task.start)
+                : v === '#END#'
+                    ? kupDates$1.formatToLocaleSimple(task.end)
+                    : v))))) : task.type === 'task' ? (index.h("div", { class: "subrow", style: {
+                    height: `${this.rowHeight}px`,
+                    width: this.rowWidth,
+                    fontFamily: this.fontFamily,
+                    fontSize: this.fontSize,
+                    gridTemplateColumns: `repeat(${task.valuesToShow.length + 1}, 1fr)`,
+                }, onClick: () => {
+                    this.setSelectedTask(task.id);
+                    this.onclickTaskList(task.id);
+                }, onDblClick: () => {
+                    this.setSelectedTask(task.id);
+                    this.ondblclickTaskList(task.id);
+                }, onContextMenu: (e) => {
+                    e.preventDefault();
+                    this.setSelectedTask(task.id);
+                    this.oncontextmenuTaskList(e, task.id);
+                } }, index.h("span", { key: `phase_${task.id}_valuesToShow_color`, style: {
+                    height: '16px',
+                    width: '16px',
+                    backgroundColor: (_b = task.styles) === null || _b === void 0 ? void 0 : _b.backgroundColor,
+                } }), (_c = task.valuesToShow) === null || _c === void 0 ? void 0 :
+                _c.map((v, index$1) => (index.h("span", { class: index$1 === 0 ? 'main' : undefined, title: v.length > 10 ? v : undefined, key: `phase_${task.id}_valuesToShow_${index$1}` }, v === '#START#'
+                    ? kupDates$1.formatToLocaleSimple(task.start)
+                    : v === '#END#'
+                        ? kupDates$1.formatToLocaleSimple(task.end)
+                        : v))))) : ((() => {
+                var _a;
+                let str = '';
+                for (let i = 0; i < task.valuesToShow.length; i++) {
+                    str += '1fr ';
+                }
+                return (index.h("div", { class: "timeline", style: {
+                        height: `${this.rowHeight}px`,
+                        width: this.rowWidth,
+                        fontFamily: this.fontFamily,
+                        fontSize: this.fontSize,
+                        '--grid-fasi-columns': str,
+                    }, onContextMenu: (e) => {
+                        e.preventDefault();
+                        this.setSelectedTask(task.id);
+                        this.oncontextmenuTaskList(e, task.id);
+                    } }, (_a = task.valuesToShow) === null || _a === void 0 ? void 0 : _a.map((v, index$1) => (index.h("span", { class: index$1 === 0
+                        ? 'main'
+                        : undefined, title: v.length > 10
+                        ? v
+                        : undefined, key: `detail_${task.id}_valuesToShow_${index$1}` }, v)))));
+            })())));
+        })));
+    }
+};
+KupCustomTaskListTable.style = ganttTableModuleCss;
+
+const kupGanttCalendarCss = ".calendarBottomText{text-anchor:middle;fill:#333;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.calendarTopTick{stroke:#e6e4e4}.calendarTopText{text-anchor:middle;fill:#555;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.calendarHeader{fill:#ffffff;stroke:#e0e0e0;stroke-width:1.4}";
+
+const KupGanttCalendar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dateSetup = undefined;
+        this.locale = undefined;
+        this.rtl = undefined;
+        this.headerHeight = undefined;
+        this.columnWidth = undefined;
+        this.fontFamily = undefined;
+        this.fontSize = undefined;
+        this.dateTimeFormatters = undefined;
+        this.singleLineHeader = false;
+        this.currentDateIndicator = undefined;
+        this.svgWidth = undefined;
+        this.simplifiedHeader = undefined;
+    }
+    //---- Lifecycle hooks ----
+    componentWillLoad() {
+        this.simplifiedHeader =
+            this.singleLineHeader && this.dateSetup.viewMode !== 'year';
+    }
+    formatYear(date) {
+        var _a, _b;
+        return ((_a = this.dateTimeFormatters) === null || _a === void 0 ? void 0 : _a.year)
+            ? (_b = this.dateTimeFormatters) === null || _b === void 0 ? void 0 : _b.year(date, this.locale)
+            : kupPlannerTimeFormatter.defaultDateTimeFormatters.year(date, this.locale);
+    }
+    formatMonth(date) {
+        var _a, _b;
+        return ((_a = this.dateTimeFormatters) === null || _a === void 0 ? void 0 : _a.month)
+            ? (_b = this.dateTimeFormatters) === null || _b === void 0 ? void 0 : _b.month(date, this.locale)
+            : kupPlannerTimeFormatter.defaultDateTimeFormatters.month(date, this.locale);
+    }
+    formatMonthAndYear(date) {
+        var _a, _b;
+        return ((_a = this.dateTimeFormatters) === null || _a === void 0 ? void 0 : _a.monthAndYear)
+            ? (_b = this.dateTimeFormatters) === null || _b === void 0 ? void 0 : _b.monthAndYear(date, this.locale)
+            : kupPlannerTimeFormatter.defaultDateTimeFormatters.monthAndYear(date, this.locale);
+    }
+    formatWeek(date) {
+        var _a, _b;
+        return ((_a = this.dateTimeFormatters) === null || _a === void 0 ? void 0 : _a.week)
+            ? (_b = this.dateTimeFormatters) === null || _b === void 0 ? void 0 : _b.week(date, this.locale)
+            : kupPlannerTimeFormatter.defaultDateTimeFormatters.week(date, this.locale);
+    }
+    formatDay(date) {
+        var _a, _b;
+        return ((_a = this.dateTimeFormatters) === null || _a === void 0 ? void 0 : _a.day)
+            ? (_b = this.dateTimeFormatters) === null || _b === void 0 ? void 0 : _b.day(date, this.locale)
+            : kupPlannerTimeFormatter.defaultDateTimeFormatters.day(date, this.locale);
+    }
+    getCalendarValuesForYear() {
+        const topValues = [];
+        const bottomValues = [];
+        const topDefaultHeight = this.headerHeight * 0.5;
+        const dates = this.dateSetup.dates;
+        for (let i = 0; i < dates.length; i++) {
+            const date = dates[i];
+            const bottomValue = this.formatYear(date);
+            bottomValues.push(index.h("text", { key: bottomValue, y: this.headerHeight * 0.8, x: this.columnWidth * i + this.columnWidth * 0.5, class: "calendarBottomText" }, bottomValue));
+            if (i === 0 || date.getFullYear() !== dates[i - 1].getFullYear()) {
+                const topValue = date.getFullYear().toString();
+                let xText;
+                if (this.rtl) {
+                    xText = (6 + i + date.getFullYear() + 1) * this.columnWidth;
+                }
+                else {
+                    xText = (6 + i - date.getFullYear()) * this.columnWidth;
+                }
+                topValues.push({
+                    key: topValue,
+                    value: topValue,
+                    x1Line: this.columnWidth * i,
+                    y1Line: 0,
+                    y2Line: this.headerHeight,
+                    xText: xText,
+                    yText: topDefaultHeight * 0.9,
+                });
+            }
+        }
+        return [topValues, bottomValues];
+    }
+    getCalendarValuesForMonth() {
+        const topValues = [];
+        const bottomValues = [];
+        const topDefaultHeight = this.headerHeight * 0.5;
+        const dates = this.dateSetup.dates;
+        for (let i = 0; i < dates.length; i++) {
+            const date = dates[i];
+            const bottomValue = this.formatMonth(date);
+            bottomValues.push(index.h("text", { key: bottomValue + date.getFullYear(), y: this.headerHeight * 0.8, x: this.columnWidth * i + this.columnWidth * 0.5, class: "calendarBottomText" }, bottomValue));
+            if (i === 0 || date.getFullYear() !== dates[i - 1].getFullYear()) {
+                const topValue = this.formatYear(date);
+                let xText;
+                if (this.rtl) {
+                    xText = (6 + i + date.getMonth() + 1) * this.columnWidth;
+                }
+                else {
+                    xText = (6 + i - date.getMonth()) * this.columnWidth;
+                }
+                topValues.push({
+                    key: topValue,
+                    value: topValue,
+                    x1Line: this.columnWidth * i,
+                    y1Line: 0,
+                    y2Line: topDefaultHeight,
+                    xText: xText,
+                    yText: topDefaultHeight * 0.9,
+                });
+            }
+        }
+        return [topValues, bottomValues];
+    }
+    getCalendarValuesForWeek() {
+        const topValues = [];
+        const bottomValues = [];
+        let weeksCount = 1;
+        const topDefaultHeight = this.headerHeight * 0.5;
+        const dates = this.dateSetup.dates;
+        for (let i = dates.length - 1; i >= 0; i--) {
+            const date = dates[i];
+            let topValue = '';
+            if (i === 0 || date.getMonth() !== dates[i - 1].getMonth()) {
+                // top
+                topValue = this.formatMonthAndYear(date);
+            }
+            // bottom
+            const bottomValue = this.formatWeek(date);
+            bottomValues.push(index.h("text", { key: date.getTime(), y: this.headerHeight * 0.8, x: this.columnWidth * (i + +this.rtl), class: "calendarBottomText" }, bottomValue));
+            if (topValue) {
+                // if last day is new month
+                if (i !== dates.length - 1) {
+                    topValues.push({
+                        key: topValue,
+                        value: topValue,
+                        x1Line: this.columnWidth * i +
+                            weeksCount * this.columnWidth,
+                        y1Line: 0,
+                        y2Line: topDefaultHeight,
+                        xText: this.columnWidth * i +
+                            this.columnWidth * weeksCount * 0.5,
+                        yText: topDefaultHeight * 0.9,
+                    });
+                }
+                weeksCount = 0;
+            }
+            weeksCount++;
+        }
+        return [topValues, bottomValues];
+    }
+    getCalendarValuesForDay() {
+        const topValues = [];
+        const bottomValues = [];
+        const topDefaultHeight = this.headerHeight * 0.5;
+        const dates = this.dateSetup.dates;
+        for (let i = 0; i < dates.length; i++) {
+            const date = dates[i];
+            const bottomValue = this.formatDay(date);
+            bottomValues.push(index.h("text", { key: date.getTime(), y: this.headerHeight * 0.8, x: this.columnWidth * i + this.columnWidth * 0.5, class: "calendarBottomText" }, bottomValue));
+            if (i + 1 !== dates.length &&
+                date.getMonth() !== dates[i + 1].getMonth()) {
+                const topValue = this.formatMonth(date);
+                topValues.push({
+                    key: topValue + date.getFullYear(),
+                    value: topValue,
+                    x1Line: this.columnWidth * (i + 1),
+                    y1Line: 0,
+                    y2Line: topDefaultHeight,
+                    xText: this.columnWidth * (i + 1) -
+                        kupPlannerTimeFormatter.getDaysInMonth(date.getMonth(), date.getFullYear()) *
+                            this.columnWidth *
+                            0.5,
+                    yText: topDefaultHeight * 0.9,
+                });
+            }
+        }
+        return [topValues, bottomValues];
+    }
+    getTopAndBottomValues() {
+        switch (this.dateSetup.viewMode) {
+            case 'day':
+                return this.getCalendarValuesForDay();
+            case 'week':
+                return this.getCalendarValuesForWeek();
+            case 'month':
+                return this.getCalendarValuesForMonth();
+            case 'year':
+                return this.getCalendarValuesForYear();
+        }
+    }
+    render() {
+        this.simplifiedHeader =
+            this.singleLineHeader && this.dateSetup.viewMode !== 'year';
+        const [topValues, bottomValues] = this.getTopAndBottomValues();
+        return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: this.svgWidth, height: this.headerHeight }, index.h("g", { class: "calendar", "font-size": this.fontSize, "font-family": this.fontFamily }, index.h("rect", { x: 0, y: 0, width: this.columnWidth * this.dateSetup.dates.length, height: this.headerHeight, class: "calendarHeader" }), this.simplifiedHeader ? null : bottomValues, this.simplifiedHeader
+            ? topValues.map((topValue) => (index.h("g", { class: "calendarTop" }, index.h("line", { x1: topValue.x1Line, y1: topValue.y2Line * 2, x2: topValue.x1Line, y2: topValue.y2Line, class: "calendarTopTick", key: topValue.value + 'line' }), index.h("text", { key: topValue.value + 'text', y: topValue.yText, x: topValue.xText, class: "calendarTopText" }, topValue.value))))
+            : topValues.map((topValue) => (index.h("g", { class: "calendarTop" }, index.h("line", { x1: topValue.x1Line, y1: topValue.y1Line, x2: topValue.x1Line, y2: topValue.y2Line, class: "calendarTopTick", key: topValue.value + 'line' }), index.h("text", { key: topValue.value + 'text', y: topValue.yText, x: topValue.xText, class: "calendarTopText" }, topValue.value)))), this.currentDateIndicator && (
+        // current date indicator
+        index.h("circle", { fill: this.currentDateIndicator.color, cx: this.currentDateIndicator.x + 2.5, cy: this.headerHeight - 8, r: "8" })))));
+    }
+};
+KupGanttCalendar.style = kupGanttCalendarCss;
+
+var hexToCssFilter = kupDates.createCommonjsModule(function (module, exports) {
+(function (global, factory) {
+    factory(exports) ;
+}(kupDates.commonjsGlobal, (function (exports) {
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    function __read(o, n) {
+        var m = typeof Symbol === "function" && o[Symbol.iterator];
+        if (!m) return o;
+        var i = m.call(o), r, ar = [], e;
+        try {
+            while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+        }
+        catch (error) { e = { error: error }; }
+        finally {
+            try {
+                if (r && !r.done && (m = i["return"])) m.call(i);
+            }
+            finally { if (e) throw e.error; }
+        }
+        return ar;
+    }
+
+    var Color = /** @class */ (function () {
+        function Color(r, g, b) {
+            this.r = 0;
+            this.g = 0;
+            this.b = 0;
+            this.set(r, g, b);
+        }
+        Color.prototype.set = function (r, g, b) {
+            this.r = this.clamp(r);
+            this.g = this.clamp(g);
+            this.b = this.clamp(b);
+        };
+        /**
+         * Applying cals to get CSS filter for hue-rotate
+         *
+         * @param {number} [angle=0]
+         * @memberof Color
+         */
+        Color.prototype.hueRotate = function (angle) {
+            if (angle === void 0) { angle = 0; }
+            angle = (angle / 180) * Math.PI;
+            var sin = Math.sin(angle);
+            var cos = Math.cos(angle);
+            this.multiply([
+                0.213 + cos * 0.787 - sin * 0.213,
+                0.715 - cos * 0.715 - sin * 0.715,
+                0.072 - cos * 0.072 + sin * 0.928,
+                0.213 - cos * 0.213 + sin * 0.143,
+                0.715 + cos * 0.285 + sin * 0.14,
+                0.072 - cos * 0.072 - sin * 0.283,
+                0.213 - cos * 0.213 - sin * 0.787,
+                0.715 - cos * 0.715 + sin * 0.715,
+                0.072 + cos * 0.928 + sin * 0.072,
+            ]);
+        };
+        /**
+         * Applying cals to get CSS filter for grayscale
+         *
+         * @param {number} [value=1]
+         * @memberof Color
+         */
+        Color.prototype.grayscale = function (value) {
+            if (value === void 0) { value = 1; }
+            this.multiply([
+                0.2126 + 0.7874 * (1 - value),
+                0.7152 - 0.7152 * (1 - value),
+                0.0722 - 0.0722 * (1 - value),
+                0.2126 - 0.2126 * (1 - value),
+                0.7152 + 0.2848 * (1 - value),
+                0.0722 - 0.0722 * (1 - value),
+                0.2126 - 0.2126 * (1 - value),
+                0.7152 - 0.7152 * (1 - value),
+                0.0722 + 0.9278 * (1 - value),
+            ]);
+        };
+        /**
+         * Applying cals to get CSS filter for sepia
+         *
+         * @param {number} [value=1]
+         * @memberof Color
+         */
+        Color.prototype.sepia = function (value) {
+            if (value === void 0) { value = 1; }
+            this.multiply([
+                0.393 + 0.607 * (1 - value),
+                0.769 - 0.769 * (1 - value),
+                0.189 - 0.189 * (1 - value),
+                0.349 - 0.349 * (1 - value),
+                0.686 + 0.314 * (1 - value),
+                0.168 - 0.168 * (1 - value),
+                0.272 - 0.272 * (1 - value),
+                0.534 - 0.534 * (1 - value),
+                0.131 + 0.869 * (1 - value),
+            ]);
+        };
+        /**
+         * Applying cals to get CSS filter for saturate
+         *
+         * @param {number} [value=1]
+         * @memberof Color
+         */
+        Color.prototype.saturate = function (value) {
+            if (value === void 0) { value = 1; }
+            this.multiply([
+                0.213 + 0.787 * value,
+                0.715 - 0.715 * value,
+                0.072 - 0.072 * value,
+                0.213 - 0.213 * value,
+                0.715 + 0.285 * value,
+                0.072 - 0.072 * value,
+                0.213 - 0.213 * value,
+                0.715 - 0.715 * value,
+                0.072 + 0.928 * value,
+            ]);
+        };
+        Color.prototype.multiply = function (matrix) {
+            // These values are needed. It's correct because the returned values will change
+            var newR = this.clamp(this.r * matrix[0] + this.g * matrix[1] + this.b * matrix[2]);
+            var newG = this.clamp(this.r * matrix[3] + this.g * matrix[4] + this.b * matrix[5]);
+            var newB = this.clamp(this.r * matrix[6] + this.g * matrix[7] + this.b * matrix[8]);
+            this.r = newR;
+            this.g = newG;
+            this.b = newB;
+        };
+        /**
+         * Applying cals to get CSS filter for brightness
+         *
+         * @param {number} [value=1]
+         * @memberof Color
+         */
+        Color.prototype.brightness = function (value) {
+            if (value === void 0) { value = 1; }
+            this.linear(value);
+        };
+        /**
+         * Applying cals to get CSS filter for contrast
+         *
+         * @param {number} [value=1]
+         * @memberof Color
+         */
+        Color.prototype.contrast = function (value) {
+            if (value === void 0) { value = 1; }
+            this.linear(value, -(0.5 * value) + 0.5);
+        };
+        Color.prototype.linear = function (slope, intercept) {
+            if (slope === void 0) { slope = 1; }
+            if (intercept === void 0) { intercept = 0; }
+            this.r = this.clamp(this.r * slope + intercept * 255);
+            this.g = this.clamp(this.g * slope + intercept * 255);
+            this.b = this.clamp(this.b * slope + intercept * 255);
+        };
+        /**
+         * Applying cals to get CSS filter for invert
+         *
+         * @param {number} [value=1]
+         * @memberof Color
+         */
+        Color.prototype.invert = function (value) {
+            if (value === void 0) { value = 1; }
+            this.r = this.clamp((value + (this.r / 255) * (1 - 2 * value)) * 255);
+            this.g = this.clamp((value + (this.g / 255) * (1 - 2 * value)) * 255);
+            this.b = this.clamp((value + (this.b / 255) * (1 - 2 * value)) * 255);
+        };
+        /**
+         * transform RGB into HSL values
+         *
+         * @returns {HSLData}
+         * @memberof Color
+         */
+        Color.prototype.hsl = function () {
+            var red = this.r / 255;
+            var green = this.g / 255;
+            var blue = this.b / 255;
+            // find greatest and smallest channel values
+            var max = Math.max(red, green, blue);
+            var min = Math.min(red, green, blue);
+            var hue = 0;
+            var saturation = 0;
+            var lightness = (max + min) / 2;
+            // If min and max have the same values, it means
+            // the given color is achromatic
+            if (max === min) {
+                return {
+                    h: 0,
+                    s: 0,
+                    l: lightness * 100,
+                };
+            }
+            // Adding delta value of greatest and smallest channel values
+            var delta = max - min;
+            saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+            if (max === red) {
+                hue = (green - blue) / delta + (green < blue ? 6 : 0);
+            }
+            else if (max === green) {
+                hue = (blue - red) / delta + 2;
+            }
+            else if (max === blue) {
+                hue = (red - green) / delta + 4;
+            }
+            hue /= 6;
+            return {
+                h: hue * 100,
+                s: saturation * 100,
+                l: lightness * 100,
+            };
+        };
+        /**
+         * Normalize the value to follow the min and max for RGB colors
+         * min: 0
+         * max: 255
+         *
+         * @private
+         * @param {number} value
+         * @returns {number}
+         * @memberof Color
+         */
+        Color.prototype.clamp = function (value) {
+            // Minimum RGB Value = 0;
+            // Maximum RGB Value = 255;
+            return Math.min(Math.max(value, 0), 255);
+        };
+        return Color;
+    }());
+
+    var Solver = /** @class */ (function () {
+        function Solver(target, options) {
+            this.target = target;
+            this.targetHSL = target.hsl();
+            this.options = Object.assign({}, 
+            // Adding default values for options
+            {
+                acceptanceLossPercentage: 5,
+                maxChecks: 15,
+            }, options);
+            // All the calcs done by the library to generate
+            // a CSS Filter are based on the color `#000`
+            // in this case, `rgb(0, 0, 0)`
+            // Please make sure the background of the element
+            // is `#000` for better performance
+            // and color similarity.
+            this.reusedColor = new Color(0, 0, 0);
+        }
+        /**
+         * Returns the solved values for the
+         *
+         * @returns {(SPSAPayload & { filter: string; })}
+         * @memberof Solver
+         */
+        Solver.prototype.solve = function () {
+            var result = this.solveNarrow(this.solveWide());
+            return {
+                values: result.values,
+                called: result.called,
+                loss: result.loss,
+                filter: this.css(result.values),
+            };
+        };
+        /**
+         * Solve wide values based on the wide values for RGB and HSL values
+         *
+         * @private
+         * @returns {SPSAPayload}
+         * @memberof Solver
+         */
+        Solver.prototype.solveWide = function () {
+            var A = 5;
+            var c = 15;
+            // Wide values for RGB and HSL values
+            // the values in the order: [`r`, `g`, `b`, `h`, `s`, `l`]
+            var a = [60, 180, 18000, 600, 1.2, 1.2];
+            var best = { loss: Infinity };
+            var counter = 0;
+            while (best.loss > this.options.acceptanceLossPercentage) {
+                var initialFilterValues = [50, 20, 3750, 50, 100, 100];
+                var result = this.spsa({
+                    A: A,
+                    a: a,
+                    c: c,
+                    values: initialFilterValues,
+                    // for wide values we should use the double of tries in
+                    // comparison of `solveNarrow()` method
+                    maxTriesInLoop: 1000,
+                });
+                if (result.loss < best.loss) {
+                    best = result;
+                }
+                counter += 1;
+                if (counter >= this.options.maxChecks) {
+                    break;
+                }
+            }
+            return Object.assign({}, best, { called: counter });
+        };
+        /**
+         * Solve narrow values based on the wide values for the filter
+         *
+         * @private
+         * @param {SPSAPayload} wide
+         * @returns {SPSAPayload}
+         * @memberof Solver
+         */
+        Solver.prototype.solveNarrow = function (wide) {
+            var A = wide.loss;
+            var c = 2;
+            var A1 = A + 1;
+            // Narrow values for RGB and HSL values
+            // the values in the order: [`r`, `g`, `b`, `h`, `s`, `l`]
+            var a = [0.25 * A1, 0.25 * A1, A1, 0.25 * A1, 0.2 * A1, 0.2 * A1];
+            return this.spsa({
+                A: A,
+                a: a,
+                c: c,
+                values: wide.values,
+                maxTriesInLoop: 500,
+                called: wide.called,
+            });
+        };
+        /**
+         * Returns final value based on the current filter order
+         * to get the order, please check the returned value
+         * in `css()` method
+         *
+         * @private
+         * @param {number} value
+         * @param {number} idx
+         * @returns {number}
+         * @memberof Solver
+         */
+        Solver.prototype.fixValueByFilterIDX = function (value, idx) {
+            var max = 100;
+            // Fixing max, minimum and value by filter
+            if (idx === 2 /* saturate */) {
+                max = 7500;
+            }
+            else if (idx === 4 /* brightness */ || idx === 5 /* contrast */) {
+                max = 200;
+            }
+            if (idx === 3 /* hue-rotate */) {
+                if (value > max) {
+                    value %= max;
+                }
+                else if (value < 0) {
+                    value = max + (value % max);
+                }
+            }
+            // Checking if value is below the minimum or above
+            // the maximum allowed by filter
+            else if (value < 0) {
+                value = 0;
+            }
+            else if (value > max) {
+                value = max;
+            }
+            return value;
+        };
+        Solver.prototype.spsa = function (_a) {
+            var A = _a.A, a = _a.a, c = _a.c, values = _a.values, _b = _a.maxTriesInLoop, maxTriesInLoop = _b === void 0 ? 500 : _b, _c = _a.called, called = _c === void 0 ? 0 : _c;
+            var alpha = 1;
+            var gamma = 0.16666666666666666;
+            var best = null;
+            var bestLoss = Infinity;
+            var deltas = new Array(6);
+            var highArgs = new Array(6);
+            var lowArgs = new Array(6);
+            // Size of all CSS filters to be applied to get the correct color
+            var filtersToBeAppliedSize = 6;
+            for (var key = 0; key < maxTriesInLoop; key++) {
+                var ck = c / Math.pow(key + 1, gamma);
+                for (var i = 0; i < filtersToBeAppliedSize; i++) {
+                    deltas[i] = Math.random() > 0.5 ? 1 : -1;
+                    highArgs[i] = values[i] + ck * deltas[i];
+                    lowArgs[i] = values[i] - ck * deltas[i];
+                }
+                var lossDiff = this.loss(highArgs) - this.loss(lowArgs);
+                for (var i = 0; i < filtersToBeAppliedSize; i++) {
+                    var g = (lossDiff / (2 * ck)) * deltas[i];
+                    var ak = a[i] / Math.pow(A + key + 1, alpha);
+                    values[i] = this.fixValueByFilterIDX(values[i] - ak * g, i);
+                }
+                var loss = this.loss(values);
+                if (loss < bestLoss) {
+                    best = values.slice(0);
+                    bestLoss = loss;
+                }
+            }
+            return { values: best, loss: bestLoss, called: called };
+        };
+        /**
+         * Checks how much is the loss for the filter in RGB and HSL colors
+         *
+         * @private
+         * @param {SPSAPayload['values']} filters
+         * @returns {number}
+         * @memberof Solver
+         */
+        Solver.prototype.loss = function (filters) {
+            // Argument as an Array of percentages.
+            var color = this.reusedColor;
+            // Resetting the color to black in case
+            // it was called more than once
+            color.set(0, 0, 0);
+            color.invert(filters[0] / 100);
+            color.sepia(filters[1] / 100);
+            color.saturate(filters[2] / 100);
+            color.hueRotate(filters[3] * 3.6);
+            color.brightness(filters[4] / 100);
+            color.contrast(filters[5] / 100);
+            var colorHSL = color.hsl();
+            return (Math.abs(color.r - this.target.r) +
+                Math.abs(color.g - this.target.g) +
+                Math.abs(color.b - this.target.b) +
+                Math.abs(colorHSL.h - this.targetHSL.h) +
+                Math.abs(colorHSL.s - this.targetHSL.s) +
+                Math.abs(colorHSL.l - this.targetHSL.l));
+        };
+        /**
+         * Returns the CSS filter list for the received HEX color
+         *
+         * @private
+         * @param {number[]} filters
+         * @returns {string}
+         * @memberof Solver
+         */
+        Solver.prototype.css = function (filters) {
+            var formatCssFilterValueByMultiplier = function (idx, multiplier) {
+                if (multiplier === void 0) { multiplier = 1; }
+                return Math.round(filters[idx] * multiplier);
+            };
+            return [
+                "invert(" + formatCssFilterValueByMultiplier(0) + "%)",
+                "sepia(" + formatCssFilterValueByMultiplier(1) + "%)",
+                "saturate(" + formatCssFilterValueByMultiplier(2) + "%)",
+                "hue-rotate(" + formatCssFilterValueByMultiplier(3, 3.6) + "deg)",
+                "brightness(" + formatCssFilterValueByMultiplier(4) + "%)",
+                "contrast(" + formatCssFilterValueByMultiplier(5) + "%);",
+            ].join(' ');
+        };
+        return Solver;
+    }());
+
+    /**
+     * Transform a CSS Color from Hexadecimal to RGB color
+     *
+     * @param {string} hex hexadecimal color
+     * @returns {([number, number, number] | [])} array with the RGB colors or empty array
+     */
+    var hexToRgb = function (hex) {
+        if (hex.length === 4) {
+            return [parseInt("0x" + hex[1] + hex[1]), parseInt("0x" + hex[2] + hex[2]), parseInt("0x" + hex[3] + hex[3])];
+        }
+        if (hex.length === 7) {
+            return [parseInt("0x" + hex[1] + hex[2]), parseInt("0x" + hex[3] + hex[4]), parseInt("0x" + hex[5] + hex[6])];
+        }
+        return [];
+    };
+    var isNumeric = function (n) { return !isNaN(parseFloat(n)) && isFinite(n); };
+    // Memory cache for the computed results to avoid multiple
+    // calculations for the same color
+    var results = {};
+    /**
+     * A function that transforms a HEX color into CSS filters
+     *
+     * @param colorValue string hexadecimal color
+     * @param opts HexToCssConfiguration function configuration
+     *
+     */
+    var hexToCSSFilter = function (colorValue, opts) {
+        var _a;
+        if (opts === void 0) { opts = {}; }
+        var red;
+        var green;
+        var blue;
+        if (results[colorValue] && !opts.forceFilterRecalculation) {
+            return Object.assign({}, results[colorValue], { cache: true });
+        }
+        var color;
+        try {
+            _a = __read(hexToRgb(colorValue), 3), red = _a[0], green = _a[1], blue = _a[2];
+            if (!isNumeric(red) || !isNumeric(green) || !isNumeric(blue)) {
+                throw new Error("hextToRgb returned an invalid value for '" + colorValue + "'");
+            }
+            color = new Color(Number(red), Number(green), Number(blue));
+        }
+        catch (error) {
+            throw new Error("Color value should be in HEX format. " + error);
+        }
+        var solver = new Solver(color, Object.assign({}, 
+        // `HexToCssConfiguration` Defaults
+        {
+            acceptanceLossPercentage: 5,
+            maxChecks: 30,
+            forceFilterRecalculation: false,
+        }, opts));
+        return (results[colorValue] = Object.assign({}, solver.solve(), {
+            hex: colorValue,
+            rgb: [red, green, blue],
+            cache: false,
+        }));
+    };
+    /**
+     * A function that clears cached results
+     *
+     * @param  {string} key? HEX string value passed previously `#24639C`. If not passed, it clears all cached results
+     * @returns void
+     */
+    var clearCache = function (key) {
+        if (!key) {
+            results = {};
+        }
+        else if (results[key]) {
+            delete results[key];
+        }
+    };
+
+    exports.clearCache = clearCache;
+    exports.hexToCSSFilter = hexToCSSFilter;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+});
+
+const kupGridRendererCss = ".gridRow{fill:#fff}.gridRowLine{stroke:transparent}.gridTick{stroke:#e6e4e4}.barHandle{fill:#ddd;cursor:ew-resize;opacity:0;visibility:hidden}.barBackground{user-select:none;stroke-width:0}.barWrapper{cursor:pointer;outline:none}.task-wrapper{outline:none !important}.barWrapper:hover .barHandle{visibility:visible;opacity:1}.barLabel{fill:#fff;text-anchor:middle;font-weight:lighter;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.barLabelOutside{fill:#555;text-anchor:start;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}";
+
+const KupGridRenderer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tasks = undefined;
+        this.dates = undefined;
+        this.ganttEvent = undefined;
+        this.selectedTask = undefined;
+        this.rowHeight = 0;
+        this.columnWidth = 0;
+        this.timeStep = 0;
+        this.taskHeight = 0;
+        this.arrowColor = '';
+        this.arrowIndent = 0;
+        this.fontFamily = '';
+        this.fontSize = '';
+        this.rtl = false;
+        this.hideLabel = false;
+        this.showSecondaryDates = false;
+        this.currentDateIndicator = undefined;
+        this.projection = undefined;
+        this.readOnly = false;
+        this.gridProps = undefined;
+        this.dateChange = undefined;
+        this.progressChange = undefined;
+        this.doubleClick = undefined;
+        this.barClick = undefined;
+        this.barDblClick = undefined;
+        this.barContextMenu = undefined;
+        this.delete = undefined;
+        this.setFailedTask = undefined;
+        this.setSelectedTask = undefined;
+        this.eventStart = undefined;
+        this.eMouseDown = undefined;
+        this.setGanttEvent = undefined;
+        this.xStep = 0;
+        this.initEventX1Delta = 0;
+        this.initEventXClick = 0;
+        this.isMoving = false;
+        this.point = undefined;
+        this.svg = undefined;
+    }
+    //---- Lifecycle hooks ----
+    componentDidLoad() {
+        this.point = this.createSVGPoint();
+        this.updateXStep();
+    }
+    createSVGPoint() {
+        if (this.svg) {
+            return this.svg.createSVGPoint();
+        }
+        return undefined;
+    }
+    /*-------------------------------------------------*/
+    /*                   W A T C H E R S               */
+    /*-------------------------------------------------*/
+    updateXStep() {
+        // Calculate xStep whenever columnWidth, dates, or timeStep props change
+        const dateDelta = this.dates[1].getTime() -
+            this.dates[0].getTime() -
+            this.dates[1].getTimezoneOffset() * 60 * 1000 +
+            this.dates[0].getTimezoneOffset() * 60 * 1000;
+        const newXStep = (this.timeStep * this.columnWidth) / dateDelta;
+        this.xStep = newXStep;
+    }
+    updateSvgMove() {
+        const handleMouseMove = async (event) => {
+            var _a, _b;
+            if (!this.ganttEvent.changedTask || !this.point || !this.svg)
+                return;
+            event.preventDefault();
+            this.point.x = event.clientX;
+            const cursor = this.point.matrixTransform((_b = (_a = this.svg) === null || _a === void 0 ? void 0 : _a.getScreenCTM()) === null || _b === void 0 ? void 0 : _b.inverse());
+            const { isChanged, changedTask } = bar_helpers.handleTaskBySVGMouseEvent(cursor.x, this.ganttEvent.action, this.ganttEvent.changedTask, this.xStep, this.timeStep, this.initEventX1Delta, this.rtl);
+            if (isChanged) {
+                this.setGanttEvent(Object.assign(Object.assign({}, this.ganttEvent), { action: this.ganttEvent.action, changedTask }));
+            }
+        };
+        const handleMouseUp = async (event) => {
+            var _a, _b;
+            const { action, originalSelectedTask, changedTask } = this.ganttEvent;
+            if (!changedTask ||
+                !this.point ||
+                !this.svg ||
+                !originalSelectedTask)
+                return;
+            event.preventDefault();
+            this.point.x = event.clientX;
+            const cursor = this.point.matrixTransform((_b = (_a = this.svg) === null || _a === void 0 ? void 0 : _a.getScreenCTM()) === null || _b === void 0 ? void 0 : _b.inverse());
+            const { changedTask: newChangedTask } = bar_helpers.handleTaskBySVGMouseEvent(cursor.x, action, changedTask, this.xStep, this.timeStep, this.initEventX1Delta, this.rtl);
+            const isNotLikeOriginal = originalSelectedTask.start !== newChangedTask.start ||
+                originalSelectedTask.end !== newChangedTask.end ||
+                originalSelectedTask.progress !== newChangedTask.progress;
+            // remove listeners
+            this.svg.removeEventListener('mousemove', handleMouseMove);
+            this.svg.removeEventListener('mouseup', handleMouseUp);
+            this.setGanttEvent({ action: '' });
+            this.isMoving = false;
+            // custom operation start
+            let operationSuccess = true;
+            if ((action === 'move' || action === 'end' || action === 'start') &&
+                this.dateChange &&
+                isNotLikeOriginal) {
+                try {
+                    const result = await this.dateChange(newChangedTask, newChangedTask.barChildren);
+                    if (result !== undefined) {
+                        operationSuccess = result;
+                    }
+                }
+                catch (error) {
+                    operationSuccess = false;
+                }
+            }
+            else if (this.progressChange && isNotLikeOriginal) {
+                try {
+                    const result = this.progressChange(newChangedTask, newChangedTask.barChildren);
+                    if (result !== undefined) {
+                        operationSuccess = result;
+                    }
+                }
+                catch (error) {
+                    operationSuccess = false;
+                }
+            }
+            // If operation is failed - return old state
+            if (!operationSuccess) {
+                this.setFailedTask(originalSelectedTask);
+            }
+        };
+        if (!this.isMoving &&
+            (this.ganttEvent.action === 'move' ||
+                this.ganttEvent.action === 'end' ||
+                this.ganttEvent.action === 'start' ||
+                this.ganttEvent.action === 'progress') &&
+            this.svg) {
+            this.svg.addEventListener('mousemove', handleMouseMove);
+            this.svg.addEventListener('mouseup', handleMouseUp);
+            this.isMoving = true;
+        }
+    }
+    hasMovedHorizontally(event) {
+        if (this.readOnly) {
+            return false;
+        }
+        return this.initEventXClick !== event.clientX;
+    }
+    handleBarEventStart(action, task, event) {
+        var _a;
+        if (!event) {
+            if (action === 'select') {
+                this.setSelectedTask(task.id);
+            }
+        }
+        else if (bar_helpers.isKeyboardEvent(event)) {
+            if (action === 'delete') {
+                if (this.delete) {
+                    try {
+                        const result = this.delete(task);
+                        if (result !== undefined && result) {
+                            this.setGanttEvent({ action, changedTask: task });
+                            // this.ganttEvent = { action, changedTask: task }
+                        }
+                    }
+                    catch (error) {
+                        console.error('Error on Delete. ' + error);
+                    }
+                }
+            }
+        }
+        else if (action === 'mouseenter') {
+            if (!this.ganttEvent.action) {
+                this.setGanttEvent({
+                    action,
+                    changedTask: task,
+                    originalSelectedTask: task,
+                });
+            }
+        }
+        else if (action === 'mouseleave') {
+            if (this.ganttEvent.action === 'mouseenter') {
+                this.setGanttEvent({
+                    action: '',
+                });
+            }
+        }
+        else if (action === 'dblclick') {
+            this.doubleClick && this.doubleClick(task);
+        }
+        else if (action === 'click') {
+            const skipClick = this.hasMovedHorizontally(event);
+            !skipClick && this.barClick && this.barClick(task);
+        }
+        else if (action === 'contextmenu') {
+            event.preventDefault();
+            this.barContextMenu && this.barContextMenu(event, task);
+        }
+        else if (action === 'move') {
+            if (!this.svg || !this.point)
+                return;
+            this.point.x = event.clientX;
+            const cursor = this.point.matrixTransform((_a = this.svg.getScreenCTM()) === null || _a === void 0 ? void 0 : _a.inverse());
+            this.initEventX1Delta = cursor.x - task.x1;
+            this.initEventXClick = event.clientX;
+            this.setGanttEvent({
+                action,
+                changedTask: task,
+                originalSelectedTask: task,
+            });
+        }
+        else {
+            this.setGanttEvent({
+                action,
+                changedTask: task,
+                originalSelectedTask: task,
+            });
+        }
+    }
+    getTaskIcon(bar) {
+        const cssFilter = hexToCssFilter.hexToCSSFilter(bar.color);
+        return (index.h("image", { href: bar.url, filter: cssFilter.filter.replace(';', ''), x: bar.x, y: bar.y, width: bar.width, height: bar.height }));
+    }
+    renderKupBar(task, isSelected, isDateResizable, isProgressChangeable) {
+        var _a, _b, _c;
+        return (index.h("g", { class: "barWrapper", "tab-index": 0 }, this.renderKupBarDisplay(task.x1, task.y, task.x2 - task.x1, task.height, task.progressX, task.progressWidth, task.barCornerRadius, task.styles, isSelected, !this.readOnly && !!this.dateChange && !task.isDisabled, task, task.x1secondary, ((_a = task.x2secondary) !== null && _a !== void 0 ? _a : 0) - ((_b = task.x1secondary) !== null && _b !== void 0 ? _b : 0)), index.h("g", { class: "handleGroup" }, isDateResizable && (index.h("g", null, this.renderKupBarDateHandle(task.x1 + 1, task.y + 1, task.handleWidth, task.height - 2, task.barCornerRadius, task, 'start'), this.renderKupBarDateHandle(task.x2 - task.handleWidth - 1, task.y + 1, task.handleWidth, task.height - 2, task.barCornerRadius, task, 'end'))), isProgressChangeable && (index.h("polygon", { class: "barHandle", points: this.calculateProgressPoint(task), onMouseDown: (e) => {
+                this.handleBarEventStart('progress', task, e);
+            } }))), task.icon &&
+            task.icon.url &&
+            this.getTaskIcon({
+                color: (_c = task.icon.color) !== null && _c !== void 0 ? _c : '#000000',
+                url: task.icon.url,
+                width: task.height / 2 + 'px',
+                height: task.height / 2 + 'px',
+                x: task.x1 + (task.x2 - task.x1) - task.height / 2 / 2,
+                y: task.y -
+                    task.height / 2 / 2 / 2 +
+                    (this.showSecondaryDates ? task.height / 2 : 0),
+            })));
+    }
+    renderKupBarDisplay(x, y, width, height, progressX, progressWidth, barCornerRadius, styles, isSelected, isDateMovable, task, xSecondary, widthSecondary) {
+        if (this.showSecondaryDates && typeof xSecondary !== 'undefined') {
+            const halfHeight = height / 2;
+            return (index.h("g", { onMouseDown: (e) => isDateMovable &&
+                    this.handleBarEventStart('move', task, e) }, index.h("rect", { key: "top semi-transparent bar", x: xSecondary, width: widthSecondary, y: y, height: halfHeight, ry: barCornerRadius, rx: barCornerRadius, fill: this.getBarColor(isSelected, styles), opacity: 0.5, class: 'barBackground' }), index.h("rect", { key: "main bar", x: x, width: width, y: y + halfHeight, height: halfHeight, ry: barCornerRadius, rx: barCornerRadius, fill: this.getBarColor(isSelected, styles), class: 'barBackground' }), index.h("rect", { key: "progress bar", x: progressX, width: progressWidth, y: y + halfHeight, height: halfHeight, ry: barCornerRadius, rx: barCornerRadius, fill: this.getProcessColor(isSelected, styles) })));
+        }
+        return (index.h("g", { onMouseDown: (e) => {
+                isDateMovable && this.handleBarEventStart('move', task, e);
+            } }, index.h("rect", { x: x, width: width, y: y, height: height, ry: barCornerRadius, rx: barCornerRadius, fill: this.getBarColor(isSelected, styles), class: 'barBackground' }), index.h("rect", { x: progressX, width: progressWidth, y: y, height: height, ry: barCornerRadius, rx: barCornerRadius, fill: this.getProcessColor(isSelected, styles) })));
+    }
+    renderKupBarDateHandle(x, y, width, height, barCornerRadius, task, eventType) {
+        return (index.h("rect", { x: x, y: y, width: width, height: height, class: 'barHandle', ry: barCornerRadius, rx: barCornerRadius, onMouseDown: (e) => this.handleBarEventStart(eventType, task, e) }));
+    }
+    renderKupBarSmall(task, isSelected, isDateMovable, isProgressChangeable) {
+        return (index.h("g", { class: 'barWrapper', "tab-index": 0 }, this.renderKupBarDisplay(task.x1, task.y, task.x2 - task.x1, task.height, task.progressX, task.progressWidth, task.barCornerRadius, task.styles, isSelected, isDateMovable, task), index.h("g", { class: "handleGroup" }, isProgressChangeable && (index.h("polygon", { class: 'barHandle', points: this.calculateProgressPoint(task, 'small'), onMouseDown: (e) => {
+                this.handleBarEventStart('progress', task, e);
+            } })))));
+    }
+    renderKupBarTimeLine(task, col) {
+        return (index.h("g", { "tab-index": 0 }, index.h("rect", { fill: col, x: "0", width: "100%", y: task.y, height: task.height, rx: 0, ry: 0 }), task.barChildren.map((bar) => {
+            var _a;
+            return (index.h(index.Fragment, null, index.h("rect", { style: { cursor: 'pointer' }, key: bar.id, fill: bar.styles.backgroundColor, x: bar.x1, width: bar.x2 - bar.x1, y: bar.y, height: bar.height, rx: bar.barCornerRadius, ry: bar.barCornerRadius }), bar.icon &&
+                bar.icon.url &&
+                this.getTaskIcon({
+                    color: (_a = bar.icon.color) !== null && _a !== void 0 ? _a : '#000000',
+                    url: bar.icon.url,
+                    width: bar.height + 'px',
+                    height: bar.height + 'px',
+                    x: bar.x1 +
+                        (bar.x2 - bar.x1) -
+                        bar.height / 2,
+                    y: bar.y - bar.height / 2 / 2,
+                })));
+        })));
+    }
+    renderKupArrow(task, child) {
+        const [path, trianglePoints] = this.rtl
+            ? this.drownPathAndTriangleRTL(task, this.tasks[child.index], this.rowHeight, this.taskHeight, this.arrowIndent)
+            : this.drownPathAndTriangle(task, this.tasks[child.index], this.rowHeight, this.taskHeight, this.arrowIndent);
+        return (index.h("g", { class: "arrow" }, index.h("path", { "stroke-width": "1.5", d: path, fill: "none" }), index.h("polygon", { points: trianglePoints })));
+    }
+    drownPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent) {
+        const indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
+        const taskToEndPosition = taskTo.y + taskHeight / 2;
+        const taskFromEndPosition = taskFrom.x2 + arrowIndent * 2;
+        const taskFromHorizontalOffsetValue = taskFromEndPosition < taskTo.x1
+            ? ''
+            : `H ${taskTo.x1 - arrowIndent}`;
+        const taskToHorizontalOffsetValue = taskFromEndPosition > taskTo.x1
+            ? arrowIndent
+            : taskTo.x1 - taskFrom.x2 - arrowIndent;
+        const path = `M ${taskFrom.x2} ${taskFrom.y + taskHeight / 2}
+        h ${arrowIndent}
+        v ${(indexCompare * rowHeight) / 2}
+        ${taskFromHorizontalOffsetValue}
+        V ${taskToEndPosition}
+        h ${taskToHorizontalOffsetValue}`;
+        const trianglePoints = `${taskTo.x1},${taskToEndPosition}
+        ${taskTo.x1 - 5},${taskToEndPosition - 5}
+        ${taskTo.x1 - 5},${taskToEndPosition + 5}`;
+        return [path, trianglePoints];
+    }
+    drownPathAndTriangleRTL(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent) {
+        const indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
+        const taskToEndPosition = taskTo.y + taskHeight / 2;
+        const taskFromEndPosition = taskFrom.x1 - arrowIndent * 2;
+        const taskFromHorizontalOffsetValue = taskFromEndPosition > taskTo.x2
+            ? ''
+            : `H ${taskTo.x2 + arrowIndent}`;
+        const taskToHorizontalOffsetValue = taskFromEndPosition < taskTo.x2
+            ? -arrowIndent
+            : taskTo.x2 - taskFrom.x1 + arrowIndent;
+        const path = `M ${taskFrom.x1} ${taskFrom.y + taskHeight / 2}
+        h ${-arrowIndent}
+        v ${(indexCompare * rowHeight) / 2}
+        ${taskFromHorizontalOffsetValue}
+        V ${taskToEndPosition}
+        h ${taskToHorizontalOffsetValue}`;
+        const trianglePoints = `${taskTo.x2},${taskToEndPosition}
+        ${taskTo.x2 + 5},${taskToEndPosition + 5}
+        ${taskTo.x2 + 5},${taskToEndPosition - 5}`;
+        return [path, trianglePoints];
+    }
+    getBarColor(isSelected, styles) {
+        return isSelected
+            ? styles.backgroundSelectedColor
+            : styles.backgroundColor;
+    }
+    getProcessColor(isSelected, styles) {
+        return isSelected ? styles.progressSelectedColor : styles.progressColor;
+    }
+    calculateProgressPoint(task, type = 'bar') {
+        return bar_helpers.getProgressPoint(type == 'bar'
+            ? +!this.rtl * task.progressWidth + task.progressX
+            : task.progressWidth + task.x1, task.y, task.height);
+    }
+    render() {
+        let y = 0;
+        const gridRows = [];
+        const rowLines = [
+            index.h("line", { key: "RowLineFirst", x1: 0, y1: 0, x2: this.gridProps.svgWidth, y2: 0, class: "gridRowLine" }),
+        ];
+        for (const task of this.tasks) {
+            gridRows.push(index.h("rect", { key: 'Row' + task.id, x: 0, y: y, width: this.gridProps.svgWidth, height: this.rowHeight, class: "gridRow" }));
+            rowLines.push(index.h("line", { key: 'RowLine' + task.id, x1: 0, y1: y + this.rowHeight, x2: this.gridProps.svgWidth, y2: y + this.rowHeight, class: "gridRowLine" }));
+            y += this.rowHeight;
+        }
+        const now = new Date();
+        let tickX = 0;
+        const ticks = [];
+        for (let i = 0; i < this.dates.length; i++) {
+            const date = this.dates[i];
+            ticks.push(index.h("line", { key: date.getTime(), x1: tickX, y1: 0, x2: tickX, y2: y, class: "gridTick" }));
+            if ((i + 1 !== this.dates.length &&
+                date.getTime() < now.getTime() &&
+                this.dates[i + 1].getTime() >= now.getTime()) ||
+                // if current date is last
+                (i !== 0 &&
+                    i + 1 === this.dates.length &&
+                    date.getTime() < now.getTime() &&
+                    kupPlannerRendererHelper.addToDate(date, date.getTime() - this.dates[i - 1].getTime(), 'millisecond').getTime() >= now.getTime())) ;
+            tickX += this.columnWidth;
+        }
+        return (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: this.gridProps.svgWidth, height: `${this.rowHeight * this.tasks.length}px`, "font-family": this.fontFamily, ref: (el) => (this.svg = el) }, index.h("g", { class: "grid" }, index.h("g", { class: "rows" }, gridRows), index.h("g", { class: "rowLines" }, rowLines), index.h("g", { class: "ticks" }, ticks)), index.h("g", { class: "content" }, this.currentDateIndicator && (index.h("rect", { fill: this.currentDateIndicator.color, x: this.currentDateIndicator.x + 1.5, y: "0", width: "2", height: "100%" })), this.projection && (index.h("rect", { fill: this.projection.color, x: this.projection.x0, y: "0", width: this.projection.xf - this.projection.x0, height: "100%", "fill-opacity": "0.35" })), index.h("g", { class: "arrows", fill: this.arrowColor, stroke: this.arrowColor }, this.tasks.map((task) => {
+            return task.barChildren.map((child) => {
+                if (task.type !== 'timeline') {
+                    this.renderKupArrow(task, child);
+                }
+            });
+        })), index.h("g", { class: "bar", "font-family": this.fontFamily, "font-size": this.fontSize }, this.tasks.map((task) => {
+            const forbidResize = task.type === 'project';
+            return (index.h("g", { onKeyDown: (e) => {
+                    switch (e.key) {
+                        case 'Delete': {
+                            if (!task.isDisabled)
+                                this.handleBarEventStart('delete', task, e);
+                            break;
+                        }
+                    }
+                    e.stopPropagation();
+                }, onMouseEnter: (e) => {
+                    this.handleBarEventStart('mouseenter', task, e);
+                }, onMouseLeave: (e) => {
+                    this.handleBarEventStart('mouseleave', task, e);
+                }, onDblClick: () => {
+                    this.barDblClick(task);
+                }, onClick: (e) => {
+                    this.handleBarEventStart('click', task, e);
+                }, onContextMenu: (e) => {
+                    this.handleBarEventStart('contextmenu', task, e);
+                }, onFocus: () => {
+                    this.handleBarEventStart('select', task);
+                }, class: "task-wrapper" }, (() => {
+                const props = {
+                    task: task,
+                    arrowIndent: this.arrowIndent,
+                    isDelete: !task.isDisabled,
+                    taskHeight: this.taskHeight,
+                    isSelected: !!this.selectedTask &&
+                        task.id ===
+                            this.selectedTask.id,
+                    rtl: this.rtl,
+                    hideLabel: this.hideLabel,
+                };
+                const styles = task.styles;
+                const col = props.isSelected
+                    ? styles.backgroundSelectedColor
+                    : styles.backgroundColor;
+                const isDateResizable = !this.readOnly &&
+                    !!this.dateChange &&
+                    !task.isDisabled &&
+                    !forbidResize;
+                const isProgressChangeable = !this.readOnly &&
+                    !!this.progressChange &&
+                    !task.isDisabled;
+                const isDateMovable = !this.readOnly &&
+                    !!this.dateChange &&
+                    !task.isDisabled;
+                switch (task.typeInternal) {
+                    case 'project':
+                        return this.renderKupBar(task, props.isSelected, isDateResizable, isProgressChangeable);
+                    case 'smalltask':
+                        return this.renderKupBarSmall(task, props.isSelected, isDateMovable, isProgressChangeable);
+                    case 'timeline':
+                        return this.renderKupBarTimeLine(task, col);
+                    default:
+                        return this.renderKupBar(task, props.isSelected, isDateResizable, isProgressChangeable);
+                }
+            })()));
+        })))));
+    }
+    static get watchers() { return {
+        "columnWidth": ["updateXStep"],
+        "dates": ["updateXStep"],
+        "timeStep": ["updateXStep", "updateSvgMove"],
+        "ganttEvent": ["updateSvgMove"],
+        "xStep": ["updateSvgMove"],
+        "svg": ["updateSvgMove"],
+        "initEventX1Delta": ["updateSvgMove"],
+        "point": ["updateSvgMove"],
+        "rtl": ["updateSvgMove"],
+        "onProgressChange": ["updateSvgMove"],
+        "onDateChange": ["updateSvgMove"]
+    }; }
+};
+KupGridRenderer.style = kupGridRendererCss;
+
+exports.kup_custom_task_list_header = KupCustomTaskListHeader;
+exports.kup_custom_task_list_table = KupCustomTaskListTable;
+exports.kup_gantt_calendar = KupGanttCalendar;
+exports.kup_grid_renderer = KupGridRenderer;