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

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

@@ -1,14 +1,14 @@
 import { Component, Element, forceUpdate, h, Host, Method, Prop, State, } from '@stencil/core';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { FButtonStyling } from '../../f-components/f-button/f-button-declarations';
 import { FImage } from '../../f-components/f-image/f-image';
-import { KupMagicBoxProps, MagicBoxDisplay, } from './kup-magic-box-declarations';
-import { KupDebugCategory } from '../../utils/kup-debug/kup-debug-declarations';
-import { KupLanguageGeneric } from '../../utils/kup-language/kup-language-declarations';
-import { KupThemeColorValues } from '../../utils/kup-theme/kup-theme-declarations';
+import { KupMagicBoxProps, KupMagicBoxDisplay, } from './kup-magic-box-declarations';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
+import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
+import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
-import { kupDraggableColumnAttr, kupDraggableRowAttr, kupDropEvent, KupDropEventTypes, } from '../../utils/kup-interact/kup-interact-declarations';
+import { kupDraggableColumnAttr, kupDraggableRowAttr, kupDropEvent, KupDropEventTypes, } from '../../managers/kup-interact/kup-interact-declarations';
 export class KupMagicBox {
   constructor() {
     /*-------------------------------------------------*/
@@ -16,9 +16,9 @@ export class KupMagicBox {
     /*-------------------------------------------------*/
     /**
      * 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                    */
     /*-------------------------------------------------*/
@@ -36,14 +36,9 @@ export class KupMagicBox {
     /*-------------------------------------------------*/
     /*       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;
   }
   /*-------------------------------------------------*/
@@ -79,11 +74,11 @@ export class KupMagicBox {
    */
   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,
         });
       }
@@ -117,29 +112,70 @@ export class KupMagicBox {
       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;
@@ -151,16 +187,21 @@ export class KupMagicBox {
           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);
@@ -205,6 +246,14 @@ export class KupMagicBox {
         }
       }
       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);
+        }
+      }
     }
   }
   /*-------------------------------------------------*/
@@ -294,12 +343,12 @@ export class KupMagicBox {
       "type": "unknown",
       "mutable": true,
       "complexType": {
-        "original": "MagicBoxData",
-        "resolved": "MagicBoxData",
+        "original": "KupDataDataset",
+        "resolved": "KupDataDataset",
         "references": {
-          "MagicBoxData": {
+          "KupDataDataset": {
             "location": "import",
-            "path": "./kup-magic-box-declarations"
+            "path": "../../managers/kup-data/kup-data-declarations"
           }
         }
       },

package/dist/collection/components/kup-nav-bar/kup-nav-bar.js

@@ -1,6 +1,6 @@
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, } from '@stencil/core';
 import { KupNavBarStyling, KupNavBarProps, navbarClass, } from './kup-nav-bar-declarations';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
 export class KupNavBar {

package/dist/collection/components/kup-probe/kup-probe.js

@@ -1,5 +1,5 @@
 import { Component, Element, forceUpdate, h, Host, Method, Prop, State, } from '@stencil/core';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { componentWrapperId } from '../../variables/GenericVariables';
 export class KupProbe {
   constructor() {

package/dist/collection/components/kup-progress-bar/kup-progress-bar.js

@@ -1,5 +1,5 @@
 import { Component, Element, forceUpdate, getAssetPath, h, Host, Method, Prop, } from '@stencil/core';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
 import { KupProgressBarProps } from './kup-progress-bar-declarations';

package/dist/collection/components/kup-qlik/kup-qlik.js

@@ -1,5 +1,5 @@
 import { Component, Prop, Element, h, State } from '@stencil/core';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 export class KupQlik {
   constructor() {
     /**

package/dist/collection/components/kup-radio/kup-radio.js

@@ -1,5 +1,5 @@
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, } from '@stencil/core';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { KupRadioProps, } from './kup-radio-declarations';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';

package/dist/collection/components/kup-rating/kup-rating.js

@@ -1,5 +1,5 @@
 import { Component, Event, Element, forceUpdate, h, Host, Method, Prop, State, Watch, } from '@stencil/core';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
 import { KupRatingProps, } from './kup-rating-declarations';

package/dist/collection/components/kup-snackbar/kup-snackbar.js

@@ -1,5 +1,5 @@
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, } from '@stencil/core';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
 import { KupSnackbarProps, snackbarClass } from './kup-snackbar-declarations';

package/dist/collection/components/kup-spinner/kup-spinner.js

@@ -1,5 +1,5 @@
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, } from '@stencil/core';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
 import { KupSpinnerProps } from './kup-spinner-declarations';

package/dist/collection/components/kup-state/mock-store.js

@@ -1,4 +1,4 @@
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 export default class MockStore {
   constructor(component) {
     this.kupManager = kupManagerInstance();

package/dist/collection/components/kup-switch/kup-switch.js

@@ -1,5 +1,5 @@
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, } from '@stencil/core';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { FSwitch } from '../../f-components/f-switch/f-switch';
 import { KupSwitchProps, } from './kup-switch-declarations';
 import { getProps, setProps } from '../../utils/utils';

package/dist/collection/components/kup-tab-bar/kup-tab-bar.js

@@ -1,10 +1,10 @@
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch, } from '@stencil/core';
 import { MDCRipple } from '@material/ripple';
 import { KupTabBarProps, } from './kup-tab-bar-declarations';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
-import { KupDebugCategory } from '../../utils/kup-debug/kup-debug-declarations';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
 import { FImage } from '../../f-components/f-image/f-image';
-import { KupThemeColorValues } from '../../utils/kup-theme/kup-theme-declarations';
+import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
 export class KupTabBar {

package/dist/collection/components/kup-text-field/kup-text-field.css

@@ -4,11 +4,14 @@
 * @prop --kup-textfield-color-rgb: Sets text color RGB values of the text field (used for shaders).
 * @prop --kup-textfield-font-family: Sets font family of the component.
 * @prop --kup-textfield-font-size: Sets font size of the component.
+* @prop --kup-textfield-font-weight: Sets font weight of the component.
 * @prop --kup-textfield-fullwidth-height: Sets height of the component when fullwidth.
 * @prop --kup-textfield-fullwidth-padding: Sets padding of the component when fullwidth.
 * @prop --kup-textfield-icon-color: Sets icon color of the component.
 * @prop --kup-textfield-primary-color: Sets primary color of the text field.
 * @prop --kup-textfield-primary-color-rgb: Sets primary color RGB values of the text field (used for shaders).
+* @prop --kup-textfield-text-align: Sets the text alignment of the text field.
+* @prop --kup-textfield-width: Sets the width of the text field.
 *
 * NOTE: These variables are defined in the "kup-theme.css" file, because they must work even without the kup component (it's a functional component)
 *

package/dist/collection/components/kup-text-field/kup-text-field.js

@@ -1,9 +1,9 @@
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, } from '@stencil/core';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { FTextField } from '../../f-components/f-text-field/f-text-field';
 import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
 import { KupTextFieldProps, } from './kup-text-field-declarations';
-import { KupDebugCategory } from '../../utils/kup-debug/kup-debug-declarations';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
 export class KupTextField {

package/dist/collection/components/kup-time-picker/kup-time-picker.css

@@ -1,6 +1,7 @@
 :host {
   display: block;
   font-size: var(--kup-font-size);
+  width: max-content;
 }
 
 #time-picker-div {