@sme.up/ketchup 4.0.0 → 4.2.0

package/dist/cjs/kup-dash_2.cjs.entry.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3c471303.js');
-const kupManager = require('./kup-manager-59ad8bdc.js');
-require('./kup-objects-59ea949c.js');
+const index = require('./index-0416afab.js');
+const kupManager = require('./kup-manager-1a2688ca.js');
+const utils = require('./utils-0cc466b9.js');
+const GenericVariables = require('./GenericVariables-9cd88034.js');
 
 const kupDashCss = "#dash{color:var(--kup-text-color);font-size:2vw;display:flex;align-items:center;justify-content:center;position:relative;text-align:center;position:relative;word-break:normal}#dash.with-dyn{cursor:pointer}#dash #content .icon{margin:auto;font-size:90%}#dash #content.layout-1,#dash #content.layout-3{text-align:center}#dash #content.layout-1 .descr,#dash #content.layout-3 .descr{font-size:70%;width:100%}#dash #content.layout-1 .value,#dash #content.layout-3 .value{font-size:220%}#dash #content.layout-2>div{display:flex}#dash #content.layout-2>div .icon{margin:auto;font-size:150%;margin-right:5%}#dash #content.layout-2>div .value-int{font-size:250%}#dash #content.layout-2>div .value-dec,#dash #content.layout-2>div .unit{font-size:130%;margin-top:auto;margin-bottom:7%}#dash #content.layout-2>div .value-dec{margin-left:2%}#dash #content.layout-2>div .unit{margin-left:4%}#dash #content.layout-4>div{display:grid;grid-template-columns:2fr 5fr}#dash #content.layout-4>div .icon{margin:auto;font-size:150%;margin-right:5%}#dash #content.layout-4>div .value-and-unit{display:flex}#dash #content.layout-4>div .value-and-unit .value-int{font-size:250%}#dash #content.layout-4>div .value-and-unit .value-dec,#dash #content.layout-4>div .value-and-unit .unit{font-size:130%;margin-top:auto;margin-bottom:7%}#dash #content.layout-4>div .value-and-unit .value-dec{margin-left:2%}#dash #content.layout-4>div .value-and-unit .unit{margin-left:4%}#dash #content.layout-4>div .descr{margin-left:4%;text-align:left;font-size:80%;width:100%;min-width:max-content}#dash #content.layout-5>div,#dash #content.layout-7>div{display:flex}#dash #content.layout-5>div .icon,#dash #content.layout-7>div .icon{font-size:150%;margin:auto;margin-left:10%}#dash #content.layout-5>div .value,#dash #content.layout-7>div .value{font-size:200%}#dash #content.layout-5>div .descr,#dash #content.layout-7>div .descr{text-align:right;font-size:65%;width:100%;min-width:max-content}#dash #content.layout-6>div{display:flex;justify-content:space-between}#dash #content.layout-6>div .icon{font-size:150%;margin-right:10%}#dash #content.layout-6>div .value{font-size:220%;text-align:right}#dash #content.layout-6>div .descr{font-size:80%;text-align:right;width:100%;min-width:max-content}#dash #content.layout-8>div{display:flex;align-items:center}#dash #content.layout-8>div .icon{margin-right:4%;font-size:75%}#dash #content.layout-8>div .value{margin:0 10%;font-size:250%}#dash #content.layout-8>div .descr{font-size:60%;text-align:left}";
 
@@ -87,82 +88,123 @@ let KupDash = class {
 };
 KupDash.style = kupDashCss;
 
-const kupLayoutCss = ":host{--lyo_column-number:var(--kup-layout_column-number, 1);--lyo_grid-gap:var(--kup-layout_grid-gap, 2rem);display:inline-grid;grid-auto-flow:row;grid-column:1;grid-gap:var(--lyo_grid-gap) var(--lyo_grid-gap);gap:var(--lyo_grid-gap) var(--lyo_grid-gap);grid-row:auto;grid-template-columns:repeat(var(--lyo_column-number), 1fr)}:host([content-based-columns-width]){grid-template-columns:repeat(var(--lyo_column-number), minmax(min-content, auto))}:host(.lyo-multiple-columns){--kup-layout_column-number:2}:host([fill-space]){display:grid;text-align:center;width:100%}:host([vertical]){grid-gap:10px;padding:10px}:host([content-based-columns-width]){table-layout:auto;column-width:auto}:host([horizontal]:not(.lyo-multiple-columns)){display:inline-block;max-width:100%;overflow:visible;white-space:nowrap}:host([horizontal][fill-space]:not(.lyo-multiple-columns)){display:grid;grid-auto-columns:1fr;grid-auto-flow:column;width:100%}";
+/**
+ * Props of the kup-grid component.
+ * Used to export every prop in an object.
+ */
+var KupGridProps;
+(function (KupGridProps) {
+  KupGridProps["columns"] = "The number of columns displayed by the grid, the default behavior is 12.";
+  KupGridProps["customStyle"] = "Custom style of the component. For more information: https://ketchup.smeup.com/ketchup-showcase/#/customization";
+  KupGridProps["singleLine"] = "When set to true, forces the content on a single line.";
+})(KupGridProps || (KupGridProps = {}));
 
-let KupLayout = class {
+const kupGridCss = ":host{--kup_grid_font_size:var(--kup-grid-font-size, var(--kup-font-size));--kup_grid_gap:var(--kup-grid-gap, 24px);--kup_grid_gap_mobile:var(--kup-grid-gap-mobile, 16px);--kup_grid_padding:var(--kup-grid-padding, 24px);font-size:var(--kup_grid_font_size);height:100%;width:100%}#kup-component{height:100%;width:100%}.layout-grid{box-sizing:border-box;margin:0px auto;padding:var(--kup_grid_padding)}.layout-grid .layout-grid__inner{display:grid;margin:0px;grid-gap:var(--kup_grid_gap);grid-template-columns:repeat(var(--kup_grid_columns, 12), minmax(0px, 1fr))}.layout-grid .layout-grid__inner .layout-grid__cell{box-sizing:border-box;display:flex;justify-content:center;margin:0px;width:auto}.layout-grid__cell--span-1{grid-column-end:span 1}.layout-grid__cell--span-2{grid-column-end:span 2}.layout-grid__cell--span-3{grid-column-end:span 3}.layout-grid__cell--span-4{grid-column-end:span 4}.layout-grid__cell--span-5{grid-column-end:span 5}.layout-grid__cell--span-6{grid-column-end:span 6}.layout-grid__cell--span-7{grid-column-end:span 7}.layout-grid__cell--span-8{grid-column-end:span 8}.layout-grid__cell--span-9{grid-column-end:span 9}.layout-grid__cell--span-10{grid-column-end:span 10}.layout-grid__cell--span-11{grid-column-end:span 11}.layout-grid__cell--span-12{grid-column-end:span 12}.layout-grid__cell--span-13{grid-column-end:span 13}.layout-grid__cell--span-14{grid-column-end:span 14}.layout-grid__cell--span-15{grid-column-end:span 15}.layout-grid__cell--span-16{grid-column-end:span 16}.layout-grid__cell--span-17{grid-column-end:span 17}.layout-grid__cell--span-18{grid-column-end:span 18}.layout-grid__cell--span-19{grid-column-end:span 19}.layout-grid__cell--span-20{grid-column-end:span 20}.layout-grid__cell--span-21{grid-column-end:span 21}.layout-grid__cell--span-22{grid-column-end:span 22}.layout-grid__cell--span-23{grid-column-end:span 23}.layout-grid__cell--span-24{grid-column-end:span 24}.flex-layout,.flex-layout__inner{height:100%;align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap}.flex-layout__inner{width:auto}.flex-layout__inner *{display:block;margin:0 1.5em}.flex-layout__inner .flex-layout__cell{display:flex}.flex-layout__inner .flex-layout__cell *{justify-content:center;margin:auto}@media (min-width: 600px) and (max-width: 839px){.layout-grid .layout-grid__inner{display:grid;margin:0px;grid-gap:var(--kup_grid_gap_mobile);grid-template-columns:repeat(8, minmax(0px, 1fr))}}@media (max-width: 599px){.layout-grid .layout-grid__inner{display:grid;margin:0px;grid-gap:var(--kup_grid_gap_mobile);grid-template-columns:repeat(4, minmax(0px, 1fr))}}:host(.kup-full-width) .flex-layout__inner{width:100%}:host(.kup-full-width) .flex-layout__inner *{margin:auto}";
+
+let KupGrid = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /*-------------------------------------------------*/
+    /*                    P r o p s                    */
+    /*-------------------------------------------------*/
     /**
-     * Specifies how many columns the content must be organized onto.
-     *
-     * If this is greater than 1, then the horizontal prop will have no effect.
+     * The number of columns displayed by the grid, the default behavior is 12.
+     * @default 12
      */
-    this.columnsNumber = 1;
+    this.columns = 12;
     /**
-     * By default, columns size is calculated by the grid layout and it tries to give the same space to elements.
-     *
-     * If this is true, columns width will be calculated according to the cells content.
-     * See SCSS file for more details.
+     * Custom style of the component.
+     * @default ""
+     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
      */
-    this.contentBasedColumnsWidth = false;
+    this.customStyle = '';
     /**
-     * When true, the layout and its contents will try to take all the available horizontal space.
+     * When set to true, forces the content on a single line.
+     * @default false
      */
-    this.fillSpace = false;
+    this.singleLine = false;
+    /*-------------------------------------------------*/
+    /*       I n t e r n a l   V a r i a b l e s       */
+    /*-------------------------------------------------*/
     /**
-     * Tells the layout to place all elements onto a single row.
-     * It does not work when columnsNumber is greater then 1.
+     * Instance of the KupManager class.
      */
-    this.horizontal = false;
+    this.kupManager = kupManager.kupManagerInstance();
+  }
+  /*-------------------------------------------------*/
+  /*           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 utils.getProps(this, KupGridProps, descriptions);
+  }
+  /**
+   * This method is used to trigger a new render of the component.
+   */
+  async refresh() {
+    index.forceUpdate(this);
+  }
+  /**
+   * Sets the props to the component.
+   * @param {GenericObject} props - Object containing props that will be set to the component.
+   */
+  async setProps(props) {
+    utils.setProps(this, KupGridProps, props);
+  }
+  /*-------------------------------------------------*/
+  /*          L i f e c y c l e   H o o k s          */
+  /*-------------------------------------------------*/
+  componentWillLoad() {
+    this.kupManager.debug.logLoad(this, false);
+    this.kupManager.theme.register(this);
+  }
+  componentDidLoad() {
+    this.kupManager.debug.logLoad(this, true);
+  }
+  componentWillRender() {
+    this.kupManager.debug.logRender(this, false);
+  }
+  componentDidRender() {
+    this.kupManager.debug.logRender(this, true);
   }
   render() {
-    let classLayout = null;
-    //horizontal class
-    //let posHorizontal = null;
-    if (this.columnsNumber <= 1) {
-      if (this.horizontal) {
-        classLayout = {
-          ['horizontal']: true,
-        };
-      }
-    }
-    //fillspace class
-    //let allSpace = null;
-    if (this.fillSpace) {
-      classLayout = {
-        ['fill-space']: true,
-      };
+    const slots = this.rootElement.children;
+    if (!slots || slots.length === 0) {
+      this.kupManager.debug.logMessage(this, 'Missing slots, not rendering!', kupManager.KupDebugCategory.WARNING);
+      return;
     }
-    //contentBasedColumnsWidth
-    // let columnWidth = null;
-    if (this.contentBasedColumnsWidth) {
-      classLayout = {
-        ['content-based-columns-width']: true,
-      };
-    }
-    // Classes
-    //let layoutClasses = null;
-    if (this.columnsNumber > 1) {
-      classLayout = {
-        ['lyo-multiple-columns']: true,
-      };
+    const content = [];
+    for (let i = 0; i < slots.length; i++) {
+      let el = null;
+      if (this.singleLine) {
+        el = index.h("slot", { name: `${i}` });
+      }
+      else {
+        let span = 1;
+        if (slots[i]['span']) {
+          span = slots[i]['span'];
+        }
+        el = (index.h("div", { class: `layout-grid__cell layout-grid__cell--span-${span}` }, index.h("slot", { name: `${i}` })));
+      }
+      content.push(el);
     }
-    else
-      this.columnsNumber = 1;
-    classLayout = {
-      ['vertical']: true,
+    const style = {
+      ['--kup_grid_columns']: this.columns,
     };
-    // Styles
-    let layoutStyle = null;
-    if (this.columnsNumber >= 1) {
-      layoutStyle = {
-        ['--lyo_column-number']: this.columnsNumber,
-      };
-    }
-    return (index.h(index.Host, { class: classLayout, style: layoutStyle }, index.h("slot", null)));
+    return (index.h(index.Host, { style: style }, index.h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId }, index.h("div", { class: this.singleLine ? 'flex-layout' : 'layout-grid' }, index.h("div", { class: this.singleLine
+        ? 'flex-layout__inner'
+        : 'layout-grid__inner' }, content)))));
+  }
+  disconnectedCallback() {
+    this.kupManager.theme.unregister(this);
   }
+  get rootElement() { return index.getElement(this); }
 };
-KupLayout.style = kupLayoutCss;
+KupGrid.style = kupGridCss;
 
 exports.kup_dash = KupDash;
-exports.kup_layout = KupLayout;
+exports.kup_grid = KupGrid;

package/dist/cjs/kup-drawer.cjs.entry.js

@@ -2,11 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3c471303.js');
-const kupManager = require('./kup-manager-59ad8bdc.js');
-const utils = require('./utils-2af73538.js');
+const index = require('./index-0416afab.js');
+const kupManager = require('./kup-manager-1a2688ca.js');
+const utils = require('./utils-0cc466b9.js');
 const GenericVariables = require('./GenericVariables-9cd88034.js');
-require('./kup-objects-59ea949c.js');
 
 const drawerClass = 'drawer';
 /**
@@ -145,8 +144,7 @@ let KupDrawer = class {
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
-    return (index.h(index.Host, { "kup-opened": this.opened }, customStyle ? index.h("style", null, customStyle) : null, index.h("div", { class: "backdrop", onPointerDown: () => this.close() }), index.h("div", { id: GenericVariables.componentWrapperId }, index.h("div", { class: drawerClass }, this.content()))));
+    return (index.h(index.Host, { "kup-opened": this.opened }, index.h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { class: "backdrop", onPointerDown: () => this.close() }), index.h("div", { id: GenericVariables.componentWrapperId }, index.h("div", { class: drawerClass }, this.content()))));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);

package/dist/cjs/kup-field.cjs.entry.js

@@ -2,10 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3c471303.js');
-const kupManager = require('./kup-manager-59ad8bdc.js');
+const index = require('./index-0416afab.js');
+const kupManager = require('./kup-manager-1a2688ca.js');
 const GenericVariables = require('./GenericVariables-9cd88034.js');
-require('./kup-objects-59ea949c.js');
 
 /**
  * Props of the kup-field component.
@@ -230,8 +229,7 @@ let KupField = class {
     if ((submitIsRight || submitIsBottom) && submit) {
       toRender.push(submit);
     }
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
-    return (index.h(index.Host, null, customStyle ? index.h("style", null, customStyle) : null, index.h("div", { id: GenericVariables.componentWrapperId, class: wrapperClass }, toRender)));
+    return (index.h(index.Host, null, index.h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId, class: wrapperClass }, toRender)));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);

package/dist/cjs/kup-iframe.cjs.entry.js

@@ -2,10 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3c471303.js');
-const kupManager = require('./kup-manager-59ad8bdc.js');
-const utils = require('./utils-2af73538.js');
-require('./kup-objects-59ea949c.js');
+const index = require('./index-0416afab.js');
+const kupManager = require('./kup-manager-1a2688ca.js');
+const utils = require('./utils-0cc466b9.js');
 
 /**
  * Props of the kup-iframe component.

package/dist/cjs/kup-lazy.cjs.entry.js

@@ -2,11 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3c471303.js');
-const kupManager = require('./kup-manager-59ad8bdc.js');
-const utils = require('./utils-2af73538.js');
+const index = require('./index-0416afab.js');
+const kupManager = require('./kup-manager-1a2688ca.js');
+const utils = require('./utils-0cc466b9.js');
 const GenericVariables = require('./GenericVariables-9cd88034.js');
-require('./kup-objects-59ea949c.js');
 
 /**
  * Props of the kup-lazy component.
@@ -197,8 +196,7 @@ let KupLazy = class {
       content = resource;
       className += ' kup-to-be-loaded';
     }
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
-    return (index.h(index.Host, { class: className }, customStyle ? index.h("style", null, customStyle) : null, index.h("div", { id: GenericVariables.componentWrapperId }, content)));
+    return (index.h(index.Host, { class: className }, index.h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId }, content)));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);

package/dist/cjs/kup-magic-box.cjs.entry.js

@@ -2,14 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3c471303.js');
-const dragAndDrop = require('./drag-and-drop-4787ff6f.js');
-const kupManager = require('./kup-manager-59ad8bdc.js');
+const index = require('./index-0416afab.js');
+const kupManager = require('./kup-manager-1a2688ca.js');
 const fButtonDeclarations = require('./f-button-declarations-76b4fb4c.js');
-const fImage = require('./f-image-5f4f29ca.js');
-const utils = require('./utils-2af73538.js');
+const fImage = require('./f-image-d3bd4e08.js');
+const utils = require('./utils-0cc466b9.js');
 const GenericVariables = require('./GenericVariables-9cd88034.js');
-require('./kup-objects-59ea949c.js');
 
 /**
  * Props of the kup-magic-box component.
@@ -31,7 +29,7 @@ var MagicBoxDisplay;
   MagicBoxDisplay["JSON"] = "JSON";
 })(MagicBoxDisplay || (MagicBoxDisplay = {}));
 
-const kupMagicBoxCss = ".f-image--wrapper{display:block;margin:auto;position:relative;height:var(--kup_image_height, 100%);width:var(--kup_image_width, 100%)}.f-image--wrapper.kup-fit img{max-width:max-content;object-fit:contain}.f-image--wrapper img{display:block;margin:auto;height:var(--kup_image_height, 100%);width:var(--kup_image_width, 100%)}.f-image--wrapper .f-image__css{overflow:hidden;height:var(--kup_image_height, 100%);width:var(--kup_image_width, 100%)}.f-image--wrapper .f-image__icon{margin:auto;height:var(--kup_image_height, 100%);width:var(--kup_image_width, 100%)}.f-image--wrapper .css-step.bottom-aligned{bottom:0;position:absolute}:host{background-color:var(--kup-background-color);color:var(--kup-text-color);display:block;height:300px;min-width:700px;width:700px;overflow:auto}#kup-component,.magic-box-wrapper{height:100%;width:100%;overflow:auto}.magic-box-wrapper{border:3px dashed var(--kup-border-color);box-sizing:border-box;display:flex;flex-direction:column}.actions{background-color:var(--kup-title-background-color);position:absolute;top:0;left:0;display:inline-flex;justify-content:center;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%;padding-top:52px}.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--wrapper{margin:0}.json{font-family:var(--kup-font-family-monospace);margin:0}";
+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)}";
 
 let KupMagicBox = class {
   constructor(hostRef) {
@@ -69,6 +67,7 @@ let KupMagicBox = class {
      * Element which enables the drag on move feature.
      */
     this.dragHandler = null;
+    this.wrapperRef = null;
   }
   /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */
@@ -177,6 +176,7 @@ let KupMagicBox = class {
           break;
         case MagicBoxDisplay.DATATABLE:
           props['data'] = this.data;
+          props['autoFillMissingCells'] = true;
           content.push(index.h("kup-data-table", Object.assign({}, props)));
           break;
         case MagicBoxDisplay.JSON:
@@ -237,10 +237,16 @@ let KupMagicBox = class {
     this.kupManager.theme.register(this);
   }
   componentDidLoad() {
-    this.rootElement.addEventListener('kup-drop', (e) => this.updateData(e));
+    this.rootElement.addEventListener(kupManager.kupDropEvent, (e) => this.updateData(e));
     this.dragHandler =
       this.rootElement.shadowRoot.querySelector('#drag-handle');
-    this.kupManager.dialog.register(this.rootElement, this.dragHandler);
+    this.kupManager.interact.dialogify(this.rootElement, this.dragHandler);
+    this.kupManager.interact.dropzone(this.wrapperRef, {
+      accept: `[${kupManager.kupDraggableColumnAttr}],[${kupManager.kupDraggableRowAttr}]`,
+    }, {
+      dispatcher: this.rootElement,
+      type: kupManager.KupDropEventTypes.MAGICBOX,
+    });
     this.kupManager.debug.logLoad(this, true);
   }
   componentWillRender() {
@@ -250,33 +256,17 @@ let KupMagicBox = class {
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    const handlers = {
-      // Had to define leave and over, otherwise drop wasn't working.
-      onDragLeave: () => { },
-      onDragOver: () => {
-        return true;
-      },
-      onDrop: () => {
-        return dragAndDrop.KupDataTableRowDragType;
-      },
-    };
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
-    return (index.h(index.Host, null, customStyle ? index.h("style", null, customStyle) : null, index.h("div", { id: GenericVariables.componentWrapperId }, index.h("div", Object.assign({ class: "magic-box-wrapper" }, dragAndDrop.setKetchupDroppable(handlers, [
-      dragAndDrop.KupDataTableRowDragType,
-      dragAndDrop.KupDataTableColumnDragType,
-    ], this.rootElement, {
-      row: null,
-      cell: null,
-      column: null,
-      id: this.rootElement.id,
-    })), index.h("div", { class: "actions", id: "drag-handle" }, index.h("kup-combobox", Object.assign({}, this.comboboxProps())), index.h("kup-button", { styling: fButtonDeclarations.FButtonStyling.FLAT, icon: "delete", label: "Reset", "onkup-button-click": () => {
+    return (index.h(index.Host, null, index.h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), index.h("div", { id: GenericVariables.componentWrapperId }, index.h("div", { class: "magic-box-wrapper" }, index.h("div", { class: "actions", id: "drag-handle" }, index.h("kup-combobox", Object.assign({}, this.comboboxProps())), index.h("kup-button", { styling: fButtonDeclarations.FButtonStyling.FLAT, icon: "delete", label: "Reset", "onkup-button-click": () => {
         this.data = null;
       } }), index.h("kup-button", { id: "close-dialog", customStyle: `:host{${kupManager.KupThemeColorValues.PRIMARY}: var(${kupManager.KupThemeColorValues.TITLE});}`, icon: "clear", "onkup-button-click": () => {
         this.kupManager.hideMagicBox();
-      } })), index.h("div", { class: "content" }, this.setContent())))));
+      } })), index.h("div", { class: "content", ref: (el) => (this.wrapperRef = el) }, this.setContent())))));
   }
   disconnectedCallback() {
-    this.kupManager.dialog.unregister([this.rootElement]);
+    this.kupManager.interact.unregister([
+      this.rootElement,
+      this.wrapperRef,
+    ]);
     this.kupManager.language.unregister(this);
     this.kupManager.theme.unregister(this);
   }