@sme.up/ketchup 6.9.0-SNAPSHOT → 7.1.0

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

@@ -77,22 +77,23 @@ export function create3(component) {
  * @returns {VNode} 4th box layout virtual node.
  */
 export function create4(component) {
+  var _a;
   const cells = component.data.cell;
   const columns = component.data.columns;
   let image = null;
   let value = null;
   for (let index = 0; index < cells.length; index++) {
     const cell = cells[index];
-    if ((!image &&
-      (dom.ketchup.objects.isImage(cell.obj) ||
-        dom.ketchup.objects.isIcon(cell.obj))) ||
-      cell.shape === FCellShapes.IMAGE) {
+    const isImage = dom.ketchup.objects.isImage(cell.obj) ||
+      dom.ketchup.objects.isIcon(cell.obj) ||
+      ((_a = cell.shape) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === FCellShapes.IMAGE;
+    if (!image && isImage) {
       image = index;
       if (!cell.data) {
         cell.data = { resource: cell.value };
       }
     }
-    if (!value && !dom.ketchup.objects.isImage(cell.obj)) {
+    if (!value && !isImage) {
       value = index;
     }
   }
@@ -116,3 +117,111 @@ export function create4(component) {
   };
   return (h("div", { class: `box-layout-${component.layoutNumber}` }, h("div", { class: "container" }, h("div", { class: "image" }, h(FCell, Object.assign({}, imageProps))), h("div", { class: "value" }, h(FCell, Object.assign({}, valueProps))))));
 }
+/**
+ * 5th box card layout, image on the left and rows of text.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 5th box layout virtual node.
+ */
+export function create5(component) {
+  var _a;
+  const cells = component.data.cell;
+  const columns = component.data.columns;
+  const rows = [];
+  let imageProps = null;
+  for (let index = 0; index < cells.length; index++) {
+    const cell = cells[index];
+    const column = component.data.columns[index];
+    const isImage = dom.ketchup.objects.isImage(cell.obj) ||
+      dom.ketchup.objects.isIcon(cell.obj) ||
+      ((_a = cell.shape) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === FCellShapes.IMAGE;
+    if (!imageProps && isImage) {
+      imageProps = {
+        cell: cells[index],
+        column: columns[index],
+        component: component,
+        density: FCellPadding.NONE,
+        renderKup: true,
+        row: { cells: { [columns[index].name]: cells[index] } },
+        wrapperClass: 'c-centered',
+      };
+      if (!cell.data) {
+        cell.data = { resource: cell.value };
+      }
+    }
+    else {
+      const props = {
+        cell: cell,
+        column: column,
+        component: component,
+        density: FCellPadding.NONE,
+        renderKup: true,
+        row: { cells: { [column.name]: cell } },
+      };
+      rows.push(h("tr", null, h("td", { class: "label" }, column.title), h("td", { class: `value` }, h(FCell, Object.assign({}, props)))));
+    }
+  }
+  return (h("div", { class: `box-layout-${component.layoutNumber}` }, h("div", { class: "container" }, imageProps ? (h("div", { class: "image" }, h(FCell, Object.assign({}, imageProps)))) : null, h("div", { class: "table" }, h("table", null, rows)))));
+}
+/**
+ * 6th box card layout, image on the left and vertical list of text.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 6th box layout virtual node.
+ */
+export function create6(component) {
+  var _a;
+  const cells = component.data.cell;
+  const columns = component.data.columns;
+  const rows = [];
+  let image = null;
+  for (let index = 0; index < cells.length; index++) {
+    const cell = cells[index];
+    const column = component.data.columns[index];
+    const isImage = dom.ketchup.objects.isImage(cell.obj) ||
+      dom.ketchup.objects.isIcon(cell.obj) ||
+      ((_a = cell.shape) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === FCellShapes.IMAGE;
+    if (!image && isImage) {
+      image = index;
+      if (!cell.data) {
+        cell.data = { resource: cell.value };
+      }
+    }
+    else {
+      const props = {
+        cell: cell,
+        column: column,
+        component: component,
+        density: FCellPadding.NONE,
+        renderKup: true,
+        row: { cells: { [column.name]: cell } },
+      };
+      rows.push(h("tr", null, h("td", { class: "label" }, column.title)));
+      rows.push(h("tr", null, h("td", { class: `value` }, h(FCell, Object.assign({}, props)))));
+    }
+  }
+  const imageProps = {
+    cell: cells[image],
+    column: columns[image],
+    component: component,
+    density: FCellPadding.NONE,
+    renderKup: true,
+    row: { cells: { [columns[image].name]: cells[image] } },
+    wrapperClass: 'c-centered',
+  };
+  return (h("div", { class: `box-layout-${component.layoutNumber}` }, h("div", { class: "container" }, h("div", { class: "image" }, h(FCell, Object.assign({}, imageProps))), h("div", { class: "table" }, h("table", null, rows)))));
+}
+/**
+ * 7th box card layout, image above and rows of text.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 7th box layout virtual node.
+ */
+export function create7(component) {
+  return create5(component);
+}
+/**
+ * 8th box card layout, image above and vertical list of text.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 8th box layout virtual node.
+ */
+export function create8(component) {
+  return create6(component);
+}

package/dist/collection/components/kup-card/built-in/kup-card-calendar.js

@@ -15,10 +15,12 @@ export function prepareCalendar(component) {
       el.kupData = {};
       const obj = opts.initialValue;
       if (opts.initialValue) {
-        if (obj && obj.k)
+        if (obj && obj.k) {
           setValue(component, new Date(obj.k));
-        else
+        }
+        else {
           setValue(component, new Date(opts.initialValue));
+        }
       }
       if (opts.firstDayIndex)
         el.kupData.firstDayIndex = opts.firstDayIndex;
@@ -73,6 +75,9 @@ export function prepareCalendar(component) {
   return (h("div", { id: component.rootElement.id + '_calendar' }, h("div", { class: "section-1" }, h("div", { class: "sub-1 nav" }, prevButtonComp, h(FButton, Object.assign({}, changeViewButtonProp)), nextButtonComp)), h("div", { class: "section-2" }, createCalendar(component))));
 }
 function setValue(component, value) {
+  if (!!(value instanceof Date)) {
+    value = new Date();
+  }
   const el = component.rootElement;
   el.kupData.value = value;
   el.kupData.day = el.kupData.value.getDate();

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

@@ -14,8 +14,8 @@
   width: 50%;
 }
 .box-layout-1 .value {
-  padding: 0.5em;
   font-weight: bold;
+  padding: 0.5em;
 }
 
 .box-layout-2 {
@@ -54,6 +54,14 @@
 .box-layout-3 .flex-container {
   align-items: center;
   display: flex;
+  justify-content: center;
+  width: 100%;
+}
+.box-layout-3 .flex-container:first-child {
+  justify-content: flex-start;
+}
+.box-layout-3 .flex-container:last-child {
+  justify-content: flex-end;
 }
 .box-layout-3 .label {
   overflow: hidden;
@@ -88,14 +96,175 @@
   width: 64px;
 }
 .box-layout-4 .value {
-  padding: 0.5em;
   font-weight: bold;
+  padding-top: 0.5em;
 }
 .box-layout-4 .f-cell.c-centered .f-cell__content img,
 .box-layout-4 .f-cell.c-centered .f-cell__content .f-image {
   margin: 0;
 }
 
+.box-layout-5 {
+  background-color: var(--kup-background-color);
+  color: var(--kup-text-color);
+  display: flex;
+  font-size: var(--kup-font-size);
+  height: 100%;
+  padding: 1em 0.5em;
+}
+.box-layout-5 .container {
+  display: flex;
+  height: 100%;
+  margin: auto;
+  width: 100%;
+}
+.box-layout-5 .image {
+  display: flex;
+  height: 100%;
+  margin: auto;
+  width: 50%;
+}
+.box-layout-5 .label,
+.box-layout-5 .value {
+  padding: 0.5em;
+}
+.box-layout-5 .label {
+  overflow: hidden;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.box-layout-5 .value {
+  font-weight: bold;
+}
+.box-layout-5 .table {
+  box-sizing: border-box;
+  padding: 1.25em;
+}
+.box-layout-5 .table,
+.box-layout-5 table {
+  width: 100%;
+}
+
+.box-layout-6 {
+  background-color: var(--kup-background-color);
+  color: var(--kup-text-color);
+  display: flex;
+  font-size: var(--kup-font-size);
+  height: 100%;
+  padding: 1em 0.5em;
+}
+.box-layout-6 .container {
+  display: flex;
+  height: 100%;
+  margin: auto;
+  width: 100%;
+}
+.box-layout-6 .image {
+  display: flex;
+  height: 100%;
+  margin: auto;
+  width: 50%;
+}
+.box-layout-6 .label {
+  padding-bottom: 0.25em;
+}
+.box-layout-6 .value {
+  font-weight: bold;
+  padding-bottom: 1.25em;
+}
+.box-layout-6 tr:last-child .value {
+  padding-bottom: 0;
+}
+.box-layout-6 .table {
+  box-sizing: border-box;
+  display: flex;
+  height: max-content;
+  margin: auto;
+  padding: 1.25em;
+}
+.box-layout-6 .table,
+.box-layout-6 table {
+  width: 100%;
+}
+
+.box-layout-7 {
+  background-color: var(--kup-background-color);
+  color: var(--kup-text-color);
+  display: flex;
+  font-size: var(--kup-font-size);
+  height: 100%;
+  padding: 1em 0.5em;
+}
+.box-layout-7 .container {
+  height: 100%;
+  margin: auto;
+  width: 100%;
+}
+.box-layout-7 .image {
+  width: 100%;
+}
+.box-layout-7 .label,
+.box-layout-7 .value {
+  padding: 0.25em;
+}
+.box-layout-7 .label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.box-layout-7 .value {
+  font-weight: bold;
+}
+.box-layout-7 .table {
+  box-sizing: border-box;
+  padding: 1.25em;
+  padding-bottom: 0;
+}
+.box-layout-7 .table,
+.box-layout-7 table {
+  width: 100%;
+}
+
+.box-layout-8 {
+  background-color: var(--kup-background-color);
+  color: var(--kup-text-color);
+  display: flex;
+  font-size: var(--kup-font-size);
+  height: 100%;
+  padding: 1em 0.5em;
+}
+.box-layout-8 .container {
+  height: 100%;
+  margin: auto;
+  width: 100%;
+}
+.box-layout-8 .image {
+  width: 100%;
+}
+.box-layout-8 .label {
+  overflow: hidden;
+  padding-bottom: 0.25em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.box-layout-8 .value {
+  font-weight: bold;
+  padding-bottom: 1.25em;
+}
+.box-layout-8 tr:last-child .value {
+  padding-bottom: 0;
+}
+.box-layout-8 .table {
+  box-sizing: border-box;
+  padding: 1.25em;
+  padding-bottom: 0;
+}
+.box-layout-8 .table,
+.box-layout-8 table {
+  width: 100%;
+}
+
 .built-in-layout-1 {
   background-color: var(--kup-background-color);
   border-radius: 4px;
@@ -2738,23 +2907,4 @@
 }
 .card-view.visible {
   display: block;
-}
-
-.dialog-layout-7 {
-  background-color: var(--kup-background-color);
-  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  max-height: 95vh;
-  max-width: 95vw;
-  width: 100%;
-}
-.dialog-layout-7 .section-1 {
-  max-height: 40vh;
-  overflow: auto;
-}
-.dialog-layout-7 .section-2 {
-  display: flex;
-  justify-content: center;
 }

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

@@ -42,6 +42,7 @@ export var KupDataTableProps;
   KupDataTableProps["rowsPerPage"] = "Sets the number of rows per page to display.";
   KupDataTableProps["scrollOnHover"] = "Activates the scroll on hover function.";
   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["showFilters"] = "When set to true enables the column filters.";
   KupDataTableProps["showFooter"] = "When set to true shows the footer.";

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

@@ -768,15 +768,17 @@ function cloneRow(row) {
   if (row == null) {
     return null;
   }
-  let cloned = {
-    id: row.id,
-    cells: Object.assign({}, row.cells),
-    actions: row.actions ? [...row.actions] : null,
-    group: cloneRowGroup(row.group),
-    readOnly: row.readOnly,
-    cssClass: row.cssClass,
-  };
-  return cloned;
+  else {
+    return {
+      id: row.id,
+      cells: Object.assign({}, row.cells),
+      actions: row.actions ? [...row.actions] : null,
+      group: cloneRowGroup(row.group),
+      clonedFrom: row,
+      readOnly: row.readOnly,
+      cssClass: row.cssClass,
+    };
+  }
 }
 function cloneRows(rows) {
   if (rows == null) {

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

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

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

@@ -480,7 +480,11 @@ export class KupDataTable {
     for (let index = 0; index < currentRows.length; index++) {
       const row = currentRows[index];
       if (ids.includes(row.id)) {
-        deletedRows.push(row);
+        const r = row.clonedFrom ? row.clonedFrom : row;
+        deletedRows.push(r);
+        if (this.selectedRows.includes(row)) {
+          this.selectedRows.splice(this.selectedRows.indexOf(row), 1);
+        }
       }
       else {
         newRows.push(row);
@@ -569,7 +573,16 @@ export class KupDataTable {
    * This method will get the selected rows of the component.
    */
   async getSelectedRows() {
-    return this.selectedRows;
+    const selRows = [];
+    this.selectedRows.forEach((row) => {
+      if (row.clonedFrom) {
+        selRows.push(row.clonedFrom);
+      }
+      else {
+        selRows.push(row);
+      }
+    });
+    return selRows;
   }
   /**
    * Hides the given column.
@@ -647,7 +660,7 @@ export class KupDataTable {
    */
   async refresh(recalcRows) {
     if (recalcRows) {
-      this.recalculateRowsAndUndoSelections();
+      __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_initRows).call(this);
     }
     forceUpdate(this);
   }
@@ -766,12 +779,15 @@ export class KupDataTable {
     //this.identifyAndInitRows();
     identify(this.getRows());
     this.expandGroupsHandler();
-    if (document.querySelectorAll('.header')[0]) {
-      __classPrivateFieldSet(this, _KupDataTable_navBarHeight, document.querySelectorAll('.header')[0].clientHeight, "f");
+    if (document.querySelector('.header')) {
+      __classPrivateFieldSet(this, _KupDataTable_navBarHeight, document.querySelector('.header').clientHeight, "f");
     }
     else {
       __classPrivateFieldSet(this, _KupDataTable_navBarHeight, 0, "f");
     }
+    if (document.querySelector('.topbar')) {
+      __classPrivateFieldSet(this, _KupDataTable_navBarHeight, __classPrivateFieldGet(this, _KupDataTable_navBarHeight, "f") + document.querySelector('.topbar').clientHeight, "f");
+    }
     __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_setObserver).call(this);
     //this.recalculateRows();
     // Detects is the browser is Safari. If needed, this function can be moved into an external file and then imported into components
@@ -1189,7 +1205,24 @@ export class KupDataTable {
     if (this.tableHeight !== undefined || this.tableWidth !== undefined) {
       belowClass += ' custom-size';
     }
-    const compCreated = (h(Host, null, h("style", null, __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h("div", { class: "above-wrapper" }, this.globalFilter ? (h("div", { id: "global-filter" }, h(FTextField, { fullWidth: true, icon: KupThemeIconValues.SEARCH, label: __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), value: this.globalFilterValue, onInput: (event) => {
+    const autoselectOnAction = (e) => {
+      if (e && e.detail && e.detail.row) {
+        const row = e.detail.row;
+        if (!this.selectedRows.includes(row)) {
+          if (this.selection === SelectionMode.MULTIPLE_CHECKBOX ||
+            this.selection === SelectionMode.MULTIPLE) {
+            this.selectedRows.push(row);
+          }
+          else {
+            this.selectedRows = [row];
+          }
+        }
+        if (e.type === 'kup-cell-input') {
+          this.refresh();
+        }
+      }
+    };
+    const compCreated = (h(Host, { "onKup-cell-input": autoselectOnAction, "onKup-cell-update": autoselectOnAction }, h("style", null, __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h("div", { class: "above-wrapper" }, this.globalFilter ? (h("div", { id: "global-filter" }, h(FTextField, { fullWidth: true, icon: KupThemeIconValues.SEARCH, label: __classPrivateFieldGet(this, _KupDataTable_kupManager, "f").language.translate(KupLanguageSearch.SEARCH), value: this.globalFilterValue, onInput: (event) => {
         const t = event.target;
         window.clearTimeout(__classPrivateFieldGet(this, _KupDataTable_globalFilterTimeout, "f"));
         __classPrivateFieldSet(this, _KupDataTable_globalFilterTimeout, window.setTimeout(() => __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_onGlobalFilterChange).call(this, t), 600, t), "f");
@@ -1211,14 +1244,22 @@ export class KupDataTable {
               value: '',
             };
           }
-          this.data.rows.unshift({
+          const row = {
             cells,
             id: __classPrivateFieldGet(this, _KupDataTable_INSERT_PREFIX, "f") +
               __classPrivateFieldGet(this, _KupDataTable_insertCount, "f"),
-          });
+          };
+          this.data.rows.unshift(row);
           await this.refresh(true);
         }
-      }, styling: FButtonStyling.OUTLINED, title: "Insert row", wrapperClass: "insert-button" })) : null, this.showDeleteButton &&
+      }, styling: FButtonStyling.OUTLINED, title: "Insert row", wrapperClass: "insert-button" })) : null, this.insertMode !== '' &&
+      this.selectedRows.length > 0 ? (h(FButton, { icon: "save", onClick: () => {
+        this.kupSave.emit({
+          comp: this,
+          id: this.rootElement.id,
+          selectedRows: this.selectedRows,
+        });
+      }, 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
@@ -2624,6 +2665,26 @@ export class KupDataTable {
             }
           }
         }
+      }, {
+        "method": "kupSave",
+        "name": "kup-datatable-save",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the save button is pressed."
+        },
+        "complexType": {
+          "original": "KupDatatableInsertRowEventPayload",
+          "resolved": "KupDatatableInsertRowEventPayload",
+          "references": {
+            "KupDatatableInsertRowEventPayload": {
+              "location": "import",
+              "path": "./kup-data-table-declarations"
+            }
+          }
+        }
       }, {
         "method": "kupInsertRow",
         "name": "kup-datatable-insert-row",
@@ -3322,12 +3383,27 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     __classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_setTransposedData).call(this);
   }
 }, _KupDataTable_getRow = function _KupDataTable_getRow(id) {
-  if (typeof id === 'number') {
-    return this.data.rows[id];
+  let row = null;
+  const search = (rows) => {
+    if (rows && rows.length > 0 && !row) {
+      test(rows);
+    }
+  };
+  const test = (rows) => {
+    if (typeof id === 'number') {
+      row = rows[id];
+    }
+    else {
+      row = rows.find((row) => row.id === id);
+    }
+  };
+  if (__classPrivateFieldGet(this, _KupDataTable_instances, "m", _KupDataTable_isGrouping).call(this) && typeof id === 'string') {
+    __classPrivateFieldGet(this, _KupDataTable_paginatedRows, "f").forEach((row) => search(row.group.children));
   }
   else {
-    return this.data.rows.find((row) => row.id === id);
+    test(__classPrivateFieldGet(this, _KupDataTable_rows, "f"));
   }
+  return row;
 }, _KupDataTable_getTransposedData = function _KupDataTable_getTransposedData(column) {
   if (column) {
     this.filters = {};
@@ -3464,13 +3540,17 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     delete column.icon;
   }
 }, _KupDataTable_updateStickyHeaderSize = function _KupDataTable_updateStickyHeaderSize() {
-  const navBar = document.querySelectorAll('.header')[0];
+  const navBar = document.querySelector('.header');
+  const topBar = document.querySelector('.topbar');
   if (navBar) {
     __classPrivateFieldSet(this, _KupDataTable_navBarHeight, navBar.clientHeight, "f");
   }
   else {
     __classPrivateFieldSet(this, _KupDataTable_navBarHeight, 0, "f");
   }
+  if (topBar) {
+    __classPrivateFieldSet(this, _KupDataTable_navBarHeight, __classPrivateFieldGet(this, _KupDataTable_navBarHeight, "f") + topBar.clientHeight, "f");
+  }
   if (__classPrivateFieldGet(this, _KupDataTable_stickyTheadRef, "f")) {
     __classPrivateFieldGet(this, _KupDataTable_stickyTheadRef, "f").style.top = __classPrivateFieldGet(this, _KupDataTable_navBarHeight, "f") + 'px';
     const widthTable = __classPrivateFieldGet(this, _KupDataTable_tableAreaRef, "f").offsetWidth;
@@ -4071,7 +4151,7 @@ _KupDataTable_initialized = new WeakMap(), _KupDataTable_rows = new WeakMap(), _
     this.kupInsertRow.emit({
       comp: this,
       id: this.rootElement.id,
-      row: row,
+      selectedRows: [row],
     });
   });
   buttonWrapper.append(cancel);

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

@@ -835,11 +835,13 @@ _KupEchart_chartContainer = new WeakMap(), _KupEchart_chartEl = new WeakMap(), _
   let objKey;
   if (this.axis) {
     for (const row of this.data.rows) {
-      objKey = row.cells[this.axis].value;
-      y[objKey] = [];
+      objKey = row.cells[this.axis].value.trim();
+      if (!y[objKey]) {
+        y[objKey] = [];
+      }
       for (const key of Object.keys(row.cells)) {
         const cell = row.cells[key];
-        const value = cell.value;
+        const value = cell.value.trim();
         if (!this.axis.includes(key)) {
           if (this.series &&
             this.series.length > 0 &&

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

@@ -7,7 +7,9 @@ export var KupFormProps;
   KupFormProps["customStyle"] = "Custom style of the component.";
   KupFormProps["data"] = "Actual data of the form.";
   KupFormProps["hiddenSubmitButton"] = "Creates a hidden submit button in order to submit the form with enter.";
+  KupFormProps["labelPlacement"] = "Sets the label placement for 'all' fields in form";
   KupFormProps["layout"] = "How the form will arrange its content.";
+  KupFormProps["submitCb"] = "Sets the callback function on submit form";
 })(KupFormProps || (KupFormProps = {}));
 export var KupFormLabelAlignment;
 (function (KupFormLabelAlignment) {
@@ -21,6 +23,7 @@ export var KupFormLabelPlacement;
   KupFormLabelPlacement["LEFT"] = "left";
   KupFormLabelPlacement["HIDDEN"] = "hidden";
   KupFormLabelPlacement["PLACEHOLDER"] = "placeholder";
+  KupFormLabelPlacement["WATERMARK"] = "watermark";
   KupFormLabelPlacement["RIGHT"] = "right";
   KupFormLabelPlacement["TOP"] = "top";
 })(KupFormLabelPlacement || (KupFormLabelPlacement = {}));