@sme.up/ketchup 9.6.3 → 9.6.5

package/dist/components/kup-photo-frame.js

@@ -117,9 +117,9 @@ const KupPhotoFrame$1 = /*@__PURE__*/ proxyCustomElement(class KupPhotoFrame ext
         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/components/kup-planner-declarations.js

@@ -0,0 +1,91 @@
+/**
+ * Props of the kup-gantt component.
+ * Used to export every prop in an object.
+ */
+var KupPlannerProps;
+(function (KupPlannerProps) {
+    KupPlannerProps["customStyle"] = "Custom style of the component.";
+    KupPlannerProps["data"] = "Dataset containg the tasks list";
+    KupPlannerProps["detailData"] = "Dataset containg the details list";
+    KupPlannerProps["detailColorCol"] = "Column containing the detail color, in hex format";
+    KupPlannerProps["detailColumns"] = "Columns containing informations displayed in the left box, near the gantt of details";
+    KupPlannerProps["detailDates"] = "Columns containing detail duration, from (firstDate) to (secondDate)";
+    KupPlannerProps["detailFilter"] = "Sets the detail's filter.";
+    KupPlannerProps["detailHeight"] = "Height for detail gantt";
+    KupPlannerProps["detailIdCol"] = "Column containing unique detail identifier";
+    KupPlannerProps["detailNameCol"] = "Column containing detail name displayed";
+    KupPlannerProps["detailPrevDates"] = "Columns containing forecast detail duration, from (firstDate) to (secondDate)";
+    KupPlannerProps["detailInitialScrollX"] = "Sets the initial scroll X for the detail.";
+    KupPlannerProps["detailInitialScrollY"] = "Sets the initial scroll Y for the detail.";
+    KupPlannerProps["listCellWidth"] = "Total size of the cells inside to the left box, near the gantt";
+    KupPlannerProps["maxWidth"] = "Max width for component";
+    KupPlannerProps["phaseColorCol"] = "Column containing the phase color in hex format";
+    KupPlannerProps["phaseColumns"] = "Columns containing informations displayed in the left box ,near the gantt of phases";
+    KupPlannerProps["phaseColParDep"] = "Column containing the name of the parent phases";
+    KupPlannerProps["phaseDates"] = "Columns containing phase duration, from (firstDate) to (secondDate)";
+    KupPlannerProps["phaseIdCol"] = "Column containing unique phase identifier";
+    KupPlannerProps["phaseNameCol"] = "Column containing phase name displayed";
+    KupPlannerProps["phasePrevDates"] = "Columns containing forecast phase duration, from (firstDate) to (secondDate)";
+    KupPlannerProps["readOnly"] = "When true, the two gantts are not interactable.";
+    KupPlannerProps["showSecondaryDates"] = "Enable/disable display of secondary dates";
+    KupPlannerProps["taskColumns"] = "Columns containing informations displayed in the left box, near the gantt";
+    KupPlannerProps["taskDates"] = "Columns containing task duration, from (firstDate) to (secondDate)";
+    KupPlannerProps["taskFilter"] = "Sets the task's filter.";
+    KupPlannerProps["taskHeight"] = "Height for main gantt";
+    KupPlannerProps["taskIdCol"] = "Column containing unique task identifier";
+    KupPlannerProps["taskNameCol"] = "Column containing task name displayed";
+    KupPlannerProps["taskPrevDates"] = "Columns containing forecast task duration, from (firstDate) to (secondDate)";
+    KupPlannerProps["taskInitialScrollX"] = "Sets the initial scroll X for the task.";
+    KupPlannerProps["taskInitialScrollY"] = "Sets the initial scroll Y for the task.";
+    KupPlannerProps["titleMess"] = "Message displayed on top";
+})(KupPlannerProps || (KupPlannerProps = {}));
+var KupPlannerTaskAction;
+(function (KupPlannerTaskAction) {
+    KupPlannerTaskAction["onTaskOpening"] = "onTaskOpening";
+    KupPlannerTaskAction["onTaskClosing"] = "onTaskClosing";
+    KupPlannerTaskAction["onClick"] = "onClick";
+    KupPlannerTaskAction["onDblClick"] = "onDblClick";
+    KupPlannerTaskAction["onResize"] = "onResize";
+    KupPlannerTaskAction["onRightClick"] = "onRightClick";
+    KupPlannerTaskAction["onPhase"] = "onPhase";
+    KupPlannerTaskAction["onTask"] = "onTask";
+})(KupPlannerTaskAction || (KupPlannerTaskAction = {}));
+var KupPlannerGanttRowType;
+(function (KupPlannerGanttRowType) {
+    KupPlannerGanttRowType["TASK"] = "task";
+    KupPlannerGanttRowType["PHASE"] = "phase";
+    KupPlannerGanttRowType["DETAIL"] = "detail";
+})(KupPlannerGanttRowType || (KupPlannerGanttRowType = {}));
+class KupPlannerLastOnChangeReceived {
+    constructor(event, threshold = 100) {
+        this.dateTime = new Date();
+        this.event = event;
+        this.threshold = threshold;
+    }
+    isEquivalent(newEvent) {
+        const intervalTime = new Date().valueOf() - this.dateTime.valueOf();
+        const equals = JSON.stringify(this.event) === JSON.stringify(newEvent);
+        return equals && intervalTime < this.threshold;
+    }
+    resetDateTime() {
+        this.dateTime = new Date();
+    }
+}
+const defaultStylingOptions = {
+    listCellWidth: '300px',
+    rowHeight: 40,
+    barFill: 90,
+    projectProgressColor: '#CBCBCB',
+    projectProgressSelectedColor: '#CBCBCB',
+    projectBackgroundColor: '#CBCBCB',
+    projectBackgroundSelectedColor: '#CBCBCB',
+    barProgressColor: '#A2A415',
+    barProgressSelectedColor: '#A2A415',
+    barBackgroundColor: '#A2A415',
+    barBackgroundSelectedColor: '#A2A415',
+    barDropZoneColor: '#4d9f0240'
+};
+const KUP_PLANNER_MAIN_GANTT_ID = 'main';
+const KUP_PLANNER_SECONDARY_GANTT_ID = 'secondary';
+
+export { KUP_PLANNER_MAIN_GANTT_ID as K, KupPlannerGanttRowType as a, KupPlannerTaskAction as b, KupPlannerLastOnChangeReceived as c, defaultStylingOptions as d, KupPlannerProps as e, KUP_PLANNER_SECONDARY_GANTT_ID as f };

package/dist/components/kup-planner-renderer2.js

@@ -1,6 +1,6 @@
 import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
-import { d as calculateDisplayedDateRange, e as convertProjectToTasks, b as getPhaseById, m as mergeTaskIntoProjects, c as getProjectById, f as mergeTaskIntoPhases, h as columnWidthForTimeUnit } from './kup-planner-renderer-helper.js';
-import { f as KUP_PLANNER_MAIN_GANTT_ID, g as KUP_PLANNER_SECONDARY_GANTT_ID, d as defineCustomElement$5 } from './kup-task-list2.js';
+import { c as calculateDisplayedDateRange, a as convertProjectToTasks, b as getPhaseById, m as mergeTaskIntoProjects, e as getProjectById, f as mergeTaskIntoPhases, h as columnWidthForTimeUnit, d as defineCustomElement$5 } from './kup-task-list2.js';
+import { K as KUP_PLANNER_MAIN_GANTT_ID, f as KUP_PLANNER_SECONDARY_GANTT_ID } from './kup-planner-declarations.js';
 import { b as KupDates } from './kup-dates.js';
 import { g as ganttDateTimeFormatters, d as defineCustomElement$b } from './kup-gantt-calendar2.js';
 import { d as defineCustomElement$e } from './custom-task-list-header.js';
@@ -78,14 +78,14 @@ const KupPlannerRenderer = /*@__PURE__*/ proxyCustomElement(class KupPlannerRend
     }
     //---- 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();
@@ -202,6 +202,31 @@ const KupPlannerRenderer = /*@__PURE__*/ proxyCustomElement(class KupPlannerRend
         // 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;
@@ -214,7 +239,7 @@ const KupPlannerRenderer = /*@__PURE__*/ proxyCustomElement(class KupPlannerRend
     }
     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;
@@ -247,7 +272,15 @@ const KupPlannerRenderer = /*@__PURE__*/ proxyCustomElement(class KupPlannerRend
                 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) {
@@ -277,7 +310,7 @@ const KupPlannerRenderer = /*@__PURE__*/ proxyCustomElement(class KupPlannerRend
                     }
                 }
             }, 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 this; }
     static get watchers() { return {

package/dist/components/kup-planner.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host, getAssetPath } from '@stencil/core/internal/client';
 import { k as kupManagerInstance, m as getCellValueForDisplay, g as getProps, s as setProps, b as KupThemeIconValues, Q as KupLanguageSearch } from './kup-manager.js';
-import { K as KupPlannerGanttRowType, a as defaultStylingOptions, b as KupPlannerTaskAction, c as KupPlannerLastOnChangeReceived, d as defineCustomElement$9, e as KupPlannerProps } from './kup-task-list2.js';
+import { a as KupPlannerGanttRowType, d as defaultStylingOptions, b as KupPlannerTaskAction, c as KupPlannerLastOnChangeReceived, e as KupPlannerProps } from './kup-planner-declarations.js';
 import { N as FTextFieldMDC, c as componentWrapperId, Z as FTextField, d as defineCustomElement$3, a as defineCustomElement$5, b as defineCustomElement$6, e as defineCustomElement$b, f as defineCustomElement$d, g as defineCustomElement$f, h as defineCustomElement$g, i as defineCustomElement$h, j as defineCustomElement$i, k as defineCustomElement$k, l as defineCustomElement$l, m as defineCustomElement$o, n as defineCustomElement$r, o as defineCustomElement$s, p as defineCustomElement$t, q as defineCustomElement$u, r as defineCustomElement$v, s as defineCustomElement$y, t as defineCustomElement$z, u as defineCustomElement$A, v as defineCustomElement$B, w as defineCustomElement$C, x as defineCustomElement$D, y as defineCustomElement$E, z as defineCustomElement$F, A as defineCustomElement$G, B as defineCustomElement$H } from './kup-autocomplete2.js';
 import { K as KupDatesFormats } from './kup-dates.js';
 import { d as defineCustomElement$x } from './custom-task-list-header.js';
@@ -13,13 +13,14 @@ import { d as defineCustomElement$j } from './kup-planner-renderer2.js';
 import { d as defineCustomElement$e } from './kup-standard-tooltip2.js';
 import { d as defineCustomElement$c } from './kup-switcher2.js';
 import { d as defineCustomElement$a } from './kup-task-gantt2.js';
+import { d as defineCustomElement$9 } from './kup-task-list2.js';
 import { d as defineCustomElement$8 } from './kup-task-list-header2.js';
 import { d as defineCustomElement$7 } from './kup-task-list-table2.js';
 import { d as defineCustomElement$4 } from './kup-tooltip2.js';
 import { d as defineCustomElement$2 } from './kup-vertical-scroll2.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) {
@@ -30,9 +31,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) {
@@ -50,13 +71,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]);
@@ -115,6 +157,7 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class KupPlanner extends H
         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);
