@sme.up/ketchup 5.2.0-SNAPSHOT → 5.2.1-SNAPSHOT

package/dist/collection/components/kup-card/built-in/kup-card-numeric.js

@@ -0,0 +1,153 @@
+import { h } from '@stencil/core';
+import { FButton } from '../../../f-components/f-button/f-button';
+const dom = document.documentElement;
+const maximumFractionDigits = 14;
+export function prepareNumeric(component) {
+  const el = component.rootElement;
+  if (!el.kupData)
+    el.kupData = {
+      value: null,
+      localeValue: '',
+    };
+  let decimals = false;
+  let negative = false;
+  const options = getOptions(component);
+  if (options.resetStatus) {
+    el.kupData = {
+      value: null,
+      localeValue: '',
+    };
+    const obj = options.initialValue;
+    if (options.initialValue) {
+      if (obj && obj.k)
+        el.kupData.value = obj.k;
+      else
+        el.kupData.value = options.initialValue.toString();
+      el.kupData.localeValue = dom.ketchup.math.numbers.toLocaleString(el.kupData.value);
+    }
+    options.resetStatus = false;
+  }
+  if (options.negative)
+    negative = true;
+  if (options.decimals)
+    decimals = true;
+  const clearButtonProp = {
+    icon: 'cancel',
+    onClick: () => clearValue(component),
+  };
+  const saveButtonProp = {
+    icon: 'save',
+    onClick: () => saveValue(component),
+  };
+  const decChar = getDecimalChar();
+  return (h("table", null,
+    h("tr", null,
+      h("td", { colSpan: 3 },
+        h("div", { class: "value" }, el.kupData.localeValue))),
+    h("tr", null,
+      h("td", null,
+        h("div", { class: "number", onClick: () => setValue(component, '1') }, "1")),
+      h("td", null,
+        h("div", { class: "number", onClick: () => setValue(component, '2') }, "2")),
+      h("td", null,
+        h("div", { class: "number", onClick: () => setValue(component, '3') }, "3"))),
+    h("tr", null,
+      h("td", null,
+        h("div", { class: "number", onClick: () => setValue(component, '4') }, "4")),
+      h("td", null,
+        h("div", { class: "number", onClick: () => setValue(component, '5') }, "5")),
+      h("td", null,
+        h("div", { class: "number", onClick: () => setValue(component, '6') }, "6"))),
+    h("tr", null,
+      h("td", null,
+        h("div", { class: "number", onClick: () => setValue(component, '7') }, "7")),
+      h("td", null,
+        h("div", { class: "number", onClick: () => setValue(component, '8') }, "8")),
+      h("td", null,
+        h("div", { class: "number", onClick: () => setValue(component, '9') }, "9"))),
+    h("tr", null,
+      h("td", null, negative
+        ? [
+          h("div", { class: "number", onClick: () => setSign(component) }, "-"),
+        ]
+        : []),
+      h("td", null,
+        h("div", { class: "number", onClick: () => setValue(component, '0') }, "0")),
+      h("td", null, decimals
+        ? [
+          h("div", { class: "number", onClick: () => setValue(component, '.') }, decChar),
+        ]
+        : [])),
+    h("tr", null,
+      h("td", null),
+      h("td", null,
+        h(FButton, Object.assign({}, clearButtonProp))),
+      h("td", null,
+        h(FButton, Object.assign({}, saveButtonProp))))));
+}
+function getOptions(component) {
+  if (component.data.options)
+    return component.data.options;
+  else
+    return { resetStatus: false };
+}
+function setSign(component) {
+  const el = component.rootElement;
+  let strVal = el.kupData.value ? el.kupData.value : '0';
+  if (strVal.startsWith('-'))
+    return;
+  strVal = '-' + strVal;
+  el.kupData.value = strVal;
+  el.kupData.localeValue = dom.ketchup.math.numbers.toLocaleString(strVal);
+  component.refresh();
+}
+function setValue(component, value) {
+  const options = getOptions(component);
+  const el = component.rootElement;
+  const decChar = '.';
+  let strVal = el.kupData.value ? el.kupData.value.toString() : '0';
+  // if the first value is 0 and the character you want to insert is not a comma, I clear the field.
+  if (strVal == '0' && value != decChar) {
+    strVal = '';
+  }
+  // if I have already entered a decimal sign I stop.
+  if (value == decChar && strVal.includes(decChar))
+    return;
+  // if the text field contains the maximum number entered, excluding the comma, I stop.
+  if (options.maxLength &&
+    strVal.replace(decChar, '').length == options.maxLength)
+    return;
+  // if a maximum number of integers is required, and I don't have the comma, I check to be right with the values.
+  if (options.maxIntegers &&
+    value != decChar &&
+    !strVal.includes(decChar) &&
+    strVal.length == options.maxIntegers)
+    return;
+  // if a maximum number of decimals has been requested, check where we are.
+  if (options.maxDecimals &&
+    strVal.includes(decChar) &&
+    strVal.substring(strVal.indexOf(decChar) + 1).length ==
+      options.maxDecimals)
+    return;
+  // if the maximum number of decimals in JS has been reached, I stop.
+  if (strVal.includes(decChar) &&
+    strVal.substring(strVal.indexOf(decChar) + 1).length == 14)
+    return;
+  strVal += value;
+  el.kupData.value = strVal;
+  el.kupData.localeValue = dom.ketchup.math.numbers.toLocaleString(strVal);
+  component.refresh();
+}
+function clearValue(component) {
+  const el = component.rootElement;
+  el.kupData.value = null;
+  el.kupData.localeValue = '';
+  component.refresh();
+}
+function getDecimalChar() {
+  return (0.1).toLocaleString(dom.ketchup.math.locale).substring(1, 2);
+}
+function saveValue(component) {
+  const el = component.rootElement;
+  component.onKupClick(component.rootElement.id, el.kupData.value ? Number(el.kupData.value).toString() : '');
+}

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

