npm - @sme.up/ketchup - Versions diffs - 9.6.4 → 9.6.5 - Mend

@sme.up/ketchup 9.6.4 → 9.6.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (232) hide show

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

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-958d0399.js');
-const kupPlannerRendererHelper = require('./kup-planner-renderer-helper-9f776d6e.js');
-const bar_helpers = require('./bar.helpers-f46a5a83.js');
-const kupPlannerDeclarations = require('./kup-planner-declarations-d3dec885.js');
+const kupPlannerRendererHelper = require('./kup-planner-renderer-helper-f001fad7.js');
+const bar_helpers = require('./bar.helpers-c481a535.js');
+const kupPlannerDeclarations = require('./kup-planner-declarations-cb33663d.js');
 require('./kup-dates-e22ee32c.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 {
@@ -19,7 +19,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;
@@ -64,6 +64,7 @@ const KupGantt = class {
         this.currentTasks = [];
         this.label = undefined;
         this.doubleView = undefined;
+        this.scrollableTaskList = undefined;
         this.setDoubleView = undefined;
         this.barContextMenu = undefined;
         this.scrollXChange = undefined;
@@ -82,6 +83,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;
@@ -103,6 +105,8 @@ const KupGantt = class {
         this.ignoreScrollEvent = false;
         this.currentDateIndicatorContent = undefined;
         this.projectionContent = undefined;
+        this.taskListScrollWidth = undefined;
+        this.taskListScrollX = 0;
     }
     //---- Lifecycle hooks ----
     componentWillLoad() {
@@ -281,6 +285,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,
@@ -479,6 +484,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;
     }
@@ -540,6 +552,7 @@ const KupGantt = class {
             barDblClick: this.barDblClick,
             barContextMenu: this.barContextMenu,
             delete: this.delete,
+            phaseDrop: this.phaseDrop
         };
         const tableProps = {
             rowHeight: this.rowHeight,
@@ -558,9 +571,11 @@ const KupGantt = class {
             setSelectedTask: this.handleSelectedTask.bind(this),
             expanderClick: this.handleExpanderClick.bind(this),
             TaskListHeader: this.TaskListHeader,
-            TaskListTable: this.TaskListTable,
+            TaskListTable: this.TaskListTable
         };
-        return (index.h("div", { key: '6cfa74263599c97bcae3f8f473f94c69bcaf8258', class: "gannt-wrapper-main" }, index.h("div", { key: 'ebc15fab0f8675bb5f21230175b7b50842e0974e', class: "wrapper", onKeyDown: this.handleKeyDown.bind(this), tabIndex: 0, ref: (el) => (this.wrapperRef = el) }, this.listCellWidth && (index.h("kup-task-list", Object.assign({ currentTasks: this.currentTasks, handleClick: this.handleClick, handleDblClick: this.handleDblClick, handleContextMenu: this.handleContextMenu, ganttOnClick: this.ganttOnClick, ganttOnDblClick: this.ganttOnDblClick, ganttonOnContextMenu: this.ganttonOnContextMenu, label: this.label, doubleView: this.doubleView, setDoubleView: this.setDoubleView }, tableProps, { class: "tasks", ref: (el) => (this.taskListTrueRef = el) }))), index.h("kup-task-gantt", { key: '6c9bdf420f5660fbae4f9c9d40f772e9fa93671b', gridProps: gridProps, calendarProps: calendarProps, barProps: barProps, ganttHeight: this.ganttHeight, taskGanttRef: this.taskGanttRef, scrollY: this.scrollY, scrollX: this.scrollX, class: "ganttContainer" }), this.ganttEvent.changedTask && (index.h("kup-tooltip", { arrowIndent: this.arrowIndent, rowHeight: this.rowHeight, svgContainerHeight: this.svgContainerHeight, svgContainerWidth: this.svgContainerWidth, fontFamily: this.fontFamily, fontSize: this.fontSize, scrollX: this.scrollX, scrollY: this.scrollY, task: this.ganttEvent.changedTask, headerHeight: this.headerHeight, taskListWidth: this.taskListWidth, TooltipContent: this.TooltipContent, rtl: this.rtl, svgWidth: this.svgWidth })), index.h("kup-vertical-scroll", { key: '09d624d5a440649b8b2a032d4257cd64356f2421', ganttFullHeight: this.ganttFullHeight, ganttHeight: this.ganttHeight, headerHeight: this.headerHeight, scrollNumber: this.scrollY, verticalScroll: this.handleScrollY.bind(this), rtl: this.rtl })), this.taskGanttRef && (index.h("kup-horizontal-scroll", { svgWidth: this.svgWidth, taskListTrueRef: this.taskListTrueRef, taskListWidth: this.taskListWidth, scrollNumber: this.scrollX, rtl: this.rtl, horizontalScroll: this.handleScrollX.bind(this) }))));
+        return (index.h("div", { key: 'd2628cb4c523eadcbfa97d83cad48ca0aa817fcb', class: "gannt-wrapper-main" }, index.h("div", { key: '3b336bd6595402bbb1b3ff87524d74286f63b1bc', class: "wrapper", onKeyDown: this.handleKeyDown.bind(this), tabIndex: 0, ref: (el) => (this.wrapperRef = el) }, this.listCellWidth && (index.h("kup-task-list", Object.assign({ currentTasks: this.currentTasks, handleClick: this.handleClick, handleDblClick: this.handleDblClick, handleContextMenu: this.handleContextMenu, ganttOnClick: this.ganttOnClick, ganttOnDblClick: this.ganttOnDblClick, ganttonOnContextMenu: this.ganttonOnContextMenu, label: this.label, doubleView: this.doubleView, setDoubleView: this.setDoubleView }, tableProps, { class: "tasks", scrollableTaskList: this.scrollableTaskList, updateTaskListScrollX: this.ignoreScrollEvent, ontaskListScrollWidth: (width) => {
+                this.taskListScrollWidth = width;
+            }, taskListScrollX: this.taskListScrollX, ref: (el) => (this.taskListTrueRef = el) }))), index.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 && (index.h("kup-tooltip", { arrowIndent: this.arrowIndent, rowHeight: this.rowHeight, svgContainerHeight: this.svgContainerHeight, svgContainerWidth: this.svgContainerWidth, fontFamily: this.fontFamily, fontSize: this.fontSize, scrollX: this.scrollX, scrollY: this.scrollY, task: this.ganttEvent.changedTask, headerHeight: this.headerHeight, taskListWidth: this.taskListWidth, TooltipContent: this.TooltipContent, rtl: this.rtl, svgWidth: this.svgWidth })), index.h("kup-vertical-scroll", { key: 'ab50bf33585da01c741255df86328c9fd3c10a4a', ganttFullHeight: this.ganttFullHeight, ganttHeight: this.ganttHeight, headerHeight: this.headerHeight, scrollNumber: this.scrollY, verticalScroll: this.handleScrollY.bind(this), rtl: this.rtl })), this.taskGanttRef && (index.h("kup-horizontal-scroll", { svgWidth: this.svgWidth, 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 index.getElement(this); }
     static get watchers() { return {
@@ -613,7 +628,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 {
@@ -624,7 +639,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 ----
@@ -640,24 +660,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 (index.h("div", { key: 'a560e1597e9122df0d98d0508ace8ec5c04a5513', dir: "ltr", style: {
+        const width = +this.listCellWidth.replace('px', '');
+        return (index.h(index.Fragment, { key: '84cd5ee2a862b2e0afaba38f81ad299466c6c90a' }, index.h("div", { key: '8be4374ca4ae407dd6c538994a4236d24196111b', class: "scroll-container" }, this.scrollableTaskList &&
+            this.taskListScrollWidth > width && (index.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 }, index.h("div", { style: {
+                width: `${this.taskListScrollWidth}px`,
+            }, class: "scroll" }))), index.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 }, index.h("div", { key: 'd1f0693a7a2f4ae545d48c0708f91770c1fee717', 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 }, index.h("div", { key: '347758c21c87bd6069526f5079acac13e50220f8', style: { width: `${this.svgWidth}px` }, class: "scroll" })))));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {
-        "scrollNumber": ["scrollLeft"]
+        "scrollNumber": ["scrollLeft"],
+        "taskListScrollNumber": ["listScrollLeft"]
     }; }
 };
 HorizontalScroll.style = KupHorizontalScrollStyle0;
@@ -673,25 +720,36 @@ const StandardTooltipContent = class {
         this.fontFamily = undefined;
     }
     render() {
-        return (index.h("div", { key: 'a8cc2a7ee22805a4a0bc4ea5a04eba47635d905d', class: "tooltipDefaultContainer", style: { fontSize: this.fontSize, fontFamily: this.fontFamily } }, index.h("b", { key: 'b19bb682e89805a662965153baddfe3ecbcc714b', style: { fontSize: `${parseInt(this.fontSize) + 6}px` } }, `${this.task.name}: ${this.task.start.getDate()}-${this.task.start.getMonth() + 1}-${this.task.start.getFullYear()} - ${this.task.end.getDate()}-${this.task.end.getMonth() + 1}-${this.task.end.getFullYear()}`), this.task.end.getTime() - this.task.start.getTime() !== 0 && (index.h("p", { class: "tooltipDefaultContainerParagraph" }, `Duration: ${~~((this.task.end.getTime() - this.task.start.getTime()) / (1000 * 60 * 60 * 24))} day(s)`)), index.h("p", { key: '85c595ef756929440fac10ff2a63f19a01bd1e34', class: "tooltipDefaultContainerParagraph" }, !!this.task.progress && `Progress: ${this.task.progress} %`)));
+        return (index.h("div", { key: 'c9b5188678b4980a396d82ea533c06ab66559061', class: "tooltipDefaultContainer", style: { fontSize: this.fontSize, fontFamily: this.fontFamily } }, index.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 && (index.h("p", { class: "tooltipDefaultContainerParagraph" }, `Duration: ${~~((this.task.end.getTime() - this.task.start.getTime()) / (1000 * 60 * 60 * 24))} day(s)`)), index.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) {
         index.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 (index.h("div", { key: '41dda7f6481d54c262a7362440167aa58b44e8e1', class: "switcher" }, index.h("button", { key: 'e286b6add4c59978c39cef79e8bddd0704b9b3be', type: "button", class: "button", onClick: day }, index.h("span", { key: '855e19deedcbb55d6d534260e6b2b76580eb8e71', class: "label" }, "Day")), index.h("button", { key: 'dffc909ef397ddd44957cad2b304343f9a96998c', type: "button", class: "button", onClick: week }, index.h("span", { key: 'd69ab19671de0f10e60ba584a1036c628d6204b1', class: "label" }, "Week")), index.h("button", { key: '42c686fc57fdd6bd4a0cc8fd939946048d663771', type: "button", class: "button", onClick: month }, index.h("span", { key: 'a1508d10ecfdb50527a2be3b9a7bd069f922753e', class: "label" }, "Month")), index.h("button", { key: 'b478c7c4ed13b4ed3ab72f148995bf4cc96533c8', type: "button", class: "button", onClick: year }, index.h("span", { key: 'c56ee36dac14420f256d327cfe6119e9792d072f', class: "label" }, "Year"))));
+        const handleButtonClick = (mode) => {
+            this.activeButton = mode;
+            this.timeUnitChange(mode);
+        };
+        return (index.h("div", { key: '1a1621221e411df713757eae42e028968277e0a5', class: "switcher" }, this.buttonLabels.map((label) => (index.h("button", { type: "button", class: {
+                button: true,
+                buttonActive: this.activeButton === label,
+            }, onClick: () => handleButtonClick(label) }, index.h("span", { class: "label" }, label.charAt(0).toUpperCase() + label.slice(1)))))));
     }
 };
 KupSwitcher.style = KupSwitcherStyle0;
@@ -706,6 +764,7 @@ const TaskGantt = class {
         this.ganttHeight = undefined;
         this.scrollY = undefined;
         this.scrollX = undefined;
+        this.phaseDragScroll = undefined;
     }
     /*-------------------------------------------------*/
     /*                   W A T C H E R S               */
@@ -730,13 +789,13 @@ const TaskGantt = class {
         }, 75);
     }
     render() {
-        const newBarProps = Object.assign(Object.assign({}, this.barProps), { gridProps: this.gridProps });
-        return (index.h("div", { key: '905f0400ac4a0103896527ef5197cf1d1377b47b', class: "ganttVerticalContainer", ref: (el) => (this.verticalGanttContainerRef = el), dir: "ltr" }, index.h("kup-gantt-calendar", { key: '5663eafd88795240ff35fb92eb68af99d6b285d7', dateSetup: this.calendarProps.dateSetup, locale: this.calendarProps.locale, rtl: this.calendarProps.rtl, headerHeight: this.calendarProps.headerHeight, columnWidth: this.calendarProps.columnWidth, fontFamily: this.calendarProps.fontFamily, fontSize: this.calendarProps.fontSize, dateTimeFormatters: this.calendarProps.dateTimeFormatters, singleLineHeader: this.calendarProps.singleLineHeader, currentDateIndicator: this.calendarProps.currentDateIndicator, svgWidth: this.gridProps.svgWidth }), index.h("div", { key: 'ececb1964b8a3a9e0b0a12889b680f8667e49690', 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 (index.h("div", { key: '70a643ef8eeac75a4860e9f7b267b09fc2e7a44a', class: "ganttVerticalContainer", ref: (el) => (this.verticalGanttContainerRef = el), dir: "ltr" }, index.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 }), index.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` } }, index.h("kup-grid-renderer", Object.assign({ key: '2117872fcdad4e4a3afe4eb4bfc303fce6ea2db7' }, newBarProps)))));
+                : { width: `${this.gridProps.svgWidth}px` } }, index.h("kup-grid-renderer", Object.assign({ key: '4e80893d377f70548b5301f5b00eb928ef60ae91' }, newBarProps)))));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -770,6 +829,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;
@@ -779,6 +841,7 @@ const TaskList = class {
         this.ganttonOnContextMenu = undefined;
         this.setSelectedTask = undefined;
         this.expanderClick = undefined;
+        this.ontaskListScrollWidth = undefined;
         this.selectedTaskId = '';
     }
     componentDidLoad() {
@@ -820,6 +883,7 @@ const TaskList = class {
             tasks: this.tasks,
             locale: this.locale,
             selectedTaskId: this.selectedTaskId,
+            scrollableTaskList: this.scrollableTaskList,
             setSelectedTask: this.setSelectedTask.bind(this),
             onExpanderClick: this.expanderClick,
         };
@@ -831,7 +895,7 @@ const TaskList = class {
         if (TaskListTable && TaskListTable['$attrs$']) {
             Object.assign(TaskListTable['$attrs$'], Object.assign({}, tableProps));
         }
-        return (index.h("div", { key: 'd09682f9ac25c58a917abb739e585d5b0e8eb15b', ref: (el) => (this.taskListRef = el) }, TaskListHeader && TaskListHeader['$attrs$'] ? (TaskListHeader) : (index.h("kup-custom-task-list-header", Object.assign({ label: this.label, doubleView: (_a = this.doubleView) !== null && _a !== void 0 ? _a : false, setDoubleView: this.setDoubleView }, headerProps))), index.h("div", { key: '5fdeb14c140ae767e0e76ff0cbb7a3cc1a952ac2', class: this.horizontalContainerClass, style: this.ganttHeight
+        return (index.h("div", { key: 'cfd1d8efa3a55550e105f5ad084f011dc64e8870', ref: (el) => (this.taskListRef = el) }, TaskListHeader && TaskListHeader['$attrs$'] ? (TaskListHeader) : (index.h("kup-custom-task-list-header", Object.assign({ label: this.label, doubleView: (_a = this.doubleView) !== null && _a !== void 0 ? _a : false, setDoubleView: this.setDoubleView }, headerProps))), index.h("div", { key: '1279ffece78a182c6ff1facb46bd493a8c74f363', class: `${this.horizontalContainerClass} ${this.scrollableTaskList ? 'horizontalContainerScrollable' : ''}`, style: this.ganttHeight
                 ? { height: this.ganttHeight + 'px' }
                 : {}, ref: (el) => (this.horizontalContainerRef = el) }, TaskListTable && TaskListTable['$attrs$'] ? (TaskListTable) : (index.h("kup-custom-task-list-table", Object.assign({}, tableProps, { onclickTaskList: (id) => {
                 let row = kupPlannerRendererHelper.getProjectById(id, this.currentTasks);
@@ -857,7 +921,9 @@ const TaskList = class {
                 if (row) {
                     this.handleContextMenu(event, row, this.ganttonOnContextMenu);
                 }
-            }, ganttId: kupPlannerDeclarations.KUP_PLANNER_MAIN_GANTT_ID }))))));
+            }, ontaskListScrollWidth: (width) => {
+                this.ontaskListScrollWidth(width);
+            }, taskListScrollX: this.taskListScrollX, ganttId: kupPlannerDeclarations.KUP_PLANNER_MAIN_GANTT_ID }))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -878,22 +944,22 @@ const KupTaskListHeader = class {
         this.rowWidth = undefined;
     }
     render() {
-        return (index.h("div", { key: '116213bd504a1e48f0484e92db9f7c8fb4dcb602', class: "ganttTable", style: {
+        return (index.h("div", { key: 'fb2ebda78c2213e06581f760793f19a5de8fc5f6', class: "ganttTable", style: {
                 fontFamily: this.fontFamily,
                 fontSize: this.fontSize,
-            } }, index.h("div", { key: 'afbe32d59d041d923cd831db83ca0b09087cda23', class: "ganttTable_Header", style: {
+            } }, index.h("div", { key: '7d3be11d08ca2682277d0ee5cd5b062daaf238d4', class: "ganttTable_Header", style: {
                 height: `${this.headerHeight - 2}px`,
-            } }, index.h("div", { key: 'ffa34b095e8b1d59516e6892c87f9eeeec8d9160', class: "ganttTable_HeaderItem", style: {
+            } }, index.h("div", { key: 'f5f4a2a599dd84a0616b699931823760bb0b07ed', class: "ganttTable_HeaderItem", style: {
                 minWidth: this.rowWidth,
-            } }, "\u00A0Name"), index.h("div", { key: 'fad1584e5c299645e59f988e1fedc6fb1c6b05ff', class: "ganttTable_HeaderSeparator", style: {
+            } }, "\u00A0Name"), index.h("div", { key: '6c09f131ce232248647bf9f1fc503fdc86cc557b', class: "ganttTable_HeaderSeparator", style: {
                 height: `${this.headerHeight * 0.5}px`,
                 marginTop: `${this.headerHeight * 0.2}px`,
-            } }), index.h("div", { key: '630992695659d8963415808cb1734e06d9aff914', class: "ganttTable_HeaderItem", style: {
+            } }), index.h("div", { key: '278d663951a0e5c73e1d365f98aefdddc9344d43', class: "ganttTable_HeaderItem", style: {
                 minWidth: this.rowWidth,
-            } }, "\u00A0From"), index.h("div", { key: 'e676f60163f722f1fd72f9038157359e61c895d2', class: "ganttTable_HeaderSeparator", style: {
+            } }, "\u00A0From"), index.h("div", { key: 'a1ccf08fe5072d3f0fc9faa2e743c054aa6fbc19', class: "ganttTable_HeaderSeparator", style: {
                 height: `${this.headerHeight * 0.5}px`,
                 marginTop: `${this.headerHeight * 0.25}px`,
-            } }), index.h("div", { key: 'ee2699da7a0afbfa6944c47621e07112dca46816', class: "ganttTable_HeaderItem", style: {
+            } }), index.h("div", { key: '9766eb1cfa74ed6227876d69304b772a9958fdb0', class: "ganttTable_HeaderItem", style: {
                 minWidth: this.rowWidth,
             } }, "\u00A0To"))));
     }
@@ -927,7 +993,7 @@ const TaskListTableDefault = class {
         return date.toLocaleDateString(this.locale, this.dateTimeOptions);
     }
     render() {
-        return (index.h("div", { key: '00ce97c983f8b2fa306cfde7a15565913bbd08fa', class: "taskListWrapper", style: {
+        return (index.h("div", { key: '185eb1455b2e46d4ef578eaada2abc891458a763', class: "taskListWrapper", style: {
                 fontFamily: this.fontFamily,
                 fontSize: this.fontSize,
             } }, this.tasks.map((task) => (index.h("div", { class: {
@@ -1016,7 +1082,7 @@ const Tooltip = class {
         }
     }
     render() {
-        return (index.h("div", { key: '3399b85004b93210eb01154c38f03034009cadb4', class: this.relatedX ? 'tooltipDetailsContainer' : 'tooltipDetailsContainerHidden', style: { left: `${this.relatedX}px`, top: `${this.relatedY}px` } }, index.h(this.TooltipContent, { key: 'ac99f13b366842e83c15fb13d0488c518e9bab90', task: this.task, fontSize: this.fontSize, fontFamily: this.fontFamily })));
+        return (index.h("div", { key: '285d804e882396024becfcfb1bbe83f7b92ef1ba', class: this.relatedX ? 'tooltipDetailsContainer' : 'tooltipDetailsContainerHidden', style: { left: `${this.relatedX}px`, top: `${this.relatedY}px` } }, index.h(this.TooltipContent, { key: '64a79a8e5c79ef4985e289e2e86c9d4c8ef75175', task: this.task, fontSize: this.fontSize, fontFamily: this.fontFamily })));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -1070,11 +1136,11 @@ const KupVerticalScroll = class {
         };
     }
     render() {
-        return (index.h("div", { key: '383ad53a1b4494dada5c96330c11c344719308fc', style: {
+        return (index.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) }, index.h("div", { key: '3dbf51a648d41315f423d58df04abb21d2d3f63e', style: {
+            }, class: "scroll", onScroll: this.verticalScroll, ref: (el) => (this.scrollRef = el) }, index.h("div", { key: 'f6d2bacc2f3c5532d33cb148e46394bc9697ece9', style: {
                 height: `${this.ganttFullHeight}px`,
                 width: '1px',
             } })));

package/dist/cjs/kup-grid.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-958d0399.js');
-const kupManager = require('./kup-manager-abfe4ddd.js');
+const kupManager = require('./kup-manager-e1bfd4f8.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
 require('./kup-dates-e22ee32c.js');

package/dist/cjs/kup-iframe.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-958d0399.js');
-const kupManager = require('./kup-manager-abfe4ddd.js');
+const kupManager = require('./kup-manager-e1bfd4f8.js');
 require('./kup-dates-e22ee32c.js');
 /**

package/dist/cjs/kup-image-list.cjs.entry.js CHANGED Viewed

@@ -3,17 +3,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-958d0399.js');
-const kupManager = require('./kup-manager-abfe4ddd.js');
+const kupManager = require('./kup-manager-e1bfd4f8.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
-const fImage = require('./f-image-a41d7f1e.js');
-const fButton = require('./f-button-89de2403.js');
+const fImage = require('./f-image-f3944c01.js');
+const fButton = require('./f-button-23ec3db5.js');
 const fButtonDeclarations = require('./f-button-declarations-51ef6d9a.js');
-const fCell = require('./f-cell-75dbd6eb.js');
+const fCell = require('./f-cell-bcc51c0f.js');
 const component = require('./component-cb3b32f5.js');
 require('./kup-dates-e22ee32c.js');
 require('./f-checkbox-1fa28e76.js');
-require('./f-text-field-eb207a83.js');
-require('./f-chip-08857345.js');
+require('./f-text-field-354b6c78.js');
+require('./f-chip-63363ecf.js');
 /**
  * Props of the kup-image-list component.
@@ -38,7 +38,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) {
@@ -102,7 +102,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;
@@ -213,14 +213,14 @@ const KupImageList = class {
             };
             combinedGridStyle = Object.assign(Object.assign({}, combinedGridStyle), gridRowsStyle);
         }
-        return (index.h(index.Host, { key: '86c391c4a1e0c507dc0c07971aa90e6f7091bc95' }, index.h("style", { key: '99f966c6cd10aac991c99b4badca0a6cff1dbf5b' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), index.h("div", { key: 'e4eaa257a47cabcb34a412f56d736cd77fbc97af', id: GenericVariables.componentWrapperId, ref: (el) => {
+        return (index.h(index.Host, { key: 'b62094a90858c7c5f36a9f76b3b4372b506ace67' }, index.h("style", { key: 'eeb8ad09387f7aaad846441e1d7c28554c6996e2' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), index.h("div", { key: 'd908bdbb3d41f6cedaa6e905cc6be9aa4eb4e27b', id: GenericVariables.componentWrapperId, ref: (el) => {
                 __classPrivateFieldSet(this, _KupImageList_el, el, "f");
-            } }, index.h("div", { key: '48ff34cbb307b0ab49ca3b8ed240f0510e674e93', class: "navigation-bar" }, hasNavigation ? (index.h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
+            } }, index.h("div", { key: 'e3852ae5ff9a61857cc70f9ebd83f5f317d596da', class: "navigation-bar" }, hasNavigation ? (index.h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
                 ? 'navigation-bar__wrapper--active'
                 : ''}` }, index.h("div", { class: `navigation-bar__title`, onClick: () => {
                 this.navigationBarToggled =
                     !this.navigationBarToggled;
-            } }, index.h(fImage.FImage, { fit: true, resource: this.currentNode.icon, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: "navigation-bar__title__image" }), index.h("div", { class: "navigation-bar__title__label" }, this.currentNode.value)), index.h(fButton.FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_backProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(kupManager.KupLanguageGeneric.BACK) })), index.h(fButton.FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_topProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(kupManager.KupLanguageGeneric.TOP) })))) : null), index.h("div", { key: '97ac20f9d893c131c03adc953e78435bb062f137', class: "image-list", style: combinedGridStyle }, ...__classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
+            } }, index.h(fImage.FImage, { fit: true, resource: this.currentNode.icon, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: "navigation-bar__title__image" }), index.h("div", { class: "navigation-bar__title__label" }, this.currentNode.value)), index.h(fButton.FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_backProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(kupManager.KupLanguageGeneric.BACK) })), index.h(fButton.FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_topProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(kupManager.KupLanguageGeneric.TOP) })))) : null), index.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"));
@@ -242,7 +242,10 @@ _KupImageList_clickTimeout = new WeakMap(), _KupImageList_kupManager = new WeakM
     };
     const image = index.h(fImage.FImage, Object.assign({}, props));
     const label = index.h("div", { class: "image-list__label" }, node.value);
