@sme.up/ketchup 9.1.0 → 9.3.0

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

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { k as kupManagerInstance, g as getProps, s as setProps, S as KupLanguageGeneric, F as FImage, U as KupDebugCategory, au as kupDropEvent, av as kupDraggableColumnAttr, aw as kupDraggableRowAttr, Z as KupDropEventTypes, c as componentWrapperId, ap as FButtonStyling, K as KupThemeColorValues, d as defineCustomElement$2, b as defineCustomElement$3, e as defineCustomElement$4, f as defineCustomElement$5, h as defineCustomElement$6, i as defineCustomElement$7, j as defineCustomElement$8, l as defineCustomElement$9, m as defineCustomElement$a, n as defineCustomElement$b, o as defineCustomElement$c, p as defineCustomElement$d, q as defineCustomElement$e, r as defineCustomElement$g, t as defineCustomElement$h, u as defineCustomElement$i, v as defineCustomElement$j, w as defineCustomElement$k, x as defineCustomElement$l, y as defineCustomElement$m, z as defineCustomElement$n, A as defineCustomElement$o, B as defineCustomElement$p, C as defineCustomElement$q, D as defineCustomElement$r, E as defineCustomElement$t, G as defineCustomElement$u } from './kup-autocomplete2.js';
+import { k as kupManagerInstance, g as getProps, s as setProps, c as KupLanguageGeneric, P as KupDebugCategory, ai as kupDropEvent, a2 as kupDraggableColumnAttr, aj as kupDraggableRowAttr, a6 as KupDropEventTypes, a as KupThemeColorValues } from './kup-manager.js';
+import { F as FImage, c as componentWrapperId, a4 as FButtonStyling, d as defineCustomElement$2, a as defineCustomElement$3, b as defineCustomElement$4, e as defineCustomElement$5, f as defineCustomElement$6, g as defineCustomElement$7, h as defineCustomElement$8, i as defineCustomElement$9, j as defineCustomElement$a, k as defineCustomElement$b, l as defineCustomElement$c, m as defineCustomElement$d, n as defineCustomElement$e, o as defineCustomElement$g, p as defineCustomElement$h, q as defineCustomElement$i, r as defineCustomElement$j, s as defineCustomElement$k, t as defineCustomElement$l, u as defineCustomElement$m, v as defineCustomElement$n, w as defineCustomElement$o, x as defineCustomElement$p, y as defineCustomElement$q, z as defineCustomElement$r, A as defineCustomElement$t, B as defineCustomElement$u } from './kup-autocomplete2.js';
 import { d as defineCustomElement$s } from './kup-box2.js';
 import { d as defineCustomElement$f } from './kup-echart2.js';
 
@@ -9,464 +10,464 @@ import { d as defineCustomElement$f } from './kup-echart2.js';
  */
 var KupMagicBoxProps;
 (function (KupMagicBoxProps) {
-  KupMagicBoxProps["customStyle"] = "Custom style of the component.";
-  KupMagicBoxProps["data"] = "Sets the data that will be used to display different components.";
+    KupMagicBoxProps["customStyle"] = "Custom style of the component.";
+    KupMagicBoxProps["data"] = "Sets the data that will be used to display different components.";
 })(KupMagicBoxProps || (KupMagicBoxProps = {}));
 /**
  * Viable display modes selectable in kup-magic-box.
  */
 var KupMagicBoxDisplay;
 (function (KupMagicBoxDisplay) {
-  KupMagicBoxDisplay["BOX"] = "Box";
-  KupMagicBoxDisplay["BUTTON_LIST"] = "Button List";
-  KupMagicBoxDisplay["CHART"] = "Chart";
-  KupMagicBoxDisplay["CHIP"] = "Chip";
-  KupMagicBoxDisplay["ECHART"] = "Echart";
-  KupMagicBoxDisplay["DATATABLE"] = "Datatable";
-  KupMagicBoxDisplay["JSON"] = "JSON";
-  KupMagicBoxDisplay["TREE"] = "Tree";
+    KupMagicBoxDisplay["BOX"] = "Box";
+    KupMagicBoxDisplay["BUTTON_LIST"] = "Button List";
+    KupMagicBoxDisplay["CHART"] = "Chart";
+    KupMagicBoxDisplay["CHIP"] = "Chip";
+    KupMagicBoxDisplay["ECHART"] = "Echart";
+    KupMagicBoxDisplay["DATATABLE"] = "Datatable";
+    KupMagicBoxDisplay["JSON"] = "JSON";
+    KupMagicBoxDisplay["TREE"] = "Tree";
 })(KupMagicBoxDisplay || (KupMagicBoxDisplay = {}));
 
 const kupMagicBoxCss = ":host{background-color:var(--kup-background-color);color:var(--kup-text-color);display:block;height:300px;min-width:700px;width:700px}#kup-component,.magic-box-wrapper{height:100%;width:100%}.magic-box-wrapper{border:3px dashed var(--kup-border-color);box-sizing:border-box;display:flex;flex-direction:column}.actions{align-items:center;background-color:var(--kup-title-background-color);display:inline-flex;height:52px;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:1}.actions kup-button{margin:0.5em}.actions #comp-switcher{margin:auto 0}.actions #close-dialog{position:absolute;margin:0;top:0;right:0;background-color:var(--kup-title-background-color)}.content{box-sizing:border-box;height:100%;margin-top:52px;overflow:auto;transition:background-color 125ms ease}.empty{flex-direction:column;display:flex;text-align:center;justify-content:center;height:100%;width:100%;opacity:0.5;transition:opacity 0.25s ease-out}.empty .f-image{margin:0}.json{font-family:var(--kup-font-family-monospace);margin:0}[kup-drag-over]{background-color:rgba(var(--kup-success-color-rgb), 0.25)}";
 
 const KupMagicBox$1 = /*@__PURE__*/ proxyCustomElement(class KupMagicBox extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /*-------------------------------------------------*/
+        /*       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;
+    }
     /*-------------------------------------------------*/
-    /*       I n t e r n a l   V a r i a b l e s       */
+    /*           P u b l i c   M e t h o d 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],
-        });
-      }
+    /**
+     * 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);
     }
-    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,
-                    },
-                  },
-                },
-              ],
-            };
-          }
-        } })));
+    /**
+     * This method is used to trigger a new render of the component.
+     */
+    async refresh() {
+        forceUpdate(this);
     }
-    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))));
+    /**
+     * 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);
     }
-    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,
+    /*-------------------------------------------------*/
+    /*           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],
                 });
-              }
-              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);
-          }
+        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 {
-        this.kupManager.debug.logMessage(this, 'Invalid column received.', KupDebugCategory.WARNING);
-      }
-      if (row) {
-        if (!data.rows) {
-          data.rows = [row];
+        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 {
-          data.rows.push(row);
-        }
-      }
-      this.data = data;
-      if (this.data && this.textArea) {
-        try {
-          this.textArea.setValue(JSON.stringify(this.data, null, 2));
+            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;
+            }
         }
-        catch (error) {
-          this.textArea.setValue('Invalid JSON:' + error);
+        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);
-  }
-  get rootElement() { return this; }
-  static get style() { return kupMagicBoxCss; }
+    /*-------------------------------------------------*/
+    /*          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);
+    }
+    get rootElement() { return this; }
+    static get style() { return kupMagicBoxCss; }
 }, [1, "kup-magic-box", {
-    "customStyle": [1, "custom-style"],
-    "data": [1040],
-    "display": [32],
-    "getProps": [64],
-    "refresh": [64],
-    "setProps": [64]
-  }]);
+        "customStyle": [1, "custom-style"],
+        "data": [1040],
+        "display": [32],
+        "getProps": [64],
+        "refresh": [64],
+        "setProps": [64]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["kup-magic-box", "kup-autocomplete", "kup-badge", "kup-box", "kup-button", "kup-button-list", "kup-card", "kup-chart", "kup-checkbox", "kup-chip", "kup-color-picker", "kup-combobox", "kup-data-table", "kup-date-picker", "kup-dialog", "kup-dropdown-button", "kup-echart", "kup-form", "kup-gauge", "kup-image", "kup-list", "kup-progress-bar", "kup-radio", "kup-rating", "kup-spinner", "kup-switch", "kup-tab-bar", "kup-text-field", "kup-time-picker", "kup-tree"];
-  components.forEach(tagName => { switch (tagName) {
-    case "kup-magic-box":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, KupMagicBox$1);
-      }
-      break;
-    case "kup-autocomplete":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$u();
-      }
-      break;
-    case "kup-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$t();
-      }
-      break;
-    case "kup-box":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$s();
-      }
-      break;
-    case "kup-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$r();
-      }
-      break;
-    case "kup-button-list":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$q();
-      }
-      break;
-    case "kup-card":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$p();
-      }
-      break;
-    case "kup-chart":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$o();
-      }
-      break;
-    case "kup-checkbox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$n();
-      }
-      break;
-    case "kup-chip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$m();
-      }
-      break;
-    case "kup-color-picker":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$l();
-      }
-      break;
-    case "kup-combobox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$k();
-      }
-      break;
-    case "kup-data-table":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$j();
-      }
-      break;
-    case "kup-date-picker":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$i();
-      }
-      break;
-    case "kup-dialog":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$h();
-      }
-      break;
-    case "kup-dropdown-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$g();
-      }
-      break;
-    case "kup-echart":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$f();
-      }
-      break;
-    case "kup-form":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$e();
-      }
-      break;
-    case "kup-gauge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$d();
-      }
-      break;
-    case "kup-image":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$c();
-      }
-      break;
-    case "kup-list":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$b();
-      }
-      break;
-    case "kup-progress-bar":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$a();
-      }
-      break;
-    case "kup-radio":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "kup-rating":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "kup-spinner":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "kup-switch":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "kup-tab-bar":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "kup-text-field":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "kup-time-picker":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "kup-tree":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kup-magic-box", "kup-autocomplete", "kup-badge", "kup-box", "kup-button", "kup-button-list", "kup-card", "kup-chart", "kup-checkbox", "kup-chip", "kup-color-picker", "kup-combobox", "kup-data-table", "kup-date-picker", "kup-dialog", "kup-dropdown-button", "kup-echart", "kup-form", "kup-gauge", "kup-image", "kup-list", "kup-progress-bar", "kup-radio", "kup-rating", "kup-spinner", "kup-switch", "kup-tab-bar", "kup-text-field", "kup-time-picker", "kup-tree"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kup-magic-box":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, KupMagicBox$1);
+            }
+            break;
+        case "kup-autocomplete":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$u();
+            }
+            break;
+        case "kup-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$t();
+            }
+            break;
+        case "kup-box":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$s();
+            }
+            break;
+        case "kup-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$r();
+            }
+            break;
+        case "kup-button-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$q();
+            }
+            break;
+        case "kup-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$p();
+            }
+            break;
+        case "kup-chart":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$o();
+            }
+            break;
+        case "kup-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$n();
+            }
+            break;
+        case "kup-chip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$m();
+            }
+            break;
+        case "kup-color-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$l();
+            }
+            break;
+        case "kup-combobox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$k();
+            }
+            break;
+        case "kup-data-table":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "kup-date-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "kup-dialog":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "kup-dropdown-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "kup-echart":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "kup-form":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "kup-gauge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "kup-image":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "kup-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "kup-progress-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "kup-radio":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "kup-rating":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "kup-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "kup-switch":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "kup-tab-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "kup-text-field":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "kup-time-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "kup-tree":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const KupMagicBox = KupMagicBox$1;