@sme.up/ketchup 9.2.0 → 9.3.0

package/dist/collection/components/kup-planner/utils/kup-tooltip/kup-standard-tooltip.js

@@ -0,0 +1,82 @@
+import { h } from "@stencil/core";
+export class StandardTooltipContent {
+    constructor() {
+        this.task = undefined;
+        this.fontSize = undefined;
+        this.fontFamily = undefined;
+    }
+    render() {
+        return (h("div", { class: "tooltipDefaultContainer", style: { fontSize: this.fontSize, fontFamily: this.fontFamily } }, h("b", { style: { fontSize: `${parseInt(this.fontSize) + 6}px` } }, `${this.task.name}: ${this.task.start.getDate()}-${this.task.start.getMonth() + 1}-${this.task.start.getFullYear()} - ${this.task.end.getDate()}-${this.task.end.getMonth() + 1}-${this.task.end.getFullYear()}`), this.task.end.getTime() - this.task.start.getTime() !== 0 && (h("p", { class: "tooltipDefaultContainerParagraph" }, `Duration: ${~~((this.task.end.getTime() - this.task.start.getTime()) / (1000 * 60 * 60 * 24))} day(s)`)), h("p", { class: "tooltipDefaultContainerParagraph" }, !!this.task.progress && `Progress: ${this.task.progress} %`)));
+    }
+    static get is() { return "kup-standard-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kup-tooltip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kup-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "task": {
+                "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": ""
+                }
+            },
+            "fontSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "font-size",
+                "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
+            }
+        };
+    }
+}

package/dist/collection/components/kup-planner/utils/kup-tooltip/kup-tooltip.css

@@ -0,0 +1,30 @@
+.tooltipDefaultContainer {
+  background: #fff;
+  padding: 12px;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+}
+
+.tooltipDefaultContainerParagraph {
+  font-size: 12px;
+  margin-bottom: 6px;
+  color: #666;
+}
+
+.tooltipDetailsContainer {
+  position: absolute;
+  display: flex;
+  flex-shrink: 0;
+  pointer-events: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.tooltipDetailsContainerHidden {
+  visibility: hidden;
+  position: absolute;
+  display: flex;
+  pointer-events: none;
+}

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

@@ -0,0 +1,362 @@
+import { h } from "@stencil/core";
+export class Tooltip {
+    constructor() {
+        this.task = undefined;
+        this.rowHeight = undefined;
+        this.rtl = undefined;
+        this.svgContainerHeight = undefined;
+        this.svgContainerWidth = undefined;
+        this.scrollX = undefined;
+        this.scrollY = undefined;
+        this.arrowIndent = undefined;
+        this.fontSize = undefined;
+        this.fontFamily = undefined;
+        this.headerHeight = undefined;
+        this.taskListWidth = undefined;
+        this.TooltipContent = undefined;
+        this.svgWidth = undefined;
+        this.relatedY = 0;
+        this.relatedX = 0;
+    }
+    componentWillLoad() {
+        this.calculateTooltipPosition();
+    }
+    calculateTooltipPosition() {
+        if (this.rootElement) {
+            const tooltipHeight = this.rootElement.offsetHeight * 1.1;
+            const tooltipWidth = this.rootElement.offsetWidth * 1.1;
+            let newRelatedY = this.task.index * this.rowHeight - this.scrollY + this.headerHeight;
+            let newRelatedX;
+            if (this.rtl) {
+                newRelatedX = this.task.x1 - this.arrowIndent * 1.5 - tooltipWidth - this.scrollX;
+                if (newRelatedX < 0) {
+                    newRelatedX = this.task.x2 + this.arrowIndent * 1.5 - this.scrollX;
+                }
+                const tooltipLeftmostPoint = tooltipWidth + newRelatedX;
+                if (tooltipLeftmostPoint > this.svgContainerWidth) {
+                    newRelatedX = this.svgContainerWidth - tooltipWidth;
+                    newRelatedY += this.rowHeight;
+                }
+            }
+            else {
+                newRelatedX = this.task.x2 + this.arrowIndent * 1.5 + this.taskListWidth - this.scrollX;
+                const tooltipLeftmostPoint = tooltipWidth + newRelatedX;
+                const fullChartWidth = this.taskListWidth + this.svgContainerWidth;
+                if (tooltipLeftmostPoint > fullChartWidth) {
+                    newRelatedX = this.task.x1 + this.taskListWidth - this.arrowIndent * 1.5 - this.scrollX - tooltipWidth;
+                }
+                if (newRelatedX < this.taskListWidth) {
+                    newRelatedX = this.svgContainerWidth + this.taskListWidth - tooltipWidth;
+                    newRelatedY += this.rowHeight;
+                }
+            }
+            const tooltipLowerPoint = tooltipHeight + newRelatedY - this.scrollY;
+            if (tooltipLowerPoint > this.svgContainerHeight - this.scrollY) {
+                newRelatedY = this.svgContainerHeight - tooltipHeight;
+            }
+            this.relatedY = newRelatedY;
+            this.relatedX = newRelatedX;
+        }
+    }
+    render() {
+        return (h("div", { class: this.relatedX ? 'tooltipDetailsContainer' : 'tooltipDetailsContainerHidden', style: { left: `${this.relatedX}px`, top: `${this.relatedY}px` } }, h(this.TooltipContent, { task: this.task, fontSize: this.fontSize, fontFamily: this.fontFamily })));
+    }
+    static get is() { return "kup-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kup-tooltip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kup-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "task": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupPlannerBarTask",
+                    "resolved": "KupPlannerBarTask",
+                    "references": {
+                        "KupPlannerBarTask": {
+                            "location": "import",
+                            "path": "../../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerBarTask"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            },
+            "rowHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "row-height",
+                "reflect": false
+            },
+            "rtl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "rtl",
+                "reflect": false
+            },
+            "svgContainerHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "svg-container-height",
+                "reflect": false
+            },
+            "svgContainerWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "svg-container-width",
+                "reflect": false
+            },
+            "scrollX": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "scroll-x",
+                "reflect": false
+            },
+            "scrollY": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "scroll-y",
+                "reflect": false
+            },
+            "arrowIndent": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "arrow-indent",
+                "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
+            },
+            "fontFamily": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "font-family",
+                "reflect": false
+            },
+            "headerHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "header-height",
+                "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
+            },
+            "TooltipContent": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "tooltip-content",
+                "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
+            }
+        };
+    }
+    static get states() {
+        return {
+            "relatedY": {},
+            "relatedX": {}
+        };
+    }
+    static get elementRef() { return "rootElement"; }
+    static get watchers() {
+        return [{
+                "propName": "task",
+                "methodName": "calculateTooltipPosition"
+            }, {
+                "propName": "arrowIndent",
+                "methodName": "calculateTooltipPosition"
+            }, {
+                "propName": "scrollX",
+                "methodName": "calculateTooltipPosition"
+            }, {
+                "propName": "scrollY",
+                "methodName": "calculateTooltipPosition"
+            }, {
+                "propName": "headerHeight",
+                "methodName": "calculateTooltipPosition"
+            }, {
+                "propName": "taskListWidth",
+                "methodName": "calculateTooltipPosition"
+            }, {
+                "propName": "rowHeight",
+                "methodName": "calculateTooltipPosition"
+            }, {
+                "propName": "svgContainerHeight",
+                "methodName": "calculateTooltipPosition"
+            }, {
+                "propName": "svgContainerWidth",
+                "methodName": "calculateTooltipPosition"
+            }, {
+                "propName": "rtl",
+                "methodName": "calculateTooltipPosition"
+            }];
+    }
+}

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

