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

package/dist/types/utils/filters/filters-rows.d.ts

@@ -1,20 +1,20 @@
 import type { GenericFilter, ValueDisplayedValue } from './filters-declarations';
 import type { KupDataTable } from '../../components/kup-data-table/kup-data-table';
 import type { KupTree } from '../../components/kup-tree/kup-tree';
-import { Cell, Column, Row, CellsHolder } from '../../components/kup-data-table/kup-data-table-declarations';
 import { Filters } from './filters';
 import { FiltersColumnMenu } from './filters-column-menu';
+import { KupDataCell, KupDataColumn, KupDataRow, KupDataRowCells } from '../../managers/kup-data/kup-data-declarations';
 /**
  * Filtering algorithms related to data-table rows.
  * @module FiltersRows
  * @todo Should contain EVERY row-specific filtering method.
  */
 export declare class FiltersRows extends Filters {
-  isFilterCompliantForCell(cellValue: Cell, filterValue: string, interval: string[]): boolean;
-  isFilterCompliantForCellObj(cellValue: Cell, filterValue: string, interval: string[]): boolean;
-  isRowCompliant(r: Row, filters?: GenericFilter, globalFilter?: string, isUsingGlobalFilter?: boolean, columns?: Column[], columnFilters?: FiltersColumnMenu): boolean;
-  areCellsCompliant(cells: CellsHolder, filters?: GenericFilter, globalFilter?: string, isUsingGlobalFilter?: boolean, columns?: Column[], columnFilters?: FiltersColumnMenu): boolean;
-  hasFilters(filters: GenericFilter, columns: Column[], columnFilters?: FiltersColumnMenu): boolean;
+  isFilterCompliantForCell(cellValue: KupDataCell, filterValue: string, interval: string[]): boolean;
+  isFilterCompliantForCellObj(cellValue: KupDataCell, filterValue: string, interval: string[]): boolean;
+  isRowCompliant(r: KupDataRow, filters?: GenericFilter, globalFilter?: string, isUsingGlobalFilter?: boolean, columns?: KupDataColumn[], columnFilters?: FiltersColumnMenu): boolean;
+  areCellsCompliant(cells: KupDataRowCells, filters?: GenericFilter, globalFilter?: string, isUsingGlobalFilter?: boolean, columns?: KupDataColumn[], columnFilters?: FiltersColumnMenu): boolean;
+  hasFilters(filters: GenericFilter, columns: KupDataColumn[], columnFilters?: FiltersColumnMenu): boolean;
   /**
    * Filters the rows data of a data-table component according to the parameters
    *
@@ -25,8 +25,8 @@ export declare class FiltersRows extends Filters {
    * @todo This function can be improved in its speed by a refactor in which from two different cycles of execution for
    *    single filters and global filter, all controls on a single column are done in a single cycle.
    */
-  filterRows(rows?: Array<Row>, filters?: GenericFilter, globalFilter?: string, columns?: Column[], columnFilters?: FiltersColumnMenu): Array<Row>;
-  getColumnValues(comp: KupDataTable | KupTree, column: Column, globalFilterValue: string, columnFilters?: FiltersColumnMenu): ValueDisplayedValue[];
-  extractColumnValues(rows: Array<Row>, column: Column, values: ValueDisplayedValue[]): ValueDisplayedValue[];
-  addColumnValueFromRow(values: ValueDisplayedValue[], column: Column, cell: Cell): void;
+  filterRows(rows?: Array<KupDataRow>, filters?: GenericFilter, globalFilter?: string, columns?: KupDataColumn[], columnFilters?: FiltersColumnMenu): Array<KupDataRow>;
+  getColumnValues(comp: KupDataTable | KupTree, column: KupDataColumn, globalFilterValue: string, columnFilters?: FiltersColumnMenu): ValueDisplayedValue[];
+  extractColumnValues(rows: Array<KupDataRow>, column: KupDataColumn, values: ValueDisplayedValue[]): ValueDisplayedValue[];
+  addColumnValueFromRow(values: ValueDisplayedValue[], column: KupDataColumn, cell: KupDataCell): void;
 }

package/dist/types/utils/filters/filters-tree-items.d.ts

@@ -1,19 +1,19 @@
-import type { Column } from '../../components/kup-data-table/kup-data-table-declarations';
 import type { GenericFilter, ValueDisplayedValue } from './filters-declarations';
