@sme.up/ketchup 9.6.3 → 9.6.5

package/dist/esm/kup-photo-frame.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-a316a70e.js';
 import { c as componentWrapperId } from './GenericVariables-d8d0541e.js';
-import './kup-dates-4ad48be7.js';
+import './kup-dates-26a56bf7.js';
 
 /**
  * Props of the kup-photo-frame component.
@@ -116,9 +116,9 @@ const KupPhotoFrame = class {
         if (this.isInViewport && !__classPrivateFieldGet(this, _KupPhotoFrame_renderResource, "f")) {
             __classPrivateFieldSet(this, _KupPhotoFrame_renderResource, true, "f");
         }
-        return (h(Host, { key: '6c00ea47c4d5d38086cebc033c69938c21fbd2aa' }, h("style", { key: '0efdcd6f886f5dd5dd2f773e5bd1420b5c01d1f7' }, __classPrivateFieldGet(this, _KupPhotoFrame_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'a760ffb8b7cd901b3fb695f5bfcfcd5b09e7888f', id: componentWrapperId, ref: (el) => {
+        return (h(Host, { key: 'd6d82199e94a278a68fcd3bcb2e128f4714f7dcd' }, h("style", { key: 'ba1ceb0cd797d7a3a7808d7b2cd4849193faff42' }, __classPrivateFieldGet(this, _KupPhotoFrame_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '4701a46d03923c418672ed93098d5bde32ae38ae', id: componentWrapperId, ref: (el) => {
                 __classPrivateFieldSet(this, _KupPhotoFrame_wrapperEl, el, "f");
-            } }, h("img", Object.assign({ key: '2c2d9a4843488612240a96c16eeb6cbf30929c21' }, this.placeholderAttrs, { class: "placeholder", ref: (el) => (__classPrivateFieldSet(this, _KupPhotoFrame_placeholderEl, el, "f")), onLoad: () => {
+            } }, h("img", Object.assign({ key: '451b86c100861cb4b72cfc2575e2c7ad6da3b6ee' }, this.placeholderAttrs, { class: "placeholder", ref: (el) => (__classPrivateFieldSet(this, _KupPhotoFrame_placeholderEl, el, "f")), onLoad: () => {
                 if (__classPrivateFieldGet(this, _KupPhotoFrame_placeholderEl, "f").naturalWidth >
                     __classPrivateFieldGet(this, _KupPhotoFrame_placeholderEl, "f").naturalHeight) {
                     __classPrivateFieldGet(this, _KupPhotoFrame_wrapperEl, "f").classList.add('horizontal');

package/dist/esm/{kup-planner-declarations-b9345758.js → kup-planner-declarations-398babf9.js}

@@ -47,6 +47,8 @@ var KupPlannerTaskAction;
     KupPlannerTaskAction["onDblClick"] = "onDblClick";
     KupPlannerTaskAction["onResize"] = "onResize";
     KupPlannerTaskAction["onRightClick"] = "onRightClick";
+    KupPlannerTaskAction["onPhase"] = "onPhase";
+    KupPlannerTaskAction["onTask"] = "onTask";
 })(KupPlannerTaskAction || (KupPlannerTaskAction = {}));
 var KupPlannerGanttRowType;
 (function (KupPlannerGanttRowType) {
@@ -81,6 +83,7 @@ const defaultStylingOptions = {
     barProgressSelectedColor: '#A2A415',
     barBackgroundColor: '#A2A415',
     barBackgroundSelectedColor: '#A2A415',
+    barDropZoneColor: '#4d9f0240'
 };
 const KUP_PLANNER_MAIN_GANTT_ID = 'main';
 const KUP_PLANNER_SECONDARY_GANTT_ID = 'secondary';

package/dist/esm/{kup-planner-renderer-helper-da0518be.js → kup-planner-renderer-helper-a2ec9a1c.js}

@@ -1,4 +1,4 @@
-import { b as KupDates } from './kup-dates-4ad48be7.js';
+import { b as KupDates } from './kup-dates-26a56bf7.js';
 
 const columnWidthForTimeUnit = (timeUnit) => {
     switch (timeUnit) {
@@ -37,10 +37,10 @@ const isDetail = (row) => {
         row.schedule &&
         row.schedule.length !== 0);
 };
-const mergeTaskIntoProjects = (projects, { id, start, end }) => projects.map((project) => project.id === id ? withNewDates(project, start, end) : project);
-const mergeTaskIntoPhases = (phases, { id, start, end }) => {
+const mergeTaskIntoProjects = (projects, { id, start, end, startHour, endHour }) => projects.map((project) => project.id === id ? withNewDates(project, start, end, startHour, endHour) : project);
+const mergeTaskIntoPhases = (phases, { id, start, end, startHour, endHour }) => {
     if (phases) {
-        return phases.map((phase) => phase.id === id ? withNewDates(phase, start, end) : phase);
+        return phases.map((phase) => phase.id === id ? withNewDates(phase, start, end, startHour, endHour) : phase);
     }
     return undefined;
 };
@@ -78,6 +78,10 @@ const convertProjectToTasks = (item, mainGanttStartDate, mainGanttEndDate) => {
             isDisabled: false,
             hideChildren: false,
             icon: row.icon,
+            startHour: item.startHour,
+            endHour: item.endHour,
+            secondaryStartHour: item.secondaryStartHour,
+            secondaryEndHour: item.secondaryEndHour
         };
         const children1 = ((_a = row.phases) !== null && _a !== void 0 ? _a : []).map(convertPhaseToTask);
         return [mainTask, ...children1];
@@ -90,7 +94,7 @@ const convertProjectToTasks = (item, mainGanttStartDate, mainGanttEndDate) => {
     }
 };
 const convertPhaseToTask = (item) => {
-    const mapPhase = ({ startDate: phaseStart, endDate: phaseEnd, secondaryStartDate, secondaryEndDate, name: phaseName, id: phaseId, color, selectedColor, dependencies, icon, }) => {
+    const mapPhase = ({ startDate: phaseStart, endDate: phaseEnd, secondaryStartDate, secondaryEndDate, name: phaseName, id: phaseId, color, selectedColor, dependencies, icon, startHour, endHour, secondaryStartHour, secondaryEndHour, }) => {
         const kupDates = new KupDates();
         const { start, end } = kupDates.validDates(phaseStart, phaseEnd, phaseName);
         const { start: phaseStart2, end: phaseEnd2 } = kupDates.validDates(secondaryStartDate, secondaryEndDate, phaseName);
@@ -117,6 +121,10 @@ const convertPhaseToTask = (item) => {
                 }
                 : {},
             icon,
+            startHour,
+            endHour,
+            secondaryStartHour,
+            secondaryEndHour,
         };
     };
     return mapPhase(item);
@@ -170,11 +178,11 @@ const convertDetailToTimeline = (item, mainGanttStartDate, mainGanttEndDate) =>
     };
 };
 /** Return a shallow copy, with the dates updated */
