@sme.up/ketchup 6.7.0 → 6.8.0

package/dist/collection/components/kup-date-picker/kup-date-picker.js

@@ -10,41 +10,6 @@ import { KupDynamicPositionPlacement } from '../../managers/kup-dynamic-position
 import { KupCardFamily, } from '../kup-card/kup-card-declarations';
 export class KupDatePicker {
   constructor() {
-    /*-------------------------------------------------*/
-    /*                   S t a t e s                   */
-    /*-------------------------------------------------*/
-    this.stateSwitcher = false;
-    this.value = '';
-    /*-------------------------------------------------*/
-    /*                    P r o p s                    */
-    /*-------------------------------------------------*/
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
-    this.customStyle = '';
-    /**
-     * Props of the sub-components.
-     * @default null
-     */
-    this.data = null;
-    /**
-     * Defaults at false. When set to true, the component is disabled.
-     * @default false
-     */
-    this.disabled = false;
-    /**
-     * First day number (0 - sunday, 1 - monday, ...)
-     * TODO: manage with kupDates.locale, remove prop
-     * @default 1
-     */
-    this.firstDayIndex = 1;
-    /**
-     * Sets the initial value of the component
-     * @default ""
-     */
-    this.initialValue = '';
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
@@ -59,6 +24,13 @@ export class KupDatePicker {
       date: new Date(),
     };
     this.clickCb = null;
+    this.stateSwitcher = false;
+    this.value = '';
+    this.customStyle = '';
+    this.data = null;
+    this.disabled = false;
+    this.firstDayIndex = 1;
+    this.initialValue = '';
   }
   onKupDatePickerItemClick(value) {
     this.setPickerValueSelected(value);

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

@@ -5,23 +5,6 @@ import { componentWrapperId } from '../../variables/GenericVariables';
 import { drawerClass, KupDrawerProps } from './kup-drawer-declarations';
 export class KupDrawer {
   constructor() {
-    /*-------------------------------------------------*/
-    /*                   S t a t e s                   */
-    /*-------------------------------------------------*/
-    /**
-     * True when the drawer is open.
-     * @default false
-     */
-    this.opened = false;
-    /*-------------------------------------------------*/
-    /*                    P r o p s                    */
-    /*-------------------------------------------------*/
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
-    this.customStyle = '';
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
@@ -29,6 +12,8 @@ export class KupDrawer {
      * Instance of the KupManager class.
      */
     this.kupManager = kupManagerInstance();
+    this.opened = false;
+    this.customStyle = '';
   }
   /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */

package/dist/collection/components/kup-dropdown-button/kup-dropdown-button.js

@@ -10,69 +10,6 @@ import { componentWrapperId } from '../../variables/GenericVariables';
 import { KupDynamicPositionPlacement } from '../../managers/kup-dynamic-position/kup-dynamic-position-declarations';
 export class KupDropdownButton {
   constructor() {
-    /*-------------------------------------------------*/
-    /*                   S t a t e s                   */
-    /*-------------------------------------------------*/
-    this.id = '';
-    /*-------------------------------------------------*/
-    /*                    P r o p s                    */
-    /*-------------------------------------------------*/
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
-    this.customStyle = '';
-    /**
-     * Props of the sub-components.
-     * @default null
-     */
-    this.data = null;
-    /**
-     * Defaults at false. When set to true, the component is disabled.
-     * @default false
-     */
-    this.disabled = false;
-    /**
-     * Sets how to show the selected item value. Suported values: "code", "description", "both".
-     * @default ItemsDisplayMode.DESCRIPTION
-     */
-    this.displayMode = ItemsDisplayMode.DESCRIPTION;
-    /**
-     * Default value is false. When set to true, the arrow dropdown button is the only button displayed.
-     * @default false
-     */
-    this.dropdownOnly = false;
-    /**
-     * Defaults at null. When set, the button will show this icon.
-     * @default icon
-     */
-    this.icon = null;
-    /**
-     * Sets the initial value of the component.
-     * @default ""
-     */
-    this.initialValue = '';
-    /**
-     * Defaults at null. When set, the button will show this text.
-     * @default ""
-     */
-    this.label = null;
-    /**
-     * Sets how to return the selected item value. Suported values: "code", "description", "both".
-     * @default ItemsDisplayMode.CODE
-     */
-    this.selectMode = ItemsDisplayMode.CODE;
-    /**
-     * Defines the style of the button. Styles available: "flat", "outlined" and "raised" which is also the default.
-     * @default FButtonStyling.RAISED
-     */
-    this.styling = FButtonStyling.RAISED;
-    /**
-     * Defaults at null. When set, the icon will be shown after the text.
-     * @default false
-     */
-    this.trailingIcon = false;
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
@@ -93,6 +30,18 @@ export class KupDropdownButton {
      */
     this.listEl = null;
     this.clickCb = null;
+    this.id = '';
+    this.customStyle = '';
+    this.data = null;
+    this.disabled = false;
+    this.displayMode = ItemsDisplayMode.DESCRIPTION;
+    this.dropdownOnly = false;
+    this.icon = null;
+    this.initialValue = '';
+    this.label = null;
+    this.selectMode = ItemsDisplayMode.CODE;
+    this.styling = FButtonStyling.RAISED;
+    this.trailingIcon = false;
   }
   /**
    * Handles the navigation of the dropdown menu with the keyboard.

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

@@ -29,81 +29,6 @@ export class KupEchart {
   constructor() {
     _KupEchart_instances.add(this);
     /*-------------------------------------------------*/
-    /*                    P r o p s                    */
-    /*-------------------------------------------------*/
-    /**
-     * Sets the axis of the chart.
-     * @default ""
-     */
-    this.axis = '';
-    /**
-     * Overrides theme's colors.
-     * @default []
-     */
-    this.colors = [];
-    /**
-     * When true, performs checks in order to properly initialize props which could be missing (i.e.: axis).
-     * For performances purposes, this prop will run only once when the component is initially created.
-     * @default false
-     */
-    this.consistencyCheck = false;
-    /**
-     * Title of the graph.
-     * @default null
-     */
-    this.chartTitle = null;
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
-    this.customStyle = '';
-    /**
-     * The actual data of the chart.
-     * @default null
-     */
-    this.data = null;
-    /**
-     * Sets the position of the legend. Supported values: bottom, left, right, top, hidden. Keep in mind that legend types are tied to chart types, some combinations might not work.
-     * @default KupEchartLegendPlacement.RIGHT
-     */
-    this.legend = KupEchartLegendPlacement.RIGHT;
-    /**
-     * Choose which map you want to view, supported values: "europe", "africa", "asia", "oceania", "america", "italy" and "world". It's possible to supply a custom JSON too.
-     * @default null
-     */
-    this.map = null;
-    /**
-     * The data series to be displayed. They must be of the same type.
-     * @default []
-     */
-    this.series = [];
-    /**
-     * The width of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.).
-     * @default "100%"
-     */
-    this.sizeX = '100%';
-    /**
-     * The height of the chart, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.).
-     * @default "100%"
-     */
-    this.sizeY = '100%';
-    /**
-     * The type of the chart. Supported formats: Bar, Gaussian, Line, Pie, Map and Scatter.
-     * @default [KupEchartTypes.LINE]
-     */
-    this.types = [KupEchartTypes.LINE];
-    /**
-     * Customization options for the x Axis.
-     * @default null
-     */
-    this.xAxis = null;
-    /**
-     * Customization options for the y Axis.
-     * @default null
-     */
-    this.yAxis = null;
-    /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
     _KupEchart_chartContainer.set(this, void 0);
@@ -120,6 +45,20 @@ export class KupEchart {
     _KupEchart_maxColorHeatMap.set(this, null);
     _KupEchart_themeFont.set(this, null);
     _KupEchart_themeText.set(this, null);
+    this.axis = '';
+    this.colors = [];
+    this.consistencyCheck = false;
+    this.chartTitle = null;
+    this.customStyle = '';
+    this.data = null;
+    this.legend = KupEchartLegendPlacement.RIGHT;
+    this.map = null;
+    this.series = [];
+    this.sizeX = '100%';
+    this.sizeY = '100%';
+    this.types = [KupEchartTypes.LINE];
+    this.xAxis = null;
+    this.yAxis = null;
   }
   /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */

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

@@ -29,50 +29,6 @@ export class KupFamilyTree {
   constructor() {
     _KupFamilyTree_instances.add(this);
     /*-------------------------------------------------*/
-    /*                    P r o p s                    */
-    /*-------------------------------------------------*/
-    /**
-     * The component will autofit everytime a node is expanded.
-     * @default true
-     */
-    this.autofitOnExpand = true;
-    /**
-     * The component's initial render will fit the container by invoking the runAutofit method.
-     * @default true
-     */
-    this.autofitOnLoad = true;
-    /**
-     * Used to render the family tree boxes as kup-cards (through kup-box).
-     * @default null
-     */
-    this.cardData = null;
-    /**
-     * Nodes can be expanded/collapsed.
-     * @default true
-     */
-    this.collapsible = true;
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
-    this.customStyle = '';
-    /**
-     * Actual data of the component.
-     * @default null
-     */
-    this.data = null;
-    /**
-     * Layout of the boxes.
-     * @default null
-     */
-    this.layout = null;
-    /**
-     * Child nodes that have no children are arranged vertically.
-     * @default false
-     */
-    this.stackedLeaves = false;
-    /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
     _KupFamilyTree_clickTimeout.set(this, []);
@@ -91,6 +47,14 @@ export class KupFamilyTree {
     });
     _KupFamilyTree_shouldAutofit.set(this, false);
     _KupFamilyTree_wrapperEl.set(this, null);
+    this.autofitOnExpand = true;
+    this.autofitOnLoad = true;
+    this.cardData = null;
+    this.collapsible = true;
+    this.customStyle = '';
+    this.data = null;
+    this.layout = null;
+    this.stackedLeaves = false;
   }
   /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */

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

@@ -12,34 +12,14 @@ const dom = document.documentElement;
 export class KupForm {
   constructor() {
     /*-------------------------------------------------*/
-    /*                    P r o p s                    */
+    /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
+    this.kupManager = kupManagerInstance();
+    this.visibleColumns = [];
     this.customStyle = '';
-    /**
-     * Actual data of the form.
-     * @default null
-     */
     this.data = null;
-    /**
-     * Creates a hidden submit button in order to submit the form with enter.
-     * @default false
-     */
     this.hiddenSubmitButton = false;
-    /**
-     * How the form will arrange its content.
-     * @default null
-     */
     this.layout = null;
-    /*-------------------------------------------------*/
-    /*       I n t e r n a l   V a r i a b l e s       */
-    /*-------------------------------------------------*/
-    this.kupManager = kupManagerInstance();
-    this.visibleColumns = [];
   }
   /*-------------------------------------------------*/
   /*                  W a t c h e r s                */
@@ -173,7 +153,7 @@ export class KupForm {
       form: true,
       'form--column': !horizontal,
     };
-    return (h("form", { class: classObj, name: this.rootElement.id }, formContent, this.hiddenSubmitButton ? (h(FButton, { buttonType: "submit", label: "submit", wrapperClass: "form__submit" })) : null));
+    return (h("form", { class: classObj, name: this.rootElement.id }, formContent, this.hiddenSubmitButton ? (h(FButton, { buttonType: "submit", label: this.kupManager.language.translate(KupLanguageGeneric.CONFIRM), wrapperClass: "form__submit" })) : null));
   }
   renderSection(section, parent, row, visibleColumns) {
     var _a;

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

@@ -9,107 +9,46 @@ import { componentWrapperId } from '../../variables/GenericVariables';
 export class KupGauge {
   constructor() {
     /*-------------------------------------------------*/
-    /*                    P r o p s                    */
+    /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
     /**
-     * Sets how much the arc of the gauge should be thick.
-     * @namespace kup-gauge.arcThickness
-     * @see kup-gauge.size
+     * Instance of the KupManager class.
      */
-    this.arcThickness = 30;
+    this.kupManager = kupManagerInstance();
+    // Arcs generator
+    this.arcGenerator = arc();
     /**
-     * Array of three elements to specify the color of the arcs.
+     * Holds the maximum positive interval.
+     * Percentages are calculated as it follows:
+     * MIN = 0 = the value the prop minValue gets transformed to\
+     * MAX = ABSOLUTE(minValue - maxValue) = the maxValuePositive holds this value
+     * TVALUE = value - minValue = any value, which needs to be represented on the chart
+     * @namespace kup-gauge.maxValuePositive
      */
+    this.maxValuePositive = 0;
+    this.arcThickness = 30;
     this.colors = [
       `var(${KupThemeColorValues.SUCCESS})`,
       `var(${KupThemeColorValues.WARNING})`,
       `var(${KupThemeColorValues.DANGER})`,
     ];
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
     this.customStyle = '';
-    /**
-     * The distance the label and the value has from the gauge graph.
-     */
+    this.firstThreshold = undefined;
     this.labelDistance = 20;
-    /**
-     * The maximum value reachable in the current graph.
-     */
     this.maxValue = 100;
-    /**
-     * A string which will be appended to the displayed values of the component.
-     */
     this.measurementUnit = '';
-    /**
-     * The minimum value reachable in the current graph.
-     */
     this.minValue = -100;
-    /**
-     * When true, shows a rounded needle.
-     */
     this.needleCircle = false;
-    /**
-     * When true, ignore thresholds in gauge and show colored value's arc.
-     */
     this.onlyValue = false;
-    /**
-     * When true, the colors inside the colors array are used in the reversed order.
-     */
     this.reverseColors = false;
-    /**
-     * If set to false, threshold values of the gauge are not displayed.
-     */
+    this.secondThreshold = undefined;
     this.showLabels = true;
-    /**
-     * If set to false, the maximum and minimum values of the gauge are not displayed.
-     */
     this.showMaxmin = true;
-    /**
-     * If set to false, the current value of the gauge is not displayed.
-     */
     this.showValue = true;
-    /**
-     * Con be used change the viewbox of the SVG.
-     * By manipulating this value, some customizations of the aspect of the gauge is achievable.
-     * @namespace kup-gauge.size
-     * @see kup-gauge.arcThickness
-     */
     this.size = 300;
-    /**
-     * The current value of the gauge.
-     * The gauge's needle points to the percentage based on this prop.
-     */
     this.value = 0;
-    /**
-     * The current size of gauge's value.
-     * Correct values are: 0,1,2 or 3.
-     */
     this.valueSize = 0;
-    /**
-     * Set Width gauge.
-     */
     this.widthComponent = '100%';
-    /*-------------------------------------------------*/
-    /*       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();
-    // Arcs generator
-    this.arcGenerator = arc();
-    /**
-     * Holds the maximum positive interval.
-     * Percentages are calculated as it follows:
-     * MIN = 0 = the value the prop minValue gets transformed to\
-     * MAX = ABSOLUTE(minValue - maxValue) = the maxValuePositive holds this value
-     * TVALUE = value - minValue = any value, which needs to be represented on the chart
-     * @namespace kup-gauge.maxValuePositive
-     */
-    this.maxValuePositive = 0;
   }
   /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */

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

@@ -6,25 +6,6 @@ import { componentWrapperId } from '../../variables/GenericVariables';
 import { KupGridProps } from './kup-grid-declarations';
 export class KupGrid {
   constructor() {
-    /*-------------------------------------------------*/
-    /*                    P r o p s                    */
-    /*-------------------------------------------------*/
-    /**
-     * The number of columns displayed by the grid, the default behavior is 12.
-     * @default 12
-     */
-    this.columns = 12;
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
-    this.customStyle = '';
-    /**
-     * When set to true, forces the content on a single line.
-     * @default false
-     */
-    this.singleLine = false;
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
@@ -32,6 +13,9 @@ export class KupGrid {
      * Instance of the KupManager class.
      */
     this.kupManager = kupManagerInstance();
+    this.columns = 12;
+    this.customStyle = '';
+    this.singleLine = false;
   }
   /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */

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

@@ -5,21 +5,6 @@ import { getProps, setProps } from '../../utils/utils';
 import { KupIframeProps } from './kup-iframe-declarations';
 export class KupIframe {
   constructor() {
-    /*-------------------------------------------------*/
-    /*                    P r o p s                    */
-    /*-------------------------------------------------*/
-    /**
-     *  Props of the button (when isButton is set to true).
-     */
-    this.buttonData = {};
-    /**
-     * The component will be rendered as a button, which opens the link associated to the iframe in another tab when clicked.
-     */
-    this.isButton = false;
-    /**
-     * The address the iframe should be referencing to.
-     */
-    this.src = undefined;
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
@@ -27,6 +12,9 @@ export class KupIframe {
      * Instance of the KupManager class.
      */
     this.kupManager = kupManagerInstance();
+    this.buttonData = {};
+    this.isButton = false;
+    this.src = undefined;
   }
   onKupIframeError() {
     this.kupIframeError.emit({ comp: this, id: this.rootElement.id });

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

@@ -9,63 +9,23 @@ import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
 export class KupImage {
   constructor() {
-    /*-------------------------------------------------*/
-    /*                    P r o p s                    */
-    /*-------------------------------------------------*/
     /**
-     * Sets the data of badges.
-     * @default null
+     * True when the resource is an URL.
      */
-    this.badgeData = null;
+    this.isUrl = false;
     /**
-     * The color of the icon, defaults to the CSS variable KupThemeColorValues.ICON.
-     * @default KupThemeColorValues.ICON
+     * Instance of the KupManager class.
      */
+    this.kupManager = kupManagerInstance();
+    this.badgeData = null;
     this.color = `var(${KupThemeColorValues.ICON})`;
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
     this.customStyle = '';
-    /**
-     * When present, the component will be drawn using CSS. Check the 'Drawing with CSS' section of the image showcase for more information.
-     * @default null
-     */
     this.data = null;
-    /**
-     * When set to true, a spinner will be displayed until the image finished loading. Not compatible with SVGs.
-     * @default false
-     */
     this.feedback = false;
-    /**
-     * The image component will create a canvas element on which it's possible to draw. It's a temporary feature that will be fully replaced by CSS drawing in the future.
-     * @default false
-     */
     this.isCanvas = false;
-    /**
-     * The resource used to fetch the image.
-     * @default null
-     */
     this.resource = null;
-    /**
-     * The width of the icon, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.).
-     * @default '100%'
-     */
     this.sizeX = '100%';
-    /**
-     * The height of the icon, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.).
-     * @default '100%'
-     */
     this.sizeY = '100%';
-    /**
-     * True when the resource is an URL.
-     */
-    this.isUrl = false;
-    /**
-     * Instance of the KupManager class.
-     */
-    this.kupManager = kupManagerInstance();
   }
   onKupClick(e) {
     this.kupClick.emit({