@sme.up/ketchup 9.6.3 → 9.6.5

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

@@ -1,10 +1,10 @@
-import { r as registerInstance, h, f as forceUpdate, d as getElement } from './index-460631fd.js';
-import { f as ganttDateRangeFromTask, s as seedDates, g as getPhaseById, b as getProjectById } from './kup-planner-renderer-helper-da0518be.js';
-import { r as removeHiddenTasks, s as sortTasks, c as convertToBarTasks, a as calculateCurrentDateCalculator, b as calculateProjection } from './bar.helpers-0898efb9.js';
-import { e as KUP_PLANNER_MAIN_GANTT_ID } from './kup-planner-declarations-b9345758.js';
-import './kup-dates-4ad48be7.js';
+import { r as registerInstance, h, f as forceUpdate, d as getElement, F as Fragment } from './index-460631fd.js';
+import { f as ganttDateRangeFromTask, s as seedDates, g as getPhaseById, b as getProjectById } from './kup-planner-renderer-helper-a2ec9a1c.js';
+import { r as removeHiddenTasks, s as sortTasks, c as convertToBarTasks, a as calculateCurrentDateCalculator, b as calculateProjection } from './bar.helpers-23a51579.js';
+import { e as KUP_PLANNER_MAIN_GANTT_ID } from './kup-planner-declarations-398babf9.js';
+import './kup-dates-26a56bf7.js';
 
