@sme.up/ketchup 9.2.0 → 9.3.0

package/dist/collection/components/kup-planner/utils/kup-horizontal-scroll/kup-horizontal-scroll.css

@@ -0,0 +1,36 @@
+.scrollWrapper {
+  overflow: auto;
+  max-width: 100%;
+  /*firefox*/
+  scrollbar-width: thin;
+  /*iPad*/
+  height: 1.2rem;
+}
+
+.scrollWrapper::-webkit-scrollbar {
+  width: 1.1rem;
+  height: 1.1rem;
+}
+
+.scrollWrapper::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.scrollWrapper::-webkit-scrollbar-thumb {
+  border: 6px solid transparent;
+  background: rgba(0, 0, 0, 0.2);
+  background: var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));
+  border-radius: 10px;
+  background-clip: padding-box;
+}
+
+.scrollWrapper::-webkit-scrollbar-thumb:hover {
+  border: 4px solid transparent;
+  background: rgba(0, 0, 0, 0.3);
+  background: var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));
+  background-clip: padding-box;
+}
+
+.scroll {
+  height: 1px;
+}

package/dist/collection/components/kup-planner/utils/kup-horizontal-scroll/kup-horizontal-scroll.js

@@ -0,0 +1,177 @@
+import { h } from "@stencil/core";
+export class HorizontalScroll {
+    constructor() {
+        this.scrollNumber = undefined;
+        this.svgWidth = undefined;
+        this.taskGanttRef = undefined;
+        this.rtl = undefined;
+        this.taskListWidth = undefined;
+        this.horizontalScroll = undefined;
+        this.timeoutId = undefined;
+    }
+    //---- Lifecycle hooks ----
+    componentDidLoad() {
+        this.scrollLeft();
+    }
+    /*-------------------------------------------------*/
+    /*                   W A T C H E R S               */
+    /*-------------------------------------------------*/
+    scrollLeft() {
+        clearTimeout(this.timeoutId);
+        this.timeoutId = setTimeout(() => {
+            this.setScrollLeft();
+        }, 50);
+    }
+    setScrollLeft() {
+        if (this.rootElement) {
+            this.rootElement.shadowRoot.querySelector('div').scrollLeft =
+                this.scrollNumber;
+        }
+    }
+    render() {
+        const rect = this.taskGanttRef.getBoundingClientRect();
+        return (h("div", { dir: "ltr", style: rect
+                ? {
+                    margin: this.rtl
+                        ? `0px ${rect.x}px 0px 0px`
+                        : `0px 0px 0px ${rect.x}px`,
+                }
+                : undefined, class: "scrollWrapper", "data-scrollx": "true", onScroll: this.horizontalScroll }, h("div", { style: { width: `${this.svgWidth}px` }, class: "scroll" })));
+    }
+    static get is() { return "kup-horizontal-scroll"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kup-horizontal-scroll.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kup-horizontal-scroll.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "scrollNumber": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "scroll-number",
+                "reflect": false
+            },
+            "svgWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "svg-width",
+                "reflect": false
+            },
+            "taskGanttRef": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLDivElement",
+                    "resolved": "HTMLDivElement",
+                    "references": {
+                        "HTMLDivElement": {
+                            "location": "global",
+                            "id": "global::HTMLDivElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "rtl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "rtl",
+                "reflect": false
+            },
+            "taskListWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "task-list-width",
+                "reflect": false
+            },
+            "horizontalScroll": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(event: UIEvent) => void",
+                    "resolved": "(event: UIEvent) => void",
+                    "references": {
+                        "UIEvent": {
+                            "location": "global",
+                            "id": "global::UIEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "timeoutId": {}
+        };
+    }
+    static get elementRef() { return "rootElement"; }
+    static get watchers() {
+        return [{
+                "propName": "scrollNumber",
+                "methodName": "scrollLeft"
+            }];
+    }
+}