-import { TreeNode } from '../../components/kup-tree/kup-tree-declarations';
+import { KupTreeNode } from '../../components/kup-tree/kup-tree-declarations';
 import { FiltersColumnMenu } from './filters-column-menu';
 import { FiltersRows } from './filters-rows';
+import { KupDataColumn } from '../../managers/kup-data/kup-data-declarations';
 /**
  * Filtering algorithms related to tree items rows.
  * @module FiltersTreeItems
  * @todo Should contain EVERY tree-item-specific filtering method.
  */
 export declare class FiltersTreeItems extends FiltersRows {
-  filterRows(items: TreeNode[], filters: GenericFilter, globalFilter: string, columns: Column[], treeExpandedPropName: any, columnFilters?: FiltersColumnMenu): Array<TreeNode>;
-  isNodeCompliant(node: TreeNode, filters?: GenericFilter, globalFilter?: string, isUsingGlobalFilter?: boolean, columns?: Column[], columnFilters?: FiltersColumnMenu): boolean;
+  filterRows(items?: KupTreeNode[], filters?: GenericFilter, globalFilter?: string, columns?: KupDataColumn[], columnFilters?: FiltersColumnMenu): Array<KupTreeNode>;
+  isNodeCompliant(node: KupTreeNode, filters?: GenericFilter, globalFilter?: string, isUsingGlobalFilter?: boolean, columns?: KupDataColumn[], columnFilters?: FiltersColumnMenu): boolean;
   private setNodeVisibility;
   private setAllVisible;
-  extractColumnValues(rows: Array<TreeNode>, column: Column, values: ValueDisplayedValue[]): ValueDisplayedValue[];
-  expandCollapseNode(treeNode: TreeNode, expandNode: boolean, treeExpandedPropName: any): void;
-  expandCollapseAllNodes(treeNode: TreeNode, expandNode: boolean, treeExpandedPropName: any): void;
+  extractColumnValues(rows: Array<KupTreeNode>, column: KupDataColumn, values: ValueDisplayedValue[]): ValueDisplayedValue[];
+  expandCollapseNode(treeNode: KupTreeNode, expandNode?: boolean): void;
+  expandCollapseAllNodes(treeNode: KupTreeNode, expandNode?: boolean): void;
 }

package/dist/types/utils/helpers.d.ts

@@ -1,4 +1,4 @@
-import { Cell } from '../components/kup-data-table/kup-data-table-declarations';
 import { KupTooltip } from '../components/kup-tooltip/kup-tooltip';
-export declare function setTooltip(event: MouseEvent, rowId: string, colId: string, cell: Cell, tooltip: KupTooltip): void;
+import { KupDataCell } from '../managers/kup-data/kup-data-declarations';
+export declare function setTooltip(event: MouseEvent, rowId: string, colId: string, cell: KupDataCell, tooltip: KupTooltip): void;
 export declare function unsetTooltip(tooltip: KupTooltip): void;

package/dist/types/utils/kup-column-menu/kup-column-menu-declarations.d.ts

@@ -13,6 +13,7 @@ export declare enum KupColumnMenuIds {
   SWITCH_GROUP = "group",
   SWITCH_KEY = "key",
   TEXTFIELD_FILTER = "filter",
+  TEXTFIELD_FORMULA = "formula",
   TEXTFIELD_FROM = "filter-from",
   TEXTFIELD_TO = "filter-to"
 }

package/dist/types/utils/kup-column-menu/kup-column-menu.d.ts

@@ -1,13 +1,13 @@
 import type { KupCardData } from '../../components/kup-card/kup-card-declarations';
 import type { GenericObject } from '../../types/GenericTypes';
 import type { KupDataTable } from '../../components/kup-data-table/kup-data-table';
-import type { KupManagerClickCb } from '../kup-manager/kup-manager-declarations';
+import type { KupManagerClickCb } from '../../managers/kup-manager/kup-manager-declarations';
 import type { KupTooltip } from '../../components/kup-tooltip/kup-tooltip';
 import type { KupTree } from '../../components/kup-tree/kup-tree';
-import type { Column } from '../../components/kup-data-table/kup-data-table-declarations';
 import { FiltersColumnMenu } from '../filters/filters-column-menu';
 import { FilterInterval, ValueDisplayedValue } from '../filters/filters-declarations';
 import { FiltersRows } from '../filters/filters-rows';
