@sme.up/ketchup 9.6.3 → 9.6.4

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

@@ -1,8 +1,8 @@
 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 { f as ganttDateRangeFromTask, s as seedDates, g as getPhaseById, b as getProjectById } from './kup-planner-renderer-helper-b4727e44.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 './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 KupGanttStyle0 = kupGanttCss;
@@ -556,7 +556,7 @@ const KupGantt = class {
             TaskListHeader: this.TaskListHeader,
             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: '6cfa74263599c97bcae3f8f473f94c69bcaf8258', class: "gannt-wrapper-main" }, h("div", { key: 'ebc15fab0f8675bb5f21230175b7b50842e0974e', 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: '6c9bdf420f5660fbae4f9c9d40f772e9fa93671b', 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: '09d624d5a440649b8b2a032d4257cd64356f2421', 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) }))));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {
@@ -645,11 +645,11 @@ const HorizontalScroll = class {
     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: {
+        return (h("div", { key: 'a560e1597e9122df0d98d0508ace8ec5c04a5513', 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" })));
+            }, class: "scrollWrapper", "data-scrollx": "true", onScroll: this.horizontalScroll }, h("div", { key: 'd1f0693a7a2f4ae545d48c0708f91770c1fee717', style: { width: `${this.svgWidth}px` }, class: "scroll" })));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {
@@ -669,7 +669,7 @@ 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: 'a8cc2a7ee22805a4a0bc4ea5a04eba47635d905d', class: "tooltipDefaultContainer", style: { fontSize: this.fontSize, fontFamily: this.fontFamily } }, 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 && (h("p", { class: "tooltipDefaultContainerParagraph" }, `Duration: ${~~((this.task.end.getTime() - this.task.start.getTime()) / (1000 * 60 * 60 * 24))} day(s)`)), h("p", { key: '85c595ef756929440fac10ff2a63f19a01bd1e34', class: "tooltipDefaultContainerParagraph" }, !!this.task.progress && `Progress: ${this.task.progress} %`)));
     }
 };
 StandardTooltipContent.style = KupStandardTooltipStyle0;
@@ -687,7 +687,7 @@ const KupSwitcher = class {
         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"))));
+        return (h("div", { key: '41dda7f6481d54c262a7362440167aa58b44e8e1', class: "switcher" }, h("button", { key: 'e286b6add4c59978c39cef79e8bddd0704b9b3be', type: "button", class: "button", onClick: day }, h("span", { key: '855e19deedcbb55d6d534260e6b2b76580eb8e71', class: "label" }, "Day")), h("button", { key: 'dffc909ef397ddd44957cad2b304343f9a96998c', type: "button", class: "button", onClick: week }, h("span", { key: 'd69ab19671de0f10e60ba584a1036c628d6204b1', class: "label" }, "Week")), h("button", { key: '42c686fc57fdd6bd4a0cc8fd939946048d663771', type: "button", class: "button", onClick: month }, h("span", { key: 'a1508d10ecfdb50527a2be3b9a7bd069f922753e', class: "label" }, "Month")), h("button", { key: 'b478c7c4ed13b4ed3ab72f148995bf4cc96533c8', type: "button", class: "button", onClick: year }, h("span", { key: 'c56ee36dac14420f256d327cfe6119e9792d072f', class: "label" }, "Year"))));
     }
 };
 KupSwitcher.style = KupSwitcherStyle0;
@@ -727,12 +727,12 @@ const TaskGantt = class {
     }
     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
