@sme.up/ketchup 5.2.1-SNAPSHOT → 6.1.0-SNAPSHOT

package/dist/collection/components/kup-tab-bar/kup-tab-bar.js

@@ -44,15 +44,15 @@ export class KupTabBar {
      */
     this.scrollArea = null;
   }
-  onKupBlur(i, e) {
+  onKupBlur(i, node) {
     this.kupBlur.emit({
       comp: this,
       id: this.rootElement.id,
       index: i,
-      el: e.target,
+      node: node,
     });
   }
-  onKupClick(i, e) {
+  onKupClick(i, node) {
     for (let i = 0; i < this.data.length; i++) {
       this.data[i].active = false;
     }
@@ -62,16 +62,15 @@ export class KupTabBar {
       comp: this,
       id: this.rootElement.id,
       index: i,
-      el: e.target,
-      value: this.data[i].value,
+      node: node,
     });
   }
-  onKupFocus(i, e) {
+  onKupFocus(i, node) {
     this.kupFocus.emit({
       comp: this,
       id: this.rootElement.id,
       index: i,
-      el: e.target,
+      node: node,
     });
   }
   /*-------------------------------------------------*/
@@ -166,17 +165,17 @@ export class KupTabBar {
     }
     const tabBar = [];
     for (let i = 0; i < this.data.length; i++) {
-      const data = this.data[i];
+      const node = this.data[i];
       const tabClass = {
         tab: true,
-        'tab--active': data.active ? true : false,
+        'tab--active': node.active ? true : false,
         'mdc-ripple-surface': this.ripple ? true : false,
       };
-      const tabEl = (h("button", { class: tabClass, role: "tab", "aria-selected": this.data[i].active ? true : false, tabIndex: i, title: data.title ? data.title : null, onBlur: (e) => this.onKupBlur(i, e), onClick: (e) => this.onKupClick(i, e), onFocus: (e) => this.onKupFocus(i, e) },
+      const tabEl = (h("button", { class: tabClass, role: "tab", "aria-selected": this.data[i].active ? true : false, tabIndex: i, title: node.title ? node.title : null, onBlur: () => this.onKupBlur(i, node), onClick: () => this.onKupClick(i, node), onFocus: () => this.onKupFocus(i, node) },
         h("span", { class: "tab__content" },
-          data.icon ? (h(FImage, { color: `var(${KupThemeColorValues.PRIMARY})`, resource: data.icon, sizeX: "24px", sizeY: "24px", wrapperClass: "tab__icon" })) : null,
-          h("span", { class: "tab__text-label" }, this.data[i].text)),
-        h("span", { class: `tab-indicator ${data.active ? ' tab-indicator--active' : ''}` },
+          node.icon ? (h(FImage, { color: `var(${KupThemeColorValues.PRIMARY})`, resource: node.icon, sizeX: "24px", sizeY: "24px", wrapperClass: "tab__icon" })) : null,
+          node.value ? (h("span", { class: "tab__text-label" }, this.data[i].value)) : null),
+        h("span", { class: `tab-indicator ${node.active ? ' tab-indicator--active' : ''}` },
           h("span", { class: "tab-indicator__content tab-indicator__content--underline" }))));
       tabBar.push(tabEl);
     }
@@ -230,10 +229,10 @@ export class KupTabBar {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "KupTabBarData[]",
-        "resolved": "KupTabBarData[]",
+        "original": "KupTabBarNode[]",
+        "resolved": "KupTabBarNode[]",
         "references": {
-          "KupTabBarData": {
+          "KupTabBarNode": {
             "location": "import",
             "path": "./kup-tab-bar-declarations"
           }
@@ -306,10 +305,10 @@ export class KupTabBar {
         "text": "Triggered when the tab is clicked."
       },
       "complexType": {
-        "original": "KupTabBarClickEventPayload",
-        "resolved": "KupTabBarClickEventPayload",
+        "original": "KupTabBarEventPayload",
+        "resolved": "KupTabBarEventPayload",
         "references": {
-          "KupTabBarClickEventPayload": {
+          "KupTabBarEventPayload": {
             "location": "import",
             "path": "./kup-tab-bar-declarations"
           }

package/dist/collection/components/kup-time-picker/kup-time-picker.js

@@ -78,7 +78,7 @@ export class KupTimePicker {
   onKupTimePickerItemClick(e, value) {
     if (e != null) {
       if (value == null) {
-        value = e.detail.selected.value;
+        value = e.detail.selected.id;
       }
     }
     this.setPickerValueSelected(value);
@@ -366,7 +366,7 @@ export class KupTimePicker {
         } }));
     }
     else {
-      return (h("kup-list", { ref: (el) => (this.pickerKupEl = el), data: this.createTimeListData(this.value), "is-menu": true, "onkup-list-click": (e) => this.onKupTimePickerItemClick(e, e.detail.selected.value), id: this.rootElement.id + '_list' }));
+      return (h("kup-list", { ref: (el) => (this.pickerKupEl = el), data: this.createTimeListData(this.value), "is-menu": true, "onkup-list-click": (e) => this.onKupTimePickerItemClick(e, e.detail.selected.id), id: this.rootElement.id + '_list' }));
     }
   }
   createTimeListData(value) {

package/dist/collection/components/kup-tree/kup-tree-declarations.js

@@ -30,10 +30,6 @@ export var KupTreeProps;
   KupTreeProps["showIcons"] = "Shows the icons of the nodes.";
   KupTreeProps["stateId"] = "";
   KupTreeProps["store"] = "";
-  KupTreeProps["showTooltipOnRightClick"] = "If set to true, displays tooltip on right click; if set to false, displays tooltip on mouseOver.";
-  KupTreeProps["tooltipDetailTimeout"] = "Defines the timeout for tooltip detail";
-  KupTreeProps["tooltipEnabled"] = "Enable show tooltip";
-  KupTreeProps["tooltipLoadTimeout"] = "Defines the timeout for tooltip load";
   KupTreeProps["totals"] = "Defines the current totals options.";
   KupTreeProps["useDynamicExpansion"] = "When the component must use the dynamic expansion feature to open its nodes, it means that not all the nodes of the tree have been passed inside the data property. Therefore, when expanding a node, the tree must emit an event (or run a given callback) and wait for the child nodes to be downloaded from the server.";
 })(KupTreeProps || (KupTreeProps = {}));

package/dist/collection/components/kup-tree/kup-tree.css

@@ -2,6 +2,7 @@
 * @prop --kup-tree-border: Sets border of the component.
 * @prop --kup-tree-color: Sets text color of the component.
 * @prop --kup-tree-color-rgb: Sets text color RGB values of the component (used for shaders).
+* @prop --kup-tree-filter-background-color: Sets the background color of the global filter.
 * @prop --kup-tree-font-family: Sets font family of the component.
 * @prop --kup-tree-font-family-monospace: Sets monospace font family of the component (for number cells).
 * @prop --kup-tree-font-size: Sets font size of the component.
@@ -17,6 +18,7 @@
   --kup_tree_color: var(--kup-tree-color, var(--kup-text-color));
   --kup_tree_color_rgb: var(--kup-tree-color-rgb, var(--kup-text-color-rgb));
   --kup_tree_font_family: var(--kup-tree-font-family, var(--kup-font-family));
+  --kup_tree_filter_background_color: var(--kup-tree-filter-background-color, var(--kup-background-color));
   --kup_tree_font_family_monospace: var(
     --kup-tree-font-family-monospace,
     var(--kup-font-family-monospace)
@@ -79,9 +81,6 @@
 .wrapper {
   overflow-x: auto;
 }
-.wrapper #global-filter {
-  margin-bottom: 1em;
-}
 .wrapper .kup-tree {
   border-collapse: collapse;
   width: max-content;
@@ -185,6 +184,14 @@
   border-bottom: solid 1px var(--kup-border-color);
 }
 
+#global-filter {
+  background: var(--kup_tree_filter_background_color);
+  margin-bottom: 1em;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
 .first-node .cell-content {
   font-weight: bold;
 }

package/dist/collection/components/kup-tree/kup-tree.js

@@ -5,7 +5,6 @@ import { MDCRipple } from '@material/ripple';
 import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { calcTotals, normalizeRows, } from '../kup-data-table/kup-data-table-helper';
 import { KupTreeState } from './kup-tree-state';
-import { setTooltip, unsetTooltip } from '../../utils/helpers';
 import { getColumnByName } from '../../utils/cell-utils';
 import { getProps, numberToFormattedStringNumber, setProps, } from '../../utils/utils';
 import { KupColumnMenu } from '../../utils/kup-column-menu/kup-column-menu';
@@ -163,14 +162,6 @@ export class KupTree {
      * @see dynamicExpansionCallback
      */
     this.useDynamicExpansion = false;
-    /**
-     * If set to true, displays tooltip on right click; if set to false, displays tooltip on mouseOver.
-     */
-    this.showTooltipOnRightClick = true;
-    /**
-     * Enable show tooltip
-     */
-    this.tooltipEnabled = true;
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
@@ -390,7 +381,7 @@ export class KupTree {
     }
     this.columnMenuCard.setAttribute('data-column', column);
     this.columnMenuCard.data = this.columnMenuInstance.prepData(this, getColumnByName(this.getVisibleColumns(), column));
-    this.columnMenuInstance.open(this, column, this.tooltip);
+    this.columnMenuInstance.open(this, column);
     this.columnMenuInstance.reposition(this, this.columnMenuCard);
     this.kupTreeColumnMenu.emit({
       comp: this,
@@ -550,16 +541,52 @@ export class KupTree {
   openTotalMenu(column) {
     this.openedTotalMenu = column.name;
   }
-  closeMenuAndTooltip() {
-    unsetTooltip(this.tooltip);
-  }
   onTotalMenuOpen(column) {
-    this.closeMenuAndTooltip();
     this.closeTotalMenu();
     this.openTotalMenu(column);
   }
-  getEventDetails(el) {
-    const isHeader = !!el.closest('thead'), isBody = !!el.closest('tbody'), isFooter = !!el.closest('tfoot'), td = el.closest('td'), th = el.closest('th'), tr = el.closest('tr'), filterRemove = el.closest('th .filter-remove');
+  getEventDetails(path) {
+    let isHeader, isBody, isFooter, td, th, tr, filterRemove;
+    if (path) {
+      for (let i = path.length - 1; i >= 0; i--) {
+        let p = path[i];
+        if (!p.tagName) {
+          continue;
+        }
+        switch (p.tagName.toUpperCase()) {
+          case 'THEAD': {
+            isHeader = true;
+            break;
+          }
+          case 'TBODY': {
+            isBody = true;
+            break;
+          }
+          case 'TFOOT': {
+            isFooter = true;
+            break;
+          }
+          case 'TD': {
+            td = p;
+            break;
+          }
+          case 'TH': {
+            th = p;
+            break;
+          }
+          case 'TR': {
+            tr = p;
+            break;
+          }
+          default: {
+            if (p.classList.contains(KupThemeIconValues.FILTER_REMOVE.replace('--', ''))) {
+              filterRemove = p;
+            }
+            break;
+          }
+        }
+      }
+    }
     let cell = null, column = null, row = null;
     if (isBody) {
       if (td) {
@@ -598,7 +625,7 @@ export class KupTree {
   }
   contextMenuHandler(e) {
     e.preventDefault();
-    const details = this.getEventDetails(e.target);
+    const details = this.getEventDetails(this.getEventPath(e.target));
     if (details.area === 'header') {
       if (details.th && details.column) {
         this.openColumnMenu(details.column.name);
@@ -614,9 +641,20 @@ export class KupTree {
     }
     return details;
   }
+  getEventPath(currentEl) {
+    const path = [];
+    while (currentEl &&
+      currentEl !== this.rootElement &&
+      currentEl !== document.body) {
+      path.push(currentEl);
+      currentEl = currentEl.parentNode
+        ? currentEl.parentNode
+        : currentEl.host;
+    }
+    return path;
+  }
   // When a TreeNode can be selected
   hdlTreeNodeClick(e, treeNodeData, treeNodePath, auto) {
-    unsetTooltip(this.tooltip);
     if (this.expansionMode.toLowerCase() ===
       KupTreeExpansionMode.DROPDOWN ||
       (this.expansionMode.toLowerCase() === KupTreeExpansionMode.NODE &&
@@ -647,7 +685,6 @@ export class KupTree {
   }
   // When a TreeNode must be expanded or closed.
   hdlTreeNodeExpanderClick(treeNodeData, treeNodePath, ctrlKey) {
-    unsetTooltip(this.tooltip);
     // If the node is expandable
     if (treeNodeData.expandable) {
       // Always composes the tree node path as an array
@@ -828,34 +865,6 @@ export class KupTree {
       return h("span", { style: iconStyle, class: CSSClass });
     }
   }
-  /**
-   * Controls if current cell needs a tooltip and eventually adds it.
-   * @todo When the option forceOneLine is active, there is a problem with the current implementation of the tooltip. See documentation in the mauer wiki for better understanding.
-   */
-  getToolTipEventHandlers(treeNodeData, cell, hasTooltip) {
-    let eventHandlers = undefined;
-    if (hasTooltip) {
-      if (this.showTooltipOnRightClick) {
-        eventHandlers = {
-          onContextMenu: (ev) => {
-            ev.preventDefault();
-            setTooltip(ev, treeNodeData.id, null, cell, this.tooltip);
-          },
-        };
-      }
-      else {
-        eventHandlers = {
-          onMouseEnter: (ev) => {
-            setTooltip(ev, treeNodeData.id, null, cell, this.tooltip);
-          },
-          onMouseLeave: () => {
-            unsetTooltip(this.tooltip);
-          },
-        };
-      }
-    }
-    return eventHandlers;
-  }
   getCellStyle(colName, cellStyle) {
     // Controls if there are columns with a specified width
     if (this.sizedColumns) {
@@ -881,14 +890,6 @@ export class KupTree {
     }
     return cellStyle;
   }
-  renderTooltip() {
-    if (this.tooltipEnabled == false) {
-      return null;
-    }
-    return (h("kup-tooltip", { class: "tree-tooltip", owner: this.rootElement.tagName, loadTimeout: this.showTooltipOnRightClick == true
-        ? 0
-        : this.tooltipLoadTimeout, detailTimeout: this.tooltipDetailTimeout, ref: (el) => (this.tooltip = el) }));
-  }
   /**
    * Renders the header of the tree when it must be displayed as a table.
    * @returns An array of table header cells.
@@ -1039,7 +1040,7 @@ export class KupTree {
             row: treeNodeData,
             setSizes: true,
           };
-          treeNodeCells.push(h("td", { class: `grid-cell` },
+          treeNodeCells.push(h("td", { class: `grid-cell`, "data-cell": cell, "data-column": column.name },
             h(FCell, Object.assign({}, cellProps))));
         }
         else {
@@ -1047,9 +1048,9 @@ export class KupTree {
         }
       }
     }
-    const _hasTooltip = !this.kupManager.objects.isEmptyKupObj(treeNodeData.obj);
     let title = undefined;
-    if (_hasTooltip && this.kupManager.debug.isDebug()) {
+    if (!this.kupManager.objects.isEmptyKupObj(treeNodeData.obj) &&
+      this.kupManager.debug.isDebug()) {
       title =
         treeNodeData.obj.t +
           '; ' +
@@ -1058,10 +1059,6 @@ export class KupTree {
           treeNodeData.obj.k +
           ';';
     }
-    const cell = {
-      obj: treeNodeData.obj,
-      value: treeNodeData.value,
-    };
     let treeNodeCell = null;
     if (this.isTreeColumnVisible()) {
       let content = '';
@@ -1071,7 +1068,7 @@ export class KupTree {
       else {
         content = (h("span", { ref: (el) => this.contentRefs.push(el), class: "cell-content", title: this.preventXScroll ? treeNodeData.value : null }, treeNodeData.value));
       }
-      treeNodeCell = (h("td", Object.assign({ class: {
+      treeNodeCell = (h("td", { class: {
           'first-node': treeNodeDepth === 0 ? true : false,
           'mdc-ripple-surface': this.ripple &&
             !this.showColumns &&
@@ -1079,7 +1076,7 @@ export class KupTree {
           'is-obj': !this.kupManager.objects.isEmptyKupObj(treeNodeData.obj),
         }, style: treeNodeData.style || null, title: title, onDblClick: () => {
           this.onKupTreeNodeDblClick(treeNodeData, treeNodePath);
-        } }, this.getToolTipEventHandlers(treeNodeData, cell, _hasTooltip)), this.asAccordion && !treeNodeDepth
+        } }, this.asAccordion && !treeNodeDepth
         ? [
           treeNodeIcon,
           content,
@@ -1094,7 +1091,7 @@ export class KupTree {
         'kup-tree__node--first': treeNodeDepth ? false : true,
         'kup-tree__node--selected': !treeNodeData.disabled &&
           treeNodePath === this.selectedNodeString,
-      }, "data-tree-path": treeNodePath }, treeNodeOptions),
+      }, "data-row": treeNodeData, "data-tree-path": treeNodePath }, treeNodeOptions),
       treeNodeCell,
       treeNodeCells));
   }
@@ -1112,7 +1109,7 @@ export class KupTree {
       // must do this
       // otherwise does not fire the watcher
       const totalsCopy = Object.assign({}, this.totals);
-      const value = event.detail.selected.value;
+      const value = event.detail.selected.id;
       if (value === TotalLabel.CANC) {
         if (this.totals && this.totals[column.name]) {
           delete totalsCopy[column.name];
@@ -1390,7 +1387,6 @@ export class KupTree {
   }
   render() {
     this.contentRefs = [];
-    const tooltip = this.renderTooltip();
     this.sizedColumns = this.getSizedColumns();
     let wrapperClass = 'density-medium';
     switch (this.density) {
@@ -1429,9 +1425,9 @@ export class KupTree {
     return (h(Host, null,
       h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
       h("div", { id: componentWrapperId, class: wrapperClass },
+        filterField,
         h("div", { class: "wrapper", ref: (el) => (this.treeWrapperRef =
             el) },
-          filterField,
           h("table", { class: "kup-tree", "data-show-columns": this.showColumns, onContextMenu: (e) => {
               e.preventDefault();
             } },
@@ -1443,8 +1439,7 @@ export class KupTree {
             (this.showFooter || this.hasTotals()) &&
               this.columns
               ? this.renderFooter()
-              : null)),
-        tooltip)));
+              : null)))));
   }
   disconnectedCallback() {
     this.kupManager.language.register(this);
@@ -2043,76 +2038,6 @@ export class KupTree {
       "reflect": false,
       "defaultValue": "false"
     },
-    "showTooltipOnRightClick": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If set to true, displays tooltip on right click; if set to false, displays tooltip on mouseOver."
-      },
-      "attribute": "show-tooltip-on-right-click",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "tooltipDetailTimeout": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the timeout for tooltip detail"
-      },
-      "attribute": "tooltip-detail-timeout",
-      "reflect": false
-    },
-    "tooltipEnabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Enable show tooltip"
-      },
-      "attribute": "tooltip-enabled",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "tooltipLoadTimeout": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the timeout for tooltip load"
-      },
-      "attribute": "tooltip-load-timeout",
-      "reflect": false
-    },
     "totals": {
       "type": "unknown",
       "mutable": true,

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

@@ -12,7 +12,7 @@ const dom = document.documentElement;
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
-export const FCell = (props) => {
+export const FCell = (props, children) => {
   const cell = props.cell;
   const column = props.column;
   const row = props.row;
@@ -100,12 +100,12 @@ export const FCell = (props) => {
     };
     infoEl = h(FImage, Object.assign({}, fProps));
   }
-  return (h("div", { class: classObj, style: cell.style },
-    h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle },
-      props.indents,
-      infoEl,
-      icon,
-      content)));
+  return (h("div", { class: classObj, "kup-get-cell-props": () => {
+      return props;
+    }, style: cell.style },
+    h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle }, children && children.length > 0
+      ? children
+      : [props.indents, infoEl, icon, content])));
 };
 function setCellSize(cellType, subcomponentProps, cell, props) {
   switch (cellType) {

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

@@ -59,7 +59,8 @@ function createChipList(props, isChoice, isFilter, isInput) {
       }
     }
     function createChip(chip) {
-      let componentClass = `chip `;
+      const onlyIcon = !!(chip.icon && !chip.value);
+      let componentClass = `chip ${onlyIcon ? 'chip--only-icon' : ''}`;
       let iconEl = [];
       let iconClass = 'chip__icon chip__icon--leading';
       if (isFilter || isChoice) {

package/dist/collection/managers/kup-data/kup-data-node-helper.js

@@ -70,3 +70,27 @@ export function toStreamNode(nodes) {
   }
   return streamlined;
 }
+/**
+ * Returns the parent of the given node.
+ * @param {KupDataNode[]} nodes - Input array of nodes.
+ * @param {KupDataNode} child - Child node.
+ * @returns {KupDataNode} Parent node.
+ */
+export function getParentNode(nodes, child) {
+  let parent = null;
+  for (let index = 0; index < nodes.length; index++) {
+    const node = nodes[index];
+    recursive(node);
+    function recursive(node) {
+      const hasChildren = !!node.children;
+      if (hasChildren && node.children.includes(child)) {
+        parent = node;
+        return;
+      }
+      for (let index = 0; !parent && hasChildren && index < node.children.length; index++) {
+        recursive(node.children[index]);
+      }
+    }
+  }
+  return parent;
+}

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

@@ -2,7 +2,7 @@ import { KupDataNewColumnTypes, } from './kup-data-declarations';
 import { findCell, getCellValue, replaceCell } from './kup-data-cell-helper';
 import { findColumns, hideColumns, newColumn } from './kup-data-column-helper';
 import { findRow, toNode } from './kup-data-row-helper';
-import { removeNode, setPropertiesNode, toStreamNode, } from './kup-data-node-helper';
+import { getParentNode, removeNode, setPropertiesNode, toStreamNode, } from './kup-data-node-helper';
 import { fieldColumn } from '../../components/kup-data-table/kup-data-table-declarations';
 import { KupDebugCategory } from '../kup-debug/kup-debug-declarations';
 const dom = document.documentElement;
@@ -35,6 +35,9 @@ export class KupData {
       },
     };
     this.node = {
+      getParent(nodes, child) {
+        return getParentNode(nodes, child);
+      },
       remove(nodes, node2remove) {
         return removeNode(nodes, node2remove);
       },

package/dist/collection/managers/kup-dynamic-position/kup-dynamic-position.js

@@ -188,7 +188,8 @@ export class KupDynamicPosition {
       el.style.top = `${bottom + el.kupDynamicPosition.margin}px`;
     }
     else {
-      if (window.innerHeight - rect.bottom < offsetH) {
+      if (offsetH < rect.top &&
+        window.innerHeight - rect.bottom < offsetH) {
         el.style.bottom = `${window.innerHeight - top + el.kupDynamicPosition.margin}px`;
       }
       else {
@@ -217,7 +218,8 @@ export class KupDynamicPosition {
       el.style.right = `${window.innerWidth - scrollbarWidth - right}px`;
     }
     else {
-      if (window.innerWidth - rect.left < offsetW) {
+      if (offsetW < rect.right &&
+        window.innerWidth - rect.left < offsetW) {
         let scrollbarWidth = window.innerWidth - document.documentElement.offsetWidth;
         if (scrollbarWidth > 30) {
           scrollbarWidth = 0;

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

@@ -106,7 +106,6 @@ export class KupInteract {
             break;
           case KupDragEffect.CLONE:
             ghostImage = draggable.cloneNode(true);
-            setComputedStyle(draggable, ghostImage);
             ghostImage.style.cursor = 'grabbing';
             ghostImage.style.height = draggable.clientHeight + 'px';
             ghostImage.style.left =
@@ -120,7 +119,7 @@ export class KupInteract {
             ghostImage.style.width = draggable.clientWidth + 'px';
             ghostImage.style.zIndex =
               'calc(var(--kup-navbar-zindex) + 1)';
-            dom.ketchup.interact.container.appendChild(ghostImage);
+            draggable.parentElement.appendChild(ghostImage);
             draggable.kupDragDrop.ghostImage = ghostImage;
             break;
         }
@@ -145,26 +144,6 @@ export class KupInteract {
     };
     interact(el).draggable(options);
     this.managedElements.add(el);
-    function setComputedStyle(draggable, ghostImage) {
-      recursive(draggable, ghostImage);
-      function recursive(source, target) {
-        const styles = getComputedStyle(source);
-        for (const key in styles) {
-          if (Object.prototype.hasOwnProperty.call(styles, key)) {
-            const s = styles[key];
-            try {
-              target.style[s] = styles[s];
-            }
-            catch (error) { }
-          }
-        }
-        for (let index = 0; index < source.children.length; index++) {
-          const sourceChild = source.children[index];
-          const targetChild = target.children[index];
-          recursive(sourceChild, targetChild);
-        }
-      }
-    }
   }
   /**
    * Sets up a new dropzone.

package/dist/collection/managers/kup-language/kup-language-declarations.js

@@ -82,6 +82,7 @@ export var KupLanguageGeneric;
 (function (KupLanguageGeneric) {
   KupLanguageGeneric["ADD_NEW"] = "genericAddNew";
   KupLanguageGeneric["APPLY"] = "genericApply";
+  KupLanguageGeneric["BACK"] = "genericBack";
   KupLanguageGeneric["COLLAPSE"] = "genericCollapse";
   KupLanguageGeneric["DAY"] = "genericDay";
   KupLanguageGeneric["DRAG_AND_DROP"] = "genericDragAndDrop";
@@ -116,6 +117,7 @@ export var KupLanguageGeneric;
   KupLanguageGeneric["SWAP"] = "genericSwap";
   KupLanguageGeneric["TOGGLE"] = "genericToggle";
   KupLanguageGeneric["TODAY"] = "genericToday";
+  KupLanguageGeneric["TOP"] = "genericTop";
   KupLanguageGeneric["TOTALS_TABLE"] = "genericTotalsTable";
   KupLanguageGeneric["TRANSPOSE_DATA"] = "genericTransposeData";
   KupLanguageGeneric["VIEW_AS"] = "genericViewAs";