@sme.up/ketchup 6.7.0 → 6.9.0-SNAPSHOT

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({
@@ -125,7 +109,7 @@ export class KupChip {
     const isChoice = this.type.toLowerCase() === FChipType.CHOICE;
     let firstCheckedFound = false;
     if (isChoice) {
-      for (let j = 0; j < this.data.length; j++) {
+      for (let j = 0; this.data && j < this.data.length; j++) {
         if (this.data[j].checked && firstCheckedFound) {
           this.data[j].checked = false;
           let message = 'Found occurence of data(' +
@@ -170,7 +154,7 @@ export class KupChip {
         ? true
         : false,
     };
-    for (let j = 0; j < this.data.length; j++) {
+    for (let j = 0; this.data && j < this.data.length; j++) {
       props.onBlur.push((chip) => this.onKupBlur(chip));
       props.onClick.push((chip) => this.onKupClick(chip));
       props.onExpansionClick.push((chip, e) => {

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({

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

@@ -4,6 +4,13 @@ import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { getDecimalSeparator } from '../../utils/utils';
 export class KupDashList {
   constructor() {
+    /*-------------------------------------------------*/
+    /*       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.layout = '1';
     this.fontsize = '';
     this.active = false;
@@ -13,13 +20,7 @@ export class KupDashList {
     this.iconColor = [];
     this.valueColor = [];
     this.textColor = [];
-    /*-------------------------------------------------*/
-    /*       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.data = undefined;
   }
   render() {
     let rows = [];

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

@@ -12,32 +12,6 @@ import { componentWrapperId } from '../../variables/GenericVariables';
 import { KupDashboardProps, } from './kup-dashboard-declarations';
 export class KupDashboard {
   constructor() {
-    /*-------------------------------------------------*/
-    /*                   S t a t e s                   */
-    /*-------------------------------------------------*/
-    /**
-     * Force render component by internal event.
-     */
-    this.resetInternalData = false;
-    /*-------------------------------------------------*/
-    /*                    P r o p s                    */
-    /*-------------------------------------------------*/
-    /**
-     * Custom style of the component.
-     * @default ""
-     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
-     */
-    this.customStyle = '';
-    /**
-     * The data of the component.
-     * @default null
-     */
-    this.data = null;
-    /**
-     * Enable drag & drop of the section.
-     * @default false
-     */
-    this.enableDesign = false;
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
     /*-------------------------------------------------*/
@@ -53,6 +27,10 @@ export class KupDashboard {
      * Internal data backup of the component for refresh when changed content by drag&drop.
      */
     this.internalDataBackup = null;
+    this.resetInternalData = false;
+    this.customStyle = '';
+    this.data = null;
+    this.enableDesign = false;
   }
   onKupSave() {
     this.kupSave.emit({

package/dist/collection/components/kup-data-table/kup-data-table-declarations.js

@@ -26,6 +26,7 @@ export var KupDataTableProps;
   KupDataTableProps["groupLabelDisplay"] = "How the label of a group must be displayed. For available values";
   KupDataTableProps["groups"] = "The list of groups.";
   KupDataTableProps["headerIsPersistent"] = "When set to true the header will stick on top of the table when scrolling.";
+  KupDataTableProps["insertMode"] = "Enables insert mode.";
   KupDataTableProps["isFocusable"] = "When set to true, clicked-on rows will have a visual feedback.";
   KupDataTableProps["lazyLoadRows"] = "When set to true, extra rows will be automatically loaded once the last row enters the viewport. When groups are present, the number of rows is referred to groups and not to their content. Paginator is disabled.";
   KupDataTableProps["lineBreakCharacter"] = "Defines the placeholder character which will be replaced by a line break inside table header cells, normal or sticky.";
@@ -41,6 +42,7 @@ export var KupDataTableProps;
   KupDataTableProps["rowsPerPage"] = "Sets the number of rows per page to display.";
   KupDataTableProps["scrollOnHover"] = "Activates the scroll on hover function.";
   KupDataTableProps["showCustomization"] = "If set to true, displays the button to open the customization panel.";
+  KupDataTableProps["showDeleteButton"] = "Enables the delete row button.";
   KupDataTableProps["showFilters"] = "When set to true enables the column filters.";
   KupDataTableProps["showFooter"] = "When set to true shows the footer.";
   KupDataTableProps["showGrid"] = "Can be used to customize the grid view of the table.";

package/dist/collection/components/kup-data-table/kup-data-table-state.js

@@ -5,8 +5,8 @@ export class KupDataTableState {
     this.expandGroups = false;
     this.groupLabelDisplay = GroupLabelDisplayMode.BOTH;
     this.density = 'small';
-    this.enableExtraColumns = true;
     this.enableSortableColumns = false;
+    this.enableExtraColumns = true;
     this.forceOneLine = false;
     this.globalFilter = false;
     this.globalFilterValue = '';

package/dist/collection/components/kup-data-table/kup-data-table.css

@@ -415,6 +415,15 @@ th.obj:hover span:not(.overlay-action) {
   display: inline-block;
 }
 
+.actions-wrapper {
+  display: flex;
+}
+
+.insert-button,
+.delete-button {
+  padding: 1em 0.5em;
+}
+
 .kup-icon.kup-ascending-icon {
   -webkit-mask: var(--kup-ascending-icon);
   mask: var(--kup-ascending-icon);