@sme.up/ketchup 9.6.2 → 9.6.4

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

@@ -1,3 +1,131 @@
+.kup-body-compact-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+}
+
+.kup-body-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+}
+
+.kup-code-01 {
+  font-family: var(--kup-font-family-monospace);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+}
+
+.kup-label-01 {
+  font-family: var(--kup-font-family);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+}
+
+.kup-caption-02 {
+  font-family: var(--kup-font-family);
+  font-size: 12px;
+  line-height: 15px;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+.kup-caption-01 {
+  font-family: var(--kup-font-family);
+  font-size: 10px;
+  line-height: 13px;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+
+.kup-small-label-01 {
+  font-family: var(--kup-font-family);
+  font-size: 6px;
+  line-height: 9px;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+
+.kup-heading-compact-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 600;
+  letter-spacing: 0.16px;
+}
+
+.kup-heading-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  letter-spacing: 0.16px;
+}
+
+.kup-heading-02 {
+  font-family: var(--kup-font-family);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+.kup-heading-03 {
+  font-family: var(--kup-font-family);
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.kup-heading-04 {
+  font-family: var(--kup-font-family);
+  font-size: 28px;
+  line-height: 36px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.kup-heading-05 {
+  font-family: var(--kup-font-family);
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-06 {
+  font-family: var(--kup-font-family);
+  font-size: 42px;
+  line-height: 50px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-07 {
+  font-family: var(--kup-font-family);
+  font-size: 54px;
+  line-height: 64px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-08 {
+  font-family: var(--kup-font-family);
+  font-size: 54px;
+  line-height: 64px;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
 .gridRow {
   fill: #fff;
 }

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

@@ -364,13 +364,13 @@ export class KupGridRenderer {
             }
             tickX += this.columnWidth;
         }
-        return (h("svg", { key: '453f06f9849218010409d444adb13500f22b6cfa', xmlns: "http://www.w3.org/2000/svg", width: this.gridProps.svgWidth, height: `${this.rowHeight * this.tasks.length}px`, "font-family": this.fontFamily, ref: (el) => (this.svg = el) }, h("g", { key: 'a671a9e0c1c44ef1b3d86d679d68dda934246e59', class: "grid" }, h("g", { key: '3741633c839e757fa4d4cc0999d9e34ad5284173', class: "rows" }, gridRows), h("g", { key: '34bdba123cff205d0769e6492055a72f51b85bd7', class: "rowLines" }, rowLines), h("g", { key: '0d2b321b587e8cc4a65ac356ea1a5903c1fa61f6', class: "ticks" }, ticks)), h("g", { key: '891e706099f2c83dcabf5a0bb62a2c8139c10ac1', class: "content" }, this.currentDateIndicator && (h("rect", { fill: this.currentDateIndicator.color, x: this.currentDateIndicator.x + 1.5, y: "0", width: "2", height: "100%" })), this.projection && (h("rect", { fill: this.projection.color, x: this.projection.x0, y: "0", width: this.projection.xf - this.projection.x0, height: "100%", "fill-opacity": "0.35" })), h("g", { key: '6e36b71942a8619b800210d189629c0856cb57f6', class: "arrows", fill: this.arrowColor, stroke: this.arrowColor }, this.tasks.map((task) => {
+        return (h("svg", { key: '520a50739aa00f72aeb4e43ba03a3b5f126e289a', xmlns: "http://www.w3.org/2000/svg", width: this.gridProps.svgWidth, height: `${this.rowHeight * this.tasks.length}px`, "font-family": this.fontFamily, ref: (el) => (this.svg = el) }, h("g", { key: '2681f573ab6f0c7ae9c9f316b77a05c9a634e100', class: "grid" }, h("g", { key: '085ea28cdbb6ee28354cd255c0f1b00a56c5588f', class: "rows" }, gridRows), h("g", { key: 'cb02f6b77af725f514f4eaf63624ff4ace5cf9e2', class: "rowLines" }, rowLines), h("g", { key: 'bed7254aeb03e0fbd1ab3e9d40c14f84b346bffc', class: "ticks" }, ticks)), h("g", { key: 'b22b4e0c75d7cef3336a8e069b243d6296200272', class: "content" }, this.currentDateIndicator && (h("rect", { fill: this.currentDateIndicator.color, x: this.currentDateIndicator.x + 1.5, y: "0", width: "2", height: "100%" })), this.projection && (h("rect", { fill: this.projection.color, x: this.projection.x0, y: "0", width: this.projection.xf - this.projection.x0, height: "100%", "fill-opacity": "0.35" })), h("g", { key: '594dd1e9af2f037f0599019a3082a58115907d3b', class: "arrows", fill: this.arrowColor, stroke: this.arrowColor }, this.tasks.map((task) => {
             return task.barChildren.map((child) => {
                 if (task.type !== 'timeline') {
                     this.renderKupArrow(task, child);
                 }
             });
-        })), h("g", { key: '38643adf911e2b0ff25b0ffe4f8c8c645171c55d', class: "bar", "font-family": this.fontFamily, "font-size": this.fontSize }, this.tasks.map((task) => {
+        })), h("g", { key: '9d41cb46ff1373cf3a34fcebf7f9bc02ab961a8b', class: "bar", "font-family": this.fontFamily, "font-size": this.fontSize }, this.tasks.map((task) => {
             const forbidResize = task.type === 'project';
             return (h("g", { onKeyDown: (e) => {
                     switch (e.key) {

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

@@ -1,3 +1,131 @@
+.kup-body-compact-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+}
+
+.kup-body-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+}
+
+.kup-code-01 {
+  font-family: var(--kup-font-family-monospace);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+}
+
+.kup-label-01 {
+  font-family: var(--kup-font-family);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+}
+
+.kup-caption-02 {
+  font-family: var(--kup-font-family);
+  font-size: 12px;
+  line-height: 15px;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+.kup-caption-01 {
+  font-family: var(--kup-font-family);
+  font-size: 10px;
+  line-height: 13px;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+
+.kup-small-label-01 {
+  font-family: var(--kup-font-family);
+  font-size: 6px;
+  line-height: 9px;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+
+.kup-heading-compact-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 600;
+  letter-spacing: 0.16px;
+}
+
+.kup-heading-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  letter-spacing: 0.16px;
+}
+
+.kup-heading-02 {
+  font-family: var(--kup-font-family);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+.kup-heading-03 {
+  font-family: var(--kup-font-family);
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.kup-heading-04 {
+  font-family: var(--kup-font-family);
+  font-size: 28px;
+  line-height: 36px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.kup-heading-05 {
+  font-family: var(--kup-font-family);
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-06 {
+  font-family: var(--kup-font-family);
+  font-size: 42px;
+  line-height: 50px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-07 {
+  font-family: var(--kup-font-family);
+  font-size: 54px;
+  line-height: 64px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-08 {
+  font-family: var(--kup-font-family);
+  font-size: 54px;
+  line-height: 64px;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
 .scrollWrapper {
   overflow: auto;
   max-width: 100%;

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

@@ -31,11 +31,11 @@ export class HorizontalScroll {
     render() {
         var _a, _b;
         const w = (_b = ((_a = this.taskListTrueRef) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) + 24 * 1.5) !== null && _b !== void 0 ? _b : 0; // 24 * 2 is the sum of padding and margin for both list and gantt, multiplied by 1.5 cause we need to add the other half to the right
-        return (h("div", { key: '6900ce2b4ff33f7f48403c085861d25d8a55ae51', dir: "ltr", style: {
+        return (h("div", { key: 'a560e1597e9122df0d98d0508ace8ec5c04a5513', dir: "ltr", style: {
                 margin: this.rtl
                     ? `0px ${w}px 0px 12px`
                     : `0px 12px 0px ${w}px`,
-            }, class: "scrollWrapper", "data-scrollx": "true", onScroll: this.horizontalScroll }, h("div", { key: 'd5cd1e9ec9d4dc2a1c249eef3c485dc3eb9f82ad', style: { width: `${this.svgWidth}px` }, class: "scroll" })));
+            }, class: "scrollWrapper", "data-scrollx": "true", onScroll: this.horizontalScroll }, h("div", { key: 'd1f0693a7a2f4ae545d48c0708f91770c1fee717', style: { width: `${this.svgWidth}px` }, class: "scroll" })));
     }
     static get is() { return "kup-horizontal-scroll"; }
     static get encapsulation() { return "shadow"; }

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

@@ -255,8 +255,8 @@ export const ganttDateRangeGeneric = (dates, viewMode, preStepsCount, showSecond
         case 'month':
             newStartDate = addToDate(newStartDate, -1 * preStepsCount, 'month');
             newStartDate = startOfDate(newStartDate, 'month');
-            newEndDate = addToDate(newEndDate, 1, 'year');
-            newEndDate = startOfDate(newEndDate, 'year');
+            newEndDate = addToDate(newEndDate, 1, 'month');
+            newEndDate = startOfDate(newEndDate, 'month');
             break;
         case 'week':
             newStartDate = startOfDate(newStartDate, 'day');
@@ -270,26 +270,6 @@ export const ganttDateRangeGeneric = (dates, viewMode, preStepsCount, showSecond
             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];
 };

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
 import { calculateDisplayedDateRange, columnWidthForTimeUnit, convertProjectToTasks, getPhaseById, getProjectById, mergeTaskIntoPhases, mergeTaskIntoProjects, } from "./kup-planner-renderer-helper";
 import { KUP_PLANNER_MAIN_GANTT_ID, KUP_PLANNER_SECONDARY_GANTT_ID, } from "../kup-planner-declarations";
 import { KupDates } from "../../../managers/kup-dates/kup-dates";
@@ -74,6 +74,13 @@ export class KupPlannerRenderer {
     /*-------------------------------------------------*/
     /*           P u b l i c   M e t h o d s           */
     /*-------------------------------------------------*/
+    /**
+     * This method is used to trigger a new render of the component.
+     */
+    async refresh() {
+        var _a;
+        this.displayedDates = calculateDisplayedDateRange(this.currentTasks, this.timeUnit, this.mainGanttDoubleView, this.currentDetails, (_a = this.props) === null || _a === void 0 ? void 0 : _a.preStepsCount);
+    }
     // Handle click event
     handleClick(row, onClick) {
         if (!row) {
@@ -188,7 +195,7 @@ export class KupPlannerRenderer {
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: '133ea45016bd02bd7536e01bea88ea1e079607d8', class: "planner-render" }, h("kup-switcher", { key: '5f187be68f2d85066d9d6886445a03caeb4a5d33', timeUnitChange: (timeUnit) => {
+        return (h("div", { key: 'e633ff68b8b848cd29b1fb4a44f4561ef9dfc65f', class: "planner-render" }, h("kup-switcher", { key: 'e8982db1704160c67839e156521f8cadbd9d182a', timeUnitChange: (timeUnit) => {
                 var _a, _b;
                 (_b = (_a = this.props).onSetViewMode) === null || _b === void 0 ? void 0 : _b.call(_a, timeUnit);
                 this.timeUnit = timeUnit;
@@ -197,7 +204,7 @@ export class KupPlannerRenderer {
             } }), this.props && (h("div", { style: {
                 display: 'flex',
                 flexDirection: 'column',
-            } }, h("kup-gantt", Object.assign({ ganttId: KUP_PLANNER_MAIN_GANTT_ID, key: KUP_PLANNER_SECONDARY_GANTT_ID, filter: this.props.mainGantt.filter, hideLabel: this.props.mainGantt.hideLabel, showSecondaryDates: this.mainGanttDoubleView, hideDependencies: this.props.mainGantt.hideDependencies, ganttHeight: this.props.mainGantt.ganttHeight, displayedStartDate: this.displayedDates.displayedStartDate, displayedEndDate: this.displayedDates.displayedEndDate, viewDate: this.viewDate, tasks: this.tasks, columnWidth: columnWidthForTimeUnit(this.timeUnit), viewMode: this.timeUnit }, this.props.mainGantt.stylingOptions, { TaskListHeader: this.props.mainGantt.taskListHeaderProject, TaskListTable: this.props.mainGantt.taskListTableProject, TooltipContent: (_a = this.props.mainGantt.tooltipContent) !== null && _a !== void 0 ? _a : CustomTooltipHOC(), barClick: (task) => {
+            } }, h("kup-gantt", Object.assign({ ref: (el) => (this.mainGantt = el), ganttId: KUP_PLANNER_MAIN_GANTT_ID, key: KUP_PLANNER_MAIN_GANTT_ID, filter: this.props.mainGantt.filter, hideLabel: this.props.mainGantt.hideLabel, showSecondaryDates: this.mainGanttDoubleView, hideDependencies: this.props.mainGantt.hideDependencies, ganttHeight: this.props.mainGantt.ganttHeight, displayedStartDate: this.displayedDates.displayedStartDate, displayedEndDate: this.displayedDates.displayedEndDate, viewDate: this.viewDate, tasks: this.tasks, columnWidth: columnWidthForTimeUnit(this.timeUnit), viewMode: this.timeUnit }, this.props.mainGantt.stylingOptions, { TaskListHeader: this.props.mainGantt.taskListHeaderProject, TaskListTable: this.props.mainGantt.taskListTableProject, TooltipContent: (_a = this.props.mainGantt.tooltipContent) !== null && _a !== void 0 ? _a : CustomTooltipHOC(), barClick: (task) => {
                 let row = getProjectById(task.id, this.currentTasks);
                 if (!row) {
                     row = getPhaseById(task.id, this.currentTasks);
@@ -221,7 +228,7 @@ export class KupPlannerRenderer {
                 if (row) {
                     this.handleContextMenu(event, row, this.props.mainGantt.onContextMenu);
                 }
-            }, dateChange: (task) => this.handleDateChange(task, this.currentTasks, this.props.mainGantt.onDateChange), locale: this.locale, dateTimeFormatters: ganttDateTimeFormatters, initialScrollX: this.scrollX, initialScrollY: this.props.mainGantt.initialScrollY, readOnly: this.props.mainGantt.readOnly, scrollXChange: this.props.onScrollX, scrollYChange: this.props.mainGantt.onScrollY, currentTasks: this.currentTasks, handleClick: this.handleClick.bind(this), handleDblClick: this.handleDblClick.bind(this), handleContextMenu: this.handleContextMenu.bind(this), ganttOnClick: this.props.mainGantt.onClick, ganttOnDblClick: this.props.mainGantt.onDblClick, ganttonOnContextMenu: this.props.mainGantt.onContextMenu, label: this.props.mainGantt.title, doubleView: (_b = this.mainGanttDoubleView) !== null && _b !== void 0 ? _b : false, setDoubleView: this.handleSetDoubleView.bind(this) })), this.props.secondaryGantt && (h("kup-gantt", Object.assign({ ganttId: KUP_PLANNER_SECONDARY_GANTT_ID, key: KUP_PLANNER_SECONDARY_GANTT_ID, filter: this.props.secondaryGantt.filter, hideLabel: this.props.secondaryGantt.hideLabel, showSecondaryDates: this.mainGanttDoubleView, hideDependencies: this.props.secondaryGantt.hideDependencies, ganttHeight: this.props.secondaryGantt.ganttHeight, displayedStartDate: this.displayedDates.displayedStartDate, displayedEndDate: this.displayedDates.displayedEndDate, viewDate: this.viewDate, tasks: this.details, columnWidth: columnWidthForTimeUnit(this.timeUnit), viewMode: this.timeUnit }, this.props.secondaryGantt.stylingOptions, { TaskListHeader: this.props.secondaryGantt
+            }, dateChange: (task) => this.handleDateChange(task, this.currentTasks, this.props.mainGantt.onDateChange), locale: this.locale, dateTimeFormatters: ganttDateTimeFormatters, initialScrollX: this.scrollX, initialScrollY: this.props.mainGantt.initialScrollY, readOnly: this.props.mainGantt.readOnly, scrollXChange: this.props.onScrollX, scrollYChange: this.props.mainGantt.onScrollY, currentTasks: this.currentTasks, handleClick: this.handleClick.bind(this), handleDblClick: this.handleDblClick.bind(this), handleContextMenu: this.handleContextMenu.bind(this), ganttOnClick: this.props.mainGantt.onClick, ganttOnDblClick: this.props.mainGantt.onDblClick, ganttonOnContextMenu: this.props.mainGantt.onContextMenu, label: this.props.mainGantt.title, doubleView: (_b = this.mainGanttDoubleView) !== null && _b !== void 0 ? _b : false, setDoubleView: this.handleSetDoubleView.bind(this) })), this.props.secondaryGantt && (h("kup-gantt", Object.assign({ ref: (el) => (this.secondaryGantt = el), ganttId: KUP_PLANNER_SECONDARY_GANTT_ID, key: KUP_PLANNER_SECONDARY_GANTT_ID, filter: this.props.secondaryGantt.filter, hideLabel: this.props.secondaryGantt.hideLabel, showSecondaryDates: this.mainGanttDoubleView, hideDependencies: this.props.secondaryGantt.hideDependencies, ganttHeight: this.props.secondaryGantt.ganttHeight, displayedStartDate: this.displayedDates.displayedStartDate, displayedEndDate: this.displayedDates.displayedEndDate, viewDate: this.viewDate, tasks: this.details, columnWidth: columnWidthForTimeUnit(this.timeUnit), viewMode: this.timeUnit }, this.props.secondaryGantt.stylingOptions, { TaskListHeader: this.props.secondaryGantt
                 .taskListHeaderProject, TaskListTable: this.props.secondaryGantt
                 .taskListTableProject, TooltipContent: (_c = this.props.secondaryGantt.tooltipContent) !== null && _c !== void 0 ? _c : CustomTooltipHOC(), projection: this.projection, barClick: (task) => {
                 if (this.props.secondaryGantt) {
@@ -293,6 +300,32 @@ export class KupPlannerRenderer {
             "details": {}
         };
     }
+    static get methods() {
+        return {
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KupPlannerGanttTask": {
+                            "location": "import",
+                            "path": "../kup-planner-declarations",
+                            "id": "src/components/kup-planner/kup-planner-declarations.ts::KupPlannerGanttTask"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "This method is used to trigger a new render of the component.",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "rootElement"; }
     static get watchers() {
         return [{

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

@@ -1,3 +1,131 @@
+.kup-body-compact-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+}
+
+.kup-body-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+}
+
+.kup-code-01 {
+  font-family: var(--kup-font-family-monospace);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+}
+
+.kup-label-01 {
+  font-family: var(--kup-font-family);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+}
+
+.kup-caption-02 {
+  font-family: var(--kup-font-family);
+  font-size: 12px;
+  line-height: 15px;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+.kup-caption-01 {
+  font-family: var(--kup-font-family);
+  font-size: 10px;
+  line-height: 13px;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+
+.kup-small-label-01 {
+  font-family: var(--kup-font-family);
+  font-size: 6px;
+  line-height: 9px;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+
+.kup-heading-compact-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 600;
+  letter-spacing: 0.16px;
+}
+
+.kup-heading-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  letter-spacing: 0.16px;
+}
+
+.kup-heading-02 {
+  font-family: var(--kup-font-family);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+.kup-heading-03 {
+  font-family: var(--kup-font-family);
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.kup-heading-04 {
+  font-family: var(--kup-font-family);
+  font-size: 28px;
+  line-height: 36px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.kup-heading-05 {
+  font-family: var(--kup-font-family);
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-06 {
+  font-family: var(--kup-font-family);
+  font-size: 42px;
+  line-height: 50px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-07 {
+  font-family: var(--kup-font-family);
+  font-size: 54px;
+  line-height: 64px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-08 {
+  font-family: var(--kup-font-family);
+  font-size: 54px;
+  line-height: 64px;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
 .switcher {
   display: grid;
   grid-auto-flow: column;

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

@@ -8,7 +8,7 @@ export class KupSwitcher {
         const week = () => this.timeUnitChange('week');
         const month = () => this.timeUnitChange('month');
         const year = () => this.timeUnitChange('year');
-        return (h("div", { key: '64c26910f550b5c74b294667e58f396f0642e601', class: "switcher" }, h("button", { key: '1f110cd85b5e837aec6f5c2b69ac14b3a47d9f79', type: "button", class: "button", onClick: day }, h("span", { key: 'be249d7896fcd93905e8865309405d30dfa506bf', class: "label" }, "Day")), h("button", { key: '81dfab2aebed98d32cff106577795a064c03a257', type: "button", class: "button", onClick: week }, h("span", { key: 'e5c41e5dcd9d775c6749c2907e59a7d0400e3712', class: "label" }, "Week")), h("button", { key: 'a598a5ab4f1496bbd267134201b21c45e5198d01', type: "button", class: "button", onClick: month }, h("span", { key: '57769be17ca1de59a919cbb7e7ac11d0546a28fb', class: "label" }, "Month")), h("button", { key: 'b62c7585c44acc19863bc93898851348250ba7fa', type: "button", class: "button", onClick: year }, h("span", { key: '9f4ab800c4eef1666ceabaebe0d35b042753430f', class: "label" }, "Year"))));
+        return (h("div", { key: '41dda7f6481d54c262a7362440167aa58b44e8e1', class: "switcher" }, h("button", { key: 'e286b6add4c59978c39cef79e8bddd0704b9b3be', type: "button", class: "button", onClick: day }, h("span", { key: '855e19deedcbb55d6d534260e6b2b76580eb8e71', class: "label" }, "Day")), h("button", { key: 'dffc909ef397ddd44957cad2b304343f9a96998c', type: "button", class: "button", onClick: week }, h("span", { key: 'd69ab19671de0f10e60ba584a1036c628d6204b1', class: "label" }, "Week")), h("button", { key: '42c686fc57fdd6bd4a0cc8fd939946048d663771', type: "button", class: "button", onClick: month }, h("span", { key: 'a1508d10ecfdb50527a2be3b9a7bd069f922753e', class: "label" }, "Month")), h("button", { key: 'b478c7c4ed13b4ed3ab72f148995bf4cc96533c8', type: "button", class: "button", onClick: year }, h("span", { key: 'c56ee36dac14420f256d327cfe6119e9792d072f', class: "label" }, "Year"))));
     }
     static get is() { return "kup-switcher"; }
     static get originalStyleUrls() {

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

@@ -33,12 +33,12 @@ export class TaskGantt {
     }
     render() {
         const newBarProps = Object.assign(Object.assign({}, this.barProps), { gridProps: this.gridProps });
-        return (h("div", { key: 'd9a4cf68f10e8263f73123022b4e545f6a028580', class: "ganttVerticalContainer", ref: (el) => (this.verticalGanttContainerRef = el), dir: "ltr" }, h("kup-gantt-calendar", { key: '2ad5614e2df01e5f3cc21b9940c14ba7dd5a785d', 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", { key: '8c0e76cb967f172406f352c6568582fdc4008d38', ref: (el) => (this.horizontalContainerRef = el), class: "horizontalContainer", style: this.ganttHeight
+        return (h("div", { key: '905f0400ac4a0103896527ef5197cf1d1377b47b', class: "ganttVerticalContainer", ref: (el) => (this.verticalGanttContainerRef = el), dir: "ltr" }, h("kup-gantt-calendar", { key: '5663eafd88795240ff35fb92eb68af99d6b285d7', 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", { key: 'ececb1964b8a3a9e0b0a12889b680f8667e49690', 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({ key: '69040247d6fde1ddb12f3b2ce54e02bc7781e569' }, newBarProps)))));
+                : { width: `${this.gridProps.svgWidth}px` } }, h("kup-grid-renderer", Object.assign({ key: '2117872fcdad4e4a3afe4eb4bfc303fce6ea2db7' }, newBarProps)))));
     }
     static get is() { return "kup-task-gantt"; }
     static get properties() {

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

@@ -7,22 +7,22 @@ export class KupTaskListHeader {
         this.rowWidth = undefined;
     }
     render() {
-        return (h("div", { key: '85c164a7a4313c8708ce2774338ff123621e7648', class: "ganttTable", style: {
+        return (h("div", { key: '116213bd504a1e48f0484e92db9f7c8fb4dcb602', class: "ganttTable", style: {
                 fontFamily: this.fontFamily,
                 fontSize: this.fontSize,
-            } }, h("div", { key: '46aad2a15e9f7d6fe8e7b705b5cc4f385ebf2d69', class: "ganttTable_Header", style: {
+            } }, h("div", { key: 'afbe32d59d041d923cd831db83ca0b09087cda23', class: "ganttTable_Header", style: {
                 height: `${this.headerHeight - 2}px`,
-            } }, h("div", { key: 'fafa8c4eb47c740fff23eb204a75b872d39876e2', class: "ganttTable_HeaderItem", style: {
+            } }, h("div", { key: 'ffa34b095e8b1d59516e6892c87f9eeeec8d9160', class: "ganttTable_HeaderItem", style: {
                 minWidth: this.rowWidth,
-            } }, "\u00A0Name"), h("div", { key: '1ebbcca3ce32701a8af4140fb638173de9795995', class: "ganttTable_HeaderSeparator", style: {
+            } }, "\u00A0Name"), h("div", { key: 'fad1584e5c299645e59f988e1fedc6fb1c6b05ff', class: "ganttTable_HeaderSeparator", style: {
                 height: `${this.headerHeight * 0.5}px`,
                 marginTop: `${this.headerHeight * 0.2}px`,
-            } }), h("div", { key: 'b08345a4be12e76a9d634508e32e035a3c570dfb', class: "ganttTable_HeaderItem", style: {
+            } }), h("div", { key: '630992695659d8963415808cb1734e06d9aff914', class: "ganttTable_HeaderItem", style: {
                 minWidth: this.rowWidth,
-            } }, "\u00A0From"), h("div", { key: '3f035b39c2c66677e78c2786cea4a39c824bb60b', class: "ganttTable_HeaderSeparator", style: {
+            } }, "\u00A0From"), h("div", { key: 'e676f60163f722f1fd72f9038157359e61c895d2', class: "ganttTable_HeaderSeparator", style: {
                 height: `${this.headerHeight * 0.5}px`,
                 marginTop: `${this.headerHeight * 0.25}px`,
-            } }), h("div", { key: '01effc62e0e2ddf73ab5cf4cbad5873f70d510c6', class: "ganttTable_HeaderItem", style: {
+            } }), h("div", { key: 'ee2699da7a0afbfa6944c47621e07112dca46816', class: "ganttTable_HeaderItem", style: {
                 minWidth: this.rowWidth,
             } }, "\u00A0To"))));
     }

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

@@ -22,7 +22,7 @@ export class TaskListTableDefault {
         return date.toLocaleDateString(this.locale, this.dateTimeOptions);
     }
     render() {
-        return (h("div", { key: '384204e115a7d10387be01795a096ae843b06ebf', class: "taskListWrapper", style: {
+        return (h("div", { key: '00ce97c983f8b2fa306cfde7a15565913bbd08fa', class: "taskListWrapper", style: {
                 fontFamily: this.fontFamily,
                 fontSize: this.fontSize,
             } }, this.tasks.map((task) => (h("div", { class: {