@sme.up/ketchup 7.1.1 → 7.3.0

package/dist/collection/assets/echart.js

@@ -3,6 +3,7 @@ const echart2 = document.getElementById('mapchart');
 const echart3 = document.getElementById('gaussianchart');
 const echart4 = document.getElementById('gaussian1chart');
 const echart5 = document.getElementById('gaussian2chart');
+const echart6 = document.getElementById('funnelChart');
 
 const mockData = {
     columns: [
@@ -476,6 +477,151 @@ echart5.data = {
     columns: testMockColumns,
     rows: testMockRows,
 };
+
+echart6.consistencyCheck = true;
+echart6.types = ['Funnel'];
+echart6.colors = ['blue'];
+echart6.axis = 'Col1';
+echart6.chartTitle = {
+    value: 'Funnel',
+    color: 'red',
+    position: 'top',
+    size: 16,
+};
+echart6.data = {
+    columns: [
+        {
+            name: 'Col1',
+            title: 'Person',
+            size: '10',
+        },
+        {
+            name: 'Col2',
+            title: 'Value1',
+            size: '10',
+        },
+        {
+            name: 'Col3',
+            title: 'Value2',
+            size: '10',
+        },
+        {
+            name: 'Col4',
+            title: 'Value3',
+            size: '10',
+        },
+    ],
+    rows: [
+        {
+            cells: {
+                Col1: {
+                    obj: {
+                        t: 'CN',
+                        p: 'COL',
+                        k: 'CASFRA',
+                    },
+                    value: 'CASFRA',
+                },
+                Col2: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '10',
+                    },
+                    value: '10',
+                },
+                Col3: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '100.60',
+                    },
+                    value: '100.60',
+                },
+                Col4: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '55',
+                    },
+                    value: '55',
+                },
+            },
+        },
+        {
+            cells: {
+                Col1: {
+                    obj: {
+                        t: 'CN',
+                        p: 'COL',
+                        k: 'DELGIO',
+                    },
+                    value: 'DELGIO',
+                },
+                Col2: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '6',
+                    },
+                    value: '6',
+                },
+                Col3: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '67.8',
+                    },
+                    value: '67.8',
+                },
+                Col4: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '33',
+                    },
+                    value: '33',
+                },
+            },
+        },
+        {
+            cells: {
+                Col1: {
+                    obj: {
+                        t: 'CN',
+                        p: 'COL',
+                        k: 'PARFRA',
+                    },
+                    value: 'PARFRA',
+                },
+                Col2: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '5',
+                    },
+                    value: '5',
+                },
+                Col3: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '120.06',
+                    },
+                    value: '120.06',
+                },
+                Col4: {
+                    obj: {
+                        t: 'NR',
+                        p: '',
+                        k: '77',
+                    },
+                    value: '77',
+                },
+            },
+        },
+    ],
+};
 document.addEventListener('kup-echart-click', (e) => {
     console.log(e);
 });

package/dist/collection/assets/index.js

@@ -86,6 +86,10 @@ components.data = [
         value: 'Date picker',
         id: 'date-picker.html',
     },
+    {
+        value: 'Dialog',
+        id: 'dialog.html',
+    },
     {
         value: 'Drawer',
         id: 'drawer.html',

package/dist/collection/collection-manifest.json

@@ -22,6 +22,7 @@
     "./components/kup-dash-list/kup-dash-list.js",
     "./components/kup-dashboard/kup-dashboard.js",
     "./components/kup-date-picker/kup-date-picker.js",
+    "./components/kup-dialog/kup-dialog.js",
     "./components/kup-drawer/kup-drawer.js",
     "./components/kup-echart/kup-echart.js",
     "./components/kup-family-tree/kup-family-tree.js",
@@ -50,8 +51,8 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.20.0",
-    "typescriptVersion": "4.8.4"
+    "version": "3.0.1",
+    "typescriptVersion": "4.9.5"
   },
   "collections": [],
   "bundles": []

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

@@ -74,6 +74,7 @@ export class KupAutocomplete {
         id: this.rootElement.id,
         value: this.value,
         inputValue: __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value,
+        node: ret.node,
       });
     }
   }
@@ -95,7 +96,7 @@ export class KupAutocomplete {
   }
   onKupInput() {
     __classPrivateFieldSet(this, _KupAutocomplete_doConsistencyCheck, true, "f");
-    __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value, false);
+    const ret = __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_consistencyCheck).call(this, __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value, false);
     __classPrivateFieldGet(this, _KupAutocomplete_instances, "m", _KupAutocomplete_openList).call(this, false);
     if (__classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value.length >= this.minimumChars) {
       this.kupInput.emit({
@@ -103,6 +104,7 @@ export class KupAutocomplete {
         id: this.rootElement.id,
         value: this.value,
         inputValue: __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value,
+        node: ret.node,
       });
     }
   }
@@ -134,6 +136,7 @@ export class KupAutocomplete {
       id: this.rootElement.id,
       value: this.value,
       inputValue: __classPrivateFieldGet(this, _KupAutocomplete_textfieldEl, "f").value,
+      node: e.detail.selected,
     });
   }
   /*-------------------------------------------------*/

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

@@ -3,7 +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 { prepareForm } from './kup-card-form';
+import { prepareMessageBox } from './kup-card-message-box';
 import { prepareNumeric } from './kup-card-numeric';
 /**
  * 1st built-in layout, calendar view.
@@ -47,10 +47,10 @@ export function create5(component) {
   return (h("div", { class: `built-in-layout-${component.layoutNumber} ${KupCardCSSClasses.BUILT_IN_CARD}` }, prepareNumeric(component)));
 }
 /**
- * 6th built-in layout, form with submit button.
+ * 6th built-in layout, message box with confirm and cancel buttons.
  * @param {KupCard} component - Card component.
  * @returns {VNode} 6th built-in layout virtual node.
  */
 export function create6(component) {
-  return (h("div", { class: `built-in-layout-${component.layoutNumber} ${KupCardCSSClasses.BUILT_IN_CARD}` }, prepareForm(component)));
+  return (h("div", { class: `built-in-layout-${component.layoutNumber} ${KupCardCSSClasses.BUILT_IN_CARD}` }, prepareMessageBox(component)));
 }

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

@@ -0,0 +1,10 @@
+import { h } from '@stencil/core';
+import { FButton } from '../../../f-components/f-button/f-button';
+import { FButtonStyling } from '../../../f-components/f-button/f-button-declarations';
+import { KupLanguageGeneric } from '../../../managers/kup-language/kup-language-declarations';
+const dom = document.documentElement;
+export function prepareMessageBox(component) {
+  const options = component.data.options;
+  const buttonsExist = !!(options.cancelCb || options.confirmCb);
+  return (h("div", { class: "message-box" }, options.text ? h("div", { class: "text" }, options.text) : null, buttonsExist ? (h("div", { class: "button-wrapper" }, options.cancelCb ? (h(FButton, { icon: "clear", label: dom.ketchup.language.translate(KupLanguageGeneric.ABORT), onClick: options.cancelCb, styling: FButtonStyling.FLAT })) : null, options.confirmCb ? (h(FButton, { icon: "check", label: dom.ketchup.language.translate(KupLanguageGeneric.CONFIRM), onClick: options.confirmCb })) : null)) : null));
+}

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

@@ -116,6 +116,18 @@ export function create6(component) {
     : [];
   return (h("div", { class: `dialog-layout-${component.layoutNumber}` }, textArray[0] ? dialogHeader(textArray[0]) : dialogHeader(''), h("div", { class: "section-1" }, datatableArray.length > 0 ? (h("kup-data-table", Object.assign({ id: "datatable1" }, datatableArray[0]))) : (h("kup-spinner", { active: true, dimensions: "7px", layout: 14 })))));
 }
+/**
+ * 7th dialog card layout, a raw slot.
+ * @param {KupCard} component - Card component.
+ * @returns {VNode} 1st standard layout virtual node.
+ */
+export function create7(component) {
+  //Dialog title
+  const textArray = component.data && component.data['text'] ? component.data['text'] : [];
+  //Slot list
+  const slots = Array.prototype.slice.call(component.rootElement.children, 0);
+  return (h("div", { class: `dialog-layout-${component.layoutNumber}` }, textArray[0] ? dialogHeader(textArray[0]) : dialogHeader(''), slots.length > 0 ? compList(slots, 'slot') : null));
+}
 /**
  * Invoked by 4th layout to switch to the previous record of the original data table.
  * Reminder: data table inside 4th layout should be transposed and valid columns should be named with numbers (strings, but numerical).

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

@@ -1079,7 +1079,18 @@
   position: relative;
   width: 100%;
   overflow: auto;
-  padding: 0.5em;
+  padding: 2em;
+}
+.built-in-layout-6 .text {
+  padding-bottom: 1.5em;
+  text-align: center;
+}
+.built-in-layout-6 .button-wrapper {
+  display: flex;
+  justify-content: center;
+}
+.built-in-layout-6 .f-button {
+  padding: 0 0.5em;
 }
 
 .collapsible-layout-1 {
@@ -2851,16 +2862,6 @@
   width: var(--kup_card_width);
 }
 
-:host([show-modal]) #kup-component {
-  position: fixed;
-  z-index: var(--kup-card-zindex);
-  height: var(--kup_card_height);
-  width: var(--kup_card_width);
-  top: var(--kup_card_top);
-  left: var(--kup_card_left);
-  display: var(--kup_card_display, none);
-}
-
 :host([is-menu]) {
   display: none;
   animation: fade-in 0.25s ease-out;
@@ -2876,18 +2877,6 @@
   width: 100%;
 }
 
-.backdrop {
-  background: var(--kup_card_backdrop);
-  display: none;
-  height: 100%;
-  left: 0;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: calc(var(--kup-card-zindex) - 1);
-  display: block;
-}
-
 .mdc-ripple-surface {
   cursor: pointer;
   flex-direction: column;

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

@@ -45,7 +45,6 @@ export class KupCard {
     this.layoutFamily = KupCardFamily.STANDARD;
     this.layoutNumber = 1;
     this.menuVisible = false;
-    this.showModal = false;
     this.sizeX = '100%';
     this.sizeY = '100%';
   }
@@ -414,13 +413,6 @@ export class KupCard {
       }, 0);
     }
     this.kupManager.debug.logRender(this, true);
-    if (this.showModal) {
-      this.rootElement.style.setProperty('--kup_card_left', window.innerWidth / 2 - this.rootElement.clientWidth / 2 + 'px');
-      this.rootElement.style.setProperty('--kup_card_top', window.innerHeight / 2 -
-        this.rootElement.clientHeight / 2 +
-        'px');
-      this.rootElement.style.setProperty('--kup_card_display', 'block');
-    }
   }
   render() {
     if (!this.data && this.rootElement.children.length < 1) {
@@ -430,17 +422,7 @@ export class KupCard {
       '--kup_card_height': this.sizeY ? this.sizeY : '100%',
       '--kup_card_width': this.sizeX ? this.sizeX : '100%',
     };
-    const backdropComp = this.showModal ? (h("div", { class: "backdrop", onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }, onPointerDown: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }, onTouchStart: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      } })) : null;
-    return (h(Host, { style: style }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), backdropComp, h("div", { id: componentWrapperId, onClick: () => this.onKupClick(null, null), ref: (el) => (this.componentWrapper = el) }, this.getLayout())));
+    return (h(Host, { style: style }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, onClick: () => this.onKupClick(null, null), ref: (el) => (this.componentWrapper = el) }, this.getLayout())));
   }
   disconnectedCallback() {
     this.kupManager.interact.unregister([this.rootElement]);
@@ -599,27 +581,6 @@ export class KupCard {
         "reflect": true,
         "defaultValue": "false"
       },
-      "showModal": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "false"
-            }],
-          "text": "Sets the card as modal window"
-        },
-        "attribute": "show-modal",
-        "reflect": true,
-        "defaultValue": "false"
-      },
       "sizeX": {
         "type": "string",
         "mutable": false,

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

@@ -6,5 +6,7 @@ export var KupChipProps;
 (function (KupChipProps) {
   KupChipProps["customStyle"] = "Custom style of the component.";
   KupChipProps["data"] = "List of elements.";
+  KupChipProps["displayId"] = "When enabled, the chip's text will display both the id and the value.";
+  KupChipProps["enableInput"] = "When enabled, it's possible to add items to the chip's dataset through an input slot (kup-autocomplete, kup-combobox, kup-text-field).";
   KupChipProps["type"] = "The type of chip. Available types: input, filter, choice or empty for default.";
 })(KupChipProps || (KupChipProps = {}));

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

@@ -1,3 +1,11 @@
+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);
+};
+var _KupChip_instances, _KupChip_changeHandler, _KupChip_stringifiedValues;
 import { forceUpdate, h, Host, } from '@stencil/core';
 import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { FChip } from '../../f-components/f-chip/f-chip';
@@ -8,6 +16,7 @@ import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
 export class KupChip {
   constructor() {
+    _KupChip_instances.add(this);
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
@@ -17,6 +26,8 @@ export class KupChip {
     this.kupManager = kupManagerInstance();
     this.customStyle = '';
     this.data = [];
+    this.displayId = false;
+    this.enableInput = false;
     this.type = FChipType.STANDARD;
   }
   onKupBlur(chip) {
@@ -55,6 +66,11 @@ export class KupChip {
       id: this.rootElement.id,
       chip: this.kupManager.data.node.remove(this.data, chip),
     });
+    this.kupChange.emit({
+      comp: this,
+      id: this.rootElement.id,
+      stringifiedValues: __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_stringifiedValues).call(this),
+    });
     this.refresh();
   }
   /*-------------------------------------------------*/
