@sme.up/ketchup 9.2.0 → 9.3.0

package/dist/cjs/kup-gantt_10.cjs.entry.js

@@ -0,0 +1,1076 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-8f2f4159.js');
+const kupPlannerRendererHelper = require('./kup-planner-renderer-helper-c2394940.js');
+const bar_helpers = require('./bar.helpers-f46a5a83.js');
+const kupPlannerDeclarations = require('./kup-planner-declarations-d3dec885.js');
+require('./kup-dates-0e59b05d.js');
+
+const kupGanttCss = ".wrapper{display:flex;padding:0;margin:0;list-style:none;outline:none;position:relative}.ganttContainer{background:#efefef;border-radius:8px;margin:12px;overflow:hidden;padding:12px}.ganttVerticalContainer{overflow:hidden;font-size:0;margin:0;padding:0}.horizontalContainer{margin:0;padding:0;overflow:hidden}.task-gantt{overflow:hidden}.tasks{border-radius:8px;background:#efefef;margin:12px;padding:12px}";
+
+const KupGantt = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ganttId = undefined;
+        this.tasks = undefined;
+        this.headerHeight = 114;
+        this.columnWidth = 60;
+        this.listCellWidth = '297px';
+        this.rowHeight = 50;
+        this.filter = undefined;
+        this.ganttHeight = 0;
+        this.viewMode = 'month';
+        this.preStepsCount = 1;
+        this.locale = 'en-GB';
+        this.barFill = 60;
+        this.projectFill = 80;
+        this.timelineFill = 40;
+        this.barCornerRadius = 3;
+        this.barProgressColor = '#a3a3ff';
+        this.barProgressSelectedColor = '#8282f5';
+        this.barBackgroundColor = '#b8c2cc';
+        this.barBackgroundSelectedColor = '#aeb8c2';
+        this.projectProgressColor = '#7db59a';
+        this.projectProgressSelectedColor = '#59a985';
+        this.projectBackgroundColor = '#fac465';
+        this.projectBackgroundSelectedColor = '#f7bb53';
+        this.rtl = false;
+        this.handleWidth = 8;
+        this.timeStep = 300000;
+        this.arrowColor = 'grey';
+        this.fontFamily = 'Arial, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue';
+        this.fontSize = '14px';
+        this.arrowIndent = 20;
+        this.todayColor = '#ff0000';
+        this.viewDate = undefined;
+        this.TooltipContent = (index.h("kup-standard-tooltip", null));
+        this.TaskListHeader = (index.h("kup-task-list-header", null));
+        this.TaskListTable = (index.h("kup-task-list-table", null));
+        this.dateTimeFormatters = undefined;
+        this.singleLineHeader = false;
+        this.hideLabel = false;
+        this.showSecondaryDates = false;
+        this.hideDependencies = false;
+        this.projection = undefined;
+        this.displayedStartDate = undefined;
+        this.displayedEndDate = undefined;
+        this.initialScrollX = -1;
+        this.initialScrollY = 0;
+        this.readOnly = undefined;
+        this.currentTasks = [];
+        this.label = undefined;
+        this.doubleView = undefined;
+        this.setDoubleView = undefined;
+        this.barContextMenu = undefined;
+        this.scrollXChange = undefined;
+        this.scrollYChange = undefined;
+        this.barClick = undefined;
+        this.barDblClick = undefined;
+        this.dateChange = undefined;
+        this.select = undefined;
+        this.handleClick = undefined;
+        this.handleDblClick = undefined;
+        this.handleContextMenu = undefined;
+        this.ganttOnClick = undefined;
+        this.ganttOnDblClick = undefined;
+        this.ganttonOnContextMenu = undefined;
+        this.progressChange = undefined;
+        this.doubleClick = undefined;
+        this.delete = undefined;
+        this.expanderClick = undefined;
+        this.wrapperRef = undefined;
+        this.taskGanttRef = null;
+        this.taskListRef = undefined;
+        this.dateSetup = undefined;
+        this.taskListWidth = 0;
+        this.svgContainerWidth = 0;
+        this.svgContainerHeight = this.ganttHeight;
+        this.barTasks = [];
+        this.ganttEvent = { action: '' };
+        this.taskHeight = (this.rowHeight * this.barFill) / 100;
+        this.projectHeight = (this.rowHeight * this.projectFill) / 100;
+        this.timelineHeight = (this.rowHeight * this.timelineFill) / 100;
+        this.selectedTask = undefined;
+        this.failedTask = null;
+        this.svgWidth = undefined;
+        this.ganttFullHeight = undefined;
+        this.scrollX = 0;
+        this.scrollY = -1;
+        this.ignoreScrollEvent = false;
+        this.currentDateIndicatorContent = undefined;
+        this.projectionContent = undefined;
+    }
+    //---- Lifecycle hooks ----
+    componentWillLoad() {
+        this.updateGanttData();
+        this.loadStates();
+    }
+    loadStates() {
+        var _a, _b;
+        this.scrollX = this.initialScrollX;
+        this.scrollY = this.initialScrollY;
+        const [startDate, endDate] = kupPlannerRendererHelper.ganttDateRangeFromTask(this.tasks, this.viewMode, this.preStepsCount, this.showSecondaryDates, this.displayedStartDate, this.displayedEndDate);
+        this.dateSetup = {
+            viewMode: this.viewMode,
+            dates: kupPlannerRendererHelper.seedDates(startDate, endDate, this.viewMode),
+        };
+        this.svgWidth = ((_b = (_a = this.dateSetup) === null || _a === void 0 ? void 0 : _a.dates) === null || _b === void 0 ? void 0 : _b.length) * this.columnWidth;
+        this.ganttFullHeight = this.barTasks.length * this.rowHeight;
+    }
+    componentDidRender() {
+        this.taskGanttRef = this.rootElement
+            .querySelector('kup-task-gantt')
+            .querySelector('.ganttVerticalContainer');
+    }
+    componentDidLoad() {
+        this.updateScrollLeftAndScrollTop();
+        window.addEventListener('gantt-sync-scroll-event', this.onGanttSyncScrollEvent.bind(this));
+    }
+    /*-------------------------------------------------*/
+    /*                   W A T C H E R S               */
+    /*-------------------------------------------------*/
+    // initial scroll
+    updateInitialScrollY() {
+        if (this.scrollYChange) {
+            this.scrollYChange(this.initialScrollY);
+        }
+        this.scrollY = this.initialScrollY;
+    }
+    // sync scroll event
+    updateInitialScrollX() {
+        window.addEventListener('gantt-sync-scroll-event', function (e) {
+            if (e.detail.id !== this.ganttId) {
+                this.scrollX = e.detail.scrollX;
+                // execute scroll x event
+                if (this.scrollXChange) {
+                    this.scrollXChange(e.detail.scrollX);
+                }
+            }
+        });
+    }
+    // task change events
+    updateGanttData() {
+        let filteredTasks;
+        if (this.expanderClick) {
+            filteredTasks = bar_helpers.removeHiddenTasks(this.tasks);
+        }
+        else {
+            filteredTasks = this.tasks;
+        }
+        filteredTasks = filteredTasks.sort(bar_helpers.sortTasks);
+        const [startDate, endDate] = kupPlannerRendererHelper.ganttDateRangeFromTask(filteredTasks, this.viewMode, this.preStepsCount, this.showSecondaryDates, this.displayedStartDate, this.displayedEndDate);
+        let newDates = kupPlannerRendererHelper.seedDates(startDate, endDate, this.viewMode);
+        if (this.rtl) {
+            newDates = newDates.reverse();
+            if (scrollX === -1) {
+                this.scrollX = newDates.length * this.columnWidth;
+            }
+        }
+        let set = false;
+        if (this.dateSetup && this.dateSetup.dates) {
+            const old = this.dateSetup.dates;
+            if (old.length !== newDates.length) {
+                set = true;
+            }
+            else {
+                for (let i = 0; i < old.length; i++) {
+                    if (old[i].valueOf() !== newDates[i].valueOf()) {
+                        set = true;
+                        break;
+                    }
+                }
+            }
+        }
+        if (set) {
+            this.dateSetup = { dates: newDates, viewMode: this.viewMode };
+        }
+        this.barTasks = bar_helpers.convertToBarTasks(filteredTasks, newDates, this.columnWidth, this.rowHeight, this.taskHeight, this.projectHeight, this.timelineHeight, this.barCornerRadius, this.handleWidth, this.rtl, this.barProgressColor, this.barProgressSelectedColor, this.barBackgroundColor, this.barBackgroundSelectedColor, this.projectProgressColor, this.projectProgressSelectedColor, this.projectBackgroundColor, this.projectBackgroundSelectedColor, this.showSecondaryDates);
+    }
+    updateIgnoreScrollEvent() {
+        if (this.viewMode === this.dateSetup.viewMode &&
+            this.viewDate &&
+            this.initialScrollX < 1) {
+            const dates = this.dateSetup.dates;
+            const index = dates.findIndex((d, i) => this.viewDate.valueOf() >= d.valueOf() &&
+                i + 1 !== dates.length &&
+                this.viewDate.valueOf() < dates[i + 1].valueOf());
+            if (index === -1) {
+                return;
+            }
+            this.ignoreScrollEvent = true;
+            this.scrollX = this.columnWidth * index;
+        }
+    }
+    updateGanttEventAndBarTasks() {
+        const { changedTask, action } = this.ganttEvent;
+        if (changedTask) {
+            if (action === 'delete') {
+                this.ganttEvent = { action: '' };
+                this.barTasks = this.barTasks.filter((t) => t.id !== changedTask.id);
+            }
+            else if (action === 'move' ||
+                action === 'end' ||
+                action === 'start' ||
+                action === 'progress') {
+                const prevStateTask = this.barTasks.find((t) => t.id === changedTask.id);
+                if (prevStateTask &&
+                    (prevStateTask.start.getTime() !==
+                        changedTask.start.getTime() ||
+                        prevStateTask.end.getTime() !==
+                            changedTask.end.getTime() ||
+                        prevStateTask.progress !== changedTask.progress)) {
+                    // actions for change
+                    const newTaskList = this.barTasks.map((t) => t.id === changedTask.id ? changedTask : t);
+                    this.barTasks = newTaskList;
+                }
+            }
+        }
+    }
+    updateFailedTasksAndBarChart() {
+        if (this.failedTask) {
+            this.barTasks = this.barTasks.map((t) => t.id !== this.failedTask.id ? t : this.failedTask);
+            this.failedTask = null;
+        }
+    }
+    updateTaskListWidth() {
+        if (!this.listCellWidth) {
+            this.taskListWidth = 0;
+        }
+        if (this.taskListRef) {
+            this.taskListWidth = this.taskListRef.offsetWidth;
+        }
+    }
+    updateSvgContainerWidth() {
+        if (this.wrapperRef) {
+            this.svgContainerWidth =
+                this.wrapperRef.offsetWidth - this.taskListWidth;
+        }
+    }
+    updateSvgContainerHeight() {
+        if (this.ganttHeight) {
+            this.svgContainerHeight = this.ganttHeight + this.headerHeight;
+        }
+        else {
+            this.svgContainerHeight =
+                this.tasks.length * this.rowHeight + this.headerHeight;
+        }
+    }
+    handleWheel(event) {
+        const wrapperRefLocal = this.wrapperRef; // Replace with your actual wrapper class
+        if (!wrapperRefLocal)
+            return;
+        if ((event === null || event === void 0 ? void 0 : event.type) !== 'wheel')
+            return;
+        if (event.shiftKey || event.deltaX) {
+            const scrollMove = event.deltaX ? event.deltaX : event.deltaY;
+            let newScrollX = this.scrollX + scrollMove;
+            if (newScrollX < 0) {
+                newScrollX = 0;
+            }
+            else if (newScrollX > this.svgWidth) {
+                newScrollX = this.svgWidth;
+            }
+            this.scrollX = newScrollX;
+            window.dispatchEvent(new CustomEvent('gantt-sync-scroll-event', {
+                detail: {
+                    componentId: this.ganttId,
+                    scrollX: newScrollX,
+                },
+            }));
+            event.preventDefault();
+        }
+        else if (this.ganttHeight) {
+            let newScrollY = this.scrollY + event.deltaY;
+            if (newScrollY < 0) {
+                newScrollY = 0;
+            }
+            else if (newScrollY > Math.abs(this.ganttFullHeight - this.ganttHeight)) {
+                newScrollY = Math.abs(this.ganttFullHeight - this.ganttHeight);
+            }
+            if (newScrollY !== this.scrollY) {
+                if (this.scrollYChange) {
+                    this.scrollYChange(newScrollY);
+                }
+                this.scrollY = newScrollY;
+                event.preventDefault();
+            }
+        }
+        this.ignoreScrollEvent = true;
+    }
+    updateCurrentDateIndicatorContent() {
+        const x = bar_helpers.calculateCurrentDateCalculator(this.dateSetup.dates, this.columnWidth);
+        if (x !== 0) {
+            this.currentDateIndicatorContent = {
+                color: this.todayColor,
+                x,
+            };
+        }
+    }
+    updateProjectionContent() {
+        if (this.projection) {
+            const { x0, xf } = bar_helpers.calculateProjection(this.projection.start, this.projection.end, this.dateSetup.dates, this.columnWidth);
+            this.projectionContent = {
+                x0,
+                xf,
+                color: this.projection.color,
+            };
+        }
+        else {
+            this.projectionContent = undefined;
+        }
+    }
+    updateSvgWidth() {
+        var _a, _b;
+        this.svgWidth = ((_b = (_a = this.dateSetup) === null || _a === void 0 ? void 0 : _a.dates) === null || _b === void 0 ? void 0 : _b.length) * this.columnWidth;
+    }
+    updateGanttFullHeight() {
+        this.ganttFullHeight = this.barTasks.length * this.rowHeight;
+    }
+    onGanttSyncScrollEvent(e) {
+        if (e.detail.componentId !== this.ganttId) {
+            this.scrollX = e.detail.scrollX;
+            // execute scroll x event
+            if (this.scrollXChange) {
+                this.scrollXChange(e.detail.scrollX);
+            }
+        }
+    }
+    updateScrollLeftAndScrollTop() {
+        if (this.wrapperRef) {
+            const wrap = this.wrapperRef;
+            if (wrap) {
+                if (this.scrollX !== -1) {
+                    const setScrollLeft = () => {
+                        wrap.scrollLeft = this.scrollX;
+                    };
+                    setTimeout(setScrollLeft, 125);
+                }
+                if (this.scrollY !== 0) {
+                    const setScrollTop = () => {
+                        wrap.scrollTop = this.scrollY;
+                    };
+                    setTimeout(setScrollTop, 125);
+                }
+            }
+        }
+    }
+    handleScrollY(event) {
+        const currentTarget = event.currentTarget;
+        if (this.scrollY !== currentTarget.scrollTop) {
+            if (!this.ignoreScrollEvent) {
+                // Execute scroll Y event
+                if (this.scrollYChange) {
+                    this.scrollYChange(currentTarget.scrollTop);
+                }
+                this.scrollY = currentTarget.scrollTop;
+                this.ignoreScrollEvent = true;
+            }
+            else {
+                this.ignoreScrollEvent = false;
+            }
+        }
+        else {
+            this.ignoreScrollEvent = false;
+        }
+    }
+    handleScrollX(event) {
+        const currentTarget = event.currentTarget;
+        if (this.scrollX !== currentTarget.scrollLeft &&
+            !this.ignoreScrollEvent) {
+            this.scrollX = currentTarget.scrollLeft;
+            this.ignoreScrollEvent = true;
+            // Emit event to sync scroll
+            const id = this.ganttId;
+            window.dispatchEvent(new CustomEvent('gantt-sync-scroll-event', {
+                detail: {
+                    componentId: id,
+                    scrollX: currentTarget.scrollLeft,
+                },
+            }));
+        }
+        else {
+            this.ignoreScrollEvent = false;
+        }
+    }
+    handleKeyDown(event) {
+        if (event.target.tagName === 'INPUT') {
+            return;
+        }
+        event.preventDefault();
+        let newScrollY = this.scrollY;
+        let newScrollX = this.scrollX;
+        let isX = true;
+        switch (event.key) {
+            case 'Down': // IE/Edge specific value
+            case 'ArrowDown':
+                newScrollY += this.rowHeight;
+                isX = false;
+                break;
+            case 'Up': // IE/Edge specific value
+            case 'ArrowUp':
+                newScrollY -= this.rowHeight;
+                isX = false;
+                break;
+            case 'Left':
+            case 'ArrowLeft':
+                newScrollX -= this.columnWidth;
+                break;
+            case 'Right': // IE/Edge specific value
+            case 'ArrowRight':
+                newScrollX += this.columnWidth;
+                break;
+        }
+        if (isX) {
+            if (newScrollX < 0) {
+                newScrollX = 0;
+            }
+            else if (newScrollX > this.svgWidth) {
+                newScrollX = this.svgWidth;
+            }
+            this.scrollX = newScrollX;
+            // Emit event to sync scroll
+            window.dispatchEvent(new CustomEvent('gantt-sync-scroll-event', {
+                detail: {
+                    componentId: this.ganttId,
+                    scrollX: newScrollX,
+                },
+            }));
+        }
+        else {
+            if (newScrollY < 0) {
+                newScrollY = 0;
+            }
+            else if (newScrollY > this.ganttFullHeight - this.ganttHeight) {
+                newScrollY = this.ganttFullHeight - this.ganttHeight;
+            }
+            // Execute scroll y event
+            if (this.scrollYChange) {
+                this.scrollYChange(newScrollY);
+            }
+            this.scrollY = newScrollY;
+        }
+        this.ignoreScrollEvent = true;
+    }
+    handleSelectedTask(taskId) {
+        const newSelectedTask = this.barTasks.find((t) => t.id === taskId);
+        const oldSelectedTask = this.barTasks.find((t) => !!this.selectedTask && t.id === this.selectedTask.id);
+        if (this.select) {
+            if (oldSelectedTask) {
+                this.select(oldSelectedTask, false);
+            }
+            if (newSelectedTask) {
+                this.select(newSelectedTask, true);
+            }
+        }
+        this.selectedTask = newSelectedTask;
+    }
+    handleExpanderClick(task) {
+        if (this.expanderClick && task.hideChildren !== undefined) {
+            this.expanderClick(Object.assign(Object.assign({}, task), { hideChildren: !task.hideChildren }));
+        }
+    }
+    setFailedTask(task) {
+        this.failedTask = task;
+    }
+    setGanttEvent(gantt) {
+        this.ganttEvent = gantt;
+    }
+    render() {
+        var _a, _b;
+        const gridProps = {
+            columnWidth: this.columnWidth,
+            svgWidth: this.svgWidth,
+            tasks: this.tasks,
+            rowHeight: this.rowHeight,
+            dates: (_a = this.dateSetup) === null || _a === void 0 ? void 0 : _a.dates,
+            todayColor: this.todayColor,
+            rtl: this.rtl,
+        };
+        const calendarProps = {
+            dateSetup: this.dateSetup,
+            locale: this.locale,
+            viewMode: this.viewMode,
+            headerHeight: this.headerHeight,
+            columnWidth: this.columnWidth,
+            fontFamily: this.fontFamily,
+            fontSize: this.fontSize,
+            rtl: this.rtl,
+            dateTimeFormatters: this.dateTimeFormatters,
+            singleLineHeader: this.singleLineHeader,
+            currentDateIndicator: this.currentDateIndicatorContent,
+        };
+        const barProps = {
+            tasks: this.barTasks,
+            dates: (_b = this.dateSetup) === null || _b === void 0 ? void 0 : _b.dates,
+            ganttEvent: this.ganttEvent,
+            selectedTask: this.selectedTask,
+            rowHeight: this.rowHeight,
+            taskHeight: this.taskHeight,
+            columnWidth: this.columnWidth,
+            arrowColor: this.hideDependencies ? 'transparent' : this.arrowColor,
+            timeStep: this.timeStep,
+            fontFamily: this.fontFamily,
+            fontSize: this.fontSize,
+            arrowIndent: this.arrowIndent,
+            svgWidth: this.svgWidth,
+            rtl: this.rtl,
+            hideLabel: this.hideLabel,
+            showSecondaryDates: this.showSecondaryDates,
+            ganttHeight: this.ganttHeight,
+            currentDateIndicator: this.currentDateIndicatorContent,
+            projection: this.projectionContent,
+            readOnly: this.readOnly,
+            setGanttEvent: this.setGanttEvent.bind(this),
+            setFailedTask: this.setFailedTask.bind(this),
+            setSelectedTask: this.handleSelectedTask.bind(this),
+            dateChange: this.dateChange,
+            progressChange: this.progressChange,
+            doubleClick: this.doubleClick,
+            barClick: this.barClick,
+            barDblClick: this.barDblClick,
+            barContextMenu: this.barContextMenu,
+            delete: this.delete,
+        };
+        const tableProps = {
+            rowHeight: this.rowHeight,
+            rowWidth: this.listCellWidth,
+            fontFamily: this.fontFamily,
+            fontSize: this.fontSize,
+            tasks: this.barTasks,
+            locale: this.locale,
+            headerHeight: this.headerHeight,
+            scrollY: this.scrollY,
+            ganttHeight: this.ganttHeight,
+            filter: this.filter,
+            horizontalContainerClass: 'horizontalContainer',
+            selectedTask: this.selectedTask,
+            taskListRef: this.taskListRef,
+            setSelectedTask: this.handleSelectedTask.bind(this),
+            expanderClick: this.handleExpanderClick.bind(this),
+            TaskListHeader: this.TaskListHeader,
+            TaskListTable: this.TaskListTable,
+        };
+        return (index.h("div", { class: "gannt-wrapper-main" }, index.h("div", { class: "wrapper", onKeyDown: this.handleKeyDown.bind(this), tabIndex: 0, ref: (el) => (this.wrapperRef = el) }, this.listCellWidth && (index.h("kup-task-list", Object.assign({ currentTasks: this.currentTasks, handleClick: this.handleClick, handleDblClick: this.handleDblClick, handleContextMenu: this.handleContextMenu, ganttOnClick: this.ganttOnClick, ganttOnDblClick: this.ganttOnDblClick, ganttonOnContextMenu: this.ganttonOnContextMenu, label: this.label, doubleView: this.doubleView, setDoubleView: this.setDoubleView }, tableProps, { class: "tasks" }))), index.h("kup-task-gantt", { gridProps: gridProps, calendarProps: calendarProps, barProps: barProps, ganttHeight: this.ganttHeight, taskGanttRef: this.taskGanttRef, scrollY: this.scrollY, scrollX: this.scrollX, class: "ganttContainer" }), this.ganttEvent.changedTask && (index.h("kup-tooltip", { arrowIndent: this.arrowIndent, rowHeight: this.rowHeight, svgContainerHeight: this.svgContainerHeight, svgContainerWidth: this.svgContainerWidth, fontFamily: this.fontFamily, fontSize: this.fontSize, scrollX: this.scrollX, scrollY: this.scrollY, task: this.ganttEvent.changedTask, headerHeight: this.headerHeight, taskListWidth: this.taskListWidth, TooltipContent: this.TooltipContent, rtl: this.rtl, svgWidth: this.svgWidth })), index.h("kup-vertical-scroll", { ganttFullHeight: this.ganttFullHeight, ganttHeight: this.ganttHeight, headerHeight: this.headerHeight, scrollNumber: this.scrollY, verticalScroll: this.handleScrollY.bind(this), rtl: this.rtl })), this.taskGanttRef && (index.h("kup-horizontal-scroll", { svgWidth: this.svgWidth, taskGanttRef: this.taskGanttRef, taskListWidth: this.taskListWidth, scrollNumber: this.scrollX, rtl: this.rtl, horizontalScroll: this.handleScrollX.bind(this) }))));
+    }
+    get rootElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "initialScrollY": ["updateInitialScrollY"],
+        "scrollYChange": ["updateInitialScrollY"],
+        "initialScrollX": ["updateInitialScrollX", "updateIgnoreScrollEvent"],
+        "scrollXChange": ["updateInitialScrollX"],
+        "tasks": ["updateGanttData", "updateSvgContainerHeight"],
+        "viewMode": ["updateGanttData", "updateIgnoreScrollEvent"],
+        "preStepsCount": ["updateGanttData"],
+        "rowHeight": ["updateGanttData", "updateSvgContainerHeight", "updateGanttFullHeight"],
+        "barCornerRadius": ["updateGanttData"],
+        "columnWidth": ["updateGanttData", "updateIgnoreScrollEvent", "updateCurrentDateIndicatorContent", "updateProjectionContent", "updateSvgWidth"],
+        "taskHeight": ["updateGanttData"],
+        "handleWidth": ["updateGanttData"],
+        "barProgressColor": ["updateGanttData"],
+        "barProgressSelectedColor": ["updateGanttData"],
+        "barBackgroundColor": ["updateGanttData"],
+        "barBackgroundSelectedColor": ["updateGanttData"],
+        "projectProgressColor": ["updateGanttData"],
+        "projectProgressSelectedColor": ["updateGanttData"],
+        "projectBackgroundColor": ["updateGanttData"],
+        "projectBackgroundSelectedColor": ["updateGanttData"],
+        "milestoneBackgroundColor": ["updateGanttData"],
+        "milestoneBackgroundSelectedColor": ["updateGanttData"],
+        "rtl": ["updateGanttData", "handleWheel"],
+        "scrollX": ["updateGanttData", "handleWheel"],
+        "onExpanderClick": ["updateGanttData"],
+        "showSecondaryDates": ["updateGanttData"],
+        "projectHeight": ["updateGanttData"],
+        "timelineHeight": ["updateGanttData"],
+        "displayedStartDate": ["updateGanttData"],
+        "displayedEndDate": ["updateGanttData"],
+        "dateSetup": ["updateGanttData", "updateIgnoreScrollEvent", "updateCurrentDateIndicatorContent", "updateProjectionContent", "updateSvgWidth"],
+        "viewDate": ["updateIgnoreScrollEvent"],
+        "ganttEvent": ["updateGanttEventAndBarTasks"],
+        "failedTask": ["updateFailedTasksAndBarChart"],
+        "barTasks": ["updateFailedTasksAndBarChart", "updateGanttFullHeight"],
+        "taskListRef": ["updateTaskListWidth"],
+        "listCellWidth": ["updateTaskListWidth"],
+        "wrapperRef": ["updateSvgContainerWidth", "handleWheel"],
+        "ganttHeight": ["updateSvgContainerHeight", "handleWheel"],
+        "headerHeight": ["updateSvgContainerHeight"],
+        "scrollY": ["handleWheel"],
+        "svgWidth": ["handleWheel"],
+        "ganttFullHeight": ["handleWheel"],
+        "todayColor": ["updateCurrentDateIndicatorContent"],
+        "projection": ["updateProjectionContent"]
+    }; }
+};
+KupGantt.style = kupGanttCss;
+
+const kupHorizontalScrollCss = ".scrollWrapper{overflow:auto;max-width:100%;scrollbar-width:thin;height:1.2rem}.scrollWrapper::-webkit-scrollbar{width:1.1rem;height:1.1rem}.scrollWrapper::-webkit-scrollbar-corner{background:transparent}.scrollWrapper::-webkit-scrollbar-thumb{border:6px solid transparent;background:rgba(0, 0, 0, 0.2);background:var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));border-radius:10px;background-clip:padding-box}.scrollWrapper::-webkit-scrollbar-thumb:hover{border:4px solid transparent;background:rgba(0, 0, 0, 0.3);background:var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));background-clip:padding-box}.scroll{height:1px}";
+
+const HorizontalScroll = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.scrollNumber = undefined;
+        this.svgWidth = undefined;
+        this.taskGanttRef = undefined;
+        this.rtl = undefined;
+        this.taskListWidth = undefined;
+        this.horizontalScroll = undefined;
+        this.timeoutId = undefined;
+    }
+    //---- Lifecycle hooks ----
+    componentDidLoad() {
+        this.scrollLeft();
+    }
+    /*-------------------------------------------------*/
+    /*                   W A T C H E R S               */
+    /*-------------------------------------------------*/
+    scrollLeft() {
+        clearTimeout(this.timeoutId);
+        this.timeoutId = setTimeout(() => {
+            this.setScrollLeft();
+        }, 50);
+    }
+    setScrollLeft() {
+        if (this.rootElement) {
+            this.rootElement.shadowRoot.querySelector('div').scrollLeft =
+                this.scrollNumber;
+        }
+    }
+    render() {
+        const rect = this.taskGanttRef.getBoundingClientRect();
+        return (index.h("div", { dir: "ltr", style: rect
+                ? {
+                    margin: this.rtl
+                        ? `0px ${rect.x}px 0px 0px`
+                        : `0px 0px 0px ${rect.x}px`,
+                }
+                : undefined, class: "scrollWrapper", "data-scrollx": "true", onScroll: this.horizontalScroll }, index.h("div", { style: { width: `${this.svgWidth}px` }, class: "scroll" })));
+    }
+    get rootElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "scrollNumber": ["scrollLeft"]
+    }; }
+};
+HorizontalScroll.style = kupHorizontalScrollCss;
+
+const kupTooltipCss$1 = ".tooltipDefaultContainer{background:#fff;padding:12px;box-shadow:0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)}.tooltipDefaultContainerParagraph{font-size:12px;margin-bottom:6px;color:#666}.tooltipDetailsContainer{position:absolute;display:flex;flex-shrink:0;pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tooltipDetailsContainerHidden{visibility:hidden;position:absolute;display:flex;pointer-events:none}";
+
+const StandardTooltipContent = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.task = undefined;
+        this.fontSize = undefined;
+        this.fontFamily = undefined;
+    }
+    render() {
+        return (index.h("div", { class: "tooltipDefaultContainer", style: { fontSize: this.fontSize, fontFamily: this.fontFamily } }, index.h("b", { style: { fontSize: `${parseInt(this.fontSize) + 6}px` } }, `${this.task.name}: ${this.task.start.getDate()}-${this.task.start.getMonth() + 1}-${this.task.start.getFullYear()} - ${this.task.end.getDate()}-${this.task.end.getMonth() + 1}-${this.task.end.getFullYear()}`), this.task.end.getTime() - this.task.start.getTime() !== 0 && (index.h("p", { class: "tooltipDefaultContainerParagraph" }, `Duration: ${~~((this.task.end.getTime() - this.task.start.getTime()) / (1000 * 60 * 60 * 24))} day(s)`)), index.h("p", { class: "tooltipDefaultContainerParagraph" }, !!this.task.progress && `Progress: ${this.task.progress} %`)));
+    }
+};
+StandardTooltipContent.style = kupTooltipCss$1;
+
+const kupSwitcherCss = ".switcher{display:grid;grid-auto-flow:column;grid-gap:8px;margin-left:12px;width:max-content}.button{background:transparent;border-color:var(--kup-primary-color, #003b77);border-radius:4px;border-width:1px;box-shadow:0 3px 1px -2px rgba(var(--kup-text-color-rgb, 51 51 51), 0.2), 0 2px 2px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.14), 0 1px 5px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.12);box-sizing:border-box;color:var(--kup-primary-color, #003b77);cursor:pointer;font-size:11px;height:32px;min-width:64px}.label{font-family:var(--kup-font-family, inherit);font-size:11px;letter-spacing:0.0892857143em;text-decoration:none;text-transform:uppercase;padding:0 6px}";
+
+const KupSwitcher = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.timeUnitChange = undefined;
+    }
+    render() {
+        const day = () => this.timeUnitChange('day');
+        const week = () => this.timeUnitChange('week');
+        const month = () => this.timeUnitChange('month');
+        const year = () => this.timeUnitChange('year');
+        return (index.h("div", { class: "switcher" }, index.h("button", { type: "button", class: "button", onClick: day }, index.h("span", { class: "label" }, "Day")), index.h("button", { type: "button", class: "button", onClick: week }, index.h("span", { class: "label" }, "Week")), index.h("button", { type: "button", class: "button", onClick: month }, index.h("span", { class: "label" }, "Month")), index.h("button", { type: "button", class: "button", onClick: year }, index.h("span", { class: "label" }, "Year"))));
+    }
+};
+KupSwitcher.style = kupSwitcherCss;
+
+const TaskGantt = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.gridProps = undefined;
+        this.calendarProps = undefined;
+        this.barProps = undefined;
+        this.taskGanttRef = undefined;
+        this.ganttHeight = undefined;
+        this.scrollY = undefined;
+        this.scrollX = undefined;
+    }
+    /*-------------------------------------------------*/
+    /*                   W A T C H E R S               */
+    /*-------------------------------------------------*/
+    updateScrollX() {
+        setTimeout(() => {
+            this.verticalGanttContainerRef &&
+                (this.verticalGanttContainerRef.scrollLeft = this.scrollX);
+        }, 30);
+    }
+    updateScrollY() {
+        setTimeout(() => {
+            this.horizontalContainerRef &&
+                (this.horizontalContainerRef.scrollTop = this.scrollY);
+        }, 30);
+    }
+    //---- Lifecycle hooks ----
+    componentDidLoad() {
+        this.updateScrollX();
+        this.updateScrollY();
+    }
+    render() {
+        const newBarProps = Object.assign(Object.assign({}, this.barProps), { gridProps: this.gridProps });
+        return (index.h("div", { class: "ganttVerticalContainer", ref: (el) => (this.verticalGanttContainerRef = el), dir: "ltr" }, index.h("kup-gantt-calendar", { dateSetup: this.calendarProps.dateSetup, locale: this.calendarProps.locale, rtl: this.calendarProps.rtl, headerHeight: this.calendarProps.headerHeight, columnWidth: this.calendarProps.columnWidth, fontFamily: this.calendarProps.fontFamily, fontSize: this.calendarProps.fontSize, dateTimeFormatters: this.calendarProps.dateTimeFormatters, singleLineHeader: this.calendarProps.singleLineHeader, currentDateIndicator: this.calendarProps.currentDateIndicator, svgWidth: this.gridProps.svgWidth }), index.h("div", { ref: (el) => (this.horizontalContainerRef = el), class: "horizontalContainer", style: this.ganttHeight
+                ? {
+                    height: `${this.ganttHeight}px`,
+                    width: `${this.gridProps.svgWidth}px`,
+                }
+                : { width: `${this.gridProps.svgWidth}px` } }, index.h("kup-grid-renderer", Object.assign({}, newBarProps)))));
+    }
+    get rootElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "scrollX": ["updateScrollX"],
+        "verticalGanttContainerRef": ["updateScrollX"],
+        "scrollY": ["updateScrollY"],
+        "horizontalContainerRef": ["updateScrollY"]
+    }; }
+};
+
+const kupTaskListCss$2 = ".tasks{border-radius:8px;background:#efefef;margin:12px;padding:12px}.taskListWrapper{display:table;border-bottom:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.taskListTableRow{display:table-row;text-overflow:ellipsis}.taskListCell{display:table-cell;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.taskListNameWrapper{display:flex}.taskListExpander{color:rgb(86, 86, 86);font-size:0.6rem;padding:0.15rem 0.2rem 0 0.2rem;user-select:none;cursor:pointer}.taskListEmptyExpander{font-size:0.6rem;padding-left:1rem;user-select:none}.ganttTable{display:table;border-bottom:#e6e4e4 1px solid;border-top:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.ganttTable_Header{display:table-row;list-style:none}.ganttTable_HeaderSeparator{border-right:1px solid rgb(196, 196, 196);opacity:1;margin-left:-2px}.ganttTable_HeaderItem{display:table-cell;vertical-align:-webkit-baseline-middle;vertical-align:middle}";
+
+const TaskList = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.headerHeight = undefined;
+        this.fontFamily = undefined;
+        this.fontSize = undefined;
+        this.rowWidth = undefined;
+        this.rowHeight = undefined;
+        this.scrollY = undefined;
+        this.locale = undefined;
+        this.tasks = undefined;
+        this.selectedTask = undefined;
+        this.horizontalContainerClass = undefined;
+        this.ganttHeight = undefined;
+        this.filter = undefined;
+        this.TaskListHeader = undefined;
+        this.TaskListTable = undefined;
+        this.currentTasks = undefined;
+        this.label = undefined;
+        this.doubleView = undefined;
+        this.setDoubleView = undefined;
+        this.handleClick = undefined;
+        this.handleDblClick = undefined;
+        this.handleContextMenu = undefined;
+        this.ganttOnClick = undefined;
+        this.ganttOnDblClick = undefined;
+        this.ganttonOnContextMenu = undefined;
+        this.setSelectedTask = undefined;
+        this.expanderClick = undefined;
+        this.selectedTaskId = '';
+    }
+    componentDidLoad() {
+        this.taskListRef.prepend(this.filter);
+    }
+    componentDidUpdate() {
+        if (this.taskListRef) {
+            this.taskListRef.scrollTop = this.scrollY;
+        }
+    }
+    /*-------------------------------------------------*/
+    /*                   W A T C H E R S               */
+    /*-------------------------------------------------*/
+    updateScrollY() {
+        this.horizontalContainerRef &&
+            (this.horizontalContainerRef.scrollTop = this.scrollY);
+    }
+    render() {
+        var _a;
+        const headerProps = {
+            headerHeight: this.headerHeight,
+            fontFamily: this.fontFamily,
+            fontSize: this.fontSize,
+            rowWidth: this.rowWidth,
+        };
+        if (this.selectedTask) {
+            this.selectedTaskId = this.selectedTask.id;
+        }
+        const tableProps = {
+            rowHeight: this.rowHeight,
+            rowWidth: this.rowWidth,
+            fontFamily: this.fontFamily,
+            fontSize: this.fontSize,
+            tasks: this.tasks,
+            locale: this.locale,
+            selectedTaskId: this.selectedTaskId,
+            setSelectedTask: this.setSelectedTask.bind(this),
+            onExpanderClick: this.expanderClick,
+        };
+        const TaskListHeader = this.TaskListHeader;
+        if (TaskListHeader && TaskListHeader['$attrs$']) {
+            Object.assign(TaskListHeader['$attrs$'], Object.assign({}, headerProps));
+        }
+        const TaskListTable = this.TaskListTable;
+        if (TaskListTable && TaskListTable['$attrs$']) {
+            Object.assign(TaskListTable['$attrs$'], Object.assign({}, tableProps));
+        }
+        return (index.h("div", { ref: (el) => (this.taskListRef = el) }, TaskListHeader && TaskListHeader['$attrs$'] ? (TaskListHeader) : (index.h("kup-custom-task-list-header", Object.assign({ label: this.label, doubleView: (_a = this.doubleView) !== null && _a !== void 0 ? _a : false, setDoubleView: this.setDoubleView }, headerProps))), index.h("div", { class: this.horizontalContainerClass, style: this.ganttHeight
+                ? { height: this.ganttHeight + 'px' }
+                : {}, ref: (el) => (this.horizontalContainerRef = el) }, TaskListTable && TaskListTable['$attrs$'] ? (TaskListTable) : (index.h("kup-custom-task-list-table", Object.assign({}, tableProps, { onclickTaskList: (id) => {
+                let row = kupPlannerRendererHelper.getProjectById(id, this.currentTasks);
+                if (!row) {
+                    row = kupPlannerRendererHelper.getPhaseById(id, this.currentTasks);
+                }
+                if (row) {
+                    this.handleClick(row, this.ganttOnClick);
+                }
+            }, ondblclickTaskList: (id) => {
+                let row = kupPlannerRendererHelper.getProjectById(id, this.currentTasks);
+                if (!row) {
+                    row = kupPlannerRendererHelper.getPhaseById(id, this.currentTasks);
+                }
+                if (row) {
+                    this.handleDblClick(row, this.ganttOnDblClick);
+                }
+            }, oncontextmenuTaskList: (event, id) => {
+                let row = kupPlannerRendererHelper.getProjectById(id, this.currentTasks);
+                if (!row) {
+                    row = kupPlannerRendererHelper.getPhaseById(id, this.currentTasks);
+                }
+                if (row) {
+                    this.handleContextMenu(event, row, this.ganttonOnContextMenu);
+                }
+            }, ganttId: kupPlannerDeclarations.KUP_PLANNER_MAIN_GANTT_ID }))))));
+    }
+    get element() { return index.getElement(this); }
+    static get watchers() { return {
+        "scrollY": ["updateScrollY"]
+    }; }
+};
+TaskList.style = kupTaskListCss$2;
+
+const kupTaskListCss$1 = ".tasks{border-radius:8px;background:#efefef;margin:12px;padding:12px}.taskListWrapper{display:table;border-bottom:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.taskListTableRow{display:table-row;text-overflow:ellipsis}.taskListCell{display:table-cell;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.taskListNameWrapper{display:flex}.taskListExpander{color:rgb(86, 86, 86);font-size:0.6rem;padding:0.15rem 0.2rem 0 0.2rem;user-select:none;cursor:pointer}.taskListEmptyExpander{font-size:0.6rem;padding-left:1rem;user-select:none}.ganttTable{display:table;border-bottom:#e6e4e4 1px solid;border-top:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.ganttTable_Header{display:table-row;list-style:none}.ganttTable_HeaderSeparator{border-right:1px solid rgb(196, 196, 196);opacity:1;margin-left:-2px}.ganttTable_HeaderItem{display:table-cell;vertical-align:-webkit-baseline-middle;vertical-align:middle}";
+
+const KupTaskListHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.headerHeight = undefined;
+        this.fontFamily = undefined;
+        this.fontSize = undefined;
+        this.rowWidth = undefined;
+    }
+    render() {
+        return (index.h("div", { class: "ganttTable", style: {
+                fontFamily: this.fontFamily,
+                fontSize: this.fontSize,
+            } }, index.h("div", { class: "ganttTable_Header", style: {
+                height: `${this.headerHeight - 2}px`,
+            } }, index.h("div", { class: "ganttTable_HeaderItem", style: {
+                minWidth: this.rowWidth,
+            } }, "\u00A0Name"), index.h("div", { class: "ganttTable_HeaderSeparator", style: {
+                height: `${this.headerHeight * 0.5}px`,
+                marginTop: `${this.headerHeight * 0.2}px`,
+            } }), index.h("div", { class: "ganttTable_HeaderItem", style: {
+                minWidth: this.rowWidth,
+            } }, "\u00A0From"), index.h("div", { class: "ganttTable_HeaderSeparator", style: {
+                height: `${this.headerHeight * 0.5}px`,
+                marginTop: `${this.headerHeight * 0.25}px`,
+            } }), index.h("div", { class: "ganttTable_HeaderItem", style: {
+                minWidth: this.rowWidth,
+            } }, "\u00A0To"))));
+    }
+};
+KupTaskListHeader.style = kupTaskListCss$1;
+
+const kupTaskListCss = ".tasks{border-radius:8px;background:#efefef;margin:12px;padding:12px}.taskListWrapper{display:table;border-bottom:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.taskListTableRow{display:table-row;text-overflow:ellipsis}.taskListCell{display:table-cell;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.taskListNameWrapper{display:flex}.taskListExpander{color:rgb(86, 86, 86);font-size:0.6rem;padding:0.15rem 0.2rem 0 0.2rem;user-select:none;cursor:pointer}.taskListEmptyExpander{font-size:0.6rem;padding-left:1rem;user-select:none}.ganttTable{display:table;border-bottom:#e6e4e4 1px solid;border-top:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.ganttTable_Header{display:table-row;list-style:none}.ganttTable_HeaderSeparator{border-right:1px solid rgb(196, 196, 196);opacity:1;margin-left:-2px}.ganttTable_HeaderItem{display:table-cell;vertical-align:-webkit-baseline-middle;vertical-align:middle}";
+
+const TaskListTableDefault = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dateTimeOptions = {
+            weekday: 'short',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        };
+        this.rowHeight = undefined;
+        this.rowWidth = undefined;
+        this.fontFamily = undefined;
+        this.fontSize = undefined;
+        this.locale = undefined;
+        this.tasks = undefined;
+        this.selectedTaskId = undefined;
+        this.expandedTasks = new Set();
+        this.setSelectedTask = undefined;
+        this.expanderClick = undefined;
+    }
+    toLocaleDateString(date) {
+        return date.toLocaleDateString(this.locale, this.dateTimeOptions);
+    }
+    render() {
+        return (index.h("div", { class: "taskListWrapper", style: {
+                fontFamily: this.fontFamily,
+                fontSize: this.fontSize,
+            } }, this.tasks.map((task) => (index.h("div", { class: {
+                taskListTableRow: true,
+                expanded: this.expandedTasks.has(task.id),
+            }, style: { height: `${this.rowHeight}px` }, key: `${task.id}row` }, index.h("div", { class: "taskListCell", style: {
+                minWidth: this.rowWidth,
+                maxWidth: this.rowWidth,
+            }, title: task.name }, index.h("div", { class: "taskListNameWrapper" }, index.h("div", { class: {
+                taskListExpander: true,
+                expanded: this.expandedTasks.has(task.id),
+            }, onClick: () => this.expanderClick(task) }, this.expandedTasks.has(task.id)
+            ? '▼'
+            : '▶'), index.h("div", null, task.name))), index.h("div", { class: "taskListCell", style: {
+                minWidth: this.rowWidth,
+                maxWidth: this.rowWidth,
+            } }, "\u00A0", this.toLocaleDateString(task.start)), index.h("div", { class: "taskListCell", style: {
+                minWidth: this.rowWidth,
+                maxWidth: this.rowWidth,
+            } }, "\u00A0", this.toLocaleDateString(task.end)))))));
+    }
+};
+TaskListTableDefault.style = kupTaskListCss;
+
+const kupTooltipCss = ".tooltipDefaultContainer{background:#fff;padding:12px;box-shadow:0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)}.tooltipDefaultContainerParagraph{font-size:12px;margin-bottom:6px;color:#666}.tooltipDetailsContainer{position:absolute;display:flex;flex-shrink:0;pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tooltipDetailsContainerHidden{visibility:hidden;position:absolute;display:flex;pointer-events:none}";
+
+const Tooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.task = undefined;
+        this.rowHeight = undefined;
+        this.rtl = undefined;
+        this.svgContainerHeight = undefined;
+        this.svgContainerWidth = undefined;
+        this.scrollX = undefined;
+        this.scrollY = undefined;
+        this.arrowIndent = undefined;
+        this.fontSize = undefined;
+        this.fontFamily = undefined;
+        this.headerHeight = undefined;
+        this.taskListWidth = undefined;
+        this.TooltipContent = undefined;
+        this.svgWidth = undefined;
+        this.relatedY = 0;
+        this.relatedX = 0;
+    }
+    componentWillLoad() {
+        this.calculateTooltipPosition();
+    }
+    calculateTooltipPosition() {
+        if (this.rootElement) {
+            const tooltipHeight = this.rootElement.offsetHeight * 1.1;
+            const tooltipWidth = this.rootElement.offsetWidth * 1.1;
+            let newRelatedY = this.task.index * this.rowHeight - this.scrollY + this.headerHeight;
+            let newRelatedX;
+            if (this.rtl) {
+                newRelatedX = this.task.x1 - this.arrowIndent * 1.5 - tooltipWidth - this.scrollX;
+                if (newRelatedX < 0) {
+                    newRelatedX = this.task.x2 + this.arrowIndent * 1.5 - this.scrollX;
+                }
+                const tooltipLeftmostPoint = tooltipWidth + newRelatedX;
+                if (tooltipLeftmostPoint > this.svgContainerWidth) {
+                    newRelatedX = this.svgContainerWidth - tooltipWidth;
+                    newRelatedY += this.rowHeight;
+                }
+            }
+            else {
+                newRelatedX = this.task.x2 + this.arrowIndent * 1.5 + this.taskListWidth - this.scrollX;
+                const tooltipLeftmostPoint = tooltipWidth + newRelatedX;
+                const fullChartWidth = this.taskListWidth + this.svgContainerWidth;
+                if (tooltipLeftmostPoint > fullChartWidth) {
+                    newRelatedX = this.task.x1 + this.taskListWidth - this.arrowIndent * 1.5 - this.scrollX - tooltipWidth;
+                }
+                if (newRelatedX < this.taskListWidth) {
+                    newRelatedX = this.svgContainerWidth + this.taskListWidth - tooltipWidth;
+                    newRelatedY += this.rowHeight;
+                }
+            }
+            const tooltipLowerPoint = tooltipHeight + newRelatedY - this.scrollY;
+            if (tooltipLowerPoint > this.svgContainerHeight - this.scrollY) {
+                newRelatedY = this.svgContainerHeight - tooltipHeight;
+            }
+            this.relatedY = newRelatedY;
+            this.relatedX = newRelatedX;
+        }
+    }
+    render() {
+        return (index.h("div", { class: this.relatedX ? 'tooltipDetailsContainer' : 'tooltipDetailsContainerHidden', style: { left: `${this.relatedX}px`, top: `${this.relatedY}px` } }, index.h(this.TooltipContent, { task: this.task, fontSize: this.fontSize, fontFamily: this.fontFamily })));
+    }
+    get rootElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "task": ["calculateTooltipPosition"],
+        "arrowIndent": ["calculateTooltipPosition"],
+        "scrollX": ["calculateTooltipPosition"],
+        "scrollY": ["calculateTooltipPosition"],
+        "headerHeight": ["calculateTooltipPosition"],
+        "taskListWidth": ["calculateTooltipPosition"],
+        "rowHeight": ["calculateTooltipPosition"],
+        "svgContainerHeight": ["calculateTooltipPosition"],
+        "svgContainerWidth": ["calculateTooltipPosition"],
+        "rtl": ["calculateTooltipPosition"]
+    }; }
+};
+Tooltip.style = kupTooltipCss;
+
+const kupVerticalScrollCss = ".scroll{overflow:hidden auto;width:1rem;flex-shrink:0;scrollbar-width:thin}.scroll::-webkit-scrollbar{width:1.1rem;height:1.1rem}.scroll::-webkit-scrollbar-corner{background:transparent}.scroll::-webkit-scrollbar-thumb{border:6px solid transparent;background:rgba(0, 0, 0, 0.2);background:var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));border-radius:10px;background-clip:padding-box}.scroll::-webkit-scrollbar-thumb:hover{border:4px solid transparent;background:rgba(0, 0, 0, 0.3);background:var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));background-clip:padding-box}";
+
+const KupVerticalScroll = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.scrollNumber = undefined;
+        this.ganttHeight = undefined;
+        this.ganttFullHeight = undefined;
+        this.headerHeight = undefined;
+        this.rtl = undefined;
+        this.verticalScroll = undefined;
+    }
+    //---- Lifecycle hooks ----
+    componentDidLoad() {
+        setTimeout(() => {
+            this.updateScroll();
+        }, 50);
+    }
+    /*-------------------------------------------------*/
+    /*                   W A T C H E R S               */
+    /*-------------------------------------------------*/
+    updateScroll() {
+        let id;
+        if (this.scrollRef) {
+            const wrap = this.scrollRef;
+            const setScrollTop = () => {
+                wrap.scrollTop = this.scrollNumber;
+            };
+            id = setTimeout(setScrollTop, 50);
+        }
+        return () => {
+            clearTimeout(id);
+        };
+    }
+    render() {
+        return (index.h("div", { style: {
+                height: `${this.ganttHeight}px`,
+                marginTop: `${this.headerHeight}px`,
+                marginLeft: this.rtl ? '' : '-1rem',
+            }, class: "scroll", onScroll: this.verticalScroll, ref: (el) => (this.scrollRef = el) }, index.h("div", { style: {
+                height: `${this.ganttFullHeight}px`,
+                width: '1px',
+            } })));
+    }
+    get rootElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "scrollNumber": ["updateScroll"]
+    }; }
+};
+KupVerticalScroll.style = kupVerticalScrollCss;
+
+exports.kup_gantt = KupGantt;
+exports.kup_horizontal_scroll = HorizontalScroll;
+exports.kup_standard_tooltip = StandardTooltipContent;
+exports.kup_switcher = KupSwitcher;
+exports.kup_task_gantt = TaskGantt;
+exports.kup_task_list = TaskList;
+exports.kup_task_list_header = KupTaskListHeader;
+exports.kup_task_list_table = TaskListTableDefault;
+exports.kup_tooltip = Tooltip;
+exports.kup_vertical_scroll = KupVerticalScroll;