-const withNewDates = (p, start, end) => {
+const withNewDates = (p, start, end, startHour, endHour) => {
     const kupDates = new KupDates();
     const startDate = kupDates.formatToIsoDate(start);
     const endDate = kupDates.formatToIsoDate(end);
-    const extra = { startDate, endDate };
+    const extra = { startDate, endDate, startHour, endHour };
     return Object.assign(Object.assign({}, p), extra);
 };
 /**
@@ -212,6 +220,10 @@ const ganttDateRangeFromGanttTask = (tasks, viewMode, preStepsCount, showSeconda
             end: kupDates.parseToDayEnd(item.endDate),
             secondaryStart: kupDates.parseToDayStart(item.secondaryStartDate),
             secondaryEnd: kupDates.parseToDayEnd(item.secondaryEndDate),
+            startHour: item.startHour,
+            endHour: item.endHour,
+            secondaryStartHour: item.secondaryStartHour,
+            secondaryEndHour: item.secondaryEndHour
         });
         (_a = item.phases) === null || _a === void 0 ? void 0 : _a.forEach((phase) => {
             dates.push({
@@ -219,6 +231,10 @@ const ganttDateRangeFromGanttTask = (tasks, viewMode, preStepsCount, showSeconda
                 end: kupDates.parseToDayEnd(phase.endDate),
                 secondaryStart: kupDates.parseToDayStart(phase.secondaryStartDate),
                 secondaryEnd: kupDates.parseToDayEnd(phase.secondaryEndDate),
+                startHour: item.startHour,
+                endHour: item.endHour,
+                secondaryStartHour: item.secondaryStartHour,
+                secondaryEndHour: item.secondaryEndHour
             });
         });
     });
@@ -271,6 +287,32 @@ const ganttDateRangeGeneric = (dates, viewMode, preStepsCount, showSecondaryDate
             newEndDate = startOfDate(newEndDate, 'day');
             newEndDate = addToDate(newEndDate, 19, 'day');
             break;
+        case 'hour':
+            newStartDate = startOfDate(newStartDate, "hour");
+            newStartDate = addToDate(newStartDate, -1 * preStepsCount, "hour");
+            newEndDate = startOfDate(newEndDate, "day");
+            newEndDate = addToDate(newEndDate, 1, "day");
+            break;
+        /*
+        case ViewMode.QuarterDay:
+          newStartDate = startOfDate(newStartDate, "day");
+          newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
+          newEndDate = startOfDate(newEndDate, "day");
+          newEndDate = addToDate(newEndDate, 66, "hour"); // 24(1 day)*3 - 6
+          break;
+        case ViewMode.HalfDay:
+          newStartDate = startOfDate(newStartDate, "day");
+          newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
+          newEndDate = startOfDate(newEndDate, "day");
+          newEndDate = addToDate(newEndDate, 108, "hour"); // 24(1 day)*5 - 12
+          break;
+        case ViewMode.Hour:
+          newStartDate = startOfDate(newStartDate, "hour");
+          newStartDate = addToDate(newStartDate, -1 * preStepsCount, "hour");
+          newEndDate = startOfDate(newEndDate, "day");
+          newEndDate = addToDate(newEndDate, 1, "day");
+          break;
+          */
     }
     return [newStartDate, newEndDate];
 };
