@sme.up/ketchup 5.2.0-SNAPSHOT → 6.0.0

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-debug/kup-debug.js

@@ -279,6 +279,7 @@ export class KupDebug {
             break;
           case 'kup-debug-locale-changer':
             dom.ketchup.dates.setLocale(compEvent.detail.value);
+            dom.ketchup.math.setLocale(compEvent.detail.value);
             break;
           case 'kup-debug-theme-changer':
             dom.ketchup.theme.set(compEvent.detail.value);

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";

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

@@ -15,6 +15,9 @@ import { KupDebugCategory } from '../kup-debug/kup-debug-declarations';
 import { KupSearch } from '../kup-search/kup-search';
 import { KupMathLocales } from '../kup-math/kup-math-declarations';
 import { KupMath } from '../kup-math/kup-math';
+import { KupTooltip } from '../kup-tooltip/kup-tooltip';
+import { setAssetPath } from '@stencil/core';
+import html2canvas from 'html2canvas';
 const dom = document.documentElement;
 /**
  * This class controls every other Ketchup utility suite.
@@ -25,8 +28,9 @@ export class KupManager {
    * Initializes KupManager.
    */
   constructor(overrides) {
-    let datesLocale = null, debugActive = null, debugAutoprint = null, debugLogLimit = null, dialogRestrictContainer = null, dialogZIndex = null, languageList = null, languageName = null, objectsList = null, scrollOnHoverDelay = null, scrollOnHoverStep = null, themeList = null, themeName = null;
+    let datesLocale = null, debugActive = null, debugAutoprint = null, debugLogLimit = null, dialogRestrictContainer = null, dialogZIndex = null, languageList = null, languageName = null, objectsList = null, scrollOnHoverDelay = null, scrollOnHoverStep = null, themeList = null, themeName = null, tooltipDelay = null, tooltipFCellCallbacks = null;
     if (overrides) {
+      const assetsPath = overrides.assetsPath;
       const dates = overrides.dates;
       const debug = overrides.debug;
       const interact = overrides.interact;
@@ -34,6 +38,10 @@ export class KupManager {
       const objects = overrides.objects;
       const scrollOnHover = overrides.scrollOnHover;
       const theme = overrides.theme;
+      const tooltip = overrides.tooltip;
+      if (assetsPath) {
+        setAssetPath(assetsPath);
+      }
       if (dates) {
         datesLocale = dates.locale ? dates.locale : null;
       }
@@ -67,6 +75,12 @@ export class KupManager {
         themeList = theme.list ? theme.list : null;
         themeName = theme.name ? theme.name : null;
       }
+      if (tooltip) {
+        tooltipDelay = tooltip.delay ? tooltip.delay : null;
+        tooltipFCellCallbacks = tooltip.fCellCallbacks
+          ? tooltip.fCellCallbacks
+          : null;
+      }
     }
     this.data = new KupData();
     this.dates = new KupDates(datesLocale);
@@ -102,6 +116,7 @@ export class KupManager {
     };
     this.theme = new KupTheme(themeList, themeName);
     this.toolbar = new KupToolbar();
+    this.tooltip = new KupTooltip(tooltipDelay, tooltipFCellCallbacks);
     document.addEventListener('pointerdown', (e) => {
       const paths = e.composedPath();
       const lastString = paths[0].innerText || paths[0].value;
@@ -218,6 +233,21 @@ export class KupManager {
       this.utilities.clickCallbacks.add(cb);
     }
   }
+  /**
+   * Rasterizes an HTMLElement, transforming into a canvas.
+   * @param {HTMLElement} el - Element to rasterize.
+   * @returns {HTMLCanvasElement} - Canvas created from the HTMLElement.
+   *
+   * CSS Mask is not supported:
+   * @see https://github.com/niklasvh/html2canvas/issues/2814
+   * Warning in console about sourcemap, claimed to be solved here but...:
+   * @see https://github.com/niklasvh/html2canvas/pull/2787/files
+   */
+  async rasterize(el, options) {
+    return html2canvas(el, options).then((canvas) => {
+      return canvas;
+    });
+  }
   /**
    * Removes the given click callback.
    * @param {KupManagerClickCb} cb - The callback to remove.

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

@@ -6,7 +6,7 @@ import 'numeral/locales/it';
 import 'numeral/locales/pl';
 import 'numeral/locales/ru';
 import { KupDebugCategory } from '../kup-debug/kup-debug-declarations';
-import { KupMathLocales } from './kup-math-declarations';
+import { KupMathLocales, } from './kup-math-declarations';
 import { customFormula, normalDistributionFormula } from './kup-math-helper';
 const dom = document.documentElement;
 /**
@@ -26,6 +26,16 @@ export class KupMath {
         return normalDistributionFormula(average, variance, x);
       },
     };
+    this.numbers = {
+      toLocaleString(value) {
+        const maximumFractionDigits = 14;
+        if (value == null || value == '')
+          return value;
+        return Number(value).toLocaleString(dom.ketchup.math.locale, {
+          maximumFractionDigits: maximumFractionDigits,
+        });
+      },
+    };
     this.locale = locale ? locale : KupMathLocales.en;
     this.managedComponents = new Set();
     this.numeral = numeral;

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

@@ -14,6 +14,8 @@ export const fButtonUsers = [
   KupTagNames.CARD,
   KupTagNames.DATA_TABLE,
   KupTagNames.DROPDOWN_BUTTON,
+  KupTagNames.FORM_EDITOR,
+  KupTagNames.IMAGE_LIST,
   KupTagNames.SNACKBAR,
 ];
 /**
@@ -62,7 +64,9 @@ export const fImageUsers = [
   KupTagNames.CHIP,
   KupTagNames.DATA_TABLE,
   KupTagNames.DROPDOWN_BUTTON,
+  KupTagNames.FORM_EDITOR,
   KupTagNames.IMAGE,
+  KupTagNames.IMAGE_LIST,
   KupTagNames.LIST,
   KupTagNames.MAGIC_BOX,
   KupTagNames.SNACKBAR,
@@ -88,6 +92,7 @@ export const fTextFieldUsers = [
   KupTagNames.COMBOBOX,
   KupTagNames.DATA_TABLE,
   KupTagNames.DATE_PICKER,
+  KupTagNames.NUMERIC_PICKER,
   KupTagNames.TEXT_FIELD,
   KupTagNames.TIME_PICKER,
   KupTagNames.TREE,
@@ -98,6 +103,7 @@ export const fTextFieldUsers = [
 export const rippleUsers = [
   KupTagNames.ACCORDION,
   KupTagNames.CARD,
+  KupTagNames.IMAGE_LIST,
   KupTagNames.TAB_BAR,
   KupTagNames.TREE,
 ];

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,224 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) 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 _KupTooltip_instances, _KupTooltip_clickCb, _KupTooltip_dynPos, _KupTooltip_create, _KupTooltip_setOptions;
+import { KupDebugCategory } from '../kup-debug/kup-debug-declarations';
+const dom = document.documentElement;
+/**
+ * Handles application-wide tooltip using card component.
+ * @module KupTooltip
+ */
+export class KupTooltip {
+  /**
+   * Initializes KupTooltip.
+   */
+  constructor(delay, fCellCallbacks) {
+    _KupTooltip_instances.add(this);
+    this.currentAnchor = null;
+    this.delay = null;
+    this.element = null;
+    this.fCellCallbacks = null;
+    this.managedElements = null;
+    this.timeout = null;
+    _KupTooltip_clickCb.set(this, null);
+    this.delay = delay ? delay : 125;
+    this.fCellCallbacks = fCellCallbacks ? fCellCallbacks : null;
+    this.managedElements = new Set();
+    document.addEventListener('pointermove', (e) => {
+      const paths = e.composedPath();
+      // Leaving the function when hovering on the tooltip itself
+      if (paths.includes(this.element)) {
+        return;
+      }
+      const enterHandler = (anchor) => {
+        this.timeout = null;
+        const callbacks = anchor.classList.contains('f-cell')
+          ? this.fCellCallbacks
+          : anchor.kupTooltip;
+        requestAnimationFrame(callbacks.enter.bind(callbacks.enter, e, anchor));
+      };
+      const overHandler = (anchor) => {
+        const callbacks = anchor.classList.contains('f-cell')
+          ? this.fCellCallbacks
+          : anchor.kupTooltip;
+        requestAnimationFrame(callbacks.over.bind(callbacks.over, e, anchor));
+      };
+      const leaveHandler = (anchor) => {
+        const callbacks = this.currentAnchor.classList.contains('f-cell')
+          ? this.fCellCallbacks
+          : this.currentAnchor.kupTooltip;
+        requestAnimationFrame(callbacks.leave.bind(callbacks.leave, e, anchor));
+      };
+      // If the current anchor exists and is not included in the event path,
+      // the leaving callback is fired.
+      if (this.currentAnchor && !paths.includes(this.currentAnchor)) {
+        if (this.timeout) {
+          clearTimeout(this.timeout);
+          this.timeout = null;
+        }
+        else {
+          const callbacks = this.currentAnchor.kupTooltip
+            ? this.currentAnchor.kupTooltip
+            : this.fCellCallbacks;
+          if (callbacks.leave) {
+            leaveHandler(this.currentAnchor);
+          }
+        }
+        this.currentAnchor = null;
+      }
+      else if (!this.timeout) {
+        for (let index = 0; index < paths.length; index++) {
+          const element = paths[index];
+          if (element &&
+            (this.managedElements.has(element) ||
+              (this.fCellCallbacks &&
+                element.classList &&
+                element.classList.contains('f-cell')))) {
+            const callbacks = element.kupTooltip
+              ? element.kupTooltip
+              : this.fCellCallbacks;
+            // If the current anchor is the same as the registered element found
+            // in the path, the mouse over function is invoked
+            if (this.currentAnchor === element) {
+              if (callbacks.over) {
+                overHandler(element);
+              }
+              // Otherwise, the mouse enter callback will be invoked
+            }
+            else {
+              this.currentAnchor = element;
+              if (callbacks.enter) {
+                if (this.delay) {
+                  this.timeout = setTimeout(enterHandler.bind(enterHandler, element), this.delay);
+                }
+                else {
+                  enterHandler(element);
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+  }
+  /**
+   * Destroys the tooltip.
+   */
+  destroy() {
+    if (this.element) {
+      this.element.remove();
+      this.element = null;
+    }
+  }
+  /**
+   * Hides the tooltip.
+   */
+  hide() {
+    if (this.element) {
+      this.element.menuVisible = false;
+      dom.ketchup.dynamicPosition.stop(this.element);
+      dom.ketchup.removeClickCallback(__classPrivateFieldGet(this, _KupTooltip_clickCb, "f"));
+    }
+  }
+  /**
+   * Displays the tooltip.
+   * @param {KupDynamicPositionAnchor} anchor - Anchor point of the tooltip: HTML element or x/y coordinates.
+   * @param {Partial<HTMLKupCardElement>} options - Props/attributes of the tooltip.
+   */
+  show(anchor, options) {
+    // Creates the card or updates it with new options
+    if (!this.element) {
+      __classPrivateFieldGet(this, _KupTooltip_instances, "m", _KupTooltip_create).call(this, options);
+    }
+    else if (options) {
+      __classPrivateFieldGet(this, _KupTooltip_instances, "m", _KupTooltip_setOptions).call(this, options);
+    }
+    // If an anchor was provided, initializes or updates dynamic positioning
+    if (anchor) {
+      __classPrivateFieldGet(this, _KupTooltip_instances, "m", _KupTooltip_dynPos).call(this, anchor);
+    }
+    // If the tooltip is already visible, it's pointless to go on
+    if (this.element.menuVisible) {
+      return;
+    }
+    // If the dynamic positioning is still to be registered, a warning is thrown
+    if (!dom.ketchup.dynamicPosition.isRegistered(this.element)) {
+      dom.ketchup.debug.logMessage('kup-tooltip', 'Unable to display KupTooltip without specifying a valid anchor point.', KupDebugCategory.WARNING);
+      return;
+    }
+    this.element.menuVisible = true;
+    dom.ketchup.addClickCallback(__classPrivateFieldGet(this, _KupTooltip_clickCb, "f"), true);
+  }
+  /**
+   * Returns whether an element was previously registered or not.
+   * @param {KupTooltipAnchor} element - Element to test.
+   * @returns {boolean} True if the element was registered.
+   */
+  isRegistered(element) {
+    return !this.managedElements
+      ? false
+      : this.managedElements.has(element);
+  }
+  /**
+   * Registers an HTMLElement as KupTooltipAnchor, triggering callback invocation on mouse over.
+   * @param {KupTooltipAnchor} element - The HTML element to be registered.
+   * @param {KupTooltipCallbacks} options - Optional callbacks.
+   */
+  register(element, options) {
+    this.managedElements.add(element);
+    if (options !== null && options) {
+      element.kupTooltip = options;
+    }
+  }
+  /**
+   * Unregisters an HTMLElement, preventing its attached callback from being invoked.
+   *
+   * @param {KupTooltipAnchor} element - - The HTML element to be unregistered.
+   */
+  unregister(element) {
+    if (this.managedElements) {
+      this.managedElements.delete(element);
+    }
+  }
+}
+_KupTooltip_clickCb = new WeakMap(), _KupTooltip_instances = new WeakSet(), _KupTooltip_dynPos = function _KupTooltip_dynPos(anchor) {
+  if (dom.ketchup.dynamicPosition.isRegistered(this.element)) {
+    dom.ketchup.dynamicPosition.changeAnchor(this.element, anchor);
+  }
+  else {
+    dom.ketchup.dynamicPosition.register(this.element, anchor, null, null, true);
+  }
+  dom.ketchup.dynamicPosition.start(this.element);
+}, _KupTooltip_create = function _KupTooltip_create(options) {
+  this.element = document.createElement('kup-card');
+  this.element.id = 'kup-tooltip';
+  this.element.isMenu = true;
+  this.element.layoutNumber = 15;
+  this.element.sizeX = 'auto';
+  this.element.sizeY = 'auto';
+  if (options) {
+    __classPrivateFieldGet(this, _KupTooltip_instances, "m", _KupTooltip_setOptions).call(this, options);
+  }
+  document.body.appendChild(this.element);
+  __classPrivateFieldSet(this, _KupTooltip_clickCb, {
+    cb: () => {
+      this.hide();
+    },
+    el: this.element,
+  }, "f");
+}, _KupTooltip_setOptions = function _KupTooltip_setOptions(options) {
+  for (const key in options) {
+    if (Object.prototype.hasOwnProperty.call(options, key)) {
+      const prop = options[key];
+      this.element[key] = prop;
+    }
+  }
+};

package/dist/collection/types/GenericTypes.js

@@ -24,14 +24,17 @@ export var KupTagNames;
   KupTagNames["DRAWER"] = "KUP-DRAWER";
   KupTagNames["DROPDOWN_BUTTON"] = "KUP-DROPDOWN-BUTTON";
   KupTagNames["FIELD"] = "KUP-FIELD";
+  KupTagNames["FORM_EDITOR"] = "KUP-FORM-EDITOR";
   KupTagNames["GAUGE"] = "KUP-GAUGE";
   KupTagNames["GRID"] = "KUP-GRID";
   KupTagNames["IFRAME"] = "KUP-IFRAME";
   KupTagNames["IMAGE"] = "KUP-IMAGE";
+  KupTagNames["IMAGE_LIST"] = "KUP-IMAGE-LIST";
   KupTagNames["LAZY"] = "KUP-LAZY";
   KupTagNames["LIST"] = "KUP-LIST";
   KupTagNames["MAGIC_BOX"] = "KUP-MAGIC-BOX";
   KupTagNames["NAV_BAR"] = "KUP-NAV-BAR";
+  KupTagNames["NUMERIC_PICKER"] = "KUP-NUMERIC-PICKER";
   KupTagNames["PROBE"] = "KUP-PROBE";
   KupTagNames["PROGRESS_BAR"] = "KUP-PROGRESS-BAR";
   KupTagNames["QLIK"] = "KUP-QLIK";

package/dist/collection/utils/kup-column-menu/kup-column-menu.js

@@ -1,5 +1,4 @@
 import { KupDynamicPositionPlacement, } from '../../managers/kup-dynamic-position/kup-dynamic-position-declarations';
-import { unsetTooltip } from '../helpers';
 import { FiltersColumnMenu } from '../filters/filters-column-menu';
 import { FilterInterval, } from '../filters/filters-declarations';
 import { getValueForDisplay, getValueForDisplay2 } from '../cell-utils';
@@ -26,12 +25,8 @@ export class KupColumnMenu {
    * Function called by the component when the column menu must be opened.
    * @param {KupDataTable | KupTree} comp - Component using the column menu.
    * @param {string} column - Name of the column.
-   * @param {KupTooltip} tooltip - Tooltip of the component, when present.
    */
-  open(comp, column, tooltip) {
-    if (tooltip) {
-      unsetTooltip(tooltip);
-    }
+  open(comp, column) {
     this.filtersColumnMenuInstance.resetTextualFilters(comp.filters, column);
   }
   /**
@@ -308,8 +303,8 @@ export class KupColumnMenu {
     const data = props[0].data;
     if (comp.showFilters) {
       data.push({
-        text: dom.ketchup.language.translate(KupLanguageGeneric.FILTERS),
-        value: KupLanguageGeneric.FILTERS,
+        id: KupLanguageGeneric.FILTERS,
+        value: dom.ketchup.language.translate(KupLanguageGeneric.FILTERS),
       });
     }
     if ((comp.enableExtraColumns &&
@@ -317,14 +312,15 @@ export class KupColumnMenu {
         dom.ketchup.objects.canObjsHaveExtraColumns(column.objs))) ||
       comp.removableColumns) {
       data.push({
-        text: dom.ketchup.language.translate(KupLanguageColumn.COLUMNS),
-        value: KupLanguageColumn.COLUMNS,
+        id: KupLanguageColumn.COLUMNS,
+        value: dom.ketchup.language.translate(KupLanguageColumn.COLUMNS),
       });
     }
     if (!FiltersColumnMenu.isTree(comp)) {
       data.push({
         icon: 'settings',
-        value: KupLanguageGeneric.SETTINGS,
+        id: KupLanguageGeneric.SETTINGS,
+        value: '',
       });
     }
     if (data.length > 0) {
@@ -342,7 +338,7 @@ export class KupColumnMenu {
     let props = [];
     if (comp.showFilters) {
       if (this.filtersColumnMenuInstance.isColumnFiltrableByInterval(column)) {
-        props.concat(this.prepIntervalTextfield(comp, column));
+        props = props.concat(this.prepIntervalTextfield(comp, column));
       }
       else if (dom.ketchup.objects.isStringObject(column.obj)) {
         let filterInitialValue = this.filtersColumnMenuInstance.getTextFilterValue(comp.filters, column.name);

package/dist/esm/{cell-utils-69f75e2e.js → cell-utils-964da6b5.js}

@@ -1,5 +1,5 @@
-import { k as unformattedStringToFormattedStringNumber, m as unformattedStringToFormattedStringTime, o as unformattedStringToFormattedStringTimestamp, d as stringToNumber } from './utils-35c7a90d.js';
-import { d as KupDatesFormats } from './kup-manager-0ab94726.js';
+import { u as unformattedStringToFormattedStringNumber, d as unformattedStringToFormattedStringTime, e as unformattedStringToFormattedStringTimestamp, h as stringToNumber } from './utils-d7e4b3c2.js';
+import { d as KupDatesFormats } from './kup-manager-58b075b4.js';
 
 const dom = document.documentElement;
 // -------------
@@ -157,4 +157,4 @@ function localCompareAsInJava(t1, t2) {
   return t1Length - t2Length;
 }
 
-export { getValueForDisplay2 as a, getCellValueForDisplay as b, getColumnByName as c, compareValues as d, compareCell as e, formatToNumber as f, getValueForDisplay as g };
+export { getValueForDisplay2 as a, getValueForDisplay as b, getCellValueForDisplay as c, compareValues as d, compareCell as e, formatToNumber as f, getColumnByName as g };

package/dist/esm/{component-c4eb6153.js → component-b1bedf1d.js}

@@ -1,4 +1,4 @@
-import { _ as __spreadArray, a as __read, b as __extends, c as __assign, d as __values } from './tslib.es6-8f2d44b6.js';
+import { c as __spreadArray, d as __read, _ as __extends, a as __assign, b as __values } from './tslib.es6-3eea2234.js';
 
 /**
  * @license
@@ -256,6 +256,31 @@ function matches(element, selector) {
         || element.msMatchesSelector;
     return nativeMatches.call(element, selector);
 }
+/**
+ * Used to compute the estimated scroll width of elements. When an element is
+ * hidden due to display: none; being applied to a parent element, the width is
+ * returned as 0. However, the element will have a true width once no longer
+ * inside a display: none context. This method computes an estimated width when
+ * the element is hidden or returns the true width when the element is visble.
+ * @param {Element} element the element whose width to estimate
+ */
+function estimateScrollWidth(element) {
+    // Check the offsetParent. If the element inherits display: none from any
+    // parent, the offsetParent property will be null (see
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent).
+    // This check ensures we only clone the node when necessary.
+    var htmlEl = element;
+    if (htmlEl.offsetParent !== null) {
+        return htmlEl.scrollWidth;
+    }
+    var clone = htmlEl.cloneNode(true);
+    clone.style.setProperty('position', 'absolute');
+    clone.style.setProperty('transform', 'translate(-9999px, -9999px)');
+    document.documentElement.appendChild(clone);
+    var scrollWidth = clone.scrollWidth;
+    document.documentElement.removeChild(clone);
+    return scrollWidth;
+}
 
 /**
  * @license
@@ -990,4 +1015,4 @@ var MDCRipple = /** @class */ (function (_super) {
     return MDCRipple;
 }(MDCComponent));
 
-export { MDCRipple as M, MDCRippleFoundation as a };
+export { MDCRipple as M, MDCFoundation as a, MDCComponent as b, applyPassive as c, MDCRippleFoundation as d, estimateScrollWidth as e, matches as m };

package/dist/esm/{f-button-7e7607d8.js → f-button-871a544b.js}

@@ -1,6 +1,6 @@
-import { h } from './index-aeec9835.js';
+import { h } from './index-baeab1ac.js';
 import { F as FButtonStyling } from './f-button-declarations-b1b4cac4.js';
-import { F as FImage } from './f-image-de331954.js';
+import { F as FImage } from './f-image-c468d8ae.js';
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */