@sme.up/ketchup 6.6.0 → 6.8.0

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

@@ -1,4 +1,4 @@
-import { Component, Element, forceUpdate, h, Host, Method, Prop, State, Event, Watch, } from '@stencil/core';
+import { forceUpdate, h, Host, } from '@stencil/core';
 import { FButton } from '../../f-components/f-button/f-button';
 import { FCheckbox } from '../../f-components/f-checkbox/f-checkbox';
 import { FTextField } from '../../f-components/f-text-field/f-text-field';
@@ -12,32 +12,6 @@ import { componentWrapperId } from '../../variables/GenericVariables';
 import { KupDashboardProps, } from './kup-dashboard-declarations';
 export class KupDashboard {
   constructor() {
-    /*-------------------------------------------------*/
-    /*                   S t a t e s                   */
-    /*-------------------------------------------------*/
-    /**
-     * Force render component by internal event.
-     */
-    this.resetInternalData = false;
-    /*-------------------------------------------------*/
-    /*                    P r o p s                    */
-    /*-------------------------------------------------*/
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
-    this.customStyle = '';
-    /**
-     * The data of the component.
-     * @default null
-     */
-    this.data = null;
-    /**
-     * Enable drag & drop of the section.
-     * @default false
-     */
-    this.enableDesign = false;
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
@@ -53,6 +27,10 @@ export class KupDashboard {
      * Internal data backup of the component for refresh when changed content by drag&drop.
      */
     this.internalDataBackup = null;
+    this.resetInternalData = false;
+    this.customStyle = '';
+    this.data = null;
+    this.enableDesign = false;
   }
   onKupSave() {
     this.kupSave.emit({
@@ -114,9 +92,7 @@ export class KupDashboard {
       label: this.kupManager.language.translate(KupLanguageDashboard.SAVE),
       onClick: () => this.onKupSave(),
     };
-    return (h("div", { class: "header" },
-      this.enableDesign ? (h(FButton, Object.assign({}, clearButtonProp))) : undefined,
-      this.enableDesign ? (h(FButton, Object.assign({}, saveButtonProp))) : undefined));
+    return (h("div", { class: "header" }, this.enableDesign ? (h(FButton, Object.assign({}, clearButtonProp))) : undefined, this.enableDesign ? (h(FButton, Object.assign({}, saveButtonProp))) : undefined));
   }
   buildForm(form, parent) {
     const classes = {
@@ -187,18 +163,7 @@ export class KupDashboard {
         this.refresh();
       },
     };
-    return (h("div", { class: "section-header" },
-      h("div", null,
-        section.id,
-        " - ",
-        section.layout),
-      h("div", null,
-        h("div", { class: "section-header-actions" },
-          h(FTextField, Object.assign({}, dimTextFieldProp)),
-          h(FCheckbox, Object.assign({}, loadedCheckBoxProp)),
-          h(FCheckbox, Object.assign({}, columnCheckBoxProp)),
-          h(FButton, Object.assign({}, addButtonProp)),
-          h(FButton, Object.assign({}, removeButtonProp))))));
+    return (h("div", { class: "section-header" }, h("div", null, section.id, " - ", section.layout), h("div", null, h("div", { class: "section-header-actions" }, h(FTextField, Object.assign({}, dimTextFieldProp)), h(FCheckbox, Object.assign({}, loadedCheckBoxProp)), h(FCheckbox, Object.assign({}, columnCheckBoxProp)), h(FButton, Object.assign({}, addButtonProp)), h(FButton, Object.assign({}, removeButtonProp))))));
   }
   buildSection(section, parent) {
     const classes = {
@@ -216,17 +181,13 @@ export class KupDashboard {
           return;
         const kel = el;
         kel.kupData = { parent: parent, section: section };
-      } },
-      this.enableDesign
-        ? this.buildSectionHeader(section, parent)
-        : undefined,
-      h("div", { class: bodyClasses, style: this.getGridStyle(section) },
-        !this.enableDesign &&
-          section.loaded &&
-          (!section.sections || section.sections.length == 0) ? (h("slot", { name: section.id })) : undefined,
-        section.sections && (section.loaded || this.enableDesign)
-          ? section.sections.map((childSection) => this.buildSection(childSection, section))
-          : undefined)));
+      } }, this.enableDesign
+      ? this.buildSectionHeader(section, parent)
+      : undefined, h("div", { class: bodyClasses, style: this.getGridStyle(section) }, !this.enableDesign &&
+      section.loaded &&
+      (!section.sections || section.sections.length == 0) ? (h("slot", { name: section.id })) : undefined, section.sections && (section.loaded || this.enableDesign)
+      ? section.sections.map((childSection) => this.buildSection(childSection, section))
+      : undefined)));
   }
   calcSectionPosition(pointerY, pointerX, vertical, sectionCount, elements) {
     let idx = sectionCount;
@@ -418,11 +379,7 @@ export class KupDashboard {
     this.didRenderInteractables();
   }
   render() {
-    return (h(Host, null,
-      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
-      h("div", { id: componentWrapperId },
-        this.buildHeader(),
-        this.buildForm(this.internalData, null))));
+    return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, this.buildHeader(), this.buildForm(this.internalData, null))));
   }
   disconnectedCallback() {
     this.unregisterInteractables();
@@ -432,189 +389,203 @@ export class KupDashboard {
   }
   static get is() { return "kup-dashboard"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["kup-dashboard.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["kup-dashboard.css"]
-  }; }
-  static get properties() { return {
-    "customStyle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"\""
-          }, {
-            "name": "see",
-            "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
-          }],
-        "text": "Custom style of the component."
+  static get originalStyleUrls() {
+    return {
+      "$": ["kup-dashboard.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["kup-dashboard.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "customStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"\""
+            }, {
+              "name": "see",
+              "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
+            }],
+          "text": "Custom style of the component."
+        },
+        "attribute": "custom-style",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "attribute": "custom-style",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "data": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "KupDataDashboard",
-        "resolved": "KupDataDashboard",
-        "references": {
-          "KupDataDashboard": {
-            "location": "import",
-            "path": "./kup-dashboard-declarations"
+      "data": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "KupDataDashboard",
+          "resolved": "KupDataDashboard",
+          "references": {
+            "KupDataDashboard": {
+              "location": "import",
+              "path": "./kup-dashboard-declarations"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "null"
-          }],
-        "text": "The data of the component."
-      },
-      "defaultValue": "null"
-    },
-    "enableDesign": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "false"
-          }],
-        "text": "Enable drag & drop of the section."
-      },
-      "attribute": "enable-design",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "resetInternalData": {}
-  }; }
-  static get events() { return [{
-      "method": "kupSave",
-      "name": "kup-dashboard-save",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "The data of the component."
+        },
+        "defaultValue": "null"
       },
-      "complexType": {
-        "original": "KupDashboardEventPayload",
-        "resolved": "KupDashboardEventPayload",
-        "references": {
-          "KupDashboardEventPayload": {
-            "location": "import",
-            "path": "./kup-dashboard-declarations"
+      "enableDesign": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Enable drag & drop of the section."
+        },
+        "attribute": "enable-design",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "resetInternalData": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "kupSave",
+        "name": "kup-dashboard-save",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "KupDashboardEventPayload",
+          "resolved": "KupDashboardEventPayload",
+          "references": {
+            "KupDashboardEventPayload": {
+              "location": "import",
+              "path": "./kup-dashboard-declarations"
+            }
           }
         }
-      }
-    }]; }
-  static get methods() { return {
-    "getProps": {
-      "complexType": {
-        "signature": "(descriptions?: boolean) => Promise<GenericObject>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "descriptions - When provided and true, the result will be the list of props with their description."
-              }],
-            "text": "- When provided and true, the result will be the list of props with their description."
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      }];
+  }
+  static get methods() {
+    return {
+      "getProps": {
+        "complexType": {
+          "signature": "(descriptions?: boolean) => Promise<GenericObject>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "descriptions - When provided and true, the result will be the list of props with their description."
+                }],
+              "text": "- When provided and true, the result will be the list of props with their description."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
           },
-          "GenericObject": {
-            "location": "import",
-            "path": "../../types/GenericTypes"
-          }
+          "return": "Promise<GenericObject>"
         },
-        "return": "Promise<GenericObject>"
+        "docs": {
+          "text": "Used to retrieve component's props values.",
+          "tags": [{
+              "name": "param",
+              "text": "descriptions - When provided and true, the result will be the list of props with their description."
+            }, {
+              "name": "returns",
+              "text": "List of props as object, each key will be a prop."
+            }]
+        }
       },
-      "docs": {
-        "text": "Used to retrieve component's props values.",
-        "tags": [{
-            "name": "param",
-            "text": "descriptions - When provided and true, the result will be the list of props with their description."
-          }, {
-            "name": "returns",
-            "text": "List of props as object, each key will be a prop."
-          }]
-      }
-    },
-    "refresh": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "refresh": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "This method is used to trigger a new render of the component.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "This method is used to trigger a new render of the component.",
-        "tags": []
-      }
-    },
-    "setProps": {
-      "complexType": {
-        "signature": "(props: GenericObject) => Promise<void>",
-        "parameters": [{
-            "tags": [{
-                "name": "param",
-                "text": "props - Object containing props that will be set to the component."
-              }],
-            "text": "- Object containing props that will be set to the component."
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      "setProps": {
+        "complexType": {
+          "signature": "(props: GenericObject) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "props - Object containing props that will be set to the component."
+                }],
+              "text": "- Object containing props that will be set to the component."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
           },
-          "GenericObject": {
-            "location": "import",
-            "path": "../../types/GenericTypes"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets the props to the component.",
-        "tags": [{
-            "name": "param",
-            "text": "props - Object containing props that will be set to the component."
-          }]
+        "docs": {
+          "text": "Sets the props to the component.",
+          "tags": [{
+              "name": "param",
+              "text": "props - Object containing props that will be set to the component."
+            }]
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "rootElement"; }
-  static get watchers() { return [{
-      "propName": "data",
-      "methodName": "dataChanged"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "data",
+        "methodName": "dataChanged"
+      }];
+  }
 }

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

@@ -26,6 +26,7 @@ export var KupDataTableProps;
   KupDataTableProps["groupLabelDisplay"] = "How the label of a group must be displayed. For available values";
   KupDataTableProps["groups"] = "The list of groups.";
   KupDataTableProps["headerIsPersistent"] = "When set to true the header will stick on top of the table when scrolling.";
+  KupDataTableProps["insertMode"] = "Enables insert mode.";
   KupDataTableProps["isFocusable"] = "When set to true, clicked-on rows will have a visual feedback.";
   KupDataTableProps["lazyLoadRows"] = "When set to true, extra rows will be automatically loaded once the last row enters the viewport. When groups are present, the number of rows is referred to groups and not to their content. Paginator is disabled.";
   KupDataTableProps["lineBreakCharacter"] = "Defines the placeholder character which will be replaced by a line break inside table header cells, normal or sticky.";
@@ -41,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["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.";
   KupDataTableProps["showGrid"] = "Can be used to customize the grid view of the table.";

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

@@ -415,6 +415,15 @@ th.obj:hover span:not(.overlay-action) {
   display: inline-block;
 }
 
+.actions-wrapper {
+  display: flex;
+}
+
+.insert-button,
+.delete-button {
+  padding: 1em 0.5em;
+}
+
 .kup-icon.kup-ascending-icon {
   -webkit-mask: var(--kup-ascending-icon);
   mask: var(--kup-ascending-icon);