-    return (index.h(fCell.FCell, { cell: { value: node.value, icon: node.icon, obj: node.obj }, column: { name: 'IMAGE', title: 'Image' }, component: this, density: kupManager.FCellPadding.NONE, row: Object.assign({}, node) }, index.h("div", { class: "image-list__wrapper" }, image, label)));
+    const hasExternalResource = props.resource.indexOf('.') > -1 ||
+        props.resource.indexOf('/') > -1 ||
+        props.resource.indexOf('\\') > -1;
+    return (index.h(fCell.FCell, { cell: { value: node.value, icon: node.icon, obj: node.obj }, column: { name: 'IMAGE', title: 'Image' }, component: this, density: kupManager.FCellPadding.NONE, row: Object.assign({}, node) }, index.h("div", { class: `image-list__wrapper${hasExternalResource ? ' images' : ''}` }, !hasExternalResource && (index.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;
@@ -347,12 +350,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"), kupManager.KupPointerEventTypes.HOLD, holdCb);
     __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.on(__classPrivateFieldGet(this, _KupImageList_el, "f"), kupManager.KupPointerEventTypes.TAP, tapCb);
     __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.on(__classPrivateFieldGet(this, _KupImageList_el, "f"), kupManager.KupPointerEventTypes.DOUBLETAP, doubletapCb);
-    __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.on(__classPrivateFieldGet(this, _KupImageList_el, "f"), kupManager.KupPointerEventTypes.HOLD, holdCb);
 };
 KupImageList.style = KupImageListStyle0;