@sme.up/ketchup 6.6.0 → 6.8.0

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

@@ -1,4 +1,4 @@
-import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch, } from '@stencil/core';
+import { forceUpdate, h, Host, } from '@stencil/core';
 import { SortMode, } from '../kup-data-table/kup-data-table-declarations';
 import { KupBoxProps, } from './kup-box-declarations';
 import { getColumnByName } from '../../utils/cell-utils';
@@ -20,136 +20,55 @@ import { pageChange, rowsPerPageChange, } from '../../f-components/f-paginator/f
 import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
 export class KupBox {
   constructor() {
+    this.state = new KupBoxState();
     /*-------------------------------------------------*/
-    /*                   S t a t e s                   */
+    /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
+    /**
+     * Instance of the KupManager class.
+     */
+    this.kupManager = kupManagerInstance();
+    this.visibleColumns = [];
+    this.rows = [];
+    this.filteredRows = [];
+    this.sectionRef = null;
+    this.rowsRefs = [];
+    this.hold = false;
+    this.interactableDrag = [];
+    this.interactableDrop = [];
+    this.interactableTouch = [];
     this.collapsedSection = {};
     this.selectedRows = [];
+    this.rowActionMenuOpened = undefined;
     this.currentPage = 1;
     this.currentRowsPerPage = 10;
-    this.state = new KupBoxState();
-    /*-------------------------------------------------*/
-    /*                    P r o p s                    */
-    /*-------------------------------------------------*/
-    /**
-     * Data of the card linked to the box when the latter's layout must be a premade template.
-     * @default null
-     */
     this.cardData = null;
-    /**
-     * Number of columns
-     * @default 1
-     */
     this.columns = 1;
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
     this.customStyle = '';
-    /**
-     * Actual data of the box.
-     * @default null
-     */
     this.data = null;
-    /**
-     * Enable dragging
-     * @default false
-     */
     this.dragEnabled = false;
-    /**
-     * Enable dropping
-     * @default false
-     */
     this.dropEnabled = false;
-    /**
-     * Drop can be done in section
-     * @default false
-     */
     this.dropOnSection = false;
-    /**
-     * When set to true, editable cells will be rendered using input components.
-     * @default false
-     */
     this.editableData = false;
-    /**
-     * If enabled, a button to load / display the row actions
-     * will be displayed on the right of every box
-     * @default false
-     */
     this.enableRowActions = false;
-    /**
-     * When set to true it activates the global filter.
-     * @default false
-     */
     this.globalFilter = false;
-    /**
-     * The value of the global filter.
-     * @default ""
-     */
     this.globalFilterValue = '';
-    /**
-     * Displays the boxlist as a Kanban.
-     * @default null
-     */
     this.kanban = null;
-    /**
-     * Enable multi selection
-     * @default false
-     */
+    this.layout = undefined;
     this.multiSelection = false;
-    /**
-     * Current page number
-     * @default 1
-     */
     this.pageSelected = 1;
-    /**
-     * Number of boxes per page
-     * @default 10
-     */
     this.pageSize = 10;
-    /**
-     * Enables pagination
-     * @default false
-     */
     this.pagination = false;
-    /**
-     * Activates the scroll on hover function.
-     * @default false
-     */
+    this.rowsPerPage = undefined;
     this.scrollOnHover = false;
-    /**
-     * If enabled, highlights the selected box/boxes
-     * @default true
-     */
+    this.selectBox = undefined;
+    this.selectedRowsState = undefined;
     this.showSelection = true;
-    /**
-     * Enable sorting
-     * @default false
-     */
+    this.sortBy = undefined;
     this.sortEnabled = false;
     this.stateId = '';
-    /**
-     * Disable swipe
-     * @default false
-     */
+    this.store = undefined;
     this.swipeDisabled = false;
-    /*-------------------------------------------------*/
-    /*       I n t e r n a l   V a r i a b l e s       */
-    /*-------------------------------------------------*/
-    /**
-     * Instance of the KupManager class.
-     */
-    this.kupManager = kupManagerInstance();
-    this.visibleColumns = [];
-    this.rows = [];
-    this.filteredRows = [];
-    this.sectionRef = null;
-    this.rowsRefs = [];
-    this.hold = false;
-    this.interactableDrag = [];
-    this.interactableDrop = [];
-    this.interactableTouch = [];
   }
   initWithPersistedState() {
     if (this.store && this.stateId) {
@@ -771,8 +690,7 @@ export class KupBox {
     }
     let multiSel = null;
     if (this.multiSelection) {
-      multiSel = (h("div", { class: "box-selection" },
-        h("kup-checkbox", { checked: isSelected })));
+      multiSel = (h("div", { class: "box-selection" }, h("kup-checkbox", { checked: isSelected })));
     }
     let rowObject = null;
     if (this.enableRowActions && !this.swipeDisabled) {
@@ -784,17 +702,11 @@ export class KupBox {
       if (row.actions) {
         const actionItems = row.actions.map((item, index) => {
           const iconClass = `icon ${item.icon}`;
-          return (h("li", { tabindex: "0", onClick: () => this.onRowActionClick(row, item, index) },
-            h("div", { class: iconClass }),
-            h("div", { class: "text" }, item.text)));
+          return (h("li", { tabindex: "0", onClick: () => this.onRowActionClick(row, item, index) }, h("div", { class: iconClass }), h("div", { class: "text" }, item.text)));
         });
         rowActionMenuContent = h("ul", null, actionItems);
       }
-      rowObject = (h("div", { class: "row-actions-wrapper" },
-        h("div", { class: "row-actions-toggler" },
-          h("svg", { version: "1.1", width: "24", height: "24", viewBox: "0 0 24 24", onClick: () => this.onRowAction(row) },
-            h("path", { d: "M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z" })),
-          h("div", { class: menuClass }, rowActionMenuContent))));
+      rowObject = (h("div", { class: "row-actions-wrapper" }, h("div", { class: "row-actions-toggler" }, h("svg", { version: "1.1", width: "24", height: "24", viewBox: "0 0 24 24", onClick: () => this.onRowAction(row) }, h("path", { d: "M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z" })), h("div", { class: menuClass }, rowActionMenuContent))));
     }
     let badges = null;
     if (row.badgeData && row.badgeData.length > 0) {
@@ -808,12 +720,8 @@ export class KupBox {
       selected: this.showSelection && isSelected,
       column: !horizontal,
     };
-    return (h("div", { class: "box-wrapper" },
-      h("div", { class: boxClass, onClick: (e) => this.onBoxClick(e, row), ref: (el) => this.rowsRefs.push(el) },
-        multiSel,
-        boxContent,
-        badges),
-      rowObject));
+    const rowStyle = row.style || {};
+    return (h("div", { class: "box-wrapper", style: rowStyle }, h("div", { class: boxClass, onClick: (e) => this.onBoxClick(e, row), ref: (el) => this.rowsRefs.push(el) }, multiSel, boxContent, badges), rowObject));
   }
   renderSection(section, parent, row, visibleColumns) {
     let sectionContent = null;
@@ -893,21 +801,14 @@ export class KupBox {
       else {
         headerTitle = this.kupManager.language.translate(KupLanguageGeneric.EXPAND);
       }
-      sectionContainer = (h("div", { class: sectionClass, style: sectionStyle },
-        h("div", { class: contentClass }, sectionContent),
-        h("div", { class: "header", role: "button", onClick: (e) => {
-            e.stopPropagation();
-            this.toggleSectionExpand(row, section);
-          } },
-          h("div", { class: "header-content" },
-            h("span", null, headerTitle),
-            h(FImage, { resource: `${KupThemeIconValues.DROPDOWN}`, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: sectionExpanded ? 'toggled' : '' })))));
+      sectionContainer = (h("div", { class: sectionClass, style: sectionStyle }, h("div", { class: contentClass }, sectionContent), h("div", { class: "header", role: "button", onClick: (e) => {
+          e.stopPropagation();
+          this.toggleSectionExpand(row, section);
+        } }, h("div", { class: "header-content" }, h("span", null, headerTitle), h(FImage, { resource: `${KupThemeIconValues.DROPDOWN}`, sizeX: "1.25em", sizeY: "1.25em", wrapperClass: sectionExpanded ? 'toggled' : '' })))));
     }
     else {
       const title = section.title ? h("h3", null, section.title) : null;
-      sectionContainer = (h("div", { class: sectionClass, style: sectionStyle },
-        title,
-        sectionContent));
+      sectionContainer = (h("div", { class: sectionClass, style: sectionStyle }, title, sectionContent));
     }
     return sectionContainer;
   }
@@ -962,9 +863,7 @@ export class KupBox {
     if (!this.kanban.columns || this.kanban.columns.length === 0) {
       this.kupManager.debug.logMessage(this, 'No columns to group by detected.', KupDebugCategory.ERROR);
       return {
-        jsx: (h("div", { id: "empty-data-message", class: "box-wrapper" },
-          h("div", { ref: (el) => this.rowsRefs.push(el) }),
-          this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA))),
+        jsx: (h("div", { id: "empty-data-message", class: "box-wrapper" }, h("div", { ref: (el) => this.rowsRefs.push(el) }), this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA))),
         style: { 'grid-template-columns': `repeat(1, 1fr)` },
       };
     }
@@ -1033,9 +932,7 @@ export class KupBox {
           id: sortingKey[index],
         });
       }
-      kanbanJSX.push(h("div", { class: "kanban-section" },
-        h(FChip, Object.assign({}, props)),
-        kanbanSections[index].nodes));
+      kanbanJSX.push(h("div", { class: "kanban-section" }, h(FChip, Object.assign({}, props)), kanbanSections[index].nodes));
     }
     return {
       jsx: kanbanJSX,
@@ -1219,16 +1116,14 @@ export class KupBox {
         'kup-text-field': textfieldData,
         'kup-list': listData,
       };
-      sortPanel = (h("div", { id: "sort-panel" },
-        h("kup-combobox", { data: data, initialValue: this.sortBy, "onkup-combobox-itemclick": (e) => this.onSortChange(e) })));
+      sortPanel = (h("div", { id: "sort-panel" }, h("kup-combobox", { data: data, initialValue: this.sortBy, "onkup-combobox-itemclick": (e) => this.onSortChange(e) })));
     }
     let filterPanel = null;
     if (this.globalFilter) {
-      filterPanel = (h("div", { id: "global-filter" },
-        h("kup-text-field", { fullWidth: true, label: this.kupManager.language.translate(KupLanguageSearch.SEARCH), icon: KupThemeIconValues.SEARCH, initialValue: this.globalFilterValue, "onkup-textfield-input": (event) => {
-            window.clearTimeout(this.globalFilterTimeout);
-            this.globalFilterTimeout = window.setTimeout(() => this.onGlobalFilterChange(event), 600);
-          } })));
+      filterPanel = (h("div", { id: "global-filter" }, h("kup-text-field", { fullWidth: true, label: this.kupManager.language.translate(KupLanguageSearch.SEARCH), icon: KupThemeIconValues.SEARCH, initialValue: this.globalFilterValue, "onkup-textfield-input": (event) => {
+          window.clearTimeout(this.globalFilterTimeout);
+          this.globalFilterTimeout = window.setTimeout(() => this.onGlobalFilterChange(event), 600);
+        } })));
     }
     let paginator = null;
     if (this.pagination) {
@@ -1239,8 +1134,7 @@ export class KupBox {
     let boxContent = null;
     let containerStyle = {};
     if (this.rows.length === 0) {
-      boxContent = (h("div", { id: "empty-data-message", class: "box-wrapper" },
-        h("div", { class: "box", ref: (el) => this.rowsRefs.push(el) }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA))));
+      boxContent = (h("div", { id: "empty-data-message", class: "box-wrapper" }, h("div", { class: "box", ref: (el) => this.rowsRefs.push(el) }, this.kupManager.language.translate(KupLanguageGeneric.EMPTY_DATA))));
       containerStyle = { 'grid-template-columns': `repeat(1, 1fr)` };
     }
     else if (isKanban) {
@@ -1260,17 +1154,10 @@ export class KupBox {
         boxContent.push(this.renderRow(rows[cnt++]));
       }
     }
-    return (h(Host, null,
-      h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)),
-      h("div", { id: componentWrapperId },
-        h("div", { class: 'box-component', ref: (el) => (this.sectionRef = el) },
-          sortPanel,
-          filterPanel,
-          paginator,
-          h("div", { class: isKanban ? 'is-kanban' : '', id: 'box-container', style: containerStyle, onContextMenu: (e) => {
-              e.preventDefault();
-            }, ref: (el) => (this.boxContainer =
-              el) }, boxContent)))));
+    return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h("div", { class: 'box-component', ref: (el) => (this.sectionRef = el) }, sortPanel, filterPanel, paginator, h("div", { class: isKanban ? 'is-kanban' : '', id: 'box-container', style: containerStyle, onContextMenu: (e) => {
+        e.preventDefault();
+      }, ref: (el) => (this.boxContainer =
+        el) }, boxContent)))));
   }
   disconnectedCallback() {
     this.kupManager.interact.unregister(this.interactableDrag.concat(this.interactableDrop));
@@ -1285,894 +1172,908 @@ export class KupBox {
   }
   static get is() { return "kup-box"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["kup-box.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["kup-box.css"]
-  }; }
-  static get properties() { return {
-    "cardData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "GenericObject",
-        "resolved": "GenericObject",
-        "references": {
-          "GenericObject": {
-            "location": "import",
-            "path": "../../types/GenericTypes"
+  static get originalStyleUrls() {
+    return {
+      "$": ["kup-box.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["kup-box.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cardData": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "GenericObject",
+          "resolved": "GenericObject",
+          "references": {
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "null"
-          }],
-        "text": "Data of the card linked to the box when the latter's layout must be a premade template."
-      },
-      "defaultValue": "null"
-    },
-    "columns": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "1"
-          }],
-        "text": "Number of columns"
-      },
-      "attribute": "columns",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "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": "''"
-    },
-    "data": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "KupBoxData",
-        "resolved": "KupBoxData",
-        "references": {
-          "KupBoxData": {
-            "location": "import",
-            "path": "./kup-box-declarations"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Data of the card linked to the box when the latter's layout must be a premade template."
+        },
+        "defaultValue": "null"
+      },
+      "columns": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "1"
+            }],
+          "text": "Number of columns"
+        },
+        "attribute": "columns",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "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": "''"
+      },
+      "data": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "KupBoxData",
+          "resolved": "KupBoxData",
+          "references": {
+            "KupBoxData": {
+              "location": "import",
+              "path": "./kup-box-declarations"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "null"
-          }],
-        "text": "Actual data of the box."
-      },
-      "defaultValue": "null"
-    },
-    "dragEnabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "false"
-          }],
-        "text": "Enable dragging"
-      },
-      "attribute": "drag-enabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "dropEnabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "false"
-          }],
-        "text": "Enable dropping"
-      },
-      "attribute": "drop-enabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "dropOnSection": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "false"
-          }],
-        "text": "Drop can be done in section"
-      },
-      "attribute": "drop-on-section",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "editableData": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "false"
-          }],
-        "text": "When set to true, editable cells will be rendered using input components."
-      },
-      "attribute": "editable-data",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "enableRowActions": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "false"
-          }],
-        "text": "If enabled, a button to load / display the row actions\r\nwill be displayed on the right of every box"
-      },
-      "attribute": "enable-row-actions",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "globalFilter": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "false"
-          }],
-        "text": "When set to true it activates the global filter."
-      },
-      "attribute": "global-filter",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "globalFilterValue": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"\""
-          }],
-        "text": "The value of the global filter."
-      },
-      "attribute": "global-filter-value",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "kanban": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "KupBoxKanban",
-        "resolved": "KupBoxKanban",
-        "references": {
-          "KupBoxKanban": {
-            "location": "import",
-            "path": "./kup-box-declarations"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Actual data of the box."
+        },
+        "defaultValue": "null"
+      },
+      "dragEnabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Enable dragging"
+        },
+        "attribute": "drag-enabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "dropEnabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Enable dropping"
+        },
+        "attribute": "drop-enabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "dropOnSection": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Drop can be done in section"
+        },
+        "attribute": "drop-on-section",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "editableData": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "When set to true, editable cells will be rendered using input components."
+        },
+        "attribute": "editable-data",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "enableRowActions": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "If enabled, a button to load / display the row actions\r\nwill be displayed on the right of every box"
+        },
+        "attribute": "enable-row-actions",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "globalFilter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "When set to true it activates the global filter."
+        },
+        "attribute": "global-filter",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "globalFilterValue": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"\""
+            }],
+          "text": "The value of the global filter."
+        },
+        "attribute": "global-filter-value",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "kanban": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "KupBoxKanban",
+          "resolved": "KupBoxKanban",
+          "references": {
+            "KupBoxKanban": {
+              "location": "import",
+              "path": "./kup-box-declarations"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "null"
-          }],
-        "text": "Displays the boxlist as a Kanban."
-      },
-      "defaultValue": "null"
-    },
-    "layout": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "KupBoxLayout",
-        "resolved": "KupBoxLayout",
-        "references": {
-          "KupBoxLayout": {
-            "location": "import",
-            "path": "./kup-box-declarations"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Displays the boxlist as a Kanban."
+        },
+        "defaultValue": "null"
+      },
+      "layout": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "KupBoxLayout",
+          "resolved": "KupBoxLayout",
+          "references": {
+            "KupBoxLayout": {
+              "location": "import",
+              "path": "./kup-box-declarations"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "undefined"
+            }],
+          "text": "How the field will be displayed. If not present, a default one will be created."
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "undefined"
-          }],
-        "text": "How the field will be displayed. If not present, a default one will be created."
-      }
-    },
-    "multiSelection": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "false"
-          }],
-        "text": "Enable multi selection"
-      },
-      "attribute": "multi-selection",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "pageSelected": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "1"
-          }],
-        "text": "Current page number"
-      },
-      "attribute": "page-selected",
-      "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,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "false"
-          }],
-        "text": "Enables pagination"
-      },
-      "attribute": "pagination",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "rowsPerPage": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "undefined"
-          }],
-        "text": "Number of current rows per page"
-      },
-      "attribute": "rows-per-page",
-      "reflect": false
-    },
-    "scrollOnHover": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "false"
-          }],
-        "text": "Activates the scroll on hover function."
-      },
-      "attribute": "scroll-on-hover",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "selectBox": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "undefined"
-          }],
-        "text": "Automatically selects the box at the specified index"
-      },
-      "attribute": "select-box",
-      "reflect": false
-    },
-    "selectedRowsState": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "undefined"
-          }],
-        "text": "Multiple selection"
-      },
-      "attribute": "selected-rows-state",
-      "reflect": false
-    },
-    "showSelection": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "true"
-          }],
-        "text": "If enabled, highlights the selected box/boxes"
-      },
-      "attribute": "show-selection",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "sortBy": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "undefined"
-          }],
-        "text": "If sorting is enabled, specifies which column to sort"
-      },
-      "attribute": "sort-by",
-      "reflect": false
-    },
-    "sortEnabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "false"
-          }],
-        "text": "Enable sorting"
-      },
-      "attribute": "sort-enabled",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "stateId": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "state-id",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "store": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "KupStore",
-        "resolved": "KupStore",
-        "references": {
-          "KupStore": {
-            "location": "import",
-            "path": "../kup-state/kup-store"
+      "multiSelection": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Enable multi selection"
+        },
+        "attribute": "multi-selection",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "pageSelected": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "1"
+            }],
+          "text": "Current page number"
+        },
+        "attribute": "page-selected",
+        "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,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Enables pagination"
+        },
+        "attribute": "pagination",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "rowsPerPage": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "undefined"
+            }],
+          "text": "Number of current rows per page"
+        },
+        "attribute": "rows-per-page",
+        "reflect": false
+      },
+      "scrollOnHover": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Activates the scroll on hover function."
+        },
+        "attribute": "scroll-on-hover",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "selectBox": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "undefined"
+            }],
+          "text": "Automatically selects the box at the specified index"
+        },
+        "attribute": "select-box",
+        "reflect": false
+      },
+      "selectedRowsState": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "undefined"
+            }],
+          "text": "Multiple selection"
+        },
+        "attribute": "selected-rows-state",
+        "reflect": false
+      },
+      "showSelection": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "true"
+            }],
+          "text": "If enabled, highlights the selected box/boxes"
+        },
+        "attribute": "show-selection",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "sortBy": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "undefined"
+            }],
+          "text": "If sorting is enabled, specifies which column to sort"
+        },
+        "attribute": "sort-by",
+        "reflect": false
+      },
+      "sortEnabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Enable sorting"
+        },
+        "attribute": "sort-enabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "stateId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "state-id",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "store": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "KupStore",
+          "resolved": "KupStore",
+          "references": {
+            "KupStore": {
+              "location": "import",
+              "path": "../kup-state/kup-store"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "swipeDisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Disable swipe"
+        },
+        "attribute": "swipe-disabled",
+        "reflect": false,
+        "defaultValue": "false"
       }
-    },
-    "swipeDisabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "false"
-          }],
-        "text": "Disable swipe"
-      },
-      "attribute": "swipe-disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "collapsedSection": {},
-    "selectedRows": {},
-    "rowActionMenuOpened": {},
-    "currentPage": {},
-    "currentRowsPerPage": {}
-  }; }
-  static get events() { return [{
-      "method": "kupBoxClick",
-      "name": "kup-box-click",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Triggered when a box is clicked"
-      },
-      "complexType": {
-        "original": "KupBoxClickEventPayload",
-        "resolved": "KupBoxClickEventPayload",
-        "references": {
-          "KupBoxClickEventPayload": {
-            "location": "import",
-            "path": "./kup-box-declarations"
+    };
+  }
+  static get states() {
+    return {
+      "collapsedSection": {},
+      "selectedRows": {},
+      "rowActionMenuOpened": {},
+      "currentPage": {},
+      "currentRowsPerPage": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "kupBoxClick",
+        "name": "kup-box-click",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Triggered when a box is clicked"
+        },
+        "complexType": {
+          "original": "KupBoxClickEventPayload",
+          "resolved": "KupBoxClickEventPayload",
+          "references": {
+            "KupBoxClickEventPayload": {
+              "location": "import",
+              "path": "./kup-box-declarations"
+            }
           }
         }
-      }
-    }, {
-      "method": "kupBoxSelected",
-      "name": "kup-box-selected",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Triggered when the multi selection checkbox changes value"
-      },
-      "complexType": {
-        "original": "KupBoxSelectedEventPayload",
-        "resolved": "KupBoxSelectedEventPayload",
-        "references": {
-          "KupBoxSelectedEventPayload": {
-            "location": "import",
-            "path": "./kup-box-declarations"
+      }, {
+        "method": "kupBoxSelected",
+        "name": "kup-box-selected",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Triggered when the multi selection checkbox changes value"
+        },
+        "complexType": {
+          "original": "KupBoxSelectedEventPayload",
+          "resolved": "KupBoxSelectedEventPayload",
+          "references": {
+            "KupBoxSelectedEventPayload": {
+              "location": "import",
+              "path": "./kup-box-declarations"
+            }
           }
         }
-      }
-    }, {
-      "method": "kupAutoBoxSelect",
-      "name": "kup-box-autoselect",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Triggered when a box is auto selected via selectBox prop"
-      },
-      "complexType": {
-        "original": "KupBoxAutoSelectEventPayload",
-        "resolved": "KupBoxAutoSelectEventPayload",
-        "references": {
-          "KupBoxAutoSelectEventPayload": {
-            "location": "import",
-            "path": "./kup-box-declarations"
+      }, {
+        "method": "kupAutoBoxSelect",
+        "name": "kup-box-autoselect",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Triggered when a box is auto selected via selectBox prop"
+        },
+        "complexType": {
+          "original": "KupBoxAutoSelectEventPayload",
+          "resolved": "KupBoxAutoSelectEventPayload",
+          "references": {
+            "KupBoxAutoSelectEventPayload": {
+              "location": "import",
+              "path": "./kup-box-declarations"
+            }
           }
         }
-      }
-    }, {
-      "method": "kupRowActionMenuClick",
-      "name": "kup-box-rowactionmenuclick",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "When the row menu action icon is click"
-      },
-      "complexType": {
-        "original": "KupBoxAutoSelectEventPayload",
-        "resolved": "KupBoxAutoSelectEventPayload",
-        "references": {
-          "KupBoxAutoSelectEventPayload": {
-            "location": "import",
-            "path": "./kup-box-declarations"
+      }, {
+        "method": "kupRowActionMenuClick",
+        "name": "kup-box-rowactionmenuclick",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "When the row menu action icon is click"
+        },
+        "complexType": {
+          "original": "KupBoxAutoSelectEventPayload",
+          "resolved": "KupBoxAutoSelectEventPayload",
+          "references": {
+            "KupBoxAutoSelectEventPayload": {
+              "location": "import",
+              "path": "./kup-box-declarations"
+            }
           }
         }
-      }
-    }, {
-      "method": "kupRowActionClick",
-      "name": "kup-box-rowactionclick",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "When the row menu action icon is click"
-      },
-      "complexType": {
-        "original": "KupBoxRowActionClickEventPayload",
-        "resolved": "KupBoxRowActionClickEventPayload",
-        "references": {
-          "KupBoxRowActionClickEventPayload": {
-            "location": "import",
-            "path": "./kup-box-declarations"
+      }, {
+        "method": "kupRowActionClick",
+        "name": "kup-box-rowactionclick",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "When the row menu action icon is click"
+        },
+        "complexType": {
+          "original": "KupBoxRowActionClickEventPayload",
+          "resolved": "KupBoxRowActionClickEventPayload",
+          "references": {
+            "KupBoxRowActionClickEventPayload": {
+              "location": "import",
+              "path": "./kup-box-declarations"
+            }
           }
         }
-      }
-    }, {
-      "method": "kupDidLoad",
-      "name": "kup-box-didload",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "KupEventPayload",
-        "resolved": "KupEventPayload",
-        "references": {
-          "KupEventPayload": {
-            "location": "import",
-            "path": "../../types/GenericTypes"
+      }, {
+        "method": "kupDidLoad",
+        "name": "kup-box-didload",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "KupEventPayload",
+          "resolved": "KupEventPayload",
+          "references": {
+            "KupEventPayload": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
           }
         }
-      }
-    }, {
-      "method": "kupDidUnload",
-      "name": "kup-box-didunload",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Triggered when stop propagation event"
-      },
-      "complexType": {
-        "original": "KupEventPayload",
-        "resolved": "KupEventPayload",
-        "references": {
-          "KupEventPayload": {
-            "location": "import",
-            "path": "../../types/GenericTypes"
+      }, {
+        "method": "kupDidUnload",
+        "name": "kup-box-didunload",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Triggered when stop propagation event"
+        },
+        "complexType": {
+          "original": "KupEventPayload",
+          "resolved": "KupEventPayload",
+          "references": {
+            "KupEventPayload": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
           }
         }
-      }
-    }, {
-      "method": "kupBoxContextMenu",
-      "name": "kup-box-contextmenu",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Generic right click event on box."
-      },
-      "complexType": {
-        "original": "KupBoxContextMenuEventPayload",
-        "resolved": "KupBoxContextMenuEventPayload",
-        "references": {
-          "KupBoxContextMenuEventPayload": {
-            "location": "import",
-            "path": "./kup-box-declarations"
+      }, {
+        "method": "kupBoxContextMenu",
+        "name": "kup-box-contextmenu",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Generic right click event on box."
+        },
+        "complexType": {
+          "original": "KupBoxContextMenuEventPayload",
+          "resolved": "KupBoxContextMenuEventPayload",
+          "references": {
+            "KupBoxContextMenuEventPayload": {
+              "location": "import",
+              "path": "./kup-box-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."
-          }]
-      }
-    },
-    "loadRowActions": {
-      "complexType": {
-        "signature": "(row: KupBoxRow, actions: KupDataRowAction[]) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }, {
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "KupBoxRow": {
-            "location": "import",
-            "path": "./kup-box-declarations"
+      "loadRowActions": {
+        "complexType": {
+          "signature": "(row: KupBoxRow, actions: KupDataRowAction[]) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "KupBoxRow": {
+              "location": "import",
+              "path": "./kup-box-declarations"
+            },
+            "KupDataRowAction": {
+              "location": "import",
+              "path": "../../managers/kup-data/kup-data-declarations"
+            }
           },
-          "KupDataRowAction": {
-            "location": "import",
-            "path": "../../managers/kup-data/kup-data-declarations"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "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": "pageSize",
-      "methodName": "rowsPerPageHandler"
-    }, {
-      "propName": "globalFilterValue",
-      "methodName": "recalculateRows"
-    }, {
-      "propName": "sortBy",
-      "methodName": "recalculateRows"
-    }, {
-      "propName": "pagination",
-      "methodName": "recalculateRows"
-    }, {
-      "propName": "pageSize",
-      "methodName": "recalculateRows"
-    }, {
-      "propName": "currentPage",
-      "methodName": "recalculateRows"
-    }, {
-      "propName": "currentRowsPerPage",
-      "methodName": "recalculateRows"
-    }, {
-      "propName": "data",
-      "methodName": "onDataChanged"
-    }, {
-      "propName": "layout",
-      "methodName": "onLayoutChanged"
-    }, {
-      "propName": "selectBox",
-      "methodName": "onSelectBoxChanged"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "pageSize",
+        "methodName": "rowsPerPageHandler"
+      }, {
+        "propName": "globalFilterValue",
+        "methodName": "recalculateRows"
+      }, {
+        "propName": "sortBy",
+        "methodName": "recalculateRows"
+      }, {
+        "propName": "pagination",
+        "methodName": "recalculateRows"
+      }, {
+        "propName": "pageSize",
+        "methodName": "recalculateRows"
+      }, {
+        "propName": "currentPage",
+        "methodName": "recalculateRows"
+      }, {
+        "propName": "currentRowsPerPage",
+        "methodName": "recalculateRows"
+      }, {
+        "propName": "data",
+        "methodName": "onDataChanged"
+      }, {
+        "propName": "layout",
+        "methodName": "onLayoutChanged"
+      }, {
+        "propName": "selectBox",
+        "methodName": "onSelectBoxChanged"
+      }];
+  }
 }