+import { KupDataColumn } from '../../managers/kup-data/kup-data-declarations';
 /**
  * Definition and events of the column menu card.
  * @module KupColumnMenu
@@ -36,73 +36,73 @@ export declare class KupColumnMenu {
   /**
    * Function called by the column menu card to prepare its 'data' prop.
    * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   * @param {Column} column - Column of the menu.
+   * @param {KupDataColumn} column - Column of the menu.
    * @param {KupCardData} currentData - 'data' prop of the column menu card when it's already initialized.
    * @returns {GenericObject} 'data' prop of the column menu card.
    */
-  prepData(comp: KupDataTable | KupTree, column: Column, currentData?: KupCardData): KupCardData;
+  prepData(comp: KupDataTable | KupTree, column: KupDataColumn, currentData?: KupCardData): KupCardData;
   /**
    * Handles the column menu's button prop.
    * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   * @param {Column} column - Column of the menu.
+   * @param {KupDataColumn} column - Column of the menu.
    * @returns {GenericObject[]} Buttons props.
    */
-  prepButton(comp: KupDataTable | KupTree, column: Column): GenericObject[];
+  prepButton(comp: KupDataTable | KupTree, column: KupDataColumn): GenericObject[];
   /**
    * Handles the column menu's checkbox prop.
    * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   * @param {Column} column - Column of the menu.
+   * @param {KupDataColumn} column - Column of the menu.
    * @returns {GenericObject[]} Checkboxes props.
    */
-  prepCheckbox(comp: KupDataTable | KupTree, column: Column): GenericObject[];
+  prepCheckbox(comp: KupDataTable | KupTree, column: KupDataColumn): GenericObject[];
   /**
    * Handles the column menu's chip prop.
    * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   * @param {Column} column - Column of the menu.
+   * @param {KupDataColumn} column - Column of the menu.
    * @returns {GenericObject[]} Chips props (only 1 is handled).
    */
-  prepChip(comp: KupDataTable | KupTree, column: Column): GenericObject[];
+  prepChip(comp: KupDataTable | KupTree, column: KupDataColumn): GenericObject[];
   /**
    * Handles the column menu's switch prop.
    * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   * @param {Column} column - Column of the menu.
+   * @param {KupDataColumn} column - Column of the menu.
    * @returns {GenericObject[]} Switches props.
    */
-  prepSwitch(comp: KupDataTable | KupTree, column: Column): GenericObject[];
+  prepSwitch(comp: KupDataTable | KupTree, column: KupDataColumn): GenericObject[];
   /**
    * Handles the column menu's tabbar prop.
    * @param {KupDataTable | KupTree} comp - Component using the column menu.
    * @returns {GenericObject[]} Tab bar props.
    */
-  prepTabBar(comp: KupDataTable | KupTree, column: Column): GenericObject[];
+  prepTabBar(comp: KupDataTable | KupTree, column: KupDataColumn): GenericObject[];
   /**
    * Handles the column menu's textfield prop.
    * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   * @param {Column} column - Column of the menu.
+   * @param {KupDataColumn} column - Column of the menu.
    * @returns {GenericObject[]} Text fields props.
    */
-  prepTextfield(comp: KupDataTable | KupTree, column: Column): GenericObject[];
+  prepTextfield(comp: KupDataTable | KupTree, column: KupDataColumn): GenericObject[];
   /**
    * Handles the column menu's interval textfields props (number column type).
    * @param {KupDataTable | KupTree} comp - Component using the column menu.
    * @param {Column} column - Column of the menu.
    * @returns {GenericObject[]} Text fields props.
    */
-  prepIntervalTextfield(comp: KupDataTable | KupTree, column: Column): GenericObject[];
+  prepIntervalTextfield(comp: KupDataTable | KupTree, column: KupDataColumn): GenericObject[];
   /**
    * Handles the column menu's interval timepicker props (time column type).
    * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   * @param {Column} column - Column of the menu.
+   * @param {KupDataColumn} column - Column of the menu.
    * @returns {GenericObject[]} Time picker fields props.
    */
-  prepIntervalTimePicker(comp: KupDataTable | KupTree, column: Column): GenericObject[];
+  prepIntervalTimePicker(comp: KupDataTable | KupTree, column: KupDataColumn): GenericObject[];
   /**
    * Handles the column menu's interval datepicker props (date/timestamp column type).
    * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   * @param {Column} column - Column of the menu.
+   * @param {KupDataColumn} column - Column of the menu.
    * @returns {GenericObject[]} Date picker fields props.
    */
