@sme.up/ketchup 8.0.2 → 8.2.0

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

@@ -1,431 +1,431 @@
-import { forceUpdate, h, Host, } from '@stencil/core';
-import { kupManagerInstance } from '../../managers/kup-manager/kup-manager';
-import { FButtonStyling } from '../../f-components/f-button/f-button-declarations';
-import { FImage } from '../../f-components/f-image/f-image';
-import { KupMagicBoxProps, KupMagicBoxDisplay, } from './kup-magic-box-declarations';
-import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
-import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
-import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
-import { getProps, setProps } from '../../utils/utils';
-import { componentWrapperId } from '../../variables/GenericVariables';
-import { kupDraggableColumnAttr, kupDraggableRowAttr, kupDropEvent, KupDropEventTypes, } from '../../managers/kup-interact/kup-interact-declarations';
-export class KupMagicBox {
-  constructor() {
-    /*-------------------------------------------------*/
-    /*       I n t e r n a l   V a r i a b l e s       */
-    /*-------------------------------------------------*/
-    this.dragHandler = null;
-    this.kupManager = kupManagerInstance();
-    this.textArea = null;
-    this.wrapperRef = null;
-    this.display = KupMagicBoxDisplay.DATATABLE;
-    this.customStyle = '';
-    this.data = null;
-  }
-  /*-------------------------------------------------*/
-  /*           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, KupMagicBoxProps, descriptions);
-  }
-  /**
-   * 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, KupMagicBoxProps, props);
-  }
-  /*-------------------------------------------------*/
-  /*           P r i v a t e   M e t h o d s         */
-  /*-------------------------------------------------*/
-  /**
-   * Sets the props of the combobox used to switch view.
-   * @returns {GenericObject} Combobox props.
-   */
-  comboboxProps() {
-    const listData = [];
-    for (const key in KupMagicBoxDisplay) {
-      if (Object.prototype.hasOwnProperty.call(KupMagicBoxDisplay, key)) {
-        listData.push({
-          id: KupMagicBoxDisplay[key],
-          selected: false,
-          value: KupMagicBoxDisplay[key],
-        });
-      }
-    }
-    return {
-      data: {
-        'kup-list': {
-          data: listData,
-          id: 'kup-debug-theme-changer-list',
-        },
-        'kup-text-field': {
-          emitSubmitEventOnEnter: false,
-          inputType: 'text',
-          label: this.kupManager.language.translate(KupLanguageGeneric.VIEW_AS),
-        },
-      },
-      id: 'comp-switcher',
-      initialValue: this.display,
-      isSelect: true,
-      ['onKup-combobox-itemclick']: (e) => {
-        this.display = e.detail.value;
-      },
-    };
-  }
-  /**
-   * Sets the content window.
-   * @returns {VNode[]} Virtual nodes of the content window.
-   */
-  setContent() {
-    const hasColumns = !!(this.data &&
-      this.data.columns &&
-      this.data.columns.length > 0);
-    const content = [];
-    const props = {};
-    if (this.display === KupMagicBoxDisplay.JSON) {
-      props.initialValue = this.data
-        ? JSON.stringify(this.data, null, 2)
-        : '';
-      props.textArea = true;
-      content.push(h("kup-text-field", Object.assign({ class: "kup-full-width kup-full-height" }, props, { ref: (el) => (this.textArea = el), "onkup-textfield-input": (e) => {
-          try {
-            this.data = JSON.parse(e.detail.value);
-          }
-          catch (error) {
-            this.data = {
-              columns: [{ name: 'ERROR', title: 'Error' }],
-              rows: [
-                {
-                  cells: {
-                    ERROR: {
-                      value: 'Invalid JSON:' + error,
-                    },
-                  },
-                },
-              ],
-            };
-          }
-        } })));
-    }
-    else if (!hasColumns) {
-      content.push(h("div", { class: "empty" }, h(FImage, { sizeY: "100px", resource: "move_to_inbox" }), h("div", { class: "empty-text" }, this.kupManager.language.translate(KupLanguageGeneric.DROP_YOUR_DATA))));
-    }
-    else {
-      switch (this.display) {
-        case KupMagicBoxDisplay.BOX:
-          props.data = this.data;
-          content.push(h("kup-box", Object.assign({}, props)));
-          break;
-        case KupMagicBoxDisplay.BUTTON_LIST:
-          props.data = this.data;
-          content.push(h("kup-button-list", Object.assign({}, props)));
-          break;
-        case KupMagicBoxDisplay.CHIP:
-          props.data = this.data;
-          content.push(h("kup-chip", Object.assign({}, props)));
-          break;
-        case KupMagicBoxDisplay.CHART:
-        case KupMagicBoxDisplay.ECHART:
-          props.data = this.data;
-          props['series'] = [];
-          props['axis'] = null;
-          for (let index = 0; index < this.data.columns.length; index++) {
-            const col = this.data.columns[index];
-            if ((col.obj &&
-              this.kupManager.objects.isNumber(col.obj)) ||
-              props['axis'] !== null) {
-              if (this.display === KupMagicBoxDisplay.CHART) {
-                props['series'].push({
-                  code: col.name,
-                  decode: col.title,
-                });
-              }
-              else {
-                props['series'].push(col.name);
-              }
-            }
-            else {
-              props['axis'] = col.name;
-            }
-          }
-          if (props['series'].length === 0) {
-            this.kupManager.debug.logMessage(this, 'Not enough numerical columns to display a chart!', KupDebugCategory.WARNING);
-          }
-          if (!props['axis']) {
-            this.kupManager.debug.logMessage(this, 'No axis for the chart!', KupDebugCategory.WARNING);
-          }
-          if (this.display === KupMagicBoxDisplay.CHART) {
-            content.push(h("kup-chart", Object.assign({}, props)));
-          }
-          else {
-            content.push(h("kup-echart", Object.assign({}, props)));
-          }
-          break;
-        case KupMagicBoxDisplay.DATATABLE:
-          props.data = this.data;
-          props['autoFillMissingCells'] = true;
-          content.push(h("kup-data-table", Object.assign({}, props)));
-          break;
-        case KupMagicBoxDisplay.TREE:
-          props.data = this.data;
-          content.push(h("kup-tree", Object.assign({ class: "kup-full-width" }, props)));
-          break;
-        default:
-          this.kupManager.debug.logMessage(this, 'Display mode not supported (' + this.display + ')!', KupDebugCategory.ERROR);
-          return;
-      }
-    }
-    return content;
-  }
-  /**
-   * When a kup-drop event is received, the data will be updated.
-   * @param {CustomEvent} e - kup-drop event.
-   */
-  updateData(e) {
-    {
-      const data = Object.assign({}, this.data);
-      const column = e.detail.sourceElement && e.detail.sourceElement.column
-        ? e.detail.sourceElement.column
-        : null;
-      const row = e.detail.sourceElement && e.detail.sourceElement.row
-        ? e.detail.sourceElement.row
-        : null;
-      if (column && column.name) {
-        if (!data.columns) {
-          data.columns = [column];
-        }
-        else {
-          const columnExists = this.data.columns.find((x) => x.name === column.name);
-          if (!columnExists) {
-            data.columns.push(column);
-          }
-        }
-      }
-      else {
-        this.kupManager.debug.logMessage(this, 'Invalid column received.', KupDebugCategory.WARNING);
-      }
-      if (row) {
-        if (!data.rows) {
-          data.rows = [row];
-        }
-        else {
-          data.rows.push(row);
-        }
-      }
-      this.data = data;
-      if (this.data && this.textArea) {
-        try {
-          this.textArea.setValue(JSON.stringify(this.data, null, 2));
-        }
-        catch (error) {
-          this.textArea.setValue('Invalid JSON:' + error);
-        }
-      }
-    }
-  }
-  /*-------------------------------------------------*/
-  /*          L i f e c y c l e   H o o k s          */
-  /*-------------------------------------------------*/
-  componentWillLoad() {
-    this.kupManager.debug.logLoad(this, false);
-    this.kupManager.language.register(this);
-    this.kupManager.theme.register(this);
-  }
-  componentDidLoad() {
-    this.rootElement.addEventListener(kupDropEvent, (e) => this.updateData(e));
-    this.dragHandler =
-      this.rootElement.shadowRoot.querySelector('#drag-handle');
-    this.kupManager.interact.dialogify(this.rootElement, this.dragHandler);
-    this.kupManager.interact.dropzone(this.wrapperRef, {
-      accept: `[${kupDraggableColumnAttr}],[${kupDraggableRowAttr}]`,
-    }, {
-      dispatcher: this.rootElement,
-      type: KupDropEventTypes.MAGICBOX,
-    });
-    this.kupManager.debug.logLoad(this, true);
-  }
-  componentWillRender() {
-    this.kupManager.debug.logRender(this, false);
-  }
-  componentDidRender() {
-    this.kupManager.debug.logRender(this, true);
-  }
-  render() {
-    return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h("div", { class: "magic-box-wrapper" }, h("div", { class: "actions", id: "drag-handle" }, h("kup-combobox", Object.assign({}, this.comboboxProps())), h("kup-button", { styling: FButtonStyling.FLAT, icon: "delete", label: "Reset", "onkup-button-click": () => {
-        this.data = null;
-      } }), h("kup-button", { id: "close-dialog", customStyle: `:host{${KupThemeColorValues.PRIMARY}: var(${KupThemeColorValues.TITLE});}`, icon: "clear", "onkup-button-click": () => {
-        this.kupManager.hideMagicBox();
-      } })), h("div", { class: "content", ref: (el) => (this.wrapperRef = el) }, this.setContent())))));
-  }
-  disconnectedCallback() {
-    this.kupManager.interact.unregister([
-      this.rootElement,
-      this.wrapperRef,
-    ]);
-    this.kupManager.language.unregister(this);
-    this.kupManager.theme.unregister(this);
-  }
-  static get is() { return "kup-magic-box"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["kup-magic-box.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["kup-magic-box.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "customStyle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"\""
-            }, {
-              "name": "see",
-              "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
-            }],
-          "text": "Custom style of the component."
-        },
-        "attribute": "custom-style",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "data": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "KupDataDataset",
-          "resolved": "KupDataDataset",
-          "references": {
-            "KupDataDataset": {
-              "location": "import",
-              "path": "../../managers/kup-data/kup-data-declarations"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "null"
-            }],
-          "text": "Sets the data that will be used to display different components."
-        },
-        "defaultValue": "null"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "display": {}
-    };
-  }
-  static get methods() {
-    return {
-      "getProps": {
-        "complexType": {
-          "signature": "(descriptions?: boolean) => Promise<GenericObject>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "descriptions - When provided and true, the result will be the list of props with their description."
-                }],
-              "text": "- When provided and true, the result will be the list of props with their description."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes"
-            }
-          },
-          "return": "Promise<GenericObject>"
-        },
-        "docs": {
-          "text": "Used to retrieve component's props values.",
-          "tags": [{
-              "name": "param",
-              "text": "descriptions - When provided and true, the result will be the list of props with their description."
-            }, {
-              "name": "returns",
-              "text": "List of props as object, each key will be a prop."
-            }]
-        }
-      },
-      "refresh": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method is used to trigger a new render of the component.",
-          "tags": []
-        }
-      },
-      "setProps": {
-        "complexType": {
-          "signature": "(props: GenericObject) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "props - Object containing props that will be set to the component."
-                }],
-              "text": "- Object containing props that will be set to the component."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "GenericObject": {
-              "location": "import",
-              "path": "../../types/GenericTypes"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets the props to the component.",
-          "tags": [{
-              "name": "param",
-              "text": "props - Object containing props that will be set to the component."
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "rootElement"; }
-}
+import { forceUpdate, h, Host, } from '@stencil/core';
+import { kupManagerInstance } from '../../managers/kup-manager/kup-manager';
+import { FButtonStyling } from '../../f-components/f-button/f-button-declarations';
+import { FImage } from '../../f-components/f-image/f-image';
+import { KupMagicBoxProps, KupMagicBoxDisplay, } from './kup-magic-box-declarations';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
+import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
+import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
+import { getProps, setProps } from '../../utils/utils';
+import { componentWrapperId } from '../../variables/GenericVariables';
+import { kupDraggableColumnAttr, kupDraggableRowAttr, kupDropEvent, KupDropEventTypes, } from '../../managers/kup-interact/kup-interact-declarations';
+export class KupMagicBox {
+  constructor() {
+    /*-------------------------------------------------*/
+    /*       I n t e r n a l   V a r i a b l e s       */
+    /*-------------------------------------------------*/
+    this.dragHandler = null;
+    this.kupManager = kupManagerInstance();
+    this.textArea = null;
+    this.wrapperRef = null;
+    this.display = KupMagicBoxDisplay.DATATABLE;
+    this.customStyle = '';
+    this.data = null;
+  }
+  /*-------------------------------------------------*/
+  /*           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, KupMagicBoxProps, descriptions);
+  }
+  /**
+   * 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, KupMagicBoxProps, props);
+  }
+  /*-------------------------------------------------*/
+  /*           P r i v a t e   M e t h o d s         */
+  /*-------------------------------------------------*/
+  /**
+   * Sets the props of the combobox used to switch view.
+   * @returns {GenericObject} Combobox props.
+   */
+  comboboxProps() {
+    const listData = [];
+    for (const key in KupMagicBoxDisplay) {
+      if (Object.prototype.hasOwnProperty.call(KupMagicBoxDisplay, key)) {
+        listData.push({
+          id: KupMagicBoxDisplay[key],
+          selected: false,
+          value: KupMagicBoxDisplay[key],
+        });
+      }
+    }
+    return {
+      data: {
+        'kup-list': {
+          data: listData,
+          id: 'kup-debug-theme-changer-list',
+        },
+        'kup-text-field': {
+          emitSubmitEventOnEnter: false,
+          inputType: 'text',
+          label: this.kupManager.language.translate(KupLanguageGeneric.VIEW_AS),
+        },
+      },
+      id: 'comp-switcher',
+      initialValue: this.display,
+      isSelect: true,
+      ['onKup-combobox-itemclick']: (e) => {
+        this.display = e.detail.value;
+      },
+    };
+  }
+  /**
+   * Sets the content window.
+   * @returns {VNode[]} Virtual nodes of the content window.
+   */
+  setContent() {
+    const hasColumns = !!(this.data &&
+      this.data.columns &&
+      this.data.columns.length > 0);
+    const content = [];
+    const props = {};
+    if (this.display === KupMagicBoxDisplay.JSON) {
+      props.initialValue = this.data
+        ? JSON.stringify(this.data, null, 2)
+        : '';
+      props.textArea = true;
+      content.push(h("kup-text-field", Object.assign({ class: "kup-full-width kup-full-height" }, props, { ref: (el) => (this.textArea = el), "onkup-textfield-input": (e) => {
+          try {
+            this.data = JSON.parse(e.detail.value);
+          }
+          catch (error) {
+            this.data = {
+              columns: [{ name: 'ERROR', title: 'Error' }],
+              rows: [
+                {
+                  cells: {
+                    ERROR: {
+                      value: 'Invalid JSON:' + error,
+                    },
+                  },
+                },
+              ],
+            };
+          }
+        } })));
+    }
+    else if (!hasColumns) {
+      content.push(h("div", { class: "empty" }, h(FImage, { sizeY: "100px", resource: "move_to_inbox" }), h("div", { class: "empty-text" }, this.kupManager.language.translate(KupLanguageGeneric.DROP_YOUR_DATA))));
+    }
+    else {
+      switch (this.display) {
+        case KupMagicBoxDisplay.BOX:
+          props.data = this.data;
+          content.push(h("kup-box", Object.assign({}, props)));
+          break;
+        case KupMagicBoxDisplay.BUTTON_LIST:
+          props.data = this.data;
+          content.push(h("kup-button-list", Object.assign({}, props)));
+          break;
+        case KupMagicBoxDisplay.CHIP:
+          props.data = this.data;
+          content.push(h("kup-chip", Object.assign({}, props)));
+          break;
+        case KupMagicBoxDisplay.CHART:
+        case KupMagicBoxDisplay.ECHART:
+          props.data = this.data;
+          props['series'] = [];
+          props['axis'] = null;
+          for (let index = 0; index < this.data.columns.length; index++) {
+            const col = this.data.columns[index];
+            if ((col.obj &&
+              this.kupManager.objects.isNumber(col.obj)) ||
+              props['axis'] !== null) {
+              if (this.display === KupMagicBoxDisplay.CHART) {
+                props['series'].push({
+                  code: col.name,
+                  decode: col.title,
+                });
+              }
+              else {
+                props['series'].push(col.name);
+              }
+            }
+            else {
+              props['axis'] = col.name;
+            }
+          }
+          if (props['series'].length === 0) {
+            this.kupManager.debug.logMessage(this, 'Not enough numerical columns to display a chart!', KupDebugCategory.WARNING);
+          }
+          if (!props['axis']) {
+            this.kupManager.debug.logMessage(this, 'No axis for the chart!', KupDebugCategory.WARNING);
+          }
+          if (this.display === KupMagicBoxDisplay.CHART) {
+            content.push(h("kup-chart", Object.assign({}, props)));
+          }
+          else {
+            content.push(h("kup-echart", Object.assign({}, props)));
+          }
+          break;
+        case KupMagicBoxDisplay.DATATABLE:
+          props.data = this.data;
+          props['autoFillMissingCells'] = true;
+          content.push(h("kup-data-table", Object.assign({}, props)));
+          break;
+        case KupMagicBoxDisplay.TREE:
+          props.data = this.data;
+          content.push(h("kup-tree", Object.assign({ class: "kup-full-width" }, props)));
+          break;
+        default:
+          this.kupManager.debug.logMessage(this, 'Display mode not supported (' + this.display + ')!', KupDebugCategory.ERROR);
+          return;
+      }
+    }
+    return content;
+  }
+  /**
+   * When a kup-drop event is received, the data will be updated.
+   * @param {CustomEvent} e - kup-drop event.
+   */
+  updateData(e) {
+    {
+      const data = Object.assign({}, this.data);
+      const column = e.detail.sourceElement && e.detail.sourceElement.column
+        ? e.detail.sourceElement.column
+        : null;
+      const row = e.detail.sourceElement && e.detail.sourceElement.row
+        ? e.detail.sourceElement.row
+        : null;
+      if (column && column.name) {
+        if (!data.columns) {
+          data.columns = [column];
+        }
+        else {
+          const columnExists = this.data.columns.find((x) => x.name === column.name);
+          if (!columnExists) {
+            data.columns.push(column);
+          }
+        }
+      }
+      else {
+        this.kupManager.debug.logMessage(this, 'Invalid column received.', KupDebugCategory.WARNING);
+      }
+      if (row) {
+        if (!data.rows) {
+          data.rows = [row];
+        }
+        else {
+          data.rows.push(row);
+        }
+      }
+      this.data = data;
+      if (this.data && this.textArea) {
+        try {
+          this.textArea.setValue(JSON.stringify(this.data, null, 2));
+        }
+        catch (error) {
+          this.textArea.setValue('Invalid JSON:' + error);
+        }
+      }
+    }
+  }
+  /*-------------------------------------------------*/
+  /*          L i f e c y c l e   H o o k s          */
+  /*-------------------------------------------------*/
+  componentWillLoad() {
+    this.kupManager.debug.logLoad(this, false);
+    this.kupManager.language.register(this);
+    this.kupManager.theme.register(this);
+  }
+  componentDidLoad() {
+    this.rootElement.addEventListener(kupDropEvent, (e) => this.updateData(e));
+    this.dragHandler =
+      this.rootElement.shadowRoot.querySelector('#drag-handle');
+    this.kupManager.interact.dialogify(this.rootElement, this.dragHandler);
+    this.kupManager.interact.dropzone(this.wrapperRef, {
+      accept: `[${kupDraggableColumnAttr}],[${kupDraggableRowAttr}]`,
+    }, {
+      dispatcher: this.rootElement,
+      type: KupDropEventTypes.MAGICBOX,
+    });
+    this.kupManager.debug.logLoad(this, true);
+  }
+  componentWillRender() {
+    this.kupManager.debug.logRender(this, false);
+  }
+  componentDidRender() {
+    this.kupManager.debug.logRender(this, true);
+  }
+  render() {
+    return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h("div", { class: "magic-box-wrapper" }, h("div", { class: "actions", id: "drag-handle" }, h("kup-combobox", Object.assign({}, this.comboboxProps())), h("kup-button", { styling: FButtonStyling.FLAT, icon: "delete", label: "Reset", "onkup-button-click": () => {
+        this.data = null;
+      } }), h("kup-button", { id: "close-dialog", customStyle: `:host{${KupThemeColorValues.PRIMARY}: var(${KupThemeColorValues.TITLE});}`, icon: "clear", "onkup-button-click": () => {
+        this.kupManager.hideMagicBox();
+      } })), h("div", { class: "content", ref: (el) => (this.wrapperRef = el) }, this.setContent())))));
+  }
+  disconnectedCallback() {
+    this.kupManager.interact.unregister([
+      this.rootElement,
+      this.wrapperRef,
+    ]);
+    this.kupManager.language.unregister(this);
+    this.kupManager.theme.unregister(this);
+  }
+  static get is() { return "kup-magic-box"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["kup-magic-box.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["kup-magic-box.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "customStyle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"\""
+            }, {
+              "name": "see",
+              "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
+            }],
+          "text": "Custom style of the component."
+        },
+        "attribute": "custom-style",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "data": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "KupDataDataset",
+          "resolved": "KupDataDataset",
+          "references": {
+            "KupDataDataset": {
+              "location": "import",
+              "path": "../../managers/kup-data/kup-data-declarations"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "null"
+            }],
+          "text": "Sets the data that will be used to display different components."
+        },
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "display": {}
+    };
+  }
+  static get methods() {
+    return {
+      "getProps": {
+        "complexType": {
+          "signature": "(descriptions?: boolean) => Promise<GenericObject>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "descriptions - When provided and true, the result will be the list of props with their description."
+                }],
+              "text": "- When provided and true, the result will be the list of props with their description."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          },
+          "return": "Promise<GenericObject>"
+        },
+        "docs": {
+          "text": "Used to retrieve component's props values.",
+          "tags": [{
+              "name": "param",
+              "text": "descriptions - When provided and true, the result will be the list of props with their description."
+            }, {
+              "name": "returns",
+              "text": "List of props as object, each key will be a prop."
+            }]
+        }
+      },
+      "refresh": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "This method is used to trigger a new render of the component.",
+          "tags": []
+        }
+      },
+      "setProps": {
+        "complexType": {
+          "signature": "(props: GenericObject) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "props - Object containing props that will be set to the component."
+                }],
+              "text": "- Object containing props that will be set to the component."
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "GenericObject": {
+              "location": "import",
+              "path": "../../types/GenericTypes"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets the props to the component.",
+          "tags": [{
+              "name": "param",
+              "text": "props - Object containing props that will be set to the component."
+            }]
+        }
+      }
+    };
+  }
+  static get elementRef() { return "rootElement"; }
+}