@@ -330,6 +372,10 @@ const ganttDateRangeFromTask = (tasks, viewMode, preStepsCount, showSecondaryDat
             end: item.end,
             secondaryStart: item.secondaryStart,
             secondaryEnd: item.secondaryEnd,
+            startHour: item.startHour,
+            endHour: item.endHour,
+            secondaryStartHour: item.secondaryStartHour,
+            secondaryEndHour: item.secondaryEndHour
         });
     });
     if (mainGanttStartDate && mainGanttEndDate) {
@@ -359,6 +405,9 @@ const seedDates = (startDate, endDate, viewMode) => {
             case 'day':
                 currentDate = addToDate(currentDate, 1, 'day');
                 break;
+            case 'hour':
+                currentDate = addToDate(currentDate, 1, "hour");
+                break;
             /*
             case ViewMode.HalfDay:
               currentDate = addToDate(currentDate, 12, "hour");
@@ -376,4 +425,4 @@ const seedDates = (startDate, endDate, viewMode) => {
     return dates;
 };
 
-export { convertProjectToTasks as a, getProjectById as b, calculateDisplayedDateRange as c, mergeTaskIntoPhases as d, columnWidthForTimeUnit as e, ganttDateRangeFromTask as f, getPhaseById as g, addToDate as h, mergeTaskIntoProjects as m, seedDates as s };
+export { convertProjectToTasks as a, getProjectById as b, calculateDisplayedDateRange as c, mergeTaskIntoPhases as d, columnWidthForTimeUnit as e, ganttDateRangeFromTask as f, getPhaseById as g, mergeTaskIntoProjects as m, seedDates as s };

package/dist/esm/kup-planner-renderer.entry.js

@@ -1,8 +1,8 @@
 import { h, r as registerInstance, d as getElement } from './index-460631fd.js';
-import { c as calculateDisplayedDateRange, a as convertProjectToTasks, g as getPhaseById, m as mergeTaskIntoProjects, b as getProjectById, d as mergeTaskIntoPhases, e as columnWidthForTimeUnit } from './kup-planner-renderer-helper-da0518be.js';
-import { e as KUP_PLANNER_MAIN_GANTT_ID, f as KUP_PLANNER_SECONDARY_GANTT_ID } from './kup-planner-declarations-b9345758.js';
-import { b as KupDates } from './kup-dates-4ad48be7.js';
-import { g as ganttDateTimeFormatters } from './kup-planner-time-formatter-a68e05ba.js';
+import { c as calculateDisplayedDateRange, a as convertProjectToTasks, g as getPhaseById, m as mergeTaskIntoProjects, b as getProjectById, d as mergeTaskIntoPhases, e as columnWidthForTimeUnit } from './kup-planner-renderer-helper-a2ec9a1c.js';
+import { e as KUP_PLANNER_MAIN_GANTT_ID, f as KUP_PLANNER_SECONDARY_GANTT_ID } from './kup-planner-declarations-398babf9.js';
+import { b as KupDates } from './kup-dates-26a56bf7.js';
+import { g as ganttDateTimeFormatters } from './kup-planner-time-formatter-ddf84f9b.js';
 
 const CustomTooltipHOC = () => {
     const CustomTooltip = () => h("div", null);
@@ -65,14 +65,14 @@ const KupPlannerRenderer = class {
     }
     //---- Lifecycle hooks ----
     componentWillLoad() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         this.timeUnit = (_a = this.props) === null || _a === void 0 ? void 0 : _a.viewMode;
         this.currentTasks = ((_b = this.props) === null || _b === void 0 ? void 0 : _b.mainGantt.items) || [];
         this.currentDetails = (_d = (_c = this.props) === null || _c === void 0 ? void 0 : _c.secondaryGantt) === null || _d === void 0 ? void 0 : _d.items;
-        this.scrollX = ((_f = (_e = this.props) === null || _e === void 0 ? void 0 : _e.mainGantt) === null || _f === void 0 ? void 0 : _f.initialScrollX) || -1;
+        this.scrollX = (_g = (_f = (_e = this.props) === null || _e === void 0 ? void 0 : _e.mainGantt) === null || _f === void 0 ? void 0 : _f.initialScrollX) !== null && _g !== void 0 ? _g : -1;
         this.mainGanttDoubleView =
-            (_j = (_h = (_g = this.props) === null || _g === void 0 ? void 0 : _g.mainGantt) === null || _h === void 0 ? void 0 : _h.showSecondaryDates) !== null && _j !== void 0 ? _j : false;
-        this.displayedDates = calculateDisplayedDateRange(this.currentTasks, this.timeUnit, this.mainGanttDoubleView, this.currentDetails, (_k = this.props) === null || _k === void 0 ? void 0 : _k.preStepsCount);
+            (_k = (_j = (_h = this.props) === null || _h === void 0 ? void 0 : _h.mainGantt) === null || _j === void 0 ? void 0 : _j.showSecondaryDates) !== null && _k !== void 0 ? _k : false;
+        this.displayedDates = calculateDisplayedDateRange(this.currentTasks, this.timeUnit, this.mainGanttDoubleView, this.currentDetails, (_l = this.props) === null || _l === void 0 ? void 0 : _l.preStepsCount);
         this.viewDate = undefined;
         this.projection = undefined;
         this.updateTasks();
@@ -189,6 +189,31 @@ const KupPlannerRenderer = class {
         // Use setTimeout to ensure DOM updates
         setTimeout(this.getScrollX, 500);
     }
+    // Handle phase drop
+    handlePhaseDrop(originalPhaseData, 
+    // originalTaskData: KupPlannerGanttTaskN | KupPlannerItemDetail,
+    finalPhaseData, destinationData, onPhaseDrop) {
+        // Invoke callback
+        let row = undefined;
+        const currentProjects = this.currentTasks;
+        const parentOfClickedPhase = currentProjects.find((p) => { var _a; return (_a = p.phases) === null || _a === void 0 ? void 0 : _a.some((ph) => (ph === null || ph === void 0 ? void 0 : ph.id) === finalPhaseData.id); });
+        if (parentOfClickedPhase) {
+            const phases = mergeTaskIntoPhases(parentOfClickedPhase.phases, finalPhaseData);
+            const updatedProjects = currentProjects.map((p) => p.id === parentOfClickedPhase.id ? Object.assign(Object.assign({}, p), { phases }) : p);
+            row = getPhaseById(finalPhaseData.id, updatedProjects);
+        }
+        row === null || row === void 0 ? true : delete row['taskRow'];
+        onPhaseDrop === null || onPhaseDrop === void 0 ? void 0 : onPhaseDrop({
+            originalPhaseData,
+            // originalTaskData,
+            finalPhaseData: row,
+            destinationData,
+        });
+        // to move the phase back to its original position
+        this.currentTasks = JSON.parse(JSON.stringify(this.currentTasks));
+        // Use setTimeout to ensure DOM updates
+        setTimeout(this.getScrollX, 500);
+    }
     // Get scrollX
     getScrollX() {
         var _a, _b, _c;
@@ -201,7 +226,7 @@ const KupPlannerRenderer = class {
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: '819b9d89b953274cacccee9bf2022575743e0d27', class: "planner-render" }, h("kup-switcher", { key: 'eebcce029f98a9f08cab9c96be0bad01999b7f95', timeUnitChange: (timeUnit) => {
+        return (h("div", { key: 'ca2bc5b1e398639943fc073b92035b83d304dee1', class: "planner-render" }, h("kup-switcher", { key: '02903e6f1d14536cc3e82e535f98f56761004051', timeUnitChange: (timeUnit) => {
                 var _a, _b;
                 (_b = (_a = this.props).onSetViewMode) === null || _b === void 0 ? void 0 : _b.call(_a, timeUnit);
                 this.timeUnit = timeUnit;
@@ -234,7 +259,15 @@ const KupPlannerRenderer = class {
                 if (row) {
                     this.handleContextMenu(event, row, this.props.mainGantt.onContextMenu);
                 }
-            }, dateChange: (task) => this.handleDateChange(task, this.currentTasks, this.props.mainGantt.onDateChange), locale: this.locale, dateTimeFormatters: ganttDateTimeFormatters, initialScrollX: this.scrollX, initialScrollY: this.props.mainGantt.initialScrollY, readOnly: this.props.mainGantt.readOnly, scrollXChange: this.props.onScrollX, scrollYChange: this.props.mainGantt.onScrollY, currentTasks: this.currentTasks, handleClick: this.handleClick.bind(this), handleDblClick: this.handleDblClick.bind(this), handleContextMenu: this.handleContextMenu.bind(this), ganttOnClick: this.props.mainGantt.onClick, ganttOnDblClick: this.props.mainGantt.onDblClick, ganttonOnContextMenu: this.props.mainGantt.onContextMenu, label: this.props.mainGantt.title, doubleView: (_b = this.mainGanttDoubleView) !== null && _b !== void 0 ? _b : false, setDoubleView: this.handleSetDoubleView.bind(this) })), this.props.secondaryGantt && (h("kup-gantt", Object.assign({ ref: (el) => (this.secondaryGantt = el), ganttId: KUP_PLANNER_SECONDARY_GANTT_ID, key: KUP_PLANNER_SECONDARY_GANTT_ID, filter: this.props.secondaryGantt.filter, hideLabel: this.props.secondaryGantt.hideLabel, showSecondaryDates: this.mainGanttDoubleView, hideDependencies: this.props.secondaryGantt.hideDependencies, ganttHeight: this.props.secondaryGantt.ganttHeight, displayedStartDate: this.displayedDates.displayedStartDate, displayedEndDate: this.displayedDates.displayedEndDate, viewDate: this.viewDate, tasks: this.details, columnWidth: columnWidthForTimeUnit(this.timeUnit), viewMode: this.timeUnit }, this.props.secondaryGantt.stylingOptions, { TaskListHeader: this.props.secondaryGantt
+            }, dateChange: (task) => this.handleDateChange(task, this.currentTasks, this.props.mainGantt.onDateChange), locale: this.locale, dateTimeFormatters: ganttDateTimeFormatters, initialScrollX: this.scrollX, initialScrollY: this.props.mainGantt.initialScrollY, readOnly: this.props.mainGantt.readOnly, scrollXChange: this.props.onScrollX, scrollYChange: this.props.mainGantt.onScrollY, currentTasks: this.currentTasks, handleClick: this.handleClick.bind(this), handleDblClick: this.handleDblClick.bind(this), handleContextMenu: this.handleContextMenu.bind(this), ganttOnClick: this.props.mainGantt.onClick, ganttOnDblClick: this.props.mainGantt.onDblClick, ganttonOnContextMenu: this.props.mainGantt.onContextMenu, label: this.props.mainGantt.title, doubleView: (_b = this.mainGanttDoubleView) !== null && _b !== void 0 ? _b : false, setDoubleView: this.handleSetDoubleView.bind(this), scrollableTaskList: this.props.scrollableTaskList, phaseDrop: (originalPhaseData, originalTaskData, finalPhaseData, destinationData) => {
+                const originalPhase = getPhaseById(originalPhaseData.id, this.currentTasks);
+                getProjectById(originalTaskData.id, this.currentTasks);
+                getPhaseById(finalPhaseData.id, this.currentTasks);
+                const destinationTask = getProjectById(destinationData.id, this.currentTasks);
+                this.handlePhaseDrop(originalPhase, 
+                // originalTask,
+                finalPhaseData, destinationTask, this.props.mainGantt.onPhaseDrop);
+            } })), this.props.secondaryGantt && (h("kup-gantt", Object.assign({ ref: (el) => (this.secondaryGantt = el), ganttId: KUP_PLANNER_SECONDARY_GANTT_ID, key: KUP_PLANNER_SECONDARY_GANTT_ID, filter: this.props.secondaryGantt.filter, hideLabel: this.props.secondaryGantt.hideLabel, showSecondaryDates: this.mainGanttDoubleView, hideDependencies: this.props.secondaryGantt.hideDependencies, ganttHeight: this.props.secondaryGantt.ganttHeight, displayedStartDate: this.displayedDates.displayedStartDate, displayedEndDate: this.displayedDates.displayedEndDate, viewDate: this.viewDate, tasks: this.details, columnWidth: columnWidthForTimeUnit(this.timeUnit), viewMode: this.timeUnit }, this.props.secondaryGantt.stylingOptions, { TaskListHeader: this.props.secondaryGantt
                 .taskListHeaderProject, TaskListTable: this.props.secondaryGantt
                 .taskListTableProject, TooltipContent: (_c = this.props.secondaryGantt.tooltipContent) !== null && _c !== void 0 ? _c : CustomTooltipHOC(), projection: this.projection, barClick: (task) => {
                 if (this.props.secondaryGantt) {
@@ -264,7 +297,7 @@ const KupPlannerRenderer = class {
                     }
                 }
             }, dateChange: (task) => this.handleDateChange(task, this
-                .currentTasks, this.props.secondaryGantt.onDateChange), locale: this.locale, dateTimeFormatters: ganttDateTimeFormatters, initialScrollX: this.scrollX, initialScrollY: this.props.secondaryGantt.initialScrollY, readOnly: this.props.secondaryGantt.readOnly, scrollXChange: this.props.onScrollX, scrollYChange: this.props.secondaryGantt.onScrollY, currentTasks: this.currentTasks, handleClick: this.handleClick.bind(this), handleDblClick: this.handleDblClick.bind(this), handleContextMenu: this.handleContextMenu.bind(this), ganttOnClick: this.props.secondaryGantt.onClick, ganttOnDblClick: this.props.secondaryGantt.onDblClick, ganttonOnContextMenu: this.props.secondaryGantt.onContextMenu, label: this.props.secondaryGantt.title })))))));
+                .currentTasks, this.props.secondaryGantt.onDateChange), locale: this.locale, dateTimeFormatters: ganttDateTimeFormatters, initialScrollX: this.scrollX, initialScrollY: this.props.secondaryGantt.initialScrollY, readOnly: this.props.secondaryGantt.readOnly, scrollXChange: this.props.onScrollX, scrollYChange: this.props.secondaryGantt.onScrollY, currentTasks: this.currentTasks, handleClick: this.handleClick.bind(this), handleDblClick: this.handleDblClick.bind(this), handleContextMenu: this.handleContextMenu.bind(this), ganttOnClick: this.props.secondaryGantt.onClick, ganttOnDblClick: this.props.secondaryGantt.onDblClick, ganttonOnContextMenu: this.props.secondaryGantt.onContextMenu, label: this.props.secondaryGantt.title, scrollableTaskList: this.props.scrollableTaskList })))))));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/{kup-planner-time-formatter-a68e05ba.js → kup-planner-time-formatter-ddf84f9b.js}

@@ -86,4 +86,4 @@ const getWeekNumberISO8601 = (date) => {
     }
 };
 
-export { getDaysInMonth as a, defaultDateTimeFormatters as d, ganttDateTimeFormatters as g };
+export { getDaysInMonth as a, getCachedDateTimeFormat as b, getLocalDayOfWeek as c, defaultDateTimeFormatters as d, getLocaleMonth as e, ganttDateTimeFormatters as g };

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

@@ -1,14 +1,14 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, d as getElement, g as getAssetPath } from './index-460631fd.js';
-import { k as kupManagerInstance, ac as getCellValueForDisplay, g as getProps, s as setProps, a as KupThemeIconValues, D as KupLanguageSearch } from './kup-manager-cdb4f21a.js';
-import { K as KupPlannerGanttRowType, d as defaultStylingOptions, a as KupPlannerTaskAction, b as KupPlannerLastOnChangeReceived, c as KupPlannerProps } from './kup-planner-declarations-b9345758.js';
+import { k as kupManagerInstance, ac as getCellValueForDisplay, g as getProps, s as setProps, a as KupThemeIconValues, D as KupLanguageSearch } from './kup-manager-a316a70e.js';
+import { K as KupPlannerGanttRowType, d as defaultStylingOptions, a as KupPlannerTaskAction, b as KupPlannerLastOnChangeReceived, c as KupPlannerProps } from './kup-planner-declarations-398babf9.js';
 import { c as componentWrapperId } from './GenericVariables-d8d0541e.js';
-import { K as KupDatesFormats } from './kup-dates-4ad48be7.js';
-import { F as FTextField } from './f-text-field-b5fcb598.js';
+import { K as KupDatesFormats } from './kup-dates-26a56bf7.js';
+import { F as FTextField } from './f-text-field-d364ffd2.js';
 import { F as FTextFieldMDC } from './f-text-field-mdc-c88bf688.js';
 import './component-879e99bf.js';
 
 const kupManager = kupManagerInstance();
-function sanitizeAllDates(startDateCell, endDateCell, secStartDateCell, secEndDateCell) {
+function sanitizeAllDates(startDateCell, endDateCell, secStartDateCell, secEndDateCell, startHourCell, endHourCell, secStartHourCell, secEndHourCell) {
     const sanitizedDateValues = sanitizeDates(startDateCell, endDateCell);
     let sanitizedSecDateValues = [];
     if (secStartDateCell && secEndDateCell) {
@@ -19,9 +19,29 @@ function sanitizeAllDates(startDateCell, endDateCell, secStartDateCell, secEndDa
             sanitizedSecDateValues = [...sanitizedDateValues];
         }
     }
+    let sanitizedHourValues = [];
+    if (startHourCell && endHourCell) {
+        if (isAtLeastOneHourValid(startHourCell, endHourCell)) {
+            sanitizedHourValues = sanitizeHours(startHourCell, endHourCell);
+        }
+        else {
+            sanitizedSecDateValues = [...sanitizedDateValues];
+        }
+    }
+    let sanitizedSecHourValues = [];
+    if (secStartHourCell && secEndHourCell) {
+        if (isAtLeastOneHourValid(secStartHourCell, secEndHourCell)) {
+            sanitizedSecHourValues = sanitizeHours(secStartHourCell, secEndHourCell);
+        }
+        else {
+            sanitizedSecDateValues = [...sanitizedDateValues];
+        }
+    }
     return {
         dateValues: sanitizedDateValues,
         secDateValues: sanitizedSecDateValues,
+        hourValues: sanitizedHourValues,
+        secHourValues: sanitizedSecHourValues
     };
 }
 function sanitizeDates(startDateCell, endDateCell) {
@@ -39,13 +59,34 @@ function sanitizeDates(startDateCell, endDateCell) {
         return returnValues;
     }
 }
+function sanitizeHours(startHourCell, endHourCell) {
+    let returnValues = [startHourCell.value, endHourCell.value];
+    if (isHourValid(startHourCell) && isHourValid(endHourCell)) {
+        return returnValues;
+    }
+    else if (isHourValid(startHourCell)) {
+        return [startHourCell.value, startHourCell.value];
+    }
+    else if (isHourValid(endHourCell)) {
+        return [endHourCell.value, endHourCell.value];
+    }
+    else {
+        return returnValues;
+    }
+}
 function isDateValid(dateCell) {
     return (kupManager.objects.isDate(dateCell.obj) &&
         kupManager.dates.isValid(dateCell.value, KupDatesFormats.ISO_DATE));
 }
+function isHourValid(dateCell) {
+    return (kupManager.objects.isTime(dateCell.obj) || kupManager.objects.isTimeWithSeconds(dateCell.obj));
+}
 function isAtLeastOneDateValid(startDateCell, endDateCell) {
     return isDateValid(startDateCell) || isDateValid(endDateCell);
 }
+function isAtLeastOneHourValid(startHourCell, endHourCell) {
+    return isHourValid(startHourCell) || isHourValid(endHourCell);
+}
 function getValuesToShow(row, idCol, nameCol, dataColumns, columns, customToValuesFunction) {
     let toValuesFunction = () => columns.map((col) => {
         return getCellValueForDisplay(dataColumns.find((kCol) => kCol.name == col), row.cells[col]);
@@ -102,6 +143,7 @@ const KupPlanner = class {
         this.kupClick = createEvent(this, "kup-planner-click", 6);
         this.kupDblClick = createEvent(this, "kup-planner-dblclick", 6);
         this.kupDateChange = createEvent(this, "kup-planner-datechange", 6);
+        this.kupPhaseDrop = createEvent(this, "kup-planner-phasedrop", 6);
         this.kupReady = createEvent(this, "kup-planner-ready", 6);
         this.kupContextMenu = createEvent(this, "kup-planner-contextmenu", 6);
         this.kupDidUnload = createEvent(this, "kup-planner-didunload", 6);
@@ -130,9 +172,11 @@ const KupPlanner = class {
         this.detailDates = undefined;
         this.detailFilter = undefined;
         this.detailHeight = undefined;
+        this.detailHours = [];
         this.detailIconCol = undefined;
         this.detailIdCol = undefined;
         this.detailNameCol = undefined;
+        this.detailPrevHours = [];
         this.detailPrevDates = undefined;
         this.detailInitialScrollX = undefined;
         this.detailInitialScrollY = undefined;
@@ -142,9 +186,11 @@ const KupPlanner = class {
         this.phaseColumns = undefined;
         this.phaseColParDep = undefined;
         this.phaseDates = undefined;
+        this.phaseHours = [];
         this.phaseIconCol = undefined;
         this.phaseIdCol = undefined;
         this.phaseNameCol = undefined;
+        this.phasePrevHours = [];
         this.phasePrevDates = undefined;
         this.readOnly = false;
         this.showSecondaryDates = false;
@@ -152,16 +198,19 @@ const KupPlanner = class {
         this.taskDates = undefined;
         this.taskFilter = undefined;
         this.taskHeight = undefined;
+        this.taskHours = [];
         this.taskIconCol = undefined;
         this.taskIdCol = undefined;
         this.taskInitialScrollX = undefined;
         this.taskInitialScrollY = undefined;
         this.taskNameCol = undefined;
+        this.taskPrevHours = [];
         this.taskPrevDates = undefined;
         this.titleMess = undefined;
         this.viewMode = 'month';
         this.mainFilter = undefined;
         this.secondaryFilter = undefined;
+        this.scrollableTaskList = false;
         this.plannerProps = undefined;
     }
     initWithPersistedState() {
@@ -266,7 +315,7 @@ const KupPlanner = class {
         if (task) {
             __classPrivateFieldGet(this, _KupPlanner_phases, "f")[taskId] = data;
             task.phases = (_a = data.rows) === null || _a === void 0 ? void 0 : _a.filter((row) => isAtLeastOneDateValid(row.cells[this.phaseDates[0]], row.cells[this.phaseDates[1]])).map((row) => {
-                const datesSanitized = sanitizeAllDates(row.cells[this.phaseDates[0]], row.cells[this.phaseDates[1]], row.cells[this.phasePrevDates[0]], row.cells[this.phasePrevDates[1]]);
+                const datesSanitized = sanitizeAllDates(row.cells[this.phaseDates[0]], row.cells[this.phaseDates[1]], row.cells[this.phasePrevDates[0]], row.cells[this.phasePrevDates[1]], row.cells[this.phaseHours[0]], row.cells[this.phaseHours[1]], row.cells[this.phasePrevHours[0]], row.cells[this.phasePrevHours[1]]);
                 const valuesToShow = getValuesToShow(row, this.phaseIdCol, this.phaseNameCol, data.columns, this.phaseColumns, () => this.phaseColumns.map((col) => col == this.phaseDates[0]
                     ? '#START#'
                     : col == this.phaseDates[1]
@@ -293,6 +342,10 @@ const KupPlanner = class {
                     icon: iconUrl
                         ? { url: iconUrl, color: iconColor !== null && iconColor !== void 0 ? iconColor : '#595959' }
                         : undefined,
+                    startHour: datesSanitized.hourValues[0],
+                    endHour: datesSanitized.hourValues[1],
+                    secondaryStartHour: datesSanitized.secHourValues[0],
+                    secondaryEndHour: datesSanitized.secHourValues[1],
                 };
                 return phase;
             });
@@ -360,6 +413,7 @@ const KupPlanner = class {
                     window.clearTimeout(taskScrollYTimeout);
                     taskScrollYTimeout = window.setTimeout(() => this.handleTaskGanttScrollY(y), scrollDelay);
                 },
+                onPhaseDrop: (nativeEvent) => this.handleOnPhaseDrop(nativeEvent),
             },
             secondaryGantt: details
                 ? {
@@ -384,6 +438,7 @@ const KupPlanner = class {
             onSetDoubleView: (checked) => this.handleOnSetDoubleView(checked),
             onSetViewMode: (value) => this.handleOnSetViewMode(value),
             viewMode: this.viewMode,
+            scrollableTaskList: this.scrollableTaskList,
             onScrollX: (x) => {
                 window.clearTimeout(scrollXTimeout);
                 scrollXTimeout = window.setTimeout(() => this.handleOnScrollX(x), scrollDelay);
@@ -467,6 +522,14 @@ const KupPlanner = class {
             taskAction: taskAction,
         });
     }
+    onKupPhaseDrop(event, taskAction) {
+        this.kupPhaseDrop.emit({
+            comp: this,
+            id: this.rootElement.id,
+            value: event,
+            taskAction: taskAction,
+        });
+    }
     handleOnDblClick(nativeEvent) {
         switch (nativeEvent.rowType) {
             case KupPlannerGanttRowType.TASK:
@@ -568,6 +631,9 @@ const KupPlanner = class {
             }
         }
     }
+    handleOnPhaseDrop(nativeEvent) {
+        this.onKupPhaseDrop(nativeEvent, KupPlannerTaskAction.onTask);
+    }
     render() {
         var _a, _b, _c;
         const plannerProps = this.plannerProps
@@ -575,7 +641,7 @@ const KupPlanner = class {
         if ((_b = this.plannerProps) === null || _b === void 0 ? void 0 : _b.secondaryGantt) {
             plannerProps.secondaryGantt = Object.assign(Object.assign({}, this.plannerProps.secondaryGantt), { onScrollY: this.handleDetailGanttScrollY.bind(this) });
         }
-        return (h(Host, { key: 'f3c51ffc99f55225dca3f5510f2be5881145a208' }, h("style", { key: 'f79296340221217cb79b5b2956c7a0e2907e844e' }, __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '4df21c4b72d0a8984e17a507527fb927a5c23dca', id: componentWrapperId, style: { maxWidth: this.maxWidth } }, this.plannerProps && (h("kup-planner-renderer", { props: plannerProps, ref: (el) => (this.plannerRenderer = el) }))), h("div", { key: 'a95906fcd99bc6063045451d2d471a4d5ca18705', style: { display: this.plannerProps ? 'none' : '' } }, h(FTextField, { key: 'c6975b21e0d1eb44663d341fa6db238c39faa032', icon: KupThemeIconValues.SEARCH, id: "main-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
+        return (h(Host, { key: 'cce744fe8b14527039c6a39116da3ebbb79b5593' }, h("style", { key: '3ac43e5c414360d07ba8a745c000bbc7e545545f' }, __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '3a9fb6211d0fc2b554bf4265350c567fc1108adb', id: componentWrapperId, style: { maxWidth: this.maxWidth } }, this.plannerProps && (h("kup-planner-renderer", { props: plannerProps, ref: (el) => (this.plannerRenderer = el) }))), h("div", { key: '9dda490b90dc263b1e42496c7c602ee0c09d081f', style: { display: this.plannerProps ? 'none' : '' } }, h(FTextField, { key: 'b569efffbce491b845d813d913545bbb1efc3d08', icon: KupThemeIconValues.SEARCH, id: "main-filter", label: __classPrivateFieldGet(this, _KupPlanner_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), onKeyDown: (e) => {
                 if (e.key === 'Enter') {
                     __classPrivateFieldGet(this, _KupPlanner_instances, "m", _KupPlanner_onFilter).call(this, e.target.value);
                 }
@@ -605,7 +671,7 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_lastOnChangeReceived = new W
         return [];
     }
     let tasks = (_a = data.rows) === null || _a === void 0 ? void 0 : _a.filter((row) => isAtLeastOneDateValid(row.cells[this.taskDates[0]], row.cells[this.taskDates[1]])).map((row) => {
-        const datesSanitized = sanitizeAllDates(row.cells[this.taskDates[0]], row.cells[this.taskDates[1]], row.cells[this.taskPrevDates[0]], row.cells[this.taskPrevDates[1]]);
+        const datesSanitized = sanitizeAllDates(row.cells[this.taskDates[0]], row.cells[this.taskDates[1]], row.cells[this.taskPrevDates[0]], row.cells[this.taskPrevDates[1]], row.cells[this.taskHours[0]], row.cells[this.taskHours[1]], row.cells[this.taskPrevHours[0]], row.cells[this.taskPrevHours[1]]);
         const valuesToShow = getValuesToShow(row, this.taskIdCol, this.taskNameCol, data.columns, this.taskColumns, () => this.taskColumns.map((col) => col == this.taskDates[0]
             ? '#START#'
             : col == this.taskDates[1]
@@ -628,6 +694,10 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_lastOnChangeReceived = new W
             icon: iconUrl
                 ? { url: iconUrl, color: iconColor !== null && iconColor !== void 0 ? iconColor : '#595959' }
                 : undefined,
+            startHour: datesSanitized.hourValues[0],
+            endHour: datesSanitized.hourValues[1],
+            secondaryStartHour: datesSanitized.secHourValues[0],
+            secondaryEndHour: datesSanitized.secHourValues[1]
         };
         return task;
     });
@@ -643,7 +713,7 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_lastOnChangeReceived = new W
         var _a, _b;
         const detailId = row.cells[this.detailIdCol].value;
         const detailNameId = row.cells[this.detailNameCol].value;
-        const datesSanitized = sanitizeAllDates(row.cells[this.detailDates[0]], row.cells[this.detailDates[1]]);
+        const datesSanitized = sanitizeAllDates(row.cells[this.detailDates[0]], row.cells[this.detailDates[1]], undefined, undefined, row.cells[this.detailHours[0]], row.cells[this.detailHours[1]]);
         const valuesToShow = getValuesToShow(row, this.detailIdCol, this.detailNameCol, data.columns, this.detailColumns);
         let detail = details.find((det) => det.id == detailId);
         if (!detail) {
@@ -672,6 +742,8 @@ _KupPlanner_kupManager = new WeakMap(), _KupPlanner_lastOnChangeReceived = new W
             icon: iconUrl
                 ? { url: iconUrl, color: iconColor !== null && iconColor !== void 0 ? iconColor : '#595959' }
                 : undefined,
+            startHour: datesSanitized.hourValues[0],
+            endHour: datesSanitized.hourValues[1]
         });
     });
     return details;

package/dist/esm/kup-probe.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 } from './kup-manager-cdb4f21a.js';
+import { k as kupManagerInstance } from './kup-manager-a316a70e.js';
 import { c as componentWrapperId } from './GenericVariables-d8d0541e.js';
-import './kup-dates-4ad48be7.js';
+import './kup-dates-26a56bf7.js';
 
 const KupProbe = class {
     constructor(hostRef) {
@@ -235,7 +235,7 @@ const KupProbe = class {
         if (this.features.theme) {
             customStyle = this.kupManager.theme.setKupStyle(this.rootElement);
         }
-        return (h(Host, { key: '3d9977be8424b7c7939cf1b4b5aa906407832397' }, customStyle ? h("style", null, customStyle) : null, h("div", { key: 'cfa7570e4e6dda26d6523ccddfe6dfb134a11d49', id: componentWrapperId }, this.content)));
+        return (h(Host, { key: '71372dfbcfbf66e3f83eda11eca5fddca3402d1c' }, customStyle ? h("style", null, customStyle) : null, h("div", { key: 'a05d5a30011b2e1ede2f6ca1eca593de48aebd06', id: componentWrapperId }, this.content)));
     }
     disconnectedCallback() {
         if (this.features.language) {

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, d as getElement } from './index-460631fd.js';
-import { k as kupManagerInstance } from './kup-manager-cdb4f21a.js';
-import './kup-dates-4ad48be7.js';
+import { k as kupManagerInstance } from './kup-manager-a316a70e.js';
+import './kup-dates-26a56bf7.js';
 
 const kupQlikCss = ".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}.kup-qlik-container-fluid{width:100%}.kup-qlik-container{width:100%}@media (min-width: 576px){.kup-qlik-container{width:576px}.kup-qlik-row>.qvobject{flex:0 0 auto;min-width:100px;margin:0px auto 5px auto}}@media (min-width: 768px){.kup-qlik-container{width:768px}.kup-qlik-row>.qvobject{flex:0 0 auto;min-width:100px;margin:0px auto 5px auto}}@media (min-width: 992px){.kup-qlik-container{width:992px}.kup-qlik-row>.qvobject{flex:0 0 auto;min-width:100px;margin:0px auto 5px auto}}@media (min-width: 1200px){.kup-qlik-container{width:1200px}.kup-qlik-row>.qvobject{flex:0 0 auto;min-width:100px;margin:0px auto 5px auto}}.kup-qlik-row{display:flex;display:ms-flexbox;flex-wrap:wrap;-ms-flex-wrap:wrap;margin-bottom:5px}.kup-qlik-row .size-M{height:var(--lyo_obj-height)}.kup-qlik-row .size-S{height:calc(var(--lyo_obj-height) / 2)}.kup-qlik-row .size-XS{height:calc(var(--lyo_obj-height) / 3)}.kup-qlik-row .size-L{height:calc(var(--lyo_obj-height) * 2)}.kup-qlik-row .size-XL{height:calc(var(--lyo_obj-height) * 3)}.kup-qlik-row .bordered{border:1px solid var(--kup-border-color, #969696)}.kup-qlik-row .width-1{width:8.3333%}.kup-qlik-row .width-2{width:16.6666%}.kup-qlik-row .width-3{width:25%}.kup-qlik-row .width-4{width:33.3333%}.kup-qlik-row .width-5{width:41.6666%}.kup-qlik-row .width-6{width:50%}.kup-qlik-row .width-7{width:58.3333%}.kup-qlik-row .width-8{width:66.6666%}.kup-qlik-row .width-9{width:75%}.kup-qlik-row .width-10{width:83.3333%}.kup-qlik-row .width-11{width:91.6666%}.kup-qlik-row .width-12{width:100%}";
 const KupQlikStyle0 = kupQlikCss;
@@ -116,7 +116,7 @@ const KupQlik = class {
         layoutStyle = {
             ['--lyo_obj-height']: this.defobjsize,
         };
-        return (h("div", { key: '533e892f582c7ee663b5e41b44617c00edd1d48b', class: classLayout, style: layoutStyle }, this.divlist));
+        return (h("div", { key: 'ad3b840b782c155e43d25d46b4fbf3150d0d5296', class: classLayout, style: layoutStyle }, this.divlist));
     }
     componentDidRender() {
         if (this.debug) {

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

@@ -1,10 +1,10 @@
 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-a316a70e.js';
 import { c as componentWrapperId } from './GenericVariables-d8d0541e.js';
-import { F as FButton } from './f-button-45d690a5.js';
-import './kup-dates-4ad48be7.js';
+import { F as FButton } from './f-button-d6dbcfd6.js';
+import './kup-dates-26a56bf7.js';
 import './f-button-declarations-9bdc6f26.js';
-import './f-image-8b382cc5.js';
+import './f-image-a67229e5.js';
 
 const snackbarClass = 'snackbar';
 /**
@@ -114,7 +114,7 @@ const KupSnackbar = class {
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: 'f75d7ca1de9b0f63c555a5bbe65d18f515b30020', "kup-visible": this.visible }, h("style", { key: 'e457888f9c6355cd2997f136cc542d424cf7d72e' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: 'ede1431d986952c43cbe5d3b8484b3f27750aec6', id: componentWrapperId }, h("div", { key: 'c76c7533233b5ca057b8f2d49c99a5771b90b3f1', class: snackbarClass }, h("div", { key: '5546bfb280f7ba4bbc462c30b36094fea1276c08', class: `${snackbarClass}__text` }, this.text), this.actionButton || this.closeButton ? (h("div", { class: `${snackbarClass}__buttons` }, this.actionButton ? (h("div", { class: `${snackbarClass}__action` }, h(FButton, Object.assign({}, this.actionButton, { onClick: () => this.onKupActionClick() })))) : null, this.closeButton ? (h("div", { class: `${snackbarClass}__close` }, h(FButton, { icon: "close", onClick: () => this.hide() }))) : null)) : null))));
+        return (h(Host, { key: '3e52e4dd0672594bf385bcd44f3ceac7474ebb54', "kup-visible": this.visible }, h("style", { key: '2b6dcba48e84c7ba0ded38c5a86907a1ddb0aed4' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '6843781af0232d8dd65eb23941a2f33a17ec694f', id: componentWrapperId }, h("div", { key: '178a36a80ff89fa6b31af04c372367e0e4427b89', class: snackbarClass }, h("div", { key: '8383fa478dd8a4f35fb9718a83131d26caadb275', class: `${snackbarClass}__text` }, this.text), this.actionButton || this.closeButton ? (h("div", { class: `${snackbarClass}__buttons` }, this.actionButton ? (h("div", { class: `${snackbarClass}__action` }, h(FButton, Object.assign({}, this.actionButton, { onClick: () => this.onKupActionClick() })))) : null, this.closeButton ? (h("div", { class: `${snackbarClass}__close` }, h(FButton, { icon: "close", onClick: () => this.hide() }))) : null)) : null))));
     }
     disconnectedCallback() {
         this.kupManager.theme.unregister(this);