@sme.up/ketchup 4.2.0-SNAPSHOT → 5.1.0-SNAPSHOT

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

@@ -1,8 +1,8 @@
 import { Component, Element, Event, forceUpdate, getAssetPath, h, Host, Method, Prop, State, Watch, } from '@stencil/core';
 import { TotalLabel, TotalMode, } from './../kup-data-table/kup-data-table-declarations';
-import { KupTreeProps, treeExpandedPropName, treeMainColumnName, KupTreeExpansionMode, } from './kup-tree-declarations';
+import { KupTreeProps, treeMainColumnName, KupTreeExpansionMode, } from './kup-tree-declarations';
 import { MDCRipple } from '@material/ripple';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { calcTotals, normalizeRows, } from '../kup-data-table/kup-data-table-helper';
 import { KupTreeState } from './kup-tree-state';
 import { setTooltip, unsetTooltip } from '../../utils/helpers';
@@ -12,13 +12,14 @@ import { KupColumnMenu } from '../../utils/kup-column-menu/kup-column-menu';
 import { FiltersColumnMenu } from '../../utils/filters/filters-column-menu';
 import { KupGlobalFilterMode, } from '../../utils/filters/filters-declarations';
 import { FiltersTreeItems } from '../../utils/filters/filters-tree-items';
-import { kupDynamicPositionAttribute, } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
-import { KupLanguageGeneric, KupLanguageSearch, KupLanguageTotals, } from '../../utils/kup-language/kup-language-declarations';
+import { kupDynamicPositionAttribute, } from '../../managers/kup-dynamic-position/kup-dynamic-position-declarations';
+import { KupLanguageGeneric, KupLanguageSearch, KupLanguageTotals, } from '../../managers/kup-language/kup-language-declarations';
 import { componentWrapperId } from '../../variables/GenericVariables';
