@sme.up/ketchup 9.6.3 → 9.6.5

package/dist/collection/components/kup-planner/kup-planner-helper.js

@@ -2,7 +2,7 @@ import { KupDatesFormats } from "../../managers/kup-dates/kup-dates-declarations
 import { kupManagerInstance } from "../../managers/kup-manager/kup-manager";
 import { getCellValueForDisplay } from "../../utils/cell-utils";
 const kupManager = kupManagerInstance();
-export function sanitizeAllDates(startDateCell, endDateCell, secStartDateCell, secEndDateCell) {
+export function sanitizeAllDates(startDateCell, endDateCell, secStartDateCell, secEndDateCell, startHourCell, endHourCell, secStartHourCell, secEndHourCell) {
     const sanitizedDateValues = sanitizeDates(startDateCell, endDateCell);
     let sanitizedSecDateValues = [];
     if (secStartDateCell && secEndDateCell) {
@@ -13,9 +13,29 @@ export function sanitizeAllDates(startDateCell, endDateCell, secStartDateCell, s
             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) {
@@ -33,13 +53,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));
+}
 export function isAtLeastOneDateValid(startDateCell, endDateCell) {
     return isDateValid(startDateCell) || isDateValid(endDateCell);
 }
+export function isAtLeastOneHourValid(startHourCell, endHourCell) {
+    return isHourValid(startHourCell) || isHourValid(endHourCell);
+}
 export function getValuesToShow(row, idCol, nameCol, dataColumns, columns, customToValuesFunction) {
     let toValuesFunction = () => columns.map((col) => {
         return getCellValueForDisplay(dataColumns.find((kCol) => kCol.name == col), row.cells[col]);

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

@@ -54,9 +54,11 @@ export class KupPlanner {
         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;
@@ -66,9 +68,11 @@ export class KupPlanner {
         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;
@@ -76,16 +80,19 @@ export class KupPlanner {
         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() {
@@ -190,7 +197,7 @@ export class KupPlanner {
         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]
@@ -217,6 +224,10 @@ export class KupPlanner {
                     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;
             });
@@ -284,6 +295,7 @@ export class KupPlanner {
                     window.clearTimeout(taskScrollYTimeout);
                     taskScrollYTimeout = window.setTimeout(() => this.handleTaskGanttScrollY(y), scrollDelay);
                 },
+                onPhaseDrop: (nativeEvent) => this.handleOnPhaseDrop(nativeEvent),
             },
             secondaryGantt: details
                 ? {
@@ -308,6 +320,7 @@ export class KupPlanner {
             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);
@@ -391,6 +404,14 @@ export class KupPlanner {
             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:
@@ -492,6 +513,9 @@ export class KupPlanner {
             }
         }
     }
+    handleOnPhaseDrop(nativeEvent) {
+        this.onKupPhaseDrop(nativeEvent, KupPlannerTaskAction.onTask);
+    }
     render() {
         var _a, _b, _c;
         const plannerProps = this.plannerProps
@@ -499,7 +523,7 @@ export class KupPlanner {
         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);
                 }
@@ -739,6 +763,25 @@ export class KupPlanner {
                 "attribute": "detail-height",
                 "reflect": false
             },
+            "detailHours": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Columns containing detail hour duration, from (firstDate) to (secondDate)"
+                },
+                "defaultValue": "[]"
+            },
             "detailIconCol": {
                 "type": "string",
                 "mutable": false,
@@ -799,6 +842,25 @@ export class KupPlanner {
                 "attribute": "detail-name-col",
                 "reflect": false
             },
+            "detailPrevHours": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Columns containing forecast detail duration, from (firstHour) to (secondHour)"
+                },
+                "defaultValue": "[]"
+            },
             "detailPrevDates": {
                 "type": "unknown",
                 "mutable": false,
@@ -975,6 +1037,25 @@ export class KupPlanner {
                     "text": "Columns containing phase duration, from (firstDate) to (secondDate)"
                 }
             },
+            "phaseHours": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Columns containing phase hour duration, from (firstDate) to (secondDate)"
+                },
+                "defaultValue": "[]"
+            },
             "phaseIconCol": {
                 "type": "string",
                 "mutable": false,
@@ -1035,6 +1116,25 @@ export class KupPlanner {
                 "attribute": "phase-name-col",
                 "reflect": false
             },
+            "phasePrevHours": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Columns containing forecast phase duration, from (firstHour) to (secondHour)"
+                },
+                "defaultValue": "[]"
+            },
             "phasePrevDates": {
                 "type": "unknown",
                 "mutable": false,
@@ -1171,6 +1271,25 @@ export class KupPlanner {
                 "attribute": "task-height",
                 "reflect": false
             },
+            "taskHours": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Columns containing task hours duration, from (firstDate) to (secondDate)"
+                },
+                "defaultValue": "[]"
+            },
             "taskIconCol": {
                 "type": "string",
                 "mutable": false,
@@ -1271,6 +1390,25 @@ export class KupPlanner {
                 "attribute": "task-name-col",
                 "reflect": false
             },
+            "taskPrevHours": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Columns containing forecast task duration, from (firstHour) to (secondHour)"
+                },
+                "defaultValue": "[]"
+            },
             "taskPrevDates": {
                 "type": "unknown",
                 "mutable": false,
@@ -1314,7 +1452,7 @@ export class KupPlanner {
                 "mutable": false,
                 "complexType": {
                     "original": "KupPlannerViewMode",
-                    "resolved": "\"day\" | \"month\" | \"week\" | \"year\"",
+                    "resolved": "\"day\" | \"hour\" | \"month\" | \"week\" | \"year\"",
                     "references": {
                         "KupPlannerViewMode": {
                             "location": "import",
@@ -1381,6 +1519,27 @@ export class KupPlanner {
                         }],
                     "text": "Sets the filter for secondary gantt."
                 }
+            },
+            "scrollableTaskList": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Sets the scroll bar for task list."
+                },
+                "attribute": "scrollable-task-list",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -1453,6 +1612,27 @@ export class KupPlanner {
                         }
                     }
                 }
+            }, {
+                "method": "kupPhaseDrop",
+                "name": "kup-planner-phasedrop",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KupPlannerEventPayload",
+                    "resolved": "KupPlannerEventPayload",
+                    "references": {
+                        "KupPlannerEventPayload": {
+                            "location": "import",
+                            "path": "./kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerEventPayload"
+                        }
+                    }
+                }
             }, {
                 "method": "kupReady",
                 "name": "kup-planner-ready",
@@ -1660,7 +1840,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]
@@ -1683,6 +1863,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;
     });
@@ -1698,7 +1882,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) {
@@ -1727,6 +1911,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/collection/components/kup-planner/utils/custom-task-list-header.js

@@ -8,11 +8,11 @@ export class KupCustomTaskListHeader {
         this.fontSize = undefined;
     }
     render() {
-        return (h("div", { key: '25542e1e426f9f035bdd3b894acf915100609cec', class: "custom-task-list-wrapper", style: {
+        return (h("div", { key: '777c24c612e5d8c93b74a4a8466248cd9a84cd31', class: "custom-task-list-wrapper", style: {
                 height: '50px',
                 fontFamily: this.fontFamily,
                 fontSize: this.fontSize,
-            } }, h("div", { key: 'b64868e8a15fda0a259e30e77a1572fef34cf9a9', class: "title" }, h("span", { key: '4bb87686a421a211ff7caa2c53105764f2e15c0a' }, this.label)), this.setDoubleView !== undefined && (h("div", { class: "toggler" }, h("label", { htmlFor: "ch2", class: "switch" }, h("input", { class: "input", id: "ch2", type: "checkbox", checked: this.doubleView, onClick: () => this.setDoubleView(!this.doubleView) }), h("span", { class: "slider" })), h("span", { class: "label" }, "Previsioni")))));
+            } }, h("div", { key: '8a00184f85811656ea2f4c6e69fee0db3ef85f48', class: "title" }, h("span", { key: '170a1bef8a7663064ebaaa600a3aaa40beb84243' }, this.label)), this.setDoubleView !== undefined && (h("div", { class: "toggler" }, h("label", { htmlFor: "ch2", class: "switch" }, h("input", { class: "input", id: "ch2", type: "checkbox", checked: this.doubleView, onClick: () => this.setDoubleView(!this.doubleView) }), h("span", { class: "slider" })), h("span", { class: "label" }, "Previsioni")))));
     }
     static get is() { return "kup-custom-task-list-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/kup-planner/utils/custom-task-list-table.js

@@ -1,5 +1,6 @@
 import { Fragment, h } from "@stencil/core";
 import { KupDates } from "../../../managers/kup-dates/kup-dates";
+import { createArrayFromNum } from "./helpers/other.helpers";
 export class KupCustomTaskListTable {
     constructor() {
         this.ganttId = undefined;
@@ -8,15 +9,37 @@ export class KupCustomTaskListTable {
         this.rowWidth = '';
         this.fontFamily = '';
         this.fontSize = '';
+        this.scrollableTaskList = undefined;
+        this.taskListScrollX = undefined;
         this.setSelectedTask = undefined;
         this.onclickTaskList = undefined;
         this.ondblclickTaskList = undefined;
         this.oncontextmenuTaskList = undefined;
+        this.ontaskListScrollWidth = undefined;
+    }
+    componentDidLoad() {
+        var _a;
+        this.ontaskListScrollWidth((_a = this.projectWrapperRef) === null || _a === void 0 ? void 0 : _a.clientWidth);
+    }
+    componentDidUpdate() {
+        var _a;
+        this.ontaskListScrollWidth((_a = this.projectWrapperRef) === null || _a === void 0 ? void 0 : _a.clientWidth);
+    }
+    updateTaskListScroll() {
+        this.projectWrapperRef &&
+            (this.projectWrapperRef.parentElement.scrollLeft = this.taskListScrollX);
     }
     render() {
         const kupDates = new KupDates();
-        return (h("div", { key: 'aa6299da80dde8682f3fe8c1a8e244d6c15e5c5c', class: "container" }, this.tasks.map((task) => {
-            var _a, _b, _c;
+        const scrollableStyle = {};
+        if (this.scrollableTaskList) {
+            scrollableStyle['width'] = this.rowWidth;
+        }
+        const spansToShow = this.tasks.reduce((prev, curr) => {
+            return prev.valuesToShow.length > curr.valuesToShow.length ? prev : curr;
+        }).valuesToShow.length + 1;
+        return (h("div", { class: `container ${this.scrollableTaskList ? 'scrollable' : ''}`, style: scrollableStyle }, h("div", { class: "project-wrapper", ref: (el) => (this.projectWrapperRef = el) }, this.tasks.map((task) => {
+            var _a, _b, _c, _d;
             return (h(Fragment, null, task.type === 'project' ? (h("div", { class: "project", style: {
                     height: `${this.rowHeight}px`,
                     width: this.rowWidth,
@@ -33,11 +56,15 @@ export class KupCustomTaskListTable {
                     e.preventDefault();
                     this.setSelectedTask(task.id);
                     this.oncontextmenuTaskList(e, task.id);
-                } }, (_a = task.valuesToShow) === null || _a === void 0 ? void 0 : _a.map((v, index) => (h("span", { class: index === 0 ? 'main' : undefined, title: v.length > 10 ? v : undefined, key: `task_${task.id}_valuesToShow_${index}` }, v === '#START#'
-                ? kupDates.formatToLocaleSimple(task.start)
-                : v === '#END#'
-                    ? kupDates.formatToLocaleSimple(task.end)
-                    : v))))) : task.type === 'task' ? (h("div", { class: "subrow", style: {
+                } }, (_a = task.valuesToShow) === null || _a === void 0 ? void 0 :
+                _a.map((v, index) => (h("span", { class: index === 0 ? 'main' : undefined, title: v.length > 10 ? v : undefined, key: `task_${task.id}_valuesToShow_${index}` }, v === '#START#'
+                    ? kupDates.formatToLocaleSimple(task.start)
+                    : v === '#END#'
+                        ? kupDates.formatToLocaleSimple(task.end)
+                        : v))), this.scrollableTaskList && spansToShow > task.valuesToShow.length && ((() => {
+                const spansToIterate = createArrayFromNum(spansToShow - task.valuesToShow.length);
+                return (spansToIterate.map((element) => (h("span", { key: element }))));
+            })()))) : task.type === 'task' ? (h("div", { class: "subrow", style: {
                     height: `${this.rowHeight}px`,
                     width: this.rowWidth,
                     fontFamily: this.fontFamily,
@@ -53,16 +80,26 @@ export class KupCustomTaskListTable {
                     e.preventDefault();
                     this.setSelectedTask(task.id);
                     this.oncontextmenuTaskList(e, task.id);
+                } }, this.scrollableTaskList ? (h("div", { style: {
+                    textAlign: 'end',
                 } }, h("span", { key: `phase_${task.id}_valuesToShow_color`, style: {
                     height: '16px',
                     width: '16px',
+                    display: 'inline-block',
                     backgroundColor: (_b = task.styles) === null || _b === void 0 ? void 0 : _b.backgroundColor,
-                } }), (_c = task.valuesToShow) === null || _c === void 0 ? void 0 :
-                _c.map((v, index) => (h("span", { class: index === 0 ? 'main' : undefined, title: v.length > 10 ? v : undefined, key: `phase_${task.id}_valuesToShow_${index}` }, v === '#START#'
+                } }))) : (h("span", { key: `phase_${task.id}_valuesToShow_color`, style: {
+                    height: '16px',
+                    width: '16px',
+                    backgroundColor: (_c = task.styles) === null || _c === void 0 ? void 0 : _c.backgroundColor,
+                } })), (_d = task.valuesToShow) === null || _d === void 0 ? void 0 :
+                _d.map((v, index) => (h("span", { class: index === 0 ? 'main' : undefined, title: v.length > 10 ? v : undefined, key: `phase_${task.id}_valuesToShow_${index}` }, v === '#START#'
                     ? kupDates.formatToLocaleSimple(task.start)
                     : v === '#END#'
                         ? kupDates.formatToLocaleSimple(task.end)
-                        : v))))) : ((() => {
+                        : v))), this.scrollableTaskList && spansToShow > task.valuesToShow.length && ((() => {
+                const spansToIterate = createArrayFromNum(spansToShow - task.valuesToShow.length - 1);
+                return (spansToIterate.map((element) => (h("span", { key: element }))));
+            })()))) : ((() => {
                 var _a;
                 let str = '';
                 for (let i = 0; i < task.valuesToShow.length; i++) {
@@ -84,7 +121,7 @@ export class KupCustomTaskListTable {
                         ? v
                         : undefined, key: `detail_${task.id}_valuesToShow_${index}` }, v)))));
             })())));
-        })));
+        }))));
     }
     static get is() { return "kup-custom-task-list-table"; }
     static get originalStyleUrls() {
@@ -210,6 +247,40 @@ export class KupCustomTaskListTable {
                 "reflect": false,
                 "defaultValue": "''"
             },
+            "scrollableTaskList": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "scrollable-task-list",
+                "reflect": false
+            },
+            "taskListScrollX": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "task-list-scroll-x",
+                "reflect": false
+            },
             "setSelectedTask": {
                 "type": "unknown",
                 "mutable": false,
@@ -274,7 +345,28 @@ export class KupCustomTaskListTable {
                     "tags": [],
                     "text": ""
                 }
+            },
+            "ontaskListScrollWidth": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(width: number) => void",
+                    "resolved": "(width: number) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
             }
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "taskListScrollX",
+                "methodName": "updateTaskListScroll"
+            }];
+    }
 }