-  prepIntervalDatePicker(comp: KupDataTable | KupTree, column: Column): GenericObject[];
+  prepIntervalDatePicker(comp: KupDataTable | KupTree, column: KupDataColumn): GenericObject[];
   /**
    * Function called by the column menu card when a kup-card-event is received.
    * @param {CustomEvent} cardEvent - kup-card-event emitted by the column menu.
@@ -113,19 +113,19 @@ export declare class KupColumnMenu {
    * Triggered when the text filter changes.
    * @param {KupDataTable | KupTree} comp - Component using the column menu.
    * @param {string} value - New value of the filter.
-   * @param {Column} column - Column of the menu.
+   * @param {KupDataColumn} column - Column of the menu.
    */
-  textfieldChange(comp: KupDataTable | KupTree, value: string, column: Column): void;
-  intervalChange(comp: KupDataTable | KupTree, value: string, column: Column, index: FilterInterval, needNormalize: boolean, suffix?: string): void;
-  saveTextualFilters(comp: KupDataTable | KupTree, column: Column): void;
+  textfieldChange(comp: KupDataTable | KupTree, value: string, column: KupDataColumn): void;
+  intervalChange(comp: KupDataTable | KupTree, value: string, column: KupDataColumn, index: FilterInterval, needNormalize: boolean, suffix?: string): void;
+  saveTextualFilters(comp: KupDataTable | KupTree, column: KupDataColumn): void;
   /**
    * Triggered when the checkbox list changes.
    * @param {KupDataTable | KupTree} comp - Component using the column menu.
    * @param {boolean} checked - State of the changed checkbox.
-   * @param {Column} column - Column of the menu.
+   * @param {KupDataColumn} column - Column of the menu.
    * @param {string} filterValue - Value used to filter.
    */
-  checkboxChange(comp: KupDataTable | KupTree, checked: boolean, column: Column, filterValueItem: ValueDisplayedValue): void;
+  checkboxChange(comp: KupDataTable | KupTree, checked: boolean, column: KupDataColumn, filterValueItem: ValueDisplayedValue): void;
   /**
    * Toggles the grouping of the given column.
    * @param {KupDataTable} comp - Component using the column menu.
@@ -135,14 +135,8 @@ export declare class KupColumnMenu {
   /**
    * Sets the given column as key for the table.
    * @param {KupDataTable} comp - Component using the column menu.
-   * @param {Column} column - Column of the menu.
+   * @param {KupDataColumn} column - Column of the menu.
    * @param {string} value - The status of the switch.
    */
   setKey(comp: KupDataTable, column: string, value: string): void;
-  /**
-   * The given column will be set to be hidden.
-   * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   * @param {Column} column - Column of the menu.
-   */
-  removeColumn(comp: KupDataTable | KupTree, column: Column): void;
 }

package/dist/types/utils/utils.d.ts