-import { KupThemeIconValues } from '../../utils/kup-theme/kup-theme-declarations';
-import { KupPointerEventTypes } from '../../utils/kup-interact/kup-interact-declarations';
+import { KupThemeIconValues } from '../../managers/kup-theme/kup-theme-declarations';
+import { KupPointerEventTypes } from '../../managers/kup-interact/kup-interact-declarations';
 import { FCellPadding, } from '../../f-components/f-cell/f-cell-declarations';
 import { FCell } from '../../f-components/f-cell/f-cell';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
 export class KupTree {
   constructor() {
     /*-------------------------------------------------*/
@@ -253,6 +254,9 @@ export class KupTree {
   /*                  W a t c h e r s                */
   /*-------------------------------------------------*/
   enrichDataWhenChanged(newData, oldData) {
+    if (!newData) {
+      newData = [];
+    }
     if (newData !== oldData) {
       this.refreshStructureState();
     }
@@ -299,7 +303,7 @@ export class KupTree {
   async collapseAll() {
     if (!this.useDynamicExpansion) {
       for (let index = 0; index < this.data.length; index++) {
-        this.data[index][treeExpandedPropName] = false;
+        this.data[index].isExpanded = false;
         this.handleChildren(this.data[index], false);
       }
     }
@@ -318,7 +322,7 @@ export class KupTree {
   async expandAll() {
     if (!this.useDynamicExpansion) {
       for (let index = 0; index < this.data.length; index++) {
-        this.data[index][treeExpandedPropName] = true;
+        this.data[index].isExpanded = true;
         this.handleChildren(this.data[index], true);
       }
     }
@@ -339,6 +343,19 @@ export class KupTree {
   async getProps(descriptions) {
     return getProps(this, KupTreeProps, descriptions);
   }
+  /**
+   * Hides the given column.
+   * @param {KupDataColumn} column - Column to hide.
+   */
+  async hideColumn(column) {
+    this.kupManager.data.column.hide(this.columns, [column.name]);
+    this.kupColumnRemove.emit({
+      comp: this,
+      id: this.rootElement.id,
+      column: column,
+    });
+    this.refresh();
+  }
   /**
    * Opens the column menu of the given column.
    * @param {string} column - Name of the column.
@@ -474,10 +491,10 @@ export class KupTree {
     }
   }
   expandCollapseNode(treeNode, expandNode = false) {
-    this.filtersTreeItemsInstance.expandCollapseNode(treeNode, expandNode, treeExpandedPropName);
+    this.filtersTreeItemsInstance.expandCollapseNode(treeNode, expandNode);
   }
   expandCollapseAllNodes(treeNode, expandNode = false) {
-    this.filtersTreeItemsInstance.expandCollapseAllNodes(treeNode, expandNode, treeExpandedPropName);
+    this.filtersTreeItemsInstance.expandCollapseAllNodes(treeNode, expandNode);
   }
   getColumns() {
     return this.columns ? this.columns : [{ title: '', name: '' }];
@@ -640,13 +657,12 @@ export class KupTree {
       // There are already children set in this TreeNode -> expand or collapse node and emit appropriate event
       if (treeNodeData.children && treeNodeData.children.length) {
         // Updates expanded state and force rerender
-        treeNodeData[treeExpandedPropName] =
-          !treeNodeData[treeExpandedPropName];
+        treeNodeData.isExpanded = !treeNodeData.isExpanded;
         if (ctrlKey) {
-          this.handleChildren(treeNodeData, treeNodeData[treeExpandedPropName]);
+          this.handleChildren(treeNodeData, treeNodeData.isExpanded);
         }
         this.refresh();
-        if (treeNodeData[treeExpandedPropName]) {
+        if (treeNodeData.isExpanded) {
           // TreeNode is now expanded -> Fires expanded event
           this.kupTreeNodeExpand.emit({
             comp: this,
@@ -684,8 +700,7 @@ export class KupTree {
             .then((childrenTreeNodes) => {
             // Children returned successfully
             treeNodeData.children = childrenTreeNodes;
-            treeNodeData[treeExpandedPropName] =
-              !treeNodeData[treeExpandedPropName];
+            treeNodeData.isExpanded = !treeNodeData.isExpanded;
             this.refresh();
             // TreeNode is now expanded -> Fires expanded event
             this.kupTreeNodeExpand.emit({
@@ -711,8 +726,7 @@ export class KupTree {
             usesDynamicExpansion: true,
             dynamicExpansionRequireChildren: true,
           });
-          treeNodeData[treeExpandedPropName] =
-            !treeNodeData[treeExpandedPropName];
+          treeNodeData.isExpanded = !treeNodeData.isExpanded;
         }
       }
     }
@@ -724,7 +738,7 @@ export class KupTree {
     for (let index = 0; index < TreeNode.children.length; index++) {
       let node = TreeNode.children[index];
       if (!node.disabled) {
-        node[treeExpandedPropName] = expand;
+        node.isExpanded = expand;
         if (node.children) {
           this.handleChildren(node, expand);
         }
@@ -767,7 +781,7 @@ export class KupTree {
     return this.data ? this.data : [];
   }
   filterNodes() {
-    let items = this.filtersTreeItemsInstance.filterRows(this.getRows(), this.filters, this.globalFilterValue, this.getColumns(), treeExpandedPropName, this.filtersColumnMenuInstance);
+    let items = this.filtersTreeItemsInstance.filterRows(this.getRows(), this.filters, this.globalFilterValue, this.getColumns(), this.filtersColumnMenuInstance);
     this.visibleNodes = this.calculateVisibleNodes(items);
   }
   calculateVisibleNodes(items) {
@@ -784,6 +798,14 @@ 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);
+        const data = this.data;
+        this.columns = data.columns;
+        this.data = this.kupManager.data.row.toNode(data);
+        this.showColumns = true;
+        this.showHeader = true;
+      }
       // When the nodes must be expanded upon loading and the tree is not using a dynamicExpansion (and the current TreeNode is not disabled)
       // the default value of the treeExpandedPropName is set to true
       this.data.forEach((rootNode) => {
@@ -923,11 +945,11 @@ export class KupTree {
     return (h("span", { class: styleClass, ref: (el) => this.contentRefs.push(el), title: this.preventXScroll ? content : null }, contentSlices));
   }
   /**
-   * Given a TreeNode, reads through its data then composes and returns its JSX object.
-   * @param treeNodeData - The TreeNode object to parse.
-   * @param treeNodePath - A string containing the comma(,) separated indexes of the TreeNodes to use,
-   *    sorted from left to right, to access the current TreeNode starting from the data prop children object.
-   * @param treeNodeDepth - An integer to keep track of the depth level of the current TreeNode. Used for indentation.
+   * Given a KupTreeNode, reads through its data then composes and returns its JSX object.
+   * @param treeNodeData - The KupTreeNode object to parse.
+   * @param treeNodePath - A string containing the comma(,) separated indexes of the KupTreeNodes to use,
+   *    sorted from left to right, to access the current KupTreeNode starting from the data prop children object.
+   * @param treeNodeDepth - An integer to keep track of the depth level of the current KupTreeNode. Used for indentation.
    * @returns The the JSX created from the current tree node.
    */
   renderTreeNode(treeNodeData, treeNodePath, treeNodeDepth = 0) {
@@ -949,7 +971,7 @@ export class KupTree {
       if (this.asAccordion && treeNodeDepth === 0) {
         expandClass += ` ${KupThemeIconValues.DROPDOWN.replace('--', '')}`;
       }
-      else if (treeNodeData[treeExpandedPropName]) {
+      else if (treeNodeData.isExpanded) {
         expandClass += ` ${KupThemeIconValues.EXPANDED.replace('--', '')}`;
       }
       else {
@@ -983,12 +1005,11 @@ export class KupTree {
     }
     // Composes additional options for the tree node element
     let treeNodeOptions = {};
-    if (treeNodeData.hasOwnProperty(treeExpandedPropName) &&
-      treeNodeData[treeExpandedPropName] &&
+    if (treeNodeData.hasOwnProperty('isExpanded') &&
+      treeNodeData.isExpanded &&
       hasExpandIcon) {
       // If the node is expanded it has this attribute set to if this node is expanded or not.
-      treeNodeOptions['data-is-expanded'] =
-        treeNodeData[treeExpandedPropName];
+      treeNodeOptions['data-is-expanded'] = treeNodeData.isExpanded;
     }
     // When can be expanded OR selected
     if (!treeNodeData.disabled) {
@@ -1004,21 +1025,26 @@ export class KupTree {
       // Renders all the cells
       for (let j = 0; j < visibleCols.length; j++) {
         const column = visibleCols[j];
-        const cell = treeNodeData.cells[column.name]
-          ? treeNodeData.cells[column.name]
-          : null;
-        const cellProps = {
-          cell: cell,
-          column: column,
-          component: this,
-          density: this.density,
-          editable: this.editableData,
-          renderKup: true,
-          row: treeNodeData,
-          setSizes: true,
-        };
-        treeNodeCells.push(h("td", { class: `grid-cell` },
-          h(FCell, Object.assign({}, cellProps))));
+        if (treeNodeData.cells && treeNodeData.cells[column.name]) {
+          const cell = treeNodeData.cells[column.name]
+            ? treeNodeData.cells[column.name]
+            : null;
+          const cellProps = {
+            cell: cell,
+            column: column,
+            component: this,
+            density: this.density,
+            editable: this.editableData,
+            renderKup: true,
+            row: treeNodeData,
+            setSizes: true,
+          };
+          treeNodeCells.push(h("td", { class: `grid-cell` },
+            h(FCell, Object.assign({}, cellProps))));
+        }
+        else {
+          treeNodeCells.push(h("td", { class: `grid-cell` }));
+        }
       }
     }
     const _hasTooltip = !this.kupManager.objects.isEmptyKupObj(treeNodeData.obj);
@@ -1262,13 +1288,13 @@ export class KupTree {
     }
   }
   /**
-   * Given a TreeNode, reads through its data to compose and return the TreeNodes of the root of this TreeNode
-   * and its children nodes, composing an array of JSX TreeNodes.
-   * @param treeNodeData - The TreeNode object to parse.
-   * @param treeNodePath - A string containing the comma(,) separated indexes of the TreeNodes to use,
-   *    sorted from left to right, to access the current TreeNode starting from the data prop children object.
-   * @param treeNodeDepth - An integer to keep track of the depth level of the current TreeNode. Used for indentation.
-   * @returns An array of JSX TreeNodes created from the given treeNodeData.
+   * Given a KupTreeNode, reads through its data to compose and return the KupTreeNodes of the root of this KupTreeNode
+   * and its children nodes, composing an array of JSX KupTreeNodes.
+   * @param treeNodeData - The KupTreeNode object to parse.
+   * @param treeNodePath - A string containing the comma(,) separated indexes of the KupTreeNodes to use,
+   *    sorted from left to right, to access the current KupTreeNode starting from the data prop children object.
+   * @param treeNodeDepth - An integer to keep track of the depth level of the current KupTreeNode. Used for indentation.
+   * @returns An array of JSX KupTreeNodes created from the given treeNodeData.
    */
   renderTree(treeNodeData, treeNodePath, treeNodeDepth = 0) {
     let treeNodes = [];
@@ -1279,7 +1305,7 @@ export class KupTree {
       if (treeNodeData.expandable &&
         treeNodeData.children &&
         treeNodeData.children.length &&
-        treeNodeData[treeExpandedPropName]) {
+        treeNodeData.isExpanded) {
         for (let i = 0; i < treeNodeData.children.length; i++) {
           treeNodes = treeNodes.concat(this.renderTree(treeNodeData.children[i], treeNodePath + ',' + i, treeNodeDepth + 1));
         }
@@ -1496,14 +1522,14 @@ export class KupTree {
     },
     "columns": {
       "type": "unknown",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
-        "original": "Column[]",
-        "resolved": "Column[]",
+        "original": "KupDataColumn[]",
+        "resolved": "KupDataColumn[]",
         "references": {
-          "Column": {
+          "KupDataColumn": {
             "location": "import",
-            "path": "./../kup-data-table/kup-data-table-declarations"
+            "path": "../../managers/kup-data/kup-data-declarations"
           }
         }
       },
@@ -1540,12 +1566,12 @@ export class KupTree {
     },
     "data": {
       "type": "unknown",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
-        "original": "TreeNode[]",
-        "resolved": "TreeNode[]",
+        "original": "KupTreeNode[]",
+        "resolved": "KupTreeNode[]",
         "references": {
-          "TreeNode": {
+          "KupTreeNode": {
             "location": "import",
             "path": "./kup-tree-declarations"
           }
@@ -1586,10 +1612,10 @@ export class KupTree {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "(\n        treeNodeToExpand: TreeNode,\n        treeNodePath: TreeNodePath\n    ) => Promise<TreeNode[]> | undefined",
-        "resolved": "(treeNodeToExpand: TreeNode, treeNodePath: TreeNodePath) => Promise<TreeNode[]>",
+        "original": "(\n        treeNodeToExpand: KupTreeNode,\n        treeNodePath: TreeNodePath\n    ) => Promise<KupTreeNode[]> | undefined",
+        "resolved": "(treeNodeToExpand: KupTreeNode, treeNodePath: TreeNodePath) => Promise<KupTreeNode[]>",
         "references": {
-          "TreeNode": {
+          "KupTreeNode": {
             "location": "import",
             "path": "./kup-tree-declarations"
           },
@@ -1877,7 +1903,7 @@ export class KupTree {
     },
     "showColumns": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -1931,7 +1957,7 @@ export class KupTree {
     },
     "showHeader": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -2133,7 +2159,7 @@ export class KupTree {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when a TreeNode gets collapsed (closed)."
+        "text": "Fired when a KupTreeNode gets collapsed (closed)."
       },
       "complexType": {
         "original": "KupTreeNodeCollapseEventPayload",
@@ -2163,13 +2189,13 @@ export class KupTree {
             "text": "{TreeNodePath} treeNodePath - The array of indexes to retrieve the current treeNode inside the data prop."
           }, {
             "name": "property",
-            "text": "{TreeNode} treeNode - Reference to the TreeNode data object which is being expanded (passed through the data prop)."
+            "text": "{KupTreeNode} treeNode - Reference to the KupTreeNode data object which is being expanded (passed through the data prop)."
           }, {
             "name": "property",
             "text": "{boolean} usesDynamicExpansion - Flag to notify that the component is running in dynamicExpansion mode."
           }, {
             "name": "property",
-            "text": "{boolean} dynamicExpansionRequireChildren - Flag to notify that the current dynamicExpansion event\nrequires the parent component to add TreeNode children to the given TreeNode."
+            "text": "{boolean} dynamicExpansionRequireChildren - Flag to notify that the current dynamicExpansion event\nrequires the parent component to add KupTreeNode children to the given KupTreeNode."
           }, {
             "name": "see",
             "text": "useDynamicExpansion *"
@@ -2352,6 +2378,26 @@ export class KupTree {
           }
         }
       }
+    }, {
+      "method": "kupColumnRemove",
+      "name": "kup-tree-columnremove",
+      "bubbles": true,
+      "cancelable": false,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event fired when columns are removed (set to hidden)."
+      },
+      "complexType": {
+        "original": "KupTreeColumnRemoveEventPayload",
+        "resolved": "KupTreeColumnRemoveEventPayload",
+        "references": {
+          "KupTreeColumnRemoveEventPayload": {
+            "location": "import",
+            "path": "./kup-tree-declarations"
+          }
+        }
+      }
     }]; }
   static get methods() { return {
     "isEmpty": {
@@ -2450,6 +2496,35 @@ export class KupTree {
           }]
       }
     },
+    "hideColumn": {
+      "complexType": {
+        "signature": "(column: KupDataColumn) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "column - Column to hide."
+              }],
+            "text": "- Column to hide."
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "KupDataColumn": {
+            "location": "import",
+            "path": "../../managers/kup-data/kup-data-declarations"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Hides the given column.",
+        "tags": [{
+            "name": "param",
+            "text": "column - Column to hide."
+          }]
+      }
+    },
     "openColumnMenu": {
       "complexType": {
         "signature": "(column: string) => Promise<void>",

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

@@ -1,10 +1,12 @@
-export const autoAlignComps = ['KUP-DATA-TABLE', 'KUP-TREE'];
+import { KupTagNames, } from '../../types/GenericTypes';
+export const autoAlignComps = [KupTagNames.DATA_TABLE, KupTagNames.TREE];
 /**
  * Supported cell events.
  */
 export var FCellEvents;
 (function (FCellEvents) {
   FCellEvents["CLICK"] = "kup-cell-click";
+  FCellEvents["ICON_CLICK"] = "kup-cell-iconclick";
   FCellEvents["INPUT"] = "kup-cell-input";
   FCellEvents["UPDATE"] = "kup-cell-update";
 })(FCellEvents || (FCellEvents = {}));

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

@@ -1,3 +1,4 @@
+import { KupTagNames } from '../../types/GenericTypes';
 import { autoAlignComps, editableTypes, FCellClasses, FCellEvents, FCellShapes, FCellTypes, kupTypes, } from './f-cell-declarations';
 import { h } from '@stencil/core';
 import { getCellValueForDisplay } from '../../utils/cell-utils';
@@ -6,7 +7,7 @@ import { FTextField } from '../f-text-field/f-text-field';
 import { stringToNumber } from '../../utils/utils';
 import { FImage } from '../f-image/f-image';
 import { FChip } from '../f-chip/f-chip';
-import { KupThemeColorValues } from '../../utils/kup-theme/kup-theme-declarations';
+import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
 const dom = document.documentElement;
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
@@ -129,7 +130,7 @@ function setCellSize(cellType, subcomponentProps, cell, props) {
       break;
     case FCellTypes.IMAGE:
       if (props.component.rootElement.tagName ===
-        'KUP-BOX') {
+        KupTagNames.BOX) {
         if (!subcomponentProps.sizeY) {
           subcomponentProps.sizeY = 'auto';
         }
@@ -200,16 +201,17 @@ function setCellSizeKup(cellType, subcomponentProps, cell) {
 function setEditableCell(cellType, classObj, cell, column, props) {
   switch (cellType) {
     case FCellTypes.AUTOCOMPLETE:
-      return (h("kup-autocomplete", Object.assign({}, cell.data, { class: "kup-full-width", "onkup-autocomplete-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
+      return (h("kup-autocomplete", Object.assign({}, cell.data, { class: "kup-full-width", "onkup-autocomplete-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-autocomplete-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-autocomplete-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) })));
     case FCellTypes.CHECKBOX:
-      if (autoAlignComps.includes(props.component.rootElement.tagName)) {
+      if (autoAlignComps.includes(props.component.rootElement
+        .tagName)) {
         classObj[FCellClasses.C_CENTERED] = true;
       }
       return (h(FCheckbox, Object.assign({}, cell.data, { onChange: (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
     case FCellTypes.COLOR_PICKER:
-      return (h("kup-color-picker", Object.assign({}, cell.data, { disabled: false, "onkup-colorpicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
+      return (h("kup-color-picker", Object.assign({}, cell.data, { class: "kup-full-width", disabled: false, "onkup-colorpicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE) })));
     case FCellTypes.COMBOBOX:
-      return (h("kup-combobox", Object.assign({}, cell.data, { class: "kup-full-width", "onkup-combobox-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
+      return (h("kup-combobox", Object.assign({}, cell.data, { class: "kup-full-width", "onkup-combobox-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-combobox-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), "onkup-combobox-iconclick": (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) })));
     case FCellTypes.DATE:
       return (h("kup-date-picker", Object.assign({ initialValue: cell.value }, cell.data, { class: "kup-full-width", "onkup-datepicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-datepicker-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
     case FCellTypes.RATING:
@@ -217,10 +219,11 @@ function setEditableCell(cellType, classObj, cell, column, props) {
     case FCellTypes.TIME:
       return (h("kup-time-picker", Object.assign({ initialValue: cell.value }, cell.data, { class: "kup-full-width", "onkup-timepicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-timepicker-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
     case FCellTypes.NUMBER:
+      classObj[FCellClasses.C_RIGHT_ALIGNED] = true;
     case FCellTypes.STRING:
       return (h(FTextField, Object.assign({}, cell.data, { icon: cell.icon ? cell.icon : column.icon ? column.icon : null, fullWidth: true, inputType: cellType === FCellTypes.NUMBER ? 'number' : null, value: cellType === FCellTypes.NUMBER
           ? stringToNumber(cell.value).toString()
-          : cell.value, onChange: (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), onInput: (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
+          : cell.value, onChange: (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), onInput: (e) => cellEvent(e, props, cellType, FCellEvents.INPUT), onIconClick: (e) => cellEvent(e, props, cellType, FCellEvents.ICON_CLICK) })));
   }
 }
 function setCell(cellType, subcomponentProps, content, classObj, cell, column, props) {
@@ -236,7 +239,8 @@ function setCell(cellType, subcomponentProps, content, classObj, cell, column, p
       }
       return content;
     case FCellTypes.CHECKBOX:
-      if (autoAlignComps.includes(props.component.rootElement.tagName)) {
+      if (autoAlignComps.includes(props.component.rootElement
+        .tagName)) {
         classObj[FCellClasses.C_CENTERED] = true;
       }
       return (h(FImage, { resource: subcomponentProps.checked
@@ -246,7 +250,8 @@ function setCell(cellType, subcomponentProps, content, classObj, cell, column, p
       return h("div", { innerHTML: cell.value });
     case FCellTypes.ICON:
     case FCellTypes.IMAGE:
-      if (autoAlignComps.includes(props.component.rootElement.tagName)) {
+      if (autoAlignComps.includes(props.component.rootElement
+        .tagName)) {
         classObj[FCellClasses.C_CENTERED] = true;
       }
       if (subcomponentProps.badgeData) {
@@ -262,7 +267,8 @@ function setCell(cellType, subcomponentProps, content, classObj, cell, column, p
         if (cellValueNumber < 0) {
           classObj[FCellClasses.TEXT_DANGER] = true;
         }
-        if (autoAlignComps.includes(props.component.rootElement.tagName)) {
+        if (autoAlignComps.includes(props.component.rootElement
+          .tagName)) {
           classObj[FCellClasses.C_RIGHT_ALIGNED] = true;
         }
         return h("div", { class: "f-cell__text" }, cellValue);
@@ -281,17 +287,20 @@ function setKupCell(cellType, classObj, subcomponentProps, cell, row, column, pr
       else {
         const barStyle = {
           height: subcomponentProps.sizeY,
+          width: '100%',
         };
         return (h("div", { style: barStyle },
           h(FImage, Object.assign({}, subcomponentProps))));
       }
     case FCellTypes.BUTTON:
-      if (autoAlignComps.includes(props.component.rootElement.tagName)) {
+      if (autoAlignComps.includes(props.component.rootElement
+        .tagName)) {
         classObj[FCellClasses.C_CENTERED] = true;
       }
       return (h("kup-button", Object.assign({}, subcomponentProps, { "onkup-button-click": (e) => cellEvent(e, props, cellType, FCellEvents.CLICK) })));
     case FCellTypes.BUTTON_LIST:
-      if (autoAlignComps.includes(props.component.rootElement.tagName)) {
+      if (autoAlignComps.includes(props.component.rootElement
+        .tagName)) {
         classObj[FCellClasses.C_CENTERED] = true;
       }
       subcomponentProps['data-storage'] = {
@@ -301,21 +310,23 @@ function setKupCell(cellType, classObj, subcomponentProps, cell, row, column, pr
       };
       return h("kup-button-list", Object.assign({}, subcomponentProps));
     case FCellTypes.CHART:
-      if (autoAlignComps.includes(props.component.rootElement.tagName)) {
+      if (autoAlignComps.includes(props.component.rootElement
+        .tagName)) {
         classObj[FCellClasses.C_CENTERED] = true;
       }
       return h("kup-chart", Object.assign({}, subcomponentProps));
     case FCellTypes.CHIP:
       return h(FChip, Object.assign({}, subcomponentProps));
     case FCellTypes.COLOR_PICKER:
-      return (h("kup-color-picker", Object.assign({}, subcomponentProps, { disabled: true })));
+      return (h("kup-color-picker", Object.assign({}, subcomponentProps, { class: "kup-full-width", disabled: true })));
     case FCellTypes.GAUGE:
       return (h("kup-gauge", Object.assign({ value: stringToNumber(cell.value), "width-component": "280px" }, subcomponentProps)));
     case FCellTypes.KNOB:
     case FCellTypes.PROGRESS_BAR:
       return h("kup-progress-bar", Object.assign({}, subcomponentProps));
     case FCellTypes.RADIO:
-      if (autoAlignComps.includes(props.component.rootElement.tagName)) {
+      if (autoAlignComps.includes(props.component.rootElement
+        .tagName)) {
         classObj[FCellClasses.C_CENTERED] = true;
       }
       subcomponentProps['disabled'] = row.readOnly;
@@ -421,33 +432,36 @@ function cellEvent(e, props, cellType, cellEventName) {
   let value = isInputEvent
     ? e.target.value
     : e.detail.value;
-  switch (cellType) {
-    case FCellTypes.AUTOCOMPLETE:
-    case FCellTypes.COMBOBOX:
-    case FCellTypes.DATE:
-    case FCellTypes.TIME:
-      if (cell.data) {
-        cell.data['initialValue'] = value;
-      }
-      break;
-    case FCellTypes.CHECKBOX:
-      value = value === 'on' ? '0' : '1';
-      if (cell.data) {
-        cell.data.checked =
-          value === '0' ? false : true;
-      }
-      break;
-  }
-  if (cell.obj) {
-    cell.obj.k = value;
+  if (cellEventName === FCellEvents.UPDATE) {
+    switch (cellType) {
+      case FCellTypes.AUTOCOMPLETE:
+      case FCellTypes.COMBOBOX:
+      case FCellTypes.DATE:
+      case FCellTypes.TIME:
+        if (cell.data) {
+          cell.data['initialValue'] = value;
+        }
+        break;
+      case FCellTypes.CHECKBOX:
+        value = value === 'on' ? '0' : '1';
+        if (cell.data) {
+          cell.data.checked =
+            value === '0' ? false : true;
+        }
+        break;
+    }
+    if (cell.obj) {
+      cell.obj.k = value.toString();
+    }
+    cell.value = value.toString();
+    cell.displayedValue = null;
+    cell.displayedValue = getCellValueForDisplay(column, cell);
   }
-  cell.value = value;
-  cell.displayedValue = null;
-  cell.displayedValue = getCellValueForDisplay(column, cell);
   if (comp && comp.rootElement) {
-    const updateEvent = new CustomEvent(cellEventName, {
+    const cellEvent = new CustomEvent(cellEventName, {
       bubbles: true,
       cancelable: true,
+      composed: true,
       detail: {
         comp: comp,
         id: comp.rootElement.id,
@@ -458,7 +472,7 @@ function cellEvent(e, props, cellType, cellEventName) {
         type: cellType,
       },
     });
-    comp.rootElement.dispatchEvent(updateEvent);
+    comp.rootElement.dispatchEvent(cellEvent);
     try {
       comp.refresh();
     }