@sme.up/ketchup 6.1.0-SNAPSHOT → 6.3.0

package/dist/esm/kup-box.entry.js

@@ -0,0 +1,1300 @@
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-e41330a5.js';
+import { k as kupManagerInstance, y as identify, g as getProps, s as setProps, t as getColumnByName, j as KupLanguageGeneric, K as KupThemeIconValues, c as KupDebugCategory, N as KupPointerEventTypes, R as KupDragEffect, U as kupDraggableCellAttr, V as KupDropEventTypes, E as KupLanguageSearch, _ as SortMode } from './kup-manager-86f440c7.js';
+import { f as filterRows, p as paginateRows, s as sortRows, d as pageChange, r as rowsPerPageChange, h as FPaginatorMode, b as FPaginator } from './f-paginator-utils-a4a52732.js';
+import { F as FImage } from './f-image-914a03ef.js';
+import { a as FChip } from './f-chip-d6f2eb94.js';
+import { c as componentWrapperId } from './GenericVariables-665de00a.js';
+import { F as FCell } from './f-cell-474dd282.js';
+import { F as FTextFieldMDC } from './f-text-field-mdc-d42d3f9e.js';
+import './f-button-cd948e50.js';
+import './f-button-declarations-b1b4cac4.js';
+import './f-checkbox-e06cf07b.js';
+import './f-text-field-76341fe3.js';
+import './tslib.es6-3eea2234.js';
+import './component-b1bedf1d.js';
+
+/**
+ * Props of the kup-box component.
+ * Used to export every prop in an object.
+ */
+var KupBoxProps;
+(function (KupBoxProps) {
+  KupBoxProps["cardData"] = "Data of the card linked to the box when the latter's layout must be a premade template.";
+  KupBoxProps["columns"] = "Number of columns.";
+  KupBoxProps["customStyle"] = "Custom style of the component.";
+  KupBoxProps["data"] = "Actual data of the box.";
+  KupBoxProps["dragEnabled"] = "Enable dragging.";
+  KupBoxProps["dropEnabled"] = "Enable dropping.";
+  KupBoxProps["dropOnSection"] = "Drop can be done in section.";
+  KupBoxProps["enableRowActions"] = "If enabled, a button to load / display the row actions will be displayed on the right of every box.";
+  KupBoxProps["globalFilter"] = "When set to true it activates the global filter.";
+  KupBoxProps["globalFilterValue"] = "The value of the global filter.";
+  KupBoxProps["kanban"] = "Displays the boxlist as a Kanban.";
+  KupBoxProps["layout"] = "How the field will be displayed. If not present, a default one will be created.";
+  KupBoxProps["multiSelection"] = "Enable multi selection.";
+  KupBoxProps["pageSelected"] = "Current page number.";
+  KupBoxProps["pageSize"] = "Number of boxes per page.";
+  KupBoxProps["pagination"] = "Enables pagination.";
+  KupBoxProps["rowsPerPage"] = "Number of current rows per page.";
+  KupBoxProps["scrollOnHover"] = "Activates the scroll on hover function.";
+  KupBoxProps["selectBox"] = "Automatically selects the box at the specified index.";
+  KupBoxProps["selectedRowsState"] = "Multiple selection.";
+  KupBoxProps["showSelection"] = "If enabled, highlights the selected box/boxes.";
+  KupBoxProps["sortBy"] = "If sorting is enabled, specifies which column to sort.";
+  KupBoxProps["sortEnabled"] = "Enable sorting.";
+  KupBoxProps["stateId"] = "";
+  KupBoxProps["store"] = "";
+  KupBoxProps["swipeDisabled"] = "Disable swipe.";
+})(KupBoxProps || (KupBoxProps = {}));
+
+class KupBoxState {
+  constructor() {
+    this.globalFilterValue = '';
+    this.sortBy = '';
+    this.selectedRowsState = '';
+    this.pageSelected = 1;
+    this.rowsPerPage = 0;
+    this.load = false;
+  }
+  /*Add attribute*/
+  toDebugString() {
+    // TODO
+    return 'box state';
+  }
+}
+
+const kupBoxCss = ":host{--kup_box_background_color:var(\n    --kup-box-background-color,\n    var(--kup-background-color)\n  );--kup_box_color:var(--kup-box-color, var(--kup-text-color));--kup_box_font_family:var(--kup-box-font-family, var(--kup-font-family));--kup_box_font_size:var(--kup-box-font-size, var(--kup-font-size));--kup_box_grid_gap:var(--kup-box-grid-gap, 1em);--kup_box_hover_box_shadow:var(\n    --kup-box-hover-box-shadow,\n    0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)\n  );--kup_box_primary_color_rgb:var(\n    --kup-box-primary-color-rgb,\n    var(--kup-primary-color-rgb)\n  );--kup_box_transition:var(--kup-box-transition, 0.25s);display:block;font-family:var(--kup_box_font_family);font-size:var(--kup_box_font_size)}.box-component{background:var(--kup_box_background_color);transition:border var(--kup_box_transition) ease}.box-component[kup-drag-over]{position:relative;border:3px dashed var(--kup-border-color)}#box-container{display:grid;grid-gap:var(--kup_box_grid_gap);color:var(--kup_box_color);overflow:auto}#box-container.is-kanban .kanban-section{overflow:auto}#box-container.is-kanban .box-wrapper{padding-top:1em}#box-container.is-kanban .box-wrapper .box{overflow:auto}#box-container *{box-sizing:border-box}#box-container .box-wrapper{display:flex;align-items:center}#box-container .box-wrapper .box{flex-grow:1;cursor:pointer;position:relative;display:flex;transition:background-color var(--kup_box_transition) ease, box-shadow var(--kup_box_transition) ease, border var(--kup_box_transition) ease}#box-container .box-wrapper .box.draggable{touch-action:none;user-select:none}#box-container .box-wrapper .box.column{flex-direction:column}#box-container .box-wrapper .box:hover{box-shadow:var(--kup_box_hover_box_shadow)}#box-container .box-wrapper .box.selected{background-color:rgba(var(--kup_box_primary_color_rgb), 0.175)}#box-container .box-wrapper .box.selected .box-section.titled>h3{background-color:transparent}#box-container .box-wrapper .box[kup-draggable]{opacity:0.5}#box-container .box-wrapper .box[kup-drag-over]{border:3px dashed var(--kup-border-color);position:relative;z-index:2}#box-container .box-wrapper .box .box-section{display:flex;flex-direction:row;flex:1 1 1%;flex-wrap:wrap}#box-container .box-wrapper .box .box-section.column{flex-direction:column;justify-content:center;flex-wrap:unset}#box-container .box-wrapper .box .box-section.column>.box-section{flex:0 0 auto}#box-container .box-wrapper .box .box-section.grid{display:grid}#box-container .box-wrapper .box .box-section .box-object{min-height:16px}#box-container .box-wrapper .box .box-section .box-object img{height:auto}#box-container .box-wrapper .box .box-section.collapse-section .header{border-top:1px solid var(--kup-border-color);color:rgba(var(--kup-text-color-rgb), 0.75);display:flex;justify-content:space-around;width:100%}#box-container .box-wrapper .box .box-section.collapse-section .header .header-content{margin:0.5em;display:flex;align-items:center}#box-container .box-wrapper .box .box-section.collapse-section .header .header-content .f-image{transition:transform 0.15s}#box-container .box-wrapper .box .box-section.collapse-section .header .header-content .f-image.toggled{transform:rotate(-180deg)}#box-container .box-wrapper .box .box-section.collapse-section .header .header-content .kup-icon.kup-dropdown-icon{margin:0;-webkit-mask:var(--kup-dropdown-icon);mask:var(--kup-dropdown-icon)}#box-container .box-wrapper .box .box-section.collapse-section .content{display:none;width:100%}#box-container .box-wrapper .box .box-section.collapse-section.open .content{display:block}#box-container .box-wrapper .box .box-section.titled{border:1px solid var(--kup-border-color);padding-top:5px;position:relative;margin:10px}#box-container .box-wrapper .box .box-section.titled>h3{background:var(--kup-background-color);font-size:calc(var(--kup-font-size) * 1.15);position:absolute;margin:0px;padding:0 8px;top:-11px;left:5px;transition:background-color 0.25s ease}#box-container .box-wrapper .box .box-selection{position:absolute;top:0.5em;right:0.5em;z-index:1}#box-container .box-wrapper .row-actions-wrapper .row-actions-toggler{position:relative;width:24px;height:24px;margin-left:3px}#box-container .box-wrapper .row-actions-wrapper .row-actions-toggler svg{cursor:pointer;opacity:0;fill:var(--kup-text-color);transition:opacity 500ms ease-out}#box-container .box-wrapper .row-actions-wrapper .row-actions-toggler .row-action-menu{background:var(--kup-background-color);border:1px solid var(--kup-border-color);box-shadow:0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);position:absolute;top:0;right:24px;display:none;z-index:10}#box-container .box-wrapper .row-actions-wrapper .row-actions-toggler .row-action-menu ul{list-style-type:none;margin:0;padding:0}#box-container .box-wrapper .row-actions-wrapper .row-actions-toggler .row-action-menu ul>li{cursor:pointer;white-space:nowrap;padding:0 12px;display:flex;align-items:center;line-height:30px}#box-container .box-wrapper .row-actions-wrapper .row-actions-toggler .row-action-menu ul>li:not(:last-child){border-bottom:1px solid var(--kup-border-color)}#box-container .box-wrapper .row-actions-wrapper .row-actions-toggler .row-action-menu.open{display:block}#box-container .box-wrapper:hover .row-actions-wrapper .row-actions-toggler svg{opacity:1}#sort-panel,#global-filter{margin-bottom:1em}:host(.kup-center-aligned) #kup-component .box-section{text-align:center}:host(.kup-center-aligned) #kup-component .box-section .f-cell{justify-content:center;margin:auto;text-align:center}:host(.kup-center-aligned) #kup-component .box-section .f-cell .f-cell__content{justify-content:center;margin:auto;text-align:center}:host(.kup-center-aligned) #kup-component .box-section .f-cell img{margin:auto}:host(.kup-right-aligned) #kup-component .box-section{text-align:right}:host(.kup-right-aligned) #kup-component .box-section .f-cell{justify-content:flex-end;margin-left:auto;margin-right:0;text-align:right}:host(.kup-right-aligned) #kup-component .box-section .f-cell .f-cell__content{justify-content:flex-end;margin-left:auto;margin-right:0;text-align:right}:host(.kup-right-aligned) #kup-component .box-section .f-cell img{margin-left:auto;margin-right:0}:host(.kup-top-aligned) #box-container .box-wrapper .box .box-section .column{justify-content:flex-start}:host(.kup-bottom-aligned) #box-container .box-wrapper .box .box-section .column{justify-content:flex-end}:host(:not(.kup-borderless)) .box{border:1px solid var(--kup-border-color)}:host(.kup-flat-on-hover) #box-container .box-wrapper .box:hover{box-shadow:none}:host(.kup-shaped) .box{border-radius:10px}:host(.kup-round) .box{border-radius:25px}:host(.kup-dashed-sections) .box-section{border:2px dashed var(--kup-text-color)}:host(:not(.kup-paddingless)) #box-container .box{padding:3px}:host(:not(.kup-paddingless)) #box-container .box .box-section .box-object{padding:1px 4px}:host(:not(.kup-paddingless)) #box-container .box .box-section.last-child{margin:3px 4px}:host(.kup-danger){--kup-box-primary-color-rgb:var(--kup-danger-color-rgb)}:host(.kup-info){--kup-box-primary-color-rgb:var(--kup-info-color-rgb)}:host(.kup-secondary){--kup-box-primary-color-rgb:var(--kup-secondary-color-rgb)}:host(.kup-success){--kup-box-primary-color-rgb:var(--kup-success-color-rgb)}:host(.kup-warning){--kup-box-primary-color-rgb:var(--kup-warning-color-rgb)}";
+
+const KupBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.kupBoxClick = createEvent(this, "kup-box-click", 6);
+    this.kupBoxSelected = createEvent(this, "kup-box-selected", 6);
+    this.kupAutoBoxSelect = createEvent(this, "kup-box-autoselect", 6);
+    this.kupRowActionMenuClick = createEvent(this, "kup-box-rowactionmenuclick", 6);
+    this.kupRowActionClick = createEvent(this, "kup-box-rowactionclick", 6);
+    this.kupDidLoad = createEvent(this, "kup-box-didload", 6);
+    this.kupDidUnload = createEvent(this, "kup-box-didunload", 6);
+    this.kupBoxContextMenu = createEvent(this, "kup-box-contextmenu", 6);
+    /*-------------------------------------------------*/
+    /*                   S t a t e s                   */
+    /*-------------------------------------------------*/
+    this.collapsedSection = {};
+    this.selectedRows = [];
+    this.currentPage = 1;
+    this.currentRowsPerPage = 10;
+    this.state = new KupBoxState();
+    /*-------------------------------------------------*/
+    /*                    P r o p s                    */
+    /*-------------------------------------------------*/
+    /**
+     * Data of the card linked to the box when the latter's layout must be a premade template.
+     * @default null
+     */
+    this.cardData = null;
+    /**
+     * Number of columns
+     * @default 1
+     */
+    this.columns = 1;
+    /**
+     * Custom style of the component.
+     * @default ""
+     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+     */
+    this.customStyle = '';
+    /**
+     * Actual data of the box.
+     * @default null
+     */
+    this.data = null;
+    /**
+     * Enable dragging
+     * @default false
+     */
+    this.dragEnabled = false;
+    /**
+     * Enable dropping
+     * @default false
+     */
+    this.dropEnabled = false;
+    /**
+     * Drop can be done in section
+     * @default false
+     */
+    this.dropOnSection = false;
+    /**
+     * When set to true, editable cells will be rendered using input components.
+     * @default false
+     */
+    this.editableData = false;
+    /**
+     * If enabled, a button to load / display the row actions
+     * will be displayed on the right of every box
+     * @default false
+     */
+    this.enableRowActions = false;
+    /**
+     * When set to true it activates the global filter.
+     * @default false
+     */
+    this.globalFilter = false;
+    /**
+     * The value of the global filter.
+     * @default ""
+     */
+    this.globalFilterValue = '';
+    /**
+     * Displays the boxlist as a Kanban.
+     * @default null
+     */
+    this.kanban = null;
+    /**
+     * Enable multi selection
+     * @default false
+     */
+    this.multiSelection = false;
+    /**
+     * Current page number
+     * @default 1
+     */
+    this.pageSelected = 1;
+    /**
+     * Number of boxes per page
+     * @default 10
+     */
+    this.pageSize = 10;
+    /**
+     * Enables pagination
+     * @default false
+     */
+    this.pagination = false;
+    /**
+     * Activates the scroll on hover function.
+     * @default false
+     */
+    this.scrollOnHover = false;
+    /**
+     * If enabled, highlights the selected box/boxes
+     * @default true
+     */
+    this.showSelection = true;
+    /**
+     * Enable sorting
+     * @default false
+     */
+    this.sortEnabled = false;
+    this.stateId = '';
+    /**
+     * Disable swipe
+     * @default false
+     */
+    this.swipeDisabled = false;
+    /*-------------------------------------------------*/
+    /*       I n t e r n a l   V a r i a b l e s       */
+    /*-------------------------------------------------*/
+    /**
+     * Instance of the KupManager class.
+     */
+    this.kupManager = kupManagerInstance();
+    this.visibleColumns = [];
+    this.rows = [];
+    this.filteredRows = [];
+    this.sectionRef = null;
+    this.rowsRefs = [];
+    this.hold = false;
+    this.interactableDrag = [];
+    this.interactableDrop = [];
+    this.interactableTouch = [];
+  }
+  initWithPersistedState() {
+    if (this.store && this.stateId) {
+      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) {
+      // create 'fake' sortObject
+      const sortObject = {
+        column: this.sortBy,
+        sortMode: SortMode.A,
+      };
+      sortedRows = sortRows(sortedRows, [sortObject]);
+    }
+    return sortedRows;
+  }
+  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');
+    }
+    if (boxObject) {
+      cell = boxObject['data-cell'];
+      row = boxObject['data-row'];
+      column = getColumnByName(this.visibleColumns, boxObject.dataset.column);
+    }
+    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];
+    }
+  }
+  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,
+    });
+  }
+  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);
+  }
+  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,
+      });
+    }
+  }
+  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;
+        }
+      }
+    }
+    catch (err) {
+      if (this.checkIfElementIsActionMenuIcon(event.target)) {
+        return;
+      }
+    }
+    this.rowActionMenuOpened = null;
+  }
+  handlePageChange(pageNumber) {
+    const newPage = pageChange(pageNumber, this.filteredRows.length, this.currentRowsPerPage);
+    if (newPage) {
+      this.currentPage = newPage;
+    }
+  }
+  handleRowsPerPageChange(rowsNumber) {
+    const newRows = rowsPerPageChange(rowsNumber, this.filteredRows.length);
+    if (newRows) {
+      this.currentRowsPerPage = newRows;
+      this.adjustPaginator();
+    }
+  }
+  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;
+    }
+  }
+  // render methods
+  renderSectionAsCard(row) {
+    let skipPush = false;
+    let cardData = {
+      button: [],
+      image: [],
+      progressbar: [],
+      text: [],
+    };
+    //First cycle sets specific binds between cardIDs and cells
+    for (var key in row.cells) {
+      if (row.cells.hasOwnProperty(key)) {
+        var cell = row.cells[key];
+        if (cell.cardID !== undefined) {
+          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 (var key in row.cells) {
+      if (row.cells.hasOwnProperty(key)) {
+        var cell = row.cells[key];
+        if (cell.cardID === undefined) {
+          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 (cardData.button[index] === {}) {
+                  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 (cardData.image[index] === {}) {
+                  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 (cardData.progressbar[index] === {}) {
+                  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,
+    };
+    return (h("div", { class: "box-wrapper" }, h("div", { class: boxClass, onClick: (e) => this.onBoxClick(e, row), ref: (el) => this.rowsRefs.push(el) }, multiSel, boxContent, badges), rowObject));
+  }
+  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}`;
+      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: [] });
+      }
+    }
+    // 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])],
+        });
+      }
+    }
+    // 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));
+    }
+    return {
+      jsx: kanbanJSX,
+      style: {
+        'grid-template-columns': 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({
+            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),
+        });
+      }
+    };
+    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);
+        }
+      }
+    }
+    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,
+        });
+      }
+      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;
+    }
+    else if (this.pageSize) {
+      this.currentRowsPerPage = this.pageSize;
+    }
+    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();
+  }
+  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();
+    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.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.pageSize, 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++]));
+      }
+    }
+    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 });
+  }
+  get rootElement() { return getElement(this); }
+  static get watchers() { return {
+    "pageSize": ["rowsPerPageHandler", "recalculateRows"],
+    "globalFilterValue": ["recalculateRows"],
+    "sortBy": ["recalculateRows"],
+    "pagination": ["recalculateRows"],
+    "currentPage": ["recalculateRows"],
+    "currentRowsPerPage": ["recalculateRows"],
+    "data": ["onDataChanged"],
+    "layout": ["onLayoutChanged"],
+    "selectBox": ["onSelectBoxChanged"]
+  }; }
+};
+KupBox.style = kupBoxCss;
+
+export { KupBox as kup_box };