@sme.up/ketchup 6.4.0 → 6.6.0

package/dist/collection/components/kup-data-table/kup-data-table.js

@@ -321,7 +321,7 @@ export class KupDataTable {
       'format-color-text',
       'format-font-size-increase',
     ];
-    this.DENSITY_DECODES = ['Dense', 'Normal', 'Wide'];
+    this.DENSITY_DECODES = ['Dense', 'Medium', 'Wide'];
     this.DENSITY_ICONS = [
       'format-align-justify',
       'reorder-horizontal',
@@ -3041,8 +3041,9 @@ export class KupDataTable {
   }
   renderPaginator(top) {
     return (h("div", { class: "paginator-wrapper" },
-      h("div", { class: "paginator-tabs" }, !this.lazyLoadRows &&
-        this.rowsLength > this.rowsPerPage ? (h(FPaginator, { id: top ? 'top-paginator' : 'bottom-paginator', currentPage: this.currentPage, max: this.rowsLength, perPage: this.currentRowsPerPage
+      h("div", { class: "paginator-tabs" }, this.showLoadMore ||
+        (!this.lazyLoadRows &&
+          this.rowsLength > this.rowsPerPage) ? (h(FPaginator, { id: top ? 'top-paginator' : 'bottom-paginator', currentPage: this.currentPage, max: this.rowsLength, perPage: this.currentRowsPerPage
           ? this.currentRowsPerPage
           : this.rowsPerPage, onLoadMore: this.showLoadMore
           ? () => {
@@ -3167,12 +3168,14 @@ export class KupDataTable {
           value = KupLanguageDensity.WIDE;
           break;
       }
-      listItems[i] = {
-        icon: icons[i],
-        id: codes[i],
-        selected: selectedCode == codes[i],
-        value: this.kupManager.language.translate(value),
-      };
+      if (value) {
+        listItems[i] = {
+          icon: icons[i],
+          id: codes[i],
+          selected: selectedCode == codes[i],
+          value: this.kupManager.language.translate(value),
+        };
+      }
     }
     return listItems;
   }
@@ -3204,14 +3207,18 @@ export class KupDataTable {
     return (h("div", { class: "customize-element fontsize-panel" },
       h("kup-combobox", { isSelect: true, data: data, initialValue: this.kupManager.language.translate(text), "onkup-combobox-itemclick": (e) => {
           e.stopPropagation();
-          this.fontsize = this.getFontSizeCodeFromDecode(e.detail.value);
+          this.fontsize = this.getFontSizeCodeFromDecode(e.detail.node.id);
         } })));
   }
   getDensityCodeFromDecode(decode) {
-    return this.transcodeItem(decode, this.DENSITY_DECODES, Object.values(FCellPadding));
+    return this.transcodeItem(decode, this.DENSITY_DECODES, [
+      'dense',
+      'medium',
+      'wide',
+    ]);
   }
   renderDensityPanel() {
-    const listItems = this.createListData(Object.values(FCellPadding), this.DENSITY_ICONS, this.density);
+    const listItems = this.createListData(['dense', 'medium', 'wide'], this.DENSITY_ICONS, this.density);
     const listData = { data: listItems, showIcons: true };
     const textfieldData = {
       trailingIcon: true,
@@ -3235,7 +3242,7 @@ export class KupDataTable {
     return (h("div", { class: "customize-element density-panel" },
       h("kup-combobox", { isSelect: true, initialValue: this.kupManager.language.translate(text), selectMode: ItemsDisplayMode.DESCRIPTION, data: data, "onkup-combobox-itemclick": (e) => {
           e.stopPropagation();
-          this.density = this.getDensityCodeFromDecode(e.detail.value);
+          this.density = this.getDensityCodeFromDecode(e.detail.node.id);
         } })));
   }
   getGridCodeFromDecode(decode) {

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

@@ -6,6 +6,7 @@ export var KupFamilyTreeProps;
 (function (KupFamilyTreeProps) {
   KupFamilyTreeProps["autofitOnExpand"] = "The component will autofit everytime a node is expanded.";
   KupFamilyTreeProps["autofitOnLoad"] = "The component's initial render will fit the container by invoking the runAutofit method.";
+  KupFamilyTreeProps["cardData"] = "Used to render the family tree boxes as kup-cards (through kup-box).";
   KupFamilyTreeProps["collapsible"] = "Nodes can be expanded/collapsed.";
   KupFamilyTreeProps["customStyle"] = "Custom style of the component.";
   KupFamilyTreeProps["data"] = "Actual data of the component";

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

@@ -36,6 +36,11 @@ export class KupFamilyTree {
      * @default true
      */
     this.autofitOnLoad = true;
+    /**
+     * Used to render the family tree boxes as kup-cards (through kup-box).
+     * @default null
+     */
+    this.cardData = null;
     /**
      * Nodes can be expanded/collapsed.
      * @default true
@@ -239,6 +244,30 @@ export class KupFamilyTree {
       "reflect": false,
       "defaultValue": "true"
     },
+    "cardData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "GenericObject",
+        "resolved": "GenericObject",
+        "references": {
+          "GenericObject": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "null"
+          }],
+        "text": "Used to render the family tree boxes as kup-cards (through kup-box)."
+      },
+      "defaultValue": "null"
+    },
     "collapsible": {
       "type": "boolean",
       "mutable": false,
@@ -606,7 +635,7 @@ _KupFamilyTree_clickTimeout = new WeakMap(), _KupFamilyTree_hold = new WeakMap()
   };
   const data = {
     columns: [
-      { name: '*TREECOL', title: 'Fake column' },
+      { name: '*TREECOL', title: 'Fake column', visible: false },
       ...this.data.columns,
     ],
     rows: [{ cells: Object.assign({ '*TREECOL': node }, node.cells) }],
@@ -635,9 +664,15 @@ _KupFamilyTree_clickTimeout = new WeakMap(), _KupFamilyTree_hold = new WeakMap()
     },
     wrapperClass: 'family-tree__item__expand',
   };
+  let kupBox = null;
+  if (__classPrivateFieldGet(this, _KupFamilyTree_instances, "m", _KupFamilyTree_isBoxLayout).call(this, layout)) {
+    kupBox = (h("kup-box", { class: "kup-borderless kup-paddingless", customStyle: "#kup-component {  background: var(--kup_familytree_item_background_color); border: 2px solid var(--kup_familytree_lines_color); box-sizing: border-box; height: var(--kup_familytree_item_height); padding: 0 var(--kup_familytree_item_h_padding); } #kup-component .box-component { background: var(--kup_familytree_item_background_color); box-sizing: border-box; height: 100%;} #kup-component .f-cell__text { color: var(--kup_familytree_item_color); }", data: data, cardData: this.cardData, layout: this.cardData ? null : layout, showSelection: false }));
+  }
   const box = (h("div", { class: 'family-tree__item' },
     h("div", { class: 'family-tree__item__wrapper' },
-      __classPrivateFieldGet(this, _KupFamilyTree_instances, "m", _KupFamilyTree_isBoxLayout).call(this, layout) ? (h("kup-box", { class: "kup-borderless kup-paddingless", customStyle: "#kup-component {  background: var(--kup_familytree_item_background_color); border: 2px solid var(--kup_familytree_lines_color); box-sizing: border-box; height: var(--kup_familytree_item_height); padding: 0 var(--kup_familytree_item_h_padding); } #kup-component .box-component { background: var(--kup_familytree_item_background_color); box-sizing: border-box; height: 100%;} #kup-component .f-cell__text { color: var(--kup_familytree_item_color); }", data: data, layout: layout, showSelection: false })) : (__classPrivateFieldGet(this, _KupFamilyTree_instances, "m", _KupFamilyTree_buildNodeLayout).call(this, node, layout)),
+      __classPrivateFieldGet(this, _KupFamilyTree_instances, "m", _KupFamilyTree_isBoxLayout).call(this, layout)
+        ? kupBox
+        : __classPrivateFieldGet(this, _KupFamilyTree_instances, "m", _KupFamilyTree_buildNodeLayout).call(this, node, layout),
       this.collapsible &&
         node.children &&
         node.children.length > 0 ? (h(FButton, Object.assign({}, expandButtonProps))) : undefined)));
@@ -708,7 +743,7 @@ _KupFamilyTree_clickTimeout = new WeakMap(), _KupFamilyTree_hold = new WeakMap()
     }, ref: (el) => (__classPrivateFieldSet(this, _KupFamilyTree_wrapperEl, el, "f")) }, emptyData ? (h("div", null, __classPrivateFieldGet(this, _KupFamilyTree_kupManager, "f").language.translate(KupLanguageGeneric.EMPTY_DATA))) : (__classPrivateFieldGet(this, _KupFamilyTree_instances, "m", _KupFamilyTree_buildNodes).call(this, this.data.rows))));
 }, _KupFamilyTree_isBoxLayout = function _KupFamilyTree_isBoxLayout(layout) {
   const tmp = layout;
-  return tmp && tmp.sections && tmp.sections.length > 0;
+  return (!!this.cardData || (tmp && tmp.sections && tmp.sections.length > 0));
 }, _KupFamilyTree_startPanning = function _KupFamilyTree_startPanning(e) {
   __classPrivateFieldSet(this, _KupFamilyTree_currentPanX, e.clientX, "f");
   __classPrivateFieldSet(this, _KupFamilyTree_currentPanY, e.clientY, "f");

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

@@ -522,7 +522,7 @@ _KupImageList_clickTimeout = new WeakMap(), _KupImageList_kupManager = new WeakM
   };
   const image = h(FImage, Object.assign({}, props));
   const label = h("div", { class: "image-list__label" }, node.value);
-  return (h(FCell, { cell: { value: node.value, icon: node.icon, obj: node.obj }, column: { name: 'IMAGE', title: 'Image' }, density: FCellPadding.NONE, row: Object.assign({}, node) },
+  return (h(FCell, { cell: { value: node.value, icon: node.icon, obj: node.obj }, column: { name: 'IMAGE', title: 'Image' }, component: this, density: FCellPadding.NONE, row: Object.assign({}, node) },
     h("div", { class: "image-list__wrapper" },
       image,
       label)));

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

@@ -14,6 +14,7 @@ export var KupTextFieldProps;
   KupTextFieldProps["helperWhenFocused"] = "When set, the helper will be shown only when the field is focused.";
   KupTextFieldProps["icon"] = "When set, the text-field will show this icon.";
   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["isClearable"] = "Enables a clear trailing icon.";
   KupTextFieldProps["label"] = "When set, its content will be shown as a label.";

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

@@ -70,6 +70,11 @@ export class KupTextField {
      * @default ""
      */
     this.initialValue = '';
+    /**
+     * The HTML inputmode of the input element.
+     * @default null
+     */
+    this.inputMode = null;
     /**
      * The HTML type of the input element. It has no effect on text areas.
      * @default "text"
@@ -309,6 +314,7 @@ export class KupTextField {
       info: this.rootElement.classList.contains('kup-info')
         ? true
         : false,
+      inputMode: this.inputMode,
       inputType: this.inputType,
       isClearable: this.isClearable,
       label: this.label,
@@ -575,6 +581,27 @@ export class KupTextField {
       "reflect": false,
       "defaultValue": "''"
     },
+    "inputMode": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "null"
+          }],
+        "text": "The HTML inputmode of the input element."
+      },
+      "attribute": "input-mode",
+      "reflect": false,
+      "defaultValue": "null"
+    },
     "inputType": {
       "type": "string",
       "mutable": false,

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

@@ -5,7 +5,6 @@
 export var KupTreeProps;
 (function (KupTreeProps) {
   KupTreeProps["asAccordion"] = "When enabled, the first level of depth will give an accordion look to nodes.";
-  KupTreeProps["autoSelectionNodeMode"] = "Auto select programmatic selectic node";
   KupTreeProps["columns"] = "The columns of the tree when tree visualization is active.";
   KupTreeProps["customStyle"] = "Custom style of the component.";
   KupTreeProps["data"] = "The json data used to populate the tree view: the basic, always visible tree nodes.";
@@ -22,7 +21,6 @@ export var KupTreeProps;
   KupTreeProps["preventXScroll"] = "Experimental feature: when active, the tree will try to prevent horizontal overflowing elements by setting a width on the content of the table cells. It works only on cells of the main column.";
   KupTreeProps["ripple"] = "When enabled displays Material's ripple effect on nodes (only when no columns are displayed).";
   KupTreeProps["scrollOnHover"] = "Activates the scroll on hover function.";
-  KupTreeProps["selectedNode"] = "An array of integers containing the path to a selected child. Groups up the properties SelFirst, SelItem, SelName.";
   KupTreeProps["showColumns"] = "Shows the tree data as a table.";
   KupTreeProps["showFilters"] = "When set to true enables the column filters.";
   KupTreeProps["showFooter"] = "When set to true shows the footer.";

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

@@ -32,8 +32,12 @@ export class KupTree {
      */
     this.openedTotalMenu = null;
     this.columnMenuAnchor = null;
-    this.selectedNodeString = '';
     this.stateSwitcher = false;
+    /**
+     * An array of integers containing the path to a selected child.\
+     * Groups up the properties SelFirst, SelItem, SelName.
+     */
+    this.selectedNode = [];
     /*-------------------------------------------------*/
     /*                    P r o p s                    */
     /*-------------------------------------------------*/
@@ -42,10 +46,6 @@ export class KupTree {
      * @default false
      */
     this.asAccordion = false;
-    /**
-     * Auto select programmatic selectic node
-     */
-    this.autoSelectionNodeMode = true;
     /**
      * Custom style of the component.
      * @default ""
@@ -125,11 +125,6 @@ export class KupTree {
      * Activates the scroll on hover function.
      */
     this.scrollOnHover = false;
-    /**
-     * An array of integers containing the path to a selected child.\
-     * Groups up the properties SelFirst, SelItem, SelName.
-     */
-    this.selectedNode = [];
     /**
      * Shows the tree data as a table.
      */
@@ -174,6 +169,7 @@ export class KupTree {
      * Reference to the column menu card.
      */
     this.columnMenuCard = null;
+    this.selectedColumn = '';
     this.clickTimeout = [];
     this.sizedColumns = undefined;
     this.filtersColumnMenuInstance = new FiltersColumnMenu();
@@ -239,6 +235,31 @@ export class KupTree {
       }
     }
   }
+  /**
+   * This method will get the selected nodes of the component.
+   */
+  async getSelectedNode() {
+    return this.selectedNode;
+  }
+  /**
+   * This method will set the selected rows of the component.
+   * @param {string|number[]} rowsIdentifiers - Array of ids (dataset) or indexes (rendered rows).
+   * @param {boolean} emitEvent - The event will always be emitted unless emitEvent is set to false.
+   */
+  async setSelectedNode(treeNodePath, emitEvent) {
+    this.selectedNode = treeNodePath
+      .split(',')
+      .map((treeNodeIndex) => parseInt(treeNodeIndex));
+    if (emitEvent !== false) {
+      this.kupTreeNodeSelected.emit({
+        comp: this,
+        id: this.rootElement.id,
+        treeNodePath: this.selectedNode,
+        treeNode: this.getTreeNode(this.selectedNode),
+        columnName: this.selectedColumn,
+      });
+    }
+  }
   /*-------------------------------------------------*/
   /*                  W a t c h e r s                */
   /*-------------------------------------------------*/
@@ -255,11 +276,6 @@ export class KupTree {
       this.refreshStructureState();
     }
   }
-  selectedNodeToStr(newData) {
-    if (Array.isArray(newData)) {
-      this.selectedNodeString = newData.toString();
-    }
-  }
   /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */
   /*-------------------------------------------------*/
@@ -531,7 +547,7 @@ export class KupTree {
           this.launchNodeEvent(treeNodePath, tn);
         }
         else {
-          this.hdlTreeNodeClick(null, tn, this.selectedNodeString, true);
+          this.hdlTreeNodeClick(null, tn, this.selectedNodeToString(this.selectedNode));
         }
       }
     }
@@ -653,34 +669,25 @@ export class KupTree {
     return path;
   }
   // When a TreeNode can be selected
-  hdlTreeNodeClick(e, treeNodeData, treeNodePath, auto) {
+  hdlTreeNodeClick(e, treeNodeData, treeNodePath) {
     if (this.expansionMode.toLowerCase() ===
       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)
-          this.selectedNode = treeNodePath
-            .split(',')
-            .map((treeNodeIndex) => parseInt(treeNodeIndex));
+        this.selectedNode = treeNodePath
+          .split(',')
+          .map((treeNodeIndex) => parseInt(treeNodeIndex));
         this.kupTreeNodeSelected.emit({
           comp: this,
           id: this.rootElement.id,
-          treeNodePath: treeNodePath
-            .split(',')
-            .map((treeNodeIndex) => parseInt(treeNodeIndex)),
+          treeNodePath: this.selectedNode,
           treeNode: treeNodeData,
-          columnName: td ? td.dataset.column : null,
-          auto: auto,
+          columnName: this.selectedColumn,
         });
       }
+      this.selectedColumn = '';
     }
     // If KupTreeExpansionMode.NODE then click is a collapse/expand click
     if (this.expansionMode.toLowerCase() === KupTreeExpansionMode.NODE) {
@@ -775,9 +782,9 @@ export class KupTree {
   hasTotals() {
     return this.totals && Object.keys(this.totals).length > 0;
   }
-  handleChildren(TreeNode, expand) {
-    for (let index = 0; index < TreeNode.children.length; index++) {
-      let node = TreeNode.children[index];
+  handleChildren(treeNode, expand) {
+    for (let index = 0; index < treeNode.children.length; index++) {
+      let node = treeNode.children[index];
       if (!node.disabled) {
         node.isExpanded = expand;
         if (node.children) {
@@ -795,7 +802,7 @@ export class KupTree {
     if (nodePath && nodePath.length) {
       strToRet = nodePath[0].toString();
       for (let i = 1; i < nodePath.length; i++) {
-        strToRet += `,${nodePath[0]}`;
+        strToRet += `,${nodePath[i]}`;
       }
     }
     return strToRet;
@@ -803,6 +810,21 @@ export class KupTree {
   getFilterValueForTooltip(column) {
     return this.filtersColumnMenuInstance.getFilterValueForTooltip(this.filters, column);
   }
+  getTreeNode(nodePath) {
+    if (!nodePath || nodePath.length == 0) {
+      return null;
+    }
+    let father = this.data;
+    let node = null;
+    for (let index = 0; index < nodePath.length; index++) {
+      if (node) {
+        father = node.children;
+      }
+      const nodeIndex = nodePath[index];
+      node = father[nodeIndex];
+    }
+    return node;
+  }
   onRemoveFilter(column) {
     const newFilters = Object.assign({}, this.filters);
     this.filtersColumnMenuInstance.removeFilter(newFilters, column.name);
@@ -852,6 +874,7 @@ export class KupTree {
       this.data.forEach((rootNode) => {
         this.expandCollapseAllNodes(rootNode, this.expanded && !this.useDynamicExpansion);
       });
+      this.selectedNode = [];
     }
   }
   createIconElement(CSSClass, icon, iconColor) {
@@ -1018,20 +1041,13 @@ export class KupTree {
     }
     // When can be expanded OR selected
     if (!treeNodeData.disabled) {
-      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));
+      treeNodeOptions['onClick'] = () => {
+        this.clickTimeout.push(setTimeout((e) => this.hdlTreeNodeClick(e, treeNodeData, treeNodePath), 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
@@ -1101,7 +1117,8 @@ export class KupTree {
         'kup-tree__node--disabled': treeNodeData.disabled,
         'kup-tree__node--first': treeNodeDepth ? false : true,
         'kup-tree__node--selected': !treeNodeData.disabled &&
-          treeNodePath === this.selectedNodeString,
+          treeNodePath ===
+            this.selectedNodeToString(this.selectedNode),
       }, "data-row": treeNodeData, "data-tree-path": treeNodePath }, treeNodeOptions),
       treeNodeCell,
       treeNodeCells));
@@ -1343,25 +1360,8 @@ export class KupTree {
     this.kupManager.theme.register(this);
     this.columnMenuInstance = new KupColumnMenu();
     this.refreshStructureState();
-    // Initializes the selectedNodeString
-    if (Array.isArray(this.selectedNode)) {
-      this.selectedNodeString = this.selectedNode.toString();
-    }
   }
   componentDidLoad() {
-    if (this.selectedNode &&
-      this.selectedNode.length > 0 &&
-      this.selectedNode[0] >= 0) {
-      let path = this.selectedNode;
-      let tn = this.data[path[0]];
-      if (path.length > 1) {
-        path = path.slice(1);
-        this.launchNodeEvent(path, tn);
-      }
-      else {
-        this.hdlTreeNodeClick(null, tn, this.selectedNodeString, true);
-      }
-    }
     this.didLoadInteractables();
     this.kupDidLoad.emit({ comp: this, id: this.rootElement.id });
     this.kupManager.resize.observe(this.rootElement);
@@ -1504,24 +1504,6 @@ export class KupTree {
       "reflect": true,
       "defaultValue": "false"
     },
-    "autoSelectionNodeMode": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Auto select programmatic selectic node"
-      },
-      "attribute": "auto-selection-node-mode",
-      "reflect": false,
-      "defaultValue": "true"
-    },
     "columns": {
       "type": "unknown",
       "mutable": true,
@@ -1882,27 +1864,6 @@ export class KupTree {
       "reflect": false,
       "defaultValue": "false"
     },
-    "selectedNode": {
-      "type": "unknown",
-      "mutable": true,
-      "complexType": {
-        "original": "TreeNodePath",
-        "resolved": "number[]",
-        "references": {
-          "TreeNodePath": {
-            "location": "import",
-            "path": "./kup-tree-declarations"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "An array of integers containing the path to a selected child.\\\r\nGroups up the properties SelFirst, SelItem, SelName."
-      },
-      "defaultValue": "[]"
-    },
     "showColumns": {
       "type": "boolean",
       "mutable": true,
@@ -2080,8 +2041,8 @@ export class KupTree {
     "treeColumnVisible": {},
     "openedTotalMenu": {},
     "columnMenuAnchor": {},
-    "selectedNodeString": {},
-    "stateSwitcher": {}
+    "stateSwitcher": {},
+    "selectedNode": {}
   }; }
   static get events() { return [{
       "method": "kupTreeNodeCollapse",
@@ -2332,6 +2293,57 @@ export class KupTree {
       }
     }]; }
   static get methods() { return {
+    "getSelectedNode": {
+      "complexType": {
+        "signature": "() => Promise<TreeNodePath>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "TreeNodePath": {
+            "location": "import",
+            "path": "./kup-tree-declarations"
+          }
+        },
+        "return": "Promise<TreeNodePath>"
+      },
+      "docs": {
+        "text": "This method will get the selected nodes of the component.",
+        "tags": []
+      }
+    },
+    "setSelectedNode": {
+      "complexType": {
+        "signature": "(treeNodePath: string, emitEvent?: boolean) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }, {
+            "tags": [{
+                "name": "param",
+                "text": "emitEvent - The event will always be emitted unless emitEvent is set to false."
+              }],
+            "text": "- The event will always be emitted unless emitEvent is set to false."
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "This method will set the selected rows of the component.",
+        "tags": [{
+            "name": "param",
+            "text": "rowsIdentifiers - Array of ids (dataset) or indexes (rendered rows)."
+          }, {
+            "name": "param",
+            "text": "emitEvent - The event will always be emitted unless emitEvent is set to false."
+          }]
+      }
+    },
     "isEmpty": {
       "complexType": {
         "signature": "() => Promise<boolean>",
@@ -2562,8 +2574,5 @@ export class KupTree {
     }, {
       "propName": "expanded",
       "methodName": "enrichStructureStateWhenChanged"
-    }, {
-      "propName": "selectedNode",
-      "methodName": "selectedNodeToStr"
     }]; }
 }

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

@@ -394,8 +394,10 @@ function cellEvent(e, props, cellType, cellEventName) {
   }
 }
 function isAutoCentered(props) {
-  return autoCenterComps.includes(props.component.rootElement.tagName);
+  var _a;
+  return autoCenterComps.includes((_a = props.component) === null || _a === void 0 ? void 0 : _a.rootElement.tagName);
 }
 function isFullWidth(props) {
-  return fullWidthFieldsComps.includes(props.component.rootElement.tagName);
+  var _a;
+  return fullWidthFieldsComps.includes((_a = props.component) === null || _a === void 0 ? void 0 : _a.rootElement.tagName);
 }

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

@@ -55,7 +55,7 @@ function setContent(props) {
       props.maxLength)) : undefined,
     !props.trailingIcon ? iconEl : undefined,
     props.textArea ? (h("span", { class: "mdc-text-field__resizer" },
-      h("textarea", { class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown }))) : (h("input", { type: props.inputType ? props.inputType : 'text', step: props.step, min: props.min, max: props.max, name: props.name, class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, placeholder: props.fullWidth && !props.outlined
+      h("textarea", { class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown }))) : (h("input", { inputmode: props.inputMode ? props.inputMode : undefined, type: props.inputType ? props.inputType : 'text', step: props.step, min: props.min, max: props.max, name: props.name, class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, placeholder: props.fullWidth && !props.outlined
         ? props.label
         : undefined, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onChange: (e) => {
         if (props.decimals !== null &&

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

@@ -171,7 +171,17 @@ export class KupObjects {
   isNumber(obj) {
     if (!obj)
       return false;
-    return 'NR' === obj.t;
+    return 'NR' === obj.t || 'NP' === obj.t;
+  }
+  /**
+   * Checks whether the object represents a positive number or not.
+   * @param {KupObj} obj - Object to check.
+   * @returns {boolean} True when the object is a positive number.
+   */
+  isPositiveNumber(obj) {
+    if (!obj)
+      return false;
+    return 'NP' === obj.t;
   }
   /**
    * Checks whether the object represents a password or not.

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

@@ -25,6 +25,7 @@ export const fButtonUsers = [
  */
 export const fCellUsers = [
   KupTagNames.BOX,
+  KupTagNames.CARD,
   KupTagNames.CELL,
   KupTagNames.DATA_TABLE,
   KupTagNames.FORM,