@sme.up/ketchup 7.1.0 → 7.2.0

package/dist/components/kup-dashboard.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { k as kupManagerInstance, g as getProps, s as setProps, a6 as KupLanguageDashboard, T as FButton, R as KupLanguageGeneric, a7 as FTextField, a8 as FCheckbox, Y as KupDragEffect, a9 as KupDebugCategory, aa as FTextFieldMDC, c as componentWrapperId, d as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, h as defineCustomElement$6, i as defineCustomElement$7, j as defineCustomElement$8, l as defineCustomElement$9, m as defineCustomElement$a, n as defineCustomElement$b, o as defineCustomElement$c, p as defineCustomElement$d, q as defineCustomElement$e, r as defineCustomElement$f, t as defineCustomElement$g, u as defineCustomElement$h, v as defineCustomElement$i, w as defineCustomElement$j, x as defineCustomElement$k, y as defineCustomElement$l, z as defineCustomElement$m, A as defineCustomElement$n, B as defineCustomElement$o, C as defineCustomElement$p, D as defineCustomElement$q, E as defineCustomElement$r } from './kup-autocomplete2.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, am as KupLanguageDashboard, ab as FButton, Q as KupLanguageGeneric, an as FTextField, ao as FCheckbox, V as KupDragEffect, S as KupDebugCategory, Y as FTextFieldMDC, c as componentWrapperId, d as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, h as defineCustomElement$6, i as defineCustomElement$7, j as defineCustomElement$8, l as defineCustomElement$9, m as defineCustomElement$a, n as defineCustomElement$b, o as defineCustomElement$c, p as defineCustomElement$d, q as defineCustomElement$e, r as defineCustomElement$f, t as defineCustomElement$g, u as defineCustomElement$h, v as defineCustomElement$i, w as defineCustomElement$j, x as defineCustomElement$k, y as defineCustomElement$l, z as defineCustomElement$m, A as defineCustomElement$n, B as defineCustomElement$o, C as defineCustomElement$p, D as defineCustomElement$q, E as defineCustomElement$r, G as defineCustomElement$s } from './kup-autocomplete2.js';
 
 /**
  * Props of the kup-dashboard component.
@@ -413,7 +413,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["kup-dashboard", "kup-autocomplete", "kup-badge", "kup-button", "kup-button-list", "kup-card", "kup-chart", "kup-checkbox", "kup-chip", "kup-color-picker", "kup-combobox", "kup-data-table", "kup-date-picker", "kup-dropdown-button", "kup-form", "kup-gauge", "kup-image", "kup-list", "kup-progress-bar", "kup-radio", "kup-rating", "kup-spinner", "kup-switch", "kup-tab-bar", "kup-text-field", "kup-time-picker", "kup-tree"];
+  const components = ["kup-dashboard", "kup-autocomplete", "kup-badge", "kup-button", "kup-button-list", "kup-card", "kup-chart", "kup-checkbox", "kup-chip", "kup-color-picker", "kup-combobox", "kup-data-table", "kup-date-picker", "kup-dialog", "kup-dropdown-button", "kup-form", "kup-gauge", "kup-image", "kup-list", "kup-progress-bar", "kup-radio", "kup-rating", "kup-spinner", "kup-switch", "kup-tab-bar", "kup-text-field", "kup-time-picker", "kup-tree"];
   components.forEach(tagName => { switch (tagName) {
     case "kup-dashboard":
       if (!customElements.get(tagName)) {
@@ -422,60 +422,65 @@ function defineCustomElement$1() {
       break;
     case "kup-autocomplete":
       if (!customElements.get(tagName)) {
-        defineCustomElement$r();
+        defineCustomElement$s();
       }
       break;
     case "kup-badge":
       if (!customElements.get(tagName)) {
-        defineCustomElement$q();
+        defineCustomElement$r();
       }
       break;
     case "kup-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$p();
+        defineCustomElement$q();
       }
       break;
     case "kup-button-list":
       if (!customElements.get(tagName)) {
-        defineCustomElement$o();
+        defineCustomElement$p();
       }
       break;
     case "kup-card":
       if (!customElements.get(tagName)) {
-        defineCustomElement$n();
+        defineCustomElement$o();
       }
       break;
     case "kup-chart":
       if (!customElements.get(tagName)) {
-        defineCustomElement$m();
+        defineCustomElement$n();
       }
       break;
     case "kup-checkbox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$l();
+        defineCustomElement$m();
       }
       break;
     case "kup-chip":
       if (!customElements.get(tagName)) {
-        defineCustomElement$k();
+        defineCustomElement$l();
       }
       break;
     case "kup-color-picker":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$k();
       }
       break;
     case "kup-combobox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$j();
       }
       break;
     case "kup-data-table":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$i();
       }
       break;
     case "kup-date-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "kup-dialog":
       if (!customElements.get(tagName)) {
         defineCustomElement$g();
       }

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

@@ -1,4 +1,4 @@
-import { ab as KupDataTable$1, u as defineCustomElement$1 } from './kup-autocomplete2.js';
+import { ap as KupDataTable$1, v as defineCustomElement$1 } from './kup-autocomplete2.js';
 
 const KupDataTable = KupDataTable$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kup-date-picker.js

@@ -1,4 +1,4 @@
-import { ac as KupDatePicker$1, t as defineCustomElement$1 } from './kup-autocomplete2.js';
+import { aq as KupDatePicker$1, u as defineCustomElement$1 } from './kup-autocomplete2.js';
 
 const KupDatePicker = KupDatePicker$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kup-dialog.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface KupDialog extends Components.KupDialog, HTMLElement {}
+export const KupDialog: {
+  prototype: KupDialog;
+  new (): KupDialog;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/kup-dialog.js

@@ -0,0 +1,6 @@
+import { ar as KupDialog$1, t as defineCustomElement$1 } from './kup-autocomplete2.js';
+
+const KupDialog = KupDialog$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { KupDialog, defineCustomElement };

package/dist/components/kup-drawer.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { k as kupManagerInstance, g as getProps, s as setProps, c as componentWrapperId, d as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, h as defineCustomElement$6, i as defineCustomElement$7, j as defineCustomElement$8, l as defineCustomElement$9, m as defineCustomElement$a, n as defineCustomElement$b, o as defineCustomElement$c, p as defineCustomElement$d, q as defineCustomElement$e, r as defineCustomElement$f, t as defineCustomElement$g, u as defineCustomElement$h, v as defineCustomElement$i, w as defineCustomElement$j, x as defineCustomElement$k, y as defineCustomElement$l, z as defineCustomElement$m, A as defineCustomElement$n, B as defineCustomElement$o, C as defineCustomElement$p, D as defineCustomElement$q, E as defineCustomElement$r } from './kup-autocomplete2.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, c as componentWrapperId, d as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, h as defineCustomElement$6, i as defineCustomElement$7, j as defineCustomElement$8, l as defineCustomElement$9, m as defineCustomElement$a, n as defineCustomElement$b, o as defineCustomElement$c, p as defineCustomElement$d, q as defineCustomElement$e, r as defineCustomElement$f, t as defineCustomElement$g, u as defineCustomElement$h, v as defineCustomElement$i, w as defineCustomElement$j, x as defineCustomElement$k, y as defineCustomElement$l, z as defineCustomElement$m, A as defineCustomElement$n, B as defineCustomElement$o, C as defineCustomElement$p, D as defineCustomElement$q, E as defineCustomElement$r, G as defineCustomElement$s } from './kup-autocomplete2.js';
 
 const drawerClass = 'drawer';
 /**
@@ -157,7 +157,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["kup-drawer", "kup-autocomplete", "kup-badge", "kup-button", "kup-button-list", "kup-card", "kup-chart", "kup-checkbox", "kup-chip", "kup-color-picker", "kup-combobox", "kup-data-table", "kup-date-picker", "kup-dropdown-button", "kup-form", "kup-gauge", "kup-image", "kup-list", "kup-progress-bar", "kup-radio", "kup-rating", "kup-spinner", "kup-switch", "kup-tab-bar", "kup-text-field", "kup-time-picker", "kup-tree"];
+  const components = ["kup-drawer", "kup-autocomplete", "kup-badge", "kup-button", "kup-button-list", "kup-card", "kup-chart", "kup-checkbox", "kup-chip", "kup-color-picker", "kup-combobox", "kup-data-table", "kup-date-picker", "kup-dialog", "kup-dropdown-button", "kup-form", "kup-gauge", "kup-image", "kup-list", "kup-progress-bar", "kup-radio", "kup-rating", "kup-spinner", "kup-switch", "kup-tab-bar", "kup-text-field", "kup-time-picker", "kup-tree"];
   components.forEach(tagName => { switch (tagName) {
     case "kup-drawer":
       if (!customElements.get(tagName)) {
@@ -166,60 +166,65 @@ function defineCustomElement$1() {
       break;
     case "kup-autocomplete":
       if (!customElements.get(tagName)) {
-        defineCustomElement$r();
+        defineCustomElement$s();
       }
       break;
     case "kup-badge":
       if (!customElements.get(tagName)) {
-        defineCustomElement$q();
+        defineCustomElement$r();
       }
       break;
     case "kup-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$p();
+        defineCustomElement$q();
       }
       break;
     case "kup-button-list":
       if (!customElements.get(tagName)) {
-        defineCustomElement$o();
+        defineCustomElement$p();
       }
       break;
     case "kup-card":
       if (!customElements.get(tagName)) {
-        defineCustomElement$n();
+        defineCustomElement$o();
       }
       break;
     case "kup-chart":
       if (!customElements.get(tagName)) {
-        defineCustomElement$m();
+        defineCustomElement$n();
       }
       break;
     case "kup-checkbox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$l();
+        defineCustomElement$m();
       }
       break;
     case "kup-chip":
       if (!customElements.get(tagName)) {
-        defineCustomElement$k();
+        defineCustomElement$l();
       }
       break;
     case "kup-color-picker":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$k();
       }
       break;
     case "kup-combobox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$j();
       }
       break;
     case "kup-data-table":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$i();
       }
       break;
     case "kup-date-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "kup-dialog":
       if (!customElements.get(tagName)) {
         defineCustomElement$g();
       }

package/dist/components/kup-dropdown-button.js

@@ -1,4 +1,4 @@
-import { ad as KupDropdownButton$1, r as defineCustomElement$1 } from './kup-autocomplete2.js';
+import { as as KupDropdownButton$1, r as defineCustomElement$1 } from './kup-autocomplete2.js';
 
 const KupDropdownButton = KupDropdownButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kup-echart2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host, getAssetPath } from '@stencil/core/internal/client';
-import { k as kupManagerInstance, g as getProps, s as setProps, a9 as KupDebugCategory, c as componentWrapperId, K as KupThemeColorValues, aK as KupDataNewColumnTypes, d as defineCustomElement$1, b as defineCustomElement$2, e as defineCustomElement$3, f as defineCustomElement$4, h as defineCustomElement$5, i as defineCustomElement$6, j as defineCustomElement$7, l as defineCustomElement$8, m as defineCustomElement$9, n as defineCustomElement$a, o as defineCustomElement$b, p as defineCustomElement$c, q as defineCustomElement$d, r as defineCustomElement$e, t as defineCustomElement$f, u as defineCustomElement$g, v as defineCustomElement$h, w as defineCustomElement$i, x as defineCustomElement$j, y as defineCustomElement$k, z as defineCustomElement$l, A as defineCustomElement$m, B as defineCustomElement$n, C as defineCustomElement$o, D as defineCustomElement$p, E as defineCustomElement$q, S as getColumnByName } from './kup-autocomplete2.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, K as KupThemeColorValues, S as KupDebugCategory, c as componentWrapperId, P as getColumnByName, at as KupDataNewColumnTypes, d as defineCustomElement$1, b as defineCustomElement$2, e as defineCustomElement$3, f as defineCustomElement$4, h as defineCustomElement$5, i as defineCustomElement$6, j as defineCustomElement$7, l as defineCustomElement$8, m as defineCustomElement$9, n as defineCustomElement$a, o as defineCustomElement$b, p as defineCustomElement$c, q as defineCustomElement$d, r as defineCustomElement$e, t as defineCustomElement$f, u as defineCustomElement$g, v as defineCustomElement$h, w as defineCustomElement$i, x as defineCustomElement$j, y as defineCustomElement$k, z as defineCustomElement$l, A as defineCustomElement$m, B as defineCustomElement$n, C as defineCustomElement$o, D as defineCustomElement$p, E as defineCustomElement$q, G as defineCustomElement$r } from './kup-autocomplete2.js';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -93302,6 +93302,7 @@ var KupEchartTypes;
   KupEchartTypes["MAP"] = "Map";
   KupEchartTypes["PIE"] = "Pie";
   KupEchartTypes["SCATTER"] = "Scatter";
+  KupEchartTypes["FUNNEL"] = "Funnel";
 })(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}";
@@ -93322,7 +93323,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_computedColors, _KupEchart_minColorHeatMap, _KupEchart_maxColorHeatMap, _KupEchart_themeFont, _KupEchart_themeText, _KupEchart_initChart, _KupEchart_createChart, _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_fetchcomputedColors, _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_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 extends HTMLElement {
   constructor() {
     super();
@@ -93342,7 +93343,6 @@ const KupEchart = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     _KupEchart_sortedDataset.set(this, null);
     _KupEchart_themeBorder.set(this, null);
     _KupEchart_themeBackground.set(this, null);
-    _KupEchart_computedColors.set(this, null);
     _KupEchart_minColorHeatMap.set(this, null);
     _KupEchart_maxColorHeatMap.set(this, null);
     _KupEchart_themeFont.set(this, null);
@@ -93420,8 +93420,11 @@ const KupEchart = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     __classPrivateFieldGet(this, _KupEchart_kupManager, "f").debug.logLoad(this, true);
   }
   componentWillRender() {
+    __classPrivateFieldSet(this, _KupEchart_themeBackground, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars[KupThemeColorValues.BACKGROUND], "f");
+    __classPrivateFieldSet(this, _KupEchart_themeBorder, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars[KupThemeColorValues.BORDER], "f");
+    __classPrivateFieldSet(this, _KupEchart_themeFont, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars['--kup-font-family'], "f");
+    __classPrivateFieldSet(this, _KupEchart_themeText, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars[KupThemeColorValues.TEXT], "f");
     __classPrivateFieldGet(this, _KupEchart_kupManager, "f").debug.logRender(this, false);
-    __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_fetchcomputedColors).call(this);
   }
   componentDidRender() {
     if (this.data && this.data.columns && this.data.rows) {
@@ -93466,7 +93469,7 @@ const KupEchart = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "resizeCallback": [64],
     "setProps": [64]
   }]);
-_KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _KupEchart_gaussianDatasets = new WeakMap(), _KupEchart_kupManager = new WeakMap(), _KupEchart_mapObj = new WeakMap(), _KupEchart_resizeTimeout = new WeakMap(), _KupEchart_sortedDataset = new WeakMap(), _KupEchart_themeBorder = new WeakMap(), _KupEchart_themeBackground = new WeakMap(), _KupEchart_computedColors = new WeakMap(), _KupEchart_minColorHeatMap = new WeakMap(), _KupEchart_maxColorHeatMap = new WeakMap(), _KupEchart_themeFont = new WeakMap(), _KupEchart_themeText = new WeakMap(), _KupEchart_instances = new WeakSet(), _KupEchart_initChart = function _KupEchart_initChart() {
+_KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _KupEchart_gaussianDatasets = new WeakMap(), _KupEchart_kupManager = new WeakMap(), _KupEchart_mapObj = new WeakMap(), _KupEchart_resizeTimeout = new WeakMap(), _KupEchart_sortedDataset = new WeakMap(), _KupEchart_themeBorder = new WeakMap(), _KupEchart_themeBackground = new WeakMap(), _KupEchart_minColorHeatMap = new WeakMap(), _KupEchart_maxColorHeatMap = new WeakMap(), _KupEchart_themeFont = new WeakMap(), _KupEchart_themeText = new WeakMap(), _KupEchart_instances = new WeakSet(), _KupEchart_initChart = function _KupEchart_initChart() {
   if (__classPrivateFieldGet(this, _KupEchart_chartEl, "f")) {
     dispose(__classPrivateFieldGet(this, _KupEchart_chartContainer, "f"));
   }
@@ -93508,6 +93511,9 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     case KupEchartTypes.PIE:
       options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setPieOptions).call(this);
       break;
+    case KupEchartTypes.FUNNEL:
+      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_funnelChart).call(this);
+      break;
     default:
       options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setOptions).call(this);
       break;
@@ -93538,6 +93544,73 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
       y: Array.isArray(e.data) ? e.data[1] : e.value,
     });
   });
+}, _KupEchart_funnelChart = function _KupEchart_funnelChart() {
+  const x = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createX).call(this);
+  const y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this);
+  const cellsSum = {};
+  const data = [];
+  let highest = 0;
+  for (let key in y) {
+    for (let j = 0; j < y[key].length; j++) {
+      if (cellsSum[x[j]]) {
+        cellsSum[x[j]] += parseFloat(y[key][j]);
+      }
+      else {
+        cellsSum[x[j]] = parseFloat(y[key][j]);
+      }
+    }
+  }
+  for (let key in cellsSum) {
+    const value = cellsSum[key];
+    if (value > highest) {
+      highest = value;
+    }
+  }
+  for (const key in cellsSum) {
+    const value = cellsSum[key];
+    data.push({
+      name: key,
+      value: ((100 * value) / highest).toFixed(2),
+    });
+  }
+  return {
+    color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, Object.keys(cellsSum).length),
+    title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
+    tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item', formatter: (value) => {
+        const name = value.data.name;
+        const percentage = value.data
+          .value;
+        return `${name}: <strong>${cellsSum[name]}</strong> (${__classPrivateFieldGet(this, _KupEchart_kupManager, "f").math.format(percentage)}%)`;
+      } }),
+    legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, cellsSum),
+    series: [
+      {
+        name: __classPrivateFieldGet(this, _KupEchart_kupManager, "f").data.column.find(this.data, {
+          name: this.axis,
+        })[0].title,
+        type: 'funnel',
+        gap: 2,
+        label: {
+          show: true,
+          position: 'right',
+        },
+        labelLine: {
+          lineStyle: {
+            width: 1,
+            type: 'solid',
+          },
+        },
+        itemStyle: {
+          borderColor: __classPrivateFieldGet(this, _KupEchart_themeBackground, "f"),
+          borderWidth: 1,
+        },
+        left: '10%',
+        right: '10%',
+        width: '80%',
+        data,
+      },
+    ],
+  };
 }, _KupEchart_createX = function _KupEchart_createX(dataset = null) {
   const x = [];
   if (!dataset)
@@ -93687,6 +93760,7 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
   }
   return opts;
 }, _KupEchart_setMapOptions = function _KupEchart_setMapOptions(map) {
+  const computedColors = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, 3);
   const mapJson = JSON.parse(map);
   const isoA2 = [];
   const names = [];
@@ -93819,7 +93893,7 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
         roam: true,
         select: {
           itemStyle: {
-            areaColor: __classPrivateFieldGet(this, _KupEchart_computedColors, "f")[0],
+            areaColor: computedColors[0],
           },
           label: {
             color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
@@ -93845,7 +93919,7 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     });
   }
   return {
-    color: __classPrivateFieldGet(this, _KupEchart_computedColors, "f"),
+    color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, Object.keys(y).length),
     legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, y),
     title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
     tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }),
@@ -93996,7 +94070,7 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     yAxisTmp.splice(0, 1);
   }
   return {
-    color: __classPrivateFieldGet(this, _KupEchart_computedColors, "f"),
+    color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, Object.keys(y).length),
     legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, y),
     series: series,
     title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
@@ -94059,7 +94133,7 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     i++;
   }
   return {
-    color: __classPrivateFieldGet(this, _KupEchart_computedColors, "f"),
+    color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, Object.keys(y).length),
     legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, y),
     series: series,
     title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
@@ -94067,17 +94141,12 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     xAxis: Object.assign(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setAxisColors).call(this)), { data: x, type: 'category' }), this.xAxis),
     yAxis: Object.assign(Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setAxisColors).call(this)), { type: 'value' }), this.yAxis),
   };
-}, _KupEchart_fetchcomputedColors = function _KupEchart_fetchcomputedColors() {
+}, _KupEchart_setColors = function _KupEchart_setColors(requiredNumber) {
   let colorArray = this.colors && this.colors.length > 0 ? [...this.colors] : [];
   let key = '--kup-chart-color-';
   for (let index = 1; __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars[key + index]; index++) {
     colorArray.push(__classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars[key + index]);
   }
-  __classPrivateFieldSet(this, _KupEchart_themeBackground, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars[KupThemeColorValues.BACKGROUND], "f");
-  __classPrivateFieldSet(this, _KupEchart_themeBorder, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars[KupThemeColorValues.BORDER], "f");
-  __classPrivateFieldSet(this, _KupEchart_themeFont, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars['--kup-font-family'], "f");
-  __classPrivateFieldSet(this, _KupEchart_themeText, __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.cssVars[KupThemeColorValues.TEXT], "f");
-  __classPrivateFieldSet(this, _KupEchart_computedColors, colorArray, "f");
   if (this.colors && this.colors[0]) {
     __classPrivateFieldSet(this, _KupEchart_maxColorHeatMap, this.colors[0], "f");
   }
@@ -94092,6 +94161,10 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     const colorCheckBright = __classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.colorCheck(colorArray[0]);
     __classPrivateFieldSet(this, _KupEchart_minColorHeatMap, `hsl(${colorCheckBright.hue}, ${colorCheckBright.saturation}, ${(parseFloat(colorCheckBright.lightness) + 30).toString()}%)`, "f");
   }
+  for (let index = colorArray.length; requiredNumber && index < requiredNumber; index++) {
+    colorArray.push(__classPrivateFieldGet(this, _KupEchart_kupManager, "f").theme.randomColor(128));
+  }
+  return colorArray;
 }, _KupEchart_checks = function _KupEchart_checks() {
   const gaussianCount = this.types.filter((type) => type === KupEchartTypes.GAUSSIAN).length;
   const nonGaussianCount = this.types.filter((type) => type === KupEchartTypes.GAUSSIAN).length;
@@ -94176,7 +94249,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["kup-echart", "kup-autocomplete", "kup-badge", "kup-button", "kup-button-list", "kup-card", "kup-chart", "kup-checkbox", "kup-chip", "kup-color-picker", "kup-combobox", "kup-data-table", "kup-date-picker", "kup-dropdown-button", "kup-form", "kup-gauge", "kup-image", "kup-list", "kup-progress-bar", "kup-radio", "kup-rating", "kup-spinner", "kup-switch", "kup-tab-bar", "kup-text-field", "kup-time-picker", "kup-tree"];
+  const components = ["kup-echart", "kup-autocomplete", "kup-badge", "kup-button", "kup-button-list", "kup-card", "kup-chart", "kup-checkbox", "kup-chip", "kup-color-picker", "kup-combobox", "kup-data-table", "kup-date-picker", "kup-dialog", "kup-dropdown-button", "kup-form", "kup-gauge", "kup-image", "kup-list", "kup-progress-bar", "kup-radio", "kup-rating", "kup-spinner", "kup-switch", "kup-tab-bar", "kup-text-field", "kup-time-picker", "kup-tree"];
   components.forEach(tagName => { switch (tagName) {
     case "kup-echart":
       if (!customElements.get(tagName)) {
@@ -94185,60 +94258,65 @@ function defineCustomElement() {
       break;
     case "kup-autocomplete":
       if (!customElements.get(tagName)) {
-        defineCustomElement$q();
+        defineCustomElement$r();
       }
       break;
     case "kup-badge":
       if (!customElements.get(tagName)) {
-        defineCustomElement$p();
+        defineCustomElement$q();
       }
       break;
     case "kup-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$o();
+        defineCustomElement$p();
       }
       break;
     case "kup-button-list":
       if (!customElements.get(tagName)) {
-        defineCustomElement$n();
+        defineCustomElement$o();
       }
       break;
     case "kup-card":
       if (!customElements.get(tagName)) {
-        defineCustomElement$m();
+        defineCustomElement$n();
       }
       break;
     case "kup-chart":
       if (!customElements.get(tagName)) {
-        defineCustomElement$l();
+        defineCustomElement$m();
       }
       break;
     case "kup-checkbox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$k();
+        defineCustomElement$l();
       }
       break;
     case "kup-chip":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$k();
       }
       break;
     case "kup-color-picker":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$j();
       }
       break;
     case "kup-combobox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$i();
       }
       break;
     case "kup-data-table":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$h();
       }
       break;
     case "kup-date-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "kup-dialog":
       if (!customElements.get(tagName)) {
         defineCustomElement$f();
       }

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { k as kupManagerInstance, g as getProps, s as setProps, c as componentWrapperId, R as KupLanguageGeneric, ae as KupPointerEventTypes, d as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, h as defineCustomElement$6, i as defineCustomElement$7, j as defineCustomElement$8, l as defineCustomElement$9, m as defineCustomElement$a, n as defineCustomElement$b, o as defineCustomElement$c, p as defineCustomElement$d, q as defineCustomElement$e, r as defineCustomElement$f, t as defineCustomElement$g, u as defineCustomElement$h, v as defineCustomElement$i, w as defineCustomElement$j, x as defineCustomElement$k, y as defineCustomElement$l, z as defineCustomElement$m, A as defineCustomElement$n, B as defineCustomElement$o, C as defineCustomElement$p, D as defineCustomElement$r, E as defineCustomElement$s, af as FButtonStyling, T as FButton, F as FImage } from './kup-autocomplete2.js';
-import { d as defineCustomElement$q } from './kup-box2.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, c as componentWrapperId, Q as KupLanguageGeneric, U as KupPointerEventTypes, d as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, h as defineCustomElement$6, i as defineCustomElement$7, j as defineCustomElement$8, l as defineCustomElement$9, m as defineCustomElement$a, n as defineCustomElement$b, o as defineCustomElement$c, p as defineCustomElement$d, q as defineCustomElement$e, r as defineCustomElement$f, t as defineCustomElement$g, u as defineCustomElement$h, v as defineCustomElement$i, w as defineCustomElement$j, x as defineCustomElement$k, y as defineCustomElement$l, z as defineCustomElement$m, A as defineCustomElement$n, B as defineCustomElement$o, C as defineCustomElement$p, D as defineCustomElement$q, E as defineCustomElement$s, G as defineCustomElement$t, au as FButtonStyling, ab as FButton, F as FImage } from './kup-autocomplete2.js';
+import { d as defineCustomElement$r } from './kup-box2.js';
 
 /**
  * Props of the kup-family-tree component.
@@ -472,7 +472,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["kup-family-tree", "kup-autocomplete", "kup-badge", "kup-box", "kup-button", "kup-button-list", "kup-card", "kup-chart", "kup-checkbox", "kup-chip", "kup-color-picker", "kup-combobox", "kup-data-table", "kup-date-picker", "kup-dropdown-button", "kup-form", "kup-gauge", "kup-image", "kup-list", "kup-progress-bar", "kup-radio", "kup-rating", "kup-spinner", "kup-switch", "kup-tab-bar", "kup-text-field", "kup-time-picker", "kup-tree"];
+  const components = ["kup-family-tree", "kup-autocomplete", "kup-badge", "kup-box", "kup-button", "kup-button-list", "kup-card", "kup-chart", "kup-checkbox", "kup-chip", "kup-color-picker", "kup-combobox", "kup-data-table", "kup-date-picker", "kup-dialog", "kup-dropdown-button", "kup-form", "kup-gauge", "kup-image", "kup-list", "kup-progress-bar", "kup-radio", "kup-rating", "kup-spinner", "kup-switch", "kup-tab-bar", "kup-text-field", "kup-time-picker", "kup-tree"];
   components.forEach(tagName => { switch (tagName) {
     case "kup-family-tree":
       if (!customElements.get(tagName)) {
@@ -481,65 +481,70 @@ function defineCustomElement$1() {
       break;
     case "kup-autocomplete":
       if (!customElements.get(tagName)) {
-        defineCustomElement$s();
+        defineCustomElement$t();
       }
       break;
     case "kup-badge":
       if (!customElements.get(tagName)) {
-        defineCustomElement$r();
+        defineCustomElement$s();
       }
       break;
     case "kup-box":
       if (!customElements.get(tagName)) {
-        defineCustomElement$q();
+        defineCustomElement$r();
       }
       break;
     case "kup-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$p();
+        defineCustomElement$q();
       }
       break;
     case "kup-button-list":
       if (!customElements.get(tagName)) {
-        defineCustomElement$o();
+        defineCustomElement$p();
       }
       break;
     case "kup-card":
       if (!customElements.get(tagName)) {
-        defineCustomElement$n();
+        defineCustomElement$o();
       }
       break;
     case "kup-chart":
       if (!customElements.get(tagName)) {
-        defineCustomElement$m();
+        defineCustomElement$n();
       }
       break;
     case "kup-checkbox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$l();
+        defineCustomElement$m();
       }
       break;
     case "kup-chip":
       if (!customElements.get(tagName)) {
-        defineCustomElement$k();
+        defineCustomElement$l();
       }
       break;
     case "kup-color-picker":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$k();
       }
       break;
     case "kup-combobox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$j();
       }
       break;
     case "kup-data-table":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$i();
       }
       break;
     case "kup-date-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "kup-dialog":
       if (!customElements.get(tagName)) {
         defineCustomElement$g();
       }

package/dist/components/kup-form.js

@@ -1,4 +1,4 @@
-import { ag as KupForm$1, q as defineCustomElement$1 } from './kup-autocomplete2.js';
+import { av as KupForm$1, q as defineCustomElement$1 } from './kup-autocomplete2.js';
 
 const KupForm = KupForm$1;
 const defineCustomElement = defineCustomElement$1;