@sme.up/ketchup 9.2.0 → 9.3.0

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

@@ -0,0 +1,390 @@
+import { h, proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
+import { d as calculateDisplayedDateRange, e as convertProjectToTasks, m as mergeTaskIntoProjects, b as getProjectById, f as mergeTaskIntoPhases, c as getPhaseById, 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 { d 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';
+import { d as defineCustomElement$d } from './custom-task-list-table.js';
+import { d as defineCustomElement$c } from './kup-gantt2.js';
+import { d as defineCustomElement$a } from './kup-grid-renderer2.js';
+import { d as defineCustomElement$9 } from './kup-horizontal-scroll2.js';
+import { d as defineCustomElement$8 } from './kup-standard-tooltip2.js';
+import { d as defineCustomElement$7 } from './kup-switcher2.js';
+import { d as defineCustomElement$6 } from './kup-task-gantt2.js';
+import { d as defineCustomElement$4 } from './kup-task-list-header2.js';
+import { d as defineCustomElement$3 } from './kup-task-list-table2.js';
+import { d as defineCustomElement$2 } from './kup-tooltip2.js';
+import { d as defineCustomElement$1 } from './kup-vertical-scroll2.js';
+
+const CustomTooltipHOC = () => {
+    const CustomTooltip = () => h("div", null);
+    return CustomTooltip;
+};
+
+const KupPlannerRenderer = /*@__PURE__*/ proxyCustomElement(class KupPlannerRenderer extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.locale = 'it-IT';
+        this.props = undefined;
+        this.timeUnit = undefined;
+        this.currentTasks = [];
+        this.currentDetails = [];
+        this.scrollX = -1;
+        this.mainGanttDoubleView = false;
+        this.displayedDates = {
+            displayedStartDate: new Date(),
+            displayedEndDate: new Date(),
+        };
+        this.viewDate = undefined;
+        this.projection = undefined;
+        this.tasks = [];
+        this.details = [];
+    }
+    /*-------------------------------------------------*/
+    /*                   W A T C H E R S               */
+    /*-------------------------------------------------*/
+    mainGanttChangeHandler() {
+        var _a;
+        this.currentTasks = this.props.mainGantt.items;
+        this.currentDetails = (_a = this.props.secondaryGantt) === null || _a === void 0 ? void 0 : _a.items;
+        this.projection = undefined;
+        this.updateTasks();
+    }
+    updateDisplayedDates() {
+        const dates = calculateDisplayedDateRange(this.currentTasks, this.timeUnit, this.mainGanttDoubleView, this.currentDetails, this.props.preStepsCount);
+        if (!this.viewDate) {
+            const now = new Date();
+            if (dates.displayedStartDate <= now &&
+                dates.displayedEndDate >= now) {
+                this.viewDate = now;
+            }
+            else {
+                this.viewDate = dates.displayedStartDate;
+            }
+        }
+    }
+    updateTasks() {
+        var _a, _b;
+        const kupDates = new KupDates();
+        this.tasks = [];
+        for (let i = 0; i < ((_a = this.currentTasks) === null || _a === void 0 ? void 0 : _a.length); i++) {
+            this.tasks.push(...convertProjectToTasks(this.currentTasks[i], kupDates.formatToIsoDate(this.displayedDates.displayedStartDate), kupDates.formatToIsoDate(this.displayedDates.displayedEndDate)));
+        }
+        this.details = [];
+        for (let i = 0; i < ((_b = this.currentDetails) === null || _b === void 0 ? void 0 : _b.length); i++) {
+            this.details.push(...convertProjectToTasks(this.currentDetails[i], kupDates.formatToIsoDate(this.displayedDates.displayedStartDate), kupDates.formatToIsoDate(this.displayedDates.displayedEndDate)));
+        }
+    }
+    //---- Lifecycle hooks ----
+    componentWillLoad() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        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.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);
+        this.viewDate = undefined;
+        this.projection = undefined;
+        this.updateTasks();
+    }
+    /*-------------------------------------------------*/
+    /*           P u b l i c   M e t h o d s           */
+    /*-------------------------------------------------*/
+    // Handle click event
+    handleClick(row, onClick) {
+        if (!row) {
+            return;
+        }
+        if (row.type === 'task' && this.props.secondaryGantt) {
+            const phase = row;
+            // Set projection state
+            this.projection = {
+                start: new Date(phase.startDate),
+                end: new Date(phase.endDate),
+                color: phase.color || '#ED7D31', // Default color if not provided
+            };
+        }
+        else {
+            this.projection = undefined;
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick(row);
+    }
+    // Handle dbl click event
+    handleDblClick(row, onDblClick) {
+        if (!row) {
+            return;
+        }
+        onDblClick === null || onDblClick === void 0 ? void 0 : onDblClick(row);
+    }
+    // Handle context menu event
+    handleContextMenu(event, row, onContextMenu) {
+        if (!row) {
+            return;
+        }
+        // Create projections if a phase is clicked
+        if (row.type === 'task' && this.props.secondaryGantt) {
+            const phase = row;
+            // Set projection state
+            this.projection = {
+                start: new Date(phase.startDate),
+                end: new Date(phase.endDate),
+                color: phase.color || '#ED7D31', // Default color if not provided
+            };
+        }
+        else {
+            this.projection = undefined;
+        }
+        // Emit the 'itemContextMenu' event with the event and clicked row data
+        onContextMenu === null || onContextMenu === void 0 ? void 0 : onContextMenu(event, row);
+    }
+    // Handle setting double view
+    handleSetDoubleView(checked) {
+        var _a, _b;
+        this.mainGanttDoubleView = checked;
+        (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onSetDoubleView) === null || _b === void 0 ? void 0 : _b.call(_a, checked);
+    }
+    // Handle date change
+    handleDateChange(task, currentProjects, onDateChange) {
+        var _a;
+        const id = task === null || task === void 0 ? void 0 : task.id;
+        if (!id) {
+            return;
+        }
+        let row = getProjectById(id, currentProjects);
+        if (!row) {
+            row = getPhaseById(id, currentProjects);
+        }
+        if (!row) {
+            return;
+        }
+        // Handle timeline
+        if (row.type === 'timeline') {
+            console.log('onDateChange for timeline not managed yet', id, row.type);
+            return;
+        }
+        if (row.type === 'project') {
+            const result = mergeTaskIntoProjects(currentProjects, task);
+            row = getProjectById(row.id, result);
+            this.viewDate = task.start;
+            this.currentTasks = result;
+        }
+        else if (row.type === 'task') {
+            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) === id); });
+            if (parentOfClickedPhase) {
+                const phases = mergeTaskIntoPhases(parentOfClickedPhase.phases, task);
+                const updatedProjects = currentProjects.map((p) => p.id === parentOfClickedPhase.id ? Object.assign(Object.assign({}, p), { phases }) : p);
+                row = getPhaseById(row.id, updatedProjects);
+                // Update projections if phase date changed
+                if (this.props.secondaryGantt && row) {
+                    // Update projection state
+                    this.projection = {
+                        start: new Date(row.startDate),
+                        end: new Date(row.endDate),
+                        color: (_a = row.color) !== null && _a !== void 0 ? _a : '#ED7D31',
+                    };
+                }
+                this.viewDate = task.start;
+                this.currentTasks = updatedProjects;
+            }
+        }
+        // Invoke callback
+        onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(row);
+        // Use setTimeout to ensure DOM updates
+        setTimeout(this.getScrollX, 500);
+    }
+    // Get scrollX
+    getScrollX() {
+        var _a, _b, _c;
+        if (this.rootElement) {
+            const x = (_a = this.rootElement.querySelector('[data-scrollx="true"]')) === null || _a === void 0 ? void 0 : _a.scrollLeft;
+            if (x !== undefined) {
+                (_c = (_b = this.props).onScrollX) === null || _c === void 0 ? void 0 : _c.call(_b, x);
+            }
+        }
+    }
+    render() {
+        var _a, _b, _c;
+        return (h("div", { class: "planner-render" }, h("kup-switcher", { timeUnitChange: (timeUnit) => {
+                var _a, _b;
+                (_b = (_a = this.props).onSetViewMode) === null || _b === void 0 ? void 0 : _b.call(_a, timeUnit);
+                this.timeUnit = timeUnit;
+                this.viewDate = undefined;
+                this.scrollX = -1;
+            } }), this.props && (h("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+            } }, h("kup-gantt", Object.assign({ ganttId: KUP_PLANNER_MAIN_GANTT_ID, key: KUP_PLANNER_SECONDARY_GANTT_ID, filter: this.props.mainGantt.filter, hideLabel: this.props.mainGantt.hideLabel, showSecondaryDates: this.mainGanttDoubleView, hideDependencies: this.props.mainGantt.hideDependencies, ganttHeight: this.props.mainGantt.ganttHeight, displayedStartDate: this.displayedDates.displayedStartDate, displayedEndDate: this.displayedDates.displayedEndDate, viewDate: this.viewDate, tasks: this.tasks, columnWidth: columnWidthForTimeUnit(this.timeUnit), viewMode: this.timeUnit }, this.props.mainGantt.stylingOptions, { TaskListHeader: this.props.mainGantt.taskListHeaderProject, TaskListTable: this.props.mainGantt.taskListTableProject, TooltipContent: (_a = this.props.mainGantt.tooltipContent) !== null && _a !== void 0 ? _a : CustomTooltipHOC(), barClick: (task) => {
+                let row = getProjectById(task.id, this.currentTasks);
+                if (!row) {
+                    row = getPhaseById(task.id, this.currentTasks);
+                }
+                if (row) {
+                    this.handleClick(row, this.props.mainGantt.onClick);
+                }
+            }, barDblClick: (task) => {
+                let row = getProjectById(task.id, this.currentTasks);
+                if (!row) {
+                    row = getPhaseById(task.id, this.currentTasks);
+                }
+                if (row) {
+                    this.handleDblClick(row, this.props.mainGantt.onDblClick);
+                }
+            }, barContextMenu: (event, task) => {
+                let row = getProjectById(task.id, this.currentTasks);
+                if (!row) {
+                    row = getPhaseById(task.id, this.currentTasks);
+                }
+                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({ 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) {
+                    let row = getProjectById(task.id, this
+                        .currentDetails);
+                    if (row) {
+                        this.handleClick(row, this.props.secondaryGantt
+                            .onClick);
+                    }
+                }
+            }, barDblClick: (task) => {
+                if (this.props.secondaryGantt) {
+                    let row = getProjectById(task.id, this
+                        .currentDetails);
+                    if (row) {
+                        this.handleDblClick(row, this.props.secondaryGantt
+                            .onDblClick);
+                    }
+                }
+            }, barContextMenu: (event, task) => {
+                if (this.props.secondaryGantt) {
+                    let row = getProjectById(task.id, this
+                        .currentDetails);
+                    if (row) {
+                        this.handleContextMenu(event, row, this.props.secondaryGantt
+                            .onContextMenu);
+                    }
+                }
+            }, 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 })))))));
+    }
+    get rootElement() { return this; }
+    static get watchers() { return {
+        "props": ["mainGanttChangeHandler"],
+        "timeUnit": ["updateDisplayedDates"],
+        "mainGanttDoubleView": ["updateDisplayedDates"],
+        "props.preStepsCount": ["updateDisplayedDates"],
+        "viewDate": ["updateDisplayedDates"],
+        "currentTasks": ["updateTasks"],
+        "currentDetails": ["updateTasks"]
+    }; }
+}, [0, "kup-planner-renderer", {
+        "props": [1040],
+        "timeUnit": [32],
+        "currentTasks": [32],
+        "currentDetails": [32],
+        "scrollX": [32],
+        "mainGanttDoubleView": [32],
+        "displayedDates": [32],
+        "viewDate": [32],
+        "projection": [32],
+        "tasks": [32],
+        "details": [32]
+    }, undefined, {
+        "props": ["mainGanttChangeHandler"],
+        "timeUnit": ["updateDisplayedDates"],
+        "mainGanttDoubleView": ["updateDisplayedDates"],
+        "props.preStepsCount": ["updateDisplayedDates"],
+        "viewDate": ["updateDisplayedDates"],
+        "currentTasks": ["updateTasks"],
+        "currentDetails": ["updateTasks"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kup-planner-renderer", "kup-custom-task-list-header", "kup-custom-task-list-table", "kup-gantt", "kup-gantt-calendar", "kup-grid-renderer", "kup-horizontal-scroll", "kup-standard-tooltip", "kup-switcher", "kup-task-gantt", "kup-task-list", "kup-task-list-header", "kup-task-list-table", "kup-tooltip", "kup-vertical-scroll"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kup-planner-renderer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, KupPlannerRenderer);
+            }
+            break;
+        case "kup-custom-task-list-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "kup-custom-task-list-table":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "kup-gantt":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "kup-gantt-calendar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "kup-grid-renderer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "kup-horizontal-scroll":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "kup-standard-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "kup-switcher":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "kup-task-gantt":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "kup-task-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "kup-task-list-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "kup-task-list-table":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "kup-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "kup-vertical-scroll":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KupPlannerRenderer as K, defineCustomElement as d };

package/dist/components/kup-planner.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface KupPlanner extends Components.KupPlanner, HTMLElement {}
 export const KupPlanner: {
-  prototype: KupPlanner;
-  new (): KupPlanner;
+    prototype: KupPlanner;
+    new (): KupPlanner;
 };
 /**
  * Used to define this component and all nested components recursively.