@sme.up/ketchup 9.2.0 → 9.3.0

package/dist/components/kup-grid-renderer2.js

@@ -0,0 +1,1416 @@
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
+import { a as addToDate } from './kup-planner-renderer-helper.js';
+import { c as createCommonjsModule, b as commonjsGlobal } from './kup-dates.js';
+
+function isKeyboardEvent(event) {
+    return event.key !== undefined;
+}
+function removeHiddenTasks(tasks) {
+    const groupedTasks = tasks.filter((t) => t.hideChildren && t.type === 'project');
+    if (groupedTasks.length > 0) {
+        for (let i = 0; groupedTasks.length > i; i++) {
+            const groupedTask = groupedTasks[i];
+            const children = getChildren(tasks, groupedTask);
+            tasks = tasks.filter((t) => children.indexOf(t) === -1);
+        }
+    }
+    return tasks;
+}
+function getChildren(taskList, task) {
+    let tasks = [];
+    if (task.type !== 'project') {
+        tasks = taskList.filter((t) => t.dependencies && t.dependencies.indexOf(task.id) !== -1);
+    }
+    else {
+        tasks = taskList.filter((t) => t.project && t.project === task.id);
+    }
+    var taskChildren = [];
+    tasks.forEach((t) => {
+        taskChildren.push(...getChildren(taskList, t));
+    });
+    tasks = tasks.concat(tasks, taskChildren);
+    return tasks;
+}
+const sortTasks = (taskA, taskB) => {
+    const orderA = taskA.displayOrder || Number.MAX_VALUE;
+    const orderB = taskB.displayOrder || Number.MAX_VALUE;
+    if (orderA > orderB) {
+        return 1;
+    }
+    else if (orderA < orderB) {
+        return -1;
+    }
+    else {
+        return 0;
+    }
+};
+
+const convertToBarTasks = (tasks, dates, columnWidth, rowHeight, taskHeight, projectHeight, timelineHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, showSecondaryDates) => {
+    let barTasks = tasks.map((t, i) => {
+        return convertToBarTask(t, i, dates, columnWidth, rowHeight, taskHeight, projectHeight, timelineHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, showSecondaryDates);
+    });
+    // set dependencies
+    barTasks = barTasks.map((task) => {
+        const dependencies = task.dependencies || [];
+        for (let j = 0; j < dependencies.length; j++) {
+            const dependence = barTasks.findIndex((value) => value.id === dependencies[j]);
+            if (dependence !== -1)
+                barTasks[dependence].barChildren.push(task);
+        }
+        return task;
+    });
+    return barTasks;
+};
+const convertToBarTask = (task, index, dates, columnWidth, rowHeight, taskHeight, projectHeight, timelineHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, showSecondaryDates) => {
+    let barTask;
+    switch (task.type) {
+        case 'timeline':
+            barTask = convertToTimeline(task, index, dates, columnWidth, rowHeight, timelineHeight, barCornerRadius, handleWidth);
+            break;
+        case 'project':
+            barTask = convertToBar(task, index, dates, columnWidth, rowHeight, projectHeight, barCornerRadius, handleWidth, rtl, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, showSecondaryDates);
+            break;
+        default:
+            barTask = convertToBar(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, showSecondaryDates);
+            break;
+    }
+    return barTask;
+};
+function computeTypeAndXs(start, end, type, dates, columnWidth, handleWidth, rtl) {
+    let x1;
+    let x2;
+    if (rtl) {
+        x2 = taskXCoordinateRTL(start, dates, columnWidth);
+        x1 = taskXCoordinateRTL(end, dates, columnWidth);
+    }
+    else {
+        x1 = taskXCoordinate(start, dates, columnWidth);
+        x2 = taskXCoordinate(end, dates, columnWidth);
+    }
+    let typeInternal = type;
+    if (typeInternal === 'task' && x2 - x1 < handleWidth * 2) {
+        typeInternal = 'smalltask';
+        x2 = x1 + handleWidth * 2;
+    }
+    return { x1, x2, typeInternal };
+}
+const convertToBar = (task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, showSecondaryDates) => {
+    const { x1, x2, typeInternal } = computeTypeAndXs(task.start, task.end, task.type, dates, columnWidth, handleWidth, rtl);
+    const { x1: x1secondary, x2: x2secondary } = showSecondaryDates && task.secondaryStart && task.secondaryEnd
+        ? computeTypeAndXs(task.secondaryStart, task.secondaryEnd, task.type, dates, columnWidth, handleWidth, rtl)
+        : { x1: undefined, x2: undefined };
+    const [progressWidth, progressX] = progressWithByParams(x1, x2, task.progress, rtl);
+    const y = taskYCoordinate(index, rowHeight, taskHeight);
+    const hideChildren = task.type === 'project' ? task.hideChildren : undefined;
+    const styles = Object.assign({ backgroundColor: barBackgroundColor, backgroundSelectedColor: barBackgroundSelectedColor, progressColor: barProgressColor, progressSelectedColor: barProgressSelectedColor }, task.styles);
+    return Object.assign(Object.assign({}, task), { typeInternal,
+        x1,
+        x2,
+        x1secondary,
+        x2secondary,
+        y,
+        index,
+        progressX,
+        progressWidth,
+        barCornerRadius,
+        handleWidth,
+        hideChildren, height: taskHeight, barChildren: [], styles });
+};
+const defaultStyles = (styles) => {
+    var _a, _b, _c, _d;
+    return ({
+        backgroundColor: (_a = styles === null || styles === void 0 ? void 0 : styles.backgroundColor) !== null && _a !== void 0 ? _a : '#deadbeef',
+        backgroundSelectedColor: (_b = styles === null || styles === void 0 ? void 0 : styles.backgroundSelectedColor) !== null && _b !== void 0 ? _b : '#cafebabe',
+        progressColor: (_c = styles === null || styles === void 0 ? void 0 : styles.progressColor) !== null && _c !== void 0 ? _c : '#deadbeef',
+        progressSelectedColor: (_d = styles === null || styles === void 0 ? void 0 : styles.progressSelectedColor) !== null && _d !== void 0 ? _d : '#cafebabe',
+    });
+};
+const convertToTimeline = (task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth) => {
+    var _a;
+    const y = taskYCoordinate(index, rowHeight, taskHeight);
+    function convertFrameToTask(frame, j) {
+        var _a, _b;
+        const { x1, x2 } = computeTypeAndXs(frame.start, frame.end, 'task', dates, columnWidth, handleWidth, false);
+        const n = +frame.start;
+        const baseColor = frame.backgroundColor;
+        const selColor = (_a = frame.backgroundSelectedColor) !== null && _a !== void 0 ? _a : baseColor;
+        return {
+            barChildren: [],
+            barCornerRadius: 0,
+            start: frame.start,
+            end: frame.end,
+            handleWidth: 0,
+            height: taskHeight,
+            id: `Frame-${task.id}-${j}`,
+            index: n,
+            name: '',
+            valuesToShow: task.valuesToShow,
+            progress: 0,
+            progressWidth: 0,
+            progressX: 0,
+            styles: {
+                backgroundColor: baseColor,
+                backgroundSelectedColor: selColor,
+                progressColor: baseColor,
+                progressSelectedColor: selColor,
+            },
+            timeline: [],
+            type: 'task',
+            typeInternal: 'timeline',
+            x1,
+            x2,
+            y,
+            icon: (_b = frame.icon) !== null && _b !== void 0 ? _b : undefined,
+        };
+    }
+    const { x1, x2 } = computeTypeAndXs(task.start, task.end, task.type, dates, columnWidth, handleWidth, false);
+    const children = (_a = task.timeline) === null || _a === void 0 ? void 0 : _a.map(convertFrameToTask);
+    return Object.assign(Object.assign({}, task), { x1,
+        x2,
+        y,
+        index, progressX: 0, progressWidth: 0, barCornerRadius,
+        handleWidth, typeInternal: task.type, progress: 0, height: taskHeight, hideChildren: undefined, barChildren: children !== null && children !== void 0 ? children : [], styles: defaultStyles(task.styles) });
+};
+const taskXCoordinate = (xDate, dates, columnWidth) => {
+    const index = dates.findIndex((d) => d.getTime() >= xDate.getTime()) - 1;
+    if (index < 0) {
+        return 0;
+    }
+    const remainderMillis = xDate.getTime() - dates[index].getTime();
+    const percentOfInterval = remainderMillis / (dates[index + 1].getTime() - dates[index].getTime());
+    const x = index * columnWidth + percentOfInterval * columnWidth;
+    return x;
+};
+const taskXCoordinateRTL = (xDate, dates, columnWidth) => {
+    let x = taskXCoordinate(xDate, dates, columnWidth);
+    x += columnWidth;
+    return x;
+};
+const taskYCoordinate = (index, rowHeight, taskHeight) => {
+    const y = index * rowHeight + (rowHeight - taskHeight) / 2;
+    return y;
+};
+const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
+    const progressWidth = (taskX2 - taskX1) * progress * 0.01;
+    let progressX;
+    if (rtl) {
+        progressX = taskX2 - progressWidth;
+    }
+    else {
+        progressX = taskX1;
+    }
+    return [progressWidth, progressX];
+};
+const progressByX = (x, task) => {
+    if (x >= task.x2)
+        return 100;
+    else if (x <= task.x1)
+        return 0;
+    else {
+        const barWidth = task.x2 - task.x1;
+        const progressPercent = Math.round(((x - task.x1) * 100) / barWidth);
+        return progressPercent;
+    }
+};
+const progressByXRTL = (x, task) => {
+    if (x >= task.x2)
+        return 0;
+    else if (x <= task.x1)
+        return 100;
+    else {
+        const barWidth = task.x2 - task.x1;
+        const progressPercent = Math.round(((task.x2 - x) * 100) / barWidth);
+        return progressPercent;
+    }
+};
+const getProgressPoint = (progressX, taskY, taskHeight) => {
+    const point = [
+        progressX - 5,
+        taskY + taskHeight,
+        progressX + 5,
+        taskY + taskHeight,
+        progressX,
+        taskY + taskHeight - 8.66,
+    ];
+    return point.join(',');
+};
+const startByX = (x, xStep, task) => {
+    if (x >= task.x2 - task.handleWidth * 2) {
+        x = task.x2 - task.handleWidth * 2;
+    }
+    const steps = Math.round((x - task.x1) / xStep);
+    const additionalXValue = steps * xStep;
+    const newX = task.x1 + additionalXValue;
+    return newX;
+};
+const endByX = (x, xStep, task) => {
+    if (x <= task.x1 + task.handleWidth * 2) {
+        x = task.x1 + task.handleWidth * 2;
+    }
+    const steps = Math.round((x - task.x2) / xStep);
+    const additionalXValue = steps * xStep;
+    const newX = task.x2 + additionalXValue;
+    return newX;
+};
+const moveByX = (x, xStep, task) => {
+    const steps = Math.round((x - task.x1) / xStep);
+    const additionalXValue = steps * xStep;
+    const newX1 = task.x1 + additionalXValue;
+    const newX2 = newX1 + task.x2 - task.x1;
+    return [newX1, newX2];
+};
+const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
+    let newDate = new Date(((x - taskX) / xStep) * timeStep + taskDate.getTime());
+    newDate = new Date(newDate.getTime() +
+        (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 60000);
+    return newDate;
+};
+/**
+ * Method handles event in real time(mousemove) and on finish(mouseup)
+ */
+const handleTaskBySVGMouseEvent = (svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl) => handleTaskBySVGMouseEventForBar(svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl);
+const handleTaskBySVGMouseEventForBar = (svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl) => {
+    const changedTask = Object.assign({}, selectedTask);
+    let isChanged = false;
+    switch (action) {
+        case 'progress':
+            if (rtl) {
+                changedTask.progress = progressByXRTL(svgX, selectedTask);
+            }
+            else {
+                changedTask.progress = progressByX(svgX, selectedTask);
+            }
+            isChanged = changedTask.progress !== selectedTask.progress;
+            if (isChanged) {
+                const [progressWidth, progressX] = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl);
+                changedTask.progressWidth = progressWidth;
+                changedTask.progressX = progressX;
+            }
+            break;
+        case 'start': {
+            const newX1 = startByX(svgX, xStep, selectedTask);
+            changedTask.x1 = newX1;
+            isChanged = changedTask.x1 !== selectedTask.x1;
+            if (isChanged) {
+                if (rtl) {
+                    changedTask.end = dateByX(newX1, selectedTask.x1, selectedTask.end, xStep, timeStep);
+                }
+                else {
+                    changedTask.start = dateByX(newX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
+                }
+                const [progressWidth, progressX] = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl);
+                changedTask.progressWidth = progressWidth;
+                changedTask.progressX = progressX;
+            }
+            break;
+        }
+        case 'end': {
+            const newX2 = endByX(svgX, xStep, selectedTask);
+            changedTask.x2 = newX2;
+            isChanged = changedTask.x2 !== selectedTask.x2;
+            if (isChanged) {
+                if (rtl) {
+                    changedTask.start = dateByX(newX2, selectedTask.x2, selectedTask.start, xStep, timeStep);
+                }
+                else {
+                    changedTask.end = dateByX(newX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
+                }
+                const [progressWidth, progressX] = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl);
+                changedTask.progressWidth = progressWidth;
+                changedTask.progressX = progressX;
+            }
+            break;
+        }
+        case 'move': {
+            const [newMoveX1, newMoveX2] = moveByX(svgX - initEventX1Delta, xStep, selectedTask);
+            isChanged = newMoveX1 !== selectedTask.x1;
+            if (isChanged) {
+                changedTask.start = dateByX(newMoveX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
+                changedTask.end = dateByX(newMoveX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
+                changedTask.x1 = newMoveX1;
+                changedTask.x2 = newMoveX2;
+                const [progressWidth, progressX] = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl);
+                changedTask.progressWidth = progressWidth;
+                changedTask.progressX = progressX;
+            }
+            break;
+        }
+    }
+    return { isChanged, changedTask };
+};
+/**
+ * Calculate current date indicator
+ * @param start
+ * @param end
+ * @param dates
+ * @param columnWidth
+ * @returns
+ */
+function calculateCurrentDateCalculator(dates, columnWidth) {
+    return taskXCoordinate(new Date(), dates, columnWidth);
+}
+/**
+ * Calculate the coordinate of projections
+ * @param start
+ * @param end
+ * @param dates
+ * @param columnWidth
+ * @returns
+ */
+function calculateProjection(start, end, dates, columnWidth) {
+    return {
+        x0: taskXCoordinate(start, dates, columnWidth),
+        xf: taskXCoordinate(end, dates, columnWidth),
+    };
+}
+
+var hexToCssFilter = createCommonjsModule(function (module, exports) {
+(function (global, factory) {
+    factory(exports) ;
+}(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 = /*@__PURE__*/ proxyCustomElement(class KupGridRenderer extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        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 } = 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 } = 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 (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 (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 (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)), h("g", { class: "handleGroup" }, isDateResizable && (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 && (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 (h("g", { onMouseDown: (e) => isDateMovable &&
+                    this.handleBarEventStart('move', task, e) }, 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' }), 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' }), h("rect", { key: "progress bar", x: progressX, width: progressWidth, y: y + halfHeight, height: halfHeight, ry: barCornerRadius, rx: barCornerRadius, fill: this.getProcessColor(isSelected, styles) })));
+        }
+        return (h("g", { onMouseDown: (e) => {
+                isDateMovable && this.handleBarEventStart('move', task, e);
+            } }, h("rect", { x: x, width: width, y: y, height: height, ry: barCornerRadius, rx: barCornerRadius, fill: this.getBarColor(isSelected, styles), class: 'barBackground' }), 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 (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 (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), h("g", { class: "handleGroup" }, isProgressChangeable && (h("polygon", { class: 'barHandle', points: this.calculateProgressPoint(task, 'small'), onMouseDown: (e) => {
+                this.handleBarEventStart('progress', task, e);
+            } })))));
+    }
+    renderKupBarTimeLine(task, col) {
+        return (h("g", { "tab-index": 0 }, 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 (h(Fragment, null, 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 (h("g", { class: "arrow" }, h("path", { "stroke-width": "1.5", d: path, fill: "none" }), 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 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 = [
+            h("line", { key: "RowLineFirst", x1: 0, y1: 0, x2: this.gridProps.svgWidth, y2: 0, class: "gridRowLine" }),
+        ];
+        for (const task of this.tasks) {
+            gridRows.push(h("rect", { key: 'Row' + task.id, x: 0, y: y, width: this.gridProps.svgWidth, height: this.rowHeight, class: "gridRow" }));
+            rowLines.push(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(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() &&
+                    addToDate(date, date.getTime() - this.dates[i - 1].getTime(), 'millisecond').getTime() >= now.getTime())) ;
+            tickX += this.columnWidth;
+        }
+        return (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) }, h("g", { class: "grid" }, h("g", { class: "rows" }, gridRows), h("g", { class: "rowLines" }, rowLines), h("g", { class: "ticks" }, ticks)), h("g", { class: "content" }, this.currentDateIndicator && (h("rect", { fill: this.currentDateIndicator.color, x: this.currentDateIndicator.x + 1.5, y: "0", width: "2", height: "100%" })), this.projection && (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" })), 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);
+                }
+            });
+        })), h("g", { class: "bar", "font-family": this.fontFamily, "font-size": this.fontSize }, this.tasks.map((task) => {
+            const forbidResize = task.type === 'project';
+            return (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"]
+    }; }
+    static get style() { return kupGridRendererCss; }
+}, [0, "kup-grid-renderer", {
+        "tasks": [16],
+        "dates": [16],
+        "ganttEvent": [16],
+        "selectedTask": [16],
+        "rowHeight": [2, "row-height"],
+        "columnWidth": [2, "column-width"],
+        "timeStep": [2, "time-step"],
+        "taskHeight": [2, "task-height"],
+        "arrowColor": [1, "arrow-color"],
+        "arrowIndent": [2, "arrow-indent"],
+        "fontFamily": [1, "font-family"],
+        "fontSize": [1, "font-size"],
+        "rtl": [4],
+        "hideLabel": [4, "hide-label"],
+        "showSecondaryDates": [4, "show-secondary-dates"],
+        "currentDateIndicator": [16],
+        "projection": [16],
+        "readOnly": [4, "read-only"],
+        "gridProps": [16],
+        "dateChange": [16],
+        "progressChange": [16],
+        "doubleClick": [16],
+        "barClick": [16],
+        "barDblClick": [16],
+        "barContextMenu": [16],
+        "delete": [16],
+        "setFailedTask": [16],
+        "setSelectedTask": [16],
+        "eventStart": [16],
+        "eMouseDown": [16],
+        "setGanttEvent": [1040],
+        "xStep": [32],
+        "initEventX1Delta": [32],
+        "initEventXClick": [32],
+        "isMoving": [32],
+        "point": [32],
+        "svg": [32]
+    }, undefined, {
+        "columnWidth": ["updateXStep"],
+        "dates": ["updateXStep"],
+        "timeStep": ["updateXStep", "updateSvgMove"],
+        "ganttEvent": ["updateSvgMove"],
+        "xStep": ["updateSvgMove"],
+        "svg": ["updateSvgMove"],
+        "initEventX1Delta": ["updateSvgMove"],
+        "point": ["updateSvgMove"],
+        "rtl": ["updateSvgMove"],
+        "onProgressChange": ["updateSvgMove"],
+        "onDateChange": ["updateSvgMove"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kup-grid-renderer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kup-grid-renderer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, KupGridRenderer);
+            }
+            break;
+    } });
+}
+
+export { KupGridRenderer as K, calculateCurrentDateCalculator as a, calculateProjection as b, convertToBarTasks as c, defineCustomElement as d, removeHiddenTasks as r, sortTasks as s };