@sme.up/ketchup 8.2.0 → 8.2.1

package/dist/collection/assets/echart.js

@@ -6,6 +6,7 @@ const echart5 = document.getElementById('gaussian2chart');
 const echart6 = document.getElementById('funnelChart');
 const echart7 = document.getElementById('radarChart');
 const echart8 = document.getElementById('bubbleChart');
+const echart9 = document.getElementById('sankeyChart');
 
 const mockData = {
     columns: [
@@ -790,10 +791,9 @@ echart7.data = {
     ],
 };
 
-
 echart8.consistencyCheck = true;
 echart8.types = ['Bubble'];
-echart8.colors =  ['blue'];
+echart8.colors = ['blue'];
 echart8.axis = '';
 echart8.chartTitle = {
     value: 'Bubble',
@@ -822,7 +822,7 @@ echart8.data = {
         {
             name: 'YEAR',
             title: 'Year',
-        }
+        },
     ],
     rows: [
         {
@@ -961,8 +961,150 @@ echart8.data = {
                 },
             },
         },
-    ]
+    ],
+};
 
+echart9.consistencyCheck = true;
+echart9.types = ['Sankey'];
+echart9.colors = ['blue'];
+echart9.axis = '';
+echart9.chartTitle = {
+    value: 'Sankey',
+    color: 'red',
+    position: 'top',
+    size: 16,
+};
+echart9.data = {
+    // actual dataset
+    columns: [
+        {
+            name: 'SOURCE',
+            title: 'Source',
+        },
+        {
+            name: 'TARGET',
+            title: 'Target',
+        },
+        {
+            name: 'VALUE',
+            obj: {
+                t: 'NR',
+                p: '',
+                k: '',
+            },
+            title: 'Value',
+        },
+    ],
+    rows: [
+        {
+            cells: {
+                SOURCE: {
+                    value: 'a',
+                },
+                TARGET: {
+                    value: 'a1',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '5',
+                    },
+                    value: '5',
+                },
+            },
+        },
+        {
+            cells: {
+                SOURCE: {
+                    value: 'a',
+                },
+                TARGET: {
+                    value: 'a2',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '3',
+                    },
+                    value: '3',
+                },
+            },
+        },
+        {
+            cells: {
+                SOURCE: {
+                    value: 'b',
+                },
+                TARGET: {
+                    value: 'b1',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '8',
+                    },
+                    value: '8',
+                },
+            },
+        },
+        {
+            cells: {
+                SOURCE: {
+                    value: 'a',
+                },
+                TARGET: {
+                    value: 'b1',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '3',
+                    },
+                    value: '3',
+                },
+            },
+        },
+        {
+            cells: {
+                SOURCE: {
+                    value: 'b1',
+                },
+                TARGET: {
+                    value: 'a1',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '1',
+                    },
+                    value: '1',
+                },
+            },
+        },
+        {
+            cells: {
+                SOURCE: {
+                    value: 'b1',
+                },
+                TARGET: {
+                    value: 'c',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '2',
+                    },
+                    value: '2',
+                },
+            },
+        },
+    ],
 };
 
 document.addEventListener('kup-echart-click', (e) => {

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

@@ -5,8 +5,8 @@ export class KupDataTableState {
     this.expandGroups = false;
     this.groupLabelDisplay = GroupLabelDisplayMode.BOTH;
     this.density = 'small';
-    this.enableExtraColumns = true;
     this.enableSortableColumns = false;
+    this.enableExtraColumns = true;
     this.forceOneLine = false;
     this.globalFilter = false;
     this.globalFilterValue = '';

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

@@ -50,4 +50,5 @@ export var KupEchartTypes;
   KupEchartTypes["FUNNEL"] = "Funnel";
   KupEchartTypes["RADAR"] = "Radar";
   KupEchartTypes["BUBBLE"] = "Bubble";
+  KupEchartTypes["SANKEY"] = "Sankey";
 })(KupEchartTypes || (KupEchartTypes = {}));

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

@@ -14,7 +14,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     throw new TypeError("Cannot write private member to an object whose class did not declare it");
   return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _KupEchart_instances, _KupEchart_chartContainer, _KupEchart_chartEl, _KupEchart_gaussianDatasets, _KupEchart_kupManager, _KupEchart_mapObj, _KupEchart_resizeTimeout, _KupEchart_sortedDataset, _KupEchart_themeBorder, _KupEchart_themeBackground, _KupEchart_minColorHeatMap, _KupEchart_maxColorHeatMap, _KupEchart_themeFont, _KupEchart_themeText, _KupEchart_initChart, _KupEchart_createChart, _KupEchart_funnelChart, _KupEchart_radarChart, _KupEchart_bubbleChart, _KupEchart_createX, _KupEchart_createY, _KupEchart_setAxisColors, _KupEchart_setLegend, _KupEchart_setTitle, _KupEchart_setTooltip, _KupEchart_setVisualMap, _KupEchart_setMapOptions, _KupEchart_setPieOptions, _KupEchart_setGaussianOptions, _KupEchart_addSeries, _KupEchart_setOptions, _KupEchart_setColors, _KupEchart_checks;
+var _KupEchart_instances, _KupEchart_chartContainer, _KupEchart_chartEl, _KupEchart_gaussianDatasets, _KupEchart_kupManager, _KupEchart_mapObj, _KupEchart_resizeTimeout, _KupEchart_sortedDataset, _KupEchart_themeBorder, _KupEchart_themeBackground, _KupEchart_minColorHeatMap, _KupEchart_maxColorHeatMap, _KupEchart_themeFont, _KupEchart_themeText, _KupEchart_initChart, _KupEchart_createChart, _KupEchart_funnelChart, _KupEchart_radarChart, _KupEchart_bubbleChart, _KupEchart_sankeyChart, _KupEchart_createX, _KupEchart_createY, _KupEchart_setAxisColors, _KupEchart_setLegend, _KupEchart_setTitle, _KupEchart_setTooltip, _KupEchart_setVisualMap, _KupEchart_setMapOptions, _KupEchart_setPieOptions, _KupEchart_setGaussianOptions, _KupEchart_addSeries, _KupEchart_setOptions, _KupEchart_setColors, _KupEchart_checks;
 import { forceUpdate, getAssetPath, Host, h, } from '@stencil/core';
 import * as echarts from 'echarts';
 import { KupEchartLegendPlacement, KupEchartMaps, KupEchartProps, KupEchartTypes, } from './kup-echart-declarations';
@@ -655,6 +655,9 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     case KupEchartTypes.BUBBLE:
       options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_bubbleChart).call(this);
       break;