@@ -0,0 +1,31 @@
+.scroll {
+  overflow: hidden auto;
+  width: 1rem;
+  flex-shrink: 0;
+  /*firefox*/
+  scrollbar-width: thin;
+}
+
+.scroll::-webkit-scrollbar {
+  width: 1.1rem;
+  height: 1.1rem;
+}
+
+.scroll::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.scroll::-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;
+}
+
+.scroll::-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;
+}

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

@@ -0,0 +1,170 @@
+import { h } from "@stencil/core";
+export class KupVerticalScroll {
+    constructor() {
+        this.scrollNumber = undefined;
+        this.ganttHeight = undefined;
+        this.ganttFullHeight = undefined;
+        this.headerHeight = undefined;
+        this.rtl = undefined;
+        this.verticalScroll = undefined;
+    }
+    //---- Lifecycle hooks ----
+    componentDidLoad() {
+        setTimeout(() => {
+            this.updateScroll();
+        }, 50);
+    }
+    /*-------------------------------------------------*/
+    /*                   W A T C H E R S               */
+    /*-------------------------------------------------*/
+    updateScroll() {
+        let id;
+        if (this.scrollRef) {
+            const wrap = this.scrollRef;
+            const setScrollTop = () => {
+                wrap.scrollTop = this.scrollNumber;
+            };
+            id = setTimeout(setScrollTop, 50);
+        }
+        return () => {
+            clearTimeout(id);
+        };
+    }
+    render() {
+        return (h("div", { style: {
+                height: `${this.ganttHeight}px`,
+                marginTop: `${this.headerHeight}px`,
+                marginLeft: this.rtl ? '' : '-1rem',
+            }, class: "scroll", onScroll: this.verticalScroll, ref: (el) => (this.scrollRef = el) }, h("div", { style: {
+                height: `${this.ganttFullHeight}px`,
+                width: '1px',
+            } })));
+    }
+    static get is() { return "kup-vertical-scroll"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kup-vertical-scroll.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kup-vertical-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
+            },
+            "ganttHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "gantt-height",
+                "reflect": false
+            },
+            "ganttFullHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "gantt-full-height",
+                "reflect": false
+            },
+            "headerHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "header-height",
+                "reflect": false
+            },
+            "rtl": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "rtl",
+                "reflect": false
+            },
+            "verticalScroll": {
+                "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 elementRef() { return "rootElement"; }
+    static get watchers() {
+        return [{
+                "propName": "scrollNumber",
+                "methodName": "updateScroll"
+            }];
+    }
+}