@@ -766,6 +766,41 @@
   outline: none;
 }
 
+.built-in-layout-5 {
+  background: var(--kup-background-color);
+  box-shadow: var(--kup-box-shadow);
+  box-sizing: border-box;
+  overflow: auto;
+  padding: 0.5em;
+}
+.built-in-layout-5 > table {
+  width: 100%;
+}
+.built-in-layout-5 > table > tr > td > div.value {
+  text-align: right;
+  color: var(--kup-primary-color);
+  border-bottom: 1px solid var(--kup-border-color);
+  min-height: 1.5em;
+}
+.built-in-layout-5 > table > tr > td > .f-button {
+  display: flex;
+  justify-content: center;
+}
+.built-in-layout-5 > table > tr > td > div.number {
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  line-height: 2.5em;
+  margin: auto;
+  width: 2.5em;
+  transition: background-color 0.25s;
+  text-transform: capitalize;
+}
+.built-in-layout-5 > table > tr > td > div.number:hover {
+  background-color: var(--kup-hover-background-color);
+}
+
 .collapsible-layout-1 {
   color: var(--kup-text-color);
   box-shadow: 0px 0px 7.5px 0px rgba(128, 128, 128, 0.5);

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

@@ -351,6 +351,7 @@ export class KupCard {
     root.addEventListener('kup-timepicker-textfieldsubmit', this.cardEvent);
     root.addEventListener('kup-tree-dynamicmassexpansion', this.cardEvent);
     root.addEventListener('kup-tree-buttonclick', this.cardEvent);
+    root.addEventListener('kup-tree-didunload', this.cardEvent);
     root.addEventListener('kup-tree-nodecollapse', this.cardEvent);
     root.addEventListener('kup-tree-nodedblclick', this.cardEvent);
     root.addEventListener('kup-tree-nodeexpand', this.cardEvent);

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

@@ -603,6 +603,12 @@ export class KupDataTable {
   async getProps(descriptions) {
     return getProps(this, KupDataTableProps, descriptions);
   }
+  /**
+   * This method will get the selected rows of the component.
+   */
+  async getSelectedRows() {
+    return this.selectedRows;
+  }
   /**
    * Hides the given column.
    * @param {KupDataColumn} column - Column to hide.
@@ -898,7 +904,6 @@ export class KupDataTable {
     this.groups = [];
     // update data
     this.data = Object.assign({}, totalsMatrixData);
-    // console.log(this.data);
     // calc totals
     // distinct becomes count
     // count becomes sum
@@ -1632,7 +1637,7 @@ export class KupDataTable {
     this.detailCard.style.transform = 'translate(' + x + 'px,' + y + 'px)';
     this.rootElement.shadowRoot.append(this.detailCard);
   }
-  getEventDetails(path) {
+  getEventDetails(path, e) {
     let isHeader, isBody, isFooter, td, textfield, th, tr, filterRemove;
     if (path) {
       for (let i = path.length - 1; i >= 0; i--) {
@@ -1716,6 +1721,7 @@ export class KupDataTable {
       column: column ? column : null,
       filterRemove: filterRemove ? filterRemove : null,
       isGroupRow: isGroupRow,
+      originalEvent: e,
       row: row ? row : null,
       td: td ? td : null,
       textfield: textfield ? textfield : null,
@@ -1724,7 +1730,7 @@ export class KupDataTable {
     };
   }
   clickHandler(e) {
-    const details = this.getEventDetails(this.getEventPath(e));
+    const details = this.getEventDetails(this.getEventPath(e), e);
     if (details.area === 'header') {
       if (details.th && details.column) {
         if (details.filterRemove) {
@@ -1763,7 +1769,7 @@ export class KupDataTable {
     return details;
   }
   contextMenuHandler(e) {
-    const details = this.getEventDetails(this.getEventPath(e));
+    const details = this.getEventDetails(this.getEventPath(e), e);
     if (details.area === 'header') {
       if (details.th && details.column) {
         this.openColumnMenu(details.column.name);
@@ -1793,7 +1799,7 @@ export class KupDataTable {
     return details;
   }
   dblClickHandler(e) {
-    const details = this.getEventDetails(this.getEventPath(e));
+    const details = this.getEventDetails(this.getEventPath(e), e);
     if (details.area === 'body') {
       if (this.selection == SelectionMode.MULTIPLE) {
         this.resetSelectedRows();
@@ -4950,6 +4956,29 @@ export class KupDataTable {
           }]
       }
     },
+    "getSelectedRows": {
+      "complexType": {
+        "signature": "() => Promise<Array<KupDataTableRow>>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "KupDataTableRow": {
+            "location": "import",
+            "path": "./kup-data-table-declarations"
+          },
+          "Array": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<KupDataTableRow[]>"
+      },
+      "docs": {
+        "text": "This method will get the selected rows of the component.",
+        "tags": []
+      }
+    },
     "hideColumn": {
       "complexType": {
         "signature": "(column: KupDataColumn) => Promise<void>",

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

@@ -344,7 +344,7 @@ export class KupDatePicker {
         resetStatus: true,
       },
     };
-    return (h("kup-card", { ref: (el) => (this.pickerContainerEl = el), data: data, layoutFamily: KupCardFamily.BUILT_IN, sizeX: "300px", sizeY: "300px", isMenu: true, "onkup-card-click": (ev) => {
+    return (h("kup-card", { ref: (el) => (this.pickerContainerEl = el), data: data, layoutFamily: KupCardFamily.BUILT_IN, sizeX: "300px", sizeY: "auto", isMenu: true, "onkup-card-click": (ev) => {
         if (ev.detail.value != null && ev.detail.value != '')
           this.onKupDatePickerItemClick(ev.detail.value);
       } }));

package/dist/collection/components/kup-numeric-picker/kup-numeric-picker-declarations.js

@@ -0,0 +1,16 @@
+/**
+ * Props of the kup-numeric-picker component.
+ * Used to export every prop in an object.
+ */
+export var KupNumericPickerProps;
+(function (KupNumericPickerProps) {
+  KupNumericPickerProps["customStyle"] = "Custom style of the component.";
+  KupNumericPickerProps["data"] = "Props of the sub-components.";
+  KupNumericPickerProps["decimals"] = "Defaults at false. When set to true, the component has decimals.";
+  KupNumericPickerProps["disabled"] = "Defaults at false. When set to true, the component is disabled.";
+  KupNumericPickerProps["initialValue"] = "Sets the initial value of the component";
+  KupNumericPickerProps["maxDecimals"] = "when set, the component allows you to enter decimals with a maximum of characters.";
+  KupNumericPickerProps["maxIntegers"] = "When set, the component allows you to enter integer numbers with a maximum of characters.";
+  KupNumericPickerProps["maxLength"] = "When set, the component allows you to enter numbers with a maximum of characters, including decimals.";
+  KupNumericPickerProps["negative"] = "Defaults at false. When set to true, the component has negative number.";
+})(KupNumericPickerProps || (KupNumericPickerProps = {}));

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

@@ -0,0 +1,50 @@
+:host {
+  display: block;
+  font-size: var(--kup-font-size);
+}
+
+.f-text-field {
+  position: relative;
+}
+
+/*-------------------------------------------------*/
+/*        C o m p o n e n t   C l a s s e s        */
+/*-------------------------------------------------*/
+:host(.kup-full-height) {
+  height: 100%;
+}
+:host(.kup-full-height) #kup-component {
+  height: 100%;
+}
+
+:host(.kup-full-width) {
+  width: 100%;
+}
+:host(.kup-full-width) #kup-component {
+  width: 100%;
+}
+
+:host(.kup-danger) {
+  --kup-textfield-primary-color: var(--kup-danger-color);
+  --kup-textfield-primary-color-rgb: var(--kup-danger-color-rgb);
+}
+
+:host(.kup-info) {
+  --kup-textfield-primary-color: var(--kup-info-color);
+  --kup-textfield-primary-color-rgb: var(--kup-info-color-rgb);
+}
+
+:host(.kup-secondary) {
+  --kup-textfield-primary-color: var(--kup-secondary-color);
+  --kup-textfield-primary-color-rgb: var(--kup-secondary-color-rgb);
+}
+
+:host(.kup-success) {
+  --kup-textfield-primary-color: var(--kup-success-color);
+  --kup-textfield-primary-color-rgb: var(--kup-success-color-rgb);
+}
+
+:host(.kup-warning) {
+  --kup-textfield-primary-color: var(--kup-warning-color);
+  --kup-textfield-primary-color-rgb: var(--kup-warning-color-rgb);
+}