@sme.up/ketchup 5.2.0-SNAPSHOT → 5.2.0

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

@@ -5,6 +5,7 @@
   display: block;
   left: 0;
   outline: none;
+  pointer-events: none;
   position: fixed;
   transition: opacity 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms, transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms, -webkit-transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms;
   width: 100%;
@@ -37,6 +38,7 @@
 }
 .snackbar__text {
   padding: 14px 16px;
+  pointer-events: all;
   white-space: nowrap;
 }
 .snackbar__buttons {
@@ -49,11 +51,13 @@
   display: flex;
   justify-content: flex-end;
   margin-right: 8px;
+  pointer-events: all;
   width: 100%;
 }
 .snackbar__close {
   --kup-button-font-size: 11px;
   margin-left: 8px;
+  pointer-events: all;
 }
 
 @keyframes snackbar-show {

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

@@ -182,7 +182,6 @@ export class KupTree {
      * Reference to the column menu card.
      */
     this.columnMenuCard = null;
-    this.selectedColumn = '';
     this.clickTimeout = [];
     this.sizedColumns = undefined;
     this.filtersColumnMenuInstance = new FiltersColumnMenu();
@@ -558,8 +557,48 @@ export class KupTree {
     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 +637,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,6 +653,18 @@ 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);
@@ -621,6 +672,12 @@ export class KupTree {
       KupTreeExpansionMode.DROPDOWN ||
       (this.expansionMode.toLowerCase() === KupTreeExpansionMode.NODE &&
         !treeNodeData.expandable)) {
+      const td = e
+        ? this.getEventPath(e.target).find((el) => {
+          if (el.tagName === 'TD')
+            return el;
+        })
+        : null;
       // If this TreeNode is not disabled, then it can be selected and an event is emitted
       if (treeNodeData && !treeNodeData.disabled) {
         if (this.autoSelectionNodeMode)
@@ -634,11 +691,10 @@ export class KupTree {
             .split(',')
             .map((treeNodeIndex) => parseInt(treeNodeIndex)),
           treeNode: treeNodeData,
-          columnName: this.selectedColumn,
+          columnName: td ? td.dataset.column : null,
           auto: auto,
         });
       }
-      this.selectedColumn = '';
     }
     // If KupTreeExpansionMode.NODE then click is a collapse/expand click
     if (this.expansionMode.toLowerCase() === KupTreeExpansionMode.NODE) {
@@ -1013,13 +1069,20 @@ export class KupTree {
     }
     // When can be expanded OR selected
     if (!treeNodeData.disabled) {
-      treeNodeOptions['onClick'] = () => {
-        this.clickTimeout.push(setTimeout((e) => this.hdlTreeNodeClick(e, treeNodeData, treeNodePath, false), 300));
+      treeNodeOptions['onClick'] = (e) => {
+        // Note: event must be cloned
+        // otherwise inside setTimeout will be exiting the Shadow DOM scope(causing loss of information, including target).
+        const clone = {};
+        for (const key in e) {
+          clone[key] = e[key];
+        }
+        this.clickTimeout.push(setTimeout(() => this.hdlTreeNodeClick(clone, treeNodeData, treeNodePath, false), 300));
       };
     }
     // When a tree node is displayed as a table
     let treeNodeCells = null;
     let visibleCols = this.getVisibleColumns();
+    const _hasTooltip = !this.kupManager.objects.isEmptyKupObj(treeNodeData.obj);
     if (this.showColumns && visibleCols && visibleCols.length) {
       treeNodeCells = [];
       // Renders all the cells
@@ -1039,7 +1102,7 @@ export class KupTree {
             row: treeNodeData,
             setSizes: true,
           };
-          treeNodeCells.push(h("td", { class: `grid-cell` },
+          treeNodeCells.push(h("td", Object.assign({ class: `grid-cell`, "data-column": column.name }, this.getToolTipEventHandlers(treeNodeData, cell, _hasTooltip), { "data-cell": cell }),
             h(FCell, Object.assign({}, cellProps))));
         }
         else {
@@ -1047,7 +1110,6 @@ export class KupTree {
         }
       }
     }
-    const _hasTooltip = !this.kupManager.objects.isEmptyKupObj(treeNodeData.obj);
     let title = undefined;
     if (_hasTooltip && this.kupManager.debug.isDebug()) {
       title =
@@ -1079,7 +1141,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.getToolTipEventHandlers(treeNodeData, cell, _hasTooltip), { "data-row": treeNodeData }), this.asAccordion && !treeNodeDepth
         ? [
           treeNodeIcon,
           content,
@@ -1094,7 +1156,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));
   }
@@ -1429,9 +1491,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();
             } },

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-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;
     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,9 @@ export class KupManager {
         themeList = theme.list ? theme.list : null;
         themeName = theme.name ? theme.name : null;
       }