@@ -130,11 +146,13 @@ export class KupChip {
     this.kupManager.debug.logRender(this, true);
   }
   render() {
+    var _a;
     const props = {
       danger: this.rootElement.classList.contains('kup-danger')
         ? true
         : false,
       data: this.data,
+      displayId: this.displayId,
       info: this.rootElement.classList.contains('kup-info')
         ? true
         : false,
@@ -167,10 +185,13 @@ export class KupChip {
       props.onFocus.push((chip) => this.onKupFocus(chip));
       props.onIconClick.push((chip) => this.onKupIconClick(chip));
     }
-    if (!this.data || this.data.length === 0) {
-      return;
-    }
-    return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h(FChip, Object.assign({}, props)))));
+    return (h(Host, { "onKup-autocomplete-change": (e) => {
+        __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
+      }, "onKup-combobox-change": (e) => {
+        __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
+      }, "onKup-textfield-change": (e) => {
+        __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_changeHandler).call(this, e);
+      } }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) > 0 ? h(FChip, Object.assign({}, props)) : null, h("slot", { name: "field" }))));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);
@@ -237,6 +258,48 @@ export class KupChip {
         },
         "defaultValue": "[]"
       },
+      "displayId": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "When enabled, the chip's text will display both the id and the value."
+        },
+        "attribute": "display-id",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "enableInput": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "When enabled, it's possible to add items to the chip's dataset through an input slot (kup-autocomplete, kup-combobox, kup-text-field)."
+        },
+        "attribute": "enable-input",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "type": {
         "type": "string",
         "mutable": false,
@@ -286,6 +349,26 @@ export class KupChip {
             }
           }
         }
+      }, {
+        "method": "kupChange",
+        "name": "kup-chip-change",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Triggered when the chip dataset changes."
+        },
+        "complexType": {
+          "original": "KupChipChangeEventPayload",
+          "resolved": "KupChipChangeEventPayload",
+          "references": {
+            "KupChipChangeEventPayload": {
+              "location": "import",
+              "path": "./kup-chip-declarations"
+            }
+          }
+        }
       }, {
         "method": "kupClick",
         "name": "kup-chip-click",
@@ -437,3 +520,38 @@ export class KupChip {
       }];
   }
 }
+_KupChip_instances = new WeakSet(), _KupChip_changeHandler =
+  /*-------------------------------------------------*/
+  /*           P r i v a t e   M e t h o d s         */
+  /*-------------------------------------------------*/
+  async function _KupChip_changeHandler(e) {
+    var _a, _b;
+    e.stopPropagation();
+    const value = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.value;
+    const listNode = e.detail.node;
+    if (value) {
+      const node = (_b = this.data) === null || _b === void 0 ? void 0 : _b.find((node) => node.id === value);
+      if (!node) {
+        this.data = [
+          ...this.data,
+          {
+            id: listNode ? listNode.id : value,
+            value: listNode ? listNode.value : value,
+          },
+        ];
+        const slot = this.rootElement.querySelector('[slot=field]');
+        await slot.setValue('');
+        await slot.refresh();
+        await slot.setFocus();
+        this.kupChange.emit({
+          comp: this,
+          id: this.rootElement.id,
+          stringifiedValues: __classPrivateFieldGet(this, _KupChip_instances, "m", _KupChip_stringifiedValues).call(this),
+        });
+      }
+    }
+  }, _KupChip_stringifiedValues = function _KupChip_stringifiedValues() {
+  let stringifiedValues = '';
+  this.data.forEach((node) => (stringifiedValues += node.id + ';'));
+  return stringifiedValues;
+};

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

@@ -61,12 +61,13 @@ export class KupCombobox {
     });
   }
   onKupChange(value) {
-    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, value, true);
+    let ret = __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, value, true);
     this.kupChange.emit({
       comp: this,
       id: this.rootElement.id,
       value: this.value,
       inputValue: __classPrivateFieldGet(this, _KupCombobox_textfieldEl, "f").value,
+      node: ret.node,
     });
   }
   onKupClick() {
@@ -94,13 +95,14 @@ export class KupCombobox {
     });
   }
   onKupInput() {
-    __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, __classPrivateFieldGet(this, _KupCombobox_textfieldEl, "f").value, false);
+    let ret = __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_consistencyCheck).call(this, __classPrivateFieldGet(this, _KupCombobox_textfieldEl, "f").value, false);
     __classPrivateFieldGet(this, _KupCombobox_instances, "m", _KupCombobox_openList).call(this);
     this.kupInput.emit({
       comp: this,
       id: this.rootElement.id,
       value: this.value,
       inputValue: __classPrivateFieldGet(this, _KupCombobox_textfieldEl, "f").value,
+      node: ret.node,
     });
   }
   onKupIconClick() {

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

@@ -33,13 +33,16 @@ export class KupDashList {
       let valueInt = '';
       let valueDec = '';
       let iconColor = {
-        color: this.iconColor[count],
+        color: this.kupManager.theme.colorCheck(this.iconColor[count])
+          .hexColor,
       };
       let textColor = {
-        color: this.textColor[count],
+        color: this.kupManager.theme.colorCheck(this.textColor[count])
+          .hexColor,
       };
       let valueColor = {
-        color: this.valueColor[count],
+        color: this.kupManager.theme.colorCheck(this.valueColor[count])
+          .hexColor,
       };
       if (this.data.columns[0]) {
         icon = (h("div", { slot: "icon" }, h("icon", { class: r.cells[this.data.columns[0].name].obj.k, style: iconColor })));

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

@@ -5,8 +5,8 @@ export class KupDataTableState {
     this.expandGroups = false;
     this.groupLabelDisplay = GroupLabelDisplayMode.BOTH;
     this.density = 'small';
-    this.enableSortableColumns = false;
     this.enableExtraColumns = true;
+    this.enableSortableColumns = false;
     this.forceOneLine = false;
     this.globalFilter = false;
     this.globalFilterValue = '';