@sme.up/ketchup 10.1.1 → 10.3.0

package/dist/collection/components/kup-image-list/kup-image-list.css

@@ -24,7 +24,7 @@
 
 .kup-label-01 {
   font-family: var(--kup-font-family);
-  font-size: 12px;
+  font-size: var(--kup-label-01-font-size, 12px);
   line-height: 16px;
   font-weight: 400;
   letter-spacing: 0.32px;
@@ -56,7 +56,7 @@
 
 .kup-heading-compact-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-compact-01-font-size, 14px);
   line-height: 18px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -64,7 +64,7 @@
 
 .kup-heading-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-01-font-size, 14px);
   line-height: 20px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -313,10 +313,10 @@
   white-space: nowrap;
   padding: var(--kup-space-03);
   font-family: var(--kup-font-family);
-  font-size: 12px;
-  line-height: 16px;
+  font-size: var(--kup-body-compact-01-font-size, 14px);
+  line-height: 18px;
   font-weight: 400;
-  letter-spacing: 0.32px;
+  letter-spacing: 0.16px;
 }
 
 @media screen and (min-width: 678px) {

package/dist/collection/components/kup-image-list/kup-image-list.js

@@ -14,7 +14,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _KupImageList_instances, _KupImageList_clickTimeout, _KupImageList_kupManager, _KupImageList_backProps, _KupImageList_topProps, _KupImageList_el, _KupImageList_hold, _KupImageList_interactableTouch, _KupImageList_createItem, _KupImageList_createList, _KupImageList_getEventDetails, _KupImageList_clickHandler, _KupImageList_contextMenuHandler, _KupImageList_dblClickHandler, _KupImageList_didLoadInteractables;
+var _KupImageList_instances, _KupImageList_checkUpdateState, _KupImageList_clickTimeout, _KupImageList_kupManager, _KupImageList_backProps, _KupImageList_topProps, _KupImageList_el, _KupImageList_hold, _KupImageList_interactableTouch, _KupImageList_createItem, _KupImageList_createList, _KupImageList_getEventDetails, _KupImageList_clickHandler, _KupImageList_contextMenuHandler, _KupImageList_dblClickHandler, _KupImageList_didLoadInteractables;
 import { forceUpdate, h, Host, } from "@stencil/core";
 import { MDCRipple } from "@material/ripple";
 import { kupManagerInstance, } from "../../managers/kup-manager/kup-manager";
@@ -81,6 +81,7 @@ export class KupImageList {
     }
     initWithPersistedState() {
         if (this.store && this.stateId) {
+            this.state.load = true;
             const state = this.store.getState(this.stateId);
             if (state != null) {
                 this.currentNode =
@@ -90,12 +91,7 @@ export class KupImageList {
     }
     persistState() {
         if (this.store && this.stateId) {
-            let somethingChanged = false;
-            let cNodeRowId = this.currentNode ? this.currentNode.id : '';
-            if (!__classPrivateFieldGet(this, _KupImageList_kupManager, "f").objects.deepEqual(this.state.selectedTreeNodePath, cNodeRowId)) {
-                this.state.selectedTreeNodePath = cNodeRowId;
-                somethingChanged = true;
-            }
+            let somethingChanged = __classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_checkUpdateState).call(this);
             if (!this.state.load) {
                 this.state.load = true;
                 return;
@@ -204,14 +200,14 @@ export class KupImageList {
         }
         const imlClass = 'image-list' +
             (this.showFullDescription ? ' full-description' : '');
-        return (h(Host, { key: '5e33c1f936c635286ae58d2cecd96cc1c9c693a4' }, h("style", { key: '4938e03f117a30537398acdae778c3ff01f1c399' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '9ecca2056f6d57818241e98ae5c2d5a5a53291e8', id: componentWrapperId, ref: (el) => {
+        return (h(Host, { key: '0dfe8dc9ddc1120bcefb741e41ce2af6af225f63' }, h("style", { key: '2f2e1717102b7b866e6e268c8b25db6eb7586719' }, __classPrivateFieldGet(this, _KupImageList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '2a9e85aeb724679ad85ace215c27e5b7ddd756f2', id: componentWrapperId, ref: (el) => {
                 __classPrivateFieldSet(this, _KupImageList_el, el, "f");
-            } }, h("div", { key: '7d9802cda18f83935c46575394218394c060430f', class: "navigation-bar" }, hasNavigation ? (h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
+            } }, h("div", { key: '1afaeafc6de7b2d6743571817c8aafd1ae6f8120', class: "navigation-bar" }, hasNavigation ? (h("div", { class: `navigation-bar__wrapper ${this.navigationBarToggled
                 ? 'navigation-bar__wrapper--active'
                 : ''}` }, h("div", { class: `navigation-bar__title`, onClick: () => {
                 this.navigationBarToggled =
                     !this.navigationBarToggled;
-            } }, h(FImage, { fit: true, resource: this.currentNode.icon, placeholderResource: this.currentNode.placeholderIcon, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: "navigation-bar__title__image" }), h("div", { class: "navigation-bar__title__label" }, this.currentNode.value)), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_backProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.BACK) })), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_topProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.TOP) })))) : null), h("div", { key: '3d3ae2b0959e21a11781fb6364461f67cc0dea4a', class: imlClass, style: combinedGridStyle }, ...__classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
+            } }, h(FImage, { fit: true, resource: this.currentNode.icon, placeholderResource: this.currentNode.placeholderIcon, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: "navigation-bar__title__image" }), h("div", { class: "navigation-bar__title__label" }, this.currentNode.value)), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_backProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.BACK) })), h(FButton, Object.assign({}, __classPrivateFieldGet(this, _KupImageList_topProps, "f"), { label: __classPrivateFieldGet(this, _KupImageList_kupManager, "f").language.translate(KupLanguageGeneric.TOP) })))) : null), h("div", { key: '1868b4d2e1e23b78ab3eb99031a21afc88ead36d', class: imlClass, style: combinedGridStyle }, ...__classPrivateFieldGet(this, _KupImageList_instances, "m", _KupImageList_createList).call(this)))));
     }
     disconnectedCallback() {
         __classPrivateFieldGet(this, _KupImageList_kupManager, "f").interact.unregister(__classPrivateFieldGet(this, _KupImageList_interactableTouch, "f"));
@@ -588,7 +584,15 @@ export class KupImageList {
             }];
     }
 }
