@sme.up/ketchup 7.5.0-SNAPSHOT → 8.0.1

package/dist/collection/components/kup-text-field/kup-text-field-declarations.js

@@ -4,11 +4,13 @@
  */
 export var KupTextFieldProps;
 (function (KupTextFieldProps) {
+  KupTextFieldProps["allowNegative"] = "When true, could be input negative numbers. It has effect only with number input type.";
   KupTextFieldProps["customStyle"] = "Custom style of the component.";
   KupTextFieldProps["decimals"] = "Number of decimals (should be used when inputType is number).";
   KupTextFieldProps["disabled"] = "When set to true, the component is disabled.";
   KupTextFieldProps["emitSubmitEventOnEnter"] = "When the text field is part of the autocomplete component and the list is opened, enter key selects the item and doesn't submit.";
   KupTextFieldProps["fullWidth"] = "When set to true, the component will be rendered at full width.";
+  KupTextFieldProps["group"] = "When true, the number will be formatted with group separator. It has effect only with number input type.";
   KupTextFieldProps["helper"] = "When set, its content will be shown as a help text below the field.";
   KupTextFieldProps["helperEnabled"] = "When true, the helper will be displayed.";
   KupTextFieldProps["helperWhenFocused"] = "When set, the helper will be shown only when the field is focused.";
@@ -16,6 +18,7 @@ export var KupTextFieldProps;
   KupTextFieldProps["initialValue"] = "Sets the initial value of the component";
   KupTextFieldProps["inputMode"] = "The HTML inputmode of the input element. It has no effect on text areas.";
   KupTextFieldProps["inputType"] = "The HTML type of the input element. It has no effect on text areas.";
+  KupTextFieldProps["integers"] = "Number of integers (should be used when inputType is number).";
   KupTextFieldProps["isClearable"] = "Enables a clear trailing icon.";
   KupTextFieldProps["label"] = "When set, its content will be shown as a label.";
   KupTextFieldProps["leadingLabel"] = "When set to true, the label will be on the left of the component.";

package/dist/collection/components/kup-text-field/kup-text-field.js

@@ -1,23 +1,35 @@
+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 _KupTextField_instances, _KupTextField_getValueForOutput, _KupTextField_setValueFromEventTaget;
 import { forceUpdate, h, Host, } from '@stencil/core';
 import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { FTextField } from '../../f-components/f-text-field/f-text-field';
 import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
 import { KupTextFieldProps, } from './kup-text-field-declarations';
 import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
-import { getProps, setProps } from '../../utils/utils';
+import { getProps, setProps, unformattedStringToFormattedStringNumber, } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
+import { formattedStringToUnformattedStringNumber } from '../../utils/utils';
 export class KupTextField {
   constructor() {
+    _KupTextField_instances.add(this);
     /**
      * Instance of the KupManager class.
      */
     this.kupManager = kupManagerInstance();
     this.value = '';
+    this.allowNegative = false;
     this.customStyle = '';
     this.decimals = null;
     this.disabled = false;
     this.emitSubmitEventOnEnter = true;
     this.fullWidth = false;
+    this.group = false;
     this.helper = null;
     this.helperEnabled = true;
     this.helperWhenFocused = false;
@@ -25,6 +37,7 @@ export class KupTextField {
     this.initialValue = '';
     this.inputMode = null;
     this.inputType = 'text';
+    this.integers = null;
     this.isClearable = false;
     this.label = null;
     this.leadingLabel = false;
@@ -41,35 +54,36 @@ export class KupTextField {
   }
   onKupBlur(event) {
     const { target } = event;
+    __classPrivateFieldGet(this, _KupTextField_instances, "m", _KupTextField_setValueFromEventTaget).call(this, target);
     this.kupBlur.emit({
       comp: this,
       id: this.rootElement.id,
-      value: target.value,
+      value: this.value,
     });
   }
   onKupChange(event) {
     const { target } = event;
-    this.value = target.value;
+    __classPrivateFieldGet(this, _KupTextField_instances, "m", _KupTextField_setValueFromEventTaget).call(this, target);
     this.kupChange.emit({
       comp: this,
       id: this.rootElement.id,
-      value: target.value,
+      value: this.value,
     });
   }
   onKupClick(event) {
     const { target } = event;
+    __classPrivateFieldGet(this, _KupTextField_instances, "m", _KupTextField_setValueFromEventTaget).call(this, target);
     this.kupClick.emit({
       comp: this,
       id: this.rootElement.id,
-      value: target.value,
+      value: this.value,
     });
   }
-  onKupFocus(event) {
-    const { target } = event;
+  onKupFocus(_event) {
     this.kupFocus.emit({
       comp: this,
       id: this.rootElement.id,
-      value: target.value,
+      value: this.value,
     });
   }
   onKupInput(event) {
@@ -97,12 +111,14 @@ export class KupTextField {
     });
   }
   onKeyDown(event) {
+    const { target } = event;
     if (event.key === 'Enter') {
       if (this.emitSubmitEventOnEnter == true) {
+        __classPrivateFieldGet(this, _KupTextField_instances, "m", _KupTextField_setValueFromEventTaget).call(this, target);
         this.kupTextFieldSubmit.emit({
           comp: this,
           id: this.rootElement.id,
-          value: this.inputEl.value,
+          value: this.value,
         });
       }
     }
@@ -122,6 +138,9 @@ export class KupTextField {
    * Returns the component's internal value.
    */
   async getValue() {
+    if (this.inputType == 'number') {
+      return formattedStringToUnformattedStringNumber(this.value, '');
+    }
     return this.value;
   }
   /**
@@ -149,7 +168,7 @@ export class KupTextField {
   async setValue(value) {
     this.value = value;
     try {
-      this.inputEl.value = value;
+      this.inputEl.value = __classPrivateFieldGet(this, _KupTextField_instances, "m", _KupTextField_getValueForOutput).call(this);
     }
     catch (error) {
       this.kupManager.debug.logMessage(this, "Couldn't set value on input element: '" + value + "'", KupDebugCategory.WARNING);
@@ -185,6 +204,7 @@ export class KupTextField {
   }
   render() {
     const props = {
+      allowNegative: this.allowNegative,
       danger: this.rootElement.classList.contains('kup-danger')
         ? true
         : false,
@@ -194,6 +214,7 @@ export class KupTextField {
         ? true
         : false,
       fullWidth: this.fullWidth,
+      group: this.group,
       helper: this.helper,
       helperEnabled: this.helperEnabled,
       helperWhenFocused: this.helperWhenFocused,
@@ -203,6 +224,7 @@ export class KupTextField {
         : false,
       inputMode: this.inputMode,
       inputType: this.inputType,
+      integers: this.integers,
       isClearable: this.isClearable,
       label: this.label,
       leadingLabel: this.leadingLabel,
@@ -257,6 +279,27 @@ export class KupTextField {
   }
   static get properties() {
     return {
+      "allowNegative": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "When true, could be input negative numbers (should be used when inputType is number)."
+        },
+        "attribute": "allow-negative",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "customStyle": {
         "type": "string",
         "mutable": false,
@@ -365,6 +408,27 @@ export class KupTextField {
         "reflect": true,
         "defaultValue": "false"
       },
+      "group": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "When true, the number will be formatted with group separator (should be used when inputType is number)."
+        },
+        "attribute": "group",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "helper": {
         "type": "string",
         "mutable": false,
@@ -512,6 +576,27 @@ export class KupTextField {
         "reflect": false,
         "defaultValue": "'text'"
       },
+      "integers": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Number of integers (should be used when inputType is number)."
+        },
+        "attribute": "integers",
+        "reflect": false,
+        "defaultValue": "null"
+      },
       "isClearable": {
         "type": "boolean",
         "mutable": false,
@@ -1089,3 +1174,17 @@ export class KupTextField {
   }
   static get elementRef() { return "rootElement"; }
 }
+_KupTextField_instances = new WeakSet(), _KupTextField_getValueForOutput = function _KupTextField_getValueForOutput() {
+  if (this.value == null || this.value.trim() == '') {
+    return '';
+  }
+  let v1 = unformattedStringToFormattedStringNumber(this.value, this.decimals, '');
+  return v1;
+}, _KupTextField_setValueFromEventTaget = function _KupTextField_setValueFromEventTaget(target) {
+  if (this.inputType == 'number') {
+    this.value = formattedStringToUnformattedStringNumber(target.value, '');
+  }
+  else {
+    this.value = target.value;
+  }
+};

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

@@ -1,3 +1,11 @@
+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 _KupTree_kupManager;
 import { forceUpdate, getAssetPath, h, Host, } from '@stencil/core';
 import { TotalLabel, TotalMode, } from './../kup-data-table/kup-data-table-declarations';
 import { KupTreeProps, treeMainColumnName, KupTreeExpansionMode, } from './kup-tree-declarations';
@@ -32,7 +40,7 @@ export class KupTree {
     /**
      * Instance of the KupManager class.
      */
-    this.kupManager = kupManagerInstance();
+    _KupTree_kupManager.set(this, kupManagerInstance());
     /**
      * Reference to the column menu card.
      */
@@ -97,31 +105,31 @@ export class KupTree {
   persistState() {
     if (this.store && this.stateId) {
       let somethingChanged = false;
-      if (!this.kupManager.objects.deepEqual(this.state.filters, this.filters)) {
+      if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.filters, this.filters)) {
         this.state.filters = Object.assign({}, this.filters);
         somethingChanged = true;
       }
-      if (!this.kupManager.objects.deepEqual(this.state.density, this.density)) {
+      if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.density, this.density)) {
         this.state.density = this.density;
         somethingChanged = true;
       }
-      if (!this.kupManager.objects.deepEqual(this.state.showFilters, this.showFilters)) {
+      if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.showFilters, this.showFilters)) {
         this.state.showFilters = this.showFilters;
         somethingChanged = true;
       }
-      if (!this.kupManager.objects.deepEqual(this.state.showFooter, this.showFooter)) {
+      if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.showFooter, this.showFooter)) {
         this.state.showFooter = this.showFooter;
         somethingChanged = true;
       }
-      if (!this.kupManager.objects.deepEqual(this.state.totals, this.totals)) {
+      if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.totals, this.totals)) {
         this.state.totals = Object.assign({}, this.totals);
         somethingChanged = true;
       }
-      if (!this.kupManager.objects.deepEqual(this.state.globalFilter, this.globalFilter)) {
+      if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.globalFilter, this.globalFilter)) {
         this.state.globalFilter = this.globalFilter;
         somethingChanged = true;
       }
-      if (!this.kupManager.objects.deepEqual(this.state.globalFilterValue, this.globalFilterValue)) {
+      if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.deepEqual(this.state.globalFilterValue, this.globalFilterValue)) {
         this.state.globalFilterValue = this.globalFilterValue;
         somethingChanged = true;
       }
@@ -252,7 +260,7 @@ export class KupTree {
    * @param {KupDataColumn} column - Column to hide.
    */
   async hideColumn(column) {
-    this.kupManager.data.column.hide(this.columns, [column.name]);
+    __classPrivateFieldGet(this, _KupTree_kupManager, "f").data.column.hide(this.columns, [column.name]);
     this.kupColumnRemove.emit({
       comp: this,
       id: this.rootElement.id,
@@ -336,21 +344,21 @@ export class KupTree {
     return this.treeColumnVisible;
   }
   checkScrollOnHover() {
-    if (!this.kupManager.scrollOnHover.isRegistered(this.treeWrapperRef)) {
+    if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").scrollOnHover.isRegistered(this.treeWrapperRef)) {
       if (this.scrollOnHover) {
-        this.kupManager.scrollOnHover.register(this.treeWrapperRef);
+        __classPrivateFieldGet(this, _KupTree_kupManager, "f").scrollOnHover.register(this.treeWrapperRef);
       }
     }
     else {
       if (!this.scrollOnHover) {
-        this.kupManager.scrollOnHover.unregister(this.treeWrapperRef);
+        __classPrivateFieldGet(this, _KupTree_kupManager, "f").scrollOnHover.unregister(this.treeWrapperRef);
       }
     }
   }
   onKupTreeNodeDblClick(treeNodeData, treeNodePath) {
     for (let index = 0; index < this.clickTimeout.length; index++) {
       clearTimeout(this.clickTimeout[index]);
-      this.kupManager.debug.logMessage(this, 'Cleared hdlTreeNodeClick timeout(' +
+      __classPrivateFieldGet(this, _KupTree_kupManager, "f").debug.logMessage(this, 'Cleared hdlTreeNodeClick timeout(' +
         this.clickTimeout[index] +
         ').');
     }
@@ -539,7 +547,7 @@ export class KupTree {
   }
   contextMenuHandler(e) {
     e.preventDefault();
-    const details = this.getEventDetails(this.getEventPath(e.target), e);
+    const details = this.getEventDetails(__classPrivateFieldGet(this, _KupTree_kupManager, "f").getEventPath(e.target, this.rootElement), e);
     if (details.area === 'header') {
       if (details.th && details.column) {
         this.openColumnMenu(details.column.name);
@@ -555,18 +563,6 @@ 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) {
     if (this.expansionMode.toLowerCase() ===
@@ -574,7 +570,9 @@ export class KupTree {
       (this.expansionMode.toLowerCase() === KupTreeExpansionMode.NODE &&
         !treeNodeData.expandable)) {
       const td = e
-        ? this.getEventPath(e.target).find((el) => {
+        ? __classPrivateFieldGet(this, _KupTree_kupManager, "f")
+          .getEventPath(e.target, this.rootElement)
+          .find((el) => {
           if (el.tagName === 'TD')
             return el;
         })
@@ -766,10 +764,10 @@ export class KupTree {
   refreshStructureState() {
     if (this.data) {
       if (this.data.columns) {
-        this.kupManager.debug.logMessage(this, 'Detected KupDataDataset: setting up tree as grid.', KupDebugCategory.WARNING);
+        __classPrivateFieldGet(this, _KupTree_kupManager, "f").debug.logMessage(this, 'Detected KupDataDataset: setting up tree as grid.', KupDebugCategory.WARNING);
         const data = this.data;
         this.columns = data.columns;
-        this.data = this.kupManager.data.row.toNode(data);
+        this.data = __classPrivateFieldGet(this, _KupTree_kupManager, "f").data.row.toNode(data);
         this.showColumns = true;
         this.showHeader = true;
       }
@@ -832,7 +830,7 @@ export class KupTree {
       //---- Filter ----
       let filter = null;
       if (this.filtersColumnMenuInstance.hasFiltersForColumn(this.filters, column)) {
-        const svgLabel = this.kupManager.language.translate(KupLanguageGeneric.REMOVE_FILTERS) + `: '${this.getFilterValueForTooltip(column)}'`;
+        const svgLabel = __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageGeneric.REMOVE_FILTERS) + `: '${this.getFilterValueForTooltip(column)}'`;
         /**
          * When column has a filter but filters must not be displayed, shows an icon to remove the filter.
          * Upon click, the filter gets removed.
@@ -907,9 +905,9 @@ export class KupTree {
         expandClass += ` ${KupThemeIconValues.COLLAPSED.replace('--', '')}`;
       }
     }
-    let treeExpandIcon = (h("span", { title: this.kupManager.language.translate(KupLanguageGeneric.EXPAND) +
+    let treeExpandIcon = (h("span", { title: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageGeneric.EXPAND) +
         '/' +
-        this.kupManager.language.translate(KupLanguageGeneric.COLLAPSE) +
+        __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageGeneric.COLLAPSE) +
         ' (CTRL + Click)', class: expandClass, onClick: this.expansionMode.toLowerCase() ===
         KupTreeExpansionMode.DROPDOWN && !treeNodeData.disabled
         ? (event) => {
@@ -982,8 +980,8 @@ export class KupTree {
       }
     }
     let title = undefined;
-    if (!this.kupManager.objects.isEmptyKupObj(treeNodeData.obj) &&
-      this.kupManager.debug.isDebug()) {
+    if (!__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.isEmptyKupObj(treeNodeData.obj) &&
+      __classPrivateFieldGet(this, _KupTree_kupManager, "f").debug.isDebug()) {
       title =
         treeNodeData.obj.t +
           '; ' +
@@ -1006,7 +1004,7 @@ export class KupTree {
           'mdc-ripple-surface': this.ripple &&
             !this.showColumns &&
             !treeNodeData.disabled,
-          'is-obj': !this.kupManager.objects.isEmptyKupObj(treeNodeData.obj),
+          'is-obj': !__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.isEmptyKupObj(treeNodeData.obj),
         }, style: treeNodeData.style || null, title: title, onDblClick: () => {
           this.onKupTreeNodeDblClick(treeNodeData, treeNodePath);
         } }, this.asAccordion && !treeNodeDepth
@@ -1029,7 +1027,7 @@ export class KupTree {
   }
   closeTotalMenu() {
     this.openedTotalMenu = null;
-    this.kupManager.removeClickCallback(this.clickCb);
+    __classPrivateFieldGet(this, _KupTree_kupManager, "f").removeClickCallback(this.clickCb);
   }
   isOpenedTotalMenuForColumn(column) {
     return this.openedTotalMenu === column;
@@ -1059,15 +1057,15 @@ export class KupTree {
       let totalMenu = undefined;
       let menuLabel = TotalLabel.CALC;
       const translation = {
-        [TotalLabel.AVERAGE]: this.kupManager.language.translate(KupLanguageTotals.AVERAGE),
-        [TotalLabel.CALC]: this.kupManager.language.translate(KupLanguageTotals.CALCULATE),
-        [TotalLabel.CANC]: this.kupManager.language.translate(KupLanguageTotals.CANCEL),
-        [TotalLabel.COUNT]: this.kupManager.language.translate(KupLanguageTotals.COUNT),
-        [TotalLabel.DISTINCT]: this.kupManager.language.translate(KupLanguageTotals.DISTINCT),
-        [TotalLabel.MATH]: this.kupManager.language.translate(KupLanguageTotals.FORMULA),
-        [TotalLabel.MAX]: this.kupManager.language.translate(KupLanguageTotals.MAXIMUM),
-        [TotalLabel.MIN]: this.kupManager.language.translate(KupLanguageTotals.MINIMUM),
-        [TotalLabel.SUM]: this.kupManager.language.translate(KupLanguageTotals.SUM),
+        [TotalLabel.AVERAGE]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.AVERAGE),
+        [TotalLabel.CALC]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.CALCULATE),
+        [TotalLabel.CANC]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.CANCEL),
+        [TotalLabel.COUNT]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.COUNT),
+        [TotalLabel.DISTINCT]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.DISTINCT),
+        [TotalLabel.MATH]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.FORMULA),
+        [TotalLabel.MAX]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.MAXIMUM),
+        [TotalLabel.MIN]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.MINIMUM),
+        [TotalLabel.SUM]: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageTotals.SUM),
       };
       if (this.totals) {
         const totalValue = this.totals[column.name];
@@ -1112,7 +1110,7 @@ export class KupTree {
             value: translation[TotalLabel.DISTINCT],
           },
         ];
-        if (this.kupManager.objects.isNumber(column.obj)) {
+        if (__classPrivateFieldGet(this, _KupTree_kupManager, "f").objects.isNumber(column.obj)) {
           listData.push({
             id: TotalMode.SUM,
             value: translation[TotalLabel.SUM],
@@ -1178,25 +1176,25 @@ export class KupTree {
         });
       }
     };
-    this.kupManager.interact.on(this.treeWrapperRef, KupPointerEventTypes.TAP, tapCb);
-    this.kupManager.interact.on(this.treeWrapperRef, KupPointerEventTypes.HOLD, holdCb);
+    __classPrivateFieldGet(this, _KupTree_kupManager, "f").interact.on(this.treeWrapperRef, KupPointerEventTypes.TAP, tapCb);
+    __classPrivateFieldGet(this, _KupTree_kupManager, "f").interact.on(this.treeWrapperRef, KupPointerEventTypes.HOLD, holdCb);
   }
   totalMenuPosition() {
     if (this.rootElement.shadowRoot) {
       const menu = this.rootElement.shadowRoot.querySelector('#totals-menu');
       if (menu) {
-        this.kupManager.dynamicPosition.register(menu, this.totalMenuCoords);
+        __classPrivateFieldGet(this, _KupTree_kupManager, "f").dynamicPosition.register(menu, this.totalMenuCoords);
         if (!this.clickCb) {
           this.clickCb = {
             cb: () => {
               this.closeTotalMenu();
-              this.kupManager.dynamicPosition.stop(menu);
+              __classPrivateFieldGet(this, _KupTree_kupManager, "f").dynamicPosition.stop(menu);
             },
             el: menu,
           };
         }
-        this.kupManager.addClickCallback(this.clickCb, true);
-        this.kupManager.dynamicPosition.start(menu);
+        __classPrivateFieldGet(this, _KupTree_kupManager, "f").addClickCallback(this.clickCb, true);
+        __classPrivateFieldGet(this, _KupTree_kupManager, "f").dynamicPosition.start(menu);
         menu.menuVisible = true;
       }
     }
@@ -1254,20 +1252,20 @@ export class KupTree {
   /*          L i f e c y c l e   H o o k s          */
   /*-------------------------------------------------*/
   componentWillLoad() {
-    this.kupManager.debug.logLoad(this, false);
-    this.kupManager.language.register(this);
-    this.kupManager.theme.register(this);
+    __classPrivateFieldGet(this, _KupTree_kupManager, "f").debug.logLoad(this, false);
+    __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.register(this);
+    __classPrivateFieldGet(this, _KupTree_kupManager, "f").theme.register(this);
     this.columnMenuInstance = new KupColumnMenu();
     this.refreshStructureState();
   }
   componentDidLoad() {
     this.didLoadInteractables();
     this.kupDidLoad.emit({ comp: this, id: this.rootElement.id });
-    this.kupManager.resize.observe(this.rootElement);
-    this.kupManager.debug.logLoad(this, true);
+    __classPrivateFieldGet(this, _KupTree_kupManager, "f").resize.observe(this.rootElement);
+    __classPrivateFieldGet(this, _KupTree_kupManager, "f").debug.logLoad(this, true);
   }
   componentWillRender() {
-    this.kupManager.debug.logRender(this, false);
+    __classPrivateFieldGet(this, _KupTree_kupManager, "f").debug.logRender(this, false);
     if (this.showFooter && this.columns) {
       this.footer = calcTotals(normalizeRows(this.getColumns(), this.nodesToRows()), this.totals);
     }
@@ -1299,7 +1297,7 @@ export class KupTree {
     this.persistState();
     // ***
     this.oldWidth = this.rootElement.clientWidth;
-    this.kupManager.debug.logRender(this, true);
+    __classPrivateFieldGet(this, _KupTree_kupManager, "f").debug.logRender(this, true);
   }
   render() {
     this.contentRefs = [];
@@ -1322,7 +1320,7 @@ export class KupTree {
     }
     else {
       // There are no TreeNodes, so we print a single cell with a caption
-      treeNodes.push(h("tr", null, h("td", null, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA))));
+      treeNodes.push(h("tr", null, h("td", null, __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageGeneric.EMPTY_DATA))));
     }
     // Calculates if header must be shown or not
     const visibleHeader = this.showHeader && this.showColumns;
@@ -1331,12 +1329,12 @@ export class KupTree {
       this.data &&
       this.data.length &&
       this.data.length > 0) {
-      filterField = (h("div", { id: "global-filter" }, h("kup-text-field", { fullWidth: true, label: this.kupManager.language.translate(KupLanguageSearch.SEARCH), icon: KupThemeIconValues.SEARCH, initialValue: this.globalFilterValue, "onkup-textfield-input": (event) => {
+      filterField = (h("div", { id: "global-filter" }, h("kup-text-field", { fullWidth: true, label: __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), icon: KupThemeIconValues.SEARCH, initialValue: this.globalFilterValue, "onkup-textfield-input": (event) => {
           window.clearTimeout(this.globalFilterTimeout);
           this.globalFilterTimeout = window.setTimeout(() => this.onGlobalFilterChange(event), 600);
         } })));
     }
-    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 =
+    return (h(Host, null, h("style", null, __classPrivateFieldGet(this, _KupTree_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, class: wrapperClass }, filterField, h("div", { class: "wrapper", ref: (el) => (this.treeWrapperRef =
         el) }, h("table", { class: "kup-tree", "data-show-columns": this.showColumns, onContextMenu: (e) => {
         e.preventDefault();
       } }, h("thead", { class: {
@@ -1347,18 +1345,18 @@ export class KupTree {
       : null)))));
   }
   disconnectedCallback() {
-    this.kupManager.language.register(this);
-    this.kupManager.resize.unobserve(this.rootElement);
-    this.kupManager.theme.unregister(this);
+    __classPrivateFieldGet(this, _KupTree_kupManager, "f").language.register(this);
+    __classPrivateFieldGet(this, _KupTree_kupManager, "f").resize.unobserve(this.rootElement);
+    __classPrivateFieldGet(this, _KupTree_kupManager, "f").theme.unregister(this);
     const dynamicPositionElements = this.rootElement.shadowRoot.querySelectorAll('[' + kupDynamicPositionAttribute + ']');
     if (dynamicPositionElements.length > 0) {
-      this.kupManager.dynamicPosition.unregister(Array.prototype.slice.call(dynamicPositionElements));
+      __classPrivateFieldGet(this, _KupTree_kupManager, "f").dynamicPosition.unregister(Array.prototype.slice.call(dynamicPositionElements));
     }
     if (this.columnMenuCard) {
       this.columnMenuCard.remove();
     }
     if (this.scrollOnHover) {
-      this.kupManager.scrollOnHover.unregister(this.treeWrapperRef);
+      __classPrivateFieldGet(this, _KupTree_kupManager, "f").scrollOnHover.unregister(this.treeWrapperRef);
     }
     this.kupDidUnload.emit({ comp: this, id: this.rootElement.id });
   }
@@ -2478,3 +2476,4 @@ export class KupTree {
       }];
   }
 }
+_KupTree_kupManager = new WeakMap();

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

@@ -4,7 +4,7 @@ import { h } from '@stencil/core';
 import { getCellValueForDisplay } from '../../utils/cell-utils';
 import { FCheckbox } from '../f-checkbox/f-checkbox';
 import { FTextField } from '../f-text-field/f-text-field';
-import { stringToNumber } from '../../utils/utils';
+import { formattedStringToUnformattedStringNumber, stringToNumber, } from '../../utils/utils';
 import { FImage } from '../f-image/f-image';
 import { FChip } from '../f-chip/f-chip';
 import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
@@ -348,10 +348,7 @@ function cellEvent(e, props, cellType, cellEventName) {
   const column = props.column;
   const comp = props.component;
   const row = props.row;
-  const isInputEvent = !!(e.target.tagName === 'INPUT');
-  let value = isInputEvent
-    ? e.target.value
-    : e.detail.value;
+  let value = getValueFromEventTaget(e, cellType);
   if (cellEventName === FCellEvents.UPDATE) {
     switch (cellType) {
       case FCellTypes.AUTOCOMPLETE:
@@ -411,6 +408,16 @@ function cellEvent(e, props, cellType, cellEventName) {
     }
   }
 }
+function getValueFromEventTaget(e, cellType) {
+  const isInputEvent = !!(e.target.tagName === 'INPUT');
+  let value = isInputEvent
+    ? e.target.value
+    : e.detail.value;
+  if (cellType === FCellTypes.NUMBER && isInputEvent) {
+    value = formattedStringToUnformattedStringNumber(value, '');
+  }
+  return value;
+}
 function isAutoCentered(props) {
   var _a;
   return autoCenterComps.includes((_a = props.component) === null || _a === void 0 ? void 0 : _a.rootElement.tagName);