@sme.up/ketchup 9.2.0 → 9.3.0

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

@@ -0,0 +1,215 @@
+import { h } from "@stencil/core";
+export class TaskGantt {
+    constructor() {
+        this.gridProps = undefined;
+        this.calendarProps = undefined;
+        this.barProps = undefined;
+        this.taskGanttRef = undefined;
+        this.ganttHeight = undefined;
+        this.scrollY = undefined;
+        this.scrollX = undefined;
+    }
+    /*-------------------------------------------------*/
+    /*                   W A T C H E R S               */
+    /*-------------------------------------------------*/
+    updateScrollX() {
+        setTimeout(() => {
+            this.verticalGanttContainerRef &&
+                (this.verticalGanttContainerRef.scrollLeft = this.scrollX);
+        }, 30);
+    }
+    updateScrollY() {
+        setTimeout(() => {
+            this.horizontalContainerRef &&
+                (this.horizontalContainerRef.scrollTop = this.scrollY);
+        }, 30);
+    }
+    //---- Lifecycle hooks ----
+    componentDidLoad() {
+        this.updateScrollX();
+        this.updateScrollY();
+    }
+    render() {
+        const newBarProps = Object.assign(Object.assign({}, this.barProps), { gridProps: this.gridProps });
+        return (h("div", { class: "ganttVerticalContainer", ref: (el) => (this.verticalGanttContainerRef = el), dir: "ltr" }, h("kup-gantt-calendar", { dateSetup: this.calendarProps.dateSetup, locale: this.calendarProps.locale, rtl: this.calendarProps.rtl, headerHeight: this.calendarProps.headerHeight, columnWidth: this.calendarProps.columnWidth, fontFamily: this.calendarProps.fontFamily, fontSize: this.calendarProps.fontSize, dateTimeFormatters: this.calendarProps.dateTimeFormatters, singleLineHeader: this.calendarProps.singleLineHeader, currentDateIndicator: this.calendarProps.currentDateIndicator, svgWidth: this.gridProps.svgWidth }), h("div", { ref: (el) => (this.horizontalContainerRef = el), class: "horizontalContainer", style: this.ganttHeight
+                ? {
+                    height: `${this.ganttHeight}px`,
+                    width: `${this.gridProps.svgWidth}px`,
+                }
+                : { width: `${this.gridProps.svgWidth}px` } }, h("kup-grid-renderer", Object.assign({}, newBarProps)))));
+    }
+    static get is() { return "kup-task-gantt"; }
+    static get properties() {
+        return {
+            "gridProps": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttProps['gridProps']",
+                    "resolved": "{ tasks: KupPlannerTask[]; dates: Date[]; svgWidth: number; rowHeight: number; columnWidth: number; todayColor: string; rtl: boolean; }",
+                    "references": {
+                        "KupPlannerTaskGanttProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "calendarProps": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttProps['calendarProps']",
+                    "resolved": "{ dateSetup: KupPlannerDateSetup; locale: string; viewMode: KupPlannerViewMode; rtl: boolean; headerHeight: number; columnWidth: number; fontFamily: string; fontSize: string; dateTimeFormatters?: KupPlannerDateTimeFormatters; singleLineHeader: boolean; currentDateIndicator?: KupPlannerCurrentDateIndicator; }",
+                    "references": {
+                        "KupPlannerTaskGanttProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "barProps": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttProps['barProps']",
+                    "resolved": "{ tasks: KupPlannerBarTask[]; dates: Date[]; ganttEvent: KupPlannerGanttEvent; selectedTask: KupPlannerBarTask; rowHeight: number; columnWidth: number; timeStep: number; svg?: SVGSVGElement; svgWidth: number; taskHeight: number; arrowColor: string; arrowIndent: number; fontSize: string; fontFamily: string; rtl: boolean; ganttHeight: number; hideLabel?: boolean; showSecondaryDates?: boolean; currentDateIndicator?: KupPlannerCurrentDateIndicator; projection?: { x0: number; xf: number; color: string; }; readOnly: boolean; setGanttEvent: (value: KupPlannerGanttEvent) => void; setFailedTask: (value: KupPlannerBarTask) => void; setSelectedTask: (taskId: string) => void; } & KupPlannerEventOption",
+                    "references": {
+                        "KupPlannerTaskGanttProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "taskGanttRef": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttProps['taskGanttRef']",
+                    "resolved": "HTMLDivElement",
+                    "references": {
+                        "KupPlannerTaskGanttProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "ganttHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttProps['ganttHeight']",
+                    "resolved": "number",
+                    "references": {
+                        "KupPlannerTaskGanttProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "gantt-height",
+                "reflect": false
+            },
+            "scrollY": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttProps['scrollY']",
+                    "resolved": "number",
+                    "references": {
+                        "KupPlannerTaskGanttProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "scroll-y",
+                "reflect": false
+            },
+            "scrollX": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "KupPlannerTaskGanttProps['scrollX']",
+                    "resolved": "number",
+                    "references": {
+                        "KupPlannerTaskGanttProps": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTaskGanttProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "scroll-x",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "rootElement"; }
+    static get watchers() {
+        return [{
+                "propName": "scrollX",
+                "methodName": "updateScrollX"
+            }, {
+                "propName": "verticalGanttContainerRef",
+                "methodName": "updateScrollX"
+            }, {
+                "propName": "scrollY",
+                "methodName": "updateScrollY"
+            }, {
+                "propName": "horizontalContainerRef",
+                "methodName": "updateScrollY"
+            }];
+    }
+}

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

@@ -0,0 +1,112 @@
+import { h } from "@stencil/core";
+export class KupTaskListHeader {
+    constructor() {
+        this.headerHeight = undefined;
+        this.fontFamily = undefined;
+        this.fontSize = undefined;
+        this.rowWidth = undefined;
+    }
+    render() {
+        return (h("div", { class: "ganttTable", style: {
+                fontFamily: this.fontFamily,
+                fontSize: this.fontSize,
+            } }, h("div", { class: "ganttTable_Header", style: {
+                height: `${this.headerHeight - 2}px`,
+            } }, h("div", { class: "ganttTable_HeaderItem", style: {
+                minWidth: this.rowWidth,
+            } }, "\u00A0Name"), h("div", { class: "ganttTable_HeaderSeparator", style: {
+                height: `${this.headerHeight * 0.5}px`,
+                marginTop: `${this.headerHeight * 0.2}px`,
+            } }), h("div", { class: "ganttTable_HeaderItem", style: {
+                minWidth: this.rowWidth,
+            } }, "\u00A0From"), h("div", { class: "ganttTable_HeaderSeparator", style: {
+                height: `${this.headerHeight * 0.5}px`,
+                marginTop: `${this.headerHeight * 0.25}px`,
+            } }), h("div", { class: "ganttTable_HeaderItem", style: {
+                minWidth: this.rowWidth,
+            } }, "\u00A0To"))));
+    }
+    static get is() { return "kup-task-list-header"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kup-task-list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kup-task-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "headerHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "header-height",
+                "reflect": false
+            },
+            "fontFamily": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "font-family",
+                "reflect": false
+            },
+            "fontSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "font-size",
+                "reflect": false
+            },
+            "rowWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "row-width",
+                "reflect": false
+            }
+        };
+    }
+}

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

@@ -0,0 +1,226 @@
+import { h } from "@stencil/core";
+export class TaskListTableDefault {
+    constructor() {
+        this.dateTimeOptions = {
+            weekday: 'short',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+        };
+        this.rowHeight = undefined;
+        this.rowWidth = undefined;
+        this.fontFamily = undefined;
+        this.fontSize = undefined;
+        this.locale = undefined;
+        this.tasks = undefined;
+        this.selectedTaskId = undefined;
+        this.expandedTasks = new Set();
+        this.setSelectedTask = undefined;
+        this.expanderClick = undefined;
+    }
+    toLocaleDateString(date) {
+        return date.toLocaleDateString(this.locale, this.dateTimeOptions);
+    }
+    render() {
+        return (h("div", { class: "taskListWrapper", style: {
+                fontFamily: this.fontFamily,
+                fontSize: this.fontSize,
+            } }, this.tasks.map((task) => (h("div", { class: {
+                taskListTableRow: true,
+                expanded: this.expandedTasks.has(task.id),
+            }, style: { height: `${this.rowHeight}px` }, key: `${task.id}row` }, h("div", { class: "taskListCell", style: {
+                minWidth: this.rowWidth,
+                maxWidth: this.rowWidth,
+            }, title: task.name }, h("div", { class: "taskListNameWrapper" }, h("div", { class: {
+                taskListExpander: true,
+                expanded: this.expandedTasks.has(task.id),
+            }, onClick: () => this.expanderClick(task) }, this.expandedTasks.has(task.id)
+            ? '▼'
+            : '▶'), h("div", null, task.name))), h("div", { class: "taskListCell", style: {
+                minWidth: this.rowWidth,
+                maxWidth: this.rowWidth,
+            } }, "\u00A0", this.toLocaleDateString(task.start)), h("div", { class: "taskListCell", style: {
+                minWidth: this.rowWidth,
+                maxWidth: this.rowWidth,
+            } }, "\u00A0", this.toLocaleDateString(task.end)))))));
+    }
+    static get is() { return "kup-task-list-table"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kup-task-list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kup-task-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "rowHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "row-height",
+                "reflect": false
+            },
+            "rowWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "row-width",
+                "reflect": false
+            },
+            "fontFamily": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "font-family",
+                "reflect": false
+            },
+            "fontSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "font-size",
+                "reflect": false
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "locale",
+                "reflect": false
+            },
+            "tasks": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerTask[]",
+                    "resolved": "KupPlannerTask[]",
+                    "references": {
+                        "KupPlannerTask": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTask"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "selectedTaskId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "selected-task-id",
+                "reflect": false
+            },
+            "setSelectedTask": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(taskId: string) => void",
+                    "resolved": "(taskId: string) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "expanderClick": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(task: KupPlannerTask) => void",
+                    "resolved": "(task: KupPlannerTask) => void",
+                    "references": {
+                        "KupPlannerTask": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerTask"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "expandedTasks": {}
+        };
+    }
+}

package/dist/collection/components/kup-planner/utils/kup-task-list/kup-task-list.css

@@ -0,0 +1,67 @@
+.tasks {
+  border-radius: 8px;
+  background: #efefef;
+  margin: 12px;
+  padding: 12px;
+}
+
+.taskListWrapper {
+  display: table;
+  border-bottom: #e6e4e4 1px solid;
+  border-left: #e6e4e4 1px solid;
+}
+
+.taskListTableRow {
+  display: table-row;
+  text-overflow: ellipsis;
+}
+
+.taskListCell {
+  display: table-cell;
+  vertical-align: middle;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.taskListNameWrapper {
+  display: flex;
+}
+
+.taskListExpander {
+  color: rgb(86, 86, 86);
+  font-size: 0.6rem;
+  padding: 0.15rem 0.2rem 0 0.2rem;
+  user-select: none;
+  cursor: pointer;
+}
+
+.taskListEmptyExpander {
+  font-size: 0.6rem;
+  padding-left: 1rem;
+  user-select: none;
+}
+
+.ganttTable {
+  display: table;
+  border-bottom: #e6e4e4 1px solid;
+  border-top: #e6e4e4 1px solid;
+  border-left: #e6e4e4 1px solid;
+}
+
+.ganttTable_Header {
+  display: table-row;
+  list-style: none;
+}
+
+.ganttTable_HeaderSeparator {
+  border-right: 1px solid rgb(196, 196, 196);
+  opacity: 1;
+  margin-left: -2px;
+}
+
+.ganttTable_HeaderItem {
+  display: table-cell;
+  vertical-align: -webkit-baseline-middle;
+  vertical-align: middle;
+}