@sme.up/ketchup 6.8.0 → 7.0.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/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-chip/kup-chip.js

@@ -109,7 +109,7 @@ export class KupChip {
     const isChoice = this.type.toLowerCase() === FChipType.CHOICE;
     let firstCheckedFound = false;
     if (isChoice) {
-      for (let j = 0; j < this.data.length; j++) {
+      for (let j = 0; this.data && j < this.data.length; j++) {
         if (this.data[j].checked && firstCheckedFound) {
           this.data[j].checked = false;
           let message = 'Found occurence of data(' +
@@ -154,7 +154,7 @@ export class KupChip {
         ? true
         : false,
     };
-    for (let j = 0; j < this.data.length; j++) {
+    for (let j = 0; this.data && j < this.data.length; j++) {
       props.onBlur.push((chip) => this.onKupBlur(chip));
       props.onClick.push((chip) => this.onKupClick(chip));
       props.onExpansionClick.push((chip, e) => {

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

@@ -766,12 +766,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
@@ -3464,13 +3467,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;

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 = {}));

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

@@ -19,7 +19,9 @@ export class KupForm {
     this.customStyle = '';
     this.data = null;
     this.hiddenSubmitButton = false;
+    this.labelPlacement = KupFormLabelPlacement.LEFT;
     this.layout = null;
+    this.submitCb = null;
   }
   /*-------------------------------------------------*/
   /*                  W a t c h e r s                */
@@ -153,7 +155,7 @@ export class KupForm {
       form: true,
       'form--column': !horizontal,
     };
-    return (h("form", { class: classObj, name: this.rootElement.id }, formContent, this.hiddenSubmitButton ? (h(FButton, { buttonType: "submit", label: this.kupManager.language.translate(KupLanguageGeneric.CONFIRM), wrapperClass: "form__submit" })) : null));
+    return (h("form", { class: classObj, name: this.rootElement.id, onSubmit: this.submitCb }, formContent, this.hiddenSubmitButton ? (h(FButton, { buttonType: "submit", label: this.kupManager.language.translate(KupLanguageGeneric.CONFIRM), wrapperClass: "form__submit" })) : null));
   }
   renderSection(section, parent, row, visibleColumns) {
     var _a;
@@ -198,7 +200,7 @@ export class KupForm {
       });
     }
     const isGrid = !!section.columns;
-    const labelPlacement = ((_a = section === null || section === void 0 ? void 0 : section.label) === null || _a === void 0 ? void 0 : _a.placement) || KupFormLabelPlacement.LEFT;
+    const labelPlacement = ((_a = section === null || section === void 0 ? void 0 : section.label) === null || _a === void 0 ? void 0 : _a.placement) || this.labelPlacement;
     const sectionClass = {
       form__section: true,
       'form__section--column': !isGrid && !section.horizontal,
@@ -275,10 +277,12 @@ export class KupForm {
     };
     const label = formField.label || column.title;
     resetLabel();
-    switch ((_a = section.label) === null || _a === void 0 ? void 0 : _a.placement) {
+    const labelPlacement = ((_a = section === null || section === void 0 ? void 0 : section.label) === null || _a === void 0 ? void 0 : _a.placement) || this.labelPlacement;
+    switch (labelPlacement) {
       case KupFormLabelPlacement.BOTTOM:
         return [h("tr", null, fieldCell()), h("tr", null, labelCell(label))];
       case KupFormLabelPlacement.PLACEHOLDER:
+      case KupFormLabelPlacement.WATERMARK:
         setPlaceholderLabel();
       case KupFormLabelPlacement.HIDDEN: {
         if (section) {
@@ -500,6 +504,32 @@ export class KupForm {
         "reflect": false,
         "defaultValue": "false"
       },
+      "labelPlacement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "KupFormLabelPlacement",
+          "resolved": "KupFormLabelPlacement.BOTTOM | KupFormLabelPlacement.HIDDEN | KupFormLabelPlacement.LEFT | KupFormLabelPlacement.PLACEHOLDER | KupFormLabelPlacement.RIGHT | KupFormLabelPlacement.TOP | KupFormLabelPlacement.WATERMARK",
+          "references": {
+            "KupFormLabelPlacement": {
+              "location": "import",
+              "path": "./kup-form-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "KupFormLabelPlacement.LEFT"
+            }],
+          "text": "Sets the label placement for 'all' fields in form"
+        },
+        "attribute": "label-placement",
+        "reflect": false,
+        "defaultValue": "KupFormLabelPlacement.LEFT"
+      },
       "layout": {
         "type": "unknown",
         "mutable": false,
@@ -523,6 +553,29 @@ export class KupForm {
           "text": "How the form will arrange its content."
         },
         "defaultValue": "null"
+      },
+      "submitCb": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(e: SubmitEvent) => unknown",
+          "resolved": "(e: SubmitEvent) => unknown",
+          "references": {
+            "SubmitEvent": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Sets the callback function on submit form"
+        },
+        "defaultValue": "null"
       }
     };
   }

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

@@ -9,6 +9,7 @@ export var FCellEvents;
   FCellEvents["CLICK"] = "kup-cell-click";
   FCellEvents["ICON_CLICK"] = "kup-cell-iconclick";
   FCellEvents["INPUT"] = "kup-cell-input";
+  FCellEvents["KEYUP"] = "kup-cell-keyup";
   FCellEvents["UPDATE"] = "kup-cell-update";
 })(FCellEvents || (FCellEvents = {}));
 /**
@@ -128,6 +129,7 @@ export const editableTypes = [
   FCellTypes.COLOR_PICKER,
   FCellTypes.COMBOBOX,
   FCellTypes.DATE,
+  FCellTypes.LINK,
   FCellTypes.NUMBER,
   FCellTypes.RATING,
   FCellTypes.STRING,

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

@@ -101,7 +101,7 @@ export const FCell = (props, children) => {
     };
     infoEl = h(FImage, Object.assign({}, fProps));
   }
-  return (h("div", { class: classObj, "kup-get-cell-props": () => {
+  return (h("div", { onKeyUp: (e) => cellEvent(e, props, cellType, FCellEvents.KEYUP), class: classObj, "kup-get-cell-props": () => {
       return props;
     }, style: cell.style }, h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle }, children && children.length > 0
     ? children
@@ -221,6 +221,7 @@ function setEditableCell(cellType, classObj, cell, column, props) {
       return (h("kup-time-picker", Object.assign({ key: column.name + props.row.id, initialValue: cell.value }, cell.data, { class: isFullWidth(props) ? 'kup-full-width' : '', "onkup-timepicker-change": (e) => cellEvent(e, props, cellType, FCellEvents.UPDATE), "onkup-timepicker-input": (e) => cellEvent(e, props, cellType, FCellEvents.INPUT) })));
     case FCellTypes.NUMBER:
       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
           ? stringToNumber(cell.value).toString()
@@ -385,10 +386,12 @@ function cellEvent(e, props, cellType, cellEventName) {
       },
     });
     comp.rootElement.dispatchEvent(cellEvent);
-    try {
-      comp.refresh();
+    if (cellEventName === FCellEvents.UPDATE) {
+      try {
+        comp.refresh();
+      }
+      catch (error) { }
     }
-    catch (error) { }
   }
 }
 function isAutoCentered(props) {

package/dist/collection/managers/kup-data/kup-data-column-helper.js

@@ -9,10 +9,13 @@ const dom = document.documentElement;
  * @returns {Column[]} Columns matching the criteria.
  */
 export function findColumns(dataset, filters) {
+  const result = [];
+  if (!dataset) {
+    return result;
+  }
   const columns = dataset.columns
     ? dataset.columns
     : dataset;
-  const result = [];
   for (let index = 0; index < columns.length; index++) {
     const column = columns[index];
     for (const key in filters) {

package/dist/collection/utils/kup-column-menu/kup-column-menu.js

@@ -205,7 +205,7 @@ export class KupColumnMenu {
    */
   prepChip(comp, column) {
     let props = [];
-    const chipProps = {};
+    const chipProps = { data: [] };
     if (column.children) {
       const chipData = [];
       for (let index = 0; index < column.children.length; index++) {