+      if (tooltip) {
+        tooltipDelay = tooltip.delay ? tooltip.delay : null;
+      }
     }
     this.data = new KupData();
     this.dates = new KupDates(datesLocale);
@@ -102,6 +113,7 @@ export class KupManager {
     };
     this.theme = new KupTheme(themeList, themeName);
     this.toolbar = new KupToolbar();
+    this.tooltip = new KupTooltip(tooltipDelay);
     document.addEventListener('pointerdown', (e) => {
       const paths = e.composedPath();
       const lastString = paths[0].innerText || paths[0].value;
@@ -218,6 +230,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,7 @@ export const fButtonUsers = [
   KupTagNames.CARD,
   KupTagNames.DATA_TABLE,
   KupTagNames.DROPDOWN_BUTTON,
+  KupTagNames.FORM_EDITOR,
   KupTagNames.SNACKBAR,
 ];
 /**
@@ -62,6 +63,7 @@ export const fImageUsers = [
   KupTagNames.CHIP,
   KupTagNames.DATA_TABLE,
   KupTagNames.DROPDOWN_BUTTON,
+  KupTagNames.FORM_EDITOR,
   KupTagNames.IMAGE,
   KupTagNames.LIST,
   KupTagNames.MAGIC_BOX,
@@ -88,6 +90,7 @@ export const fTextFieldUsers = [
   KupTagNames.COMBOBOX,
   KupTagNames.DATA_TABLE,
   KupTagNames.DATE_PICKER,
+  KupTagNames.NUMERIC_PICKER,
   KupTagNames.TEXT_FIELD,
   KupTagNames.TIME_PICKER,
   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,191 @@
+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) {
+    _KupTooltip_instances.add(this);
+    this.currentAnchor = null;
+    this.delay = null;
+    this.element = null;
+    this.managedElements = null;
+    this.timeout = null;
+    _KupTooltip_clickCb.set(this, null);
+    this.delay = delay ? delay : 125;
+    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;
+        requestAnimationFrame(anchor.kupTooltip.enter.bind(anchor.kupTooltip.enter, e));
+      };
+      const overHandler = (anchor) => {
+        requestAnimationFrame(anchor.kupTooltip.over.bind(anchor.kupTooltip.over, e));
+      };
+      const leaveHandler = () => {
+        requestAnimationFrame(this.currentAnchor.kupTooltip.leave.bind(this.currentAnchor.kupTooltip.leave, e));
+      };
+      // 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 {
+          if (this.currentAnchor.kupTooltip.leave) {
+            leaveHandler();
+          }
+        }
+        this.currentAnchor = null;
+      }
+      else if (!this.timeout) {
+        for (let index = 0; index < paths.length; index++) {
+          const element = paths[index];
+          if (this.managedElements.has(element)) {
+            // 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 (element.kupTooltip.over) {
+                overHandler(element);
+              }
+              // Otherwise, the mouse enter callback will be invoked
+            }
+            else {
+              this.currentAnchor = element;
+              if (element.kupTooltip.enter) {
+                if (this.delay) {
+                  this.timeout = setTimeout(enterHandler.bind(enterHandler, element), this.delay);
+                }
+                else {
+                  enterHandler(element);
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+  }
+  hide() {
+    if (this.element) {
+      this.element.menuVisible = false;
+      dom.ketchup.dynamicPosition.stop(this.element);
+      dom.ketchup.removeClickCallback(__classPrivateFieldGet(this, _KupTooltip_clickCb, "f"));
+    }
+  }
+  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 {(e: PointerEvent) => void} cbEnter - Callback invoked when hovering on the the element for the first time.
+   * @param {(e: PointerEvent) => void} cbOver - Callback invoked when hovering on the element.
+   * @param {(e: PointerEvent) => void} cbLeave - Callback invoked when leaving the element.
+   */
+  register(element, cbEnter, cbOver, cbLeave) {
+    this.managedElements.add(element);
+    const kupTooltip = {
+      enter: cbEnter,
+      leave: cbLeave,
+      over: cbOver,
+    };
+    element.kupTooltip = kupTooltip;
+  }
+  /**
+   * 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,6 +24,7 @@ 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";
@@ -32,6 +33,7 @@ export var KupTagNames;
   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

@@ -342,7 +342,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-55b4278f.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 { k as unformattedStringToFormattedStringNumber, m as unformattedStringToFormattedStringTime, o as unformattedStringToFormattedStringTimestamp, d as stringToNumber } from './utils-e4ea8310.js';
+import { d as KupDatesFormats } from './kup-manager-25d71df2.js';
 
 const dom = document.documentElement;
 // -------------

package/dist/esm/{f-button-7e7607d8.js → f-button-ea5059eb.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-7bea0647.js';
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */