@sme.up/ketchup 9.2.0 → 9.3.0

package/dist/components/kup-gantt2.js

@@ -0,0 +1,822 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { g as ganttDateRangeFromTask, s as seedDates } from './kup-planner-renderer-helper.js';
+import { r as removeHiddenTasks, s as sortTasks, c as convertToBarTasks, a as calculateCurrentDateCalculator, b as calculateProjection, d as defineCustomElement$9 } from './kup-grid-renderer2.js';
+import { d as defineCustomElement$c } from './custom-task-list-header.js';
+import { d as defineCustomElement$b } from './custom-task-list-table.js';
+import { d as defineCustomElement$a } from './kup-gantt-calendar2.js';
+import { d as defineCustomElement$8 } from './kup-horizontal-scroll2.js';
+import { d as defineCustomElement$7 } from './kup-standard-tooltip2.js';
+import { d as defineCustomElement$6 } from './kup-task-gantt2.js';
+import { d as defineCustomElement$5 } from './kup-task-list2.js';
+import { d as defineCustomElement$4 } from './kup-task-list-header2.js';
+import { d as defineCustomElement$3 } from './kup-task-list-table2.js';
+import { d as defineCustomElement$2 } from './kup-tooltip2.js';
+import { d as defineCustomElement$1 } from './kup-vertical-scroll2.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 = /*@__PURE__*/ proxyCustomElement(class KupGantt extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        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 = (h("kup-standard-tooltip", null));
+        this.TaskListHeader = (h("kup-task-list-header", null));
+        this.TaskListTable = (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] = ganttDateRangeFromTask(this.tasks, this.viewMode, this.preStepsCount, this.showSecondaryDates, this.displayedStartDate, this.displayedEndDate);
+        this.dateSetup = {
+            viewMode: this.viewMode,
+            dates: 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 = removeHiddenTasks(this.tasks);
+        }
+        else {
+            filteredTasks = this.tasks;
+        }
+        filteredTasks = filteredTasks.sort(sortTasks);
+        const [startDate, endDate] = ganttDateRangeFromTask(filteredTasks, this.viewMode, this.preStepsCount, this.showSecondaryDates, this.displayedStartDate, this.displayedEndDate);
+        let newDates = 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 = 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 = calculateCurrentDateCalculator(this.dateSetup.dates, this.columnWidth);
+        if (x !== 0) {
+            this.currentDateIndicatorContent = {
+                color: this.todayColor,
+                x,
+            };
+        }
+    }
+    updateProjectionContent() {
+        if (this.projection) {
+            const { x0, xf } = 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 (h("div", { class: "gannt-wrapper-main" }, h("div", { class: "wrapper", onKeyDown: this.handleKeyDown.bind(this), tabIndex: 0, ref: (el) => (this.wrapperRef = el) }, this.listCellWidth && (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" }))), 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 && (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 })), 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 && (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 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"]
+    }; }
+    static get style() { return kupGanttCss; }
+}, [0, "kup-gantt", {
+        "ganttId": [1, "gantt-id"],
+        "tasks": [16],
+        "headerHeight": [2, "header-height"],
+        "columnWidth": [2, "column-width"],
+        "listCellWidth": [1, "list-cell-width"],
+        "rowHeight": [2, "row-height"],
+        "filter": [16],
+        "ganttHeight": [2, "gantt-height"],
+        "viewMode": [1, "view-mode"],
+        "preStepsCount": [2, "pre-steps-count"],
+        "locale": [1],
+        "barFill": [2, "bar-fill"],
+        "projectFill": [2, "project-fill"],
+        "timelineFill": [2, "timeline-fill"],
+        "barCornerRadius": [2, "bar-corner-radius"],
+        "barProgressColor": [1, "bar-progress-color"],
+        "barProgressSelectedColor": [1, "bar-progress-selected-color"],
+        "barBackgroundColor": [1, "bar-background-color"],
+        "barBackgroundSelectedColor": [1, "bar-background-selected-color"],
+        "projectProgressColor": [1, "project-progress-color"],
+        "projectProgressSelectedColor": [1, "project-progress-selected-color"],
+        "projectBackgroundColor": [1, "project-background-color"],
+        "projectBackgroundSelectedColor": [1, "project-background-selected-color"],
+        "rtl": [4],
+        "handleWidth": [2, "handle-width"],
+        "timeStep": [2, "time-step"],
+        "arrowColor": [1, "arrow-color"],
+        "fontFamily": [1, "font-family"],
+        "fontSize": [1, "font-size"],
+        "arrowIndent": [2, "arrow-indent"],
+        "todayColor": [1, "today-color"],
+        "viewDate": [16],
+        "TooltipContent": [16],
+        "TaskListHeader": [16],
+        "TaskListTable": [16],
+        "dateTimeFormatters": [16],
+        "singleLineHeader": [4, "single-line-header"],
+        "hideLabel": [4, "hide-label"],
+        "showSecondaryDates": [4, "show-secondary-dates"],
+        "hideDependencies": [4, "hide-dependencies"],
+        "projection": [16],
+        "displayedStartDate": [16],
+        "displayedEndDate": [16],
+        "initialScrollX": [2, "initial-scroll-x"],
+        "initialScrollY": [2, "initial-scroll-y"],
+        "readOnly": [4, "read-only"],
+        "currentTasks": [16],
+        "label": [1],
+        "doubleView": [4, "double-view"],
+        "setDoubleView": [16],
+        "barContextMenu": [16],
+        "scrollXChange": [16],
+        "scrollYChange": [16],
+        "barClick": [16],
+        "barDblClick": [16],
+        "dateChange": [16],
+        "select": [16],
+        "handleClick": [16],
+        "handleDblClick": [16],
+        "handleContextMenu": [16],
+        "ganttOnClick": [16],
+        "ganttOnDblClick": [16],
+        "ganttonOnContextMenu": [16],
+        "progressChange": [16],
+        "doubleClick": [16],
+        "delete": [16],
+        "expanderClick": [16],
+        "wrapperRef": [32],
+        "taskGanttRef": [32],
+        "taskListRef": [32],
+        "dateSetup": [32],
+        "taskListWidth": [32],
+        "svgContainerWidth": [32],
+        "svgContainerHeight": [32],
+        "barTasks": [32],
+        "ganttEvent": [32],
+        "taskHeight": [32],
+        "projectHeight": [32],
+        "timelineHeight": [32],
+        "selectedTask": [32],
+        "failedTask": [32],
+        "svgWidth": [32],
+        "ganttFullHeight": [32],
+        "scrollX": [32],
+        "scrollY": [32],
+        "ignoreScrollEvent": [32],
+        "currentDateIndicatorContent": [32],
+        "projectionContent": [32]
+    }, [[0, "wheel", "handleWheel"]], {
+        "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"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kup-gantt", "kup-custom-task-list-header", "kup-custom-task-list-table", "kup-gantt-calendar", "kup-grid-renderer", "kup-horizontal-scroll", "kup-standard-tooltip", "kup-task-gantt", "kup-task-list", "kup-task-list-header", "kup-task-list-table", "kup-tooltip", "kup-vertical-scroll"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kup-gantt":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, KupGantt);
+            }
+            break;
+        case "kup-custom-task-list-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "kup-custom-task-list-table":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "kup-gantt-calendar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "kup-grid-renderer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "kup-horizontal-scroll":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "kup-standard-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "kup-task-gantt":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "kup-task-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "kup-task-list-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "kup-task-list-table":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "kup-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "kup-vertical-scroll":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KupGantt as K, defineCustomElement as d };