+    case KupEchartTypes.SANKEY:
+      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_sankeyChart).call(this);
+      break;
     default:
       options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setOptions).call(this);
       break;
@@ -792,13 +795,13 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
 }, _KupEchart_bubbleChart = function _KupEchart_bubbleChart() {
   const y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this), data = [], temp = [], legend = {}, series = [];
   let year = [];
-  const content = this.data.columns.map(data => data.title);
+  const content = this.data.columns.map((data) => data.title);
   if (content && content.length) {
     for (let i = 0; i < y[content[0]].length; i++) {
       const arr = [];
       for (let j = 0; j < content.length; j++) {
         arr.push(y[content[j]][i]);
-        // last value always be a year 
+        // last value always be a year
         if (j === content.length - 1) {
           year.push(y[content[j]][i]);
         }
@@ -809,7 +812,7 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
   year = [...new Set(year)];
   year.forEach((e, i) => {
     let k = [];
-    temp.forEach(data => {
+    temp.forEach((data) => {
       if (data.includes(e))
         k.push(data);
     });
@@ -831,9 +834,9 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
           formatter: function (param) {
             return param.data[3];
           },
-          position: 'top'
-        }
-      }
+          position: 'top',
+        },
+      },
     });
   });
   return {
@@ -845,7 +848,7 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
           return `<li>  ${e}: ${name[i]} </li>`;
         });
         let showContent = '';
-        data.forEach(r => {
+        data.forEach((r) => {
           showContent += r;
         });
         return `<ul>${showContent}</ul> `;
@@ -853,20 +856,56 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     xAxis: {
       splitLine: {
         lineStyle: {
-          type: 'dashed'
-        }
-      }
+          type: 'dashed',
+        },
+      },
     },
     yAxis: {
       splitLine: {
         lineStyle: {
-          type: 'dashed'
-        }
+          type: 'dashed',
+        },
       },
-      scale: true
+      scale: true,
     },
     color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, content.length),
-    series: series
+    series: series,
+  };
+}, _KupEchart_sankeyChart = function _KupEchart_sankeyChart() {
+  const links = [], y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this), keys = Object.keys(y);
+  // Assuming all arrays in the question object have the same length
+  const arrayLength = y[keys[0]].length;
+  for (let i = 0; i < arrayLength; i++) {
+    const entry = {};
+    entry['source'] = y[keys[0]][i];
+    entry['target'] = y[keys[1]][i];
+    entry['value'] = parseInt(y[keys[2]][i]);
+    links.push(entry);
+  }
+  const data = Array.from(new Set([
+    ...links.map((link) => link.source),
+    ...links.map((link) => link.target),
+  ])).map((name) => ({ name }));
+  const legend = {};
+  data.forEach((e, i) => {
+    legend[e.name] = i;
+  });
+  return {
+    title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
+    legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, legend),
+    color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, arrayLength),
+    tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item' }),
+    series: {
+      type: 'sankey',
+      layout: 'none',
+      emphasis: {
+        focus: 'adjacency',
+      },
+      data,
+      links,
+      right: '10%',
+      left: '10%',
+    },
   };
 }, _KupEchart_createX = function _KupEchart_createX(dataset = null) {
   const x = [];

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

@@ -28,6 +28,7 @@ export var KupTextFieldProps;
   KupTextFieldProps["name"] = "The HTML name attribute used for form autocomplete.";
   KupTextFieldProps["outlined"] = "When set to true, the component will be rendered as an outlined field.";
   KupTextFieldProps["readOnly"] = "Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select.";
+  KupTextFieldProps["size"] = "The HTML attribute size of the input element.";
   KupTextFieldProps["step"] = "The HTML step of the input element. It has effect only with number input type.";
   KupTextFieldProps["textArea"] = "When set to true, the component will be rendered as a textarea.";
   KupTextFieldProps["trailingIcon"] = "When set, the icon will be shown after the text.";

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

@@ -46,6 +46,7 @@ export class KupTextField {
     this.name = null;
     this.outlined = false;
     this.readOnly = false;
+    this.size = null;
     this.step = null;
     this.textArea = false;
     this.trailingIcon = false;
@@ -243,6 +244,7 @@ export class KupTextField {
       shaped: this.rootElement.classList.contains('kup-shaped')
         ? true
         : false,
+      size: this.size,
       step: this.step,
       success: this.rootElement.classList.contains('kup-success')
         ? true
@@ -789,6 +791,27 @@ export class KupTextField {
         "reflect": false,
         "defaultValue": "false"
       },
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "The HTML attribute size of the input element."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "null"
+      },
       "step": {
         "type": "number",
         "mutable": false,

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

@@ -104,7 +104,7 @@ export const FCell = (props, children) => {
   }
   return (h("div", { onKeyUp: (e) => cellEvent(e, props, cellType, FCellEvents.KEYUP), class: classObj, "kup-get-cell-props": () => {
       return props;
-    }, style: cell.style }, h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle }, children && children.length > 0
+    }, ref: (el) => (cell.element = el), style: cell.style }, h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle }, children && children.length > 0
     ? children
     : [props.indents, infoEl, icon, content])));
 };

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

@@ -67,7 +67,7 @@ function setContent(props) {
   }
   return (h("div", { class: classObj }, props.textArea && props.maxLength ? (h("div", { class: "mdc-text-field-character-counter" }, "'0 / ' + ", 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: 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: inputType, 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: value, onBlur: (e) => {
+      : undefined, maxlength: props.maxLength, size: props.size, value: value, onBlur: (e) => {
       var _a;
       if (persManageForNumberFormat) {
         const options = {

package/dist/components/kup-autocomplete2.js

@@ -19834,7 +19834,7 @@ function setContent(props) {
     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: 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: inputType, 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: value, onBlur: (e) => {
+        : undefined, maxlength: props.maxLength, size: props.size, value: value, onBlur: (e) => {
         var _a;
         if (persManageForNumberFormat) {
           const options = {
@@ -23097,7 +23097,7 @@ const FCell = (props, children) => {
   }
   return (h("div", { onKeyUp: (e) => cellEvent(e, props, cellType, FCellEvents.KEYUP), class: classObj, "kup-get-cell-props": () => {
       return props;
-    }, style: cell.style },
+    }, ref: (el) => (cell.element = el), style: cell.style },
     h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle }, children && children.length > 0
       ? children
       : [props.indents, infoEl, icon, content])));
@@ -29172,8 +29172,8 @@ class KupDataTableState {
     this.expandGroups = false;
     this.groupLabelDisplay = GroupLabelDisplayMode.BOTH;
     this.density = 'small';
-    this.enableExtraColumns = true;
     this.enableSortableColumns = false;
+    this.enableExtraColumns = true;
     this.forceOneLine = false;
     this.globalFilter = false;
     this.globalFilterValue = '';
@@ -31117,6 +31117,7 @@ var KupTextFieldProps;
   KupTextFieldProps["name"] = "The HTML name attribute used for form autocomplete.";
   KupTextFieldProps["outlined"] = "When set to true, the component will be rendered as an outlined field.";
   KupTextFieldProps["readOnly"] = "Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select.";
+  KupTextFieldProps["size"] = "The HTML attribute size of the input element.";
   KupTextFieldProps["step"] = "The HTML step of the input element. It has effect only with number input type.";
   KupTextFieldProps["textArea"] = "When set to true, the component will be rendered as a textarea.";
   KupTextFieldProps["trailingIcon"] = "When set, the icon will be shown after the text.";
@@ -33445,6 +33446,7 @@ const KupTextField = /*@__PURE__*/ proxyCustomElement(class KupTextField extends
     this.name = null;
     this.outlined = false;
     this.readOnly = false;
+    this.size = null;
     this.step = null;
     this.textArea = false;
     this.trailingIcon = false;
@@ -33635,6 +33637,7 @@ const KupTextField = /*@__PURE__*/ proxyCustomElement(class KupTextField extends
       shaped: this.rootElement.classList.contains('kup-shaped')
         ? true
         : false,
+      size: this.size,
       step: this.step,
       success: this.rootElement.classList.contains('kup-success')
         ? true
@@ -33687,6 +33690,7 @@ const KupTextField = /*@__PURE__*/ proxyCustomElement(class KupTextField extends
     "name": [1],
     "outlined": [4],
     "readOnly": [4, "read-only"],
+    "size": [2],
     "step": [2],
     "textArea": [4, "text-area"],
     "trailingIcon": [4, "trailing-icon"],

package/dist/components/kup-echart2.js

@@ -93854,6 +93854,7 @@ var KupEchartTypes;
   KupEchartTypes["FUNNEL"] = "Funnel";
   KupEchartTypes["RADAR"] = "Radar";
   KupEchartTypes["BUBBLE"] = "Bubble";
+  KupEchartTypes["SANKEY"] = "Sankey";
 })(KupEchartTypes || (KupEchartTypes = {}));
 
 const kupEchartCss = ":host{display:block;height:var(--kup_echart_height, 100%);min-height:var(--kup_echart_height, 100%);min-width:var(--kup_echart_width, 100%);width:var(--kup_echart_width, 100%)}#kup-component{width:100%;height:100%;position:relative}";
@@ -93874,7 +93875,7 @@ var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) ||
     throw new TypeError("Cannot write private member to an object whose class did not declare it");
   return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _KupEchart_instances, _KupEchart_chartContainer, _KupEchart_chartEl, _KupEchart_gaussianDatasets, _KupEchart_kupManager, _KupEchart_mapObj, _KupEchart_resizeTimeout, _KupEchart_sortedDataset, _KupEchart_themeBorder, _KupEchart_themeBackground, _KupEchart_minColorHeatMap, _KupEchart_maxColorHeatMap, _KupEchart_themeFont, _KupEchart_themeText, _KupEchart_initChart, _KupEchart_createChart, _KupEchart_funnelChart, _KupEchart_radarChart, _KupEchart_bubbleChart, _KupEchart_createX, _KupEchart_createY, _KupEchart_setAxisColors, _KupEchart_setLegend, _KupEchart_setTitle, _KupEchart_setTooltip, _KupEchart_setVisualMap, _KupEchart_setMapOptions, _KupEchart_setPieOptions, _KupEchart_setGaussianOptions, _KupEchart_addSeries, _KupEchart_setOptions, _KupEchart_setColors, _KupEchart_checks;
+var _KupEchart_instances, _KupEchart_chartContainer, _KupEchart_chartEl, _KupEchart_gaussianDatasets, _KupEchart_kupManager, _KupEchart_mapObj, _KupEchart_resizeTimeout, _KupEchart_sortedDataset, _KupEchart_themeBorder, _KupEchart_themeBackground, _KupEchart_minColorHeatMap, _KupEchart_maxColorHeatMap, _KupEchart_themeFont, _KupEchart_themeText, _KupEchart_initChart, _KupEchart_createChart, _KupEchart_funnelChart, _KupEchart_radarChart, _KupEchart_bubbleChart, _KupEchart_sankeyChart, _KupEchart_createX, _KupEchart_createY, _KupEchart_setAxisColors, _KupEchart_setLegend, _KupEchart_setTitle, _KupEchart_setTooltip, _KupEchart_setVisualMap, _KupEchart_setMapOptions, _KupEchart_setPieOptions, _KupEchart_setGaussianOptions, _KupEchart_addSeries, _KupEchart_setOptions, _KupEchart_setColors, _KupEchart_checks;
 const KupEchart = /*@__PURE__*/ proxyCustomElement(class KupEchart extends HTMLElement {
   constructor() {
     super();
@@ -94071,6 +94072,9 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     case KupEchartTypes.BUBBLE:
       options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_bubbleChart).call(this);
       break;
+    case KupEchartTypes.SANKEY:
+      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_sankeyChart).call(this);
+      break;
     default:
       options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setOptions).call(this);
       break;
@@ -94208,13 +94212,13 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
 }, _KupEchart_bubbleChart = function _KupEchart_bubbleChart() {
   const y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this), data = [], temp = [], legend = {}, series = [];
   let year = [];
-  const content = this.data.columns.map(data => data.title);
+  const content = this.data.columns.map((data) => data.title);
   if (content && content.length) {
     for (let i = 0; i < y[content[0]].length; i++) {
       const arr = [];
       for (let j = 0; j < content.length; j++) {
         arr.push(y[content[j]][i]);
-        // last value always be a year 
+        // last value always be a year
         if (j === content.length - 1) {
           year.push(y[content[j]][i]);
         }
@@ -94225,7 +94229,7 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
   year = [...new Set(year)];
   year.forEach((e, i) => {
     let k = [];
-    temp.forEach(data => {
+    temp.forEach((data) => {
       if (data.includes(e))
         k.push(data);
     });
@@ -94247,9 +94251,9 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
           formatter: function (param) {
             return param.data[3];
           },
-          position: 'top'
-        }
-      }
+          position: 'top',
+        },
+      },
     });
   });
   return {
@@ -94261,7 +94265,7 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
           return `<li>  ${e}: ${name[i]} </li>`;
         });
         let showContent = '';
-        data.forEach(r => {
+        data.forEach((r) => {
           showContent += r;
         });
         return `<ul>${showContent}</ul> `;
@@ -94269,20 +94273,56 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     xAxis: {
       splitLine: {
         lineStyle: {
-          type: 'dashed'
-        }
-      }
+          type: 'dashed',
+        },
+      },
     },
     yAxis: {
       splitLine: {
         lineStyle: {
-          type: 'dashed'
-        }
+          type: 'dashed',
+        },
       },
-      scale: true
+      scale: true,
     },
     color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, content.length),
-    series: series
+    series: series,
+  };
+}, _KupEchart_sankeyChart = function _KupEchart_sankeyChart() {
+  const links = [], y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this), keys = Object.keys(y);
+  // Assuming all arrays in the question object have the same length
+  const arrayLength = y[keys[0]].length;
+  for (let i = 0; i < arrayLength; i++) {
+    const entry = {};
+    entry['source'] = y[keys[0]][i];
+    entry['target'] = y[keys[1]][i];
+    entry['value'] = parseInt(y[keys[2]][i]);
+    links.push(entry);
+  }
+  const data = Array.from(new Set([
+    ...links.map((link) => link.source),
+    ...links.map((link) => link.target),
+  ])).map((name) => ({ name }));
+  const legend = {};
+  data.forEach((e, i) => {
+    legend[e.name] = i;
+  });
+  return {
+    title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
+    legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, legend),
+    color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, arrayLength),
+    tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item' }),
+    series: {
+      type: 'sankey',
+      layout: 'none',
+      emphasis: {
+        focus: 'adjacency',
+      },
+      data,
+      links,
+      right: '10%',
+      left: '10%',
+    },
   };
 }, _KupEchart_createX = function _KupEchart_createX(dataset = null) {
   const x = [];

package/dist/esm/{f-button-e0e6f65f.js → f-button-c5b36ae1.js}

@@ -1,6 +1,6 @@
-import { h } from './index-bb15ce14.js';
+import { h } from './index-b45996ce.js';
 import { F as FButtonStyling } from './f-button-declarations-fd4965d1.js';
-import { F as FImage } from './f-image-b853b0cc.js';
+import { F as FImage } from './f-image-c356f4c5.js';
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */

package/dist/esm/{f-cell-359dfe28.js → f-cell-d48502f1.js}

@@ -1,9 +1,9 @@
-import { a9 as editableTypes, aa as kupTypes, b as KupThemeColorValues, a6 as FCellTypes, ab as KupTagNames, ac as fullWidthFieldsComps, ad as FCellClasses, ae as autoCenterComps, af as getCellValueForDisplay, ag as FCellEvents } from './kup-manager-1e6ea451.js';
-import { h } from './index-bb15ce14.js';
-import { F as FCheckbox } from './f-checkbox-91358c27.js';
-import { F as FTextField } from './f-text-field-92bb3a1f.js';
-import { F as FImage } from './f-image-b853b0cc.js';
-import { F as FChipType, a as FChip } from './f-chip-0fd043b4.js';
+import { a9 as editableTypes, aa as kupTypes, b as KupThemeColorValues, a6 as FCellTypes, ab as KupTagNames, ac as fullWidthFieldsComps, ad as FCellClasses, ae as autoCenterComps, af as getCellValueForDisplay, ag as FCellEvents } from './kup-manager-74e46edc.js';
+import { h } from './index-b45996ce.js';
+import { F as FCheckbox } from './f-checkbox-11b32f83.js';
+import { F as FTextField } from './f-text-field-7e2b397b.js';
+import { F as FImage } from './f-image-c356f4c5.js';
+import { F as FChipType, a as FChip } from './f-chip-038e9404.js';
 
 /**
  * Props of the kup-list component.
@@ -148,7 +148,7 @@ const FCell = (props, children) => {
   }
   return (h("div", { onKeyUp: (e) => cellEvent(e, props, cellType, FCellEvents.KEYUP), class: classObj, "kup-get-cell-props": () => {
       return props;
-    }, style: cell.style },
+    }, ref: (el) => (cell.element = el), style: cell.style },
     h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle }, children && children.length > 0
       ? children
       : [props.indents, infoEl, icon, content])));

package/dist/esm/{f-checkbox-91358c27.js → f-checkbox-11b32f83.js}

@@ -1,4 +1,4 @@
-import { h } from './index-bb15ce14.js';
+import { h } from './index-b45996ce.js';
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */

package/dist/esm/{f-chip-0fd043b4.js → f-chip-038e9404.js}

@@ -1,6 +1,6 @@
-import { h } from './index-bb15ce14.js';
-import { F as FImage } from './f-image-b853b0cc.js';
-import { K as KupThemeIconValues, m as KupLanguageGeneric, b as KupThemeColorValues } from './kup-manager-1e6ea451.js';
+import { h } from './index-b45996ce.js';
+import { F as FImage } from './f-image-c356f4c5.js';
+import { K as KupThemeIconValues, m as KupLanguageGeneric, b as KupThemeColorValues } from './kup-manager-74e46edc.js';
 
 /**
  * Types of the f-chip component.

package/dist/esm/{f-image-b853b0cc.js → f-image-c356f4c5.js}

@@ -1,5 +1,5 @@
-import { h, a as getAssetPath } from './index-bb15ce14.js';
-import { b as KupThemeColorValues } from './kup-manager-1e6ea451.js';
+import { h, a as getAssetPath } from './index-b45996ce.js';
+import { b as KupThemeColorValues } from './kup-manager-74e46edc.js';
 
 /**
  * The type of a CSS step in CSS-drawing mode.