@sme.up/ketchup 7.5.0-SNAPSHOT → 8.0.1

package/dist/collection/f-components/f-text-field/f-text-field.js

@@ -1,5 +1,6 @@
 import { getAssetPath, h } from '@stencil/core';
 import { KupThemeIconValues } from '../../managers/kup-theme/kup-theme-declarations';
+const dom = document.documentElement;
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
@@ -14,6 +15,7 @@ export const FTextField = (props, children) => {
 /*                  M e t h o d s                  */
 /*-------------------------------------------------*/
 function setContent(props) {
+  var _a, _b;
   const isOutlined = props.textArea || props.outlined;
   let labelEl;
   let iconEl;
@@ -47,17 +49,79 @@ function setContent(props) {
     'mdc-text-field--with-leading-icon': props.icon && !props.trailingIcon,
     'mdc-text-field--with-trailing-icon': props.icon && props.trailingIcon,
   };
-  return (h("div", { class: classObj }, props.textArea && props.maxLength ? (h("div", { class: "mdc-text-field-character-counter" }, "'0 / ' + ", props.maxLength)) : undefined, !props.trailingIcon ? iconEl : undefined, props.textArea ? (h("span", { class: "mdc-text-field__resizer" }, h("textarea", { class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown }))) : (h("input", { inputmode: props.inputMode ? props.inputMode : undefined, type: props.inputType ? props.inputType : 'text', step: props.step, min: props.min, max: props.max, name: props.name, class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, placeholder: props.fullWidth && !props.outlined
+  let value = props.value;
+  let inputType = (_a = props.inputType) !== null && _a !== void 0 ? _a : 'text';
+  let persManageForNumberFormat = false;
+  if (props.inputType === 'number' && props.decimals && props.decimals > 0) {
+    inputType = 'text';
+    persManageForNumberFormat = true;
+  }
+  if (props.inputType === 'number') {
+    const options = {
+      allowNegative: (_b = props.allowNegative) !== null && _b !== void 0 ? _b : true,
+      decimal: props.decimals,
+      group: props.group,
+      integer: props.integers,
+    };
+    value = formatValue(value, options, false);
+  }
+  return (h("div", { class: classObj }, props.textArea && props.maxLength ? (h("div", { class: "mdc-text-field-character-counter" }, "'0 / ' + ", props.maxLength)) : undefined, !props.trailingIcon ? iconEl : undefined, props.textArea ? (h("span", { class: "mdc-text-field__resizer" }, h("textarea", { class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, maxlength: props.maxLength, value: value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown }))) : (h("input", { inputmode: props.inputMode ? props.inputMode : undefined, type: inputType, step: props.step, min: props.min, max: props.max, name: props.name, class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, placeholder: props.fullWidth && !props.outlined
       ? props.label
-      : undefined, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onChange: (e) => {
-      if (props.decimals !== null &&
-        props.inputType === 'number') {
-        e.target.value = parseFloat(e.target.value).toFixed(props.decimals);
+      : undefined, maxlength: props.maxLength, value: value, onBlur: (e) => {
+      var _a;
+      if (persManageForNumberFormat) {
+        const options = {
+          allowNegative: (_a = props.allowNegative) !== null && _a !== void 0 ? _a : true,
+          decimal: props.decimals,
+          group: props.group,
+          integer: props.integers,
+        };
+        e.target.value = formatValue(e.target.value, options, true);
+      }
+      if (props.onBlur) {
+        props.onBlur(e);
+      }
+    }, onChange: (e) => {
+      var _a;
+      if (persManageForNumberFormat) {
+        const options = {
+          allowNegative: (_a = props.allowNegative) !== null && _a !== void 0 ? _a : true,
+          decimal: props.decimals,
+          group: props.group,
+          integer: props.integers,
+        };
+        e.target.value = formatValue(e.target.value, options, true);
       }
       if (props.onChange) {
         props.onChange(e);
       }
-    }, onClick: props.onClick, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown })), props.isClearable ? (h("span", { class: `mdc-text-field__icon kup-icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onClearIconClick })) : undefined, props.trailingIcon ? iconEl : undefined, !props.fullWidth && !isOutlined ? labelEl : undefined, isOutlined ? (h("div", { class: "mdc-notched-outline" }, h("div", { class: "mdc-notched-outline__leading" }), h("div", { class: "mdc-notched-outline__notch" }, labelEl), h("div", { class: "mdc-notched-outline__trailing" }))) : (h("span", { class: "mdc-line-ripple" }))));
+    }, onClick: props.onClick, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown, onKeyPress: (e) => {
+      var _a;
+      if (!persManageForNumberFormat) {
+        return;
+      }
+      if (e.ctrlKey) {
+        return;
+      }
+      if (e.key.length > 1) {
+        return;
+      }
+      const options = {
+        allowNegative: (_a = props.allowNegative) !== null && _a !== void 0 ? _a : true,
+        decimal: props.decimals,
+        group: props.group,
+        integer: props.integers,
+      };
+      let component = e.target;
+      let value = component.value;
+      let beginVal = value.substring(0, component.selectionStart);
+      let endVal = value.substring(component.selectionEnd, component.selectionEnd + value.length - 1);
+      let val = beginVal + e.key + endVal;
+      if (!dom.ketchup.math.matchNumericValueWithOptions(val, options)) {
+        e.preventDefault();
+        return;
+      }
+    } })), props.isClearable ? (h("span", { class: `mdc-text-field__icon kup-icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onClearIconClick })) : undefined, props.trailingIcon ? iconEl : undefined, !props.fullWidth && !isOutlined ? labelEl : undefined, isOutlined ? (h("div", { class: "mdc-notched-outline" }, h("div", { class: "mdc-notched-outline__leading" }), h("div", { class: "mdc-notched-outline__notch" }, labelEl), h("div", { class: "mdc-notched-outline__trailing" }))) : (h("span", { class: "mdc-line-ripple" }))));
 }
 function setHelper(props) {
   if (props.helperEnabled !== false) {
@@ -75,3 +139,13 @@ function setHelper(props) {
     }
   }
 }
+const formatValue = function (value, options, inputIsLocalized) {
+  let formatedValue = value;
+  if (!formatedValue) {
+    return formatedValue;
+  }
+  if (formatedValue == '-') {
+    return '';
+  }
+  return dom.ketchup.math.format(formatedValue, dom.ketchup.math.createFormatPattern(options.group, options.decimal), inputIsLocalized);
+};

package/dist/collection/managers/kup-manager/kup-manager.js

@@ -233,6 +233,24 @@ export class KupManager {
       this.utilities.clickCallbacks.add(cb);
     }
   }
+  /**
+   * Retrives event path from event.target
+   * @param currentEl event.target
+   * @param rootElement rootElement of component
+   * @returns
+   */
+  getEventPath(currentEl, rootElement) {
+    const path = [];
+    while (currentEl &&
+      currentEl !== rootElement &&
+      currentEl !== document.body) {
+      path.push(currentEl);
+      currentEl = currentEl.parentNode
+        ? currentEl.parentNode
+        : currentEl.host;
+    }
+    return path;
+  }
   /**
    * Rasterizes an HTMLElement, transforming into a canvas.
    * @param {HTMLElement} el - Element to rasterize.

package/dist/collection/managers/kup-math/kup-math.js

@@ -102,10 +102,11 @@ export class KupMath {
    * Formats the input number with the specified format of the currently set locale.
    * @param {string | String | number} input - Input number which will be automatically "numberified".
    * @param {string} format - Desired format. Defaults to '0,0.00' (i.e.: 2,000,000.51).
+   * @param {boolean} inputIsLocalized Numberifies assuming the input string is in the current KupMath locale's format.
    * @returns {string} Formatted number.
    */
-  format(input, format) {
-    const n = this.numberify(input);
+  format(input, format, inputIsLocalized) {
+    const n = this.numberify(input, inputIsLocalized);
     if (!format) {
       const positiveN = Math.abs(n);
       const decimals = positiveN - Math.floor(positiveN);
@@ -116,8 +117,88 @@ export class KupMath {
         format = '0,0';
       }
     }
-    const formatted = this.numeral(n).format(format);
-    return formatted;
+    return this.numeral(n).format(format);
+  }
+  /**
+   * Created the string for format a number
+   * @param {boolean} thousandPoint - show thousandPoint
+   * @param {number} decimals - number of decimals
+   */
+  createFormatPattern(thousandPoint, decimals) {
+    var format = '0';
+    if (thousandPoint) {
+      format += ',000';
+    }
+    if (decimals && decimals > 0) {
+      format += '.';
+      for (let i = 0; i < decimals; i++) {
+        format += '0';
+      }
+    }
+    return format;
+  }
+  /**
+   * Returns the decimal separator of current browser
+   * @returns current decimal separator, by locale
+   */
+  decimalSeparator() {
+    const numberWithGroupAndDecimalSeparator = 1000.1;
+    return Intl.NumberFormat(this.locale)
+      .formatToParts(numberWithGroupAndDecimalSeparator)
+      .find((part) => part.type === 'decimal').value;
+  }
+  /**
+   * Returns the group separator of current browser
+   * @returns current group separator, by locale
+   */
+  groupSeparator() {
+    const numberWithGroupAndDecimalSeparator = 1000.1;
+    return Intl.NumberFormat(this.locale)
+      .formatToParts(numberWithGroupAndDecimalSeparator)
+      .find((part) => part.type === 'group').value;
+  }
+  /**
+   * Checks if an input string matches options, for desired formatted decimal number (integer digits, decimal digits)
+   * @param value the input value to check
+   * @param options options for customize the check
+   * @returns an object from applying the regular expression for check
+   */
+  matchNumericValueWithOptions(value, options) {
+    // see https://github.com/24eme/jquery-input-number-format.git
+    let found = undefined;
+    let integerPartSuffix = '+';
+    if (options.integer && options.integer > 0) {
+      integerPartSuffix = '{0,' + options.integer + '}';
+    }
+    let regexp = '^[0-9]' + integerPartSuffix;
+    if (options.allowNegative) {
+      regexp = '^-{0,1}[0-9]' + integerPartSuffix;
+    }
+    if (options.decimal && options.decimal > 0) {
+      regexp +=
+        '([' +
+          this.decimalSeparator() +
+          '][0-9]{0,' +
+          options.decimal +
+          '})?';
+      let regexpObj = new RegExp(regexp + '$');
+      found = value.match(regexpObj);
+      if (!found) {
+        regexp =
+          '^[' +
+            this.decimalSeparator() +
+            '][0-9]{0,' +
+            options.decimal +
+            '}';
+        regexpObj = new RegExp(regexp + '$');
+        found = value.match(regexpObj);
+      }
+    }
+    else {
+      let regexpObj = new RegExp(regexp + '$');
+      found = value.match(regexpObj);
+    }
+    return found;
   }
   /**
    * Returns a number from a non-specified input type between string, number, or String.

package/dist/collection/utils/utils.js

@@ -15,12 +15,6 @@ export function identify(array) {
     }
   }
 }
-function getSeparator(locale, separatorType) {
-  const numberWithGroupAndDecimalSeparator = 1000.1;
-  return Intl.NumberFormat(locale)
-    .formatToParts(numberWithGroupAndDecimalSeparator)
-    .find((part) => part.type === separatorType).value;
-}
 export function getCurrentDateFormatFromBrowserLocale() {
   const formatObj = new Intl.DateTimeFormat(dom.ketchup.dates.getLocale()).formatToParts(new Date());
   let dateFormat = formatObj
@@ -155,7 +149,7 @@ export function unformattedStringToFormattedStringNumber(input, decimals, type)
  * @returns number as string, formatted by locale US, decimal separator . (like java decimal numbers), without group separator
  **/
 export function formattedStringToUnformattedStringNumber(input, type) {
-  return numberStringToNumberString(input, type, getDecimalSeparator(dom.ketchup.dates.getLocale()));
+  return numberStringToNumberString(input, type, dom.ketchup.math.decimalSeparator());
 }
 /**
  * @param input number as string, formatted by locale US, decimal separator . (like java decimal numbers), with group separator
@@ -192,9 +186,6 @@ function numberStringToNumberString(input, type, decFmt) {
   let unf = stringToNumber(input);
   return _numberToString(unf, -1, 'en-US', false);
 }
-export function getDecimalSeparator(locale) {
-  return getSeparator(locale, 'decimal');
-}
 function countDecimals(value) {
   if (Math.floor(value) === value)
     return 0;