@sme.up/ketchup 9.2.0 → 9.4.0

package/dist/collection/components/kup-planner/utils/kup-grid-renderer/kup-grid-renderer.js

@@ -0,0 +1,1186 @@
+import { h, Fragment } from "@stencil/core";
+import { addToDate } from "../kup-planner-renderer-helper";
+import { handleTaskBySVGMouseEvent, getProgressPoint, } from "../helpers/bar.helpers";
+import { isKeyboardEvent } from "../helpers/other.helpers";
+import { hexToCSSFilter } from "hex-to-css-filter";
+export class KupGridRenderer {
+    constructor() {
+        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(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())) {
+                // Add custom logic here if needed
+            }
+            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 is() { return "kup-grid-renderer"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kup-grid-renderer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kup-grid-renderer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tasks": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttContentProps['tasks']",
+                    "resolved": "KupPlannerBarTask[]",
+                    "references": {
+                        "KupPlannerTaskGanttContentProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttContentProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "dates": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttContentProps['dates']",
+                    "resolved": "Date[]",
+                    "references": {
+                        "KupPlannerTaskGanttContentProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttContentProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "ganttEvent": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttContentProps['ganttEvent']",
+                    "resolved": "{ changedTask?: KupPlannerBarTask; originalSelectedTask?: KupPlannerBarTask; action: KupPlannerGanttContentMoveAction; }",
+                    "references": {
+                        "KupPlannerTaskGanttContentProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttContentProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "selectedTask": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttContentProps['selectedTask']",
+                    "resolved": "KupPlannerBarTask",
+                    "references": {
+                        "KupPlannerTaskGanttContentProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttContentProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "rowHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttContentProps['rowHeight']",
+                    "resolved": "number",
+                    "references": {
+                        "KupPlannerTaskGanttContentProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttContentProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "row-height",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "columnWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttContentProps['columnWidth']",
+                    "resolved": "number",
+                    "references": {
+                        "KupPlannerTaskGanttContentProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttContentProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "column-width",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "timeStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttContentProps['timeStep']",
+                    "resolved": "number",
+                    "references": {
+                        "KupPlannerTaskGanttContentProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttContentProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "time-step",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "taskHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttContentProps['taskHeight']",
+                    "resolved": "number",
+                    "references": {
+                        "KupPlannerTaskGanttContentProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttContentProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "task-height",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "arrowColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttContentProps['arrowColor']",
+                    "resolved": "string",
+                    "references": {
+                        "KupPlannerTaskGanttContentProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttContentProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "arrow-color",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "arrowIndent": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttContentProps['arrowIndent']",
+                    "resolved": "number",
+                    "references": {
+                        "KupPlannerTaskGanttContentProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttContentProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "arrow-indent",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "fontFamily": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttContentProps['fontFamily']",
+                    "resolved": "string",
+                    "references": {
+                        "KupPlannerTaskGanttContentProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttContentProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "font-family",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "fontSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttContentProps['fontSize']",
+                    "resolved": "string",
+                    "references": {
+                        "KupPlannerTaskGanttContentProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttContentProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "font-size",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "rtl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttContentProps['rtl']",
+                    "resolved": "boolean",
+                    "references": {
+                        "KupPlannerTaskGanttContentProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttContentProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "rtl",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttContentProps['hideLabel']",
+                    "resolved": "boolean",
+                    "references": {
+                        "KupPlannerTaskGanttContentProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttContentProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "hide-label",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showSecondaryDates": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttContentProps['showSecondaryDates']",
+                    "resolved": "boolean",
+                    "references": {
+                        "KupPlannerTaskGanttContentProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttContentProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-secondary-dates",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "currentDateIndicator": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttContentProps['currentDateIndicator']",
+                    "resolved": "KupPlannerCurrentDateIndicator",
+                    "references": {
+                        "KupPlannerTaskGanttContentProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttContentProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "projection": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttContentProps['projection']",
+                    "resolved": "{ x0: number; xf: number; color: string; }",
+                    "references": {
+                        "KupPlannerTaskGanttContentProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttContentProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttContentProps['readOnly']",
+                    "resolved": "boolean",
+                    "references": {
+                        "KupPlannerTaskGanttContentProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttContentProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "read-only",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "gridProps": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttProps['gridProps']",
+                    "resolved": "{ tasks: KupPlannerTask[]; dates: Date[]; svgWidth: number; rowHeight: number; columnWidth: number; todayColor: string; rtl: boolean; }",
+                    "references": {
+                        "KupPlannerTaskGanttProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "dateChange": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerEventOption['dateChange']",
+                    "resolved": "(task: KupPlannerTask, children: KupPlannerTask[]) => boolean | void | Promise<boolean> | Promise<void>",
+                    "references": {
+                        "KupPlannerEventOption": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerEventOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "progressChange": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerEventOption['progressChange']",
+                    "resolved": "(task: KupPlannerTask, children: KupPlannerTask[]) => boolean | void | Promise<boolean> | Promise<void>",
+                    "references": {
+                        "KupPlannerEventOption": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerEventOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "doubleClick": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerEventOption['doubleClick']",
+                    "resolved": "(task: KupPlannerTask) => void",
+                    "references": {
+                        "KupPlannerEventOption": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerEventOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "barClick": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerEventOption['barClick']",
+                    "resolved": "(task: KupPlannerTask) => void",
+                    "references": {
+                        "KupPlannerEventOption": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerEventOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "barDblClick": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerEventOption['barDblClick']",
+                    "resolved": "(task: KupPlannerTask) => void",
+                    "references": {
+                        "KupPlannerEventOption": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerEventOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "barContextMenu": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerEventOption['barContextMenu']",
+                    "resolved": "(event: UIEvent, task: KupPlannerTask) => void",
+                    "references": {
+                        "KupPlannerEventOption": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerEventOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "delete": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerEventOption['delete']",
+                    "resolved": "(task: KupPlannerTask) => boolean | void | Promise<boolean> | Promise<void>",
+                    "references": {
+                        "KupPlannerEventOption": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerEventOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "setFailedTask": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttContentProps['setFailedTask']",
+                    "resolved": "(value: KupPlannerBarTask) => void",
+                    "references": {
+                        "KupPlannerTaskGanttContentProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttContentProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "setSelectedTask": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttContentProps['setSelectedTask']",
+                    "resolved": "(taskId: string) => void",
+                    "references": {
+                        "KupPlannerTaskGanttContentProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttContentProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "eventStart": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskItemProps['onEventStart']",
+                    "resolved": "(action: KupPlannerGanttContentMoveAction, selectedTask: KupPlannerBarTask, event?: KeyboardEvent | MouseEvent) => any",
+                    "references": {
+                        "KupPlannerTaskItemProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskItemProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "eMouseDown": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerBarDisplayProps['onMouseDown']",
+                    "resolved": "(event: MouseEvent) => void",
+                    "references": {
+                        "KupPlannerBarDisplayProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerBarDisplayProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "setGanttEvent": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "(gantt: KupPlannerGanttEvent) => void",
+                    "resolved": "(gantt: KupPlannerGanttEvent) => void",
+                    "references": {
+                        "KupPlannerGanttEvent": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerGanttEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "xStep": {},
+            "initEventX1Delta": {},
+            "initEventXClick": {},
+            "isMoving": {},
+            "point": {},
+            "svg": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "columnWidth",
+                "methodName": "updateXStep"
+            }, {
+                "propName": "dates",
+                "methodName": "updateXStep"
+            }, {
+                "propName": "timeStep",
+                "methodName": "updateXStep"
+            }, {
+                "propName": "ganttEvent",
+                "methodName": "updateSvgMove"
+            }, {
+                "propName": "xStep",
+                "methodName": "updateSvgMove"
+            }, {
+                "propName": "timeStep",
+                "methodName": "updateSvgMove"
+            }, {
+                "propName": "svg",
+                "methodName": "updateSvgMove"
+            }, {
+                "propName": "initEventX1Delta",
+                "methodName": "updateSvgMove"
+            }, {
+                "propName": "point",
+                "methodName": "updateSvgMove"
+            }, {
+                "propName": "rtl",
+                "methodName": "updateSvgMove"
+            }, {
+                "propName": "onProgressChange",
+                "methodName": "updateSvgMove"
+            }, {
+                "propName": "onDateChange",
+                "methodName": "updateSvgMove"
+            }];
+    }
+}