@sme.up/ketchup 8.1.0 → 8.2.0

package/dist/collection/assets/echart.js

@@ -5,6 +5,7 @@ const echart4 = document.getElementById('gaussian1chart');
 const echart5 = document.getElementById('gaussian2chart');
 const echart6 = document.getElementById('funnelChart');
 const echart7 = document.getElementById('radarChart');
+const echart8 = document.getElementById('bubbleChart');
 
 const mockData = {
     columns: [
@@ -789,6 +790,181 @@ echart7.data = {
     ],
 };
 
+
+echart8.consistencyCheck = true;
+echart8.types = ['Bubble'];
+echart8.colors =  ['blue'];
+echart8.axis = '';
+echart8.chartTitle = {
+    value: 'Bubble',
+    color: 'red',
+    position: 'top',
+    size: 16,
+};
+echart8.data = {
+    columns: [
+        {
+            name: 'GDP',
+            title: 'Gdp',
+        },
+        {
+            name: 'AGE',
+            title: 'Age',
+        },
+        {
+            name: 'SIZE',
+            title: 'Size',
+        },
+        {
+            name: 'COUNTRY',
+            title: 'Country',
+        },
+        {
+            name: 'YEAR',
+            title: 'Year',
+        }
+    ],
+    rows: [
+        {
+            cells: {
+                COUNTRY: {
+                    value: 'China',
+                },
+                GDP: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '1516',
+                    },
+                    value: '1516',
+                },
+                AGE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '68',
+                    },
+                    value: '68',
+                },
+                SIZE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '1154605773',
+                    },
+                    value: '1154605773',
+                },
+                YEAR: {
+                    value: '1990',
+                },
+            },
+        },
+        {
+            cells: {
+                COUNTRY: {
+                    value: 'China',
+                },
+                GDP: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '13334',
+                    },
+                    value: '13334',
+                },
+                AGE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '76.9',
+                    },
+                    value: '76.9',
+                },
+                SIZE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '1376048943',
+                    },
+                    value: '1376048943',
+                },
+                YEAR: {
+                    value: '2015',
+                },
+            },
+        },
+        {
+            cells: {
+                COUNTRY: {
+                    value: 'United States',
+                },
+                GDP: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '37062',
+                    },
+                    value: '37062',
+                },
+                AGE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '75.4',
+                    },
+                    value: '75.4',
+                },
+                SIZE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '252847810',
+                    },
+                    value: '252847810',
+                },
+                YEAR: {
+                    value: '1990',
+                },
+            },
+        },
+        {
+            cells: {
+                COUNTRY: {
+                    value: 'United States',
+                },
+                GDP: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '53354',
+                    },
+                    value: '53354',
+                },
+                AGE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '79.1',
+                    },
+                    value: '79.1',
+                },
+                SIZE: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '321773631',
+                    },
+                    value: '321773631',
+                },
+                YEAR: {
+                    value: '2015',
+                },
+            },
+        },
+    ]
+
+};
+
 document.addEventListener('kup-echart-click', (e) => {
     console.log(e);
 });

package/dist/collection/collection-manifest.json

@@ -52,7 +52,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "3.3.0",
+    "version": "3.4.0",
     "typescriptVersion": "5.0.4"
   },
   "collections": [],

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

@@ -19,7 +19,6 @@ export var KupBoxProps;
   KupBoxProps["lazyLoadRows"] = "When set to true, extra rows will be automatically loaded once the last row enters the viewport.";
   KupBoxProps["multiSelection"] = "Enable multi selection.";
   KupBoxProps["pageSelected"] = "Current page number.";
-  KupBoxProps["pageSize"] = "Number of boxes per page.";
   KupBoxProps["pagination"] = "Enables pagination.";
   KupBoxProps["rowsPerPage"] = "Number of current rows per page.";
   KupBoxProps["scrollOnHover"] = "Activates the scroll on hover function.";

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

@@ -79,7 +79,6 @@ export class KupBox {
     this.lazyLoadRows = false;
     this.multiSelection = false;
     this.pageSelected = 1;
-    this.pageSize = 10;
     this.pagination = false;
     this.rowsPerPage = undefined;
     this.scrollOnHover = false;
@@ -1068,9 +1067,6 @@ export class KupBox {
     if (this.rowsPerPage) {
       this.currentRowsPerPage = this.rowsPerPage;
     }
-    else if (this.pageSize) {
-      this.currentRowsPerPage = this.pageSize;
-    }
     if (this.data &&
       this.data.rows &&
       this.currentRowsPerPage > this.data.rows.length) {
@@ -1163,7 +1159,7 @@ export class KupBox {
     if (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.pageSize, onPageChange: (e) => this.handlePageChange(e.detail.value), onRowsChange: (e) => this.handleRowsPerPageChange(e.detail.value) }));
+          : this.rowsPerPage, onPageChange: (e) => this.handlePageChange(e.detail.value), onRowsChange: (e) => this.handleRowsPerPageChange(e.detail.value) }));
     }
     let boxContent = null;
     let containerStyle = {};
@@ -1565,27 +1561,6 @@ export class KupBox {
         "reflect": false,
         "defaultValue": "1"
       },
-      "pageSize": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "10"
-            }],
-          "text": "Number of boxes per page"
-        },
-        "attribute": "page-size",
-        "reflect": false,
-        "defaultValue": "10"
-      },
       "pagination": {
         "type": "boolean",
         "mutable": false,
@@ -2097,7 +2072,7 @@ export class KupBox {
   static get elementRef() { return "rootElement"; }
   static get watchers() {
     return [{
-        "propName": "pageSize",
+        "propName": "rowsPerPage",
         "methodName": "rowsPerPageHandler"
       }, {
         "propName": "globalFilterValue",
@@ -2109,7 +2084,7 @@ export class KupBox {
         "propName": "pagination",
         "methodName": "recalculateRows"
       }, {
-        "propName": "pageSize",
+        "propName": "rowsPerPage",
         "methodName": "recalculateRows"
       }, {
         "propName": "currentPage",

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

@@ -44,6 +44,7 @@ export var KupDataTableProps;
   KupDataTableProps["showCustomization"] = "If set to true, displays the button to open the customization panel.";
   KupDataTableProps["selection"] = "Set the type of the rows selection.";
   KupDataTableProps["showDeleteButton"] = "Enables the delete row button.";
+  KupDataTableProps["showHistoryButton"] = "Enables the history datatable button.";
   KupDataTableProps["showFilters"] = "When set to true enables the column filters.";
   KupDataTableProps["showFooter"] = "When set to true shows the footer.";
   KupDataTableProps["showGrid"] = "Can be used to customize the grid view of the table.";

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.enableSortableColumns = false;
     this.enableExtraColumns = true;
+    this.enableSortableColumns = false;
     this.forceOneLine = false;
     this.globalFilter = false;
     this.globalFilterValue = '';

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

@@ -418,6 +418,7 @@ th.obj:hover span:not(.overlay-action) {
 
 .insert-button,
 .delete-button,
+.history-button,
 .save-button {
   padding: 1em 0.5em;
 }

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

@@ -203,6 +203,7 @@ export class KupDataTable {
     this.selection = SelectionMode.SINGLE;
     this.showCustomization = true;
     this.showDeleteButton = false;
+    this.showHistoryButton = false;
     this.showFilters = false;
     this.showFooter = false;
     this.showGrid = ShowGrid.ROW;
@@ -1261,7 +1262,13 @@ export class KupDataTable {
       }, styling: FButtonStyling.OUTLINED, title: "Save", wrapperClass: "save-button" })) : null, this.showDeleteButton &&
       this.selectedRows.length > 0 ? (h(FButton, { icon: "delete", onClick: () => {
         __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_rowsDelete).call(this);
-      }, styling: FButtonStyling.OUTLINED, title: "Delete selected rows", wrapperClass: "delete-button" })) : null), h("div", { class: "droparea", ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_dropareaRef, el, "f")) }, this.showGroups ? __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_columnGroupArea).call(this) : null, this.removableColumns
+      }, styling: FButtonStyling.OUTLINED, title: "Delete selected rows", wrapperClass: "delete-button" })) : null, this.showHistoryButton ? (h(FButton, { icon: "history", onClick: () => {
+        this.kupHistory.emit({
+          comp: this,
+          id: this.rootElement.id,
+          selectedRows: this.selectedRows,
+        });
+      }, styling: FButtonStyling.OUTLINED, title: "History", wrapperClass: "history-button" })) : null), h("div", { class: "droparea", ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_dropareaRef, el, "f")) }, this.showGroups ? __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_columnGroupArea).call(this) : null, this.removableColumns
       ? __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_columnRemoveArea).call(this)
       : null), h("div", { style: elStyle, class: belowClass, ref: (el) => (__classPrivateFieldSet(this, _KupDataTable_tableAreaRef, el, "f")) }, this.showCustomization
       ? [
@@ -2137,6 +2144,24 @@ export class KupDataTable {
         "reflect": false,
         "defaultValue": "false"
       },
+      "showHistoryButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables the history button."
+        },
+        "attribute": "show-history-button",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "showFilters": {
         "type": "boolean",
         "mutable": false,
@@ -2704,6 +2729,26 @@ export class KupDataTable {
             }
           }
         }
+      }, {
+        "method": "kupHistory",
+        "name": "kup-datatable-history",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the history confirm button is pressed."
+        },
+        "complexType": {
+          "original": "KupDatatableHistoryEventPayload",
+          "resolved": "KupDatatableHistoryEventPayload",
+          "references": {
+            "KupDatatableHistoryEventPayload": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            }
+          }
+        }
       }];
   }
   static get methods() {

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

@@ -49,4 +49,5 @@ export var KupEchartTypes;
   KupEchartTypes["SCATTER"] = "Scatter";
   KupEchartTypes["FUNNEL"] = "Funnel";
   KupEchartTypes["RADAR"] = "Radar";
+  KupEchartTypes["BUBBLE"] = "Bubble";
 })(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_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_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';
@@ -652,6 +652,9 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
     case KupEchartTypes.RADAR:
       options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_radarChart).call(this);
       break;
+    case KupEchartTypes.BUBBLE:
+      options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_bubbleChart).call(this);
+      break;
     default:
       options = __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setOptions).call(this);
       break;
@@ -786,6 +789,85 @@ _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);
+  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 
+        if (j === content.length - 1) {
+          year.push(y[content[j]][i]);
+        }
+      }
+      temp.push(arr);
+    }
+  }
+  year = [...new Set(year)];
+  year.forEach((e, i) => {
+    let k = [];
+    temp.forEach(data => {
+      if (data.includes(e))
+        k.push(data);
+    });
+    data.push(k);
+    legend[e] = i;
+  });
+  data.forEach((el, i) => {
+    series.push({
+      name: year[i],
+      data: el,
+      type: 'scatter',
+      symbolSize: function (data) {
+        return Math.sqrt(data[2]) / 5e2;
+      },
+      emphasis: {
+        focus: 'series',
+        label: {
+          show: true,
+          formatter: function (param) {
+            return param.data[3];
+          },
+          position: 'top'
+        }
+      }
+    });
+  });
+  return {
+    title: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setTitle).call(this),
+    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', formatter: (value) => {
+        const name = value.data;
+        const data = content.map((e, i) => {
+          return `<li>  ${e}: ${name[i]} </li>`;
+        });
+        let showContent = '';
+        data.forEach(r => {
+          showContent += r;
+        });
+        return `<ul>${showContent}</ul> `;
+      } }),
+    xAxis: {
+      splitLine: {
+        lineStyle: {
+          type: 'dashed'
+        }
+      }
+    },
+    yAxis: {
+      splitLine: {
+        lineStyle: {
+          type: 'dashed'
+        }
+      },
+      scale: true
+    },
+    color: __classPrivateFieldGet(this, _KupEchart_instances, "m", _KupEchart_setColors).call(this, content.length),
+    series: series
+  };
 }, _KupEchart_createX = function _KupEchart_createX(dataset = null) {
   const x = [];
   if (!dataset)

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

@@ -276,6 +276,22 @@ export class KupForm {
       shape: formField.shape,
     };
     const label = formField.label || column.title;
+    const resetLabel = () => {
+      if (this.kupManager.objects.isButton(cell.obj)) {
+        return;
+      }
+      if (!cell.data) {
+        cell.data = {};
+      }
+      try {
+        delete cell.data.label;
+      }
+      catch (_a) { }
+      try {
+        delete cell.data.data['kup-text-field'].label;
+      }
+      catch (_b) { }
+    };
     resetLabel();
     const labelPlacement = ((_a = section === null || section === void 0 ? void 0 : section.label) === null || _a === void 0 ? void 0 : _a.placement) || this.labelPlacement;
     switch (labelPlacement) {
@@ -326,19 +342,6 @@ export class KupForm {
       };
       return (h("td", { class: `form__label form__label--${alignment}`, style: style }, h("span", null, label)));
     }
-    function resetLabel() {
-      if (!cell.data) {
-        cell.data = {};
-      }
-      try {
-        delete cell.data.label;
-      }
-      catch (_a) { }
-      try {
-        delete cell.data.data['kup-text-field'].label;
-      }
-      catch (_b) { }
-    }
     function setPlaceholderLabel() {
       switch (dom.ketchup.data.cell.getType(cell, cell.shape || column.shape || null)) {
         case FCellTypes.AUTOCOMPLETE:

package/dist/collection/components/kup-planner/kup-planner.css

@@ -389,7 +389,7 @@
 ._RU6Aa ._30j6y {
   font-weight: 700;
   width: 100%;
-  text-align: center;
+  padding-left: 4px;
 }
 
 ._T0HQN {
@@ -447,7 +447,7 @@
 ._yp2DW ._30j6y {
   font-weight: 700;
   width: 100%;
-  text-align: center;
+  padding-left: 4px;
 }
 ._3P0WE {
   display: grid;

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

@@ -217,6 +217,16 @@ export class KupPlanner {
         return phase;
       });
     }
+    this.plannerProps.mainGantt.initialScrollX =
+      __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskInitialScrollX;
+    this.plannerProps.mainGantt.initialScrollY =
+      __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").taskInitialScrollY;
+    if (this.plannerProps.secondaryGantt) {
+      this.plannerProps.secondaryGantt.initialScrollX =
+        __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailInitialScrollX;
+      this.plannerProps.secondaryGantt.initialScrollX =
+        __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").detailInitialScrollY;
+    }
     this.plannerProps = Object.assign({}, this.plannerProps);
   }
   //---- Lifecycle hooks ----
@@ -248,7 +258,7 @@ export class KupPlanner {
     let scrollXTimeout;
     let taskScrollYTimeout;
     let detailScrollYTimeout;
-    const scrollDelay = 1500;
+    const scrollDelay = 500;
     this.plannerProps = {
       mainGantt: {
         title: this.titleMess,
@@ -421,11 +431,8 @@ export class KupPlanner {
     this.persistState();
   }
   handleOnSetViewMode(value) {
-    var _a;
     __classPrivateFieldGet(this, _KupPlanner_storedSettings, "f").viewMode = value;
-    if ((_a = this.plannerProps) === null || _a === void 0 ? void 0 : _a.mainGantt) {
-      this.plannerProps.mainGantt.viewMode = value;
-    }
+    this.plannerProps.viewMode = value;
     this.persistState();
   }
   handleOnScrollX(x) {

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

@@ -230,7 +230,13 @@ function setEditableCell(cellType, classObj, cell, column, props) {
       classObj[FCellClasses.C_RIGHT_ALIGNED] = true;
     case FCellTypes.LINK:
     case FCellTypes.STRING:
-      return (h(FTextField, Object.assign({ inputType: cellType === FCellTypes.NUMBER ? 'number' : null, fullWidth: isFullWidth(props) ? true : false }, cell.data, { icon: cell.icon ? cell.icon : column.icon ? column.icon : null, value: cellType === FCellTypes.NUMBER
+      return (h(FTextField, Object.assign({ inputType: cellType === FCellTypes.NUMBER ? 'number' : null, fullWidth: isFullWidth(props) ? true : false }, cell.data, { icon: cell.data && cell.data.icon
+          ? cell.data.icon
+          : cell.icon
+            ? cell.icon
+            : column.icon
+              ? column.icon
+              : null, value: cellType === FCellTypes.NUMBER
           ? dom.ketchup.math
             .numberifySafe(cell.value)
             .toString()