@sme.up/ketchup 9.5.2 → 9.6.0

package/dist/cjs/kup-family-tree.cjs.entry.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8f2f4159.js');
-const fButton = require('./f-button-357a3dff.js');
+const index = require('./index-db0a6be6.js');
+const fButton = require('./f-button-623dfcc3.js');
 const fButtonDeclarations = require('./f-button-declarations-51ef6d9a.js');
-const fImage = require('./f-image-30531fd0.js');
-const kupManager = require('./kup-manager-cefb1999.js');
+const fImage = require('./f-image-b61cc967.js');
+const kupManager = require('./kup-manager-227c4be2.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
-require('./kup-dates-0e59b05d.js');
+require('./kup-dates-4aa560f0.js');
 
 /**
  * Props of the kup-family-tree component.
@@ -27,6 +27,7 @@ var KupFamilyTreeProps;
 })(KupFamilyTreeProps || (KupFamilyTreeProps = {}));
 
 const kupFamilyTreeCss = ":host{--kup_familytree_item_background_color:var(\n    --kup-familytree-item-background-color,\n    var(--kup-background-color)\n  );--kup_familytree_item_color:var(\n    --kup-familytree-item-color,\n    var(--kup-text-color)\n  );--kup_familytree_item_height:var(--kup-familytree-item-height, 80px);--kup_familytree_item_h_padding:var(--kup-familytree-item-h-padding, 8px);--kup_familytree_item_v_padding:var(--kup-familytree-item-v-padding, 10px);--kup_familytree_item_width:var(--kup-familytree-item-width, 280px);--kup_familytree_lines_color:var(\n    --kup-familytree-lines-color,\n    var(--kup-border-color)\n  );display:block;overflow:hidden}.family-tree{cursor:grab;display:flex;transform:scale(var(--kup_familytree_scale, 1));transform-origin:0px 0px}.family-tree--dragging{cursor:grabbing}.family-tree__node{border-collapse:collapse;margin:auto}.family-tree__node--stacked{margin-bottom:4px}.family-tree__node__staff{align-items:center;display:flex;flex-direction:column;height:0;transform:translateX(calc((var(--kup_familytree_item_width) + var(--kup_familytree_item_h_padding) * 2) / 2)) translateY(calc(0px - (var(--kup_familytree_staffchildren) * var(--kup_familytree_item_height) + var(--kup_familytree_staffchildren) * var(--kup_familytree_item_v_padding) * 2)))}.family-tree__node__staff__item{padding:var(--kup_familytree_item_v_padding);text-align:left}.family-tree__node__staff__item:before{border-top:2px solid var(--kup_familytree_lines_color);content:\"\";position:absolute;transform:translateX(calc(100% + 2px)) translateY(calc(var(--kup_familytree_item_height) / 2));width:var(--kup_familytree_item_h_padding)}.family-tree__node td{vertical-align:top;padding:0}.family-tree__line--left{border-left:2px solid var(--kup_familytree_lines_color)}.family-tree__line--placeholder{height:calc(var(--kup_familytree_item_height) / 2)}.family-tree__line--staff{height:calc(var(--kup_familytree_staffchildren) * var(--kup_familytree_item_height) + var(--kup_familytree_staffchildren) * var(--kup_familytree_item_v_padding) * 2)}.family-tree__line--right{border-right:2px solid var(--kup_familytree_lines_color)}.family-tree__line--top{border-top:2px solid var(--kup_familytree_lines_color)}.family-tree__line--vertical{background-color:var(--kup_familytree_lines_color);margin-left:auto;margin-right:auto;width:2px}.family-tree__item{display:flex}.family-tree__item__wrapper{margin:auto}.family-tree__item__wrapper kup-box{margin:0 auto;overflow:hidden;padding:0 18px;width:var(--kup_familytree_item_width);z-index:1}.family-tree__item__wrapper .f-button{--kup-button-primary-color:var(--kup-text-color);--kup-button-primary-color-rgb:var(--kup-text-color-rgb);--kup-button-primary-color-h:var(--kup-text-color-h);--kup-button-primary-color-s:var(--kup-text-color-s);--kup-button-primary-color-l:var(--kup-text-color-l);margin:0 auto;width:max-content}.family-tree__item__wrapper .f-button button{height:32px;width:32px}.family-tree__item__layout{background-color:var(--kup_familytree_item_background_color);border:1px solid var(--kup_familytree_lines_color);border-radius:8px;box-sizing:border-box;display:flex;height:var(--kup_familytree_item_height);margin:0 18px;width:var(--kup_familytree_item_width)}.family-tree__item__layout--1{justify-content:center;color:var(--kup_familytree_item_color)}.family-tree__item__layout--1>.family-tree__item__layout__text__title{margin-top:auto;margin-bottom:auto}.family-tree__item__layout--2{background-color:var(--kup_familytree_item_background_color);justify-content:flex-start}.family-tree__item__layout__color{background-color:var(--kup-secondary-color);border-bottom-left-radius:8px;border-top-left-radius:8px;height:100%;width:10px}.family-tree__item__layout__image{display:flex;margin:auto 10px}.family-tree__item__layout__image img{border-radius:50px;object-fit:cover}.family-tree__item__layout__text{display:flex;flex-direction:column;justify-content:center}.family-tree__item__layout__text__title{font-size:18px;margin-bottom:5px}.family-tree__item__layout__text__subtitle{font-size:14px}.family-tree__item__layout__text__title,.family-tree__item__layout__text__subtitle{max-width:calc(var(--kup_familytree_item_width) - 30%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
+const KupFamilyTreeStyle0 = kupFamilyTreeCss;
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)
@@ -173,12 +174,12 @@ const KupFamilyTree = class {
         __classPrivateFieldGet(this, _KupFamilyTree_kupManager, "f").debug.logRender(this, true);
     }
     render() {
-        return (index.h(index.Host, { onDrag: (e) => e.preventDefault(), onPointerDown: (e) => {
+        return (index.h(index.Host, { key: '84ce528e459f5a79624e5e9fc5787477ff623746', onDrag: (e) => e.preventDefault(), onPointerDown: (e) => {
                 e.preventDefault();
                 __classPrivateFieldGet(this, _KupFamilyTree_instances, "m", _KupFamilyTree_startPanning).call(this, e);
             }, onWheel: (e) => {
                 __classPrivateFieldGet(this, _KupFamilyTree_instances, "m", _KupFamilyTree_zoomTree).call(this, e);
-            } }, index.h("style", null, __classPrivateFieldGet(this, _KupFamilyTree_kupManager, "f").theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId }, __classPrivateFieldGet(this, _KupFamilyTree_instances, "m", _KupFamilyTree_createTree).call(this))));
+            } }, index.h("style", { key: '1fe47674c65a2cd4929f907d8a2a7ae0c7d21f73' }, __classPrivateFieldGet(this, _KupFamilyTree_kupManager, "f").theme.setKupStyle(this.rootElement)), index.h("div", { key: '253190ac263c49f65981919ad5bdc26388832d66', id: GenericVariables.componentWrapperId }, __classPrivateFieldGet(this, _KupFamilyTree_instances, "m", _KupFamilyTree_createTree).call(this))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupFamilyTree_kupManager, "f").language.unregister(this);
@@ -447,6 +448,6 @@ _KupFamilyTree_clickTimeout = new WeakMap(), _KupFamilyTree_hold = new WeakMap()
         __classPrivateFieldGet(this, _KupFamilyTree_wrapperEl, "f").style.setProperty('--kup_familytree_scale', value.toFixed(2));
     }
 };
-KupFamilyTree.style = kupFamilyTreeCss;
+KupFamilyTree.style = KupFamilyTreeStyle0;
 
 exports.kup_family_tree = KupFamilyTree;

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

@@ -2,17 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8f2f4159.js');
-const kupPlannerRendererHelper = require('./kup-planner-renderer-helper-c2394940.js');
+const index = require('./index-db0a6be6.js');
+const kupPlannerRendererHelper = require('./kup-planner-renderer-helper-f0c869d7.js');
 const bar_helpers = require('./bar.helpers-f46a5a83.js');
 const kupPlannerDeclarations = require('./kup-planner-declarations-d3dec885.js');
-require('./kup-dates-0e59b05d.js');
+require('./kup-dates-4aa560f0.js');
 
 const kupGanttCss = ".wrapper{display:flex;padding:0;margin:0;list-style:none;outline:none;position:relative}.ganttContainer{background:#efefef;border-radius:8px;margin:12px;overflow:hidden;padding:12px}.ganttVerticalContainer{overflow:hidden;font-size:0;margin:0;padding:0}.horizontalContainer{margin:0;padding:0;overflow:hidden}.task-gantt{overflow:hidden}.tasks{border-radius:8px;background:#efefef;margin:12px;padding:12px}";
+const KupGanttStyle0 = kupGanttCss;
 
 const KupGantt = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.taskListTrueRef = null;
         this.ganttId = undefined;
         this.tasks = undefined;
         this.headerHeight = 114;
@@ -552,7 +554,7 @@ const KupGantt = class {
             TaskListHeader: this.TaskListHeader,
             TaskListTable: this.TaskListTable,
         };
-        return (index.h("div", { class: "gannt-wrapper-main" }, index.h("div", { class: "wrapper", onKeyDown: this.handleKeyDown.bind(this), tabIndex: 0, ref: (el) => (this.wrapperRef = el) }, this.listCellWidth && (index.h("kup-task-list", Object.assign({ currentTasks: this.currentTasks, handleClick: this.handleClick, handleDblClick: this.handleDblClick, handleContextMenu: this.handleContextMenu, ganttOnClick: this.ganttOnClick, ganttOnDblClick: this.ganttOnDblClick, ganttonOnContextMenu: this.ganttonOnContextMenu, label: this.label, doubleView: this.doubleView, setDoubleView: this.setDoubleView }, tableProps, { class: "tasks" }))), index.h("kup-task-gantt", { gridProps: gridProps, calendarProps: calendarProps, barProps: barProps, ganttHeight: this.ganttHeight, taskGanttRef: this.taskGanttRef, scrollY: this.scrollY, scrollX: this.scrollX, class: "ganttContainer" }), this.ganttEvent.changedTask && (index.h("kup-tooltip", { arrowIndent: this.arrowIndent, rowHeight: this.rowHeight, svgContainerHeight: this.svgContainerHeight, svgContainerWidth: this.svgContainerWidth, fontFamily: this.fontFamily, fontSize: this.fontSize, scrollX: this.scrollX, scrollY: this.scrollY, task: this.ganttEvent.changedTask, headerHeight: this.headerHeight, taskListWidth: this.taskListWidth, TooltipContent: this.TooltipContent, rtl: this.rtl, svgWidth: this.svgWidth })), index.h("kup-vertical-scroll", { ganttFullHeight: this.ganttFullHeight, ganttHeight: this.ganttHeight, headerHeight: this.headerHeight, scrollNumber: this.scrollY, verticalScroll: this.handleScrollY.bind(this), rtl: this.rtl })), this.taskGanttRef && (index.h("kup-horizontal-scroll", { svgWidth: this.svgWidth, taskGanttRef: this.taskGanttRef, taskListWidth: this.taskListWidth, scrollNumber: this.scrollX, rtl: this.rtl, horizontalScroll: this.handleScrollX.bind(this) }))));
+        return (index.h("div", { key: '45f78de60434d538eb10b97a88be922a9365a7e9', class: "gannt-wrapper-main" }, index.h("div", { key: '9376c59327c70a07fd87e8c26f58c073c7da6d38', 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: 'fbf014b8900787ad70e0acd609d512da11248890', 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: '55634bee7bb94ddb0958e955c915a3fd18916228', 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) }))));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -603,16 +605,17 @@ const KupGantt = class {
         "projection": ["updateProjectionContent"]
     }; }
 };
-KupGantt.style = kupGanttCss;
+KupGantt.style = KupGanttStyle0;
 
-const kupHorizontalScrollCss = ".scrollWrapper{overflow:auto;max-width:100%;scrollbar-width:thin;height:1.2rem}.scrollWrapper::-webkit-scrollbar{width:1.1rem;height:1.1rem}.scrollWrapper::-webkit-scrollbar-corner{background:transparent}.scrollWrapper::-webkit-scrollbar-thumb{border:6px solid transparent;background:rgba(0, 0, 0, 0.2);background:var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));border-radius:10px;background-clip:padding-box}.scrollWrapper::-webkit-scrollbar-thumb:hover{border:4px solid transparent;background:rgba(0, 0, 0, 0.3);background:var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));background-clip:padding-box}.scroll{height:1px}";
+const kupHorizontalScrollCss = ".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 KupHorizontalScrollStyle0 = kupHorizontalScrollCss;
 
 const HorizontalScroll = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.scrollNumber = undefined;
         this.svgWidth = undefined;
-        this.taskGanttRef = undefined;
+        this.taskListTrueRef = undefined;
         this.rtl = undefined;
         this.taskListWidth = undefined;
         this.horizontalScroll = undefined;
@@ -638,23 +641,23 @@ const HorizontalScroll = class {
         }
     }
     render() {
-        const rect = this.taskGanttRef.getBoundingClientRect();
-        return (index.h("div", { dir: "ltr", style: rect
-                ? {
-                    margin: this.rtl
-                        ? `0px ${rect.x}px 0px 0px`
-                        : `0px 0px 0px ${rect.x}px`,
-                }
-                : undefined, class: "scrollWrapper", "data-scrollx": "true", onScroll: this.horizontalScroll }, index.h("div", { style: { width: `${this.svgWidth}px` }, class: "scroll" })));
+        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: '6900ce2b4ff33f7f48403c085861d25d8a55ae51', 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: 'd5cd1e9ec9d4dc2a1c249eef3c485dc3eb9f82ad', style: { width: `${this.svgWidth}px` }, class: "scroll" })));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {
         "scrollNumber": ["scrollLeft"]
     }; }
 };
-HorizontalScroll.style = kupHorizontalScrollCss;
+HorizontalScroll.style = KupHorizontalScrollStyle0;
 
 const kupTooltipCss$1 = ".tooltipDefaultContainer{background:#fff;padding:12px;box-shadow:0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)}.tooltipDefaultContainerParagraph{font-size:12px;margin-bottom:6px;color:#666}.tooltipDetailsContainer{position:absolute;display:flex;flex-shrink:0;pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tooltipDetailsContainerHidden{visibility:hidden;position:absolute;display:flex;pointer-events:none}";
+const KupStandardTooltipStyle0 = kupTooltipCss$1;
 
 const StandardTooltipContent = class {
     constructor(hostRef) {
@@ -664,12 +667,13 @@ const StandardTooltipContent = class {
         this.fontFamily = undefined;
     }
     render() {
-        return (index.h("div", { class: "tooltipDefaultContainer", style: { fontSize: this.fontSize, fontFamily: this.fontFamily } }, index.h("b", { style: { fontSize: `${parseInt(this.fontSize) + 6}px` } }, `${this.task.name}: ${this.task.start.getDate()}-${this.task.start.getMonth() + 1}-${this.task.start.getFullYear()} - ${this.task.end.getDate()}-${this.task.end.getMonth() + 1}-${this.task.end.getFullYear()}`), this.task.end.getTime() - this.task.start.getTime() !== 0 && (index.h("p", { class: "tooltipDefaultContainerParagraph" }, `Duration: ${~~((this.task.end.getTime() - this.task.start.getTime()) / (1000 * 60 * 60 * 24))} day(s)`)), index.h("p", { class: "tooltipDefaultContainerParagraph" }, !!this.task.progress && `Progress: ${this.task.progress} %`)));
+        return (index.h("div", { key: '654584ad4531cbc29fac8f6f1f8862f32127e614', class: "tooltipDefaultContainer", style: { fontSize: this.fontSize, fontFamily: this.fontFamily } }, index.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 && (index.h("p", { class: "tooltipDefaultContainerParagraph" }, `Duration: ${~~((this.task.end.getTime() - this.task.start.getTime()) / (1000 * 60 * 60 * 24))} day(s)`)), index.h("p", { key: '021b32e66e1ee1254acb60d7a5c1f38f1b59ea42', class: "tooltipDefaultContainerParagraph" }, !!this.task.progress && `Progress: ${this.task.progress} %`)));
     }
 };
-StandardTooltipContent.style = kupTooltipCss$1;
+StandardTooltipContent.style = KupStandardTooltipStyle0;
 
 const kupSwitcherCss = ".switcher{display:grid;grid-auto-flow:column;grid-gap:8px;margin-left:12px;width:max-content}.button{background:transparent;border-color:var(--kup-primary-color, #003b77);border-radius:4px;border-width:1px;box-shadow:0 3px 1px -2px rgba(var(--kup-text-color-rgb, 51 51 51), 0.2), 0 2px 2px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.14), 0 1px 5px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.12);box-sizing:border-box;color:var(--kup-primary-color, #003b77);cursor:pointer;font-size:11px;height:32px;min-width:64px}.label{font-family:var(--kup-font-family, inherit);font-size:11px;letter-spacing:0.0892857143em;text-decoration:none;text-transform:uppercase;padding:0 6px}";
+const KupSwitcherStyle0 = kupSwitcherCss;
 
 const KupSwitcher = class {
     constructor(hostRef) {
@@ -681,10 +685,10 @@ const KupSwitcher = class {
         const week = () => this.timeUnitChange('week');
         const month = () => this.timeUnitChange('month');
         const year = () => this.timeUnitChange('year');
-        return (index.h("div", { class: "switcher" }, index.h("button", { type: "button", class: "button", onClick: day }, index.h("span", { class: "label" }, "Day")), index.h("button", { type: "button", class: "button", onClick: week }, index.h("span", { class: "label" }, "Week")), index.h("button", { type: "button", class: "button", onClick: month }, index.h("span", { class: "label" }, "Month")), index.h("button", { type: "button", class: "button", onClick: year }, index.h("span", { class: "label" }, "Year"))));
+        return (index.h("div", { key: '64c26910f550b5c74b294667e58f396f0642e601', class: "switcher" }, index.h("button", { key: '1f110cd85b5e837aec6f5c2b69ac14b3a47d9f79', type: "button", class: "button", onClick: day }, index.h("span", { key: 'be249d7896fcd93905e8865309405d30dfa506bf', class: "label" }, "Day")), index.h("button", { key: '81dfab2aebed98d32cff106577795a064c03a257', type: "button", class: "button", onClick: week }, index.h("span", { key: 'e5c41e5dcd9d775c6749c2907e59a7d0400e3712', class: "label" }, "Week")), index.h("button", { key: 'a598a5ab4f1496bbd267134201b21c45e5198d01', type: "button", class: "button", onClick: month }, index.h("span", { key: '57769be17ca1de59a919cbb7e7ac11d0546a28fb', class: "label" }, "Month")), index.h("button", { key: 'b62c7585c44acc19863bc93898851348250ba7fa', type: "button", class: "button", onClick: year }, index.h("span", { key: '9f4ab800c4eef1666ceabaebe0d35b042753430f', class: "label" }, "Year"))));
     }
 };
-KupSwitcher.style = kupSwitcherCss;
+KupSwitcher.style = KupSwitcherStyle0;
 
 const TaskGantt = class {
     constructor(hostRef) {
@@ -714,17 +718,19 @@ const TaskGantt = class {
     }
     //---- Lifecycle hooks ----
     componentDidLoad() {
-        this.updateScrollX();
-        this.updateScrollY();
+        setTimeout(() => {
+            this.updateScrollX();
+            this.updateScrollY();
+        }, 75);
     }
     render() {
         const newBarProps = Object.assign(Object.assign({}, this.barProps), { gridProps: this.gridProps });
-        return (index.h("div", { class: "ganttVerticalContainer", ref: (el) => (this.verticalGanttContainerRef = el), dir: "ltr" }, index.h("kup-gantt-calendar", { dateSetup: this.calendarProps.dateSetup, locale: this.calendarProps.locale, rtl: this.calendarProps.rtl, headerHeight: this.calendarProps.headerHeight, columnWidth: this.calendarProps.columnWidth, fontFamily: this.calendarProps.fontFamily, fontSize: this.calendarProps.fontSize, dateTimeFormatters: this.calendarProps.dateTimeFormatters, singleLineHeader: this.calendarProps.singleLineHeader, currentDateIndicator: this.calendarProps.currentDateIndicator, svgWidth: this.gridProps.svgWidth }), index.h("div", { ref: (el) => (this.horizontalContainerRef = el), class: "horizontalContainer", style: this.ganttHeight
+        return (index.h("div", { key: 'd9a4cf68f10e8263f73123022b4e545f6a028580', class: "ganttVerticalContainer", ref: (el) => (this.verticalGanttContainerRef = el), dir: "ltr" }, index.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 }), index.h("div", { key: '8c0e76cb967f172406f352c6568582fdc4008d38', ref: (el) => (this.horizontalContainerRef = el), class: "horizontalContainer", style: this.ganttHeight
                 ? {
                     height: `${this.ganttHeight}px`,
                     width: `${this.gridProps.svgWidth}px`,
                 }
-                : { width: `${this.gridProps.svgWidth}px` } }, index.h("kup-grid-renderer", Object.assign({}, newBarProps)))));
+                : { width: `${this.gridProps.svgWidth}px` } }, index.h("kup-grid-renderer", Object.assign({ key: '69040247d6fde1ddb12f3b2ce54e02bc7781e569' }, newBarProps)))));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -736,6 +742,7 @@ const TaskGantt = class {
 };
 
 const kupTaskListCss$2 = ".tasks{border-radius:8px;background:#efefef;margin:12px;padding:12px}.taskListWrapper{display:table;border-bottom:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.taskListTableRow{display:table-row;text-overflow:ellipsis}.taskListCell{display:table-cell;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.taskListNameWrapper{display:flex}.taskListExpander{color:rgb(86, 86, 86);font-size:0.6rem;padding:0.15rem 0.2rem 0 0.2rem;user-select:none;cursor:pointer}.taskListEmptyExpander{font-size:0.6rem;padding-left:1rem;user-select:none}.ganttTable{display:table;border-bottom:#e6e4e4 1px solid;border-top:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.ganttTable_Header{display:table-row;list-style:none}.ganttTable_HeaderSeparator{border-right:1px solid rgb(196, 196, 196);opacity:1;margin-left:-2px}.ganttTable_HeaderItem{display:table-cell;vertical-align:-webkit-baseline-middle;vertical-align:middle}";
+const KupTaskListStyle0 = kupTaskListCss$2;
 
 const TaskList = class {
     constructor(hostRef) {
@@ -770,6 +777,11 @@ const TaskList = class {
     }
     componentDidLoad() {
         this.taskListRef.prepend(this.filter);
+        setTimeout(() => {
+            if (this.horizontalContainerRef) {
+                this.horizontalContainerRef.scrollTop = this.scrollY;
+            }
+        }, 75);
     }
     componentDidUpdate() {
         if (this.taskListRef) {
@@ -813,7 +825,7 @@ const TaskList = class {
         if (TaskListTable && TaskListTable['$attrs$']) {
             Object.assign(TaskListTable['$attrs$'], Object.assign({}, tableProps));
         }
-        return (index.h("div", { ref: (el) => (this.taskListRef = el) }, TaskListHeader && TaskListHeader['$attrs$'] ? (TaskListHeader) : (index.h("kup-custom-task-list-header", Object.assign({ label: this.label, doubleView: (_a = this.doubleView) !== null && _a !== void 0 ? _a : false, setDoubleView: this.setDoubleView }, headerProps))), index.h("div", { class: this.horizontalContainerClass, style: this.ganttHeight
+        return (index.h("div", { key: '7dd68dd1a7d21ae60df1565041e4c40c4e809190', 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: '7a956f23ef07603f31a331d229f1bb1d04e98773', class: this.horizontalContainerClass, style: this.ganttHeight
                 ? { height: this.ganttHeight + 'px' }
                 : {}, ref: (el) => (this.horizontalContainerRef = el) }, TaskListTable && TaskListTable['$attrs$'] ? (TaskListTable) : (index.h("kup-custom-task-list-table", Object.assign({}, tableProps, { onclickTaskList: (id) => {
                 let row = kupPlannerRendererHelper.getProjectById(id, this.currentTasks);
@@ -846,9 +858,10 @@ const TaskList = class {
         "scrollY": ["updateScrollY"]
     }; }
 };
-TaskList.style = kupTaskListCss$2;
+TaskList.style = KupTaskListStyle0;
 
 const kupTaskListCss$1 = ".tasks{border-radius:8px;background:#efefef;margin:12px;padding:12px}.taskListWrapper{display:table;border-bottom:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.taskListTableRow{display:table-row;text-overflow:ellipsis}.taskListCell{display:table-cell;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.taskListNameWrapper{display:flex}.taskListExpander{color:rgb(86, 86, 86);font-size:0.6rem;padding:0.15rem 0.2rem 0 0.2rem;user-select:none;cursor:pointer}.taskListEmptyExpander{font-size:0.6rem;padding-left:1rem;user-select:none}.ganttTable{display:table;border-bottom:#e6e4e4 1px solid;border-top:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.ganttTable_Header{display:table-row;list-style:none}.ganttTable_HeaderSeparator{border-right:1px solid rgb(196, 196, 196);opacity:1;margin-left:-2px}.ganttTable_HeaderItem{display:table-cell;vertical-align:-webkit-baseline-middle;vertical-align:middle}";
+const KupTaskListHeaderStyle0 = kupTaskListCss$1;
 
 const KupTaskListHeader = class {
     constructor(hostRef) {
@@ -859,29 +872,30 @@ const KupTaskListHeader = class {
         this.rowWidth = undefined;
     }
     render() {
-        return (index.h("div", { class: "ganttTable", style: {
+        return (index.h("div", { key: '85c164a7a4313c8708ce2774338ff123621e7648', class: "ganttTable", style: {
                 fontFamily: this.fontFamily,
                 fontSize: this.fontSize,
-            } }, index.h("div", { class: "ganttTable_Header", style: {
+            } }, index.h("div", { key: '46aad2a15e9f7d6fe8e7b705b5cc4f385ebf2d69', class: "ganttTable_Header", style: {
                 height: `${this.headerHeight - 2}px`,
-            } }, index.h("div", { class: "ganttTable_HeaderItem", style: {
+            } }, index.h("div", { key: 'fafa8c4eb47c740fff23eb204a75b872d39876e2', class: "ganttTable_HeaderItem", style: {
                 minWidth: this.rowWidth,
-            } }, "\u00A0Name"), index.h("div", { class: "ganttTable_HeaderSeparator", style: {
+            } }, "\u00A0Name"), index.h("div", { key: '1ebbcca3ce32701a8af4140fb638173de9795995', class: "ganttTable_HeaderSeparator", style: {
                 height: `${this.headerHeight * 0.5}px`,
                 marginTop: `${this.headerHeight * 0.2}px`,
-            } }), index.h("div", { class: "ganttTable_HeaderItem", style: {
+            } }), index.h("div", { key: 'b08345a4be12e76a9d634508e32e035a3c570dfb', class: "ganttTable_HeaderItem", style: {
                 minWidth: this.rowWidth,
-            } }, "\u00A0From"), index.h("div", { class: "ganttTable_HeaderSeparator", style: {
+            } }, "\u00A0From"), index.h("div", { key: '3f035b39c2c66677e78c2786cea4a39c824bb60b', class: "ganttTable_HeaderSeparator", style: {
                 height: `${this.headerHeight * 0.5}px`,
                 marginTop: `${this.headerHeight * 0.25}px`,
-            } }), index.h("div", { class: "ganttTable_HeaderItem", style: {
+            } }), index.h("div", { key: '01effc62e0e2ddf73ab5cf4cbad5873f70d510c6', class: "ganttTable_HeaderItem", style: {
                 minWidth: this.rowWidth,
             } }, "\u00A0To"))));
     }
 };
-KupTaskListHeader.style = kupTaskListCss$1;
+KupTaskListHeader.style = KupTaskListHeaderStyle0;
 
 const kupTaskListCss = ".tasks{border-radius:8px;background:#efefef;margin:12px;padding:12px}.taskListWrapper{display:table;border-bottom:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.taskListTableRow{display:table-row;text-overflow:ellipsis}.taskListCell{display:table-cell;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.taskListNameWrapper{display:flex}.taskListExpander{color:rgb(86, 86, 86);font-size:0.6rem;padding:0.15rem 0.2rem 0 0.2rem;user-select:none;cursor:pointer}.taskListEmptyExpander{font-size:0.6rem;padding-left:1rem;user-select:none}.ganttTable{display:table;border-bottom:#e6e4e4 1px solid;border-top:#e6e4e4 1px solid;border-left:#e6e4e4 1px solid}.ganttTable_Header{display:table-row;list-style:none}.ganttTable_HeaderSeparator{border-right:1px solid rgb(196, 196, 196);opacity:1;margin-left:-2px}.ganttTable_HeaderItem{display:table-cell;vertical-align:-webkit-baseline-middle;vertical-align:middle}";
+const KupTaskListTableStyle0 = kupTaskListCss;
 
 const TaskListTableDefault = class {
     constructor(hostRef) {
@@ -907,7 +921,7 @@ const TaskListTableDefault = class {
         return date.toLocaleDateString(this.locale, this.dateTimeOptions);
     }
     render() {
-        return (index.h("div", { class: "taskListWrapper", style: {
+        return (index.h("div", { key: '384204e115a7d10387be01795a096ae843b06ebf', class: "taskListWrapper", style: {
                 fontFamily: this.fontFamily,
                 fontSize: this.fontSize,
             } }, this.tasks.map((task) => (index.h("div", { class: {
@@ -930,9 +944,10 @@ const TaskListTableDefault = class {
             } }, "\u00A0", this.toLocaleDateString(task.end)))))));
     }
 };
-TaskListTableDefault.style = kupTaskListCss;
+TaskListTableDefault.style = KupTaskListTableStyle0;
 
 const kupTooltipCss = ".tooltipDefaultContainer{background:#fff;padding:12px;box-shadow:0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)}.tooltipDefaultContainerParagraph{font-size:12px;margin-bottom:6px;color:#666}.tooltipDetailsContainer{position:absolute;display:flex;flex-shrink:0;pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tooltipDetailsContainerHidden{visibility:hidden;position:absolute;display:flex;pointer-events:none}";
+const KupTooltipStyle0 = kupTooltipCss;
 
 const Tooltip = class {
     constructor(hostRef) {
@@ -995,7 +1010,7 @@ const Tooltip = class {
         }
     }
     render() {
-        return (index.h("div", { class: this.relatedX ? 'tooltipDetailsContainer' : 'tooltipDetailsContainerHidden', style: { left: `${this.relatedX}px`, top: `${this.relatedY}px` } }, index.h(this.TooltipContent, { task: this.task, fontSize: this.fontSize, fontFamily: this.fontFamily })));
+        return (index.h("div", { key: '6e6cc9d062e2910930ea039bd62c7d7c6cbfca30', class: this.relatedX ? 'tooltipDetailsContainer' : 'tooltipDetailsContainerHidden', style: { left: `${this.relatedX}px`, top: `${this.relatedY}px` } }, index.h(this.TooltipContent, { key: '08262258302d58b11d3c832194adfcdecf262bc2', task: this.task, fontSize: this.fontSize, fontFamily: this.fontFamily })));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -1011,9 +1026,10 @@ const Tooltip = class {
         "rtl": ["calculateTooltipPosition"]
     }; }
 };
-Tooltip.style = kupTooltipCss;
+Tooltip.style = KupTooltipStyle0;
 
-const kupVerticalScrollCss = ".scroll{overflow:hidden auto;width:1rem;flex-shrink:0;scrollbar-width:thin}.scroll::-webkit-scrollbar{width:1.1rem;height:1.1rem}.scroll::-webkit-scrollbar-corner{background:transparent}.scroll::-webkit-scrollbar-thumb{border:6px solid transparent;background:rgba(0, 0, 0, 0.2);background:var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));border-radius:10px;background-clip:padding-box}.scroll::-webkit-scrollbar-thumb:hover{border:4px solid transparent;background:rgba(0, 0, 0, 0.3);background:var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));background-clip:padding-box}";
+const kupVerticalScrollCss = ".scroll{overflow:hidden auto;width:1rem;flex-shrink:0}.scroll::-webkit-scrollbar{width:1.1rem;height:1.1rem}.scroll::-webkit-scrollbar-corner{background:transparent}.scroll::-webkit-scrollbar-thumb{border:6px solid transparent;background:rgba(0, 0, 0, 0.2);background:var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));border-radius:10px;background-clip:padding-box}.scroll::-webkit-scrollbar-thumb:hover{border:4px solid transparent;background:rgba(0, 0, 0, 0.3);background:var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));background-clip:padding-box}";
+const KupVerticalScrollStyle0 = kupVerticalScrollCss;
 
 const KupVerticalScroll = class {
     constructor(hostRef) {
@@ -1048,11 +1064,11 @@ const KupVerticalScroll = class {
         };
     }
     render() {
-        return (index.h("div", { style: {
+        return (index.h("div", { key: '80335159040a9c60dc8213840c3b2d684636585d', style: {
                 height: `${this.ganttHeight}px`,
                 marginTop: `${this.headerHeight}px`,
                 marginLeft: this.rtl ? '' : '-1rem',
-            }, class: "scroll", onScroll: this.verticalScroll, ref: (el) => (this.scrollRef = el) }, index.h("div", { style: {
+            }, class: "scroll", onScroll: this.verticalScroll, ref: (el) => (this.scrollRef = el) }, index.h("div", { key: '2ad01e01bb31d6885cf87bda7e1448f70b182435', style: {
                 height: `${this.ganttFullHeight}px`,
                 width: '1px',
             } })));
@@ -1062,7 +1078,7 @@ const KupVerticalScroll = class {
         "scrollNumber": ["updateScroll"]
     }; }
 };
-KupVerticalScroll.style = kupVerticalScrollCss;
+KupVerticalScroll.style = KupVerticalScrollStyle0;
 
 exports.kup_gantt = KupGantt;
 exports.kup_horizontal_scroll = HorizontalScroll;

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8f2f4159.js');
-const kupManager = require('./kup-manager-cefb1999.js');
+const index = require('./index-db0a6be6.js');
+const kupManager = require('./kup-manager-227c4be2.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
-require('./kup-dates-0e59b05d.js');
+require('./kup-dates-4aa560f0.js');
 
 /**
  * Props of the kup-grid component.
@@ -19,6 +19,7 @@ var KupGridProps;
 })(KupGridProps || (KupGridProps = {}));
 
 const kupGridCss = ":host{--kup_grid_font_size:var(--kup-grid-font-size, var(--kup-font-size));--kup_grid_gap:var(--kup-grid-gap, 24px);--kup_grid_gap_mobile:var(--kup-grid-gap-mobile, 16px);--kup_grid_padding:var(--kup-grid-padding, 24px);display:block;font-size:var(--kup_grid_font_size);height:100%;width:100%}#kup-component{height:100%;width:100%}.layout-grid{box-sizing:border-box;margin:0px auto;padding:var(--kup_grid_padding)}.layout-grid .layout-grid__inner{display:grid;margin:0px;grid-gap:var(--kup_grid_gap);grid-template-columns:repeat(var(--kup_grid_columns, 12), minmax(0px, 1fr))}.layout-grid .layout-grid__inner .layout-grid__cell{box-sizing:border-box;display:flex;justify-content:center;margin:0px;width:auto}.layout-grid__cell--span-1{grid-column-end:span 1}.layout-grid__cell--span-2{grid-column-end:span 2}.layout-grid__cell--span-3{grid-column-end:span 3}.layout-grid__cell--span-4{grid-column-end:span 4}.layout-grid__cell--span-5{grid-column-end:span 5}.layout-grid__cell--span-6{grid-column-end:span 6}.layout-grid__cell--span-7{grid-column-end:span 7}.layout-grid__cell--span-8{grid-column-end:span 8}.layout-grid__cell--span-9{grid-column-end:span 9}.layout-grid__cell--span-10{grid-column-end:span 10}.layout-grid__cell--span-11{grid-column-end:span 11}.layout-grid__cell--span-12{grid-column-end:span 12}.layout-grid__cell--span-13{grid-column-end:span 13}.layout-grid__cell--span-14{grid-column-end:span 14}.layout-grid__cell--span-15{grid-column-end:span 15}.layout-grid__cell--span-16{grid-column-end:span 16}.layout-grid__cell--span-17{grid-column-end:span 17}.layout-grid__cell--span-18{grid-column-end:span 18}.layout-grid__cell--span-19{grid-column-end:span 19}.layout-grid__cell--span-20{grid-column-end:span 20}.layout-grid__cell--span-21{grid-column-end:span 21}.layout-grid__cell--span-22{grid-column-end:span 22}.layout-grid__cell--span-23{grid-column-end:span 23}.layout-grid__cell--span-24{grid-column-end:span 24}.flex-layout,.flex-layout__inner{height:100%;align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap}.flex-layout__inner{width:auto}.flex-layout__inner *{display:block;margin:0 1.5em}.flex-layout__inner .flex-layout__cell{display:flex}.flex-layout__inner .flex-layout__cell *{justify-content:center;margin:auto}@media (min-width: 600px) and (max-width: 839px){.layout-grid .layout-grid__inner{display:grid;margin:0px;grid-gap:var(--kup_grid_gap_mobile);grid-template-columns:repeat(var(--kup_grid_columns, 8), minmax(0px, 1fr))}}@media (max-width: 599px){.layout-grid .layout-grid__inner{display:grid;margin:0px;grid-gap:var(--kup_grid_gap_mobile);grid-template-columns:repeat(var(--kup_grid_columns, 4), minmax(0px, 1fr))}}:host(.kup-full-width) .flex-layout__inner{width:100%}:host(.kup-full-width) .flex-layout__inner *{margin:auto}:host(.kup-full-width.scalable-cards) .flex-layout__inner{width:100%}:host(.kup-full-width.scalable-cards) .flex-layout__inner *{margin:0;height:100%;width:100%}";
+const KupGridStyle0 = kupGridCss;
 
 const KupGrid = class {
     constructor(hostRef) {
@@ -105,6 +106,6 @@ const KupGrid = class {
     }
     get rootElement() { return index.getElement(this); }
 };
-KupGrid.style = kupGridCss;
+KupGrid.style = KupGridStyle0;
 
 exports.kup_grid = KupGrid;

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8f2f4159.js');
-const kupManager = require('./kup-manager-cefb1999.js');
-require('./kup-dates-0e59b05d.js');
+const index = require('./index-db0a6be6.js');
+const kupManager = require('./kup-manager-227c4be2.js');
+require('./kup-dates-4aa560f0.js');
 
 /**
  * Props of the kup-iframe component.
@@ -18,6 +18,7 @@ var KupIframeProps;
 })(KupIframeProps || (KupIframeProps = {}));
 
 const kupIframeCss = "iframe{box-sizing:border-box;height:100%;width:100%}:host([is-iframe]){box-sizing:border-box;display:block;height:100%;width:100%}";
+const KupIframeStyle0 = kupIframeCss;
 
 const KupIframe = class {
     constructor(hostRef) {
@@ -102,6 +103,6 @@ const KupIframe = class {
     }
     get rootElement() { return index.getElement(this); }
 };
-KupIframe.style = kupIframeCss;
+KupIframe.style = KupIframeStyle0;
 
 exports.kup_iframe = KupIframe;

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

@@ -2,18 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8f2f4159.js');
-const kupManager = require('./kup-manager-cefb1999.js');
+const index = require('./index-db0a6be6.js');
+const kupManager = require('./kup-manager-227c4be2.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
-const fImage = require('./f-image-30531fd0.js');
-const fButton = require('./f-button-357a3dff.js');
+const fImage = require('./f-image-b61cc967.js');
+const fButton = require('./f-button-623dfcc3.js');
 const fButtonDeclarations = require('./f-button-declarations-51ef6d9a.js');
-const fCell = require('./f-cell-1de0ea69.js');
+const fCell = require('./f-cell-9c718d83.js');
 const component = require('./component-cb3b32f5.js');
-require('./kup-dates-0e59b05d.js');
-require('./f-checkbox-41864e53.js');
-require('./f-text-field-be758970.js');
-require('./f-chip-bd5882a0.js');
+require('./kup-dates-4aa560f0.js');
+require('./f-checkbox-bfa92ebe.js');
+require('./f-text-field-a09b1705.js');
+require('./f-chip-c8efad5b.js');
 
 /**
  * Props of the kup-image-list component.
@@ -37,6 +37,7 @@ class KupImageListState {
 }
 
 const kupImageListCss = ":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_margin:var(--kup-imagelist-image-margin, 1em auto);--kup_imagelist_image_min_height:var(--kup-imagelist-image-min-height, 64px);--kup_imagelist_item_border_radius:var(\n    --kup-imagelist-item-border-radius,\n    8px\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-text-color)\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{font-size:1.2em;font-weight:bold;letter-spacing:0.12em;overflow:hidden;padding:0 0.5em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.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%}.image-list .f-cell{height:100%;width:100%}.image-list__item{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__image.f-image{margin:var(--kup_imagelist_image_margin)}.image-list__image.f-image .f-image__icon{min-height:var(--kup_imagelist_image_min_height)}.image-list__label{color:var(--kup_imagelist_text_color);letter-spacing:0.12em;margin:var(--kup_imagelist_label_margin);overflow:hidden;text-align:center;text-overflow:ellipsis}.image-list .mdc-ripple-surface{--mdc-ripple-fg-opacity:0.24}.image-list .mdc-ripple-surface:before,.image-list .mdc-ripple-surface:after{background-color:var(--kup_imagelist_primary_color)}: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) {
     if (kind === "a" && !f)
@@ -223,12 +224,12 @@ const KupImageList = class {
     }
     render() {
         const hasNavigation = !!this.currentNode;
-        return (index.h(index.Host, null, index.h("style", null, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId }, index.h("div", { class: "navigation-bar" }, hasNavigation ? (index.h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
+        return (index.h(index.Host, { key: '94b709d607d3478d8572765bb4d9f332fc8f3287' }, index.h("style", { key: 'c861fd2f928f0ccfb201d28fe2de8fbe895f11cf' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), index.h("div", { key: '783c35aa4b598e4dc281dfe58720ef1dfed57bec', id: GenericVariables.componentWrapperId }, index.h("div", { key: 'dd7b1310596456aa8ae775c29937197fcab50c49', 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", { class: "image-list" }, ...__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: '13a2d026cab95a4da2c0fde2a0af8f4f6827fdb9', class: "image-list" }, ...__classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.unregister(this);
@@ -265,6 +266,6 @@ _KupImageList_clickTimeout = new WeakMap(), _KupImageList_kupManager = new WeakM
     }
     return nodes;
 };
-KupImageList.style = kupImageListCss;
+KupImageList.style = KupImageListStyle0;
 
 exports.kup_image_list = KupImageList;

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8f2f4159.js');
-const kupManager = require('./kup-manager-cefb1999.js');
+const index = require('./index-db0a6be6.js');
+const kupManager = require('./kup-manager-227c4be2.js');
 const GenericVariables = require('./GenericVariables-1d52ba57.js');
-require('./kup-dates-0e59b05d.js');
+require('./kup-dates-4aa560f0.js');
 
 /**
  * Props of the kup-lazy component.
@@ -29,6 +29,7 @@ var KupLazyRender;
 })(KupLazyRender || (KupLazyRender = {}));
 
 const kupLazyCss = ":host{--kup_lazy_animation_time:var(--kup-lazy-animation-time, 2s);--kup_lazy_hor_alignment:var(--kup-lazy-hor-alignment, center);--kup_lazy_placeholder_color:var(\n    --kup-lazy-placeholder-color,\n    var(--kup-icon-color)\n  );--kup_lazy_height:var(--kup-lazy-height, 100%);--kup_lazy_ver_alignment:var(--kup-lazy-ver-alignment, center);--kup_lazy_width:var(--kup-lazy-width, 100%);display:block;height:var(--kup_lazy_height);width:var(--kup_lazy_width);position:relative}#kup-component{align-items:var(--kup_lazy_ver_alignment);display:flex;justify-content:var(--kup_lazy_hor_alignment);height:var(--kup_lazy_height);width:var(--kup_lazy_width)}#kup-component>*{height:var(--kup_lazy_height)}#kup-component kup-data-table{min-width:100%}.kup-loaded,.kup-to-be-loaded{height:var(--kup_lazy_height);width:var(--kup_lazy_width)}svg{fill:var(--kup_lazy_placeholder_color);animation:shine ease var(--kup_lazy_animation_time) infinite}@keyframes shine{0%{opacity:0.4}50%{opacity:0.8}100%{opacity:0.4}}:host(.kup-bottom-aligned){--kup-lazy-ver-alignment:flex-end}:host(.kup-left-aligned){--kup-lazy-hor-alignment:flex-start}:host(.kup-right-aligned){--kup-lazy-hor-alignment:flex-end}:host(.kup-top-aligned){--kup-lazy-ver-alignment:flex-start}:host(.kup-to-be-loaded) #kup-component{position:absolute}:host(.kup-to-be-loaded) #kup-component>*{margin:auto}";
+const KupLazyStyle0 = kupLazyCss;
 
 const KupLazy = class {
     constructor(hostRef) {
@@ -137,39 +138,39 @@ const KupLazy = class {
         switch (this.componentName) {
             case 'kup-button':
                 //call_to_action.svg
-                resource = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.h("path", { 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 = (index.h("svg", { key: '443fa9b66f9c77621cb7a377eb920bc60c59bde9', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.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" })));
                 break;
             case 'kup-card':
                 //art_track.svg
-                resource = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.h("path", { 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 = (index.h("svg", { key: 'dd9f6feeb37d8a9e35e7666bad5a01891f35379d', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.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" })));
                 break;
             case 'kup-checkbox':
                 //check_box_outline_blank.svg
-                resource = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.h("path", { 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 = (index.h("svg", { key: '974137d7bdc5d82995437999b798c5b559a4dcbf', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.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" })));
                 break;
             case 'kup-chart':
                 //chart-bar.svg
-                resource = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, index.h("path", { d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
+                resource = (index.h("svg", { key: '721b36d96e2b04b83a81cf90f3cf687983ab2cec', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, index.h("path", { key: '58b44e235faeec04c16fd483e06f2319d06c0d46', d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
                 break;
             case 'kup-data-table':
                 //table-large.svg
-                resource = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, index.h("path", { 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 = (index.h("svg", { key: 'f3afac4818e7716418876a9aa31fccef8ec01065', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, index.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" })));
                 break;
             case 'kup-image':
                 //photo.svg
-                resource = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.h("path", { 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 = (index.h("svg", { key: '9ef1ec66b4d9f1bfb857050c7675bc603a6e3c28', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.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" })));
                 break;
             case 'kup-progress-bar':
                 //linear_scale.svg
-                resource = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.h("path", { 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 = (index.h("svg", { key: '927e099e9635eaa351c215038215b16c482cbb4e', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.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" })));
                 break;
             case 'kup-radio':
                 //radio_button_unchecked.svg
-                resource = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.h("path", { 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 = (index.h("svg", { key: '54722f3674a50a06b25d6b522b3e6c16f17bc38f', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.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" })));
                 break;
             default:
                 //art_track.svg
-                resource = (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.h("path", { 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 = (index.h("svg", { key: '6f01bf46027c471e23977744437b772389f11373', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, index.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" })));
                 break;
         }
         if ((this.renderMode === KupLazyRender.VIEWPORT && this.isInViewport) ||
@@ -178,14 +179,14 @@ const KupLazy = class {
                 this.data &&
                 this.isInViewport)) {
             let Tag = this.componentName;
-            content = (index.h(Tag, Object.assign({}, this.data, { ref: (el) => (this.lazyComponent = el) })));
+            content = (index.h(Tag, Object.assign({ key: 'b11a009ad63262e8fd26d8e672fecb829b89d190' }, this.data, { ref: (el) => (this.lazyComponent = el) })));
             className += ' kup-loaded';
         }
         else if (this.showPlaceholder) {
             content = resource;
             className += ' kup-to-be-loaded';
         }
-        return (index.h(index.Host, { class: className }, index.h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId }, content)));
+        return (index.h(index.Host, { key: 'c7c2773d030703d7034705075df18657481ecbe6', class: className }, index.h("style", { key: 'b83be89f8a9f9b394dba345e6b764361e890c8ed' }, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { key: '262125d048ac9f2d99c2f6a3ccb99f8286a35e99', id: GenericVariables.componentWrapperId }, content)));
     }
     disconnectedCallback() {
         var _a;
@@ -194,6 +195,6 @@ const KupLazy = class {
     }
     get rootElement() { return index.getElement(this); }
 };
-KupLazy.style = kupLazyCss;
+KupLazy.style = KupLazyStyle0;
 
 exports.kup_lazy = KupLazy;