package/dist/collection/components/kup-planner/utils/kup-planner-adapted-types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,396 @@
+import { KupDates } from "../../../managers/kup-dates/kup-dates";
+export const columnWidthForTimeUnit = (timeUnit) => {
+    switch (timeUnit) {
+        case 'year':
+            return 60 * 2;
+        default:
+            return 60;
+    }
+};
+export const getProjectById = (id, items) => {
+    for (let i = 0; i < items.length; i++) {
+        if (items[i].id === id) {
+            return items[i];
+        }
+    }
+    return undefined;
+};
+export const getPhaseById = (id, items) => {
+    for (let i = 0; i < items.length; i++) {
+        if (isDetail(items[i])) {
+            continue;
+        }
+        const item = items[i];
+        if (!item.phases) {
+            continue;
+        }
+        for (let j = 0; j < item.phases.length; j++)
+            if (item.phases[j].id === id) {
+                return item.phases[j];
+            }
+    }
+    return undefined;
+};
+export const isDetail = (row) => {
+    return (row &&
+        row.schedule &&
+        row.schedule.length !== 0);
+};
+export const mergeTaskIntoProjects = (projects, { id, start, end }) => projects.map((project) => project.id === id ? withNewDates(project, start, end) : project);
+export const mergeTaskIntoPhases = (phases, { id, start, end }) => {
+    if (phases) {
+        return phases.map((phase) => phase.id === id ? withNewDates(phase, start, end) : phase);
+    }
+    return undefined;
+};
+export const convertProjectToTasks = (item, mainGanttStartDate, mainGanttEndDate) => {
+    var _a;
+    if (!isDetail(item)) {
+        const kupDates = new KupDates();
+        const row = item;
+        const { start, end } = kupDates.validDates(row.startDate, row.endDate, row.name);
+        const { start: start2, end: end2 } = kupDates.validDates(row.secondaryStartDate, row.secondaryEndDate, row.name);
+        const mainTask = {
+            /**
+             * La libreria lo intende come le ore 00:00, che non è coerente
+             *  con come vorremmo ragionare noi. Es.: se un task finisce il 9 luglio,
+             *  la libreria colora le celle fino all'8 luglio compreso, ma non il 9;
+             *  noi invece vorremmo colorare anche il 9.
+             * Possibili workaround: gestirsi ovunque il giorno di differenza (😱);
+             *  impostare le conversioni dell'intervallo di fine come orario 23:59.
+             * In ogni caso va a cozzare con il calcolo delle durate
+             *  (es.: dall'1 al 5 luglio => risulta 4 giorni ma dovrebbe
+             *  essere 5 perché includiamo gli estremi; se sommiamo 23:59 ore
+             *  risulta ancora 4 per la libreria, e 4.99.. se calcolato a mano, e
+             *  ci vuole un Math.round come minimo)
+             */
+            start: start,
+            end: end,
+            id: row.id,
+            name: row.name,
+            type: row.type,
+            valuesToShow: row.valuesToShow,
+            secondaryStart: start2,
+            secondaryEnd: end2,
+            progress: 100,
+            /** Non disabilita clic nè select, ma solo il resize/move */
+            isDisabled: false,
+            hideChildren: false,
+            icon: row.icon,
+        };
+        const children1 = ((_a = row.phases) !== null && _a !== void 0 ? _a : []).map(convertPhaseToTask);
+        return [mainTask, ...children1];
+    }
+    else {
+        const row = item;
+        return [
+            Object.assign({}, convertDetailToTimeline(row, mainGanttStartDate, mainGanttEndDate)),
+        ];
+    }
+};
+export const convertPhaseToTask = (item) => {
+    const mapPhase = ({ startDate: phaseStart, endDate: phaseEnd, secondaryStartDate, secondaryEndDate, name: phaseName, id: phaseId, color, selectedColor, dependencies, icon, }) => {
+        const kupDates = new KupDates();
+        const { start, end } = kupDates.validDates(phaseStart, phaseEnd, phaseName);
+        const { start: phaseStart2, end: phaseEnd2 } = kupDates.validDates(secondaryStartDate, secondaryEndDate, phaseName);
+        return {
+            start,
+            end,
+            secondaryStart: phaseStart2,
+            secondaryEnd: phaseEnd2,
+            name: phaseName,
+            valuesToShow: item.valuesToShow,
+            id: phaseId,
+            type: 'task',
+            progress: 100,
+            dependencies,
+            /**
+             * Colori custom per specifico task - ci serve per distinguere le fasi
+             */
+            styles: color
+                ? {
+                    backgroundColor: color,
+                    progressColor: color,
+                    backgroundSelectedColor: selectedColor,
+                    progressSelectedColor: selectedColor,
+                }
+                : {},
+            icon,
+        };
+    };
+    return mapPhase(item);
+};
+const convertDetailToTimeline = (item, mainGanttStartDate, mainGanttEndDate) => {
+    const kupDates = new KupDates();
+    const { id, name, schedule } = item;
+    const getDatesForTask = (item) => {
+        let start = mainGanttStartDate !== null && mainGanttStartDate !== void 0 ? mainGanttStartDate : '';
+        let end = mainGanttEndDate !== null && mainGanttEndDate !== void 0 ? mainGanttEndDate : '';
+        for (let i = 0; i < item.schedule.length; i++) {
+            const lstart = item.schedule[i].startDate;
+            const lend = item.schedule[i].endDate;
+            if (!start || lstart.localeCompare(start) < 0) {
+                start = lstart;
+            }
+            if (!end || lend.localeCompare(end) > 0) {
+                end = lend;
+            }
+        }
+        return kupDates.validDates(start, end, 'detail item');
+    };
+    const { start, end } = getDatesForTask(item);
+    const convertToFrame = (x) => {
+        const { startDate, endDate, color, selectedColor, icon } = x;
+        const { start, end } = kupDates.validDates(startDate, endDate, 'time frame');
+        return {
+            start,
+            end,
+            backgroundColor: color !== null && color !== void 0 ? color : '0xffffff',
+            backgroundSelectedColor: selectedColor !== null && selectedColor !== void 0 ? selectedColor : color,
+            icon,
+        };
+    };
+    const defaultColor = '#595959';
+    return {
+        id,
+        type: 'timeline',
+        timeline: schedule.map(convertToFrame),
+        name,
+        valuesToShow: item.valuesToShow,
+        start: start,
+        end: end,
+        progress: 100,
+        styles: {
+            backgroundColor: defaultColor,
+            progressColor: defaultColor,
+            backgroundSelectedColor: defaultColor,
+            progressSelectedColor: defaultColor,
+        },
+    };
+};
+/** Return a shallow copy, with the dates updated */
+const withNewDates = (p, start, end) => {
+    const kupDates = new KupDates();
+    const startDate = kupDates.formatToIsoDate(start);
+    const endDate = kupDates.formatToIsoDate(end);
+    const extra = { startDate, endDate };
+    return Object.assign(Object.assign({}, p), extra);
+};
+/**
+ * Calculate date range valid for each Gantt
+ * @param mainGanttItems
+ * @param timeUnit
+ * @param mainGanttDoubleView
+ * @param secondaryGanttItems
+ * @param preStepsCount
+ * @returns
+ */
+export const calculateDisplayedDateRange = (mainGanttItems, timeUnit, mainGanttDoubleView, secondaryGanttItems, preStepsCount) => {
+    const dates = ganttDateRangeFromGanttTask(mainGanttItems, timeUnit, preStepsCount !== null && preStepsCount !== void 0 ? preStepsCount : 1, mainGanttDoubleView);
+    if (secondaryGanttItems) {
+        const dates2 = ganttDateRangeFromDetail(secondaryGanttItems, timeUnit, preStepsCount !== null && preStepsCount !== void 0 ? preStepsCount : 1, mainGanttDoubleView);
+        if (dates2[0] < dates[0]) {
+            dates[0] = dates2[0];
+        }
+        if (dates2[1] > dates[1]) {
+            dates[1] = dates2[1];
+        }
+    }
+    return {
+        displayedStartDate: dates[0],
+        displayedEndDate: dates[1],
+    };
+};
+export const ganttDateRangeFromGanttTask = (tasks, viewMode, preStepsCount, showSecondaryDates) => {
+    const dates = [];
+    const kupDates = new KupDates();
+    tasks.forEach((item) => {
+        var _a;
+        dates.push({
+            start: kupDates.parseToDayStart(item.startDate),
+            end: kupDates.parseToDayEnd(item.endDate),
+            secondaryStart: kupDates.parseToDayStart(item.secondaryStartDate),
+            secondaryEnd: kupDates.parseToDayEnd(item.secondaryEndDate),
+        });
+        (_a = item.phases) === null || _a === void 0 ? void 0 : _a.forEach((phase) => {
+            dates.push({
+                start: kupDates.parseToDayStart(phase.startDate),
+                end: kupDates.parseToDayEnd(phase.endDate),
+                secondaryStart: kupDates.parseToDayStart(phase.secondaryStartDate),
+                secondaryEnd: kupDates.parseToDayEnd(phase.secondaryEndDate),
+            });
+        });
+    });
+    return ganttDateRangeGeneric(dates, viewMode, preStepsCount, showSecondaryDates, true);
+};
+export const ganttDateRangeGeneric = (dates, viewMode, preStepsCount, showSecondaryDates, realDates) => {
+    let newStartDate = dates.length > 0 ? dates[0].start : new Date();
+    let newEndDate = dates.length > 0 ? dates[0].end : new Date();
+    for (const d of dates) {
+        if (d.start < newStartDate) {
+            newStartDate = d.start;
+        }
+        if (d.end > newEndDate) {
+            newEndDate = d.end;
+        }
+        if (showSecondaryDates) {
+            if (d.secondaryStart && d.secondaryStart < newStartDate) {
+                newStartDate = d.secondaryStart;
+            }
+            if (d.secondaryEnd && d.secondaryEnd > newEndDate) {
+                newEndDate = d.secondaryEnd;
+            }
+        }
+    }
+    if (realDates) {
+        return [newStartDate, newEndDate];
+    }
+    switch (viewMode) {
+        case 'year':
+            newStartDate = addToDate(newStartDate, -1, 'year');
+            newStartDate = startOfDate(newStartDate, 'year');
+            newEndDate = addToDate(newEndDate, 1, 'year');
+            newEndDate = startOfDate(newEndDate, 'year');
+            break;
+        case 'month':
+            newStartDate = addToDate(newStartDate, -1 * preStepsCount, 'month');
+            newStartDate = startOfDate(newStartDate, 'month');
+            newEndDate = addToDate(newEndDate, 1, 'year');
+            newEndDate = startOfDate(newEndDate, 'year');
+            break;
+        case 'week':
+            newStartDate = startOfDate(newStartDate, 'day');
+            newStartDate = addToDate(getMonday(newStartDate), -7 * preStepsCount, 'day');
+            newEndDate = startOfDate(newEndDate, 'day');
+            newEndDate = addToDate(newEndDate, 1.5, 'month');
+            break;
+        case 'day':
+            newStartDate = startOfDate(newStartDate, 'day');
+            newStartDate = addToDate(newStartDate, -1 * preStepsCount, 'day');
+            newEndDate = startOfDate(newEndDate, 'day');
+            newEndDate = addToDate(newEndDate, 19, 'day');
+            break;
+        /*
+        case ViewMode.QuarterDay:
+          newStartDate = startOfDate(newStartDate, "day");
+          newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
+          newEndDate = startOfDate(newEndDate, "day");
+          newEndDate = addToDate(newEndDate, 66, "hour"); // 24(1 day)*3 - 6
+          break;
+        case ViewMode.HalfDay:
+          newStartDate = startOfDate(newStartDate, "day");
+          newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
+          newEndDate = startOfDate(newEndDate, "day");
+          newEndDate = addToDate(newEndDate, 108, "hour"); // 24(1 day)*5 - 12
+          break;
+        case ViewMode.Hour:
+          newStartDate = startOfDate(newStartDate, "hour");
+          newStartDate = addToDate(newStartDate, -1 * preStepsCount, "hour");
+          newEndDate = startOfDate(newEndDate, "day");
+          newEndDate = addToDate(newEndDate, 1, "day");
+          break;
+          */
+    }
+    return [newStartDate, newEndDate];
+};
+export const ganttDateRangeFromDetail = (details, viewMode, preStepsCount, showSecondaryDates) => {
+    const dates = [];
+    const kupDates = new KupDates();
+    details.forEach((item) => {
+        const scheduleItems = item.schedule;
+        if (scheduleItems) {
+            scheduleItems.forEach((item) => {
+                dates.push({
+                    start: kupDates.parseToDayStart(item.startDate),
+                    end: kupDates.parseToDayEnd(item.endDate),
+                    secondaryStart: undefined,
+                    secondaryEnd: undefined,
+                });
+            });
+        }
+    });
+    return ganttDateRangeGeneric(dates, viewMode, preStepsCount, showSecondaryDates, true);
+};
+export const addToDate = (date, quantity, scale) => {
+    const newDate = new Date(date.getFullYear() + (scale === 'year' ? quantity : 0), date.getMonth() + (scale === 'month' ? quantity : 0), date.getDate() + (scale === 'day' ? quantity : 0), date.getHours() + (scale === 'hour' ? quantity : 0), date.getMinutes() + (scale === 'minute' ? quantity : 0), date.getSeconds() + (scale === 'second' ? quantity : 0), date.getMilliseconds() + (scale === 'millisecond' ? quantity : 0));
+    return newDate;
+};
+export const startOfDate = (date, scale) => {
+    const scores = [
+        'millisecond',
+        'second',
+        'minute',
+        'hour',
+        'day',
+        'month',
+        'year',
+    ];
+    const shouldReset = (_scale) => {
+        const maxScore = scores.indexOf(scale);
+        return scores.indexOf(_scale) <= maxScore;
+    };
+    const newDate = new Date(date.getFullYear(), shouldReset('year') ? 0 : date.getMonth(), shouldReset('month') ? 1 : date.getDate(), shouldReset('day') ? 0 : date.getHours(), shouldReset('hour') ? 0 : date.getMinutes(), shouldReset('minute') ? 0 : date.getSeconds(), shouldReset('second') ? 0 : date.getMilliseconds());
+    return newDate;
+};
+/**
+ * Returns monday of current week
+ * @param date date for modify
+ */
+const getMonday = (date) => {
+    const day = date.getDay();
+    const diff = date.getDate() - day + (day === 0 ? -6 : 1); // adjust when day is sunday
+    return new Date(date.setDate(diff));
+};
+export const ganttDateRangeFromTask = (tasks, viewMode, preStepsCount, showSecondaryDates, mainGanttStartDate, mainGanttEndDate) => {
+    const dates = [];
+    tasks.forEach((item) => {
+        dates.push({
+            start: item.start,
+            end: item.end,
+            secondaryStart: item.secondaryStart,
+            secondaryEnd: item.secondaryEnd,
+        });
+    });
+    if (mainGanttStartDate && mainGanttEndDate) {
+        dates.push({
+            start: mainGanttStartDate,
+            end: mainGanttEndDate,
+            secondaryStart: undefined,
+            secondaryEnd: undefined,
+        });
+    }
+    return ganttDateRangeGeneric(dates, viewMode, preStepsCount, showSecondaryDates);
+};
+export const seedDates = (startDate, endDate, viewMode) => {
+    let currentDate = new Date(startDate);
+    const dates = [currentDate];
+    while (currentDate < endDate) {
+        switch (viewMode) {
+            case 'year':
+                currentDate = addToDate(currentDate, 1, 'year');
+                break;
+            case 'month':
+                currentDate = addToDate(currentDate, 1, 'month');
+                break;
+            case 'week':
+                currentDate = addToDate(currentDate, 7, 'day');
+                break;
+            case 'day':
+                currentDate = addToDate(currentDate, 1, 'day');
+                break;
+            /*
+            case ViewMode.HalfDay:
+              currentDate = addToDate(currentDate, 12, "hour");
+              break;
+            case ViewMode.QuarterDay:
+              currentDate = addToDate(currentDate, 6, "hour");
+              break;
+            case ViewMode.Hour:
+              currentDate = addToDate(currentDate, 1, "hour");
+              break;
+              */
+        }
+        dates.push(currentDate);
+    }
+    return dates;
+};