+        return (h("div", { key: '905f0400ac4a0103896527ef5197cf1d1377b47b', class: "ganttVerticalContainer", ref: (el) => (this.verticalGanttContainerRef = el), dir: "ltr" }, 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 }), h("div", { key: 'ececb1964b8a3a9e0b0a12889b680f8667e49690', 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: '2117872fcdad4e4a3afe4eb4bfc303fce6ea2db7' }, newBarProps)))));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {
@@ -827,7 +827,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: 'd09682f9ac25c58a917abb739e585d5b0e8eb15b', 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: '5fdeb14c140ae767e0e76ff0cbb7a3cc1a952ac2', class: this.horizontalContainerClass, 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);
@@ -874,22 +874,22 @@ const KupTaskListHeader = class {
         this.rowWidth = undefined;
     }
     render() {
-        return (h("div", { key: '85c164a7a4313c8708ce2774338ff123621e7648', class: "ganttTable", style: {
+        return (h("div", { key: '116213bd504a1e48f0484e92db9f7c8fb4dcb602', class: "ganttTable", style: {
                 fontFamily: this.fontFamily,
                 fontSize: this.fontSize,
-            } }, h("div", { key: '46aad2a15e9f7d6fe8e7b705b5cc4f385ebf2d69', class: "ganttTable_Header", style: {
+            } }, h("div", { key: 'afbe32d59d041d923cd831db83ca0b09087cda23', class: "ganttTable_Header", style: {
                 height: `${this.headerHeight - 2}px`,
-            } }, h("div", { key: 'fafa8c4eb47c740fff23eb204a75b872d39876e2', class: "ganttTable_HeaderItem", style: {
+            } }, h("div", { key: 'ffa34b095e8b1d59516e6892c87f9eeeec8d9160', class: "ganttTable_HeaderItem", style: {
                 minWidth: this.rowWidth,
-            } }, "\u00A0Name"), h("div", { key: '1ebbcca3ce32701a8af4140fb638173de9795995', class: "ganttTable_HeaderSeparator", style: {
+            } }, "\u00A0Name"), h("div", { key: 'fad1584e5c299645e59f988e1fedc6fb1c6b05ff', 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: '630992695659d8963415808cb1734e06d9aff914', class: "ganttTable_HeaderItem", style: {
                 minWidth: this.rowWidth,
-            } }, "\u00A0From"), h("div", { key: '3f035b39c2c66677e78c2786cea4a39c824bb60b', class: "ganttTable_HeaderSeparator", style: {
+            } }, "\u00A0From"), h("div", { key: 'e676f60163f722f1fd72f9038157359e61c895d2', 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: 'ee2699da7a0afbfa6944c47621e07112dca46816', class: "ganttTable_HeaderItem", style: {
                 minWidth: this.rowWidth,
             } }, "\u00A0To"))));
     }
@@ -923,7 +923,7 @@ const TaskListTableDefault = class {
         return date.toLocaleDateString(this.locale, this.dateTimeOptions);
     }
     render() {
-        return (h("div", { key: 'a488bee5b9421a1f1f63911ac1ad6702d2f08d65', class: "taskListWrapper", style: {
+        return (h("div", { key: '00ce97c983f8b2fa306cfde7a15565913bbd08fa', class: "taskListWrapper", style: {
                 fontFamily: this.fontFamily,
                 fontSize: this.fontSize,
             } }, this.tasks.map((task) => (h("div", { class: {
@@ -1012,7 +1012,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: '3399b85004b93210eb01154c38f03034009cadb4', class: this.relatedX ? 'tooltipDetailsContainer' : 'tooltipDetailsContainerHidden', style: { left: `${this.relatedX}px`, top: `${this.relatedY}px` } }, h(this.TooltipContent, { key: 'ac99f13b366842e83c15fb13d0488c518e9bab90', task: this.task, fontSize: this.fontSize, fontFamily: this.fontFamily })));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {
@@ -1066,11 +1066,11 @@ const KupVerticalScroll = class {
         };
     }
     render() {
-        return (h("div", { key: '80335159040a9c60dc8213840c3b2d684636585d', style: {
+        return (h("div", { key: '383ad53a1b4494dada5c96330c11c344719308fc', 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: '3dbf51a648d41315f423d58df04abb21d2d3f63e', 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-dd24fb5a.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-dd24fb5a.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-dd24fb5a.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-1e1ed567.js';
+import { F as FButton } from './f-button-1eebd42e.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-af19d5c7.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-802b45fb.js';
+import './f-chip-9e5fdb25.js';
 
 /**
  * Props of the kup-image-list component.

package/dist/esm/kup-input-panel.entry.js

@@ -0,0 +1,294 @@
+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, a3 as FCellTypes } from './kup-manager-dd24fb5a.js';
+import { c as componentWrapperId } from './GenericVariables-d8d0541e.js';
+import { F as FButton } from './f-button-1eebd42e.js';
+import { F as FTextFieldMDC } from './f-text-field-mdc-c88bf688.js';
+import { F as FCell } from './f-cell-af19d5c7.js';
+import './kup-dates-26a56bf7.js';
+import './f-button-declarations-9bdc6f26.js';
+import './f-image-1e1ed567.js';
+import './component-879e99bf.js';
+import './f-checkbox-ddb6234e.js';
+import './f-text-field-802b45fb.js';
+import './f-chip-9e5fdb25.js';
+
+var KupInputPanelProps;
+(function (KupInputPanelProps) {
+    KupInputPanelProps["customStyle"] = "Custom style of the component.";
+    KupInputPanelProps["data"] = "Actual data of the input panel.";
+    KupInputPanelProps["hiddenSubmitButton"] = "Creates a hidden submit button in order to submit the form with enter.";
+    KupInputPanelProps["submitCb"] = "Sets the callback function on submit form";
+    KupInputPanelProps["valueChangeCb"] = "Sets the callback function on value change event";
+})(KupInputPanelProps || (KupInputPanelProps = {}));
+
+const kupInputPanelCss = ".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}.input-panel .f-cell .f-checkbox .checkbox .checkbox__native-control{height:40px;width:40px}";
+const KupInputPanelStyle0 = kupInputPanelCss;
+
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _KupInputPanel_instances, _KupInputPanel_kupManager, _KupInputPanel_renderRow, _KupInputPanel_renderCell, _KupInputPanel_mapCells, _KupInputPanel_mapData, _KupInputPanel_slotData, _KupInputPanel_CHIAdapter, _KupInputPanel_GRAAdapter, _KupInputPanel_BTNAdapter, _KupInputPanel_CMBandACPAdapter, _KupInputPanel_CHKAdapter, _KupInputPanel_CLPAdapter, _KupInputPanel_ITXAdapter, _KupInputPanel_RADAdapter;
+const dom = document.documentElement;
+const KupInputPanel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.kupReady = createEvent(this, "kup-input-panel-ready", 6);
+        _KupInputPanel_instances.add(this);
+        //#endregion
+        //#region VARIABLES
+        /*-------------------------------------------------*/
+        /*       I n t e r n a l   V a r i a b l e s       */
+        /*-------------------------------------------------*/
+        _KupInputPanel_kupManager.set(this, kupManagerInstance());
+        this.customStyle = '';
+        this.data = null;
+        this.hiddenSubmitButton = false;
+        this.submitCb = null;
+        this.handleEventsCallbacks = [];
+        this.inputPanelCells = [];
+    }
+    //#endregion
+    //#region WATCHERS
+    /*-------------------------------------------------*/
+    /*                  W a t c h e r s                */
+    /*-------------------------------------------------*/
+    onDataChanged() {
+        __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_mapCells).call(this, this.data);
+    }
+    //#endregion
+    //#region PUBLIC METHODS
+    /*-------------------------------------------------*/
+    /*           P u b l i c   M e t h o d s           */
+    /*-------------------------------------------------*/
+    /**
+     * Used to retrieve component's props values.
+     * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
+     * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
+     */
+    async getProps(descriptions) {
+        return getProps(this, KupInputPanelProps, descriptions);
+    }
+    /**
+     * This method is used to trigger a new render of the component.
+     */
+    async refresh() {
+        forceUpdate(this);
+    }
+    /**
+     * Sets the props to the component.
+     * @param {GenericObject} props - Object containing props that will be set to the component.
+     */
+    async setProps(props) {
+        setProps(this, KupInputPanelProps, props);
+    }
+    //#endregion
+    //#region LIFECYCLE HOOKS
+    /*-------------------------------------------------*/
+    /*          L i f e c y c l e   H o o k s          */
+    /*-------------------------------------------------*/
+    componentWillLoad() {
+        __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").debug.logLoad(this, false);
+        __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.register(this);
+        __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.register(this);
+        this.onDataChanged();
+    }
+    componentDidLoad() {
+        this.kupReady.emit({ comp: this, id: this.rootElement.id });
+        __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").debug.logLoad(this, true);
+        this.handleEventsCallbacks.map((cbData) => {
+            this.rootElement.addEventListener(cbData.eventName, (e) => {
+                const inputPanelEvent = {
+                    state: this.inputPanelCells.find((data) => data.cells.find((cell) => cell.column.name === e.detail.id)).cells,
+                    data: {
+                        field: e.detail.id,
+                        value: e.detail.inputValue || e.detail.value,
+                    },
+                };
+                cbData.eventCallback(inputPanelEvent);
+            });
+        });
+    }
+    componentWillRender() {
+        __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").debug.logRender(this, false);
+    }
+    componentDidRender() {
+        const root = this.rootElement.shadowRoot;
+        if (root) {
+            const fs = root.querySelectorAll('.f-text-field');
+            for (let index = 0; index < fs.length; index++) {
+                FTextFieldMDC(fs[index]);
+            }
+        }
+        __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").debug.logRender(this, true);
+    }
+    render() {
+        const isEmptyData = Boolean(!this.inputPanelCells.length);
+        const inputPanelContent = isEmptyData
+            ? [
+                h("p", null, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.translate(KupLanguageGeneric.EMPTY_DATA)),
+            ]
+            : this.inputPanelCells.map((inputPanelCell) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderRow).call(this, inputPanelCell));
+        return (h(Host, { key: '47b1cbfae920b48873c3c5c5629ed1d9f4ac7290' }, h("style", { key: 'd48cfa1e1f470e9b991745ef30ebc236c6399b98' }, __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '257d3d98795b32e59abee2c5aa8be341880f37be', id: componentWrapperId }, inputPanelContent)));
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.unregister(this);
+        __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").theme.unregister(this);
+    }
+    get rootElement() { return getElement(this); }
+    static get watchers() { return {
+        "data": ["onDataChanged"]
+    }; }
+};
+_KupInputPanel_kupManager = new WeakMap(), _KupInputPanel_instances = new WeakSet(), _KupInputPanel_renderRow = function _KupInputPanel_renderRow(inputPanelCell) {
+    var _a;
+    // todo layout
+    const horizontal = ((_a = inputPanelCell.row.layout) === null || _a === void 0 ? void 0 : _a.horizontal) || false;
+    const rowContent = inputPanelCell.cells.map((cell) => __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_renderCell).call(this, cell.cell, inputPanelCell.row, cell.column));
+    const classObj = {
+        form: true,
+        'input-panel': true,
+        'form--column': !horizontal,
+    };
+    // We create a form for each row in data
+    return (h("form", { class: classObj, name: this.rootElement.id, onSubmit: this.submitCb }, rowContent, this.hiddenSubmitButton ? (h(FButton, { buttonType: "submit", label: __classPrivateFieldGet(this, _KupInputPanel_kupManager, "f").language.translate(KupLanguageGeneric.CONFIRM), wrapperClass: "form__submit" })) : null));
+}, _KupInputPanel_renderCell = function _KupInputPanel_renderCell(cell, row, column) {
+    const cellProps = {
+        cell,
+        column,
+        row,
+        component: this,
+        editable: cell.isEditable,
+        renderKup: true,
+        setSizes: true,
+    };
+    return h(FCell, Object.assign({}, cellProps));
+}, _KupInputPanel_mapCells = function _KupInputPanel_mapCells(data) {
+    var _a;
+    const inpuPanelCells = ((_a = data === null || data === void 0 ? void 0 : data.rows) === null || _a === void 0 ? void 0 : _a.length)
+        ? data.rows.reduce((inpuPanelCells, row) => {
+            const cells = data.columns
+                .filter((column) => column.visible)
+                .map((column) => {
+                const cell = row.cells[column.name];
+                const mappedCell = Object.assign(Object.assign({}, cell), { data: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_mapData).call(this, cell, column)), { id: column.name }), slotData: __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_slotData).call(this, cell, column), isEditable: cell.editable });
+                return { column, cell: mappedCell };
+            });
+            return [...inpuPanelCells, { cells, row }];
+        }, [])
+        : [];
+    this.inputPanelCells = inpuPanelCells;
+}, _KupInputPanel_mapData = function _KupInputPanel_mapData(cell, col) {
+    const options = cell.options;
+    const fieldLabel = col.title;
+    const currentValue = cell.value;
+    const cellType = dom.ketchup.data.cell.getType(cell, cell.shape);
+    const dataAdapterMap = new Map([
+        [FCellTypes.AUTOCOMPLETE, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_CMBandACPAdapter)],
+        [FCellTypes.BUTTON_LIST, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_BTNAdapter)],
+        [FCellTypes.CHART, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_GRAAdapter)],
+        [FCellTypes.CHIP, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_CHIAdapter)],
+        [FCellTypes.CHECKBOX, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_CHKAdapter)],
+        [FCellTypes.COLOR_PICKER, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_CLPAdapter)],
+        [FCellTypes.COMBOBOX, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_CMBandACPAdapter)],
+        [FCellTypes.RADIO, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_RADAdapter)],
+        [FCellTypes.STRING, __classPrivateFieldGet(this, _KupInputPanel_instances, "m", _KupInputPanel_ITXAdapter)],
+    ]);
+    const adapter = dataAdapterMap.get(cellType);
+    return adapter ? adapter(options, fieldLabel, currentValue) : null;
+}, _KupInputPanel_slotData = function _KupInputPanel_slotData(cell, col) {
+    const cellType = dom.ketchup.data.cell.getType(cell, cell.shape);
+    if (cellType !== FCellTypes.CHIP &&
+        cellType !== FCellTypes.MULTI_AUTOCOMPLETE &&
+        cellType !== FCellTypes.MULTI_COMBOBOX &&
+        !cell.editable) {
+        return null;
+    }
+    return {
+        trailingIcon: true,
+        label: col.title,
+    };
+}, _KupInputPanel_CHIAdapter = function _KupInputPanel_CHIAdapter(options, _fieldLabel, currentValue) {
+    return {
+        data: (options === null || options === void 0 ? void 0 : options.length)
+            ? options.map((option) => ({
+                value: option.label,
+                id: option.id,
+                selected: currentValue === option.id,
+            }))
+            : [{ id: currentValue, value: currentValue }],
+    };
+}, _KupInputPanel_GRAAdapter = function _KupInputPanel_GRAAdapter() {
+    //TODO: definire mapping
+    return {
+        data: {
+            sizeX: '50px',
+            offlineMode: {
+                value: '8;4;5',
+            },
+            id: 'i1012_GREF_0',
+            cellId: 'i1012_GREF_0',
+            sizeY: '50px',
+        },
+    };
+}, _KupInputPanel_BTNAdapter = function _KupInputPanel_BTNAdapter(_options, _fieldLabel, _currentValue) {
+    //TODO: come gestire i button list dal protocollo?
+    return {
+        data: [
+            {
+                data: { dropdownOnly: false, label: 'Pier' },
+            },
+            { data: { dropdownOnly: false, label: 'Valerio' } },
+        ],
+    };
+}, _KupInputPanel_CMBandACPAdapter = function _KupInputPanel_CMBandACPAdapter(options, fieldLabel, currentValue) {
+    return {
+        data: {
+            'kup-text-field': {
+                trailingIcon: true,
+                label: fieldLabel,
+                icon: 'arrow_drop_down',
+            },
+            'kup-list': {
+                showIcons: true,
+                data: (options === null || options === void 0 ? void 0 : options.length)
+                    ? options.map((option) => ({
+                        value: option.label,
+                        id: option.id,
+                        selected: currentValue === option.id,
+                    }))
+                    : [],
+            },
+        },
+        label: fieldLabel,
+    };
+}, _KupInputPanel_CHKAdapter = function _KupInputPanel_CHKAdapter(_options, fieldLabel, currentValue) {
+    return {
+        checked: currentValue === 'on' || currentValue === '1',
+        label: fieldLabel,
+    };
+}, _KupInputPanel_CLPAdapter = function _KupInputPanel_CLPAdapter(_options, fieldLabel, _currentValue) {
+    return {
+        data: {
+            'kup-text-field': {
+                label: fieldLabel,
+            },
+        },
+    };
+}, _KupInputPanel_ITXAdapter = function _KupInputPanel_ITXAdapter(_options, fieldLabel, _currentValue) {
+    return { label: fieldLabel };
+}, _KupInputPanel_RADAdapter = function _KupInputPanel_RADAdapter(options, _fieldLabel, currentValue) {
+    return {
+        data: options.map((option) => ({
+            value: option.id,
+            label: option.label,
+            checked: option.id === currentValue,
+        })),
+    };
+};
+KupInputPanel.style = KupInputPanelStyle0;
+
+export { KupInputPanel as kup_input_panel };

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

@@ -1,7 +1,7 @@
 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 } from './kup-manager-cdb4f21a.js';
+import { k as kupManagerInstance, g as getProps, s as setProps } from './kup-manager-dd24fb5a.js';
 import { c as componentWrapperId } from './GenericVariables-d8d0541e.js';
-import './kup-dates-4ad48be7.js';
+import './kup-dates-26a56bf7.js';
 
 /**
  * Props of the kup-lazy component.
@@ -134,39 +134,39 @@ const KupLazy = class {
         switch (this.componentName) {
             case 'kup-button':
                 //call_to_action.svg
-                resource = (h("svg", { key: '443fa9b66f9c77621cb7a377eb920bc60c59bde9', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '89cf45ecbcd72a193b5a34c767870de6c29c12ca', d: "M42 6H6c-2.2 0-4 1.8-4 4v28c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4V10c0-2.2-1.8-4-4-4zm0 32H6v-6h36v6z" })));
+                resource = (h("svg", { key: 'bca5daf712b40d11abe4f3b1856385844642acf1', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'ab212455b45b78bf981309de350b4b3619a288e9', d: "M42 6H6c-2.2 0-4 1.8-4 4v28c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4V10c0-2.2-1.8-4-4-4zm0 32H6v-6h36v6z" })));
                 break;
             case 'kup-card':
                 //art_track.svg
-                resource = (h("svg", { key: 'dd9f6feeb37d8a9e35e7666bad5a01891f35379d', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '63a2e64edf16b4536a0229ea2a8bcc61b5edfd34', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
+                resource = (h("svg", { key: '1e266ffe7b2568dc6caa45592e86b73c7683cc16', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '14a4eb6f9c5b6772cd26ec29aef7b470e0fe6574', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
                 break;
             case 'kup-checkbox':
                 //check_box_outline_blank.svg
-                resource = (h("svg", { key: '974137d7bdc5d82995437999b798c5b559a4dcbf', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'a74fe51dc66ed1f8780d52d99424f53cd6357877', d: "M38 10v28H10V10h28m0-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4z" })));
+                resource = (h("svg", { key: 'd553613ffa5ee60014a4e89cf8e62ace3384f3a4', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'bf5a69068bc1f2142a0d4b451cf3cdceb16d7963', d: "M38 10v28H10V10h28m0-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4z" })));
                 break;
             case 'kup-chart':
                 //chart-bar.svg
-                resource = (h("svg", { key: '721b36d96e2b04b83a81cf90f3cf687983ab2cec', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '58b44e235faeec04c16fd483e06f2319d06c0d46', d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
+                resource = (h("svg", { key: '51f3129e31571f6e7a8faf293a6f3e35ba7524e0', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '19085e9d52b14637127c1bafdb37beb5349d2300', d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
                 break;
             case 'kup-data-table':
                 //table-large.svg
-                resource = (h("svg", { key: 'f3afac4818e7716418876a9aa31fccef8ec01065', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '5f65fcb7cfe13a5ceb622277c0254ea5fc10cbfd', d: "M4,3H20A2,2 0 0,1 22,5V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V5A2,2 0 0,1 4,3M4,7V10H8V7H4M10,7V10H14V7H10M20,10V7H16V10H20M4,12V15H8V12H4M4,20H8V17H4V20M10,12V15H14V12H10M10,20H14V17H10V20M20,20V17H16V20H20M20,12H16V15H20V12Z" })));
+                resource = (h("svg", { key: 'f7f187befb900356e7e589b3d169adff21791e35', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '4a53ed7568274a78be593b5ce8cd412747313725', d: "M4,3H20A2,2 0 0,1 22,5V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V5A2,2 0 0,1 4,3M4,7V10H8V7H4M10,7V10H14V7H10M20,10V7H16V10H20M4,12V15H8V12H4M4,20H8V17H4V20M10,12V15H14V12H10M10,20H14V17H10V20M20,20V17H16V20H20M20,12H16V15H20V12Z" })));
                 break;
             case 'kup-image':
                 //photo.svg
-                resource = (h("svg", { key: '9ef1ec66b4d9f1bfb857050c7675bc603a6e3c28', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'b7af93b41b90594b3796845fcdbfef1b58da2e9f', d: "M42 38V10c0-2.21-1.79-4-4-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4zM17 27l5 6.01L29 24l9 12H10l7-9z" })));
+                resource = (h("svg", { key: '587c27f674e8c3f153c9ed047ed605301a477621', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'e76e9b0410e3375d8d981396fdacc2f2c44dadf1', d: "M42 38V10c0-2.21-1.79-4-4-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4zM17 27l5 6.01L29 24l9 12H10l7-9z" })));
                 break;
             case 'kup-progress-bar':
                 //linear_scale.svg
-                resource = (h("svg", { key: '927e099e9635eaa351c215038215b16c482cbb4e', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '19b0203ffa92bef2fccfab60d1d371991f27e9fe', d: "M39 19c-2.05 0-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3s-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3-2.77 0-5 2.23-5 5s2.23 5 5 5c2.05 0 3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3s3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3 2.77 0 5-2.23 5-5s-2.23-5-5-5z" })));
+                resource = (h("svg", { key: 'c7e82a2c18827a874acd6b8fe2dbcb4009ab3807', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '291ca07cfeced3bbbc92cb5ae7ac69375b640e22', d: "M39 19c-2.05 0-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3s-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3-2.77 0-5 2.23-5 5s2.23 5 5 5c2.05 0 3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3s3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3 2.77 0 5-2.23 5-5s-2.23-5-5-5z" })));
                 break;
             case 'kup-radio':
                 //radio_button_unchecked.svg
-                resource = (h("svg", { key: '54722f3674a50a06b25d6b522b3e6c16f17bc38f', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '4072725741e4e13718719a58a04e7b38d970474c', d: "M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" })));
+                resource = (h("svg", { key: 'd2f81e158dc86c4ef74ad7628ac376f7e0eacbe2', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'fc4ec71ff460760866b3ad99db0d8cb9b8e3cd3b', d: "M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" })));
                 break;
             default:
                 //art_track.svg
-                resource = (h("svg", { key: '6f01bf46027c471e23977744437b772389f11373', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'a06e38a7b791a7bbbfdfa214410118c354db1bba', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
+                resource = (h("svg", { key: '8da82bcc100ef628d5f4bab0a8d28c06841270ca', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'f95db9cad4ee1973048e1a121cf84a8b0ecbce99', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
                 break;
         }
         if ((this.renderMode === KupLazyRender.VIEWPORT && this.isInViewport) ||
@@ -175,14 +175,14 @@ const KupLazy = class {
                 this.data &&
                 this.isInViewport)) {
             let Tag = this.componentName;
-            content = (h(Tag, Object.assign({ key: 'b11a009ad63262e8fd26d8e672fecb829b89d190' }, this.data, { ref: (el) => (this.lazyComponent = el) })));
+            content = (h(Tag, Object.assign({ key: 'af0853700b7bbfdcfd01f500fe303816264b387f' }, this.data, { ref: (el) => (this.lazyComponent = el) })));
             className += ' kup-loaded';
         }
         else if (this.showPlaceholder) {
             content = resource;
             className += ' kup-to-be-loaded';
         }
-        return (h(Host, { key: 'c7c2773d030703d7034705075df18657481ecbe6', class: className }, h("style", { key: 'b83be89f8a9f9b394dba345e6b764361e890c8ed' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '262125d048ac9f2d99c2f6a3ccb99f8286a35e99', id: componentWrapperId }, content)));
+        return (h(Host, { key: '66562d25373ef498b4b82bc654752c894051ce6b', class: className }, h("style", { key: '7b314d53110ba9310ee1717f3b026da85e95e04d' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '4e72e07e2acb78b1db0e0a69c8a3424ff14731ff', id: componentWrapperId }, content)));
     }
     disconnectedCallback() {
         var _a;

package/dist/esm/kup-magic-box.entry.js

@@ -1,9 +1,9 @@
 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, l as KupLanguageGeneric, d as KupDebugCategory, ai as kupDropEvent, N as kupDraggableColumnAttr, aj as kupDraggableRowAttr, U as KupDropEventTypes, c as KupThemeColorValues } from './kup-manager-cdb4f21a.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, l as KupLanguageGeneric, d as KupDebugCategory, ai as kupDropEvent, N as kupDraggableColumnAttr, aj as kupDraggableRowAttr, U as KupDropEventTypes, c as KupThemeColorValues } from './kup-manager-dd24fb5a.js';
 import { F as FButtonStyling } from './f-button-declarations-9bdc6f26.js';
-import { F as FImage } from './f-image-8b382cc5.js';
+import { F as FImage } from './f-image-1e1ed567.js';
 import { c as componentWrapperId } from './GenericVariables-d8d0541e.js';
-import './kup-dates-4ad48be7.js';
+import './kup-dates-26a56bf7.js';
 
 /**
  * Props of the kup-magic-box component.
@@ -287,11 +287,11 @@ const KupMagicBox = class {
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: '79c487291987eeaa0dfd3127cd93e11bdd51a048' }, h("style", { key: '88d77f9029cbe5e112c41fad1e1a7c4fefdc06ef' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '59cbf333a260e3c2455c69d9717d088019a7ca53', id: componentWrapperId }, h("div", { key: 'e1a68e91de25ca426c7d029219fdaf98865c2a9f', class: "magic-box-wrapper" }, h("div", { key: '1db871607d685738ce9eb4ea99c7807aa0918a25', class: "actions", id: "drag-handle" }, h("kup-combobox", Object.assign({ key: '01e46100ea2c370e0079358921e8fa338434ff6e' }, this.comboboxProps())), h("kup-button", { key: '0ab7767d552bf4119db2ac2f5f69f574027eeebd', styling: FButtonStyling.FLAT, icon: "delete", label: "Reset", "onkup-button-click": () => {
+        return (h(Host, { key: '212f73b08fa30db6822a33f61dd8d10fe5e0ae5c' }, h("style", { key: 'bd8dfa094092c2b010867f98d595320d59e120e8' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '29d97585aa1a3d0c8680912289153337c2c2a23c', id: componentWrapperId }, h("div", { key: 'fc73991d493f68a37690b4b9d8dbc45ff15e9c1a', class: "magic-box-wrapper" }, h("div", { key: '7f27dcf3a8916ea1007a263cff3a1b835ce39612', class: "actions", id: "drag-handle" }, h("kup-combobox", Object.assign({ key: '2f7303dd205ad6411c73e5ec5809632b12d134ca' }, this.comboboxProps())), h("kup-button", { key: 'ef696124673192ca35f7b71138f061c6e09a3f70', styling: FButtonStyling.FLAT, icon: "delete", label: "Reset", "onkup-button-click": () => {
                 this.data = null;
-            } }), h("kup-button", { key: '26267a6c3e19b15725feda21eed43d9db3f2ddc4', id: "close-dialog", customStyle: `:host{${KupThemeColorValues.PRIMARY}: var(${KupThemeColorValues.TITLE});}`, icon: "clear", "onkup-button-click": () => {
+            } }), h("kup-button", { key: '09d63727c8500844e614606d5417f350cb2aebed', id: "close-dialog", customStyle: `:host{${KupThemeColorValues.PRIMARY}: var(${KupThemeColorValues.TITLE});}`, icon: "clear", "onkup-button-click": () => {
                 this.kupManager.hideMagicBox();
-            } })), h("div", { key: 'd5ec68498c68b205ce2c7247cd19e01b6a283230', class: "content", ref: (el) => (this.wrapperRef = el) }, this.setContent())))));
+            } })), h("div", { key: 'aaa1d0f9e81041dfa3669bcb1222b937760c49aa', class: "content", ref: (el) => (this.wrapperRef = el) }, this.setContent())))));
     }
     disconnectedCallback() {
         this.kupManager.interact.unregister([