@sme.up/ketchup 4.3.0-SNAPSHOT → 5.1.0-SNAPSHOT

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

@@ -1,5 +1,5 @@
-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 { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-78f3699d.js';
+import { k as kupManagerInstance, j as KupDebugCategory } from './kup-manager-1f76a3ef.js';
 import { c as componentWrapperId } from './GenericVariables-6dfdd433.js';
 
 /**

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

@@ -1,6 +1,6 @@
-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';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-78f3699d.js';
+import { k as kupManagerInstance, j as KupDebugCategory } from './kup-manager-1f76a3ef.js';
+import { g as getProps, s as setProps } from './utils-93ae800f.js';
 
 /**
  * Props of the kup-iframe component.

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

@@ -1,6 +1,6 @@
-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 { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-78f3699d.js';
+import { k as kupManagerInstance } from './kup-manager-1f76a3ef.js';
+import { g as getProps, s as setProps } from './utils-93ae800f.js';
 import { c as componentWrapperId } from './GenericVariables-6dfdd433.js';
 
 /**
@@ -24,11 +24,12 @@ var KupLazyRender;
   KupLazyRender["BOTH"] = "both";
 })(KupLazyRender || (KupLazyRender = {}));
 
-const kupLazyCss = ":host{--kup_lazy_animation_time:var(--kup-lazy-animation-time, 2s);--kup_lazy_placeholder_color:var(\n    --kup-lazy-placeholder-color,\n    var(--kup-icon-color)\n  );display:block;height:100%;width:100%;position:relative}#kup-component{display:flex;justify-content:center;align-content:center;align-items:center;height:100%;width:100%}svg{fill:var(--kup_lazy_placeholder_color);animation:shine ease var(--kup_lazy_animation_time) infinite}@keyframes shine{0%{opacity:0.4}50%{opacity:0.8}100%{opacity:0.4}}:host(.kup-left-aligned) #kup-component{justify-content:left}:host(.kup-right-aligned) #kup-component{justify-content:right}:host(.kup-to-be-loaded) #kup-component{position:absolute}:host(.kup-to-be-loaded) #kup-component>*{margin:auto}:host(.kup-data-table.kup-loaded) #kup-component{display:block}";
+const kupLazyCss = ":host{--kup_lazy_hor_alignment:var(--kup-lazy-hor-alignment, center);--kup_lazy_ver_alignment:var(--kup-lazy-ver-alignment, center);--kup_lazy_animation_time:var(--kup-lazy-animation-time, 2s);--kup_lazy_placeholder_color:var(\n    --kup-lazy-placeholder-color,\n    var(--kup-icon-color)\n  );display:block;height:100%;width:100%;position:relative}#kup-component{align-items:var(--kup_lazy_ver_alignment);display:flex;justify-content:var(--kup_lazy_hor_alignment);height:100%;width:100%}#kup-component kup-data-table{min-width:100%}svg{fill:var(--kup_lazy_placeholder_color);animation:shine ease var(--kup_lazy_animation_time) infinite}@keyframes shine{0%{opacity:0.4}50%{opacity:0.8}100%{opacity:0.4}}:host(.kup-bottom-aligned){--kup-lazy-ver-alignment:flex-end}:host(.kup-left-aligned){--kup-lazy-hor-alignment:flex-start}:host(.kup-right-aligned){--kup-lazy-hor-alignment:flex-end}:host(.kup-top-aligned){--kup-lazy-ver-alignment:flex-start}:host(.kup-to-be-loaded) #kup-component{position:absolute}:host(.kup-to-be-loaded) #kup-component>*{margin:auto}";
 
 let KupLazy = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.kupLazyLoaded = createEvent(this, "kup-lazy-loaded", 6);
     /*-------------------------------------------------*/
     /*                   S t a t e s                   */
     /*-------------------------------------------------*/
@@ -74,6 +75,8 @@ let KupLazy = class {
      * Instance of the KupManager class.
      */
     this.kupManager = kupManagerInstance();
+    this.lazyComponent = null;
+    this.lazyComponentLoaded = false;
   }
   /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */
@@ -86,6 +89,13 @@ let KupLazy = class {
   async getProps(descriptions) {
     return getProps(this, KupLazyProps, descriptions);
   }
+  /**
+   * Returns the HTMLElement of the component to lazy load.
+   * @returns {HTMLElement} Lazy loaded component.
+   */
+  async getComponent() {
+    return this.lazyComponent;
+  }
   /**
    * This method is used to trigger a new render of the component.
    */
@@ -135,6 +145,13 @@ let KupLazy = class {
     this.kupManager.debug.logRender(this, false);
   }
   componentDidRender() {
+    if (this.lazyComponent && !this.lazyComponentLoaded) {
+      this.lazyComponentLoaded = true;
+      this.kupLazyLoaded.emit({
+        comp: this,
+        id: this.rootElement.id,
+      });
+    }
     this.kupManager.debug.logRender(this, true);
   }
   render() {
@@ -185,7 +202,7 @@ let KupLazy = class {
         this.data &&
         this.isInViewport)) {
       let Tag = this.componentName;
-      content = h(Tag, Object.assign({}, this.data));
+      content = (h(Tag, Object.assign({}, this.data, { ref: (el) => (this.lazyComponent = el) })));
       className += ' kup-loaded';
     }
     else if (this.showPlaceholder) {

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

@@ -1,8 +1,8 @@
-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 { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement } from './index-78f3699d.js';
+import { k as kupManagerInstance, i as KupLanguageGeneric, j as KupDebugCategory, _ as kupDropEvent, F as kupDraggableColumnAttr, $ as kupDraggableRowAttr, o as KupDropEventTypes, b as KupThemeColorValues } from './kup-manager-1f76a3ef.js';
 import { F as FButtonStyling } from './f-button-declarations-fd4965d1.js';
-import { F as FImage } from './f-image-3bc8b24f.js';
-import { g as getProps, s as setProps } from './utils-6c73709d.js';
+import { F as FImage } from './f-image-5e5ed7e2.js';
+import { g as getProps, s as setProps } from './utils-93ae800f.js';
 import { c as componentWrapperId } from './GenericVariables-6dfdd433.js';
 
 /**
@@ -17,13 +17,17 @@ var KupMagicBoxProps;
 /**
  * Viable display modes selectable in kup-magic-box.
  */
-var MagicBoxDisplay;
-(function (MagicBoxDisplay) {
-  MagicBoxDisplay["BOX"] = "Box";
-  MagicBoxDisplay["CHART"] = "Chart";
-  MagicBoxDisplay["DATATABLE"] = "Datatable";
-  MagicBoxDisplay["JSON"] = "JSON";
-})(MagicBoxDisplay || (MagicBoxDisplay = {}));
+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 || (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)}";
 
@@ -35,9 +39,9 @@ let KupMagicBox = class {
     /*-------------------------------------------------*/
     /**
      * Data will be displayed using this component.
-     * @default MagicBoxDisplay.DATATABLE
+     * @default KupMagicBoxDisplay.DATATABLE
      */
-    this.display = MagicBoxDisplay.DATATABLE;
+    this.display = KupMagicBoxDisplay.DATATABLE;
     /*-------------------------------------------------*/
     /*                    P r o p s                    */
     /*-------------------------------------------------*/
@@ -55,14 +59,9 @@ let KupMagicBox = class {
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
-    /**
-     * Instance of the KupManager class.
-     */
-    this.kupManager = kupManagerInstance();
-    /**
-     * Element which enables the drag on move feature.
-     */
     this.dragHandler = null;
+    this.kupManager = kupManagerInstance();
+    this.textArea = null;
     this.wrapperRef = null;
   }
   /*-------------------------------------------------*/
@@ -98,11 +97,11 @@ let KupMagicBox = class {
    */
   comboboxProps() {
     const listData = [];
-    for (const key in MagicBoxDisplay) {
-      if (Object.prototype.hasOwnProperty.call(MagicBoxDisplay, key)) {
+    for (const key in KupMagicBoxDisplay) {
+      if (Object.prototype.hasOwnProperty.call(KupMagicBoxDisplay, key)) {
         listData.push({
-          text: MagicBoxDisplay[key],
-          value: MagicBoxDisplay[key],
+          text: KupMagicBoxDisplay[key],
+          value: KupMagicBoxDisplay[key],
           selected: false,
         });
       }
@@ -136,27 +135,68 @@ let KupMagicBox = class {
       this.data.columns &&
       this.data.columns.length > 0);
     const content = [];
-    if (!hasColumns) {
+    const props = {};
+    if (this.display === KupMagicBoxDisplay.JSON) {
+      props.initialValue = this.data
+        ? JSON.stringify(this.data, null, 2)
+        : '';
+      props.textArea = true;
+      content.push(h("kup-text-field", Object.assign({ class: "kup-full-width kup-full-height" }, props, { ref: (el) => (this.textArea = el), "onkup-textfield-input": (e) => {
+          try {
+            this.data = JSON.parse(e.detail.value);
+          }
+          catch (error) {
+            this.data = {
+              columns: [{ name: 'ERROR', title: 'Error' }],
+              rows: [
+                {
+                  cells: {
+                    ERROR: {
+                      value: 'Invalid JSON:' + error,
+                    },
+                  },
+                },
+              ],
+            };
+          }
+        } })));
+    }
+    else if (!hasColumns) {
       content.push(h("div", { class: "empty" }, h(FImage, { sizeY: "100px", resource: "move_to_inbox" }), h("div", { class: "empty-text" }, this.kupManager.language.translate(KupLanguageGeneric.DROP_YOUR_DATA))));
     }
     else {
-      const props = {};
       switch (this.display) {
-        case MagicBoxDisplay.BOX:
-          props['data'] = this.data;
+        case KupMagicBoxDisplay.BOX:
+          props.data = this.data;
           content.push(h("kup-box", Object.assign({}, props)));
           break;
-        case MagicBoxDisplay.CHART:
-          props['data'] = this.data;
+        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['series'].push({
-                code: col.name,
-                decode: col.title,
-              });
+            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;
@@ -168,16 +208,21 @@ let KupMagicBox = class {
           if (!props['axis']) {
             this.kupManager.debug.logMessage(this, 'No axis for the chart!', KupDebugCategory.WARNING);
           }
-          content.push(h("kup-chart", Object.assign({}, props)));
+          if (this.display === KupMagicBoxDisplay.CHART) {
+            content.push(h("kup-chart", Object.assign({}, props)));
+          }
+          else {
+            content.push(h("kup-echart", Object.assign({}, props)));
+          }
           break;
-        case MagicBoxDisplay.DATATABLE:
-          props['data'] = this.data;
+        case KupMagicBoxDisplay.DATATABLE:
+          props.data = this.data;
           props['autoFillMissingCells'] = true;
           content.push(h("kup-data-table", Object.assign({}, props)));
           break;
-        case MagicBoxDisplay.JSON:
-          props['data'] = this.data;
-          content.push(h("pre", { class: "json" }, JSON.stringify(this.data, null, 2)));
+        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);
@@ -222,6 +267,14 @@ let KupMagicBox = class {
         }
       }
       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);
+        }
+      }
     }
   }
   /*-------------------------------------------------*/