@@ -143,9 +186,11 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class KupPlanner extends H
         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;
@@ -155,9 +200,11 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class KupPlanner extends H
         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;
@@ -165,16 +212,19 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class KupPlanner extends H
         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() {
@@ -279,7 +329,7 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class KupPlanner extends H
         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]
@@ -306,6 +356,10 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class KupPlanner extends H
                     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;
             });
@@ -373,6 +427,7 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class KupPlanner extends H
                     window.clearTimeout(taskScrollYTimeout);
                     taskScrollYTimeout = window.setTimeout(() => this.handleTaskGanttScrollY(y), scrollDelay);
                 },
+                onPhaseDrop: (nativeEvent) => this.handleOnPhaseDrop(nativeEvent),
             },
             secondaryGantt: details
                 ? {
@@ -397,6 +452,7 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class KupPlanner extends H
             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);
@@ -480,6 +536,14 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class KupPlanner extends H
             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:
@@ -581,6 +645,9 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class KupPlanner extends H
             }
         }
     }
+    handleOnPhaseDrop(nativeEvent) {
+        this.onKupPhaseDrop(nativeEvent, KupPlannerTaskAction.onTask);
+    }
     render() {
         var _a, _b, _c;
         const plannerProps = this.plannerProps
@@ -588,7 +655,7 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class KupPlanner extends H
         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);
                 }
@@ -623,9 +690,11 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class KupPlanner extends H
         "detailDates": [16],
         "detailFilter": [1, "detail-filter"],
         "detailHeight": [2, "detail-height"],
+        "detailHours": [16],
         "detailIconCol": [1, "detail-icon-col"],
         "detailIdCol": [1, "detail-id-col"],
         "detailNameCol": [1, "detail-name-col"],
+        "detailPrevHours": [16],
         "detailPrevDates": [16],
         "detailInitialScrollX": [2, "detail-initial-scroll-x"],
         "detailInitialScrollY": [2, "detail-initial-scroll-y"],
@@ -635,9 +704,11 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class KupPlanner extends H
         "phaseColumns": [16],
         "phaseColParDep": [1, "phase-col-par-dep"],
         "phaseDates": [16],
+        "phaseHours": [16],
         "phaseIconCol": [1, "phase-icon-col"],
         "phaseIdCol": [1, "phase-id-col"],
         "phaseNameCol": [1, "phase-name-col"],
+        "phasePrevHours": [16],
         "phasePrevDates": [16],
         "readOnly": [4, "read-only"],
         "showSecondaryDates": [4, "show-secondary-dates"],
@@ -645,16 +716,19 @@ const KupPlanner$1 = /*@__PURE__*/ proxyCustomElement(class KupPlanner extends H
         "taskDates": [16],
         "taskFilter": [1, "task-filter"],
         "taskHeight": [2, "task-height"],
+        "taskHours": [16],
         "taskIconCol": [1, "task-icon-col"],
         "taskIdCol": [1, "task-id-col"],
         "taskInitialScrollX": [2, "task-initial-scroll-x"],
         "taskInitialScrollY": [2, "task-initial-scroll-y"],
         "taskNameCol": [1, "task-name-col"],
+        "taskPrevHours": [16],
         "taskPrevDates": [16],
         "titleMess": [1, "title-mess"],
         "viewMode": [1, "view-mode"],
         "mainFilter": [16],
         "secondaryFilter": [16],
+        "scrollableTaskList": [4, "scrollable-task-list"],
         "plannerProps": [32],
         "getProps": [64],
         "refresh": [64],
@@ -669,7 +743,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]
@@ -692,6 +766,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;
     });
