@sme.up/ketchup 9.6.1 → 9.6.3

package/dist/collection/components/kup-text-field/kup-text-field.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;
+}
+
 /**
 * @prop --kup-textfield-background-color-rgb: Sets the background shader of the field, must be a set of RGB values.
 * @prop --kup-textfield-color: Sets text color of the text field.

package/dist/collection/components/kup-time-picker/kup-time-picker.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;
+}
+
 :host {
   display: block;
   font-size: var(--kup-font-size);

package/dist/collection/components/kup-tree/kup-tree.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;
+}
+
 /**
 * @prop --kup-tree-border: Sets border of the component.
 * @prop --kup-tree-color: Sets text color of the component.

package/dist/collection/f-components/f-cell/f-cell-declarations.js

@@ -140,6 +140,7 @@ export const editableTypes = [
     FCellTypes.MULTI_AUTOCOMPLETE,
     FCellTypes.MULTI_COMBOBOX,
     FCellTypes.NUMBER,
+    FCellTypes.RADIO,
     FCellTypes.RATING,
     FCellTypes.STRING,
     FCellTypes.SWITCH,

package/dist/collection/f-components/f-cell/f-cell.js

@@ -15,6 +15,8 @@ import { FProgressBar } from "../f-progress-bar/f-progress-bar";
 import { FRadio } from "../f-radio/f-radio";
 import { FRating } from "../f-rating/f-rating";
 const dom = document.documentElement;
+let touchEndTime = 0;
+let touchStartTime = 0;
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
@@ -39,6 +41,9 @@ export const FCell = (props, children) => {
         : column.cssClass
             ? column.cssClass
             : '';
+    if (props.component.legacyLook) {
+        cssClasses += ' monospace c-pre';
+    }
     const classObj = {
         'f-cell': true,
         [FCellClasses.OBJ]: hasObj ? true : false,
@@ -108,7 +113,27 @@ export const FCell = (props, children) => {
     }
     return (h("div", { onKeyUp: (e) => cellEvent(e, props, cellType, FCellEvents.KEYUP), class: classObj, "kup-get-cell-props": () => {
             return props;
-        }, ref: (el) => (cell.element = el), style: cell.style }, h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle }, children && children.length > 0
+        }, onTouchEnd: dom.ketchup.interact.isMobileDevice()
+            ? () => {
+                if (touchStartTime) {
+                    touchEndTime = performance.now();
+                    const delta = touchEndTime - touchStartTime;
+                    // 600ms is interact's default "hold" value
+                    if (delta < 600) {
+                        const newEvt = document.createEvent('MouseEvents');
+                        cellEvent(newEvt, props, cellType, FCellEvents.CLICK);
+                    }
+                    touchEndTime = 0;
+                    touchStartTime = 0;
+                }
+            }
+            : null, onTouchStart: dom.ketchup.interact.isMobileDevice()
+            ? (e) => {
+                touchEndTime = 0;
+                touchStartTime = performance.now();
+                e.preventDefault();
+            }
+            : null, ref: (el) => (cell.element = el), style: cell.style }, h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle }, children && children.length > 0
         ? children
         : [props.indents, infoEl, icon, content])));
 };
@@ -232,6 +257,20 @@ function setEditableCell(cellType, classObj, cell, column, props) {
             return (h("kup-chip", Object.assign({ displayId: true }, cell.data, { type: FChipType.INPUT, enableInput: true, "onKup-chip-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) }), h("kup-autocomplete", Object.assign({ class: "kup-full-width", slot: "field", displayMode: ItemsDisplayMode.DESCRIPTION_AND_CODE, selectMode: ItemsDisplayMode.DESCRIPTION_AND_CODE, "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-autocomplete-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK), showDropDownIcon: false }, cell.slotData))));
         case FCellTypes.MULTI_COMBOBOX:
             return (h("kup-chip", Object.assign({ displayId: true }, cell.data, { type: FChipType.INPUT, enableInput: true, "onKup-chip-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) }), h("kup-combobox", Object.assign({ class: "kup-full-width", slot: "field", displayMode: ItemsDisplayMode.DESCRIPTION_AND_CODE, selectMode: ItemsDisplayMode.DESCRIPTION_AND_CODE, "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) }, cell.slotData))));
+        case FCellTypes.RADIO:
+            return (h(FRadio, Object.assign({}, cell.data, { disabled: false, onChange: (i, e) => {
+                    const radioData = cell.data.data;
+                    for (let index = 0; index < radioData.length; index++) {
+                        const radioEl = radioData[index];
+                        if (index === i) {
+                            radioEl.checked = true;
+                        }
+                        else {
+                            radioEl.checked = false;
+                        }
+                    }
+                    cellEvent(e, props, cellType, FCellEvents.UPDATE);
+                } })));
         case FCellTypes.RATING:
             return (h("kup-rating", Object.assign({ key: column.name + props.row.id }, cell.data, { disabled: false, "onkup-rating-click": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
         case FCellTypes.SWITCH:
@@ -376,8 +415,8 @@ function cellEvent(e, props, cellType, cellEventName) {
     const column = props.column;
     const comp = props.component;
     const row = props.row;
-    let value = getValueFromEventTaget(e, cellType);
     if (cellEventName === FCellEvents.UPDATE) {
+        let value = getValueFromEventTaget(e, cellType);
         switch (cellType) {
             case FCellTypes.AUTOCOMPLETE:
             case FCellTypes.COMBOBOX:
@@ -395,6 +434,9 @@ function cellEvent(e, props, cellType, cellEventName) {
                         value === '0' ? false : true;
                 }
                 break;
+            case FCellTypes.RADIO:
+                // data change handled outside this switchcase to avoid passing the index
+                break;
             case FCellTypes.CHIP:
             case FCellTypes.MULTI_AUTOCOMPLETE:
             case FCellTypes.MULTI_COMBOBOX:

package/dist/collection/f-components/f-paginator/f-paginator.js

@@ -8,6 +8,9 @@ const dom = document.documentElement;
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
 export const FPaginator = (props) => {
+    if (!props.perPage) {
+        props.perPage = 10;
+    }
     const maxNumberOfPage = Math.ceil(props.max / props.perPage);
     const pageItems = getPageItems(props, maxNumberOfPage);
     const rowsPerPageItems = getRowsItems(props);

package/dist/collection/managers/kup-dates/kup-dates.js

@@ -1,4 +1,5 @@
 import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import minMax from "dayjs/plugin/minMax";
@@ -31,16 +32,24 @@ export class KupDates {
          * Parses a Date string to JS Date Object
          *
          * @param {string} ymd - The string to be converted to Date.
-        */
-        this.parseToDayStart = (ymd) => dayjs(ymd).toDate();
-        this.parseToDayEnd = (endDate) => dayjs(endDate).add(23, 'hour').add(59, 'minute').add(59, 'second').toDate();
+         */
+        this.parseToDayStart = (ymd) => {
+            return dayjs(ymd).toDate();
+        };
+        this.parseToDayEnd = (endDate) => {
+            return dayjs(endDate)
+                .set('hour', 23)
+                .set('minute', 59)
+                .set('second', 59)
+                .toDate();
+        };
         /**
          * Returns Start and end date of given dates
          *
          * @param {string} startDate - The start date string.
          * @param {string} endDate - The end date string.
          * @param {string} _name
-        */
+         */
         this.validDates = (startDate, endDate, _name) => {
             let start = this.parseToDayStart(startDate);
             const end = this.parseToDayEnd(endDate);
@@ -49,10 +58,11 @@ export class KupDates {
             }
             return { start, end };
         };