-_KupImageList_clickTimeout = new WeakMap(), _KupImageList_kupManager = new WeakMap(), _KupImageList_backProps = new WeakMap(), _KupImageList_topProps = new WeakMap(), _KupImageList_el = new WeakMap(), _KupImageList_hold = new WeakMap(), _KupImageList_interactableTouch = new WeakMap(), _KupImageList_instances = new WeakSet(), _KupImageList_createItem = function _KupImageList_createItem(node) {
+_KupImageList_clickTimeout = new WeakMap(), _KupImageList_kupManager = new WeakMap(), _KupImageList_backProps = new WeakMap(), _KupImageList_topProps = new WeakMap(), _KupImageList_el = new WeakMap(), _KupImageList_hold = new WeakMap(), _KupImageList_interactableTouch = new WeakMap(), _KupImageList_instances = new WeakSet(), _KupImageList_checkUpdateState = function _KupImageList_checkUpdateState() {
+    let somethingChanged = false;
+    let cNodeRowId = this.currentNode ? this.currentNode.id : '';
+    if (!__classPrivateFieldGet(this, _KupImageList_kupManager, "f").objects.deepEqual(this.state.selectedTreeNodePath, cNodeRowId)) {
+        this.state.selectedTreeNodePath = cNodeRowId;
+        somethingChanged = true;
+    }
+    return somethingChanged;
+}, _KupImageList_createItem = function _KupImageList_createItem(node) {
     const props = {
         fit: true,
         resource: node.icon,

package/dist/collection/components/kup-input-panel/kup-input-panel-utils.js

@@ -1,6 +1,14 @@
-export const CHAR_WIDTH = 10;
-export const ROW_HEIGHT = 22;
-export const getAbsoluteWidth = (length) => {
+import { FCellShapes } from "../../f-components/f-cell/f-cell-declarations";
+// General INP constants
+export const ROW_HEIGHT = 20; // Used for the ACTUAL row height calculations (no spacing)
+export const SPACED_ROW_HEIGHT = 22; // Used for the INP total height calculations (accounting for row spacing)
+export const LEFT_MULTIPLIER = 1.15; // Multiplier commanding the left attribute "scale"
+export const ADDITIONAL_WIDTH_WITH_ICON = 18; // Additional width added to account for the shape's icon (ACP,CAL,CMB)
+// Char sizes
+export const FONT_SIZE = 12; // Monospace font size of the INP
+export const FONT_SIZE_TO_WIDTH_RATIO = 1.6; // FontSize to SingleCharWidth ratio
+export const CHAR_WIDTH = FONT_SIZE / FONT_SIZE_TO_WIDTH_RATIO; // Used for field width and left attribute
+export const getAbsoluteWidth = (length, graphicShapeHasIcon) => {
     if (length == 0) {
         return CHAR_WIDTH / 2;
     }
@@ -10,22 +18,22 @@ export const getAbsoluteWidth = (length) => {
     if (length === 1) {
         return 1.5 * CHAR_WIDTH;
     }
-    return length * CHAR_WIDTH;
+    return (length * CHAR_WIDTH +
+        (graphicShapeHasIcon ? ADDITIONAL_WIDTH_WITH_ICON : 0) +
+        4 // Additional size to include padding
+    );
 };
-export const FONT_SIZE = 12;
-export const FONT_SIZE_TO_WIDTH_RATIO = 1.666666666666667;
-export const SINGLE_CHAR_WIDTH = FONT_SIZE / FONT_SIZE_TO_WIDTH_RATIO;
 export const getLabelAbsoluteWidth = (length) => {
     if (length == 0) {
-        return SINGLE_CHAR_WIDTH / 2;
+        return CHAR_WIDTH / 2;
     }
     if (!length) {
         return null;
     }
     if (length === 1) {
-        return 1.5 * SINGLE_CHAR_WIDTH;
+        return 1.5 * CHAR_WIDTH;
     }
-    return length * SINGLE_CHAR_WIDTH;
+    return length * CHAR_WIDTH;
 };
 export const getAbsoluteHeight = (height) => {
     if (!height) {
@@ -33,17 +41,26 @@ export const getAbsoluteHeight = (height) => {
     }
     return height * ROW_HEIGHT;
 };
-export const getAbsoluteTop = (row) => {
+export const getAbsoluteTop = (row, absoluteTblPositioningData) => {
     if (!row) {
         return null;
     }
-    return (row - 1) * ROW_HEIGHT;
+    if (row > (absoluteTblPositioningData === null || absoluteTblPositioningData === void 0 ? void 0 : absoluteTblPositioningData.absoluteRow)) {
+        const tableTop = ((absoluteTblPositioningData === null || absoluteTblPositioningData === void 0 ? void 0 : absoluteTblPositioningData.absoluteRow) - 1) * ROW_HEIGHT +
+            ((absoluteTblPositioningData === null || absoluteTblPositioningData === void 0 ? void 0 : absoluteTblPositioningData.absoluteRow) - 1) * 2;
+        const tableHeight = getAbsoluteHeight(absoluteTblPositioningData.absoluteHeight);
+        const tableFinalRow = (absoluteTblPositioningData === null || absoluteTblPositioningData === void 0 ? void 0 : absoluteTblPositioningData.absoluteRow) +
+            (absoluteTblPositioningData === null || absoluteTblPositioningData === void 0 ? void 0 : absoluteTblPositioningData.absoluteHeight) -
+            1;
+        return tableTop + tableHeight + (row - tableFinalRow - 1) * ROW_HEIGHT;
+    }
+    return (row - 1) * ROW_HEIGHT + (row - 1) * 2;
 };
 export const getAbsoluteLeft = (col) => {
     if (!col) {
         return null;
     }
-    return col * CHAR_WIDTH;
+    return (col - 1) * 10 * LEFT_MULTIPLIER;
 };
 export const getInpComponentAbsoluteHeight = (layout) => {
     let inpRowHeight = 0;
@@ -60,3 +77,8 @@ export const getInpComponentAbsoluteHeight = (layout) => {
     });
     return inpRowHeight;
 };
+export const graphicShapeHasIcon = (shape) => {
+    return (shape === FCellShapes.AUTOCOMPLETE ||
+        shape === FCellShapes.COMBOBOX ||
+        shape === FCellShapes.DATE);
+};

package/dist/collection/components/kup-input-panel/kup-input-panel.css

@@ -24,7 +24,7 @@
 
 .kup-label-01 {
   font-family: var(--kup-font-family);
-  font-size: 12px;
+  font-size: var(--kup-label-01-font-size, 12px);
   line-height: 16px;
   font-weight: 400;
   letter-spacing: 0.32px;
@@ -56,7 +56,7 @@
 
 .kup-heading-compact-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-compact-01-font-size, 14px);
   line-height: 18px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -64,7 +64,7 @@
 
 .kup-heading-01 {
   font-family: var(--kup-font-family);
-  font-size: 14px;
+  font-size: var(--kup-heading-01-font-size, 14px);
   line-height: 20px;
   font-weight: 600;
   letter-spacing: 0.16px;
@@ -164,7 +164,10 @@
   --kup_input_panel_label_alignment: var(--kup-input-panel-label-alignment);
   --kup_input_panel_label_width: var(--kup-input-panel-label-width);
   --kup_input_panel_padding: var(--kup-input-panel-padding, 1em 0);
-  --kup_input_panel_padding--inline: var(--kup-input-panel-padding--inline, 0);
+  --kup_input_panel_padding--inline: var(
+    --kup-input-panel-padding--inline,
+    1em 0
+  );
   --kup_input_panel_absolute_max_height: var(
     --kup-input-panel-absolute-max-height,
     /* 716px comes from the maximum number of lines (32) multiplied by the default height per line (22px) plus 12px for the possibility that the scrollbar will be rendered */
@@ -179,7 +182,7 @@
   overflow: auto;
   padding: var(--kup_input_panel_padding);
   position: relative;
-  gap: 1rem;
+  gap: 8px;
 }
 :host .input-panel__commands {
   display: flex;
@@ -195,6 +198,7 @@
   white-space: nowrap;
   padding: var(--kup_input_panel_padding--inline);
   display: inline-flex;
+  align-items: flex-end;
 }
 :host .input-panel--column {
   flex-direction: column;
@@ -251,11 +255,14 @@
   font-size: 12px;
   font-family: var(--kup-font-family-monospace);
   white-space: pre;
+  overflow: hidden;
 }
 :host .input-panel--absolute {
   justify-content: flex-end;
   padding: var(--kup-space-02);
   max-height: var(--kup_input_panel_absolute_max_height);
+  --kup-textfield-extrasmall-height: 20px;
+  --kup-textfield-extrasmall-padding: 0 var(--kup-space-01);
 }
 :host .input-panel--absolute .input-panel-label {
   justify-content: start;