@sme.up/ketchup 8.2.1 → 8.3.0

package/dist/collection/assets/echart.js

@@ -7,6 +7,10 @@ const echart6 = document.getElementById('funnelChart');
 const echart7 = document.getElementById('radarChart');
 const echart8 = document.getElementById('bubbleChart');
 const echart9 = document.getElementById('sankeyChart');
+const echart10 = document.getElementById('candleStickChart');
+const echart11 = document.getElementById('calendarChart');
+
+
 
 const mockData = {
     columns: [
@@ -1107,6 +1111,250 @@ echart9.data = {
     ],
 };
 
+echart10.consistencyCheck = true;
+echart10.types = ['Candle'];
+echart10.colors =  ['blue'];
+echart10.axis = '';
+echart10.chartTitle = {
+    value: 'Candle',
+    color: 'red',
+    position: 'top',
+    size: 16,
+};
+echart10.data = { // actual dataset
+    columns: [
+        {
+            name: 'DATE',
+            obj: {
+                t: 'D8',
+                p: '*YYMD',
+                k: '',
+            },
+            title: 'Date',
+        },
+        {
+            name: 'LOW',
+            obj: {
+                t: 'NR',
+                p: '',
+                k: '',
+            },
+            title: 'Low',
+        },
+        {
+            name: 'HIGH',
+            obj: {
+                t: 'NR',
+                p: '',
+                k: '',
+            },
+            title: 'High',
+        },
+        {
+            name: 'OPEN',
+            obj: {
+                t: 'NR',
+                p: '',
+                k: '',
+            },
+            title: 'Open',
+        },
+        {
+            name: 'CLOSE',
+            obj: {
+                t: 'NR',
+                p: '',
+                k: '',
+            },
+            title: 'Close',
+        },
+    ],
+    rows: [
+        {
+            cells: {
+                DATE: {
+                    obj: {
+                        t: 'D8',
+                        p: '*YYMD',
+                        k: '20171024',
+                    },
+                    value: '2017-10-24',
+                },
+                HIGH: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '38',
+                    },
+                    value: '38',
+                },
+                LOW: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '10',
+                    },
+                    value: '10',
+                },
+                OPEN: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '34',
+                    },
+                    value: '34',
+                },
+                CLOSE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '20',
+                    },
+                    value: '20',
+                },
+            },
+        },{
+            cells: {
+                DATE: {
+                    obj: {
+                        t: 'D8',
+                        p: '*YYMD',
+                        k: '20171025',
+                    },
+                    value: '2017-10-25',
+                },
+                HIGH: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '50',
+                    },
+                    value: '50',
+                },
+                LOW: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '30',
+                    },
+                    value: '30',
+                },
+                OPEN: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '35',
+                    },
+                    value: '35',
+                },
+                CLOSE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '40',
+                    },
+                    value: '40',
+                },
+            },
+        },
+    ]
+}
+
+echart11.consistencyCheck = true;
+echart11.types = ['Calendar'];
+echart11.colors =  ['blue'];
+echart11.axis = '';
+echart11.chartTitle = {
+    value: 'Calendar',
+    color: 'red',
+    position: 'top',
+    size: 16,
+};
+echart11.data = { // actual dataset
+    columns: [
+        {
+            name: 'DATE',
+            obj: {
+                t: 'D8',
+                p: '*YYMD',
+                k: '',
+            },
+            title: 'Date',
+        },
+        {
+            name: 'VALUE',
+            obj: {
+                t: 'NR',
+                p: '',
+                k: '',
+            },
+            title: 'Value',
+        },
+    ],
+    rows: [
+        {
+            cells: {
+                DATE: {
+                    obj: {
+                        t: 'D8',
+                        p: '*YYMD',
+                        k: '20230401',
+                    },
+                    value: '2023-04-01',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '50',
+                    },
+                    value: '50',
+                },
+            },
+        },
+        {
+            cells: {
+                DATE: {
+                    obj: {
+                        t: 'D8',
+                        p: '*YYMD',
+                        k: '20230415',
+                    },
+                    value: '2023-04-15',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '25',
+                    },
+                    value: '25',
+                },
+            },
+        },
+        {
+            cells: {
+                DATE: {
+                    obj: {
+                        t: 'D8',
+                        p: '*YYMD',
+                        k: '20230430',
+                    },
+                    value: '2023-04-30',
+                },
+                VALUE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '100',
+                    },
+                    value: '100',
+                },
+            },
+        },
+    ],
+}
+
 document.addEventListener('kup-echart-click', (e) => {
     console.log(e);
 });

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

@@ -1156,7 +1156,7 @@ export class KupBox {
         } })));
     }
     let paginator = null;
-    if (this.pagination) {
+    if (!this.lazyLoadRows && this.pagination) {
       paginator = (h(FPaginator, { id: top ? 'top-paginator' : 'bottom-paginator', currentPage: this.currentPage, max: this.filteredRows.length, mode: FPaginatorMode.SIMPLE, perPage: this.currentRowsPerPage
           ? this.currentRowsPerPage
           : this.rowsPerPage, onPageChange: (e) => this.handlePageChange(e.detail.value), onRowsChange: (e) => this.handleRowsPerPageChange(e.detail.value) }));

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

@@ -1237,6 +1237,8 @@ export class KupDataTable {
           for (let index = 0; index < this.data.columns.length; index++) {
             const column = this.data.columns[index];
             cells[column.name] = {
+              data: column.cellData,
+              slotData: column.cellSlotData,
               isEditable: column.isKey ||
                 column.isEditable,
               obj: Object.assign({}, column.obj),

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

@@ -51,4 +51,6 @@ export var KupEchartTypes;
   KupEchartTypes["RADAR"] = "Radar";
   KupEchartTypes["BUBBLE"] = "Bubble";
   KupEchartTypes["SANKEY"] = "Sankey";
+  KupEchartTypes["CANDLE"] = "Candle";
+  KupEchartTypes["CALENDAR"] = "Calendar";
 })(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_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;
+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_candleChart, _KupEchart_calendarChart, _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';
@@ -658,6 +658,13 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     case KupEchartTypes.SANKEY:
       options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_sankeyChart).call(this);
       break;
+    case KupEchartTypes.CANDLE:
+      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_candleChart).call(this);
+      break;
+    case KupEchartTypes.CALENDAR:
+      console.log('virtual 0');
+      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_calendarChart).call(this);
+      break;
     default:
       options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setOptions).call(this);
       break;
@@ -907,6 +914,123 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
       left: '10%',
     },
   };
+}, _KupEchart_candleChart = function _KupEchart_candleChart() {
+  const y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this), answer = [], itemStyle = {
+    color: 'red',
+    borderColor: 'red',
+    color0: 'green',
+    borderColor0: 'green',
+  };
+  let caseInsensitiveObj = new Proxy(y, {
+    get: function (target, prop) {
+      // Convert the property name to lowercase
+      const lowercaseProp = prop.toLowerCase();
+      // Search for the property case-insensitively
+      for (let key in target) {
+        if (key.toLowerCase() === lowercaseProp) {
+          return target[key];
+        }
+      }
+      // Property not found, return undefined
+      return undefined;
+    },
+  });
+  const date = caseInsensitiveObj['date'];
+  for (let i = 0; i < caseInsensitiveObj['Open'].length; i++) {
+    answer.push([
+      parseInt(caseInsensitiveObj['close'][i]),
+      parseInt(caseInsensitiveObj['Open'][i]),
+      parseInt(caseInsensitiveObj['Low'][i]),
+      parseInt(caseInsensitiveObj['High'][i]),
+    ]);
+  }
+  let legend = {};
+  date.forEach((e, i) => {
+    legend[e] = i;
+  });
+  return {
+    legend: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setLegend).call(this, legend),
+    tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item' }),
+    title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
+    xAxis: {
+      data: date,
+    },
+    yAxis: {},
+    series: [
+      {
+        type: 'candlestick',
+        data: answer,
+        itemStyle: itemStyle,
+      },
+    ],
+  };
+}, _KupEchart_calendarChart = function _KupEchart_calendarChart() {
+  const y = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_createY).call(this);
+  let caseInsensitiveObj = new Proxy(y, {
+    get: function (target, prop) {
+      // Convert the property name to lowercase
+      const lowercaseProp = prop.toLowerCase();
+      // Search for the property case-insensitively
+      for (let key in target) {
+        if (key.toLowerCase() === lowercaseProp) {
+          return target[key];
+        }
+      }
+      // Property not found, return undefined
+      return undefined;
+    },
+  });
+  const date = caseInsensitiveObj['Date'], answer = [], keys = Object.keys(y), year = new Date(date[0]).getFullYear(), arrayLength = date.length;
+  date.forEach((element, i) => {
+    answer.push([element, caseInsensitiveObj['Value'][i]]);
+  });
+  return {
+    tooltip: Object.assign(Object.assign({}, __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTooltip).call(this)), { trigger: 'item', formatter: (value) => {
+        const name = value.data;
+        console.log('data', name);
+        const data = keys.map((e, i) => {
+          return `<li>  ${e}: ${name[i]} </li>`;
+        });
+        let showContent = '';
+        data.forEach((r) => {
+          showContent += r;
+        });
+        return `<ul>${showContent}</ul> `;
+      } }),
+    gradientColor: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, arrayLength),
+    title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
+    visualMap: {
+      show: false,
+      min: 0,
+      max: 10000,
+    },
+    calendar: {
+      range: year,
+      itemStyle: {
+        color: __classPrivateFieldGet(this, _KupEchart_themeBackground, "f"),
+      },
+      dayLabel: {
+        color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
+      },
+      yearLabel: {
+        color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
+      },
+      monthLabel: {
+        color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: __classPrivateFieldGet(this, _KupEchart_themeText, "f"),
+        },
+      },
+    },
+    series: {
+      type: 'heatmap',
+      coordinateSystem: 'calendar',
+      data: answer,
+    },
+  };
 }, _KupEchart_createX = function _KupEchart_createX(dataset = null) {
   const x = [];
   if (!dataset)

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

@@ -14,6 +14,7 @@ export var KupTextFieldProps;
   KupTextFieldProps["helper"] = "When set, its content will be shown as a help text below the field.";
   KupTextFieldProps["helperEnabled"] = "When true, the helper will be displayed.";
   KupTextFieldProps["helperWhenFocused"] = "When set, the helper will be shown only when the field is focused.";
+  KupTextFieldProps["hiddenCounter"] = "Hides the character counter.";
   KupTextFieldProps["icon"] = "When set, the text-field will show this icon.";
   KupTextFieldProps["initialValue"] = "Sets the initial value of the component";
   KupTextFieldProps["inputMode"] = "The HTML inputmode of the input element. It has no effect on text areas.";

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

@@ -32,6 +32,7 @@ export class KupTextField {
     this.helper = null;
     this.helperEnabled = true;
     this.helperWhenFocused = false;
+    this.hiddenCounter = false;
     this.icon = null;
     this.initialValue = '';
     this.inputMode = null;
@@ -222,6 +223,7 @@ export class KupTextField {
       helper: this.helper,
       helperEnabled: this.helperEnabled,
       helperWhenFocused: this.helperWhenFocused,
+      hiddenCounter: this.hiddenCounter,
       icon: this.icon,
       info: this.rootElement.classList.contains('kup-info')
         ? true
@@ -497,6 +499,27 @@ export class KupTextField {
         "reflect": false,
         "defaultValue": "false"
       },
+      "hiddenCounter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Hides the character counter."
+        },
+        "attribute": "hidden-counter",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "icon": {
         "type": "string",
         "mutable": false,

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

@@ -236,7 +236,7 @@ function setEditableCell(cellType, classObj, cell, column, props) {
             ? cell.icon
             : column.icon
               ? column.icon
-              : null, value: cellType === FCellTypes.NUMBER
+              : null, value: cellType === FCellTypes.NUMBER && cell.value
           ? dom.ketchup.math
             .numberifySafe(cell.value)
             .toString()
@@ -331,6 +331,8 @@ function setKupCell(cellType, classObj, subcomponentProps, cell, row, column, pr
         classObj[FCellClasses.C_CENTERED] = true;
       }
       return (h("kup-chart", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
+    case FCellTypes.MULTI_AUTOCOMPLETE:
+    case FCellTypes.MULTI_COMBOBOX:
     case FCellTypes.CHIP:
       return h(FChip, Object.assign({}, subcomponentProps));
     case FCellTypes.COLOR_PICKER:

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

@@ -130,10 +130,14 @@ function setHelper(props) {
         'mdc-text-field-helper-text': true,
         'mdc-text-field-helper-text--persistent': !props.helperWhenFocused,
       };
-      return (h("div", { class: "mdc-text-field-helper-line" }, h("div", { class: classObj }, props.helper), props.maxLength && !props.textArea ? (h("div", { class: "mdc-text-field-character-counter" }, "'0 / ' + ", props.maxLength.toString())) : undefined));
+      return (h("div", { class: "mdc-text-field-helper-line" }, h("div", { class: classObj }, props.helper), props.hiddenCounter !== true &&
+        props.maxLength &&
+        !props.textArea ? (h("div", { class: "mdc-text-field-character-counter" }, "'0 / ' + ", props.maxLength.toString())) : undefined));
     }
     else {
-      if (props.maxLength && !props.textArea) {
+      if (props.hiddenCounter !== true &&
+        props.maxLength &&
+        !props.textArea) {
         return (h("div", { class: "mdc-text-field-helper-line" }, h("div", { class: "mdc-text-field-character-counter" }, "'0 / ' + ", props.maxLength)));
       }
     }

package/dist/components/kup-autocomplete2.js

@@ -19906,12 +19906,16 @@ function setHelper(props) {
       };
       return (h("div", { class: "mdc-text-field-helper-line" },
         h("div", { class: classObj }, props.helper),
-        props.maxLength && !props.textArea ? (h("div", { class: "mdc-text-field-character-counter" },
+        props.hiddenCounter !== true &&
+          props.maxLength &&
+          !props.textArea ? (h("div", { class: "mdc-text-field-character-counter" },
           "'0 / ' + ",
           props.maxLength.toString())) : undefined));
     }
     else {
-      if (props.maxLength && !props.textArea) {
+      if (props.hiddenCounter !== true &&
+        props.maxLength &&
+        !props.textArea) {
         return (h("div", { class: "mdc-text-field-helper-line" },
           h("div", { class: "mdc-text-field-character-counter" },
             "'0 / ' + ",
@@ -23233,7 +23237,7 @@ function setEditableCell(cellType, classObj, cell, column, props) {
             ? cell.icon
             : column.icon
               ? column.icon
-              : null, value: cellType === FCellTypes.NUMBER
+              : null, value: cellType === FCellTypes.NUMBER && cell.value
           ? dom$e.ketchup.math
             .numberifySafe(cell.value)
             .toString()
@@ -23329,6 +23333,8 @@ function setKupCell(cellType, classObj, subcomponentProps, cell, row, column, pr
         classObj[FCellClasses.C_CENTERED] = true;
       }
       return (h("kup-chart", Object.assign({ key: column.name + props.row.id }, subcomponentProps)));
+    case FCellTypes.MULTI_AUTOCOMPLETE:
+    case FCellTypes.MULTI_COMBOBOX:
     case FCellTypes.CHIP:
       return h(FChip, Object.assign({}, subcomponentProps));
     case FCellTypes.COLOR_PICKER:
@@ -31103,6 +31109,7 @@ var KupTextFieldProps;
   KupTextFieldProps["helper"] = "When set, its content will be shown as a help text below the field.";
   KupTextFieldProps["helperEnabled"] = "When true, the helper will be displayed.";
   KupTextFieldProps["helperWhenFocused"] = "When set, the helper will be shown only when the field is focused.";
+  KupTextFieldProps["hiddenCounter"] = "Hides the character counter.";
   KupTextFieldProps["icon"] = "When set, the text-field will show this icon.";
   KupTextFieldProps["initialValue"] = "Sets the initial value of the component";
   KupTextFieldProps["inputMode"] = "The HTML inputmode of the input element. It has no effect on text areas.";
@@ -33432,6 +33439,7 @@ const KupTextField = /*@__PURE__*/ proxyCustomElement(class KupTextField extends
     this.helper = null;
     this.helperEnabled = true;
     this.helperWhenFocused = false;
+    this.hiddenCounter = false;
     this.icon = null;
     this.initialValue = '';
     this.inputMode = null;
@@ -33615,6 +33623,7 @@ const KupTextField = /*@__PURE__*/ proxyCustomElement(class KupTextField extends
       helper: this.helper,
       helperEnabled: this.helperEnabled,
       helperWhenFocused: this.helperWhenFocused,
+      hiddenCounter: this.hiddenCounter,
       icon: this.icon,
       info: this.rootElement.classList.contains('kup-info')
         ? true
@@ -33676,6 +33685,7 @@ const KupTextField = /*@__PURE__*/ proxyCustomElement(class KupTextField extends
     "helper": [1],
     "helperEnabled": [4, "helper-enabled"],
     "helperWhenFocused": [4, "helper-when-focused"],
+    "hiddenCounter": [4, "hidden-counter"],
     "icon": [1],
     "initialValue": [1, "initial-value"],
     "inputMode": [1, "input-mode"],
@@ -40134,6 +40144,8 @@ const KupDataTable = /*@__PURE__*/ proxyCustomElement(class KupDataTable extends
           for (let index = 0; index < this.data.columns.length; index++) {
             const column = this.data.columns[index];
             cells[column.name] = {
+              data: column.cellData,
+              slotData: column.cellSlotData,
               isEditable: column.isKey ||
                 column.isEditable,
               obj: Object.assign({}, column.obj),

package/dist/components/kup-box2.js

@@ -1200,7 +1200,7 @@ const KupBox = /*@__PURE__*/ proxyCustomElement(class KupBox extends HTMLElement
         } })));
     }
     let paginator = null;
-    if (this.pagination) {
+    if (!this.lazyLoadRows && this.pagination) {
       paginator = (h(FPaginator, { id: top ? 'top-paginator' : 'bottom-paginator', currentPage: this.currentPage, max: this.filteredRows.length, mode: FPaginatorMode.SIMPLE, perPage: this.currentRowsPerPage
           ? this.currentRowsPerPage
           : this.rowsPerPage, onPageChange: (e) => this.handlePageChange(e.detail.value), onRowsChange: (e) => this.handleRowsPerPageChange(e.detail.value) }));