@sme.up/ketchup 6.7.0 → 6.8.0

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

@@ -24,18 +24,15 @@
   font-size: var(--kup-font-size);
   padding: 0.5em;
 }
-.box-layout-2 .container {
+.box-layout-2 table {
   width: 100%;
 }
-.box-layout-2 .flex-container {
-  display: flex;
-  justify-content: space-between;
-}
 .box-layout-2 .label {
+  max-width: 50%;
   overflow: hidden;
   padding: 0.5em;
   text-overflow: ellipsis;
-  width: 50%;
+  white-space: nowrap;
 }
 .box-layout-2 .value {
   padding: 0.5em;
@@ -50,6 +47,8 @@
 }
 .box-layout-3 .container {
   display: flex;
+  justify-content: space-between;
+  overflow: hidden;
   width: 100%;
 }
 .box-layout-3 .flex-container {
@@ -61,7 +60,6 @@
   padding: 0.5em;
   text-overflow: ellipsis;
   white-space: nowrap;
-  width: 50%;
 }
 .box-layout-3 .value {
   padding: 0.5em;
@@ -901,6 +899,20 @@
   background-color: var(--kup-hover-background-color);
 }
 
+.built-in-layout-6 {
+  background-color: var(--kup-background-color);
+  border-radius: 4px;
+  box-sizing: border-box;
+  box-shadow: 0 2px 1px -1px rgba(128, 128, 128, 0.1), 0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: relative;
+  width: 100%;
+  overflow: auto;
+  padding: 0.5em;
+}
+
 .collapsible-layout-1 {
   color: var(--kup-text-color);
   box-shadow: 0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);
@@ -2407,6 +2419,8 @@
   /* Chrome */
 }
 .standard-layout-14 .section-1 {
+  --kup-button-font-size: 0.75em;
+  box-sizing: border-box;
   display: flex;
   padding: 1em;
 }
