@sme.up/ketchup 9.2.0 → 9.3.0

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

@@ -1,18 +1,18 @@
 var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-  if (kind === "a" && !f)
-    throw new TypeError("Private accessor was defined without a getter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-    throw new TypeError("Cannot read private member from an object whose class did not declare it");
-  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-  if (kind === "m")
-    throw new TypeError("Private method is not writable");
-  if (kind === "a" && !f)
-    throw new TypeError("Private accessor was defined without a setter");
-  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
-    throw new TypeError("Cannot write private member to an object whose class did not declare it");
-  return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
 var _KupBox_instances, _KupBox_intObserver, _KupBox_rowsRefs, _KupBox_navBarHeight, _KupBox_didRenderObservers, _KupBox_setObserver;
 import { forceUpdate, h, Host, } from "@stencil/core";
@@ -36,2128 +36,2128 @@ import { FPaginatorMode } from "../../f-components/f-paginator/f-paginator-decla
 import { pageChange, rowsPerPageChange, } from "../../f-components/f-paginator/f-paginator-utils";
 import { FTextFieldMDC } from "../../f-components/f-text-field/f-text-field-mdc";
 export class KupBox {
-  constructor() {
-    _KupBox_instances.add(this);
-    this.state = new KupBoxState();
-    /*-------------------------------------------------*/
-    /*       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 = [];
-    _KupBox_intObserver.set(this, undefined);
-    _KupBox_rowsRefs.set(this, []);
-    _KupBox_navBarHeight.set(this, 0);
-    this.collapsedSection = {};
-    this.selectedRows = [];
-    this.rowActionMenuOpened = undefined;
-    this.currentPage = 1;
-    this.currentRowsPerPage = 10;
-    this.cardData = null;
-    this.columns = 1;
-    this.customStyle = '';
-    this.data = null;
-    this.dragEnabled = false;
-    this.dropEnabled = false;
-    this.dropOnSection = false;
-    this.editableData = false;
-    this.enableRowActions = false;
-    this.globalFilter = false;
-    this.globalFilterValue = '';
-    this.kanban = null;
-    this.layout = undefined;
-    this.lazyLoadRows = false;
-    this.multiSelection = false;
-    this.pageSelected = 1;
-    this.pagination = false;
-    this.rowsPerPage = undefined;
-    this.scrollOnHover = false;
-    this.selectBox = undefined;
-    this.selectedRowsState = undefined;
-    this.showSelection = true;
-    this.sortBy = undefined;
-    this.sortEnabled = false;
-    this.stateId = '';
-    this.store = undefined;
-    this.swipeDisabled = false;
-  }
-  initWithPersistedState() {
-    if (this.store && this.stateId) {
-      const state = this.store.getState(this.stateId);
-      if (state != null) {
-        this.kupManager.debug.logMessage(this, 'Initialize with state for stateId ' +
-          this.stateId +
-          ': ' +
-          state);
-        // *** PROPS ***
-        this.sortBy = this.state.sortBy;
-        this.globalFilterValue = this.state.globalFilterValue;
-        this.selectedRowsState = this.state.selectedRowsState;
-        this.pageSelected = this.state.pageSelected;
-        this.rowsPerPage = this.state.rowsPerPage;
-      }
-    }
-  }
-  persistState() {
-    if (this.store && this.stateId) {
-      let somethingChanged = false;
-      if (!this.kupManager.objects.deepEqual(this.state.sortBy, this.sortBy)) {
-        this.state.sortBy = this.sortBy;
-        somethingChanged = true;
-      }
-      if (!this.kupManager.objects.deepEqual(this.state.globalFilterValue, this.globalFilterValue)) {
-        this.state.globalFilterValue = this.globalFilterValue;
-        somethingChanged = true;
-      }
-      if (!this.kupManager.objects.deepEqual(this.state.pageSelected, this.currentPage)) {
-        this.state.pageSelected = this.currentPage;
-        somethingChanged = true;
-      }
-      if (!this.kupManager.objects.deepEqual(this.state.rowsPerPage, this.currentRowsPerPage)) {
-        this.state.rowsPerPage = this.currentRowsPerPage;
-        somethingChanged = true;
-      }
-      const selectedRowsState = this.selectedRows.reduce((accumulator, row, currentIndex) => {
-        const prefix = currentIndex > 0 ? ';' : '';
-        return accumulator + prefix + row.id;
-      }, '');
-      if (!this.kupManager.objects.deepEqual(this.state.selectedRowsState, selectedRowsState)) {
-        this.state.selectedRowsState = selectedRowsState;
-        somethingChanged = true;
-      }
-      if (!this.state.load) {
-        this.state.load = true;
-        return;
-      }
-      if (somethingChanged) {
-        this.kupManager.debug.logMessage(this, 'Persisting state for stateId ' +
-          this.stateId +
-          ': ' +
-          this.state);
-        this.store.persistState(this.stateId, this.state);
-      }
-    }
-  }
-  /*-------------------------------------------------*/
-  /*                  W a t c h e r s                */
-  /*-------------------------------------------------*/
-  rowsPerPageHandler(newValue) {
-    this.currentRowsPerPage = newValue;
-  }
-  recalculateRows() {
-    this.initRows();
-  }
-  onDataChanged() {
-    identify(this.getRows());
-    this.initVisibleColumns();
-    this.initRows();
-    this.checkLayout();
-  }
-  onLayoutChanged() {
-    this.checkLayout();
-  }
-  onSelectBoxChanged() {
-    this.handleAutomaticBoxSelection();
-  }
-  /*-------------------------------------------------*/
-  /*           P u b l i c   M e t h o d s           */
-  /*-------------------------------------------------*/
-  /**
-   * Used to retrieve component's props values.
-   * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
-   * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
-   */
-  async getProps(descriptions) {
-    return getProps(this, KupBoxProps, descriptions);
-  }
-  async loadRowActions(row, actions) {
-    row.actions = actions;
-    // show menu
-    this.rowActionMenuOpened = row;
-  }
-  /**
-   * This method is used to trigger a new render of the component.
-   */
-  async refresh() {
-    forceUpdate(this);
-  }
-  /**
-   * Sets the props to the component.
-   * @param {GenericObject} props - Object containing props that will be set to the component.
-   */
-  async setProps(props) {
-    setProps(this, KupBoxProps, props);
-  }
-  /*-------------------------------------------------*/
-  /*           P r i v a t e   M e t h o d s         */
-  /*-------------------------------------------------*/
-  getColumns() {
-    return this.data && this.data.columns
-      ? this.data.columns
-      : [{ title: '', name: '', size: undefined }];
-  }
-  initVisibleColumns() {
-    this.visibleColumns = this.getColumns().filter((column) => {
-      if (column.hasOwnProperty('visible')) {
-        return column.visible;
-      }
-      return true;
-    });
-  }
-  getRows() {
-    return this.data && this.data.rows ? this.data.rows : [];
-  }
-  initRows() {
-    this.filteredRows = this.getRows();
-    if (this.globalFilter && this.globalFilterValue) {
-      // filtering rows
-      this.filteredRows = filterRows(this.filteredRows, null, this.globalFilterValue, this.visibleColumns);
-    }
-    this.rows = this.sortRows(this.filteredRows);
-    if (this.pagination) {
-      this.rows = paginateRows(this.rows, this.currentPage, this.currentRowsPerPage, false);
-    }
-  }
-  sortRows(rows) {
-    let sortedRows = rows;
-    if (this.sortBy) {
-      sortedRows = sortRows(sortedRows, this.toSortObjectList());
-    }
-    return sortedRows;
-  }
-  toSortObjectList() {
-    const sortByArray = this.sortBy.split('|').map((col) => {
-      const colNameAndSortMode = col.split(',');
-      const sortObject = {
-        column: colNameAndSortMode[0],
-        sortMode: colNameAndSortMode.length > 1
-          ? SortMode[colNameAndSortMode[1]]
-          : SortMode.A,
-      };
-      return sortObject;
-    });
-    return sortByArray;
-  }
-  checkScrollOnHover() {
-    if (!this.kupManager.scrollOnHover.isRegistered(this.boxContainer)) {
-      if (this.scrollOnHover) {
-        this.kupManager.scrollOnHover.register(this.boxContainer);
-      }
-    }
-    else {
-      if (!this.scrollOnHover) {
-        this.kupManager.scrollOnHover.unregister(this.boxContainer);
-      }
-    }
-  }
-  checkLayout() {
-    // check if there is a layout.
-    // if not, create a default layout
-    if (this.layout) {
-      this.boxLayout = this.layout;
-      return;
-    }
-    // only one section, containing all visible fields
-    const section = {
-      horizontal: false,
-      sections: [],
-    };
-    // adding box objects to section
-    const visibleColumns = this.visibleColumns;
-    let size = visibleColumns.length;
-    let content = [];
-    let cnt = 0;
-    while (size-- > 0) {
-      content.push({
-        column: visibleColumns[cnt++].name,
-      });
-    }
-    section.content = content;
-    // creating a new layout
-    this.boxLayout = {
-      sections: [section],
-    };
-  }
-  onSortChange(e) {
-    let column = getColumnByName(this.visibleColumns, e.detail.value);
-    this.sortBy = column.name;
-  }
-  onGlobalFilterChange({ detail }) {
-    let value = '';
-    if (detail && detail.value) {
-      value = detail.value;
-    }
-    this.globalFilterValue = value;
-  }
-  isSectionExpanded(row, section) {
-    if (!row.id || !section.id) {
-      return false;
-    }
-    return (this.collapsedSection[section.id] &&
-      this.collapsedSection[section.id][row.id]);
-  }
-  handleAutomaticBoxSelection() {
-    if (this.selectBox &&
-      this.selectBox > 0 &&
-      this.selectBox <= this.data.rows.length) {
-      this.selectedRows = [];
-      for (let boxRow of this.data.rows) {
-        if (boxRow.id === (this.selectBox - 1).toString()) {
-          this.selectedRows.push(boxRow);
-          break;
-        }
-      }
-      this.kupAutoBoxSelect.emit({
-        comp: this,
-        id: this.rootElement.id,
-        row: this.selectedRows[0],
-      });
-    }
-  }
-  getEventDetails(el, e) {
-    let boxObject = null;
-    let cell = null;
-    let row = null;
-    let column = null;
-    if (el) {
-      boxObject =
-        el.closest('.box-object') ||
-          el.querySelector('.box-object') ||
-          el.closest('.f-cell');
-    }
-    if (boxObject) {
-      if (boxObject.classList.contains('f-cell')) {
-        const props = boxObject['kup-get-cell-props']();
-        cell = props.cell;
-        column = props.column;
-        row = props.row;
-      }
-      else {
-        cell = boxObject['data-cell'];
-        row = boxObject['data-row'];
-        column = getColumnByName(this.visibleColumns, boxObject.dataset.column);
-      }
-    }
-    else {
-    }
-    return {
-      boxObject: boxObject ? boxObject : null,
-      column: column ? column : null,
-      cell: cell ? cell : null,
-      originalEvent: e,
-      row: row ? row : null,
-    };
-  }
-  contextMenuHandler(e) {
-    const details = this.getEventDetails(e.target, e);
-    return details;
-  }
-  /**
-   * Checks if the element is the svg that opens the "row actions menu"
-   * @param element the element to check
-   */
-  checkIfElementIsActionMenuIcon(element) {
-    if (element.tagName && element.parentElement) {
-      return (element.tagName === 'svg' &&
-        element.parentElement.classList.contains('row-actions-toggler'));
-    }
-    return false;
-  }
-  // event listeners
-  onBoxClick({ target }, row) {
-    if (!(target instanceof HTMLElement)) {
-      return;
-    }
-    // searching parent
-    let element = target;
-    let classList = element.classList;
-    while (!classList.contains('box-object') &&
-      !classList.contains('box-section') &&
-      !classList.contains('box')) {
-      element = element.parentElement;
-      if (element === null) {
-        break;
-      }
-      classList = element.classList;
-    }
-    // evaluating column
-    let column = null;
-    if (classList.contains('box-object')) {
-      column = element.dataset.column;
-    }
-    this.kupBoxClick.emit({
-      comp: this,
-      id: this.rootElement.id,
-      row,
-      column,
-    });
-    // selecting box
-    if (this.multiSelection) {
-      // triggering multi selection
-      this.onSelectionCheckChange(row);
-    }
-    else {
-      this.selectedRows = [row];
+    constructor() {
+        _KupBox_instances.add(this);
+        this.state = new KupBoxState();
+        /*-------------------------------------------------*/
+        /*       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 = [];
+        _KupBox_intObserver.set(this, undefined);
+        _KupBox_rowsRefs.set(this, []);
+        _KupBox_navBarHeight.set(this, 0);
+        this.collapsedSection = {};
+        this.selectedRows = [];
+        this.rowActionMenuOpened = undefined;
+        this.currentPage = 1;
+        this.currentRowsPerPage = 10;
+        this.cardData = null;
+        this.columns = 1;
+        this.customStyle = '';
+        this.data = null;
+        this.dragEnabled = false;
+        this.dropEnabled = false;
+        this.dropOnSection = false;
+        this.editableData = false;
+        this.enableRowActions = false;
+        this.globalFilter = false;
+        this.globalFilterValue = '';
+        this.kanban = null;
+        this.layout = undefined;
+        this.lazyLoadRows = false;
+        this.multiSelection = false;
+        this.pageSelected = 1;
+        this.pagination = false;
+        this.rowsPerPage = undefined;
+        this.scrollOnHover = false;
+        this.selectBox = undefined;
+        this.selectedRowsState = undefined;
+        this.showSelection = true;
+        this.sortBy = undefined;
+        this.sortEnabled = false;
+        this.stateId = '';
+        this.store = undefined;
+        this.swipeDisabled = false;
+    }
+    initWithPersistedState() {
+        if (this.store && this.stateId) {
+            const state = this.store.getState(this.stateId);
+            if (state != null) {
+                this.kupManager.debug.logMessage(this, 'Initialize with state for stateId ' +
+                    this.stateId +
+                    ': ' +
+                    state);
+                // *** PROPS ***
+                this.sortBy = this.state.sortBy;
+                this.globalFilterValue = this.state.globalFilterValue;
+                this.selectedRowsState = this.state.selectedRowsState;
+                this.pageSelected = this.state.pageSelected;
+                this.rowsPerPage = this.state.rowsPerPage;
+            }
+        }
     }
-  }
-  onSelectionCheckChange(row) {
-    var index = -1;
-    for (let i = 0; i < this.selectedRows.length; i++) {
-      const select = this.selectedRows[i];
-      if (select.id === row.id) {
-        index = i;
-        break;
-      }
+    persistState() {
+        if (this.store && this.stateId) {
+            let somethingChanged = false;
+            if (!this.kupManager.objects.deepEqual(this.state.sortBy, this.sortBy)) {
+                this.state.sortBy = this.sortBy;
+                somethingChanged = true;
+            }
+            if (!this.kupManager.objects.deepEqual(this.state.globalFilterValue, this.globalFilterValue)) {
+                this.state.globalFilterValue = this.globalFilterValue;
+                somethingChanged = true;
+            }
+            if (!this.kupManager.objects.deepEqual(this.state.pageSelected, this.currentPage)) {
+                this.state.pageSelected = this.currentPage;
+                somethingChanged = true;
+            }
+            if (!this.kupManager.objects.deepEqual(this.state.rowsPerPage, this.currentRowsPerPage)) {
+                this.state.rowsPerPage = this.currentRowsPerPage;
+                somethingChanged = true;
+            }
+            const selectedRowsState = this.selectedRows.reduce((accumulator, row, currentIndex) => {
+                const prefix = currentIndex > 0 ? ';' : '';
+                return accumulator + prefix + row.id;
+            }, '');
+            if (!this.kupManager.objects.deepEqual(this.state.selectedRowsState, selectedRowsState)) {
+                this.state.selectedRowsState = selectedRowsState;
+                somethingChanged = true;
+            }
+            if (!this.state.load) {
+                this.state.load = true;
+                return;
+            }
+            if (somethingChanged) {
+                this.kupManager.debug.logMessage(this, 'Persisting state for stateId ' +
+                    this.stateId +
+                    ': ' +
+                    this.state);
+                this.store.persistState(this.stateId, this.state);
+            }
+        }
     }
-    if (index >= 0) {
-      // remove row
-      this.selectedRows.splice(index, 1);
-      this.selectedRows = [...this.selectedRows];
+    /*-------------------------------------------------*/
+    /*                  W a t c h e r s                */
+    /*-------------------------------------------------*/
+    rowsPerPageHandler(newValue) {
+        this.currentRowsPerPage = newValue;
     }
-    else {
-      // add row
-      this.selectedRows = [...this.selectedRows, row];
+    recalculateRows() {
+        this.initRows();
     }
-    this.kupBoxSelected.emit({
-      comp: this,
-      id: this.rootElement.id,
-      rows: this.selectedRows,
-    });
-  }
-  toggleSectionExpand(row, section) {
-    // check if section / row has id
-    if (!section.id) {
-      // error
-      console.error('cannot expand / collapse a section withoun an ID');
-      return;
+    onDataChanged() {
+        identify(this.getRows());
+        this.initVisibleColumns();
+        this.initRows();
+        this.checkLayout();
     }
-    if (!row.id) {
-      // error
-      console.error('cannot expand / collapse a section of a row without ad id');
-      return;
+    onLayoutChanged() {
+        this.checkLayout();
     }
-    // check if section already in collapsedSection
-    if (!this.collapsedSection[section.id]) {
-      // adding element and row, setting it to expanded
-      this.collapsedSection[section.id] = {};
-      this.collapsedSection[section.id][row.id] = true;
+    onSelectBoxChanged() {
+        this.handleAutomaticBoxSelection();
     }
-    else {
-      const s = this.collapsedSection[section.id];
-      if (!s[row.id]) {
-        s[row.id] = true;
-      }
-      else {
-        s[row.id] = !s[row.id];
-      }
+    /*-------------------------------------------------*/
+    /*           P u b l i c   M e t h o d s           */
+    /*-------------------------------------------------*/
+    /**
+     * Used to retrieve component's props values.
+     * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
+     * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
+     */
+    async getProps(descriptions) {
+        return getProps(this, KupBoxProps, descriptions);
     }
-    // triggering rendering
-    this.collapsedSection = Object.assign({}, this.collapsedSection);
-  }
-  onRowAction(row) {
-    if (!row) {
-      return;
+    async loadRowActions(row, actions) {
+        row.actions = actions;
+        // show menu
+        this.rowActionMenuOpened = row;
     }
-    if (row === this.rowActionMenuOpened) {
-      // closing menu
-      this.rowActionMenuOpened = null;
-      return;
+    /**
+     * This method is used to trigger a new render of the component.
+     */
+    async refresh() {
+        forceUpdate(this);
     }
-    if (row.actions) {
-      // actions already loaded -> show menu
-      this.rowActionMenuOpened = row;
+    /**
+     * Sets the props to the component.
+     * @param {GenericObject} props - Object containing props that will be set to the component.
+     */
+    async setProps(props) {
+        setProps(this, KupBoxProps, props);
     }
-    else {
-      // no actions -> triggering event
-      this.kupRowActionMenuClick.emit({
-        comp: this,
-        id: this.rootElement.id,
-        row,
-      });
+    /*-------------------------------------------------*/
+    /*           P r i v a t e   M e t h o d s         */
+    /*-------------------------------------------------*/
+    getColumns() {
+        return this.data && this.data.columns
+            ? this.data.columns
+            : [{ title: '', name: '', size: undefined }];
+    }
+    initVisibleColumns() {
+        this.visibleColumns = this.getColumns().filter((column) => {
+            if (column.hasOwnProperty('visible')) {
+                return column.visible;
+            }
+            return true;
+        });
     }
-  }
-  onRowActionClick(row, action, index) {
-    this.kupRowActionClick.emit({
-      comp: this,
-      id: this.rootElement.id,
-      row,
-      action,
-      index,
-    });
-  }
-  /**
-   * see onDocumentClick in kup-combo
-   */
-  clickFunction(event) {
-    try {
-      const targets = event.composedPath();
-      for (let target of targets) {
-        if (this.checkIfElementIsActionMenuIcon(target)) {
-          return;
-        }
-      }
+    getRows() {
+        return this.data && this.data.rows ? this.data.rows : [];
     }
-    catch (err) {
-      if (this.checkIfElementIsActionMenuIcon(event.target)) {
-        return;
-      }
+    initRows() {
+        this.filteredRows = this.getRows();
+        if (this.globalFilter && this.globalFilterValue) {
+            // filtering rows
+            this.filteredRows = filterRows(this.filteredRows, null, this.globalFilterValue, this.visibleColumns);
+        }
+        this.rows = this.sortRows(this.filteredRows);
+        if (this.pagination) {
+            this.rows = paginateRows(this.rows, this.currentPage, this.currentRowsPerPage, false);
+        }
     }
-    this.rowActionMenuOpened = null;
-  }
-  handlePageChange(pageNumber) {
-    const newPage = pageChange(pageNumber, this.filteredRows.length, this.currentRowsPerPage);
-    if (newPage) {
-      this.currentPage = newPage;
+    sortRows(rows) {
+        let sortedRows = rows;
+        if (this.sortBy) {
+            sortedRows = sortRows(sortedRows, this.toSortObjectList());
+        }
+        return sortedRows;
+    }
+    toSortObjectList() {
+        const sortByArray = this.sortBy.split('|').map((col) => {
+            const colNameAndSortMode = col.split(',');
+            const sortObject = {
+                column: colNameAndSortMode[0],
+                sortMode: colNameAndSortMode.length > 1
+                    ? SortMode[colNameAndSortMode[1]]
+                    : SortMode.A,
+            };
+            return sortObject;
+        });
+        return sortByArray;
     }
-  }
-  handleRowsPerPageChange(rowsNumber) {
-    const newRows = rowsPerPageChange(rowsNumber, this.filteredRows.length);
-    if (newRows) {
-      this.currentRowsPerPage = newRows;
-      this.adjustPaginator();
+    checkScrollOnHover() {
+        if (!this.kupManager.scrollOnHover.isRegistered(this.boxContainer)) {
+            if (this.scrollOnHover) {
+                this.kupManager.scrollOnHover.register(this.boxContainer);
+            }
+        }
+        else {
+            if (!this.scrollOnHover) {
+                this.kupManager.scrollOnHover.unregister(this.boxContainer);
+            }
+        }
     }
-  }
-  adjustPaginator() {
-    const numberOfRows = this.rows.length;
-    // check if current page is valid
-    const numberOfPages = Math.ceil(numberOfRows / this.currentRowsPerPage);
-    if (this.currentPage > numberOfPages) {
-      // reset page
-      this.currentPage = 1;
+    checkLayout() {
+        // check if there is a layout.
+        // if not, create a default layout
+        if (this.layout) {
+            this.boxLayout = this.layout;
+            return;
+        }
+        // only one section, containing all visible fields
+        const section = {
+            horizontal: false,
+            sections: [],
+        };
+        // adding box objects to section
+        const visibleColumns = this.visibleColumns;
+        let size = visibleColumns.length;
+        let content = [];
+        let cnt = 0;
+        while (size-- > 0) {
+            content.push({
+                column: visibleColumns[cnt++].name,
+            });
+        }
+        section.content = content;
+        // creating a new layout
+        this.boxLayout = {
+            sections: [section],
+        };
     }
-  }
-  // render methods
-  renderSectionAsCard(row) {
-    let skipPush = false;
-    const cardData = {
-      button: [],
-      cell: [],
-      columns: [],
-      image: [],
-      progressbar: [],
-      text: [],
-    };
-    for (let index = 0; index < this.data.columns.length; index++) {
-      const column = this.data.columns[index];
-      if (column.visible !== false) {
-        cardData.cell.push(row.cells[column.name]);
-        cardData.columns.push(column);
-      }
+    onSortChange(e) {
+        let column = getColumnByName(this.visibleColumns, e.detail.value);
+        this.sortBy = column.name;
     }
-    //First cycle sets specific binds between cardIDs and cells
-    for (const key in row.cells) {
-      if (row.cells.hasOwnProperty(key)) {
-        const cell = row.cells[key];
-        if (cell.cardID !== undefined && cell.obj) {
-          switch (cell.obj.p) {
-            case 'BTN':
-              do {
-                cardData.button.push({});
-              } while (cardData.button.length < cell.cardID);
-              cardData.button[cell.cardID] = {
-                label: cell.value,
-              };
-              break;
-            case 'IMG':
-              do {
-                cardData.image.push({});
-              } while (cardData.image.length < cell.cardID);
-              cardData.image[cell.cardID] = {
-                resource: cell.value,
-              };
-              break;
-            case 'PGB':
-              do {
-                cardData.progressbar.push({});
-              } while (cardData.progressbar.length < cell.cardID);
-              cardData.progressbar[cell.cardID] = {
-                value: cell.value,
-              };
-              break;
-            default:
-              do {
-                cardData.text.push('');
-              } while (cardData.text.length < cell.cardID);
-              cardData.text[cell.cardID] = cell.value;
-              break;
-          }
-        }
-      }
+    onGlobalFilterChange({ detail }) {
+        let value = '';
+        if (detail && detail.value) {
+            value = detail.value;
+        }
+        this.globalFilterValue = value;
     }
-    //Second cycle sets leftover binds automatically
-    for (const key in row.cells) {
-      if (row.cells.hasOwnProperty(key)) {
-        const cell = row.cells[key];
-        if (cell.cardID === undefined && cell.obj) {
-          skipPush = false;
-          switch (cell.obj.p) {
-            case 'BTN':
-              for (let index = 0; index < cardData.button.length; index++) {
-                //If there are empty elements, the first one will be used
-                if (!Object.keys(cardData.button[index]).length) {
-                  cardData.button[index] = {
-                    label: cell.value,
-                  };
-                  skipPush = true;
-                  break;
-                }
-              }
-              //Otherwise a new element will be pushed
-              if (!skipPush) {
-                cardData.button.push({
-                  label: cell.value,
-                });
-              }
-              break;
-            case 'IMG':
-              for (let index = 0; index < cardData.image.length; index++) {
-                //If there are empty elements, the first one will be used
-                if (!Object.keys(cardData.image[index]).length) {
-                  cardData.image[index] = {
-                    resource: cell.value,
-                  };
-                  skipPush = true;
-                  break;
-                }
-              }
-              //Otherwise a new element will be pushed
-              if (!skipPush) {
-                cardData.image.push({
-                  resource: cell.value,
-                });
-              }
-              break;
-            case 'PGB':
-              for (let index = 0; index < cardData.progressbar.length; index++) {
-                //If there are empty elements, the first one will be used
-                if (!Object.keys(cardData.progressbar[index])
-                  .length) {
-                  cardData.progressbar[index] = {
-                    value: cell.value,
-                  };
-                  skipPush = true;
-                  break;
-                }
-              }
-              //Otherwise a new element will be pushed
-              if (!skipPush) {
-                cardData.progressbar.push({
-                  value: cell.value,
-                });
-              }
-              break;
-            default:
-              for (let index = 0; index < cardData.text.length; index++) {
-                //If there are empty elements, the first one will be used
-                if (cardData.text[index] === '') {
-                  cardData.text[index] = cell.value;
-                  skipPush = true;
-                  break;
+    isSectionExpanded(row, section) {
+        if (!row.id || !section.id) {
+            return false;
+        }
+        return (this.collapsedSection[section.id] &&
+            this.collapsedSection[section.id][row.id]);
+    }
+    handleAutomaticBoxSelection() {
+        if (this.selectBox &&
+            this.selectBox > 0 &&
+            this.selectBox <= this.data.rows.length) {
+            this.selectedRows = [];
+            for (let boxRow of this.data.rows) {
+                if (boxRow.id === (this.selectBox - 1).toString()) {
+                    this.selectedRows.push(boxRow);
+                    break;
                 }
-              }
-              //Otherwise a new element will be pushed
-              if (!skipPush) {
-                cardData.text.push(cell.value);
-              }
-              break;
-          }
-        }
-      }
-    }
-    return h("kup-card", Object.assign({ data: cardData }, this.cardData));
-  }
-  renderRow(row) {
-    const visibleColumns = [...this.visibleColumns];
-    let boxContent = null;
-    // if layout in row, use that one
-    let rowLayout = row.layout;
-    if (!rowLayout) {
-      // otherwise, use 'default' layout
-      rowLayout = this.boxLayout;
+            }
+            this.kupAutoBoxSelect.emit({
+                comp: this,
+                id: this.rootElement.id,
+                row: this.selectedRows[0],
+            });
+        }
     }
-    let horizontal = false;
-    if (rowLayout) {
-      if (rowLayout.horizontal) {
-        horizontal = true;
-      }
-      const sections = rowLayout.sections;
-      let size = sections.length;
-      let cnt = 0;
-      if (size > 0) {
-        boxContent = [];
-      }
-      // create fake parent section
-      const parent = {
-        horizontal: horizontal,
-      };
-      while (size-- > 0) {
-        if (this.cardData !== null &&
-          this.cardData !== undefined &&
-          typeof this.cardData === 'object') {
-          boxContent.push(this.renderSectionAsCard(row));
+    getEventDetails(el, e) {
+        let boxObject = null;
+        let cell = null;
+        let row = null;
+        let column = null;
+        if (el) {
+            boxObject =
+                el.closest('.box-object') ||
+                    el.querySelector('.box-object') ||
+                    el.closest('.f-cell');
+        }
+        if (boxObject) {
+            if (boxObject.classList.contains('f-cell')) {
+                const props = boxObject['kup-get-cell-props']();
+                cell = props.cell;
+                column = props.column;
+                row = props.row;
+            }
+            else {
+                cell = boxObject['data-cell'];
+                row = boxObject['data-row'];
+                column = getColumnByName(this.visibleColumns, boxObject.dataset.column);
+            }
         }
         else {
-          boxContent.push(this.renderSection(sections[cnt++], parent, row, visibleColumns));
         }
-      }
-    }
-    var isSelected = false;
-    for (let select of this.selectedRows) {
-      if (select.id === row.id) {
-        isSelected = true;
-      }
-    }
-    let multiSel = null;
-    if (this.multiSelection) {
-      multiSel = (h("div", { class: "box-selection" }, h("kup-checkbox", { checked: isSelected })));
-    }
-    let rowObject = null;
-    if (this.enableRowActions && !this.swipeDisabled) {
-      const menuClass = {
-        'row-action-menu': true,
-        open: row === this.rowActionMenuOpened,
-      };
-      let rowActionMenuContent = null;
-      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)));
-        });
-        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))));
-    }
-    let badges = null;
-    if (row.badgeData && row.badgeData.length > 0) {
-      badges = row.badgeData.map((badge) => (h("kup-badge", { text: badge.text, class: badge['className']
-          ? `centered ${badge['className']}`
-          : 'centered', imageData: badge.imageData })));
-    }
-    const boxClass = {
-      box: true,
-      draggable: this.dragEnabled,
-      selected: this.showSelection && isSelected,
-      column: !horizontal,
-    };
-    const rowStyle = row.style || {};
-    return (h("div", { class: "box-wrapper", style: rowStyle, ref: (el) => __classPrivateFieldGet(this, _KupBox_rowsRefs, "f").push(el) }, 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;
-    if (section.sections && section.sections.length > 0) {
-      // rendering child
-      const sections = section.sections;
-      let size = sections.length;
-      let cnt = 0;
-      if (size > 0) {
-        sectionContent = [];
-      }
-      while (size-- > 0) {
-        sectionContent.push(this.renderSection(sections[cnt++], section, row, visibleColumns));
-      }
-    }
-    else if (section.content) {
-      // rendering box objects
-      const content = section.content;
-      let size = content.length;
-      let cnt = 0;
-      if (size > 0) {
-        sectionContent = [];
-      }
-      while (size-- > 0) {
-        sectionContent.push(this.renderBoxObject({
-          boxObject: content[cnt++],
-          row,
-          visibleColumns,
-        }, true));
-      }
-    }
-    else if (visibleColumns.length > 0) {
-      const column = visibleColumns[0];
-      sectionContent = this.renderBoxObject({
-        boxObject: { column: column.name },
-        row,
-        visibleColumns,
-      });
-    }
-    const sectionExpanded = this.isSectionExpanded(row, section);
-    const isGrid = !!section.columns;
-    const sectionClass = {
-      'box-section': true,
-      open: sectionExpanded,
-      column: !isGrid && !section.horizontal,
-      grid: isGrid,
-      titled: !!section.title,
-      'last-child': !section.sections || section.sections.length === 0,
-    };
-    const sectionStyle = section.style || {};
-    if (section.dim && parent) {
-      sectionStyle.flex = `0 0 ${section.dim}`;
-      sectionStyle.overflow = 'hidden';
-      if (parent.horizontal) {
-        sectionStyle.maxWidth = section.dim;
-      }
-      else {
-        sectionStyle.maxHeight = section.dim;
-      }
-    }
-    if (isGrid) {
-      sectionStyle['grid-template-columns'] = `repeat(${section.columns}, 1fr)`;
-    }
-    let sectionContainer = null;
-    if (section.collapsible) {
-      sectionClass['collapse-section'] = true;
-      const contentClass = {
-        content: true,
-      };
-      // TODO I18N
-      let headerTitle = '';
-      if (section.title) {
-        headerTitle = section.title;
-      }
-      else if (sectionExpanded) {
-        headerTitle = this.kupManager.language.translate(KupLanguageGeneric.COLLAPSE);
-      }
-      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' : '' })))));
-    }
-    else {
-      const title = section.title ? h("h3", null, section.title) : null;
-      sectionContainer = (h("div", { class: sectionClass, style: sectionStyle }, title, sectionContent));
-    }
-    return sectionContainer;
-  }
-  renderBoxObject({ boxObject, row, visibleColumns, }, fromSection) {
-    const classObj = {
-      'box-object': true,
-    };
-    const boStyle = {};
-    let column = null;
-    let index = -1;
-    for (let i = 0; i < visibleColumns.length; i++) {
-      const c = visibleColumns[i];
-      if (c.name === boxObject.column) {
-        index = i;
-        break;
-      }
-    }
-    if (index >= 0) {
-      column = visibleColumns[index];
-      visibleColumns.splice(index, 1);
-    }
-    else if (fromSection) {
-      column = this.data.columns.find((x) => x.name === boxObject.column);
-    }
-    const cell = row.cells[boxObject.column];
-    let title = undefined;
-    if (cell && !this.kupManager.objects.isEmptyKupObj(cell.obj)) {
-      classObj['is-obj'] = true;
-      if (this.kupManager.debug.isDebug()) {
-        title =
-          cell.obj.t + '; ' + cell.obj.p + '; ' + cell.obj.k + ';';
-      }
-    }
-    const cellProps = {
-      cell: cell,
-      column: column,
-      component: this,
-      editable: this.editableData,
-      renderKup: true,
-      row: row,
-      setSizes: true,
-      shape: boxObject.shape,
-    };
-    return (h("div", { "data-cell": cell, "data-row": row, "data-column": boxObject.column, class: classObj, style: boStyle, title: title }, cell && column ? (h(FCell, Object.assign({}, cellProps))) : (h("span", null, boxObject.value))));
-  }
-  /**
-   * Prepares the kanban sections by sorting the boxlist's data.
-   * @returns {{jsx: VNode[], style: { [index: string]: string }}} jsx contains the virtual nodes of the Kanban sections, style contains the grid CSS settings.
-   */
-  kanbanMode() {
-    // Testing whether there are columns to group by
-    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))),
-        style: { 'grid-template-columns': `repeat(1, 1fr)` },
-      };
-    }
-    const kanbanSections = [];
-    // Creating empty sections from prop-defined labels
-    if (this.kanban.labels) {
-      for (let index = 0; index < this.kanban.labels.length; index++) {
-        const key = this.kanban.labels[index];
-        kanbanSections.push({ labels: key, nodes: [] });
-      }
+        return {
+            boxObject: boxObject ? boxObject : null,
+            column: column ? column : null,
+            cell: cell ? cell : null,
+            originalEvent: e,
+            row: row ? row : null,
+        };
     }
-    // Browsing all rows
-    for (let index = 0; index < this.rows.length; index++) {
-      let key = [];
-      // Creating the key for the current row
-      for (let j = 0; j < this.kanban.columns.length; j++) {
-        try {
-          key.push(this.rows[index].cells[this.kanban.columns[j]].value);
-        }
-        catch (error) {
-          this.kupManager.debug.logMessage(this, error, KupDebugCategory.WARNING);
-        }
-      }
-      const check = {
-        found: false,
-        index: null,
-      };
-      // Browsing key array to search whether the current key exists or not
-      for (let j = 0; j < kanbanSections.length; j++) {
-        let sortingKey = kanbanSections[j].labels;
-        let found = true;
-        for (let i = 0; i < sortingKey.length; i++) {
-          if (key[i] !== sortingKey[i]) {
-            found = false;
-            break;
-          }
-        }
-        if (found) {
-          check.found = true;
-          check.index = j;
-          break;
-        }
-      }
-      // If current key exists, box will be pushed into the existing array of virtual nodes
-      if (check.found) {
-        kanbanSections[check.index].nodes.push(this.renderRow(this.rows[index]));
-      }
-      else {
-        // Otherwise, a new section will be defined starting with just the current virtal node
-        kanbanSections.push({
-          labels: key,
-          nodes: [this.renderRow(this.rows[index])],
-        });
-      }
+    contextMenuHandler(e) {
+        const details = this.getEventDetails(e.target, e);
+        return details;
     }
-    // Once the arrays are set, they need to be emptied into columns
-    const kanbanJSX = [];
-    for (let index = 0; index < kanbanSections.length; index++) {
-      const sortingKey = kanbanSections[index].labels;
-      const props = {
-        data: [],
-      };
-      for (let index = 0; index < sortingKey.length; index++) {
-        props.data.push({
-          value: sortingKey[index],
-          id: sortingKey[index],
-        });
-      }
-      kanbanJSX.push(h("div", { class: "kanban-section" }, h(FChip, Object.assign({}, props)), kanbanSections[index].nodes));
+    /**
+     * Checks if the element is the svg that opens the "row actions menu"
+     * @param element the element to check
+     */
+    checkIfElementIsActionMenuIcon(element) {
+        if (element.tagName && element.parentElement) {
+            return (element.tagName === 'svg' &&
+                element.parentElement.classList.contains('row-actions-toggler'));
+        }
+        return false;
     }
-    return {
-      jsx: kanbanJSX,
-      style: {
-        'grid-template-columns': this.kanban.isStacked
-          ? 'repeat(1fr)'
-          : this.kanban.size
-            ? `repeat(${Object.keys(kanbanSections).length}, ${this.kanban.size})`
-            : `repeat(${Object.keys(kanbanSections).length}, 1fr)`,
-      },
-    };
-  }
-  didLoadInteractables() {
-    this.interactableTouch.push(this.boxContainer);
-    const tapCb = (e) => {
-      if (this.hold) {
-        this.hold = false;
-        return;
-      }
-      switch (e.button) {
-        case 2:
-          this.kupBoxContextMenu.emit({
+    // event listeners
+    onBoxClick({ target }, row) {
+        if (!(target instanceof HTMLElement)) {
+            return;
+        }
+        // searching parent
+        let element = target;
+        let classList = element.classList;
+        while (!classList.contains('box-object') &&
+            !classList.contains('box-section') &&
+            !classList.contains('box')) {
+            element = element.parentElement;
+            if (element === null) {
+                break;
+            }
+            classList = element.classList;
+        }
+        // evaluating column
+        let column = null;
+        if (classList.contains('box-object')) {
+            column = element.dataset.column;
+        }
+        this.kupBoxClick.emit({
             comp: this,
             id: this.rootElement.id,
-            details: this.contextMenuHandler(e),
-          });
-          break;
-      }
-    };
-    const holdCb = (e) => {
-      if (e.pointerType === 'pen' || e.pointerType === 'touch') {
-        this.hold = true;
-        this.kupBoxContextMenu.emit({
-          comp: this,
-          id: this.rootElement.id,
-          details: this.contextMenuHandler(e),
+            row,
+            column,
         });
-      }
-    };
-    this.kupManager.interact.on(this.boxContainer, KupPointerEventTypes.TAP, tapCb);
-    this.kupManager.interact.on(this.boxContainer, KupPointerEventTypes.HOLD, holdCb);
-  }
-  didRenderInteractables() {
-    if (this.dragEnabled) {
-      for (let index = 0; index < this.rowsRefs.length; index++) {
-        const row = this.rowsRefs[index];
-        const dataCb = () => {
-          const cellEl = this.rootElement.shadowRoot.querySelector('.box-object:hover');
-          return {
-            cell: cellEl['data-cell'],
-            column: getColumnByName(this.visibleColumns, cellEl.dataset.column),
-            id: this.rootElement.id,
-            multiple: this.multiSelection,
-            row: cellEl['data-row'],
-            selectedRows: this.selectedRows,
-          };
-        };
-        if (row && !this.interactableDrag.includes(row)) {
-          this.interactableDrag.push(row);
-          this.kupManager.interact.draggable(row, {
-            allowFrom: '.box-object',
-            cursorChecker() {
-              return null;
-            },
-          }, {
-            callback: dataCb,
-          }, KupDragEffect.BADGE);
+        // selecting box
+        if (this.multiSelection) {
+            // triggering multi selection
+            this.onSelectionCheckChange(row);
+        }
+        else {
+            this.selectedRows = [row];
         }
-      }
     }
-    if (this.dropEnabled) {
-      const dataCb = () => {
-        const receivingDetails = this.getEventDetails(this.rootElement.shadowRoot.querySelector('.box:hover'));
-        return {
-          cell: receivingDetails.cell,
-          column: receivingDetails.column,
-          id: this.rootElement.id,
-          row: receivingDetails.row,
-        };
-      };
-      if (!this.interactableDrop.includes(this.sectionRef)) {
-        this.interactableDrop.push(this.sectionRef);
-        this.kupManager.interact.dropzone(this.sectionRef, {
-          accept: `[${kupDraggableCellAttr}]`,
-        }, {
-          dispatcher: this.rootElement,
-          type: KupDropEventTypes.BOX,
+    onSelectionCheckChange(row) {
+        var index = -1;
+        for (let i = 0; i < this.selectedRows.length; i++) {
+            const select = this.selectedRows[i];
+            if (select.id === row.id) {
+                index = i;
+                break;
+            }
+        }
+        if (index >= 0) {
+            // remove row
+            this.selectedRows.splice(index, 1);
+            this.selectedRows = [...this.selectedRows];
+        }
+        else {
+            // add row
+            this.selectedRows = [...this.selectedRows, row];
+        }
+        this.kupBoxSelected.emit({
+            comp: this,
+            id: this.rootElement.id,
+            rows: this.selectedRows,
         });
-      }
-      for (let index = 0; index < this.rowsRefs.length; index++) {
-        const row = this.rowsRefs[index];
-        if (row && !this.interactableDrop.includes(row)) {
-          this.interactableDrop.push(row);
-          this.kupManager.interact.dropzone(row, {
-            accept: `[${kupDraggableCellAttr}]`,
-          }, {
-            callback: dataCb,
-            dispatcher: this.rootElement,
-            type: KupDropEventTypes.BOX,
-          });
-        }
-      }
     }
-  }
-  /*-------------------------------------------------*/
-  /*          L i f e c y c l e   H o o k s          */
-  /*-------------------------------------------------*/
-  componentWillLoad() {
-    this.kupManager.debug.logLoad(this, false);
-    if (this.rowsPerPage) {
-      this.currentRowsPerPage = this.rowsPerPage;
+    toggleSectionExpand(row, section) {
+        // check if section / row has id
+        if (!section.id) {
+            // error
+            console.error('cannot expand / collapse a section withoun an ID');
+            return;
+        }
+        if (!row.id) {
+            // error
+            console.error('cannot expand / collapse a section of a row without ad id');
+            return;
+        }
+        // check if section already in collapsedSection
+        if (!this.collapsedSection[section.id]) {
+            // adding element and row, setting it to expanded
+            this.collapsedSection[section.id] = {};
+            this.collapsedSection[section.id][row.id] = true;
+        }
+        else {
+            const s = this.collapsedSection[section.id];
+            if (!s[row.id]) {
+                s[row.id] = true;
+            }
+            else {
+                s[row.id] = !s[row.id];
+            }
+        }
+        // triggering rendering
+        this.collapsedSection = Object.assign({}, this.collapsedSection);
     }
-    if (this.data &&
-      this.data.rows &&
-      this.currentRowsPerPage > this.data.rows.length) {
-      this.currentRowsPerPage = this.data.rows.length;
+    onRowAction(row) {
+        if (!row) {
+            return;
+        }
+        if (row === this.rowActionMenuOpened) {
+            // closing menu
+            this.rowActionMenuOpened = null;
+            return;
+        }
+        if (row.actions) {
+            // actions already loaded -> show menu
+            this.rowActionMenuOpened = row;
+        }
+        else {
+            // no actions -> triggering event
+            this.kupRowActionMenuClick.emit({
+                comp: this,
+                id: this.rootElement.id,
+                row,
+            });
+        }
     }
-    this.kupManager.language.register(this);
-    this.kupManager.theme.register(this);
-    this.onDataChanged();
-    this.adjustPaginator();
-    if (document.querySelector('.header')) {
-      __classPrivateFieldSet(this, _KupBox_navBarHeight, document.querySelector('.header').clientHeight, "f");
+    onRowActionClick(row, action, index) {
+        this.kupRowActionClick.emit({
+            comp: this,
+            id: this.rootElement.id,
+            row,
+            action,
+            index,
+        });
     }
-    else {
-      __classPrivateFieldSet(this, _KupBox_navBarHeight, 0, "f");
+    /**
+     * see onDocumentClick in kup-combo
+     */
+    clickFunction(event) {
+        try {
+            const targets = event.composedPath();
+            for (let target of targets) {
+                if (this.checkIfElementIsActionMenuIcon(target)) {
+                    return;
+                }
+            }
+        }
+        catch (err) {
+            if (this.checkIfElementIsActionMenuIcon(event.target)) {
+                return;
+            }
+        }
+        this.rowActionMenuOpened = null;
     }
-    if (document.querySelector('.topbar')) {
-      __classPrivateFieldSet(this, _KupBox_navBarHeight, __classPrivateFieldGet(this, _KupBox_navBarHeight, "f") + document.querySelector('.topbar').clientHeight, "f");
+    handlePageChange(pageNumber) {
+        const newPage = pageChange(pageNumber, this.filteredRows.length, this.currentRowsPerPage);
+        if (newPage) {
+            this.currentPage = newPage;
+        }
     }
-    __classPrivateFieldGet(this, _KupBox_instances, "m", _KupBox_setObserver).call(this);
-  }
-  componentDidLoad() {
-    this.handleAutomaticBoxSelection();
-    // When component is created, then the listener is set. @See clickFunction for more details
-    document.addEventListener('click', this.clickFunction.bind(this));
-    this.currentPage = this.pageSelected;
-    if (this.multiSelection && this.selectedRowsState) {
-      this.selectedRows = [];
-      let selectedIds = this.selectedRowsState.split(';');
-      this.selectedRows = this.data.rows.filter((r) => {
-        return selectedIds.indexOf(r.id) >= 0;
-      });
+    handleRowsPerPageChange(rowsNumber) {
+        const newRows = rowsPerPageChange(rowsNumber, this.filteredRows.length);
+        if (newRows) {
+            this.currentRowsPerPage = newRows;
+            this.adjustPaginator();
+        }
     }
-    this.didLoadInteractables();
-    this.kupDidLoad.emit({ comp: this, id: this.rootElement.id });
-    this.kupManager.debug.logLoad(this, true);
-  }
-  componentWillRender() {
-    this.kupManager.debug.logRender(this, false);
-  }
-  componentDidRender() {
-    const root = this.rootElement.shadowRoot;
-    if (root) {
-      const fs = root.querySelectorAll('.f-text-field');
-      for (let index = 0; index < fs.length; index++) {
-        FTextFieldMDC(fs[index]);
-      }
+    adjustPaginator() {
+        const numberOfRows = this.rows.length;
+        // check if current page is valid
+        const numberOfPages = Math.ceil(numberOfRows / this.currentRowsPerPage);
+        if (this.currentPage > numberOfPages) {
+            // reset page
+            this.currentPage = 1;
+        }
     }
-    this.checkScrollOnHover();
-    this.persistState();
-    this.didRenderInteractables();
-    __classPrivateFieldGet(this, _KupBox_instances, "m", _KupBox_didRenderObservers).call(this);
-    this.kupManager.debug.logRender(this, true);
-  }
-  render() {
-    const isKanban = !!(typeof this.kanban === 'object' && this.kanban !== null);
-    let sortPanel = null;
-    if (this.sortEnabled) {
-      // creating items
-      const visibleColumnsItems = this.visibleColumns.map((column) => {
-        const item = {
-          value: column.title,
-          id: column.name,
-          selected: column.name === this.sortBy,
+    // render methods
+    renderSectionAsCard(row) {
+        let skipPush = false;
+        const cardData = {
+            button: [],
+            cell: [],
+            columns: [],
+            image: [],
+            progressbar: [],
+            text: [],
         };
-        return item;
-      });
-      const items = [{ value: '', id: '' }, ...visibleColumnsItems];
-      let textfieldData = {
-        label: this.kupManager.language.translate(KupLanguageGeneric.SORT_BY),
-        trailingIcon: true,
-      };
-      let listData = {
-        data: items,
-        selectable: true,
-      };
-      let data = {
-        '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) })));
-    }
-    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);
-        } })));
-    }
-    let paginator = null;
-    if (!this.lazyLoadRows && this.pagination) {
-      paginator = (h(FPaginator, { id: top ? 'top-paginator' : 'bottom-paginator', currentPage: this.currentPage, max: this.filteredRows.length, mode: FPaginatorMode.SIMPLE, perPage: this.currentRowsPerPage
-          ? this.currentRowsPerPage
-          : this.rowsPerPage, onPageChange: (e) => this.handlePageChange(e.detail.value), onRowsChange: (e) => this.handleRowsPerPageChange(e.detail.value) }));
-    }
-    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))));
-      containerStyle = { 'grid-template-columns': `repeat(1, 1fr)` };
-    }
-    else if (isKanban) {
-      const kanban = this.kanbanMode();
-      boxContent = kanban.jsx;
-      containerStyle = kanban.style;
-    }
-    else {
-      containerStyle = {
-        'grid-template-columns': `repeat(${this.columns}, 1fr)`,
-      };
-      const rows = this.rows;
-      let size = rows.length;
-      let cnt = 0;
-      boxContent = [];
-      while (size-- > 0) {
-        boxContent.push(this.renderRow(rows[cnt++]));
-      }
+        for (let index = 0; index < this.data.columns.length; index++) {
+            const column = this.data.columns[index];
+            if (column.visible !== false) {
+                cardData.cell.push(row.cells[column.name]);
+                cardData.columns.push(column);
+            }
+        }
+        //First cycle sets specific binds between cardIDs and cells
+        for (const key in row.cells) {
+            if (row.cells.hasOwnProperty(key)) {
+                const cell = row.cells[key];
+                if (cell.cardID !== undefined && cell.obj) {
+                    switch (cell.obj.p) {
+                        case 'BTN':
+                            do {
+                                cardData.button.push({});
+                            } while (cardData.button.length < cell.cardID);
+                            cardData.button[cell.cardID] = {
+                                label: cell.value,
+                            };
+                            break;
+                        case 'IMG':
+                            do {
+                                cardData.image.push({});
+                            } while (cardData.image.length < cell.cardID);
+                            cardData.image[cell.cardID] = {
+                                resource: cell.value,
+                            };
+                            break;
+                        case 'PGB':
+                            do {
+                                cardData.progressbar.push({});
+                            } while (cardData.progressbar.length < cell.cardID);
+                            cardData.progressbar[cell.cardID] = {
+                                value: cell.value,
+                            };
+                            break;
+                        default:
+                            do {
+                                cardData.text.push('');
+                            } while (cardData.text.length < cell.cardID);
+                            cardData.text[cell.cardID] = cell.value;
+                            break;
+                    }
+                }
+            }
+        }
+        //Second cycle sets leftover binds automatically
+        for (const key in row.cells) {
+            if (row.cells.hasOwnProperty(key)) {
+                const cell = row.cells[key];
+                if (cell.cardID === undefined && cell.obj) {
+                    skipPush = false;
+                    switch (cell.obj.p) {
+                        case 'BTN':
+                            for (let index = 0; index < cardData.button.length; index++) {
+                                //If there are empty elements, the first one will be used
+                                if (!Object.keys(cardData.button[index]).length) {
+                                    cardData.button[index] = {
+                                        label: cell.value,
+                                    };
+                                    skipPush = true;
+                                    break;
+                                }
+                            }
+                            //Otherwise a new element will be pushed
+                            if (!skipPush) {
+                                cardData.button.push({
+                                    label: cell.value,
+                                });
+                            }
+                            break;
+                        case 'IMG':
+                            for (let index = 0; index < cardData.image.length; index++) {
+                                //If there are empty elements, the first one will be used
+                                if (!Object.keys(cardData.image[index]).length) {
+                                    cardData.image[index] = {
+                                        resource: cell.value,
+                                    };
+                                    skipPush = true;
+                                    break;
+                                }
+                            }
+                            //Otherwise a new element will be pushed
+                            if (!skipPush) {
+                                cardData.image.push({
+                                    resource: cell.value,
+                                });
+                            }
+                            break;
+                        case 'PGB':
+                            for (let index = 0; index < cardData.progressbar.length; index++) {
+                                //If there are empty elements, the first one will be used
+                                if (!Object.keys(cardData.progressbar[index])
+                                    .length) {
+                                    cardData.progressbar[index] = {
+                                        value: cell.value,
+                                    };
+                                    skipPush = true;
+                                    break;
+                                }
+                            }
+                            //Otherwise a new element will be pushed
+                            if (!skipPush) {
+                                cardData.progressbar.push({
+                                    value: cell.value,
+                                });
+                            }
+                            break;
+                        default:
+                            for (let index = 0; index < cardData.text.length; index++) {
+                                //If there are empty elements, the first one will be used
+                                if (cardData.text[index] === '') {
+                                    cardData.text[index] = cell.value;
+                                    skipPush = true;
+                                    break;
+                                }
+                            }
+                            //Otherwise a new element will be pushed
+                            if (!skipPush) {
+                                cardData.text.push(cell.value);
+                            }
+                            break;
+                    }
+                }
+            }
+        }
+        return h("kup-card", Object.assign({ data: cardData }, this.cardData));
+    }
+    renderRow(row) {
+        const visibleColumns = [...this.visibleColumns];
+        let boxContent = null;
+        // if layout in row, use that one
+        let rowLayout = row.layout;
+        if (!rowLayout) {
+            // otherwise, use 'default' layout
+            rowLayout = this.boxLayout;
+        }
+        let horizontal = false;
+        if (rowLayout) {
+            if (rowLayout.horizontal) {
+                horizontal = true;
+            }
+            const sections = rowLayout.sections;
+            let size = sections.length;
+            let cnt = 0;
+            if (size > 0) {
+                boxContent = [];
+            }
+            // create fake parent section
+            const parent = {
+                horizontal: horizontal,
+            };
+            while (size-- > 0) {
+                if (this.cardData !== null &&
+                    this.cardData !== undefined &&
+                    typeof this.cardData === 'object') {
+                    boxContent.push(this.renderSectionAsCard(row));
+                }
+                else {
+                    boxContent.push(this.renderSection(sections[cnt++], parent, row, visibleColumns));
+                }
+            }
+        }
+        var isSelected = false;
+        for (let select of this.selectedRows) {
+            if (select.id === row.id) {
+                isSelected = true;
+            }
+        }
+        let multiSel = null;
+        if (this.multiSelection) {
+            multiSel = (h("div", { class: "box-selection" }, h("kup-checkbox", { checked: isSelected })));
+        }
+        let rowObject = null;
+        if (this.enableRowActions && !this.swipeDisabled) {
+            const menuClass = {
+                'row-action-menu': true,
+                open: row === this.rowActionMenuOpened,
+            };
+            let rowActionMenuContent = null;
+            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)));
+                });
+                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))));
+        }
+        let badges = null;
+        if (row.badgeData && row.badgeData.length > 0) {
+            badges = row.badgeData.map((badge) => (h("kup-badge", { text: badge.text, class: badge['className']
+                    ? `centered ${badge['className']}`
+                    : 'centered', imageData: badge.imageData })));
+        }
+        const boxClass = {
+            box: true,
+            draggable: this.dragEnabled,
+            selected: this.showSelection && isSelected,
+            column: !horizontal,
+        };
+        const rowStyle = row.style || {};
+        return (h("div", { class: "box-wrapper", style: rowStyle, ref: (el) => __classPrivateFieldGet(this, _KupBox_rowsRefs, "f").push(el) }, 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;
+        if (section.sections && section.sections.length > 0) {
+            // rendering child
+            const sections = section.sections;
+            let size = sections.length;
+            let cnt = 0;
+            if (size > 0) {
+                sectionContent = [];
+            }
+            while (size-- > 0) {
+                sectionContent.push(this.renderSection(sections[cnt++], section, row, visibleColumns));
+            }
+        }
+        else if (section.content) {
+            // rendering box objects
+            const content = section.content;
+            let size = content.length;
+            let cnt = 0;
+            if (size > 0) {
+                sectionContent = [];
+            }
+            while (size-- > 0) {
+                sectionContent.push(this.renderBoxObject({
+                    boxObject: content[cnt++],
+                    row,
+                    visibleColumns,
+                }, true));
+            }
+        }
+        else if (visibleColumns.length > 0) {
+            const column = visibleColumns[0];
+            sectionContent = this.renderBoxObject({
+                boxObject: { column: column.name },
+                row,
+                visibleColumns,
+            });
+        }
+        const sectionExpanded = this.isSectionExpanded(row, section);
+        const isGrid = !!section.columns;
+        const sectionClass = {
+            'box-section': true,
+            open: sectionExpanded,
+            column: !isGrid && !section.horizontal,
+            grid: isGrid,
+            titled: !!section.title,
+            'last-child': !section.sections || section.sections.length === 0,
+        };
+        const sectionStyle = section.style || {};
+        if (section.dim && parent) {
+            sectionStyle.flex = `0 0 ${section.dim}`;
+            sectionStyle.overflow = 'hidden';
+            if (parent.horizontal) {
+                sectionStyle.maxWidth = section.dim;
+            }
+            else {
+                sectionStyle.maxHeight = section.dim;
+            }
+        }
+        if (isGrid) {
+            sectionStyle['grid-template-columns'] = `repeat(${section.columns}, 1fr)`;
+        }
+        let sectionContainer = null;
+        if (section.collapsible) {
+            sectionClass['collapse-section'] = true;
+            const contentClass = {
+                content: true,
+            };
+            // TODO I18N
+            let headerTitle = '';
+            if (section.title) {
+                headerTitle = section.title;
+            }
+            else if (sectionExpanded) {
+                headerTitle = this.kupManager.language.translate(KupLanguageGeneric.COLLAPSE);
+            }
+            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' : '' })))));
+        }
+        else {
+            const title = section.title ? h("h3", null, section.title) : null;
+            sectionContainer = (h("div", { class: sectionClass, style: sectionStyle }, title, sectionContent));
+        }
+        return sectionContainer;
     }
-    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));
-    this.kupManager.language.unregister(this);
-    this.kupManager.theme.unregister(this);
-    if (this.scrollOnHover) {
-      this.kupManager.scrollOnHover.unregister(this.boxContainer);
+    renderBoxObject({ boxObject, row, visibleColumns, }, fromSection) {
+        const classObj = {
+            'box-object': true,
+        };
+        const boStyle = {};
+        let column = null;
+        let index = -1;
+        for (let i = 0; i < visibleColumns.length; i++) {
+            const c = visibleColumns[i];
+            if (c.name === boxObject.column) {
+                index = i;
+                break;
+            }
+        }
+        if (index >= 0) {
+            column = visibleColumns[index];
+            visibleColumns.splice(index, 1);
+        }
+        else if (fromSection) {
+            column = this.data.columns.find((x) => x.name === boxObject.column);
+        }
+        const cell = row.cells[boxObject.column];
+        let title = undefined;
+        if (cell && !this.kupManager.objects.isEmptyKupObj(cell.obj)) {
+            classObj['is-obj'] = true;
+            if (this.kupManager.debug.isDebug()) {
+                title =
+                    cell.obj.t + '; ' + cell.obj.p + '; ' + cell.obj.k + ';';
+            }
+        }
+        const cellProps = {
+            cell: cell,
+            column: column,
+            component: this,
+            editable: this.editableData,
+            renderKup: true,
+            row: row,
+            setSizes: true,
+            shape: boxObject.shape,
+        };
+        return (h("div", { "data-cell": cell, "data-row": row, "data-column": boxObject.column, class: classObj, style: boStyle, title: title }, cell && column ? (h(FCell, Object.assign({}, cellProps))) : (h("span", null, boxObject.value))));
     }
-    // When component is destroyed, then the listener is removed. @See clickFunction for more details
-    document.removeEventListener('click', this.clickFunction.bind(this));
-    this.kupDidUnload.emit({ comp: this, id: this.rootElement.id });
-  }
-  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",
-              "id": "src/types/GenericTypes.ts::GenericObject"
+    /**
+     * Prepares the kanban sections by sorting the boxlist's data.
+     * @returns {{jsx: VNode[], style: { [index: string]: string }}} jsx contains the virtual nodes of the Kanban sections, style contains the grid CSS settings.
+     */
+    kanbanMode() {
+        // Testing whether there are columns to group by
+        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))),
+                style: { 'grid-template-columns': `repeat(1, 1fr)` },
+            };
+        }
+        const kanbanSections = [];
+        // Creating empty sections from prop-defined labels
+        if (this.kanban.labels) {
+            for (let index = 0; index < this.kanban.labels.length; index++) {
+                const key = this.kanban.labels[index];
+                kanbanSections.push({ labels: key, nodes: [] });
             }
-          }
-        },
-        "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",
-              "id": "src/components/kup-box/kup-box-declarations.ts::KupBoxData"
+        }
+        // Browsing all rows
+        for (let index = 0; index < this.rows.length; index++) {
+            let key = [];
+            // Creating the key for the current row
+            for (let j = 0; j < this.kanban.columns.length; j++) {
+                try {
+                    key.push(this.rows[index].cells[this.kanban.columns[j]].value);
+                }
+                catch (error) {
+                    this.kupManager.debug.logMessage(this, error, KupDebugCategory.WARNING);
+                }
             }
-          }
-        },
-        "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",
-              "id": "src/components/kup-box/kup-box-declarations.ts::KupBoxKanban"
+            const check = {
+                found: false,
+                index: null,
+            };
+            // Browsing key array to search whether the current key exists or not
+            for (let j = 0; j < kanbanSections.length; j++) {
+                let sortingKey = kanbanSections[j].labels;
+                let found = true;
+                for (let i = 0; i < sortingKey.length; i++) {
+                    if (key[i] !== sortingKey[i]) {
+                        found = false;
+                        break;
+                    }
+                }
+                if (found) {
+                    check.found = true;
+                    check.index = j;
+                    break;
+                }
             }
-          }
-        },
-        "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",
-              "id": "src/components/kup-box/kup-box-declarations.ts::KupBoxLayout"
+            // If current key exists, box will be pushed into the existing array of virtual nodes
+            if (check.found) {
+                kanbanSections[check.index].nodes.push(this.renderRow(this.rows[index]));
             }
-          }
-        },
-        "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."
-        }
-      },
-      "lazyLoadRows": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "When set to true, extra rows will be automatically loaded once the last row enters the viewport."
-        },
-        "attribute": "lazy-load-rows",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "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"
-      },
-      "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",
-              "id": "src/components/kup-state/kup-store.ts::KupStore"
+            else {
+                // Otherwise, a new section will be defined starting with just the current virtal node
+                kanbanSections.push({
+                    labels: key,
+                    nodes: [this.renderRow(this.rows[index])],
+                });
             }
-          }
-        },
-        "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"
-      }
-    };
-  }
-  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",
-              "id": "src/components/kup-box/kup-box-declarations.ts::KupBoxClickEventPayload"
+        }
+        // Once the arrays are set, they need to be emptied into columns
+        const kanbanJSX = [];
+        for (let index = 0; index < kanbanSections.length; index++) {
+            const sortingKey = kanbanSections[index].labels;
+            const props = {
+                data: [],
+            };
+            for (let index = 0; index < sortingKey.length; index++) {
+                props.data.push({
+                    value: sortingKey[index],
+                    id: sortingKey[index],
+                });
             }
-          }
-        }
-      }, {
-        "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",
-              "id": "src/components/kup-box/kup-box-declarations.ts::KupBoxSelectedEventPayload"
+            kanbanJSX.push(h("div", { class: "kanban-section" }, h(FChip, Object.assign({}, props)), kanbanSections[index].nodes));
+        }
+        return {
+            jsx: kanbanJSX,
+            style: {
+                'grid-template-columns': this.kanban.isStacked
+                    ? 'repeat(1fr)'
+                    : this.kanban.size
+                        ? `repeat(${Object.keys(kanbanSections).length}, ${this.kanban.size})`
+                        : `repeat(${Object.keys(kanbanSections).length}, 1fr)`,
+            },
+        };
+    }
+    didLoadInteractables() {
+        this.interactableTouch.push(this.boxContainer);
+        const tapCb = (e) => {
+            if (this.hold) {
+                this.hold = false;
+                return;
             }
-          }
-        }
-      }, {
-        "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",
-              "id": "src/components/kup-box/kup-box-declarations.ts::KupBoxAutoSelectEventPayload"
+            switch (e.button) {
+                case 2:
+                    this.kupBoxContextMenu.emit({
+                        comp: this,
+                        id: this.rootElement.id,
+                        details: this.contextMenuHandler(e),
+                    });
+                    break;
             }
-          }
-        }
-      }, {
-        "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",
-              "id": "src/components/kup-box/kup-box-declarations.ts::KupBoxAutoSelectEventPayload"
+        };
+        const holdCb = (e) => {
+            if (e.pointerType === 'pen' || e.pointerType === 'touch') {
+                this.hold = true;
+                this.kupBoxContextMenu.emit({
+                    comp: this,
+                    id: this.rootElement.id,
+                    details: this.contextMenuHandler(e),
+                });
             }
-          }
-        }
-      }, {
-        "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",
-              "id": "src/components/kup-box/kup-box-declarations.ts::KupBoxRowActionClickEventPayload"
+        };
+        this.kupManager.interact.on(this.boxContainer, KupPointerEventTypes.TAP, tapCb);
+        this.kupManager.interact.on(this.boxContainer, KupPointerEventTypes.HOLD, holdCb);
+    }
+    didRenderInteractables() {
+        if (this.dragEnabled) {
+            for (let index = 0; index < this.rowsRefs.length; index++) {
+                const row = this.rowsRefs[index];
+                const dataCb = () => {
+                    const cellEl = this.rootElement.shadowRoot.querySelector('.box-object:hover');
+                    return {
+                        cell: cellEl['data-cell'],
+                        column: getColumnByName(this.visibleColumns, cellEl.dataset.column),
+                        id: this.rootElement.id,
+                        multiple: this.multiSelection,
+                        row: cellEl['data-row'],
+                        selectedRows: this.selectedRows,
+                    };
+                };
+                if (row && !this.interactableDrag.includes(row)) {
+                    this.interactableDrag.push(row);
+                    this.kupManager.interact.draggable(row, {
+                        allowFrom: '.box-object',
+                        cursorChecker() {
+                            return null;
+                        },
+                    }, {
+                        callback: dataCb,
+                    }, KupDragEffect.BADGE);
+                }
             }
-          }
-        }
-      }, {
-        "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",
-              "id": "src/types/GenericTypes.ts::KupEventPayload"
+        }
+        if (this.dropEnabled) {
+            const dataCb = () => {
+                const receivingDetails = this.getEventDetails(this.rootElement.shadowRoot.querySelector('.box:hover'));
+                return {
+                    cell: receivingDetails.cell,
+                    column: receivingDetails.column,
+                    id: this.rootElement.id,
+                    row: receivingDetails.row,
+                };
+            };
+            if (!this.interactableDrop.includes(this.sectionRef)) {
+                this.interactableDrop.push(this.sectionRef);
+                this.kupManager.interact.dropzone(this.sectionRef, {
+                    accept: `[${kupDraggableCellAttr}]`,
+                }, {
+                    dispatcher: this.rootElement,
+                    type: KupDropEventTypes.BOX,
+                });
             }
-          }
-        }
-      }, {
-        "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",
-              "id": "src/types/GenericTypes.ts::KupEventPayload"
+            for (let index = 0; index < this.rowsRefs.length; index++) {
+                const row = this.rowsRefs[index];
+                if (row && !this.interactableDrop.includes(row)) {
+                    this.interactableDrop.push(row);
+                    this.kupManager.interact.dropzone(row, {
+                        accept: `[${kupDraggableCellAttr}]`,
+                    }, {
+                        callback: dataCb,
+                        dispatcher: this.rootElement,
+                        type: KupDropEventTypes.BOX,
+                    });
+                }
             }
-          }
-        }
-      }, {
-        "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",
-              "id": "src/components/kup-box/kup-box-declarations.ts::KupBoxContextMenuEventPayload"
+        }
+    }
+    /*-------------------------------------------------*/
+    /*          L i f e c y c l e   H o o k s          */
+    /*-------------------------------------------------*/
+    componentWillLoad() {
+        this.kupManager.debug.logLoad(this, false);
+        if (this.rowsPerPage) {
+            this.currentRowsPerPage = this.rowsPerPage;
+        }
+        if (this.data &&
+            this.data.rows &&
+            this.currentRowsPerPage > this.data.rows.length) {
+            this.currentRowsPerPage = this.data.rows.length;
+        }
+        this.kupManager.language.register(this);
+        this.kupManager.theme.register(this);
+        this.onDataChanged();
+        this.adjustPaginator();
+        if (document.querySelector('.header')) {
+            __classPrivateFieldSet(this, _KupBox_navBarHeight, document.querySelector('.header').clientHeight, "f");
+        }
+        else {
+            __classPrivateFieldSet(this, _KupBox_navBarHeight, 0, "f");
+        }
+        if (document.querySelector('.topbar')) {
+            __classPrivateFieldSet(this, _KupBox_navBarHeight, __classPrivateFieldGet(this, _KupBox_navBarHeight, "f") + document.querySelector('.topbar').clientHeight, "f");
+        }
+        __classPrivateFieldGet(this, _KupBox_instances, "m", _KupBox_setObserver).call(this);
+    }
+    componentDidLoad() {
+        this.handleAutomaticBoxSelection();
+        // When component is created, then the listener is set. @See clickFunction for more details
+        document.addEventListener('click', this.clickFunction.bind(this));
+        this.currentPage = this.pageSelected;
+        if (this.multiSelection && this.selectedRowsState) {
+            this.selectedRows = [];
+            let selectedIds = this.selectedRowsState.split(';');
+            this.selectedRows = this.data.rows.filter((r) => {
+                return selectedIds.indexOf(r.id) >= 0;
+            });
+        }
+        this.didLoadInteractables();
+        this.kupDidLoad.emit({ comp: this, id: this.rootElement.id });
+        this.kupManager.debug.logLoad(this, true);
+    }
+    componentWillRender() {
+        this.kupManager.debug.logRender(this, false);
+    }
+    componentDidRender() {
+        const root = this.rootElement.shadowRoot;
+        if (root) {
+            const fs = root.querySelectorAll('.f-text-field');
+            for (let index = 0; index < fs.length; index++) {
+                FTextFieldMDC(fs[index]);
+            }
+        }
+        this.checkScrollOnHover();
+        this.persistState();
+        this.didRenderInteractables();
+        __classPrivateFieldGet(this, _KupBox_instances, "m", _KupBox_didRenderObservers).call(this);
+        this.kupManager.debug.logRender(this, true);
+    }
+    render() {
+        const isKanban = !!(typeof this.kanban === 'object' && this.kanban !== null);
+        let sortPanel = null;
+        if (this.sortEnabled) {
+            // creating items
+            const visibleColumnsItems = this.visibleColumns.map((column) => {
+                const item = {
+                    value: column.title,
+                    id: column.name,
+                    selected: column.name === this.sortBy,
+                };
+                return item;
+            });
+            const items = [{ value: '', id: '' }, ...visibleColumnsItems];
+            let textfieldData = {
+                label: this.kupManager.language.translate(KupLanguageGeneric.SORT_BY),
+                trailingIcon: true,
+            };
+            let listData = {
+                data: items,
+                selectable: true,
+            };
+            let data = {
+                '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) })));
+        }
+        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);
+                } })));
+        }
+        let paginator = null;
+        if (!this.lazyLoadRows && this.pagination) {
+            paginator = (h(FPaginator, { id: top ? 'top-paginator' : 'bottom-paginator', currentPage: this.currentPage, max: this.filteredRows.length, mode: FPaginatorMode.SIMPLE, perPage: this.currentRowsPerPage
+                    ? this.currentRowsPerPage
+                    : this.rowsPerPage, onPageChange: (e) => this.handlePageChange(e.detail.value), onRowsChange: (e) => this.handleRowsPerPageChange(e.detail.value) }));
+        }
+        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))));
+            containerStyle = { 'grid-template-columns': `repeat(1, 1fr)` };
+        }
+        else if (isKanban) {
+            const kanban = this.kanbanMode();
+            boxContent = kanban.jsx;
+            containerStyle = kanban.style;
+        }
+        else {
+            containerStyle = {
+                'grid-template-columns': `repeat(${this.columns}, 1fr)`,
+            };
+            const rows = this.rows;
+            let size = rows.length;
+            let cnt = 0;
+            boxContent = [];
+            while (size-- > 0) {
+                boxContent.push(this.renderRow(rows[cnt++]));
             }
-          }
-        }
-      }];
-  }
-  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",
-              "id": "global::Promise"
+        }
+        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));
+        this.kupManager.language.unregister(this);
+        this.kupManager.theme.unregister(this);
+        if (this.scrollOnHover) {
+            this.kupManager.scrollOnHover.unregister(this.boxContainer);
+        }
+        // When component is destroyed, then the listener is removed. @See clickFunction for more details
+        document.removeEventListener('click', this.clickFunction.bind(this));
+        this.kupDidUnload.emit({ comp: this, id: this.rootElement.id });
+    }
+    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",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/components/kup-box/kup-box-declarations.ts::KupBoxData"
+                        }
+                    }
+                },
+                "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",
+                            "id": "src/components/kup-box/kup-box-declarations.ts::KupBoxKanban"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Displays the boxlist as a Kanban."
+                },
+                "defaultValue": "null"
             },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::GenericObject"
+            "layout": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KupBoxLayout",
+                    "resolved": "KupBoxLayout",
+                    "references": {
+                        "KupBoxLayout": {
+                            "location": "import",
+                            "path": "./kup-box-declarations",
+                            "id": "src/components/kup-box/kup-box-declarations.ts::KupBoxLayout"
+                        }
+                    }
+                },
+                "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."
+                }
+            },
+            "lazyLoadRows": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When set to true, extra rows will be automatically loaded once the last row enters the viewport."
+                },
+                "attribute": "lazy-load-rows",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "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"
+            },
+            "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",
+                            "id": "src/components/kup-state/kup-store.ts::KupStore"
+                        }
+                    }
+                },
+                "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"
             }
-          },
-          "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."
+        };
+    }
+    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",
+                            "id": "src/components/kup-box/kup-box-declarations.ts::KupBoxClickEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "id": "src/components/kup-box/kup-box-declarations.ts::KupBoxSelectedEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "id": "src/components/kup-box/kup-box-declarations.ts::KupBoxAutoSelectEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "id": "src/components/kup-box/kup-box-declarations.ts::KupBoxAutoSelectEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "id": "src/components/kup-box/kup-box-declarations.ts::KupBoxRowActionClickEventPayload"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "id": "src/types/GenericTypes.ts::KupEventPayload"
+                        }
+                    }
+                }
             }, {
-              "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": ""
+                "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",
+                            "id": "src/types/GenericTypes.ts::KupEventPayload"
+                        }
+                    }
+                }
             }, {
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+                "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",
+                            "id": "src/components/kup-box/kup-box-declarations.ts::KupBoxContextMenuEventPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    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",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::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."
+                        }]
+                }
             },
-            "KupBoxRow": {
-              "location": "import",
-              "path": "./kup-box-declarations",
-              "id": "src/components/kup-box/kup-box-declarations.ts::KupBoxRow"
+            "loadRowActions": {
+                "complexType": {
+                    "signature": "(row: KupBoxRow, actions: KupDataRowAction[]) => Promise<void>",
+                    "parameters": [{
+                            "tags": [],
+                            "text": ""
+                        }, {
+                            "tags": [],
+                            "text": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KupBoxRow": {
+                            "location": "import",
+                            "path": "./kup-box-declarations",
+                            "id": "src/components/kup-box/kup-box-declarations.ts::KupBoxRow"
+                        },
+                        "KupDataRowAction": {
+                            "location": "import",
+                            "path": "../../managers/kup-data/kup-data-declarations",
+                            "id": "src/managers/kup-data/kup-data-declarations.ts::KupDataRowAction"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             },
-            "KupDataRowAction": {
-              "location": "import",
-              "path": "../../managers/kup-data/kup-data-declarations",
-              "id": "src/managers/kup-data/kup-data-declarations.ts::KupDataRowAction"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "refresh": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "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",
-              "id": "global::Promise"
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "This method is used to trigger a new render of the component.",
+                    "tags": []
+                }
             },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes",
-              "id": "src/types/GenericTypes.ts::GenericObject"
+            "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",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "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."
+                        }]
+                }
             }
-          },
-          "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."
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "rootElement"; }
-  static get watchers() {
-    return [{
-        "propName": "rowsPerPage",
-        "methodName": "rowsPerPageHandler"
-      }, {
-        "propName": "globalFilterValue",
-        "methodName": "recalculateRows"
-      }, {
-        "propName": "sortBy",
-        "methodName": "recalculateRows"
-      }, {
-        "propName": "pagination",
-        "methodName": "recalculateRows"
-      }, {
-        "propName": "rowsPerPage",
-        "methodName": "recalculateRows"
-      }, {
-        "propName": "currentPage",
-        "methodName": "recalculateRows"
-      }, {
-        "propName": "currentRowsPerPage",
-        "methodName": "recalculateRows"
-      }, {
-        "propName": "data",
-        "methodName": "onDataChanged"
-      }, {
-        "propName": "layout",
-        "methodName": "onLayoutChanged"
-      }, {
-        "propName": "selectBox",
-        "methodName": "onSelectBoxChanged"
-      }];
-  }
+        };
+    }
+    static get elementRef() { return "rootElement"; }
+    static get watchers() {
+        return [{
+                "propName": "rowsPerPage",
+                "methodName": "rowsPerPageHandler"
+            }, {
+                "propName": "globalFilterValue",
+                "methodName": "recalculateRows"
+            }, {
+                "propName": "sortBy",
+                "methodName": "recalculateRows"
+            }, {
+                "propName": "pagination",
+                "methodName": "recalculateRows"
+            }, {
+                "propName": "rowsPerPage",
+                "methodName": "recalculateRows"
+            }, {
+                "propName": "currentPage",
+                "methodName": "recalculateRows"
+            }, {
+                "propName": "currentRowsPerPage",
+                "methodName": "recalculateRows"
+            }, {
+                "propName": "data",
+                "methodName": "onDataChanged"
+            }, {
+                "propName": "layout",
+                "methodName": "onLayoutChanged"
+            }, {
+                "propName": "selectBox",
+                "methodName": "onSelectBoxChanged"
+            }];
+    }
 }
 _KupBox_intObserver = new WeakMap(), _KupBox_rowsRefs = new WeakMap(), _KupBox_navBarHeight = new WeakMap(), _KupBox_instances = new WeakSet(), _KupBox_didRenderObservers = function _KupBox_didRenderObservers() {
-  if (this.lazyLoadRows &&
-    this.currentRowsPerPage < this.data.rows.length) {
-    __classPrivateFieldGet(this, _KupBox_intObserver, "f").observe(__classPrivateFieldGet(this, _KupBox_rowsRefs, "f")[__classPrivateFieldGet(this, _KupBox_rowsRefs, "f").length - 1]);
-  }
+    if (this.lazyLoadRows &&
+        this.currentRowsPerPage < this.data.rows.length) {
+        __classPrivateFieldGet(this, _KupBox_intObserver, "f").observe(__classPrivateFieldGet(this, _KupBox_rowsRefs, "f")[__classPrivateFieldGet(this, _KupBox_rowsRefs, "f").length - 1]);
+    }
 }, _KupBox_setObserver = function _KupBox_setObserver() {
-  const callback = (entries) => {
-    entries.forEach((entry) => {
-      if (entry.isIntersecting) {
-        this.kupManager.debug.logMessage(this, 'Last row entering the viewport, loading more elements.');
-        const delta = this.data.rows.length - this.currentRowsPerPage;
-        if (delta < 10) {
-          this.currentRowsPerPage += delta;
-        }
-        else {
-          this.currentRowsPerPage += 10;
-        }
-        entry.target.classList.remove('last-row');
-        __classPrivateFieldGet(this, _KupBox_intObserver, "f").unobserve(entry.target);
-      }
-    });
-  };
-  const options = {
-    threshold: 0,
-    rootMargin: '-' + __classPrivateFieldGet(this, _KupBox_navBarHeight, "f") + 'px 0px 0px 0px',
-  };
-  __classPrivateFieldSet(this, _KupBox_intObserver, new IntersectionObserver(callback, options), "f");
+    const callback = (entries) => {
+        entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+                this.kupManager.debug.logMessage(this, 'Last row entering the viewport, loading more elements.');
+                const delta = this.data.rows.length - this.currentRowsPerPage;
+                if (delta < 10) {
+                    this.currentRowsPerPage += delta;
+                }
+                else {
+                    this.currentRowsPerPage += 10;
+                }
+                entry.target.classList.remove('last-row');
+                __classPrivateFieldGet(this, _KupBox_intObserver, "f").unobserve(entry.target);
+            }
+        });
+    };
+    const options = {
+        threshold: 0,
+        rootMargin: '-' + __classPrivateFieldGet(this, _KupBox_navBarHeight, "f") + 'px 0px 0px 0px',
+    };
+    __classPrivateFieldSet(this, _KupBox_intObserver, new IntersectionObserver(callback, options), "f");
 };