@@ -1,4 +1,6 @@
-import { GenericObject, Identifiable } from '../types/GenericTypes';
+import { GenericObject } from '../types/GenericTypes';
+import { KupBoxRow } from '../components/kup-box/kup-box-declarations';
+import { KupDataRow } from '../managers/kup-data/kup-data-declarations';
 export declare enum DateTimeFormatOptionsMonth {
   NUMERIC = "numeric",
   DIGIT2 = "2-digit",
@@ -6,7 +8,7 @@ export declare enum DateTimeFormatOptionsMonth {
   SHORT = "short",
   NARROW = "narrow"
 }
-export declare function identify(array: Array<Identifiable>): void;
+export declare function identify(array: Array<KupBoxRow | KupDataRow>): void;
 export declare function format(first: string, middle: string, last: string): string;
 export declare function generateUniqueId(field?: string): string;
 export declare function generateUuidv4(): string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sme.up/ketchup",
-    "version": "4.3.0-SNAPSHOT",
+    "version": "5.1.0-SNAPSHOT",
     "keywords": [
         "smeup",
         "KetchUP",
@@ -25,46 +25,51 @@
         "dist/"
     ],
     "scripts": {
-        "buildnodocs": "stencil build",
-        "build": "stencil build --docs",
-        "start": "stencil build --dev --watch --serve",
-        "start--es5": "stencil build --dev --watch --serve --es5",
-        "test:spec": "stencil test --spec",
-        "test:e2e": "stencil test --e2e",
-        "test": "stencil test --spec --e2e",
-        "test.watch": "stencil test --spec --e2e --watchAll"
+        "build:fcomponents-scss": "node scripts/fcomponentsSassParse.js",
+        "build:setup": "rimraf dist && npm run build:fcomponents-scss",
+        "buildnodocs": "npm run build:setup && stencil build",
+        "build": "npm run build:setup && stencil build --docs",
+        "start": "npm run build:setup && stencil build --dev --watch --serve",
+        "start--es5": "npm run build:setup && stencil build --dev --watch --serve --es5",
+        "test:spec": "npm run build:setup && stencil test --spec",
+        "test:e2e": "npm run build:setup && stencil test --e2e",
+        "test": "npm run build:setup && stencil test --spec --e2e",
+        "test.watch": "npm run build:setup && stencil test --spec --e2e --watchAll"
     },
     "dependencies": {
-        "@fullcalendar/core": "^5.9.0",
-        "@fullcalendar/daygrid": "^5.9.0",
-        "@fullcalendar/interaction": "^5.9.0",
-        "@fullcalendar/list": "^5.9.0",
-        "@fullcalendar/timegrid": "^5.9.0",
-        "@material/form-field": "^11.0.0",
-        "@material/ripple": "^11.0.0",
-        "@material/textfield": "^11.0.0",
-        "d3-shape": "^1.3.7",
-        "dayjs": "^1.10.6",
-        "diagram-js": "^5.0.0",
+        "@fullcalendar/core": "^5.10.1",
+        "@fullcalendar/daygrid": "^5.10.1",
+        "@fullcalendar/interaction": "^5.10.1",
+        "@fullcalendar/list": "^5.10.1",
+        "@fullcalendar/timegrid": "^5.10.1",
+        "@material/form-field": "^13.0.0",
+        "@material/ripple": "^13.0.0",
+        "@material/textfield": "^13.0.0",
+        "d3-shape": "^3.1.0",
+        "dayjs": "^1.10.7",
+        "echarts": "^5.2.2",
         "interactjs": "^1.10.11",
-        "jquery": "^3.3.1",
+        "jquery": "^3.6.0",
         "numeral": "^2.0.6",
-        "resize-observer": "^1.0.2",
-        "vanilla-picker": "^2.11.0"
+        "resize-observer": "^1.0.4",
+        "vanilla-picker": "^2.12.1"
     },
     "devDependencies": {
-        "@stencil/core": "^2.12.0",
+        "@stencil/core": "^2.14.0",
         "@stencil/sass": "^1.4.1",
         "@types/d3-shape": "^2.1.0",
+        "@types/geojson": "^7946.0.8",
         "@types/jest": "^26.0.24",
         "@types/jest-cli": "^24.3.0",
         "@types/node": "^14.5.0",
-        "@types/numeral": "0.0.25",
+        "@types/numeral": "^2.0.2",
         "@types/puppeteer": "^5.4.3",
         "jest": "^26.6.3",
         "jest-cli": "^26.6.3",
         "jest-environment-node": "^26.6.2",
-        "puppeteer": "~10.0.0"
+        "puppeteer": "^10.0.0",
+        "rimraf": "^3.0.2",
+        "sass": "^1.46.0"
     },
     "repository": {
         "type": "git",

package/dist/cjs/f-chip-90d95d22.js

@@ -1,141 +0,0 @@
-'use strict';
-
-const index = require('./index-0416afab.js');
-const fImage = require('./f-image-d3bd4e08.js');
-const kupManager = require('./kup-manager-1a2688ca.js');
-
-/**
- * Types of the f-chip component.
- * @enum {string}
- * @property {string} CHOICE - Only 1 chip may be selected at a time.
- * @property {string} FILTER - Multiple chips may be selected at a time.
- * @property {string} INPUT - Chips can be deleted by clicking on the rightmost icon.
- * @property {string} STANDARD - Standard chip set.
- */
-exports.FChipType = void 0;
-(function (FChipType) {
-  FChipType["CHOICE"] = "choice";
-  FChipType["FILTER"] = "filter";
-  FChipType["INPUT"] = "input";
-  FChipType["STANDARD"] = "standard";
-})(exports.FChipType || (exports.FChipType = {}));
-
-const dom = document.documentElement;
-/*-------------------------------------------------*/
-/*                C o m p o n e n t                */
-/*-------------------------------------------------*/
-const FChip = (props) => {
-  if (!props.type) {
-    props.type = exports.FChipType.STANDARD;
-  }
-  const isChoice = props.type.toLowerCase() === exports.FChipType.CHOICE;
-  const isFilter = props.type.toLowerCase() === exports.FChipType.FILTER;
-  const isInput = props.type.toLowerCase() === exports.FChipType.INPUT;
-  const classObj = {
-    'chip-set': true,
-    'chip-set--choice': isChoice ? true : false,
-    'chip-set--filter': isFilter ? true : false,
-    'chip-set--input': isInput ? true : false,
-  };
-  return (index.h("div", Object.assign({ class: `f-chip ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
-    index.h("div", { class: classObj, role: "grid" }, createChipList(props, isChoice, isFilter, isInput))));
-};
-/*-------------------------------------------------*/
-/*                  M e t h o d s                  */
-/*-------------------------------------------------*/
-function createChipList(props, isChoice, isFilter, isInput) {
-  const chipList = [];
-  let chipEl;
-  if (props.dataNew && props.dataNew.length > 0) {
-    props.data = treeNode2Data(props.dataNew);
-  }
-  for (let i = 0; props.data && i < props.data.length; i++) {
-    // could happen due to functions that change the data (such as transposition, etc)
-    if (!props.data[i]) {
-      continue;
-    }
-    let componentClass = 'chip';
-    let iconEl = [];
-    let iconClass = 'chip__icon chip__icon--leading';
-    if (isFilter || isChoice) {
-      if (props.data[i].checked) {
-        componentClass += ' chip--selected';
-        if (isFilter) {
-          iconClass += ' chip__icon--leading-hidden';
-        }
-      }
-    }
-    if (props.data[i].icon) {
-      const p = {
-        color: isChoice && props.data[i].checked
-          ? `var(${kupManager.KupThemeColorValues.PRIMARY})`
-          : `var(${kupManager.KupThemeColorValues.TEXT})`,
-        resource: props.data[i].icon,
-        sizeX: '18px',
-        sizeY: '18px',
-        wrapperClass: iconClass,
-      };
-      iconEl.push(index.h(fImage.FImage, Object.assign({}, p)));
-    }
-    if (isFilter) {
-      iconEl.push(index.h("span", { class: "chip__checkmark" },
-        index.h("svg", { class: "chip__checkmark-svg", viewBox: "-2 -3 30 30" },
-          index.h("path", { class: "chip__checkmark-path", fill: "none", stroke: "black", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))));
-    }
-    chipEl = (index.h("div", { class: componentClass, "data-value": props.data[i].value, onClick: props.onClick && props.onClick[i] ? props.onClick[i] : null, role: "row" },
-      iconEl,
-      index.h("span", { role: "gridcell" },
-        index.h("span", { role: "button", tabindex: i, class: "chip__primary-action", 
-          // @ts-ignore
-          value: props.data[i].value, checked: props.data[i].checked, onBlur: props.onBlur && props.onBlur[i]
-            ? props.onBlur[i]
-            : null, onFocus: props.onFocus && props.onFocus[i]
-            ? props.onFocus[i]
-            : null },
-          index.h("span", { class: "chip__text" }, props.data[i].label))),
-      isInput ? (index.h("span", { role: "gridcell" },
-        index.h("span", { tabindex: "-1", class: `kup-icon chip__icon ${kupManager.KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onIconClick && props.onIconClick[i]
-            ? props.onIconClick[i]
-            : null }))) : undefined));
-    chipList.push(chipEl);
-  }
-  return chipList;
-}
-/**
- * This function converts TreeNode[] to FChipData[]. This is valid until FChipData is removed.
- *
- * @return {FChipData} Array of FChipData.
- */
-function treeNode2Data(dataNew) {
-  function children(TreeNode) {
-    for (let index = 0; index < TreeNode.children.length; index++) {
-      const node = TreeNode.children[index];
-      data.push({
-        icon: TreeNode.children[index].icon,
-        label: TreeNode.children[index].value,
-        obj: TreeNode.children[index].obj,
-        value: TreeNode.children[index].id,
-      });
-      if (node.children) {
-        children(node);
-      }
-    }
-  }
-  const data = [];
-  for (let index = 0; index < dataNew.length; index++) {
-    const node = dataNew[index];
-    data.push({
-      icon: node.icon,
-      label: node.value,
-      obj: node.obj,
-      value: node.id,
-    });
-    if (node.children) {
-      children(dataNew[index]);
-    }
-  }
-  dom.ketchup.debug.logMessage('f-chip', 'Chip data was deducted from a TreeNode[] structure (experimental feature).', kupManager.KupDebugCategory.WARNING);
-  return data;
-}
-
-exports.FChip = FChip;