@sme.up/ketchup 5.0.0 → 5.2.1-SNAPSHOT

package/dist/collection/assets/probe.js

@@ -35,40 +35,40 @@ combobox.data = {
     'kup-list': {
         data: [
             {
-                text: 'No features',
-                value: 'empty',
+                value: 'No features',
+                id: 'empty',
             },
             {
-                text: 'KupDebug',
-                value: 'debug',
+                value: 'KupDebug',
+                id: 'debug',
             },
             {
-                text: 'KupLanguage',
-                value: 'language',
+                value: 'KupLanguage',
+                id: 'language',
             },
             {
-                text: 'KupTheme',
-                value: 'theme',
+                value: 'KupTheme',
+                id: 'theme',
             },
             {
-                text: 'Long cycle (props)',
-                value: 'cycleprops',
+                value: 'Long cycle (props)',
+                id: 'cycleprops',
             },
             {
-                text: 'Long cycle (variables)',
-                value: 'cyclevars',
+                value: 'Long cycle (variables)',
+                id: 'cyclevars',
             },
             {
-                text: 'Long cycle (KupObjects)',
-                value: 'cycleobjects',
+                value: 'Long cycle (KupObjects)',
+                id: 'cycleobjects',
             },
             {
-                text: 'Long cycle (object function)',
-                value: 'cycleobjectsfunction',
+                value: 'Long cycle (object function)',
+                id: 'cycleobjectsfunction',
             },
             {
-                text: 'All features',
-                value: 'full',
+                value: 'All features',
+                id: 'full',
             },
         ],
     },

package/dist/collection/collection-manifest.json

@@ -34,6 +34,8 @@
     "./components/kup-list/kup-list.js",
     "./components/kup-magic-box/kup-magic-box.js",
     "./components/kup-nav-bar/kup-nav-bar.js",
+    "./components/kup-numeric-picker/kup-numeric-picker.js",
+    "./components/kup-photo-frame/kup-photo-frame.js",
     "./components/kup-probe/kup-probe.js",
     "./components/kup-progress-bar/kup-progress-bar.js",
     "./components/kup-qlik/kup-qlik.js",
@@ -46,7 +48,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.14.0",
+    "version": "2.14.2",
     "typescriptVersion": "4.5.4"
   },
   "collections": [],

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

@@ -304,12 +304,12 @@ export class KupAutocomplete {
   isListOpened() {
     return this.listEl.menuVisible == true;
   }
-  consistencyCheck(e, valueIn) {
+  consistencyCheck(e, idIn) {
     if (!this.doConsistencyCheck) {
       return;
     }
     this.doConsistencyCheck = false;
-    const ret = consistencyCheck(valueIn, this.data['kup-list'], this.listEl, this.selectMode, this.displayMode, e);
+    const ret = consistencyCheck(idIn, this.data['kup-list'], this.listEl, this.selectMode, this.displayMode, e);
     if (ret.exists || this.allowInconsistentValues) {
       this.value = ret.value;
       this.displayedValue = ret.displayedValue;
@@ -318,9 +318,9 @@ export class KupAutocomplete {
       }
     }
     else {
-      this.displayedValue = valueIn;
+      this.displayedValue = idIn;
       if (this.listEl != null && !this.serverHandledFilter) {
-        this.listEl.filter = valueIn;
+        this.listEl.filter = idIn;
       }
     }
     return ret;

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

@@ -6,7 +6,7 @@ import { filterRows, sortRows, paginateRows, } from '../kup-data-table/kup-data-
 import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { KupBoxState } from './kup-box-state';
 import { setTooltip, unsetTooltip } from '../../utils/helpers';
-import { deepEqual, getProps, identify, setProps } from '../../utils/utils';
+import { getProps, identify, setProps } from '../../utils/utils';
 import { FImage } from '../../f-components/f-image/f-image';
 import { FChip } from '../../f-components/f-chip/f-chip';
 import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
@@ -181,19 +181,19 @@ export class KupBox {
   persistState() {
     if (this.store && this.stateId) {
       let somethingChanged = false;
-      if (!deepEqual(this.state.sortBy, this.sortBy)) {
+      if (!this.kupManager.objects.deepEqual(this.state.sortBy, this.sortBy)) {
         this.state.sortBy = this.sortBy;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.globalFilterValue, this.globalFilterValue)) {
+      if (!this.kupManager.objects.deepEqual(this.state.globalFilterValue, this.globalFilterValue)) {
         this.state.globalFilterValue = this.globalFilterValue;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.pageSelected, this.currentPage)) {
+      if (!this.kupManager.objects.deepEqual(this.state.pageSelected, this.currentPage)) {
         this.state.pageSelected = this.currentPage;
         somethingChanged = true;
       }
-      if (!deepEqual(this.state.rowsPerPage, this.currentRowsPerPage)) {
+      if (!this.kupManager.objects.deepEqual(this.state.rowsPerPage, this.currentRowsPerPage)) {
         this.state.rowsPerPage = this.currentRowsPerPage;
         somethingChanged = true;
       }
@@ -201,7 +201,7 @@ export class KupBox {
         const prefix = currentIndex > 0 ? ';' : '';
         return accumulator + prefix + row.id;
       }, '');
-      if (!deepEqual(this.state.selectedRowsState, selectedRowsState)) {
+      if (!this.kupManager.objects.deepEqual(this.state.selectedRowsState, selectedRowsState)) {
         this.state.selectedRowsState = selectedRowsState;
         somethingChanged = true;
       }
@@ -1207,13 +1207,13 @@ export class KupBox {
       // creating items
       const visibleColumnsItems = this.visibleColumns.map((column) => {
         const item = {
-          text: column.title,
-          value: column.name,
+          value: column.title,
+          id: column.name,
           selected: column.name === this.sortBy,
         };
         return item;
       });
-      const items = [{ text: '', value: '' }, ...visibleColumnsItems];
+      const items = [{ value: '', id: '' }, ...visibleColumnsItems];
       let textfieldData = {
         label: this.kupManager.language.translate(KupLanguageGeneric.SORT_BY),
         trailingIcon: true,

package/dist/collection/components/kup-button-list/kup-button-list.js

@@ -82,7 +82,7 @@ export class KupButtonList {
     if (newData.columns) {
       this.kupManager.debug.logMessage(this, 'Detected KupDataDataset: converting rows to nodes.', KupDebugCategory.WARNING);
       const data = this.data;
-      this.data = this.kupManager.data.datasetOperations.row.toNode(data);
+      this.data = this.kupManager.data.row.toNode(data);
     }
   }
   /*-------------------------------------------------*/
@@ -216,10 +216,10 @@ export class KupButtonList {
     return data;
   }
   getKupListDataForChildren(children) {
-    let ris = [];
+    const ris = [];
     for (let i = 0; i < children.length; i++) {
-      let tn = children[i];
-      ris.push({ text: tn.value, icon: tn.icon, value: i.toString() });
+      const tn = children[i];
+      ris.push({ icon: tn.icon, id: i.toString(), value: tn.value });
     }
     return ris;
   }

package/dist/collection/components/kup-card/built-in/kup-card-built-in.js

@@ -3,6 +3,7 @@ import { KupCardCSSClasses } from '../kup-card-declarations';
 import { prepareCalendar } from './kup-card-calendar';
 import { prepareClock } from './kup-card-clock';
 import { prepareColumnDropMenu } from './kup-card-column-drop-menu';
+import { prepareNumeric } from './kup-card-numeric';
 /**
  * 1st built-in layout, calendar view.
  * @param {KupCard} component - Card component.
@@ -36,3 +37,12 @@ export function create3(component) {
 export function create4(component) {
   return (h("div", { class: `built-in-layout-${component.layoutNumber} ${KupCardCSSClasses.BUILT_IN_CARD}` }));
 }
+/**
+ * 5th built-in layout, numeric picker.
+ * This layout is rendered after the render cycle completes.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 4th built-in layout virtual node.
+ */
+export function create5(component) {
+  return (h("div", { class: `built-in-layout-${component.layoutNumber} ${KupCardCSSClasses.BUILT_IN_CARD}` }, prepareNumeric(component)));
+}

package/dist/collection/components/kup-card/built-in/kup-card-column-drop-menu.js

@@ -44,16 +44,16 @@ function prepareList(options) {
   const listData = [];
   if (options.enableMerge) {
     listData.push({
-      text: dom.ketchup.language.translate(KupLanguageGeneric.MERGE),
-      value: KupLanguageGeneric.MERGE,
       icon: 'library_add',
+      id: KupLanguageGeneric.MERGE,
+      value: dom.ketchup.language.translate(KupLanguageGeneric.MERGE),
     });
   }
   if (options.enableMove) {
     listData.push({
-      text: dom.ketchup.language.translate(KupLanguageGeneric.MOVE),
-      value: KupLanguageGeneric.MOVE,
       icon: 'swap_horiz',
+      id: KupLanguageGeneric.MOVE,
+      value: dom.ketchup.language.translate(KupLanguageGeneric.MOVE),
     });
   }
   return listData.length > 0 ? (h("kup-list", { data: listData, showIcons: true, "onkup-list-click": (e) => listClick(e, options) })) : null;
@@ -64,29 +64,29 @@ function prepareCombobox(options, numericalColumnsExist) {
     dom.ketchup.objects.isNumber(options.starterColumn.obj);
   if (numeric) {
     comboListData.push({
-      text: dom.ketchup.language.translate(KupLanguageTotals.AVERAGE),
-      value: KupLanguageTotals.AVERAGE,
+      id: KupLanguageTotals.AVERAGE,
+      value: dom.ketchup.language.translate(KupLanguageTotals.AVERAGE),
     }, {
-      text: dom.ketchup.language.translate(KupLanguageTotals.DIFFERENCE),
-      value: KupLanguageTotals.DIFFERENCE,
+      id: KupLanguageTotals.DIFFERENCE,
+      value: dom.ketchup.language.translate(KupLanguageTotals.DIFFERENCE),
     }, {
-      text: dom.ketchup.language.translate(KupLanguageTotals.PRODUCT),
-      value: KupLanguageTotals.PRODUCT,
+      id: KupLanguageTotals.PRODUCT,
+      value: dom.ketchup.language.translate(KupLanguageTotals.PRODUCT),
     }, {
-      text: dom.ketchup.language.translate(KupLanguageTotals.SUM),
-      value: KupLanguageTotals.SUM,
+      id: KupLanguageTotals.SUM,
+      value: dom.ketchup.language.translate(KupLanguageTotals.SUM),
     }, {
-      text: `[${options.starterColumn.name}] / [${options.receivingColumn.name}] * 100`,
-      value: `([${options.starterColumn.name}]/[${options.receivingColumn.name}])*100`,
+      id: `([${options.starterColumn.name}]/[${options.receivingColumn.name}])*100`,
+      value: `[${options.starterColumn.name}] / [${options.receivingColumn.name}] * 100`,
     }, {
-      text: `[${options.receivingColumn.name}] / [${options.starterColumn.name}] * 100`,
-      value: `([${options.receivingColumn.name}]/[${options.starterColumn.name}])*100`,
+      id: `([${options.receivingColumn.name}]/[${options.starterColumn.name}])*100`,
+      value: `[${options.receivingColumn.name}] / [${options.starterColumn.name}] * 100`,
     });
   }
   else {
     comboListData.push({
-      text: dom.ketchup.language.translate(KupLanguageColumn.NO_FORMULA),
-      value: KupLanguageColumn.NO_FORMULA,
+      id: KupLanguageColumn.NO_FORMULA,
+      value: dom.ketchup.language.translate(KupLanguageColumn.NO_FORMULA),
     });
   }
   const comboData = {
@@ -139,7 +139,7 @@ async function applyFormula(component) {
   if (combobox) {
     const value = (await combobox.getValue());
     if (premadeFormulas.includes(value)) {
-      dom.ketchup.data.datasetOperations.column.new(options.data, KupDataNewColumnTypes.MATH, {
+      dom.ketchup.data.column.new(options.data, KupDataNewColumnTypes.MATH, {
         columns: [
           options.receivingColumn.name,
           options.starterColumn.name,
@@ -151,7 +151,7 @@ async function applyFormula(component) {
       }
     }
     else {
-      const result = dom.ketchup.data.datasetOperations.column.new(options.data, KupDataNewColumnTypes.MATH, {
+      const result = dom.ketchup.data.column.new(options.data, KupDataNewColumnTypes.MATH, {
         operation: value,
       });
       if (typeof result === 'string' || result instanceof String) {

package/dist/collection/components/kup-card/built-in/kup-card-numeric.js

@@ -0,0 +1,153 @@
+import { h } from '@stencil/core';
+import { FButton } from '../../../f-components/f-button/f-button';
+const dom = document.documentElement;
+const maximumFractionDigits = 14;
+export function prepareNumeric(component) {
+  const el = component.rootElement;
+  if (!el.kupData)
+    el.kupData = {
+      value: null,
+      localeValue: '',
+    };
+  let decimals = false;
+  let negative = false;
+  const options = getOptions(component);
+  if (options.resetStatus) {
+    el.kupData = {
+      value: null,
+      localeValue: '',
+    };
+    const obj = options.initialValue;
+    if (options.initialValue) {
+      if (obj && obj.k)
+        el.kupData.value = obj.k;
+      else
+        el.kupData.value = options.initialValue.toString();
+      el.kupData.localeValue = dom.ketchup.math.numbers.toLocaleString(el.kupData.value);
+    }
+    options.resetStatus = false;
+  }
+  if (options.negative)
+    negative = true;
+  if (options.decimals)
+    decimals = true;
+  const clearButtonProp = {
+    icon: 'cancel',
+    onClick: () => clearValue(component),
+  };
+  const saveButtonProp = {
+    icon: 'save',
+    onClick: () => saveValue(component),
+  };
+  const decChar = getDecimalChar();
+  return (h("table", null,
+    h("tr", null,
+      h("td", { colSpan: 3 },
+        h("div", { class: "value" }, el.kupData.localeValue))),
+    h("tr", null,
+      h("td", null,
+        h("div", { class: "number", onClick: () => setValue(component, '1') }, "1")),
+      h("td", null,
+        h("div", { class: "number", onClick: () => setValue(component, '2') }, "2")),
+      h("td", null,
+        h("div", { class: "number", onClick: () => setValue(component, '3') }, "3"))),
+    h("tr", null,
+      h("td", null,
+        h("div", { class: "number", onClick: () => setValue(component, '4') }, "4")),
+      h("td", null,
+        h("div", { class: "number", onClick: () => setValue(component, '5') }, "5")),
+      h("td", null,
+        h("div", { class: "number", onClick: () => setValue(component, '6') }, "6"))),
+    h("tr", null,
+      h("td", null,
+        h("div", { class: "number", onClick: () => setValue(component, '7') }, "7")),
+      h("td", null,
+        h("div", { class: "number", onClick: () => setValue(component, '8') }, "8")),
+      h("td", null,
+        h("div", { class: "number", onClick: () => setValue(component, '9') }, "9"))),
+    h("tr", null,
+      h("td", null, negative
+        ? [
+          h("div", { class: "number", onClick: () => setSign(component) }, "-"),
+        ]
+        : []),
+      h("td", null,
+        h("div", { class: "number", onClick: () => setValue(component, '0') }, "0")),
+      h("td", null, decimals
+        ? [
+          h("div", { class: "number", onClick: () => setValue(component, '.') }, decChar),
+        ]
+        : [])),
+    h("tr", null,
+      h("td", null),
+      h("td", null,
+        h(FButton, Object.assign({}, clearButtonProp))),
+      h("td", null,
+        h(FButton, Object.assign({}, saveButtonProp))))));
+}
+function getOptions(component) {
+  if (component.data.options)
+    return component.data.options;
+  else
+    return { resetStatus: false };
+}
+function setSign(component) {
+  const el = component.rootElement;
+  let strVal = el.kupData.value ? el.kupData.value : '0';
+  if (strVal.startsWith('-'))
+    return;
+  strVal = '-' + strVal;
+  el.kupData.value = strVal;
+  el.kupData.localeValue = dom.ketchup.math.numbers.toLocaleString(strVal);
+  component.refresh();
+}
+function setValue(component, value) {
+  const options = getOptions(component);
+  const el = component.rootElement;
+  const decChar = '.';
+  let strVal = el.kupData.value ? el.kupData.value.toString() : '0';
+  // if the first value is 0 and the character you want to insert is not a comma, I clear the field.
+  if (strVal == '0' && value != decChar) {
+    strVal = '';
+  }
+  // if I have already entered a decimal sign I stop.
+  if (value == decChar && strVal.includes(decChar))
+    return;
+  // if the text field contains the maximum number entered, excluding the comma, I stop.
+  if (options.maxLength &&
+    strVal.replace(decChar, '').length == options.maxLength)
+    return;
+  // if a maximum number of integers is required, and I don't have the comma, I check to be right with the values.
+  if (options.maxIntegers &&
+    value != decChar &&
+    !strVal.includes(decChar) &&
+    strVal.length == options.maxIntegers)
+    return;
+  // if a maximum number of decimals has been requested, check where we are.
+  if (options.maxDecimals &&
+    strVal.includes(decChar) &&
+    strVal.substring(strVal.indexOf(decChar) + 1).length ==
+      options.maxDecimals)
+    return;
+  // if the maximum number of decimals in JS has been reached, I stop.
+  if (strVal.includes(decChar) &&
+    strVal.substring(strVal.indexOf(decChar) + 1).length == 14)
+    return;
+  strVal += value;
+  el.kupData.value = strVal;
+  el.kupData.localeValue = dom.ketchup.math.numbers.toLocaleString(strVal);
+  component.refresh();
+}
+function clearValue(component) {
+  const el = component.rootElement;
+  el.kupData.value = null;
+  el.kupData.localeValue = '';
+  component.refresh();
+}
+function getDecimalChar() {
+  return (0.1).toLocaleString(dom.ketchup.math.locale).substring(1, 2);
+}
+function saveValue(component) {
+  const el = component.rootElement;
+  component.onKupClick(component.rootElement.id, el.kupData.value ? Number(el.kupData.value).toString() : '');
+}

package/dist/collection/components/kup-card/kup-card.css

@@ -766,6 +766,41 @@
   outline: none;
 }
 
+.built-in-layout-5 {
+  background: var(--kup-background-color);
+  box-shadow: var(--kup-box-shadow);
+  box-sizing: border-box;
+  overflow: auto;
+  padding: 0.5em;
+}
+.built-in-layout-5 > table {
+  width: 100%;
+}
+.built-in-layout-5 > table > tr > td > div.value {
+  text-align: right;
+  color: var(--kup-primary-color);
+  border-bottom: 1px solid var(--kup-border-color);
+  min-height: 1.5em;
+}
+.built-in-layout-5 > table > tr > td > .f-button {
+  display: flex;
+  justify-content: center;
+}
+.built-in-layout-5 > table > tr > td > div.number {
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  line-height: 2.5em;
+  margin: auto;
+  width: 2.5em;
+  transition: background-color 0.25s;
+  text-transform: capitalize;
+}
+.built-in-layout-5 > table > tr > td > div.number:hover {
+  background-color: var(--kup-hover-background-color);
+}
+
 .collapsible-layout-1 {
   color: var(--kup-text-color);
   box-shadow: 0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);

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

@@ -351,6 +351,7 @@ export class KupCard {
     root.addEventListener('kup-timepicker-textfieldsubmit', this.cardEvent);
     root.addEventListener('kup-tree-dynamicmassexpansion', this.cardEvent);
     root.addEventListener('kup-tree-buttonclick', this.cardEvent);
+    root.addEventListener('kup-tree-didunload', this.cardEvent);
     root.addEventListener('kup-tree-nodecollapse', this.cardEvent);
     root.addEventListener('kup-tree-nodedblclick', this.cardEvent);
     root.addEventListener('kup-tree-nodeexpand', this.cardEvent);

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

@@ -46,7 +46,7 @@ export class KupChip {
     const isChoice = this.type.toLowerCase() === FChipType.CHOICE;
     const isFilter = this.type.toLowerCase() === FChipType.FILTER;
     if (isChoice) {
-      this.kupManager.data.datasetOperations.node.setProperties(this.data, { checked: false }, true, [chip]);
+      this.kupManager.data.node.setProperties(this.data, { checked: false }, true, [chip]);
     }
     if (isChoice || isFilter) {
       chip.checked = chip.checked ? false : true;
@@ -69,7 +69,7 @@ export class KupChip {
     this.kupIconClick.emit({
       comp: this,
       id: this.rootElement.id,
-      chip: this.kupManager.data.datasetOperations.node.remove(this.data, chip),
+      chip: this.kupManager.data.node.remove(this.data, chip),
     });
     this.refresh();
   }
@@ -83,7 +83,7 @@ export class KupChip {
     if (newData.columns) {
       this.kupManager.debug.logMessage(this, 'Detected KupDataDataset: converting rows to nodes.', KupDebugCategory.WARNING);
       const data = this.data;
-      this.data = this.kupManager.data.datasetOperations.row.toNode(data);
+      this.data = this.kupManager.data.row.toNode(data);
     }
   }
   /*-------------------------------------------------*/
@@ -176,7 +176,7 @@ export class KupChip {
       props.onExpansionClick.push((chip, e) => {
         chip.isExpanded = !chip.isExpanded ? true : false;
         if (e.ctrlKey && chip.children && chip.children.length > 0) {
-          this.kupManager.data.datasetOperations.node.setProperties(chip.children, { isExpanded: chip.isExpanded }, true);
+          this.kupManager.data.node.setProperties(chip.children, { isExpanded: chip.isExpanded }, true);
         }
         this.refresh();
       });

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

@@ -808,8 +808,8 @@ _KupCombobox_kupManager = new WeakMap(), _KupCombobox_elStyle = new WeakMap(), _
   __classPrivateFieldGet(this, _KupCombobox_kupManager, "f").removeClickCallback(__classPrivateFieldGet(this, _KupCombobox_clickCb, "f"));
 }, _KupCombobox_isListOpened = function _KupCombobox_isListOpened() {
   return __classPrivateFieldGet(this, _KupCombobox_listEl, "f").menuVisible == true;
-}, _KupCombobox_consistencyCheck = function _KupCombobox_consistencyCheck(e, valueIn, setValue) {
-  let ret = consistencyCheck(valueIn, this.data['kup-list'], __classPrivateFieldGet(this, _KupCombobox_listEl, "f"), this.selectMode, this.displayMode, e);
+}, _KupCombobox_consistencyCheck = function _KupCombobox_consistencyCheck(e, idIn, setValue) {
+  let ret = consistencyCheck(idIn, this.data['kup-list'], __classPrivateFieldGet(this, _KupCombobox_listEl, "f"), this.selectMode, this.displayMode, e);
   if (ret.exists && setValue) {
     this.value = ret.value;
     this.displayedValue = ret.displayedValue;
@@ -818,10 +818,10 @@ _KupCombobox_kupManager = new WeakMap(), _KupCombobox_elStyle = new WeakMap(), _
     }
   }
   else {
-    this.value = valueIn;
-    this.displayedValue = valueIn;
+    this.value = idIn;
+    this.displayedValue = idIn;
     if (__classPrivateFieldGet(this, _KupCombobox_listEl, "f") != null) {
-      __classPrivateFieldGet(this, _KupCombobox_listEl, "f").filter = valueIn;
+      __classPrivateFieldGet(this, _KupCombobox_listEl, "f").filter = idIn;
     }
   }
   return ret;

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

@@ -40,8 +40,6 @@ export var KupDataTableProps;
   KupDataTableProps["rowActions"] = "Sets the actions of the rows.";
   KupDataTableProps["rowsPerPage"] = "Sets the number of rows per page to display.";
   KupDataTableProps["scrollOnHover"] = "Activates the scroll on hover function.";
-  KupDataTableProps["selectRow"] = "Selects the row at the specified rendered rows prosition (base 1).";
-  KupDataTableProps["selectRowsById"] = "Semicolon separated rows id to select.";
   KupDataTableProps["showCustomization"] = "If set to true, displays the button to open the customization panel.";
   KupDataTableProps["showFilters"] = "When set to true enables the column filters.";
   KupDataTableProps["showFooter"] = "When set to true shows the footer.";