-        this.formatToLocaleSimple = (date) => dayjs(date).format("DD/MM/YYYY");
+        this.formatToLocaleSimple = (date) => dayjs(date).format('DD/MM/YYYY');
         this.managedComponents = new Set();
         this.setLocale(locale);
         this.dayjs = dayjs;
+        dayjs.extend(utc);
         dayjs.extend(customParseFormat);
         dayjs.extend(localizedFormat);
         dayjs.extend(minMax);
@@ -179,7 +189,7 @@ export class KupDates {
         if (!format) {
             format = 'L'; // MM/DD/YYYY, DD/MM/YYYY depending on locale
         }
-        return dayjs(input).format(format);
+        return dayjs.utc(input).format(format);
     }
     /**
      * Gets the time formatted
@@ -231,10 +241,10 @@ export class KupDates {
      */
     toDate(input, format) {
         if (format && format != null) {
-            return dayjs(input, format).toDate();
+            return dayjs.utc(input, format).toDate();
         }
         else {
-            return dayjs(input).toDate();
+            return dayjs.utc(input).toDate();
         }
     }
     /**

package/dist/collection/managers/kup-interact/kup-interact.js

@@ -240,6 +240,13 @@ export class KupInteract {
         interact(el).dropzone(options);
         this.managedElements.add(el);
     }
+    /**
+     * Tests whether the current device is mobile or not.
+     * @returns {boolean} Returns true when it's a mobile device
+     */
+    isMobileDevice() {
+        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    }
     /**
      * Sets up a new resizable element.
      * @param {HTMLElement} el - The resizable element.