@@ -2422,14 +2436,21 @@
   margin: 0 0.5em 0 0;
 }
 .standard-layout-14 .section-1 .title {
-  --kup-button-font-size: 0.75em;
+  align-items: flex-end;
+  display: flex;
   font-size: 1.25em;
-  margin-top: -0.5em;
+  font-weight: 600;
+  margin-bottom: 0.5em;
   padding: 0 0.25em 0.25em;
+  text-align: left;
 }
 .standard-layout-14 .section-1 .title .label {
   cursor: pointer;
   padding-right: 0.25em;
+  padding-top: 0.5em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .standard-layout-14 .section-1 .title .label:hover {
   text-decoration: underline;
@@ -2446,6 +2467,7 @@
   width: auto;
 }
 .standard-layout-14 .section-1 .info .value {
+  font-weight: 600;
   width: 100%;
 }
 .standard-layout-14 .sub-button {
@@ -2516,8 +2538,7 @@
 .standard-layout-14 #open-in-new,
 .standard-layout-14 #search,
 .standard-layout-14 #new {
-  margin: 0;
-  display: inline-flex;
+  margin: 0 0 0.5em 0;
 }
 
 .standard-layout-15 {
@@ -2547,16 +2568,18 @@
   margin: 0 0.5em 0 0;
 }
 .standard-layout-15 .section-1 .title {
-  align-items: center;
+  align-items: flex-end;
   display: flex;
   font-size: 1.25em;
   font-weight: 600;
+  margin-bottom: 0.5em;
   padding: 0 0.25em 0.25em;
   text-align: left;
 }
 .standard-layout-15 .section-1 .title .label {
   cursor: pointer;
   padding-right: 0.25em;
+  padding-top: 0.5em;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2640,9 +2663,11 @@
 }
 
 /**
+* @prop --kup-card-backdrop: Backdrop of the component when is visible.
 * @prop --kup-card-ripple-color: Sets color of ripple effect (for Material layouts).
 */
 :host {
+  --kup_card_backdrop: var(--kup-card-backdrop, rgba(0, 0, 0, 0.32));
   --kup_card_ripple_color: var(
     --kup-card-ripple-color,
     var(--kup-primary-color)
@@ -2657,6 +2682,16 @@
   width: var(--kup_card_width);
 }
 
+:host([show-modal]) #kup-component {
+  position: fixed;
+  z-index: var(--kup-card-zindex);
+  height: var(--kup_card_height);
+  width: var(--kup_card_width);
+  top: var(--kup_card_top);
+  left: var(--kup_card_left);
+  display: var(--kup_card_display, none);
+}
+
 :host([is-menu]) {
   display: none;
   animation: fade-in 0.25s ease-out;
@@ -2672,6 +2707,18 @@
   width: 100%;
 }
 
+.backdrop {
+  background: var(--kup_card_backdrop);
+  display: none;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: calc(var(--kup-card-zindex) - 1);
+  display: block;
+}
+
 .mdc-ripple-surface {
   cursor: pointer;
   flex-direction: column;
@@ -2691,4 +2738,23 @@
 }
 .card-view.visible {
   display: block;
+}
+
+.dialog-layout-7 {
+  background-color: var(--kup-background-color);
+  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-height: 95vh;
+  max-width: 95vw;
+  width: 100%;
+}
+.dialog-layout-7 .section-1 {
+  max-height: 40vh;
+  overflow: auto;
+}
+.dialog-layout-7 .section-2 {
+  display: flex;
+  justify-content: center;
 }

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

@@ -18,52 +18,6 @@ import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
 export class KupCard {
   constructor() {
-    /*-------------------------------------------------*/
-    /*                    P r o p s                    */
-    /*-------------------------------------------------*/
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
-    this.customStyle = '';
-    /**
-     * The actual data of the card.
-     * @default null
-     */
-    this.data = null;
-    /**
-     * Defines whether the card is a menu or not.
-     * Works together with menuVisible.
-     * @default false
-     */
-    this.isMenu = false;
-    /**
-     * Sets the type of the card.
-     * @default KupCardFamily.STANDARD
-     */
-    this.layoutFamily = KupCardFamily.STANDARD;
-    /**
-     * Sets the number of the layout.
-     * @default 1
-     */
-    this.layoutNumber = 1;
-    /**
-     * Sets the status of the card as menu, when false it's hidden otherwise it's visible.
-     * Works together with isMenu.
-     * @default false
-     */
-    this.menuVisible = false;
-    /**
-     * The width of the card, defaults to 100%. Accepts any valid CSS format (px, %, vw, etc.).
-     * @default "100%"
-     */
-    this.sizeX = '100%';
-    /**
-     * The height of the card, defaults to 100%. Accepts any valid CSS format (px, %, vh, etc.).
-     * @default "100%"
-     */
-    this.sizeY = '100%';
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
@@ -85,6 +39,15 @@ export class KupCard {
     this.componentWrapper = null;
     this.colorPicker = null;
     this.firstColorPickerChange = true;
+    this.customStyle = '';
+    this.data = null;
+    this.isMenu = false;
+    this.layoutFamily = KupCardFamily.STANDARD;
+    this.layoutNumber = 1;
+    this.menuVisible = false;
+    this.showModal = false;
+    this.sizeX = '100%';
+    this.sizeY = '100%';
   }
   onKupClick(id, value) {
     this.kupClick.emit({
@@ -451,6 +414,13 @@ export class KupCard {
       }, 0);
     }
     this.kupManager.debug.logRender(this, true);
+    if (this.showModal) {
+      this.rootElement.style.setProperty('--kup_card_left', window.innerWidth / 2 - this.rootElement.clientWidth / 2 + 'px');
+      this.rootElement.style.setProperty('--kup_card_top', window.innerHeight / 2 -
+        this.rootElement.clientHeight / 2 +
+        'px');
+      this.rootElement.style.setProperty('--kup_card_display', 'block');
+    }
   }
   render() {
     if (!this.data && this.rootElement.children.length < 1) {
@@ -460,7 +430,17 @@ export class KupCard {
       '--kup_card_height': this.sizeY ? this.sizeY : '100%',
       '--kup_card_width': this.sizeX ? this.sizeX : '100%',
     };
-    return (h(Host, { style: style }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { id: componentWrapperId, onClick: () => this.onKupClick(null, null), ref: (el) => (this.componentWrapper = el) }, this.getLayout())));
+    const backdropComp = this.showModal ? (h("div", { class: "backdrop", onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }, onPointerDown: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }, onTouchStart: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      } })) : null;
+    return (h(Host, { style: style }, h("style", null, this.kupManager.theme.setKupStyle(this.rootElement)), backdropComp, h("div", { id: componentWrapperId, onClick: () => this.onKupClick(null, null), ref: (el) => (this.componentWrapper = el) }, this.getLayout())));
   }
   disconnectedCallback() {
     this.kupManager.interact.unregister([this.rootElement]);
@@ -619,6 +599,27 @@ export class KupCard {
         "reflect": true,
         "defaultValue": "false"
       },
+      "showModal": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "false"
+            }],
+          "text": "Sets the card as modal window"
+        },
+        "attribute": "show-modal",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "sizeX": {
         "type": "string",
         "mutable": false,

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

@@ -10,35 +10,16 @@ import { KupLanguageGeneric } from '../../managers/kup-language/kup-language-dec
 export class KupCell {
   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
+     * Instance of the KupManager class.
      */
+    this.kupManager = kupManagerInstance();
     this.customStyle = '';
-    /**
-     * The data of the cell.
-     * @default false
-     */
     this.data = null;
-    /**
-     * The density of the cell, defaults at 'dense' and can be also set to 'wide' or 'medium'.
-     */
     this.density = FCellPadding.NONE;
-    /**
-     * When set to true, the component is draggable.
-     * @default false
-     */
     this.dragEnabled = false;
-    /*-------------------------------------------------*/
-    /*       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();
   }
   /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */

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

@@ -10,67 +10,33 @@ import { componentWrapperId } from '../../variables/GenericVariables';
 export class KupChart {
   constructor() {
     /**
-     * Colors of the chart.
-     * @default []
+     * Instance of the KupManager class.
      */
+    this.kupManager = kupManagerInstance();
+    this.elStyle = undefined;
+    this.themeColors = null;
+    this.themeText = null;
+    this.asp = undefined;
+    this.axis = undefined;
+    this.chartTitle = undefined;
     this.colors = [];
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
     this.customStyle = '';
-    /**
-     * Sets the position of the legend. Supported values: bottom, labeled, left, none, right, top. Keep in mind that legend types are tied to chart types, some combinations might not work.
-     * @default "right"
-     */
+    this.data = undefined;
+    this.hAxis = undefined;
+    this.hAxes = undefined;
     this.legend = 'right';
-    /**
-     * Renders charts without the Google API and using jQuery Sparkline.
-     * @default undefined
-     */
     this.offlineMode = undefined;
-    /**
-     * Displays the numerical values.
-     * @default false
-     */
+    this.series = undefined;
     this.showMarks = false;
-    /**
-     * 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%';
-    /**
-     * Used to sort series.
-     * @default null
-     */
     this.sorting = null;
-    /**
-     * Displays the data columns of an object on top of each other.
-     */
     this.stacked = false;
-    /**
-     * The type of the chart. Supported formats: Area, Bubble, Cal, Candlestick, Combo, Geo, Hbar, Line, Ohlc, Pie, Sankey, Scatter, Unk, Vbar.
-     * @default [ChartType.Hbar]
-     */
     this.types = [ChartType.Hbar];
-    /**
-     * Google chart version to load
-     * @default "45.2"
-     */
+    this.vAxes = undefined;
+    this.vAxis = undefined;
+    this.trendlines = undefined;
     this.version = '45.2';
-    /**
-     * Instance of the KupManager class.
-     */
-    this.kupManager = kupManagerInstance();
-    this.elStyle = undefined;
-    this.themeColors = null;
-    this.themeText = null;
   }
   /*-------------------------------------------------*/
   /*                  W a t c h e r s                */

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

@@ -7,54 +7,19 @@ import { componentWrapperId } from '../../variables/GenericVariables';
 export class KupCheckbox {
   constructor() {
     /*-------------------------------------------------*/
-    /*                   S t a t e s                   */
+    /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
     /**
-     * The value of the component.
-     * @default ""
+     * Instance of the KupManager class.
      */
+    this.kupManager = kupManagerInstance();
     this.value = '';
-    /*-------------------------------------------------*/
-    /*                    P r o p s                    */
-    /*-------------------------------------------------*/
-    /**
-     * Defaults at false. When set to true, the component will be set to 'checked'.
-     * @default false
-     */
     this.checked = false;
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
     this.customStyle = '';
-    /**
-     * When set to true, the component is disabled.
-     * @default false
-     */
     this.disabled = false;
-    /**
-     * When set to true, the component will be set to 'indeterminate'.
-     * @default false
-     */
     this.indeterminate = false;
-    /**
-     * When specified, its content will be shown as a label.
-     * @default null
-     */
     this.label = null;
-    /**
-     * When set to true, the label will be on the left of the component.
-     * @default false
-     */
     this.leadingLabel = false;
-    /*-------------------------------------------------*/
-    /*       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();
   }
   onKupBlur() {
     this.kupBlur.emit({

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

@@ -8,25 +8,6 @@ import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
 export class KupChip {
   constructor() {
-    /*-------------------------------------------------*/
-    /*                    P r o p s                    */
-    /*-------------------------------------------------*/
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
-    this.customStyle = '';
-    /**
-     * List of elements.
-     * @default []
-     */
-    this.data = [];
-    /**
-     * The type of chip. Available types: input, filter, choice or empty for default.
-     * @default FChipType.STANDARD
-     */
-    this.type = FChipType.STANDARD;
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
@@ -34,6 +15,9 @@ export class KupChip {
      * Instance of the KupManager class.
      */
     this.kupManager = kupManagerInstance();
+    this.customStyle = '';
+    this.data = [];
+    this.type = FChipType.STANDARD;
   }
   onKupBlur(chip) {
     this.kupBlur.emit({

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

@@ -11,50 +11,19 @@ import { KupDynamicPositionPlacement } from '../../managers/kup-dynamic-position
 export class KupColorPicker {
   constructor() {
     /*-------------------------------------------------*/
-    /*                   S t a t e s                   */
+    /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
     /**
-     * State of the component.
-     * @default null
+     * Instance of the KupManager class.
      */
+    this.kupManager = kupManagerInstance();
+    this.clickCb = null;
     this.value = null;
-    /*-------------------------------------------------*/
-    /*                    P r o p s                    */
-    /*-------------------------------------------------*/
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
     this.customStyle = '';
-    /**
-     * Props of the text field.
-     * @default null
-     */
     this.data = null;
-    /**
-     * Defaults at false. When set to true, the component is disabled.
-     * @default false
-     */
     this.disabled = false;
-    /**
-     * Sets the initial value of the component. Can be css color name, hex code or rgb code (sample: "red" or rgb(255, 0, 0) or "#FF0000" ).
-     * @default ""
-     */
     this.initialValue = '';
-    /**
-     * When true, the component's text field will be replaced by a swatch.
-     * @default false
-     */
     this.swatchOnly = false;
-    /*-------------------------------------------------*/
-    /*       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();
-    this.clickCb = null;
   }
   /*-------------------------------------------------*/
   /*           P u b l i c   M e t h o d s           */

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

@@ -30,48 +30,6 @@ export class KupCombobox {
   constructor() {
     _KupCombobox_instances.add(this);
     /*-------------------------------------------------*/
-    /*                   S t a t e s                   */
-    /*-------------------------------------------------*/
-    this.displayedValue = undefined;
-    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 (date input text field).
-     */
-    this.data = undefined;
-    /**
-     * Defaults at false. When set to true, the component is disabled.
-     */
-    this.disabled = false;
-    /**
-     * Sets how to show the selected item value. Suported values: "code", "description", "both".
-     */
-    this.displayMode = ItemsDisplayMode.DESCRIPTION;
-    /**
-     * Sets the initial value of the component
-     */
-    this.initialValue = '';
-    /**
-     * Lets the combobox behave as a select element.
-     */
-    this.isSelect = false;
-    /**
-     * Sets how to return the selected item value. Suported values: "code", "description", "both".
-     */
-    this.selectMode = ItemsDisplayMode.CODE;
-    /**
-     * When true shows the drop-down icon, for open list.
-     */
-    this.showDropDownIcon = true;
-    /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
     /**
@@ -83,6 +41,16 @@ export class KupCombobox {
     _KupCombobox_textfieldWrapper.set(this, undefined);
     _KupCombobox_textfieldEl.set(this, undefined);
     _KupCombobox_clickCb.set(this, null);
+    this.displayedValue = undefined;
+    this.value = '';
+    this.customStyle = '';
+    this.data = undefined;
+    this.disabled = false;
+    this.displayMode = ItemsDisplayMode.DESCRIPTION;
+    this.initialValue = '';
+    this.isSelect = false;
+    this.selectMode = ItemsDisplayMode.CODE;
+    this.showDropDownIcon = true;
   }
   onKupBlur() {
     this.kupBlur.emit({

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

@@ -3,25 +3,13 @@ import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 export class KupDash {
   constructor() {
     /**
-     * The component can be clicked.
+     * Instance of the KupManager class.
      */
+    this.kupManager = kupManagerInstance();
     this.active = false;
-    /**
-     * Sets the font size of the component.
-     */
     this.fontsize = '';
-    /**
-     * Sets the layout of the component.
-     */
     this.layout = '1';
-    /**
-     * No idea what this is about.
-     */
     this.index = 0;
-    /**
-     * Instance of the KupManager class.
-     */
-    this.kupManager = kupManagerInstance();
   }
   onDshClickHandler() {
     this.dashClick.emit({