@sme.up/ketchup 9.2.0 → 9.4.0

package/dist/collection/components/kup-planner/utils/kup-gantt-calendar/kup-gantt-calendar.css

@@ -0,0 +1,31 @@
+.calendarBottomText {
+  text-anchor: middle;
+  fill: #333;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+}
+
+.calendarTopTick {
+  stroke: #e6e4e4;
+}
+
+.calendarTopText {
+  text-anchor: middle;
+  fill: #555;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+}
+
+.calendarHeader {
+  fill: #ffffff;
+  stroke: #e0e0e0;
+  stroke-width: 1.4;
+}

package/dist/collection/components/kup-planner/utils/kup-gantt-calendar/kup-gantt-calendar.js

@@ -0,0 +1,466 @@
+import { h } from "@stencil/core";
+import { getDaysInMonth, defaultDateTimeFormatters, } from "../kup-planner-time-formatter";
+export class KupGanttCalendar {
+    constructor() {
+        this.dateSetup = undefined;
+        this.locale = undefined;
+        this.rtl = undefined;
+        this.headerHeight = undefined;
+        this.columnWidth = undefined;
+        this.fontFamily = undefined;
+        this.fontSize = undefined;
+        this.dateTimeFormatters = undefined;
+        this.singleLineHeader = false;
+        this.currentDateIndicator = undefined;
+        this.svgWidth = undefined;
+        this.simplifiedHeader = undefined;
+    }
+    //---- Lifecycle hooks ----
+    componentWillLoad() {
+        this.simplifiedHeader =
+            this.singleLineHeader && this.dateSetup.viewMode !== 'year';
+    }
+    formatYear(date) {
+        var _a, _b;
+        return ((_a = this.dateTimeFormatters) === null || _a === void 0 ? void 0 : _a.year)
+            ? (_b = this.dateTimeFormatters) === null || _b === void 0 ? void 0 : _b.year(date, this.locale)
+            : defaultDateTimeFormatters.year(date, this.locale);
+    }
+    formatMonth(date) {
+        var _a, _b;
+        return ((_a = this.dateTimeFormatters) === null || _a === void 0 ? void 0 : _a.month)
+            ? (_b = this.dateTimeFormatters) === null || _b === void 0 ? void 0 : _b.month(date, this.locale)
+            : defaultDateTimeFormatters.month(date, this.locale);
+    }
+    formatMonthAndYear(date) {
+        var _a, _b;
+        return ((_a = this.dateTimeFormatters) === null || _a === void 0 ? void 0 : _a.monthAndYear)
+            ? (_b = this.dateTimeFormatters) === null || _b === void 0 ? void 0 : _b.monthAndYear(date, this.locale)
+            : defaultDateTimeFormatters.monthAndYear(date, this.locale);
+    }
+    formatWeek(date) {
+        var _a, _b;
+        return ((_a = this.dateTimeFormatters) === null || _a === void 0 ? void 0 : _a.week)
+            ? (_b = this.dateTimeFormatters) === null || _b === void 0 ? void 0 : _b.week(date, this.locale)
+            : defaultDateTimeFormatters.week(date, this.locale);
+    }
+    formatDay(date) {
+        var _a, _b;
+        return ((_a = this.dateTimeFormatters) === null || _a === void 0 ? void 0 : _a.day)
+            ? (_b = this.dateTimeFormatters) === null || _b === void 0 ? void 0 : _b.day(date, this.locale)
+            : defaultDateTimeFormatters.day(date, this.locale);
+    }
+    getCalendarValuesForYear() {
+        const topValues = [];
+        const bottomValues = [];
+        const topDefaultHeight = this.headerHeight * 0.5;
+        const dates = this.dateSetup.dates;
+        for (let i = 0; i < dates.length; i++) {
+            const date = dates[i];
+            const bottomValue = this.formatYear(date);
+            bottomValues.push(h("text", { key: bottomValue, y: this.headerHeight * 0.8, x: this.columnWidth * i + this.columnWidth * 0.5, class: "calendarBottomText" }, bottomValue));
+            if (i === 0 || date.getFullYear() !== dates[i - 1].getFullYear()) {
+                const topValue = date.getFullYear().toString();
+                let xText;
+                if (this.rtl) {
+                    xText = (6 + i + date.getFullYear() + 1) * this.columnWidth;
+                }
+                else {
+                    xText = (6 + i - date.getFullYear()) * this.columnWidth;
+                }
+                topValues.push({
+                    key: topValue,
+                    value: topValue,
+                    x1Line: this.columnWidth * i,
+                    y1Line: 0,
+                    y2Line: this.headerHeight,
+                    xText: xText,
+                    yText: topDefaultHeight * 0.9,
+                });
+            }
+        }
+        return [topValues, bottomValues];
+    }
+    getCalendarValuesForMonth() {
+        const topValues = [];
+        const bottomValues = [];
+        const topDefaultHeight = this.headerHeight * 0.5;
+        const dates = this.dateSetup.dates;
+        for (let i = 0; i < dates.length; i++) {
+            const date = dates[i];
+            const bottomValue = this.formatMonth(date);
+            bottomValues.push(h("text", { key: bottomValue + date.getFullYear(), y: this.headerHeight * 0.8, x: this.columnWidth * i + this.columnWidth * 0.5, class: "calendarBottomText" }, bottomValue));
+            if (i === 0 || date.getFullYear() !== dates[i - 1].getFullYear()) {
+                const topValue = this.formatYear(date);
+                let xText;
+                if (this.rtl) {
+                    xText = (6 + i + date.getMonth() + 1) * this.columnWidth;
+                }
+                else {
+                    xText = (6 + i - date.getMonth()) * this.columnWidth;
+                }
+                topValues.push({
+                    key: topValue,
+                    value: topValue,
+                    x1Line: this.columnWidth * i,
+                    y1Line: 0,
+                    y2Line: topDefaultHeight,
+                    xText: xText,
+                    yText: topDefaultHeight * 0.9,
+                });
+            }
+        }
+        return [topValues, bottomValues];
+    }
+    getCalendarValuesForWeek() {
+        const topValues = [];
+        const bottomValues = [];
+        let weeksCount = 1;
+        const topDefaultHeight = this.headerHeight * 0.5;
+        const dates = this.dateSetup.dates;
+        for (let i = dates.length - 1; i >= 0; i--) {
+            const date = dates[i];
+            let topValue = '';
+            if (i === 0 || date.getMonth() !== dates[i - 1].getMonth()) {
+                // top
+                topValue = this.formatMonthAndYear(date);
+            }
+            // bottom
+            const bottomValue = this.formatWeek(date);
+            bottomValues.push(h("text", { key: date.getTime(), y: this.headerHeight * 0.8, x: this.columnWidth * (i + +this.rtl), class: "calendarBottomText" }, bottomValue));
+            if (topValue) {
+                // if last day is new month
+                if (i !== dates.length - 1) {
+                    topValues.push({
+                        key: topValue,
+                        value: topValue,
+                        x1Line: this.columnWidth * i +
+                            weeksCount * this.columnWidth,
+                        y1Line: 0,
+                        y2Line: topDefaultHeight,
+                        xText: this.columnWidth * i +
+                            this.columnWidth * weeksCount * 0.5,
+                        yText: topDefaultHeight * 0.9,
+                    });
+                }
+                weeksCount = 0;
+            }
+            weeksCount++;
+        }
+        return [topValues, bottomValues];
+    }
+    getCalendarValuesForDay() {
+        const topValues = [];
+        const bottomValues = [];
+        const topDefaultHeight = this.headerHeight * 0.5;
+        const dates = this.dateSetup.dates;
+        for (let i = 0; i < dates.length; i++) {
+            const date = dates[i];
+            const bottomValue = this.formatDay(date);
+            bottomValues.push(h("text", { key: date.getTime(), y: this.headerHeight * 0.8, x: this.columnWidth * i + this.columnWidth * 0.5, class: "calendarBottomText" }, bottomValue));
+            if (i + 1 !== dates.length &&
+                date.getMonth() !== dates[i + 1].getMonth()) {
+                const topValue = this.formatMonth(date);
+                topValues.push({
+                    key: topValue + date.getFullYear(),
+                    value: topValue,
+                    x1Line: this.columnWidth * (i + 1),
+                    y1Line: 0,
+                    y2Line: topDefaultHeight,
+                    xText: this.columnWidth * (i + 1) -
+                        getDaysInMonth(date.getMonth(), date.getFullYear()) *
+                            this.columnWidth *
+                            0.5,
+                    yText: topDefaultHeight * 0.9,
+                });
+            }
+        }
+        return [topValues, bottomValues];
+    }
+    getTopAndBottomValues() {
+        switch (this.dateSetup.viewMode) {
+            case 'day':
+                return this.getCalendarValuesForDay();
+            case 'week':
+                return this.getCalendarValuesForWeek();
+            case 'month':
+                return this.getCalendarValuesForMonth();
+            case 'year':
+                return this.getCalendarValuesForYear();
+            default:
+                break;
+        }
+    }
+    render() {
+        this.simplifiedHeader =
+            this.singleLineHeader && this.dateSetup.viewMode !== 'year';
+        const [topValues, bottomValues] = this.getTopAndBottomValues();
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: this.svgWidth, height: this.headerHeight }, h("g", { class: "calendar", "font-size": this.fontSize, "font-family": this.fontFamily }, h("rect", { x: 0, y: 0, width: this.columnWidth * this.dateSetup.dates.length, height: this.headerHeight, class: "calendarHeader" }), this.simplifiedHeader ? null : bottomValues, this.simplifiedHeader
+            ? topValues.map((topValue) => (h("g", { class: "calendarTop" }, h("line", { x1: topValue.x1Line, y1: topValue.y2Line * 2, x2: topValue.x1Line, y2: topValue.y2Line, class: "calendarTopTick", key: topValue.value + 'line' }), h("text", { key: topValue.value + 'text', y: topValue.yText, x: topValue.xText, class: "calendarTopText" }, topValue.value))))
+            : topValues.map((topValue) => (h("g", { class: "calendarTop" }, h("line", { x1: topValue.x1Line, y1: topValue.y1Line, x2: topValue.x1Line, y2: topValue.y2Line, class: "calendarTopTick", key: topValue.value + 'line' }), h("text", { key: topValue.value + 'text', y: topValue.yText, x: topValue.xText, class: "calendarTopText" }, topValue.value)))), this.currentDateIndicator && (
+        // current date indicator
+        h("circle", { fill: this.currentDateIndicator.color, cx: this.currentDateIndicator.x + 2.5, cy: this.headerHeight - 8, r: "8" })))));
+    }
+    static get is() { return "kup-gantt-calendar"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kup-gantt-calendar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kup-gantt-calendar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dateSetup": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerCalendarProps['dateSetup']",
+                    "resolved": "KupPlannerDateSetup",
+                    "references": {
+                        "KupPlannerCalendarProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerCalendarProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerCalendarProps['locale']",
+                    "resolved": "string",
+                    "references": {
+                        "KupPlannerCalendarProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerCalendarProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "locale",
+                "reflect": false
+            },
+            "rtl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerCalendarProps['rtl']",
+                    "resolved": "boolean",
+                    "references": {
+                        "KupPlannerCalendarProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerCalendarProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "rtl",
+                "reflect": false
+            },
+            "headerHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerCalendarProps['headerHeight']",
+                    "resolved": "number",
+                    "references": {
+                        "KupPlannerCalendarProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerCalendarProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "header-height",
+                "reflect": false
+            },
+            "columnWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerCalendarProps['columnWidth']",
+                    "resolved": "number",
+                    "references": {
+                        "KupPlannerCalendarProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerCalendarProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "column-width",
+                "reflect": false
+            },
+            "fontFamily": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerCalendarProps['fontFamily']",
+                    "resolved": "string",
+                    "references": {
+                        "KupPlannerCalendarProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerCalendarProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "font-family",
+                "reflect": false
+            },
+            "fontSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerCalendarProps['fontSize']",
+                    "resolved": "string",
+                    "references": {
+                        "KupPlannerCalendarProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerCalendarProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "font-size",
+                "reflect": false
+            },
+            "dateTimeFormatters": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerCalendarProps['dateTimeFormatters']",
+                    "resolved": "{ year?: KupPlannerDateTimeFormatter; month?: KupPlannerDateTimeFormatter; monthAndYear?: KupPlannerDateTimeFormatter; week?: KupPlannerDateTimeFormatter; day?: KupPlannerDateTimeFormatter; hour?: KupPlannerDateTimeFormatter; dayAndMonth?: KupPlannerDateTimeFormatter; }",
+                    "references": {
+                        "KupPlannerCalendarProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerCalendarProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "singleLineHeader": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerCalendarProps['singleLineHeader']",
+                    "resolved": "boolean",
+                    "references": {
+                        "KupPlannerCalendarProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerCalendarProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "single-line-header",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "currentDateIndicator": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerCalendarProps['currentDateIndicator']",
+                    "resolved": "KupPlannerCurrentDateIndicator",
+                    "references": {
+                        "KupPlannerCalendarProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerCalendarProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "svgWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "svg-width",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "simplifiedHeader": {}
+        };
+    }
+}

package/dist/collection/components/kup-planner/utils/kup-grid-renderer/kup-grid-renderer.css

@@ -0,0 +1,60 @@
+.gridRow {
+  fill: #fff;
+}
+
+.gridRowLine {
+  stroke: transparent;
+}
+
+.gridTick {
+  stroke: #e6e4e4;
+}
+
+.barHandle {
+  fill: #ddd;
+  cursor: ew-resize;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.barBackground {
+  user-select: none;
+  stroke-width: 0;
+}
+
+.barWrapper {
+  cursor: pointer;
+  outline: none;
+}
+
+.task-wrapper {
+  outline: none !important;
+}
+
+.barWrapper:hover .barHandle {
+  visibility: visible;
+  opacity: 1;
+}
+
+.barLabel {
+  fill: #fff;
+  text-anchor: middle;
+  font-weight: lighter;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+}
+
+.barLabelOutside {
+  fill: #555;
+  text-anchor: start;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+}