-const kupGanttCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.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 kupGanttCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.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}.horizontalContainerScrollable{overflow:auto !important;scrollbar-width:0}.horizontalContainerScrollable::-webkit-scrollbar{width:0;height:0}.task-gantt{overflow:hidden}.tasks{border-radius:8px;background:#efefef;margin:12px;padding:12px}";
 const KupGanttStyle0 = kupGanttCss;
 
 const KupGantt = class {
@@ -15,7 +15,7 @@ const KupGantt = class {
         this.tasks = undefined;
         this.headerHeight = 114;
         this.columnWidth = 60;
-        this.listCellWidth = '297px';
+        this.listCellWidth = '300px';
         this.rowHeight = 50;
         this.filter = undefined;
         this.ganttHeight = 0;
@@ -60,6 +60,7 @@ const KupGantt = class {
         this.currentTasks = [];
         this.label = undefined;
         this.doubleView = undefined;
+        this.scrollableTaskList = undefined;
         this.setDoubleView = undefined;
         this.barContextMenu = undefined;
         this.scrollXChange = undefined;
@@ -78,6 +79,7 @@ const KupGantt = class {
         this.doubleClick = undefined;
         this.delete = undefined;
         this.expanderClick = undefined;
+        this.phaseDrop = undefined;
         this.wrapperRef = undefined;
         this.taskGanttRef = null;
         this.taskListRef = undefined;
@@ -99,6 +101,8 @@ const KupGantt = class {
         this.ignoreScrollEvent = false;
         this.currentDateIndicatorContent = undefined;
         this.projectionContent = undefined;
+        this.taskListScrollWidth = undefined;
+        this.taskListScrollX = 0;
     }
     //---- Lifecycle hooks ----
     componentWillLoad() {
@@ -277,6 +281,7 @@ const KupGantt = class {
                 newScrollX = this.svgWidth;
             }
             this.scrollX = newScrollX;
+            // this.taskListScrollX = newScrollX;
             window.dispatchEvent(new CustomEvent('gantt-sync-scroll-event', {
                 detail: {
                     componentId: this.ganttId,
@@ -475,6 +480,13 @@ const KupGantt = class {
             this.expanderClick(Object.assign(Object.assign({}, task), { hideChildren: !task.hideChildren }));
         }
     }
+    handleTaskListScrollX(event) {
+        const currentTarget = event.currentTarget;
+        this.taskListScrollX = currentTarget.scrollLeft;
+    }
+    handlePhaseDragScroll(scrollY) {
+        this.scrollY = scrollY;
+    }
     setFailedTask(task) {
         this.failedTask = task;
     }
@@ -536,6 +548,7 @@ const KupGantt = class {
             barDblClick: this.barDblClick,
             barContextMenu: this.barContextMenu,
             delete: this.delete,
+            phaseDrop: this.phaseDrop
         };
         const tableProps = {
             rowHeight: this.rowHeight,
@@ -554,9 +567,11 @@ const KupGantt = class {
             setSelectedTask: this.handleSelectedTask.bind(this),
             expanderClick: this.handleExpanderClick.bind(this),
             TaskListHeader: this.TaskListHeader,
-            TaskListTable: this.TaskListTable,
+            TaskListTable: this.TaskListTable
         };
-        return (h("div", { key: 'f7f84291517b74796502599d7005f0902432da84', class: "gannt-wrapper-main" }, h("div", { key: 'bbf2af26ac05a9c67a82eddedbeb7641c9b75e04', 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", ref: (el) => (this.taskListTrueRef = el) }))), h("kup-task-gantt", { key: '138391819549ea113ba52f3d218afbc74e4e92bb', 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", { key: 'da4e17e28991a3fbc7793c90d17d42cdb3f29383', 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, taskListTrueRef: this.taskListTrueRef, taskListWidth: this.taskListWidth, scrollNumber: this.scrollX, rtl: this.rtl, horizontalScroll: this.handleScrollX.bind(this) }))));
+        return (h("div", { key: 'd2628cb4c523eadcbfa97d83cad48ca0aa817fcb', class: "gannt-wrapper-main" }, h("div", { key: '3b336bd6595402bbb1b3ff87524d74286f63b1bc', 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", scrollableTaskList: this.scrollableTaskList, updateTaskListScrollX: this.ignoreScrollEvent, ontaskListScrollWidth: (width) => {
+                this.taskListScrollWidth = width;
+            }, taskListScrollX: this.taskListScrollX, ref: (el) => (this.taskListTrueRef = el) }))), h("kup-task-gantt", { key: 'b887edfe9460338576ccc2868f39eef9f8c41e2a', gridProps: gridProps, calendarProps: calendarProps, barProps: barProps, ganttHeight: this.ganttHeight, taskGanttRef: this.taskGanttRef, scrollY: this.scrollY, scrollX: this.scrollX, phaseDragScroll: this.handlePhaseDragScroll.bind(this), 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", { key: 'ab50bf33585da01c741255df86328c9fd3c10a4a', 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, taskListTrueRef: this.taskListTrueRef, taskListWidth: this.taskListWidth, scrollNumber: this.scrollX, rtl: this.rtl, horizontalScroll: this.handleScrollX.bind(this), horizontalTaskListScroll: this.handleTaskListScrollX.bind(this), listCellWidth: this.listCellWidth, scrollableTaskList: this.scrollableTaskList, taskListScrollWidth: this.taskListScrollWidth, taskListScrollNumber: this.taskListScrollX }))));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {
@@ -609,7 +624,7 @@ const KupGantt = class {
 };
 KupGantt.style = KupGanttStyle0;
 
-const kupHorizontalScrollCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.scrollWrapper{overflow:auto;max-width:100%;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 kupHorizontalScrollCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.scrollWrapper{overflow:auto;max-width:100%;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}.scroll-container{display:flex}";
 const KupHorizontalScrollStyle0 = kupHorizontalScrollCss;
 
 const HorizontalScroll = class {
@@ -620,7 +635,12 @@ const HorizontalScroll = class {
         this.taskListTrueRef = undefined;
         this.rtl = undefined;
         this.taskListWidth = undefined;
+        this.scrollableTaskList = false;
+        this.listCellWidth = '300px';
+        this.taskListScrollWidth = undefined;
+        this.taskListScrollNumber = undefined;
         this.horizontalScroll = undefined;
+        this.horizontalTaskListScroll = undefined;
         this.timeoutId = undefined;
     }
     //---- Lifecycle hooks ----
@@ -636,24 +656,51 @@ const HorizontalScroll = class {
             this.setScrollLeft();
         }, 50);
     }
+    listScrollLeft() {
+        clearTimeout(this.timeoutId);
+        this.timeoutId = setTimeout(() => {
+            this.setTaskListScrollLeft();
+        }, 50);
+    }
     setScrollLeft() {
         if (this.rootElement) {
-            this.rootElement.shadowRoot.querySelector('div').scrollLeft =
-                this.scrollNumber;
+            const shadowElement = this.rootElement.shadowRoot.querySelector('div');
+            const element = shadowElement.children.length == 2
+                ? shadowElement.children[1]
+                : shadowElement.children[0];
+            element && (element.scrollLeft = this.scrollNumber);
+        }
+    }
+    setTaskListScrollLeft() {
+        if (this.rootElement) {
+            const shadowElement = this.rootElement.shadowRoot.querySelector('div');
+            const taskListScrollBar = shadowElement.children.length == 2 ? shadowElement.children[0] : null;
+            taskListScrollBar && (taskListScrollBar.scrollLeft = this.taskListScrollNumber);
         }
     }
     render() {
         var _a, _b;
         const w = (_b = ((_a = this.taskListTrueRef) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) + 24 * 1.5) !== null && _b !== void 0 ? _b : 0; // 24 * 2 is the sum of padding and margin for both list and gantt, multiplied by 1.5 cause we need to add the other half to the right
-        return (h("div", { key: '6900ce2b4ff33f7f48403c085861d25d8a55ae51', dir: "ltr", style: {
+        const width = +this.listCellWidth.replace('px', '');
+        return (h(Fragment, { key: '84cd5ee2a862b2e0afaba38f81ad299466c6c90a' }, h("div", { key: '8be4374ca4ae407dd6c538994a4236d24196111b', class: "scroll-container" }, this.scrollableTaskList &&
+            this.taskListScrollWidth > width && (h("div", { dir: "ltr", style: {
+                margin: this.rtl
+                    ? `0px 20px 0px 20px`
+                    : `0px 20px 0px 20px`,
+                maxWidth: `${width + 20}px`,
+                minWidth: `${width + 20}px`,
+            }, class: "scrollWrapper", "data-scrollx": "true", onScroll: this.horizontalTaskListScroll }, h("div", { style: {
+                width: `${this.taskListScrollWidth}px`,
+            }, class: "scroll" }))), h("div", { key: '703cb38b994d2012c5c8718e144b360d6351eafd', dir: "ltr", style: {
                 margin: this.rtl
-                    ? `0px ${w}px 0px 12px`
-                    : `0px 12px 0px ${w}px`,
-            }, class: "scrollWrapper", "data-scrollx": "true", onScroll: this.horizontalScroll }, h("div", { key: 'd5cd1e9ec9d4dc2a1c249eef3c485dc3eb9f82ad', style: { width: `${this.svgWidth}px` }, class: "scroll" })));
+                    ? `0px ${this.scrollableTaskList && this.taskListScrollWidth > width ? 40 : w}px 0px 12px`
+                    : `0px 12px 0px ${this.scrollableTaskList && this.taskListScrollWidth > width ? 40 : w}px`,
+            }, class: "scrollWrapper", "data-scrollx": "true", onScroll: this.horizontalScroll }, h("div", { key: '347758c21c87bd6069526f5079acac13e50220f8', style: { width: `${this.svgWidth}px` }, class: "scroll" })))));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {
-        "scrollNumber": ["scrollLeft"]
+        "scrollNumber": ["scrollLeft"],
+        "taskListScrollNumber": ["listScrollLeft"]
     }; }
 };
 HorizontalScroll.style = KupHorizontalScrollStyle0;
@@ -669,25 +716,36 @@ const StandardTooltipContent = class {
         this.fontFamily = undefined;
     }
     render() {
-        return (h("div", { key: '654584ad4531cbc29fac8f6f1f8862f32127e614', class: "tooltipDefaultContainer", style: { fontSize: this.fontSize, fontFamily: this.fontFamily } }, h("b", { key: 'fc0104c8f5cce036410e84236b73237ca8c32e10', 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 && (h("p", { class: "tooltipDefaultContainerParagraph" }, `Duration: ${~~((this.task.end.getTime() - this.task.start.getTime()) / (1000 * 60 * 60 * 24))} day(s)`)), h("p", { key: '021b32e66e1ee1254acb60d7a5c1f38f1b59ea42', class: "tooltipDefaultContainerParagraph" }, !!this.task.progress && `Progress: ${this.task.progress} %`)));
+        return (h("div", { key: 'c9b5188678b4980a396d82ea533c06ab66559061', class: "tooltipDefaultContainer", style: { fontSize: this.fontSize, fontFamily: this.fontFamily } }, h("b", { key: 'f1597026854513f01c5f40c95ac1b5dee2284f1a', 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 && (h("p", { class: "tooltipDefaultContainerParagraph" }, `Duration: ${~~((this.task.end.getTime() - this.task.start.getTime()) / (1000 * 60 * 60 * 24))} day(s)`)), h("p", { key: 'c544fe0f4499f5ef8dbc3cbb0076b9a4addfd5d1', class: "tooltipDefaultContainerParagraph" }, !!this.task.progress && `Progress: ${this.task.progress} %`)));
     }
 };
 StandardTooltipContent.style = KupStandardTooltipStyle0;
 
-const kupSwitcherCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.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 kupSwitcherCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.switcher{display:grid;grid-auto-flow:column;grid-gap:8px;width:max-content;margin-bottom:var(--kup-space-05);margin-left:var(--kup-space-04)}.button{background-color:var(--kup-gray-color-70);border:none;text-align:left;box-sizing:border-box;color:var(--kup-gray-color-0);cursor:pointer;padding:var(--kup-space-03) var(--kup-space-05)}.button:hover{background-color:var(--kup-gray-color-90)}.button:focus{background-color:var(--kup-primary-color-60)}.label{text-decoration:none;font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.buttonActive{background-color:var(--kup-primary-color-60)}";
 const KupSwitcherStyle0 = kupSwitcherCss;
 
 const KupSwitcher = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.buttonLabels = [
+            'hour',
+            'day',
+            'week',
+            'month',
+            'year',
+        ];
         this.timeUnitChange = undefined;
+        this.activeButton = 'day';
     }
     render() {
-        const day = () => this.timeUnitChange('day');
-        const week = () => this.timeUnitChange('week');
-        const month = () => this.timeUnitChange('month');
-        const year = () => this.timeUnitChange('year');
-        return (h("div", { key: '64c26910f550b5c74b294667e58f396f0642e601', class: "switcher" }, h("button", { key: '1f110cd85b5e837aec6f5c2b69ac14b3a47d9f79', type: "button", class: "button", onClick: day }, h("span", { key: 'be249d7896fcd93905e8865309405d30dfa506bf', class: "label" }, "Day")), h("button", { key: '81dfab2aebed98d32cff106577795a064c03a257', type: "button", class: "button", onClick: week }, h("span", { key: 'e5c41e5dcd9d775c6749c2907e59a7d0400e3712', class: "label" }, "Week")), h("button", { key: 'a598a5ab4f1496bbd267134201b21c45e5198d01', type: "button", class: "button", onClick: month }, h("span", { key: '57769be17ca1de59a919cbb7e7ac11d0546a28fb', class: "label" }, "Month")), h("button", { key: 'b62c7585c44acc19863bc93898851348250ba7fa', type: "button", class: "button", onClick: year }, h("span", { key: '9f4ab800c4eef1666ceabaebe0d35b042753430f', class: "label" }, "Year"))));
+        const handleButtonClick = (mode) => {
+            this.activeButton = mode;
+            this.timeUnitChange(mode);
+        };
+        return (h("div", { key: '1a1621221e411df713757eae42e028968277e0a5', class: "switcher" }, this.buttonLabels.map((label) => (h("button", { type: "button", class: {
+                button: true,
+                buttonActive: this.activeButton === label,
+            }, onClick: () => handleButtonClick(label) }, h("span", { class: "label" }, label.charAt(0).toUpperCase() + label.slice(1)))))));
     }
 };
 KupSwitcher.style = KupSwitcherStyle0;
@@ -702,6 +760,7 @@ const TaskGantt = class {
         this.ganttHeight = undefined;
         this.scrollY = undefined;
         this.scrollX = undefined;
+        this.phaseDragScroll = undefined;
     }
     /*-------------------------------------------------*/
     /*                   W A T C H E R S               */
@@ -726,13 +785,13 @@ const TaskGantt = class {
         }, 75);
     }
     render() {
-        const newBarProps = Object.assign(Object.assign({}, this.barProps), { gridProps: this.gridProps });
-        return (h("div", { key: 'd9a4cf68f10e8263f73123022b4e545f6a028580', class: "ganttVerticalContainer", ref: (el) => (this.verticalGanttContainerRef = el), dir: "ltr" }, h("kup-gantt-calendar", { key: '2ad5614e2df01e5f3cc21b9940c14ba7dd5a785d', 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 }), h("div", { key: '8c0e76cb967f172406f352c6568582fdc4008d38', ref: (el) => (this.horizontalContainerRef = el), class: "horizontalContainer", style: this.ganttHeight
+        const newBarProps = Object.assign(Object.assign({}, this.barProps), { gridProps: this.gridProps, phaseDragScroll: this.phaseDragScroll });
+        return (h("div", { key: '70a643ef8eeac75a4860e9f7b267b09fc2e7a44a', class: "ganttVerticalContainer", ref: (el) => (this.verticalGanttContainerRef = el), dir: "ltr" }, h("kup-gantt-calendar", { key: '845ae3e99e6ae05f78af126bf72b6aea0f5c535b', 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 }), h("div", { key: '72cb7c8fc59bf4fef2800d5c73af4be641d7a8bf', ref: (el) => (this.horizontalContainerRef = el), class: "horizontalContainer", style: this.ganttHeight
                 ? {
                     height: `${this.ganttHeight}px`,
                     width: `${this.gridProps.svgWidth}px`,
                 }
-                : { width: `${this.gridProps.svgWidth}px` } }, h("kup-grid-renderer", Object.assign({ key: '69040247d6fde1ddb12f3b2ce54e02bc7781e569' }, newBarProps)))));
+                : { width: `${this.gridProps.svgWidth}px` } }, h("kup-grid-renderer", Object.assign({ key: '4e80893d377f70548b5301f5b00eb928ef60ae91' }, newBarProps)))));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {
@@ -766,6 +825,9 @@ const TaskList = class {
         this.currentTasks = undefined;
         this.label = undefined;
         this.doubleView = undefined;
+        this.scrollableTaskList = undefined;
+        this.updateTaskListScrollX = false;
+        this.taskListScrollX = undefined;
         this.setDoubleView = undefined;
         this.handleClick = undefined;
         this.handleDblClick = undefined;
@@ -775,6 +837,7 @@ const TaskList = class {
         this.ganttonOnContextMenu = undefined;
         this.setSelectedTask = undefined;
         this.expanderClick = undefined;
+        this.ontaskListScrollWidth = undefined;
         this.selectedTaskId = '';
     }
     componentDidLoad() {
@@ -816,6 +879,7 @@ const TaskList = class {
             tasks: this.tasks,
             locale: this.locale,
             selectedTaskId: this.selectedTaskId,
+            scrollableTaskList: this.scrollableTaskList,
             setSelectedTask: this.setSelectedTask.bind(this),
             onExpanderClick: this.expanderClick,
         };
@@ -827,7 +891,7 @@ const TaskList = class {
         if (TaskListTable && TaskListTable['$attrs$']) {
             Object.assign(TaskListTable['$attrs$'], Object.assign({}, tableProps));
         }
-        return (h("div", { key: '7dd68dd1a7d21ae60df1565041e4c40c4e809190', ref: (el) => (this.taskListRef = el) }, TaskListHeader && TaskListHeader['$attrs$'] ? (TaskListHeader) : (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))), h("div", { key: '7a956f23ef07603f31a331d229f1bb1d04e98773', class: this.horizontalContainerClass, style: this.ganttHeight
+        return (h("div", { key: 'cfd1d8efa3a55550e105f5ad084f011dc64e8870', ref: (el) => (this.taskListRef = el) }, TaskListHeader && TaskListHeader['$attrs$'] ? (TaskListHeader) : (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))), h("div", { key: '1279ffece78a182c6ff1facb46bd493a8c74f363', class: `${this.horizontalContainerClass} ${this.scrollableTaskList ? 'horizontalContainerScrollable' : ''}`, style: this.ganttHeight
                 ? { height: this.ganttHeight + 'px' }
                 : {}, ref: (el) => (this.horizontalContainerRef = el) }, TaskListTable && TaskListTable['$attrs$'] ? (TaskListTable) : (h("kup-custom-task-list-table", Object.assign({}, tableProps, { onclickTaskList: (id) => {
                 let row = getProjectById(id, this.currentTasks);
@@ -853,7 +917,9 @@ const TaskList = class {
                 if (row) {
                     this.handleContextMenu(event, row, this.ganttonOnContextMenu);
                 }
-            }, ganttId: KUP_PLANNER_MAIN_GANTT_ID }))))));
+            }, ontaskListScrollWidth: (width) => {
+                this.ontaskListScrollWidth(width);
+            }, taskListScrollX: this.taskListScrollX, ganttId: KUP_PLANNER_MAIN_GANTT_ID }))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -874,22 +940,22 @@ const KupTaskListHeader = class {
         this.rowWidth = undefined;
     }
     render() {
-        return (h("div", { key: '85c164a7a4313c8708ce2774338ff123621e7648', class: "ganttTable", style: {
+        return (h("div", { key: 'fb2ebda78c2213e06581f760793f19a5de8fc5f6', class: "ganttTable", style: {
                 fontFamily: this.fontFamily,
                 fontSize: this.fontSize,
-            } }, h("div", { key: '46aad2a15e9f7d6fe8e7b705b5cc4f385ebf2d69', class: "ganttTable_Header", style: {
+            } }, h("div", { key: '7d3be11d08ca2682277d0ee5cd5b062daaf238d4', class: "ganttTable_Header", style: {
                 height: `${this.headerHeight - 2}px`,
-            } }, h("div", { key: 'fafa8c4eb47c740fff23eb204a75b872d39876e2', class: "ganttTable_HeaderItem", style: {
+            } }, h("div", { key: 'f5f4a2a599dd84a0616b699931823760bb0b07ed', class: "ganttTable_HeaderItem", style: {
                 minWidth: this.rowWidth,
-            } }, "\u00A0Name"), h("div", { key: '1ebbcca3ce32701a8af4140fb638173de9795995', class: "ganttTable_HeaderSeparator", style: {
+            } }, "\u00A0Name"), h("div", { key: '6c09f131ce232248647bf9f1fc503fdc86cc557b', class: "ganttTable_HeaderSeparator", style: {
                 height: `${this.headerHeight * 0.5}px`,
                 marginTop: `${this.headerHeight * 0.2}px`,
-            } }), h("div", { key: 'b08345a4be12e76a9d634508e32e035a3c570dfb', class: "ganttTable_HeaderItem", style: {
+            } }), h("div", { key: '278d663951a0e5c73e1d365f98aefdddc9344d43', class: "ganttTable_HeaderItem", style: {
                 minWidth: this.rowWidth,
-            } }, "\u00A0From"), h("div", { key: '3f035b39c2c66677e78c2786cea4a39c824bb60b', class: "ganttTable_HeaderSeparator", style: {
+            } }, "\u00A0From"), h("div", { key: 'a1ccf08fe5072d3f0fc9faa2e743c054aa6fbc19', class: "ganttTable_HeaderSeparator", style: {
                 height: `${this.headerHeight * 0.5}px`,
                 marginTop: `${this.headerHeight * 0.25}px`,
-            } }), h("div", { key: '01effc62e0e2ddf73ab5cf4cbad5873f70d510c6', class: "ganttTable_HeaderItem", style: {
+            } }), h("div", { key: '9766eb1cfa74ed6227876d69304b772a9958fdb0', class: "ganttTable_HeaderItem", style: {
                 minWidth: this.rowWidth,
             } }, "\u00A0To"))));
     }
@@ -923,7 +989,7 @@ const TaskListTableDefault = class {
         return date.toLocaleDateString(this.locale, this.dateTimeOptions);
     }
     render() {
-        return (h("div", { key: 'a488bee5b9421a1f1f63911ac1ad6702d2f08d65', class: "taskListWrapper", style: {
+        return (h("div", { key: '185eb1455b2e46d4ef578eaada2abc891458a763', class: "taskListWrapper", style: {
                 fontFamily: this.fontFamily,
                 fontSize: this.fontSize,
             } }, this.tasks.map((task) => (h("div", { class: {
@@ -1012,7 +1078,7 @@ const Tooltip = class {
         }
     }
     render() {
-        return (h("div", { key: '6e6cc9d062e2910930ea039bd62c7d7c6cbfca30', class: this.relatedX ? 'tooltipDetailsContainer' : 'tooltipDetailsContainerHidden', style: { left: `${this.relatedX}px`, top: `${this.relatedY}px` } }, h(this.TooltipContent, { key: '08262258302d58b11d3c832194adfcdecf262bc2', task: this.task, fontSize: this.fontSize, fontFamily: this.fontFamily })));
+        return (h("div", { key: '285d804e882396024becfcfb1bbe83f7b92ef1ba', class: this.relatedX ? 'tooltipDetailsContainer' : 'tooltipDetailsContainerHidden', style: { left: `${this.relatedX}px`, top: `${this.relatedY}px` } }, h(this.TooltipContent, { key: '64a79a8e5c79ef4985e289e2e86c9d4c8ef75175', task: this.task, fontSize: this.fontSize, fontFamily: this.fontFamily })));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {
@@ -1066,11 +1132,11 @@ const KupVerticalScroll = class {
         };
     }
     render() {
-        return (h("div", { key: '80335159040a9c60dc8213840c3b2d684636585d', style: {
+        return (h("div", { key: 'fd24a7eab2da0ee2317a1fde6aa2f052394a0d5b', style: {
                 height: `${this.ganttHeight}px`,
                 marginTop: `${this.headerHeight}px`,
                 marginLeft: this.rtl ? '' : '-1rem',
-            }, class: "scroll", onScroll: this.verticalScroll, ref: (el) => (this.scrollRef = el) }, h("div", { key: '2ad01e01bb31d6885cf87bda7e1448f70b182435', style: {
+            }, class: "scroll", onScroll: this.verticalScroll, ref: (el) => (this.scrollRef = el) }, h("div", { key: 'f6d2bacc2f3c5532d33cb148e46394bc9697ece9', style: {
                 height: `${this.ganttFullHeight}px`,
                 width: '1px',
             } })));

package/dist/esm/kup-grid.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, f as forceUpdate, h, H as Host, d as getElement } from './index-460631fd.js';
-import { k as kupManagerInstance, g as getProps, s as setProps, d as KupDebugCategory } from './kup-manager-cdb4f21a.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, d as KupDebugCategory } from './kup-manager-a316a70e.js';
 import { c as componentWrapperId } from './GenericVariables-d8d0541e.js';
-import './kup-dates-4ad48be7.js';
+import './kup-dates-26a56bf7.js';
 
 /**
  * Props of the kup-grid component.

package/dist/esm/kup-iframe.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, d as getElement } from './index-460631fd.js';
-import { k as kupManagerInstance, g as getProps, s as setProps, d as KupDebugCategory } from './kup-manager-cdb4f21a.js';
-import './kup-dates-4ad48be7.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, d as KupDebugCategory } from './kup-manager-a316a70e.js';
+import './kup-dates-26a56bf7.js';
 
 /**
  * Props of the kup-iframe component.

package/dist/esm/kup-image-list.entry.js

@@ -1,15 +1,15 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, d as getElement } from './index-460631fd.js';
-import { k as kupManagerInstance, g as getProps, s as setProps, l as KupLanguageGeneric, M as KupPointerEventTypes, e as FCellPadding } from './kup-manager-cdb4f21a.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, l as KupLanguageGeneric, M as KupPointerEventTypes, e as FCellPadding } from './kup-manager-a316a70e.js';
 import { c as componentWrapperId } from './GenericVariables-d8d0541e.js';
-import { F as FImage } from './f-image-8b382cc5.js';
-import { F as FButton } from './f-button-45d690a5.js';
+import { F as FImage } from './f-image-a67229e5.js';
+import { F as FButton } from './f-button-d6dbcfd6.js';
 import { F as FButtonStyling } from './f-button-declarations-9bdc6f26.js';
-import { F as FCell } from './f-cell-63db06db.js';
+import { F as FCell } from './f-cell-7b41415c.js';
 import { M as MDCRipple } from './component-879e99bf.js';
-import './kup-dates-4ad48be7.js';
+import './kup-dates-26a56bf7.js';
 import './f-checkbox-ddb6234e.js';
-import './f-text-field-b5fcb598.js';
-import './f-chip-f1ab6c5e.js';
+import './f-text-field-d364ffd2.js';
+import './f-chip-68d27d7a.js';
 
 /**
  * Props of the kup-image-list component.
@@ -34,7 +34,7 @@ class KupImageListState {
     }
 }
 
-const kupImageListCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_imagelist_background_color:var(\n    --kup-imagelist-background-color,\n    transparent\n  );--kup_imagelist_columns:var(--kup-imagelist-columns, 4);--kup_imagelist_grid_gap:var(--kup-imagelist-grid-gap, 0.5em);--kup_imagelist_image_min_height:var(\n    --kup-imagelist-image-min-height,\n    var(--kup-space-09)\n  );--kup_imagelist_item_border_radius:var(\n    --kup-imagelist-item-border-radius,\n    var(--kup-radius-00)\n  );--kup_imagelist_item_height:var(--kup-imagelist-item-height, auto);--kup_imagelist_item_padding:var(--kup-imagelist-item-padding, 0);--kup_imagelist_item_width:var(--kup-imagelist-item-width, auto);--kup_imagelist_label_margin:var(\n    --kup-imagelist-label-margin,\n    0 auto 1em auto\n  );--kup_imagelist_navbar_background_color:var(\n    --kup-imagelist-navbar-background-color,\n    transparent\n  );--kup_imagelist_primary_color:var(\n    --kup-imagelist-primary-color,\n    var(--kup-primary-color)\n  );--kup_imagelist_primary_color_rgb:var(\n    --kup-imagelist-primary-color-rgb,\n    var(--kup-primary-color-rgb)\n  );--kup_imagelist_text_color:var(\n    --kup-imagelist-text-color,\n    var(--kup-gray-color-70)\n  );--kup_imagelist_item_background_color:var(\n    --kup-imagelist-item-background-color,\n    var(--kup-gray-color-10)\n  );display:block}.navigation-bar{align-items:center;background-color:var(--kup_imagelist_navbar_background_color);display:flex;justify-content:center}.navigation-bar__wrapper{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;max-width:100%;position:relative}.navigation-bar__wrapper--active .navigation-bar__title{background-color:rgba(var(--kup_imagelist_primary_color_rgb), 0.15);color:var(--kup_imagelist_primary_color)}.navigation-bar__back,.navigation-bar__top{--kup-button-primary-color-rgb:0}.navigation-bar__title{border-radius:16px;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;padding:0.75em 1em;user-select:none;transition:background-color 125ms, color 125ms;width:100%}.navigation-bar__title__image.f-image{margin:0}.navigation-bar__title__label{overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.image-list{background-color:var(--kup_imagelist_background_color);display:grid;grid-gap:var(--kup_imagelist_grid_gap);grid-template-columns:repeat(var(--kup_imagelist_columns, 4), minmax(0px, 1fr));margin-top:1em;width:100%;grid-auto-flow:row}.image-list .f-cell{height:100%;width:100%}.image-list .f-cell .f-cell__content .image-list__wrapper{padding:var(--kup-space-03) var(--kup-space-02)}.image-list__item{background-color:var(--kup_imagelist_item_background_color);border-radius:var(--kup_imagelist_item_border_radius);cursor:pointer;height:var(--kup_imagelist_item_height);padding:var(--kup_imagelist_item_padding);width:var(--kup_imagelist_item_width)}.image-list__item:hover{background-color:var(--kup-gray-color-20)}.image-list__image.f-image{margin-bottom:var(--kup-space-03)}.image-list__image.f-image .f-image__icon{min-height:var(--kup_imagelist_image_min_height)}.image-list__label{overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}:host(.kup-full-height){height:100%}:host(.kup-full-width){width:100%}:host(.kup-horizontal) .image-list{display:flex}:host(.kup-auto-grid) .image-list{display:flex;flex-wrap:wrap;justify-content:center}";
+const kupImageListCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}:host{--kup_imagelist_background_color:var(\n    --kup-imagelist-background-color,\n    transparent\n  );--kup_imagelist_columns:var(--kup-imagelist-columns, 4);--kup_imagelist_grid_gap:var(--kup-imagelist-grid-gap, var(--kup-space-03));--kup_imagelist_image_min_height:var(\n    --kup-imagelist-image-min-height,\n    var(--kup-space-09)\n  );--kup_imagelist_item_border_radius:var(\n    --kup-imagelist-item-border-radius,\n    var(--kup-radius-00)\n  );--kup_imagelist_item_height:var(--kup-imagelist-item-height, auto);--kup_imagelist_item_padding:var(--kup-imagelist-item-padding, 0);--kup_imagelist_item_width:var(--kup-imagelist-item-width, auto);--kup_imagelist_label_margin:var(\n    --kup-imagelist-label-margin,\n    0 auto 1em auto\n  );--kup_imagelist_navbar_background_color:var(\n    --kup-imagelist-navbar-background-color,\n    transparent\n  );--kup_imagelist_primary_color:var(\n    --kup-imagelist-primary-color,\n    var(--kup-primary-color)\n  );--kup_imagelist_primary_color_rgb:var(\n    --kup-imagelist-primary-color-rgb,\n    var(--kup-primary-color-rgb)\n  );--kup_imagelist_text_color:var(\n    --kup-imagelist-text-color,\n    var(--kup-gray-color-70)\n  );--kup_imagelist_item_background_color:var(\n    --kup-imagelist-item-background-color,\n    var(--kup-gray-color-10)\n  );display:block}.navigation-bar{align-items:center;background-color:var(--kup_imagelist_navbar_background_color);display:flex;justify-content:center}.navigation-bar__wrapper{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;max-width:100%;position:relative}.navigation-bar__wrapper--active .navigation-bar__title{background-color:rgba(var(--kup_imagelist_primary_color_rgb), 0.15);color:var(--kup_imagelist_primary_color)}.navigation-bar__back,.navigation-bar__top{--kup-button-primary-color-rgb:0}.navigation-bar__title{border-radius:16px;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;padding:0.75em 1em;user-select:none;transition:background-color 125ms, color 125ms;width:100%}.navigation-bar__title__image.f-image{margin:0}.navigation-bar__title__label{overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.image-list{background-color:var(--kup_imagelist_background_color);display:grid;grid-gap:var(--kup_imagelist_grid_gap);grid-template-columns:repeat(var(--kup_imagelist_columns, 4), minmax(0px, 1fr));margin-top:1em;width:100%;grid-auto-flow:row}.image-list .f-cell{height:100%;width:100%}.image-list .f-cell .f-cell__content{height:100%}.image-list .f-cell .f-cell__content .image-list__wrapper{display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;position:relative}.image-list .f-cell .f-cell__content .image-list__wrapper.images{height:100%;justify-content:flex-end}.image-list .f-cell .f-cell__content .image-list__wrapper.images .f-image{position:unset;overflow:auto;height:100%;display:flex}.image-list__item{background-color:var(--kup_imagelist_item_background_color);border-radius:var(--kup_imagelist_item_border_radius);cursor:pointer;height:var(--kup_imagelist_item_height);padding:var(--kup_imagelist_item_padding);width:var(--kup_imagelist_item_width)}.image-list__item:hover{background-color:var(--kup-gray-color-20)}.image-list__image.f-image{position:absolute;padding:var(--kup-space-03);padding-bottom:0px;box-sizing:border-box;width:100%;height:calc(100% - 16px - var(--kup-space-03) * 2);overflow:hidden}.image-list__image.f-image .f-image__icon{mask-size:100% !important}.image-list__label{overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;padding:var(--kup-space-03);font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}@media screen and (min-width: 678px){:host{--kup_imagelist_columns:var(--kup-imagelist-columns, 8)}.image-list{grid-template-columns:repeat(var(--kup_imagelist_columns, 8), minmax(0px, 1fr));grid-gap:var(--kup-space-05)}}:host(.kup-full-height){height:100%}:host(.kup-full-width){width:100%}:host(.kup-horizontal) .image-list{display:flex}:host(.kup-auto-grid) .image-list{display:flex;flex-wrap:wrap;justify-content:center}";
 const KupImageListStyle0 = kupImageListCss;
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
@@ -98,7 +98,7 @@ const KupImageList = class {
         _KupImageList_interactableTouch.set(this, []);
         this.currentNode = null;
         this.navigationBarToggled = false;
-        this.columns = 4;
+        this.columns = null;
         this.customStyle = '';
         this.data = [];
         this.ripple = true;
@@ -209,14 +209,14 @@ const KupImageList = class {
             };
             combinedGridStyle = Object.assign(Object.assign({}, combinedGridStyle), gridRowsStyle);
         }
-        return (h(Host, { key: '86c391c4a1e0c507dc0c07971aa90e6f7091bc95' }, h("style", { key: '99f966c6cd10aac991c99b4badca0a6cff1dbf5b' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'e4eaa257a47cabcb34a412f56d736cd77fbc97af', id: componentWrapperId, ref: (el) => {
+        return (h(Host, { key: 'b62094a90858c7c5f36a9f76b3b4372b506ace67' }, h("style", { key: 'eeb8ad09387f7aaad846441e1d7c28554c6996e2' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'd908bdbb3d41f6cedaa6e905cc6be9aa4eb4e27b', id: componentWrapperId, ref: (el) => {
                 __classPrivateFieldSet(this, _KupImageList_el, el, "f");
-            } }, h("div", { key: '48ff34cbb307b0ab49ca3b8ed240f0510e674e93', class: "navigation-bar" }, hasNavigation ? (h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
+            } }, h("div", { key: 'e3852ae5ff9a61857cc70f9ebd83f5f317d596da', class: "navigation-bar" }, hasNavigation ? (h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
                 ? 'navigation-bar__wrapper--active'
                 : ''}` }, h("div", { class: `navigation-bar__title`, onClick: () => {
                 this.navigationBarToggled =
                     !this.navigationBarToggled;
-            } }, h(FImage, { fit: true, resource: this.currentNode.icon, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: "navigation-bar__title__image" }), h("div", { class: "navigation-bar__title__label" }, this.currentNode.value)), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_backProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.BACK) })), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_topProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.TOP) })))) : null), h("div", { key: '97ac20f9d893c131c03adc953e78435bb062f137', class: "image-list", style: combinedGridStyle }, ...__classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
+            } }, h(FImage, { fit: true, resource: this.currentNode.icon, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: "navigation-bar__title__image" }), h("div", { class: "navigation-bar__title__label" }, this.currentNode.value)), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_backProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.BACK) })), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_topProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.TOP) })))) : null), h("div", { key: '1726193b158b8cefb9a445acc5b75ae1d07061a3', class: "image-list", style: combinedGridStyle }, ...__classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.unregister(__classPrivateFieldGet(this, _KupImageList_interactableTouch, "f"));
@@ -238,7 +238,10 @@ _KupImageList_clickTimeout = new WeakMap(), _KupImageList_kupManager = new WeakM
     };
     const image = h(FImage, Object.assign({}, props));
     const label = h("div", { class: "image-list__label" }, node.value);
-    return (h(FCell, { cell: { value: node.value, icon: node.icon, obj: node.obj }, column: { name: 'IMAGE', title: 'Image' }, component: this, density: FCellPadding.NONE, row: Object.assign({}, node) }, h("div", { class: "image-list__wrapper" }, image, label)));
+    const hasExternalResource = props.resource.indexOf('.') > -1 ||
+        props.resource.indexOf('/') > -1 ||
+        props.resource.indexOf('\\') > -1;
+    return (h(FCell, { cell: { value: node.value, icon: node.icon, obj: node.obj }, column: { name: 'IMAGE', title: 'Image' }, component: this, density: FCellPadding.NONE, row: Object.assign({}, node) }, h("div", { class: `image-list__wrapper${hasExternalResource ? ' images' : ''}` }, !hasExternalResource && (h("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", viewBox: "0 0 24 24" })), image, label)));
 }, _KupImageList_createList = function _KupImageList_createList() {
     const nodes = [];
     const items = this.currentNode ? this.currentNode.children : this.data;
@@ -343,12 +346,16 @@ _KupImageList_clickTimeout = new WeakMap(), _KupImageList_kupManager = new WeakM
     const holdCb = (e) => {
         if (e.pointerType === 'pen' || e.pointerType === 'touch') {
             __classPrivateFieldSet(this, _KupImageList_hold, true, "f");
+            this.kupContextMenu.emit({
+                comp: this,
+                id: this.rootElement.id,
+                details: __classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_contextMenuHandler).call(this, e),
+            });
         }
     };
     __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.on(__classPrivateFieldGet(this, _KupImageList_el, "f"), KupPointerEventTypes.HOLD, holdCb);
     __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.on(__classPrivateFieldGet(this, _KupImageList_el, "f"), KupPointerEventTypes.TAP, tapCb);
     __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.on(__classPrivateFieldGet(this, _KupImageList_el, "f"), KupPointerEventTypes.DOUBLETAP, doubletapCb);
-    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.on(__classPrivateFieldGet(this, _KupImageList_el, "f"), KupPointerEventTypes.HOLD, holdCb);
 };
 KupImageList.style = KupImageListStyle0;