@mgdis/mg-components 5.9.1 → 5.10.1

package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js

@@ -10,8 +10,6 @@ export class MgInputNumeric {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
-     * @returns {void}
      */
     this.handleInput = () => {
       // Check validity
@@ -23,26 +21,22 @@ export class MgInputNumeric {
     };
     /**
      * Handle focus event
-     *
-     * @returns {void}
      */
     this.handleFocus = () => {
       this.hasFocus = true;
     };
     /**
      * Handle blur event
-     *
-     * @returns {void}
      */
     this.handleBlur = () => {
+      if (this.value === '-')
+        this.value = '';
       // Display Error
       this.displayError();
       this.hasFocus = false;
     };
     /**
      * Check if input is valid
-     *
-     * @returns {void}
      */
     this.checkValidity = () => {
       this.valid = this.readonly || this.disabled || this.getInputError() === null;
@@ -52,8 +46,6 @@ export class MgInputNumeric {
     };
     /**
      * Set input error message
-     *
-     * @returns {void}
      */
     this.setErrorMessage = () => {
       // Set error message
@@ -70,8 +62,7 @@ export class MgInputNumeric {
     };
     /**
      * Get input error code
-     *
-     * @returns {null | InputError} error code
+     * @returns error code
      */
     this.getInputError = () => {
       let inputError = null;
@@ -99,20 +90,17 @@ export class MgInputNumeric {
     };
     /**
      * Format value based on type
-     *
-     * @param {number} value value to format
-     * @returns {string} formated local value
+     * @param value - value to format
+     * @returns formated local value
      */
     this.formatValue = (value) => (this.type === 'currency' ? localeCurrency(value, this.locale, this.currency) : localeNumber(value, this.locale));
     /**
      * Validate append slot
-     *
-     * @returns {void}
      */
     this.validateAppendSlot = () => {
       const slotAppendInput = this.element.querySelector('[slot="append-input"]');
       if (slotAppendInput !== null) {
-        this.classList.add(slotAppendInput.nodeName === 'MG-BUTTON' ? 'mg-input--is-input-group-append' : 'mg-input--is-append-input-slot-content');
+        this.classCollection.add(slotAppendInput.nodeName === 'MG-BUTTON' ? 'mg-input--is-input-group-append' : 'mg-input--is-append-input-slot-content');
       }
     };
     this.value = undefined;
@@ -136,7 +124,7 @@ export class MgInputNumeric {
     this.decimalLength = 2;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classList = new ClassList(['mg-input--numeric']);
+    this.classCollection = new ClassList(['mg-input--numeric']);
     this.errorMessage = undefined;
     this.hasFocus = false;
   }
@@ -148,7 +136,7 @@ export class MgInputNumeric {
       // Regex
       const regex = this.type === 'integer' ? /^-?\d+$/ : /^-?\d+[.,]?\d*$/;
       // Filter input
-      if (newValue === '' || (newValue.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength))) {
+      if (['', '-'].includes(newValue) || (newValue.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength))) {
         this.storedValue = newValue;
       }
       else if (this.storedValue !== undefined) {
@@ -195,8 +183,6 @@ export class MgInputNumeric {
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -206,8 +192,7 @@ export class MgInputNumeric {
   /**
    * Displayed value in input
    * Change on focus/blur
-   *
-   * @returns {MgInputNumeric['value'] | MgInputNumeric['readonlyValue']} display value
+   * @returns display value
    */
   displayValue() {
     return this.hasFocus ? this.value : this.readonlyValue;
@@ -217,8 +202,7 @@ export class MgInputNumeric {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -241,11 +225,10 @@ export class MgInputNumeric {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "text", class: "mg-input__box", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => {
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "text", class: "mg-input__box", value: this.displayValue(), id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => {
         if (el !== null)
           this.input = el;
       } }), h("slot", { name: "append-input" })));
@@ -639,7 +622,7 @@ export class MgInputNumeric {
   }
   static get states() {
     return {
-      "classList": {},
+      "classCollection": {},
       "errorMessage": {},
       "hasFocus": {}
     };
@@ -692,10 +675,7 @@ export class MgInputNumeric {
         },
         "docs": {
           "text": "Public method to display errors",
-          "tags": [{
-              "name": "returns",
-              "text": undefined
-            }]
+          "tags": []
         }
       }
     };

package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js

@@ -58,7 +58,7 @@ export class MgInputPassword {
     this.helpText = undefined;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classList = new ClassList(['mg-input--password']);
+    this.classCollection = new ClassList(['mg-input--password']);
     this.errorMessage = undefined;
   }
   handleValue(newValue) {
@@ -76,8 +76,6 @@ export class MgInputPassword {
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -89,8 +87,7 @@ export class MgInputPassword {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -104,11 +101,10 @@ export class MgInputPassword {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.value !== undefined ? '•'.repeat(this.value.length) : undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "password", class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: this.value !== undefined ? '•'.repeat(this.value.length) : undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "password", class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
         if (el !== null)
           this.input = el;
       } })));
@@ -397,7 +393,7 @@ export class MgInputPassword {
   }
   static get states() {
     return {
-      "classList": {},
+      "classCollection": {},
       "errorMessage": {}
     };
   }
@@ -449,10 +445,7 @@ export class MgInputPassword {
         },
         "docs": {
           "text": "Public method to display errors",
-          "tags": [{
-              "name": "returns",
-              "text": undefined
-            }]
+          "tags": []
         }
       }
     };

package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js

@@ -7,9 +7,8 @@ import { ClassList, allItemsAreString } from '../../../../utils/components.utils
 import { initLocales } from '../../../../locales';
 /**
  * type Option validation function
- *
- * @param {RadioOption} option radio option
- * @returns {boolean} radio option type is valid
+ * @param option - radio option
+ * @returns radio option type is valid
  */
 const isOption = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
 export class MgInputRadio {
@@ -23,9 +22,7 @@ export class MgInputRadio {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
-     * @param {event} event input event
-     * @returns {void}
+     * @param event - input event
      */
     this.handleInput = (event) => {
       this.checkValidity();
@@ -33,8 +30,6 @@ export class MgInputRadio {
     };
     /**
      * Handle blur event
-     *
-     * @returns {void}
      */
     this.handleBlur = () => {
       this.checkValidity();
@@ -42,8 +37,6 @@ export class MgInputRadio {
     };
     /**
      * Check if input is valid
-     *
-     * @returns {void}
      */
     this.checkValidity = () => {
       this.valid = this.readonly || this.disabled || this.getInvalidElement() === undefined;
@@ -53,8 +46,6 @@ export class MgInputRadio {
     };
     /**
      * Set input error message
-     *
-     * @returns {void}
      */
     this.setErrorMessage = () => {
       const invalidElement = this.getInvalidElement();
@@ -66,8 +57,7 @@ export class MgInputRadio {
     };
     /**
      * get invalid element
-     *
-     * @returns {HTMLInputElement} element
+     * @returns element
      */
     this.getInvalidElement = () => this.inputs.find((input) => !input.disabled && !input.readOnly && !input.checkValidity());
     this.value = undefined;
@@ -85,7 +75,7 @@ export class MgInputRadio {
     this.helpText = undefined;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classList = new ClassList(['mg-input--radio']);
+    this.classCollection = new ClassList(['mg-input--radio']);
     this.errorMessage = undefined;
     this.options = undefined;
   }
@@ -121,8 +111,6 @@ export class MgInputRadio {
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -134,8 +122,7 @@ export class MgInputRadio {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -151,11 +138,10 @@ export class MgInputRadio {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, disabled: this.disabled, readonly: this.readonly, mgWidth: undefined, value: this.value, readonlyValue: this.value, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: el => {
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, disabled: this.disabled, readonly: this.readonly, mgWidth: undefined, value: this.value, readonlyValue: this.value, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: true }, h("ul", { class: { 'mg-input__input-group-container': true, 'mg-input__input-group-container--vertical': this.inputVerticalList }, role: "list" }, this.options.map((input, index) => (h("li", { key: input.title, class: { 'mg-input__input-group': true, 'mg-input__input-group--disabled': this.disabled || input.disabled } }, h("input", { type: "radio", id: this.identifier + '_' + index, name: this.identifier, value: index, checked: JSON.stringify(this.value) === JSON.stringify(this.options[index].value), disabled: this.disabled || input.disabled, required: this.required, onBlur: this.handleBlur, onInput: this.handleInput, ref: el => {
         if (el !== null)
           this.inputs[index] = el;
       } }), h("label", { htmlFor: this.identifier + '_' + index }, input.title)))))));
@@ -443,7 +429,7 @@ export class MgInputRadio {
   }
   static get states() {
     return {
-      "classList": {},
+      "classCollection": {},
       "errorMessage": {},
       "options": {}
     };
@@ -496,10 +482,7 @@ export class MgInputRadio {
         },
         "docs": {
           "text": "Public method to display errors",
-          "tags": [{
-              "name": "returns",
-              "text": undefined
-            }]
+          "tags": []
         }
       }
     };

package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js

@@ -6,35 +6,27 @@ import { ClassList, allItemsAreString } from '../../../../utils/components.utils
 import { initLocales } from '../../../../locales';
 /**
  * Check if item is a well configured option
- *
- * @param {unknown} option select option
- * @returns {boolean} select option type is valid
+ * @param option - select option
+ * @returns select option type is valid
  */
 const isOption = (option) => typeof option === 'object' && typeof option.title === 'string';
 /**
  * Check if items[] is SelectOption
- *
- * @param {unknown[]} items select option
- * @returns {boolean} select option array type is valid
+ * @param items - select option
+ * @returns select option array type is valid
  */
 const allItemsAreOptions = (items) => Array.isArray(items) && items.every(item => isOption(item));
 /**
  * Check if item is a well configured optgroup
- *
- * @param {unknown} optgroup select option
- * @returns {boolean} select optgroup type is valid
+ * @param optgroup - select option
+ * @returns select optgroup type is valid
  */
 const isOptGroup = (optgroup) => typeof optgroup === 'object' && typeof optgroup.group === 'string' && allItemsAreOptions(optgroup.options);
 /**
  * Group options
- *
- * @param {(SelectOption | OptGroup)[]} acc reduce accumulator
- * @param {SelectOption} item item to add
- * @param {string} item.group item group
- * @param {string} item.title item title
- * @param {unknown} item.value item value
- * @param {boolean} item.disabled is item disabled
- * @returns {(SelectOption | OptGroup)[]} grouped options
+ * @param acc - reduce accumulator
+ * @param item - item to add
+ * @returns grouped options
  */
 const groupOptions = (acc, { group, title, value, disabled }) => {
   if (group !== undefined) {
@@ -60,8 +52,6 @@ export class MgInputSelect {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
-     * @returns {void}
      */
     this.handleInput = () => {
       this.updateValue();
@@ -70,16 +60,13 @@ export class MgInputSelect {
     };
     /**
      * Method to compare item.title with input.value
-     *
-     * @param {SelectOption} item item to compare with
-     * @returns {boolean} truthy if input.value is an item
+     * @param item - item to compare with
+     * @returns truthy if input.value is an item
      */
     this.isInputValue = (item) => { var _a; return item.title === ((_a = this.input) === null || _a === void 0 ? void 0 : _a.value); };
     /**
      * value props setter
-     *
-     * @param {MgInputSelect['value']} newValue value to update with
-     * @returns {void}
+     * @param newValue - value to update with
      */
     this.setValue = (newValue) => {
       this.checkValidity();
@@ -87,8 +74,6 @@ export class MgInputSelect {
     };
     /**
      * Update value from input.value
-     *
-     * @returns {void}
      */
     this.updateValue = () => {
       if (this.input.value === '') {
@@ -114,8 +99,7 @@ export class MgInputSelect {
     };
     /**
      * Input value is disabled
-     *
-     * @returns {boolean} truthy if input value is disabled
+     * @returns truthy if input value is disabled
      */
     this.isDisabledValue = () => { var _a; return allItemsAreOptions(this.options) && ((_a = this.options.find(this.isInputValue)) === null || _a === void 0 ? void 0 : _a.disabled) === true; };
     /**
@@ -140,9 +124,8 @@ export class MgInputSelect {
     };
     /**
      * Render option
-     *
-     * @param {SelectOption} option to render
-     * @returns {HTMLElement} render option
+     * @param option - to render
+     * @returns render option
      */
     this.renderOption = (option) => (h("option", { key: option.title, value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title));
     this.value = undefined;
@@ -163,7 +146,7 @@ export class MgInputSelect {
     this.helpText = undefined;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classList = new ClassList(['mg-input--select']);
+    this.classCollection = new ClassList(['mg-input--select']);
     this.errorMessage = undefined;
     this.options = undefined;
     this.valueExist = undefined;
@@ -221,8 +204,6 @@ export class MgInputSelect {
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -234,8 +215,7 @@ export class MgInputSelect {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -256,11 +236,10 @@ export class MgInputSelect {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: undefined, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("select", { class: "mg-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: undefined, readonlyValue: this.readonlyValue, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("select", { class: "mg-input__box", id: this.identifier, name: this.name, title: this.placeholder, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: el => {
         if (el !== null)
           this.input = el;
       } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
@@ -605,7 +584,7 @@ export class MgInputSelect {
   }
   static get states() {
     return {
-      "classList": {},
+      "classCollection": {},
       "errorMessage": {},
       "options": {},
       "valueExist": {},
@@ -664,10 +643,7 @@ export class MgInputSelect {
         },
         "docs": {
           "text": "Public method to display errors",
-          "tags": [{
-              "name": "returns",
-              "text": undefined
-            }]
+          "tags": []
         }
       }
     };