@mgdis/mg-components 5.8.2 → 5.10.0

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

@@ -10,7 +10,6 @@ export class MgInputNumeric {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
      * @returns {void}
      */
     this.handleInput = () => {
@@ -23,7 +22,6 @@ export class MgInputNumeric {
     };
     /**
      * Handle focus event
-     *
      * @returns {void}
      */
     this.handleFocus = () => {
@@ -31,7 +29,6 @@ export class MgInputNumeric {
     };
     /**
      * Handle blur event
-     *
      * @returns {void}
      */
     this.handleBlur = () => {
@@ -41,7 +38,6 @@ export class MgInputNumeric {
     };
     /**
      * Check if input is valid
-     *
      * @returns {void}
      */
     this.checkValidity = () => {
@@ -52,7 +48,6 @@ export class MgInputNumeric {
     };
     /**
      * Set input error message
-     *
      * @returns {void}
      */
     this.setErrorMessage = () => {
@@ -70,27 +65,27 @@ export class MgInputNumeric {
     };
     /**
      * Get input error code
-     *
      * @returns {null | InputError} error code
      */
     this.getInputError = () => {
       let inputError = null;
-      if (this.input === undefined || this.input === null)
+      const hasNotEmptyValues = (toControl) => !toControl.some(value => [null, undefined].includes(value));
+      if (!hasNotEmptyValues([this.input]))
         return inputError;
       // required
       if (!this.input.checkValidity() && this.input.validity.valueMissing) {
         inputError = InputError.REQUIRED;
       }
       // Min & Max
-      else if (this.min !== undefined && this.numericValue < this.min && this.max === undefined) {
+      else if (hasNotEmptyValues([this.min, this.numericValue]) && this.numericValue < this.min && this.max === undefined) {
         // Only a min value is set
         inputError = InputError.MIN;
       }
-      else if (this.max !== undefined && this.numericValue > this.max && this.min === undefined) {
+      else if (hasNotEmptyValues([this.max, this.numericValue]) && this.numericValue > this.max && this.min === undefined) {
         // Only a max value is set
         inputError = InputError.MAX;
       }
-      else if ((this.min !== undefined && this.numericValue < this.min) || (this.max !== undefined && this.numericValue > this.max)) {
+      else if (hasNotEmptyValues([this.min, this.max, this.numericValue]) && (this.numericValue < this.min || this.numericValue > this.max)) {
         // both min and max values are set
         inputError = InputError.MINMAX;
       }
@@ -98,14 +93,12 @@ export class MgInputNumeric {
     };
     /**
      * Format value based on type
-     *
      * @param {number} value value to format
      * @returns {string} 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 = () => {
@@ -140,7 +133,8 @@ export class MgInputNumeric {
     this.hasFocus = false;
   }
   validateValue(newValue) {
-    if (newValue !== undefined && newValue !== null) {
+    // has input value is always render as string we get a stringified value or a '' for nullish value, so we test string type
+    if (typeof newValue === 'string') {
       // Split number and decimal
       const [integer, decimal = ''] = newValue.replace('-', '').split(/[\.,]/);
       // Regex
@@ -160,7 +154,7 @@ export class MgInputNumeric {
       if (this.input !== undefined)
         this.input.value = this.value;
       // emit numeric value
-      this.numericValue = this.value !== '' && this.value !== null ? parseFloat(this.value.replace(',', '.')) : null;
+      this.numericValue = !['', null].includes(this.value) ? parseFloat(this.value.replace(',', '.')) : null;
       this.valueChange.emit(this.numericValue);
       // Set readonlyValue
       this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
@@ -193,7 +187,6 @@ export class MgInputNumeric {
   }
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   async displayError() {
@@ -204,8 +197,7 @@ export class MgInputNumeric {
   /**
    * Displayed value in input
    * Change on focus/blur
-   *
-   * @returns {string} display value
+   * @returns {MgInputNumeric['value'] | MgInputNumeric['readonlyValue']} display value
    */
   displayValue() {
     return this.hasFocus ? this.value : this.readonlyValue;
@@ -215,7 +207,6 @@ export class MgInputNumeric {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
@@ -223,11 +214,12 @@ export class MgInputNumeric {
     const locales = initLocales(this.element);
     this.locale = locales.locale;
     this.messages = locales.messages;
-    // Validate
-    this.validateValue(this.value);
+    // Validate component config
     this.validateType(this.type);
     this.validateIntegerLength(this.integerLength);
     this.validateDecimalLength(this.decimalLength);
+    // validate value
+    this.validateValue(this.value);
     this.validateAppendSlot();
     // Check validity when component is ready
     // return a promise to process action only in the FIRST render().
@@ -238,7 +230,6 @@ export class MgInputNumeric {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

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

@@ -76,7 +76,6 @@ export class MgInputPassword {
   }
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   async displayError() {
@@ -89,7 +88,6 @@ export class MgInputPassword {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
@@ -104,7 +102,6 @@ export class MgInputPassword {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

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

@@ -7,7 +7,6 @@ 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
  */
@@ -23,7 +22,6 @@ export class MgInputRadio {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
      * @param {event} event input event
      * @returns {void}
      */
@@ -33,7 +31,6 @@ export class MgInputRadio {
     };
     /**
      * Handle blur event
-     *
      * @returns {void}
      */
     this.handleBlur = () => {
@@ -42,7 +39,6 @@ export class MgInputRadio {
     };
     /**
      * Check if input is valid
-     *
      * @returns {void}
      */
     this.checkValidity = () => {
@@ -53,7 +49,6 @@ export class MgInputRadio {
     };
     /**
      * Set input error message
-     *
      * @returns {void}
      */
     this.setErrorMessage = () => {
@@ -66,7 +61,6 @@ export class MgInputRadio {
     };
     /**
      * get invalid element
-     *
      * @returns {HTMLInputElement} element
      */
     this.getInvalidElement = () => this.inputs.find((input) => !input.disabled && !input.readOnly && !input.checkValidity());
@@ -121,7 +115,6 @@ export class MgInputRadio {
   }
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   async displayError() {
@@ -134,7 +127,6 @@ export class MgInputRadio {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
@@ -151,7 +143,6 @@ export class MgInputRadio {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

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

@@ -6,28 +6,24 @@ 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
  */
 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
  */
 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
  */
 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
@@ -60,7 +56,6 @@ export class MgInputSelect {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
      * @returns {void}
      */
     this.handleInput = () => {
@@ -70,14 +65,12 @@ 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
      */
     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}
      */
@@ -87,7 +80,6 @@ export class MgInputSelect {
     };
     /**
      * Update value from input.value
-     *
      * @returns {void}
      */
     this.updateValue = () => {
@@ -114,7 +106,6 @@ export class MgInputSelect {
     };
     /**
      * Input value is disabled
-     *
      * @returns {boolean} 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,7 +131,6 @@ export class MgInputSelect {
     };
     /**
      * Render option
-     *
      * @param {SelectOption} option to render
      * @returns {HTMLElement} render option
      */
@@ -221,7 +211,6 @@ export class MgInputSelect {
   }
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   async displayError() {
@@ -234,7 +223,6 @@ export class MgInputSelect {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
@@ -256,7 +244,6 @@ export class MgInputSelect {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

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

@@ -15,7 +15,6 @@ export class MgInputText {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
      * @returns {void}
      */
     this.handleInput = () => {
@@ -27,7 +26,6 @@ export class MgInputText {
     };
     /**
      * Handle focus event
-     *
      * @returns {void}
      */
     this.handleFocus = () => {
@@ -36,7 +34,6 @@ export class MgInputText {
     };
     /**
      * Handle blur event
-     *
      * @returns {void}
      */
     this.handleBlur = () => {
@@ -48,7 +45,6 @@ export class MgInputText {
     };
     /**
      * Check if input is valid
-     *
      * @returns {void}
      */
     this.checkValidity = () => {
@@ -60,7 +56,6 @@ export class MgInputText {
     };
     /**
      * Set input error message
-     *
      * @returns {void}
      */
     this.setErrorMessage = () => {
@@ -77,11 +72,10 @@ export class MgInputText {
     };
     /**
      * Validate pattern configuration
-     *
      * @returns {void}
      */
     this.validatePattern = () => {
-      if (this.pattern &&
+      if (this.pattern !== undefined &&
         typeof this.pattern === 'string' &&
         this.pattern !== '' &&
         (this.patternErrorMessage === undefined || typeof this.patternErrorMessage !== 'string' || this.patternErrorMessage === '')) {
@@ -90,7 +84,6 @@ export class MgInputText {
     };
     /**
      * Validate append slot
-     *
      * @returns {void}
      */
     this.validateAppendSlot = () => {
@@ -150,7 +143,6 @@ export class MgInputText {
   }
   /**
    * Public method to play input focus
-   *
    * @returns {Promise<void>}
    */
   async setFocus() {
@@ -158,7 +150,6 @@ export class MgInputText {
   }
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   async displayError() {
@@ -171,7 +162,6 @@ export class MgInputText {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
@@ -191,7 +181,6 @@ export class MgInputText {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

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

@@ -42,7 +42,6 @@ export class MgInputTextarea {
     /**
      * Get pattern validity
      * Pattern is not defined on textarea field: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea
-     *
      * @returns {boolean} is pattern valid
      */
     this.getPatternValidity = () => this.pattern === undefined || new RegExp(`^${this.pattern}$`, 'u').test(this.value);
@@ -75,7 +74,7 @@ export class MgInputTextarea {
      * Validate pattern configuration
      */
     this.validatePattern = () => {
-      if (this.pattern &&
+      if (this.pattern !== undefined &&
         typeof this.pattern === 'string' &&
         this.pattern !== '' &&
         (this.patternErrorMessage === undefined || typeof this.patternErrorMessage !== 'string' || this.patternErrorMessage === '')) {
@@ -130,7 +129,6 @@ export class MgInputTextarea {
   }
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   async displayError() {
@@ -143,7 +141,6 @@ export class MgInputTextarea {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
@@ -162,7 +159,6 @@ export class MgInputTextarea {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

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

@@ -5,7 +5,6 @@ import { MgInput } from '../MgInput';
 import { ClassList, allItemsAreString } from '../../../../utils/components.utils';
 /**
  * type Option validation function
- *
  * @param {ToggleValue} option radio option
  * @returns {boolean} toggle option type is valid
  */
@@ -23,7 +22,6 @@ export class MgInputToggle {
     this.classIcon = 'mg-input--toggle-icon';
     /**
      * Change checked value
-     *
      * @returns {void}
      */
     this.toggleChecked = () => {
@@ -31,7 +29,6 @@ export class MgInputToggle {
     };
     /**
      * Slots validation
-     *
      * @returns {void}
      */
     this.validateSlots = () => {
@@ -119,7 +116,6 @@ export class MgInputToggle {
   }
   /**
    * set checked state
-   *
    * @returns {void}
    */
   setChecked() {
@@ -162,7 +158,6 @@ export class MgInputToggle {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js

@@ -13,7 +13,6 @@ export class MgMenu {
      *************/
     /**
      * Close matching menu-item
-     *
      * @param {HTMLElement} item menu-item to close
      * @param {boolean} condition addionnal condition
      * @returns {void}
@@ -25,19 +24,16 @@ export class MgMenu {
     };
     /**
      * get mg-item-more element
-     *
      * @returns {HTMLMgItemMoreElement} mg-item-more element
      */
     this.getItemMore = () => this.element.querySelector('mg-item-more');
     /**
      * get mg-item-more >>> mg-menu-item element
-     *
      * @returns {HTMLMgMenuItemElement} mg-item-more >>> mg-menu-item element
      */
     this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.getItemMore()) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item'); };
     /**
      * Set item listend
-     *
      * @param {HTMLMgMenuItemElement} item mg-menu-item element
      * @param {MgMenu['focusedMenuItem']} index number
      * @returns {void}
@@ -55,7 +51,6 @@ export class MgMenu {
     };
     /**
      * Store menu-items on component init and add listeners
-     *
      * @returns {void}
      */
     this.initMenuItemsListeners = () => {
@@ -66,7 +61,6 @@ export class MgMenu {
     };
     /**
      * Handle item-loaded event on mg-item-more element
-     *
      * @returns {void}
      */
     this.handleItemLoaded = () => {
@@ -74,7 +68,6 @@ export class MgMenu {
     };
     /**
      * render mg-item-more
-     *
      * @returns {void}
      */
     this.renderMgItemMore = () => {
@@ -117,7 +110,6 @@ export class MgMenu {
    *************/
   /**
    * Validate props
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -128,7 +120,6 @@ export class MgMenu {
   }
   /**
    * Check if component slots configuration
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentDidLoad() {
@@ -159,7 +150,6 @@ export class MgMenu {
   }
   /**
    * Add listeners to items
-   *
    * @returns {void}
    */
   componentDidRender() {
@@ -167,7 +157,6 @@ export class MgMenu {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -232,7 +221,7 @@ export class MgMenu {
         "mutable": false,
         "complexType": {
           "original": "ItemMoreType",
-          "resolved": "{ size: \"regular\" | \"large\" | \"medium\"; icon: IconType; slotlabel: SlotLabelType; }",
+          "resolved": "{ size: \"regular\" | \"medium\" | \"large\"; icon: IconType; slotlabel: SlotLabelType; }",
           "references": {
             "ItemMoreType": {
               "location": "import",

package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.css

@@ -285,6 +285,7 @@
   display: flex;
   --mg-popover-padding-vertical: 0;
   --mg-popover-padding-horizontal: 0;
+  --mg-popover-max-width: unset;
 }
 
 :host([data-style-direction-vertical]) {