@sme.up/ketchup 4.3.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,12 +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.js

@@ -1,13 +1,14 @@
 import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, Watch, } from '@stencil/core';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { isValidFormattedStringTime, formattedStringToCustomUnformattedStringTime, unformattedStringToFormattedStringTime, formatTime, getProps, setProps, } from '../../utils/utils';
 import { KupTimePickerProps, } from './kup-time-picker-declarations';
-import { KupDebugCategory } from '../../utils/kup-debug/kup-debug-declarations';
+import { KupDebugCategory } from '../../managers/kup-debug/kup-debug-declarations';
 import { componentWrapperId } from '../../variables/GenericVariables';
-import { KupDatesFormats } from '../../utils/kup-dates/kup-dates-declarations';
+import { KupDatesFormats } from '../../managers/kup-dates/kup-dates-declarations';
 import { FTextField } from '../../f-components/f-text-field/f-text-field';
 import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
-import { KupDynamicPositionPlacement } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
+import { KupCardFamily, } from '../kup-card/kup-card-declarations';
+import { KupDynamicPositionPlacement } from '../../managers/kup-dynamic-position/kup-dynamic-position-declarations';
 export class KupTimePicker {
   constructor() {
     /*-------------------------------------------------*/
@@ -359,7 +360,7 @@ export class KupTimePicker {
           secondsActive: this.secondsActive,
         },
       };
-      return (h("kup-card", { ref: (el) => (this.pickerKupEl = el), data: data, "layout-family": "builtin", "layout-number": "2", "size-x": "300px", "size-y": "450px", "is-menu": true, "onkup-card-click": (ev) => {
+      return (h("kup-card", { ref: (el) => (this.pickerKupEl = el), data: data, layoutFamily: KupCardFamily.BUILT_IN, layoutNumber: 2, sizeX: "300px", sizeY: "450px", isMenu: true, "onkup-card-click": (ev) => {
           if (ev.detail.value != null && ev.detail.value != '')
             this.onKupTimePickerItemClick(ev, ev.detail.value);
         } }));
@@ -414,6 +415,7 @@ export class KupTimePicker {
   /*          L i f e c y c l e   H o o k s          */
   /*-------------------------------------------------*/
   componentWillLoad() {
+    this.kupManager.dates.register(this);
     this.kupManager.debug.logLoad(this, false);
     this.kupManager.theme.register(this);
     this.watchTimeMinutesStep();
@@ -449,6 +451,7 @@ export class KupTimePicker {
       h("div", { id: componentWrapperId }, this.prepTextfield(this.getTimeForOutput()))));
   }
   disconnectedCallback() {
+    this.kupManager.dates.unregister(this);
     this.kupManager.theme.unregister(this);
     if (this.pickerKupEl) {
       this.pickerKupEl.remove();

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

@@ -1,8 +1,8 @@
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch, } from '@stencil/core';
 import { ViewMode, KupTooltipProps, } from './kup-tooltip-declarations';
-import { kupManagerInstance, } from '../../utils/kup-manager/kup-manager';
-import { kupDynamicPositionAttribute, } from '../../utils/kup-dynamic-position/kup-dynamic-position-declarations';
-import { KupLanguageGeneric } from '../../utils/kup-language/kup-language-declarations';
+import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
+import { kupDynamicPositionAttribute, } from '../../managers/kup-dynamic-position/kup-dynamic-position-declarations';
+import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-declarations';
 import { KupCardFamily } from '../kup-card/kup-card-declarations';
 import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';

package/dist/collection/components/kup-tree/kup-tree-declarations.js

@@ -37,11 +37,6 @@ export var KupTreeProps;
   KupTreeProps["totals"] = "Defines the current totals options.";
   KupTreeProps["useDynamicExpansion"] = "When the component must use the dynamic expansion feature to open its nodes, it means that not all the nodes of the tree have been passed inside the data property. Therefore, when expanding a node, the tree must emit an event (or run a given callback) and wait for the child nodes to be downloaded from the server.";
 })(KupTreeProps || (KupTreeProps = {}));
-/**
- * The name of the property used by the tree component to store whether a TreeNode is open or closed
- * @constant
- */
-export const treeExpandedPropName = 'isExpanded';
 /**
  * The name of the constant used by the tree component to identify the main tree in column menu
  * @constant

package/dist/collection/components/kup-tree/kup-tree-faker.js

@@ -9,7 +9,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     }
   return t;
 };
-import { treeExpandedPropName, } from './kup-tree-declarations';
 //---- Constants ----
 /**
  * The data pool usable to populate a fake TreeNode
@@ -81,7 +80,7 @@ export function flattenTree(nodesToFlatten, useIsExpandedFlag = true) {
     for (let i = 0; i < nodesToFlatten.length; i++) {
       flattenedNodes.push(nodesToFlatten[i]);
       if (!useIsExpandedFlag ||
-        (useIsExpandedFlag && nodesToFlatten[i][treeExpandedPropName])) {
+        (useIsExpandedFlag && nodesToFlatten[i].isExpanded)) {
         flattenedNodes = flattenedNodes.concat(flattenTree(nodesToFlatten[i].children));
       }
     }
@@ -206,7 +205,7 @@ function TreeNodeFactory(columns, depth = {
     expandable: !!childrenCount,
     icon: 'account',
     id: depth.path + depthAndIndex + childrenCount.toString(),
-    [treeExpandedPropName]: getBooleanOnProbability(options.isExpandedProbability || 0),
+    isExpanded: getBooleanOnProbability(options.isExpandedProbability || 0),
     obj: {
       t: 'TN',
       p: '',

package/dist/collection/components/kup-tree/kup-tree.css

@@ -137,6 +137,8 @@
   height: 1.5em;
   min-width: 1.5em;
   width: 1.5em;
+}
+.wrapper .kup-tree__node__expander {
   transition: transform 0.1s;
 }
 .wrapper .kup-tree__node {