@sme.up/ketchup 4.0.0 → 4.1.0

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

@@ -2,14 +2,13 @@
 
 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-828bd598.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-0c3e6aa7.js');
+const utils = require('./utils-5192ee20.js');
 const GenericVariables = require('./GenericVariables-9cd88034.js');
-require('./kup-objects-59ea949c.js');
+require('./kup-objects-89f38d6a.js');
 
 /**
  * Props of the kup-magic-box component.
@@ -31,7 +30,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 = ".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;overflow:auto;width:700px}#kup-component,.magic-box-wrapper{height:100%;overflow:auto;width:100%}.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);display:inline-flex;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;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--wrapper{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 +68,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           */
@@ -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,18 @@ 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, customStyle ? index.h("style", null, customStyle) : null, 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);
   }