@@ -707,7 +785,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) {
@@ -736,6 +814,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/components/kup-probe.js

@@ -236,7 +236,7 @@ const KupProbe$1 = /*@__PURE__*/ proxyCustomElement(class KupProbe extends HTMLE
         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/components/kup-qlik.js

@@ -117,7 +117,7 @@ const KupQlik$1 = /*@__PURE__*/ proxyCustomElement(class KupQlik extends HTMLEle
         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/components/kup-snackbar.js

@@ -112,7 +112,7 @@ const KupSnackbar$1 = /*@__PURE__*/ proxyCustomElement(class KupSnackbar extends
         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);

package/dist/components/kup-standard-tooltip2.js

@@ -13,7 +13,7 @@ const StandardTooltipContent = /*@__PURE__*/ proxyCustomElement(class StandardTo
         this.fontFamily = undefined;
     }
     render() {
-        return (h("div", { key: '654584ad4531cbc29fac8f6f1f8862f32127e614', class: "tooltipDefaultContainer", style: { fontSize: this.fontSize, fontFamily: this.fontFamily } }, h("b", { key: 'fc0104c8f5cce036410e84236b73237ca8c32e10', style: { fontSize: `${parseInt(this.fontSize) + 6}px` } }, `${this.task.name}: ${this.task.start.getDate()}-${this.task.start.getMonth() + 1}-${this.task.start.getFullYear()} - ${this.task.end.getDate()}-${this.task.end.getMonth() + 1}-${this.task.end.getFullYear()}`), this.task.end.getTime() - this.task.start.getTime() !== 0 && (h("p", { class: "tooltipDefaultContainerParagraph" }, `Duration: ${~~((this.task.end.getTime() - this.task.start.getTime()) / (1000 * 60 * 60 * 24))} day(s)`)), h("p", { key: '021b32e66e1ee1254acb60d7a5c1f38f1b59ea42', class: "tooltipDefaultContainerParagraph" }, !!this.task.progress && `Progress: ${this.task.progress} %`)));
+        return (h("div", { key: 'c9b5188678b4980a396d82ea533c06ab66559061', class: "tooltipDefaultContainer", style: { fontSize: this.fontSize, fontFamily: this.fontFamily } }, h("b", { key: 'f1597026854513f01c5f40c95ac1b5dee2284f1a', style: { fontSize: `${parseInt(this.fontSize) + 6}px` } }, `${this.task.name}: ${this.task.start.getDate()}-${this.task.start.getMonth() + 1}-${this.task.start.getFullYear()} - ${this.task.end.getDate()}-${this.task.end.getMonth() + 1}-${this.task.end.getFullYear()}`), this.task.end.getTime() - this.task.start.getTime() !== 0 && (h("p", { class: "tooltipDefaultContainerParagraph" }, `Duration: ${~~((this.task.end.getTime() - this.task.start.getTime()) / (1000 * 60 * 60 * 24))} day(s)`)), h("p", { key: 'c544fe0f4499f5ef8dbc3cbb0076b9a4addfd5d1', class: "tooltipDefaultContainerParagraph" }, !!this.task.progress && `Progress: ${this.task.progress} %`)));
     }
     static get style() { return KupStandardTooltipStyle0; }
 }, [1, "kup-standard-tooltip", {

package/dist/components/kup-switcher2.js

@@ -1,24 +1,36 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const kupSwitcherCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.switcher{display:grid;grid-auto-flow:column;grid-gap:8px;margin-left:12px;width:max-content}.button{background:transparent;border-color:var(--kup-primary-color, #003b77);border-radius:4px;border-width:1px;box-shadow:0 3px 1px -2px rgba(var(--kup-text-color-rgb, 51 51 51), 0.2), 0 2px 2px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.14), 0 1px 5px 0 rgba(var(--kup-text-color-rgb, 51 51 51), 0.12);box-sizing:border-box;color:var(--kup-primary-color, #003b77);cursor:pointer;font-size:11px;height:32px;min-width:64px}.label{font-family:var(--kup-font-family, inherit);font-size:11px;letter-spacing:0.0892857143em;text-decoration:none;text-transform:uppercase;padding:0 6px}";
+const kupSwitcherCss = ".kup-body-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.kup-body-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:400;letter-spacing:0.16px}.kup-code-01{font-family:var(--kup-font-family-monospace);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-label-01{font-family:var(--kup-font-family);font-size:12px;line-height:16px;font-weight:400;letter-spacing:0.32px}.kup-caption-02{font-family:var(--kup-font-family);font-size:12px;line-height:15px;font-weight:500;letter-spacing:1px}.kup-caption-01{font-family:var(--kup-font-family);font-size:10px;line-height:13px;font-weight:400;letter-spacing:1px}.kup-small-label-01{font-family:var(--kup-font-family);font-size:6px;line-height:9px;font-weight:400;letter-spacing:1px}.kup-heading-compact-01{font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:600;letter-spacing:0.16px}.kup-heading-01{font-family:var(--kup-font-family);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0.16px}.kup-heading-02{font-family:var(--kup-font-family);font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}.kup-heading-03{font-family:var(--kup-font-family);font-size:20px;line-height:28px;font-weight:400;letter-spacing:0}.kup-heading-04{font-family:var(--kup-font-family);font-size:28px;line-height:36px;font-weight:400;letter-spacing:0}.kup-heading-05{font-family:var(--kup-font-family);font-size:32px;line-height:40px;font-weight:300;letter-spacing:0}.kup-heading-06{font-family:var(--kup-font-family);font-size:42px;line-height:50px;font-weight:300;letter-spacing:0}.kup-heading-07{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:300;letter-spacing:0}.kup-heading-08{font-family:var(--kup-font-family);font-size:54px;line-height:64px;font-weight:600;letter-spacing:0}.switcher{display:grid;grid-auto-flow:column;grid-gap:8px;width:max-content;margin-bottom:var(--kup-space-05);margin-left:var(--kup-space-04)}.button{background-color:var(--kup-gray-color-70);border:none;text-align:left;box-sizing:border-box;color:var(--kup-gray-color-0);cursor:pointer;padding:var(--kup-space-03) var(--kup-space-05)}.button:hover{background-color:var(--kup-gray-color-90)}.button:focus{background-color:var(--kup-primary-color-60)}.label{text-decoration:none;font-family:var(--kup-font-family);font-size:14px;line-height:18px;font-weight:400;letter-spacing:0.16px}.buttonActive{background-color:var(--kup-primary-color-60)}";
 const KupSwitcherStyle0 = kupSwitcherCss;
 
 const KupSwitcher = /*@__PURE__*/ proxyCustomElement(class KupSwitcher extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.buttonLabels = [
+            'hour',
+            'day',
+            'week',
+            'month',
+            'year',
+        ];
         this.timeUnitChange = undefined;
+        this.activeButton = 'day';
     }
     render() {
-        const day = () => this.timeUnitChange('day');
-        const week = () => this.timeUnitChange('week');
-        const month = () => this.timeUnitChange('month');
-        const year = () => this.timeUnitChange('year');
-        return (h("div", { key: '64c26910f550b5c74b294667e58f396f0642e601', class: "switcher" }, h("button", { key: '1f110cd85b5e837aec6f5c2b69ac14b3a47d9f79', type: "button", class: "button", onClick: day }, h("span", { key: 'be249d7896fcd93905e8865309405d30dfa506bf', class: "label" }, "Day")), h("button", { key: '81dfab2aebed98d32cff106577795a064c03a257', type: "button", class: "button", onClick: week }, h("span", { key: 'e5c41e5dcd9d775c6749c2907e59a7d0400e3712', class: "label" }, "Week")), h("button", { key: 'a598a5ab4f1496bbd267134201b21c45e5198d01', type: "button", class: "button", onClick: month }, h("span", { key: '57769be17ca1de59a919cbb7e7ac11d0546a28fb', class: "label" }, "Month")), h("button", { key: 'b62c7585c44acc19863bc93898851348250ba7fa', type: "button", class: "button", onClick: year }, h("span", { key: '9f4ab800c4eef1666ceabaebe0d35b042753430f', class: "label" }, "Year"))));
+        const handleButtonClick = (mode) => {
+            this.activeButton = mode;
+            this.timeUnitChange(mode);
+        };
+        return (h("div", { key: '1a1621221e411df713757eae42e028968277e0a5', class: "switcher" }, this.buttonLabels.map((label) => (h("button", { type: "button", class: {
+                button: true,
+                buttonActive: this.activeButton === label,
+            }, onClick: () => handleButtonClick(label) }, h("span", { class: "label" }, label.charAt(0).toUpperCase() + label.slice(1)))))));
     }
     static get style() { return KupSwitcherStyle0; }
 }, [0, "kup-switcher", {
-        "timeUnitChange": [16]
+        "timeUnitChange": [16],
+        "activeButton": [32]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {