@sme.up/ketchup 4.0.0 → 4.2.0

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

@@ -1,6 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as getElement, H as Host } from './index-bf2824a6.js';
-import { k as kupManagerInstance } from './kup-manager-e7d7b353.js';
-import './kup-objects-d38d2fa2.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, f as forceUpdate, H as Host } from './index-e0e67c23.js';
+import { k as kupManagerInstance, f as KupDebugCategory } from './kup-manager-7fc234da.js';
+import { g as getProps, s as setProps } from './utils-6c73709d.js';
+import { c as componentWrapperId } from './GenericVariables-6dfdd433.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}";
 
@@ -83,81 +84,122 @@ 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) {
     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 = 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 getProps(this, KupGridProps, 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, 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!', 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 = h("slot", { name: `${i}` });
+      }
+      else {
+        let span = 1;
+        if (slots[i]['span']) {
+          span = slots[i]['span'];
+        }
+        el = (h("div", { class: `layout-grid__cell layout-grid__cell--span-${span}` }, 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 (h(Host, { class: classLayout, style: layoutStyle }, h("slot", null)));
+    return (h(Host, { style: style }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, h("div", { class: this.singleLine ? 'flex-layout' : 'layout-grid' }, h("div", { class: this.singleLine
+        ? 'flex-layout__inner'
+        : 'layout-grid__inner' }, content)))));
+  }
+  disconnectedCallback() {
+    this.kupManager.theme.unregister(this);
   }
+  get rootElement() { return getElement(this); }
 };
-KupLayout.style = kupLayoutCss;
+KupGrid.style = kupGridCss;
 
-export { KupDash as kup_dash, KupLayout as kup_layout };
+export { KupDash as kup_dash, KupGrid as kup_grid };

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

@@ -1,8 +1,7 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, a as getElement } from './index-bf2824a6.js';
-import { k as kupManagerInstance } from './kup-manager-e7d7b353.js';
-import { g as getProps, s as setProps } from './utils-13dd007a.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-e0e67c23.js';
+import { k as kupManagerInstance } from './kup-manager-7fc234da.js';
+import { g as getProps, s as setProps } from './utils-6c73709d.js';
 import { c as componentWrapperId } from './GenericVariables-6dfdd433.js';
-import './kup-objects-d38d2fa2.js';
 
 const drawerClass = 'drawer';
 /**
@@ -141,8 +140,7 @@ let KupDrawer = class {
     this.kupManager.debug.logRender(this, true);
   }
   render() {
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
-    return (h(Host, { "kup-opened": this.opened }, customStyle ? h("style", null, customStyle) : null, h("div", { class: "backdrop", onPointerDown: () => this.close() }), h("div", { id: componentWrapperId }, h("div", { class: drawerClass }, this.content()))));
+    return (h(Host, { "kup-opened": this.opened }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { class: "backdrop", onPointerDown: () => this.close() }), h("div", { id: componentWrapperId }, h("div", { class: drawerClass }, this.content()))));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);

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

@@ -1,7 +1,6 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, a as getElement } from './index-bf2824a6.js';
-import { k as kupManagerInstance, a as KupDebugCategory } from './kup-manager-e7d7b353.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-e0e67c23.js';
+import { k as kupManagerInstance, f as KupDebugCategory } from './kup-manager-7fc234da.js';
 import { c as componentWrapperId } from './GenericVariables-6dfdd433.js';
-import './kup-objects-d38d2fa2.js';
 
 /**
  * Props of the kup-field component.
@@ -226,8 +225,7 @@ let KupField = class {
     if ((submitIsRight || submitIsBottom) && submit) {
       toRender.push(submit);
     }
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
-    return (h(Host, null, customStyle ? h("style", null, customStyle) : null, h("div", { id: componentWrapperId, class: wrapperClass }, toRender)));
+    return (h(Host, null, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, class: wrapperClass }, toRender)));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);

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

@@ -1,7 +1,6 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, a as getElement } from './index-bf2824a6.js';
-import { k as kupManagerInstance, a as KupDebugCategory } from './kup-manager-e7d7b353.js';
-import { g as getProps, s as setProps } from './utils-13dd007a.js';
-import './kup-objects-d38d2fa2.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-e0e67c23.js';
+import { k as kupManagerInstance, f as KupDebugCategory } from './kup-manager-7fc234da.js';
+import { g as getProps, s as setProps } from './utils-6c73709d.js';
 
 /**
  * Props of the kup-iframe component.

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

@@ -1,8 +1,7 @@
-import { r as registerInstance, f as forceUpdate, h, H as Host, a as getElement } from './index-bf2824a6.js';
-import { k as kupManagerInstance } from './kup-manager-e7d7b353.js';
-import { g as getProps, s as setProps } from './utils-13dd007a.js';
+import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-e0e67c23.js';
+import { k as kupManagerInstance } from './kup-manager-7fc234da.js';
+import { g as getProps, s as setProps } from './utils-6c73709d.js';
 import { c as componentWrapperId } from './GenericVariables-6dfdd433.js';
-import './kup-objects-d38d2fa2.js';
 
 /**
  * Props of the kup-lazy component.
@@ -193,8 +192,7 @@ let KupLazy = class {
       content = resource;
       className += ' kup-to-be-loaded';
     }
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
-    return (h(Host, { class: className }, customStyle ? h("style", null, customStyle) : null, h("div", { id: componentWrapperId }, content)));
+    return (h(Host, { class: className }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId }, content)));
   }
   disconnectedCallback() {
     this.kupManager.theme.unregister(this);

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

@@ -1,11 +1,9 @@
-import { r as registerInstance, f as forceUpdate, h, H as Host, a as getElement } from './index-bf2824a6.js';
-import { b as setKetchupDroppable, K as KupDataTableRowDragType, l as KupDataTableColumnDragType } from './drag-and-drop-321cb4ca.js';
-import { k as kupManagerInstance, d as KupLanguageGeneric, a as KupDebugCategory, c as KupThemeColorValues } from './kup-manager-e7d7b353.js';
+import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-e0e67c23.js';
+import { k as kupManagerInstance, g as KupLanguageGeneric, f as KupDebugCategory, L as kupDropEvent, y as kupDraggableColumnAttr, M as kupDraggableRowAttr, l as KupDropEventTypes, b as KupThemeColorValues } from './kup-manager-7fc234da.js';
 import { F as FButtonStyling } from './f-button-declarations-fd4965d1.js';
-import { F as FImage } from './f-image-68b34fab.js';
-import { g as getProps, s as setProps } from './utils-13dd007a.js';
+import { F as FImage } from './f-image-3bc8b24f.js';
+import { g as getProps, s as setProps } from './utils-6c73709d.js';
 import { c as componentWrapperId } from './GenericVariables-6dfdd433.js';
-import './kup-objects-d38d2fa2.js';
 
 /**
  * Props of the kup-magic-box component.
@@ -27,7 +25,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) {
@@ -65,6 +63,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           */
@@ -173,6 +172,7 @@ let KupMagicBox = class {
           break;
         case MagicBoxDisplay.DATATABLE:
           props['data'] = this.data;
+          props['autoFillMissingCells'] = true;
           content.push(h("kup-data-table", Object.assign({}, props)));
           break;
         case MagicBoxDisplay.JSON:
@@ -233,10 +233,16 @@ let KupMagicBox = class {
     this.kupManager.theme.register(this);
   }
   componentDidLoad() {
-    this.rootElement.addEventListener('kup-drop', (e) => this.updateData(e));
+    this.rootElement.addEventListener(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: `[${kupDraggableColumnAttr}],[${kupDraggableRowAttr}]`,
+    }, {
+      dispatcher: this.rootElement,
+      type: KupDropEventTypes.MAGICBOX,
+    });
     this.kupManager.debug.logLoad(this, true);
   }
   componentWillRender() {
@@ -246,33 +252,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 KupDataTableRowDragType;
-      },
-    };
-    const customStyle = this.kupManager.theme.setCustomStyle(this.rootElement);
-    return (h(Host, null, customStyle ? h("style", null, customStyle) : null, h("div", { id: componentWrapperId }, h("div", Object.assign({ class: "magic-box-wrapper" }, setKetchupDroppable(handlers, [
-      KupDataTableRowDragType,
-      KupDataTableColumnDragType,
-    ], this.rootElement, {
-      row: null,
-      cell: null,
-      column: null,
-      id: this.rootElement.id,
-    })), 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": () => {
+    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" }, this.setContent())))));
+      } })), 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);
   }