@mgdis/mg-components 5.14.0 → 5.16.0

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js

@@ -2,6 +2,12 @@ import { h, Host } from '@stencil/core';
 import { createID, focusableElements, getWindows } from '../../../utils/components.utils';
 import { createPopper } from '@popperjs/core';
 import { Guard } from './mg-tooltip.conf';
+/**
+ * HTMLMgButtonElement type guard
+ * @param element - element to check
+ * @returns return true if type is HTMLMgButtonElement
+ */
+const isButton = (element) => typeof element === 'object' && ['MG-BUTTON', 'BUTTON'].includes(element.tagName);
 export class MgTooltip {
   constructor() {
     /**
@@ -9,7 +15,7 @@ export class MgTooltip {
      */
     this.show = () => {
       // Make the tooltip visible
-      this.tooltip.dataset.show = '';
+      this.mgTooltipContent.dataset.show = '';
       // Enable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
       // hide when click outside
@@ -26,7 +32,7 @@ export class MgTooltip {
      */
     this.hide = () => {
       // Hide the tooltip
-      this.tooltip.removeAttribute('data-show');
+      this.mgTooltipContent.removeAttribute('data-show');
       // Disable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
       // Remove event listener
@@ -113,8 +119,12 @@ export class MgTooltip {
      */
     this.initTooltip = (slotElement, interactiveElement) => {
       // Add tabindex to slotted element if we can't find any interactive element
-      if (interactiveElement === null || interactiveElement === undefined)
+      if (!this.disabled && !Boolean(interactiveElement)) {
+        this.hasCustomTabIndex = true;
         slotElement.tabIndex = 0;
+        // Add role on non-interactive element to work with "aria-describedby" for screen readers
+        slotElement.setAttribute('role', 'button');
+      }
       // Set aria-describedby
       const ariaDescribedby = slotElement.getAttribute('aria-describedby');
       if (ariaDescribedby === null) {
@@ -125,7 +135,7 @@ export class MgTooltip {
         slotElement.setAttribute('aria-describedby', `${[...new Set([...ariaDescribedby.split(' '), this.identifier])].join(' ')}`);
       }
       // Create popperjs tooltip
-      this.popper = createPopper(this.tooltipedElement, this.tooltip, {
+      this.popper = createPopper(this.tooltipedElement, this.mgTooltipContent, {
         placement: this.placement,
         strategy: 'fixed',
         modifiers: [
@@ -142,6 +152,12 @@ export class MgTooltip {
         this.guard = Guard.FOCUS;
         this.setDisplay(true);
       });
+      // as `click` event is the composition of `mousedown` and `mouseup` event,
+      // and `click` event trigger `focus` event after a success `mousedown` wich set the `guard` to `Guard.FOCUS`
+      // we reset the guard on `mouseup` event to unlock tooltip
+      this.tooltipedElement.addEventListener('mouseup', () => {
+        this.resetGuard();
+      });
       this.tooltipedElement.addEventListener('blur', () => {
         this.resetGuard();
         this.setDisplay(false);
@@ -151,7 +167,7 @@ export class MgTooltip {
       ['mouseenter', 'mouseleave'].forEach(eventType => {
         const isMouseenter = eventType === 'mouseenter';
         [
-          { element: this.tooltip, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIPED_ELEMENT) },
+          { element: this.mgTooltipContent, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIPED_ELEMENT) },
           { element: this.tooltipedElement, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIP_ELEMENT) },
         ].forEach(({ element, action }) => {
           element.addEventListener(eventType, () => {
@@ -170,6 +186,7 @@ export class MgTooltip {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
       throw new Error('<mg-tooltip> prop "message" is required.');
     }
+    this.mgTooltipContent.message = newValue;
   }
   handleDisplay(newValue) {
     if (newValue) {
@@ -179,6 +196,28 @@ export class MgTooltip {
       this.hide();
     }
   }
+  validateDisabled(newValue) {
+    if (this.hasCustomTabIndex) {
+      if (newValue)
+        this.tooltipedElement.removeAttribute('tabindex');
+      else if (this.tooltipedElement.getAttribute('tabindex') === null)
+        this.tooltipedElement.setAttribute('tabindex', '0');
+    }
+  }
+  /**
+   * Render tooltip content element
+   */
+  renderTooltip() {
+    const mgTooltipContent = document.createElement('mg-tooltip-content');
+    mgTooltipContent.setAttribute('slot', 'content');
+    mgTooltipContent.setAttribute('id', this.identifier);
+    const arrow = document.createElement('div');
+    arrow.setAttribute('slot', 'arrow');
+    arrow.dataset.popperArrow = '';
+    mgTooltipContent.appendChild(arrow);
+    // append tooltip element to component
+    this.element.appendChild(mgTooltipContent);
+  }
   /*************
    * Lifecycle *
    *************/
@@ -188,6 +227,12 @@ export class MgTooltip {
   componentWillLoad() {
     // Get windows to attach events
     this.windows = getWindows(window);
+    // Get tooltip element
+    this.renderTooltip();
+    this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);
+    //validate properties
+    this.validateDisabled(this.disabled);
+    this.validateMessage(this.message);
   }
   /**
    * Get slotted element
@@ -196,17 +241,15 @@ export class MgTooltip {
    */
   componentDidLoad() {
     var _a;
-    // Get tooltip element
-    this.tooltip = this.element.shadowRoot.querySelector(`#${this.identifier}`);
-    // get slotted element
-    const slotElement = this.element.firstElementChild;
+    // get slotted element wich is not the tooltip
+    const slotElement = this.element.querySelector(`*:not(#${this.identifier})`);
     // Get interactive element
     const interactiveElement = slotElement.matches(focusableElements) ? slotElement : (_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(focusableElements);
     // define selected element to become tooltip selector
     this.tooltipedElement = interactiveElement || slotElement;
     // Check if slotted element is a disabled mg-button
     // In this case we wrap the mg-button into a div to enable the tooltip
-    if (['MG-BUTTON', 'BUTTON'].includes(slotElement.tagName)) {
+    if (isButton(slotElement)) {
       new MutationObserver(mutationList => {
         if (mutationList.some(mutation => ['aria-disabled', 'disabled'].includes(mutation.attributeName))) {
           this.setMgButtonWrapper(slotElement);
@@ -221,7 +264,6 @@ export class MgTooltip {
     // Init Tooltip
     this.initTooltip(slotElement, interactiveElement);
     this.handleDisplay(this.display);
-    this.validateMessage(this.message);
   }
   /**
    * update popper position after props change on component did update hook to benefit from render ended
@@ -234,7 +276,7 @@ export class MgTooltip {
    * @returns HTML Element
    */
   render() {
-    return (h(Host, null, h("slot", null), h("div", { role: "tooltip", id: this.identifier, class: "mg-tooltip" }, h("span", { innerHTML: this.message }), h("div", { class: "mg-tooltip__arrow", "data-popper-arrow": true }))));
+    return (h(Host, null, h("slot", null), h("slot", { name: "content" })));
   }
   static get is() { return "mg-tooltip"; }
   static get encapsulation() { return "shadow"; }
@@ -354,6 +396,9 @@ export class MgTooltip {
       }, {
         "propName": "display",
         "methodName": "handleDisplay"
+      }, {
+        "propName": "disabled",
+        "methodName": "validateDisabled"
       }];
   }
 }

package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.css

@@ -254,13 +254,13 @@ fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container {
   --mg-popover-min-width: 7rem;
   --mg-card-padding: calc(0.4rem * 2);
 }
-.mg-input.mg-input--checkbox-multi mg-popover [slot=content] {
+.mg-input.mg-input--checkbox-multi mg-popover-content [slot=content] {
   display: flex;
   flex-wrap: wrap;
   gap: calc(0.4rem * 2);
   flex-direction: column;
 }
-.mg-input.mg-input--checkbox-multi mg-popover [slot=content] .mg-input__input-group {
+.mg-input.mg-input--checkbox-multi mg-popover-content [slot=content] .mg-input__input-group {
   margin-left: calc(0.4rem * 2);
 }
 .mg-input.mg-input--checkbox-multi mg-input-text {

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

@@ -335,7 +335,7 @@ export class MgInputCheckbox {
   renderCheckboxMulti() {
     const selectedValuesNb = this.checkboxItems.filter(({ value }) => value).length;
     const checkboxes = this.getDisplayItems();
-    return (h("div", { class: { 'mg-input__input-container': true, 'mg-input__input-checkbox-multi': true, 'mg-input__input-checkbox-multi--with-values': this.displaySelectedValues } }, this.renderCheckboxMultiDisplaySelectedValues(selectedValuesNb), h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), "onDisplay-change": this.handleMgPopoverDisplayChange, ref: el => {
+    return (h("div", { class: { 'mg-input__input-container': true, 'mg-input__input-checkbox-multi': true, 'mg-input__input-checkbox-multi--with-values': this.displaySelectedValues } }, this.renderCheckboxMultiDisplaySelectedValues(selectedValuesNb), h("mg-popover", { arrowHide: true, identifier: this.getMgPopoverIdentifier(), "onDisplay-change": this.handleMgPopoverDisplayChange, ref: (el) => {
         if (Boolean(el))
           this.mgPopover = el;
       } }, h("mg-button", { variant: "secondary" }, h("mg-icon", { icon: "list" }), this.renderButtonText(selectedValuesNb)), h("div", { slot: "content" }, this.displaySearchInput && [

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

@@ -163,7 +163,7 @@ export class MgInputDate {
    * @returns HTML Element
    */
   render() {
-    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: undefined, disabled: this.disabled, value: this.value, readonlyValue: localeDate(this.value, this.locale), tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "date", class: "mg-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, 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: undefined, disabled: this.disabled, value: this.value, readonlyValue: localeDate(this.value, this.locale), tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("input", { type: "date", class: "mg-input__box", min: this.min, max: this.max, value: this.value, id: this.identifier, name: this.name, disabled: this.disabled, required: this.required, onInput: this.handleInput, onBlur: this.handleBlur, ref: (el) => {
         if (el !== null)
           this.input = el;
       } })));

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

@@ -134,28 +134,48 @@ export class MgInputNumeric {
       // Split number and decimal
       const [integer, decimal = ''] = newValue.replace('-', '').split(/[\.,]/);
       // Regex
-      const regex = this.type === 'integer' ? /^-?\d+$/ : /^-?\d+[.,]?\d*$/;
+      const regex = this.type === 'integer' ? /^-?\d+$/ : /^-?\d+(?:[.,]\d*)?$/;
       // Filter input
-      if (['', '-'].includes(newValue) || (newValue.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength))) {
+      if (this.isValidValue(newValue, regex, integer, decimal)) {
         this.storedValue = newValue;
       }
-      else if (this.storedValue !== undefined) {
-        newValue = this.storedValue;
-      }
       else {
-        newValue = null;
+        newValue = this.handleInvalidValue();
       }
       // Set value and input value
-      this.value = newValue;
-      if (this.input !== undefined)
-        this.input.value = this.value;
-      // emit numeric value
-      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) : '';
+      this.updateValues(newValue);
     }
   }
+  /**
+   * Checks if the given value is valid according to the defined rules.
+   * @param value - The input value to validate.
+   * @param regex - The regular expression for validation.
+   * @param integer - The integer part of the value.
+   * @param decimal - The decimal part of the value.
+   * @returns Returns true if the value is valid, otherwise false.
+   */
+  isValidValue(value, regex, integer, decimal) {
+    return ['', '-'].includes(value) || (value.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength));
+  }
+  /**
+   * Handles invalid input values and returns a corrected value.
+   * @returns The corrected value.
+   */
+  handleInvalidValue() {
+    return this.storedValue !== undefined ? this.storedValue : null;
+  }
+  /**
+   * Updates the component values based on the validated input value.
+   * @param newValue - The validated input value.
+   */
+  updateValues(newValue) {
+    this.value = newValue;
+    if (this.input !== undefined)
+      this.input.value = this.value;
+    this.numericValue = !['', null].includes(this.value) ? parseFloat(this.value.replace(',', '.')) : null;
+    this.valueChange.emit(this.numericValue);
+    this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
+  }
   handleValidityChange(newValue, _oldValue, prop) {
     if (this.input !== undefined) {
       this.input[prop] = newValue;
@@ -228,7 +248,7 @@ export class MgInputNumeric {
    * @returns HTML Element
    */
   render() {
-    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 => {
+    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" })));

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

@@ -104,7 +104,7 @@ export class MgInputPassword {
    * @returns HTML Element
    */
   render() {
-    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 => {
+    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;
       } })));

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

@@ -141,7 +141,7 @@ export class MgInputRadio {
    * @returns HTML Element
    */
   render() {
-    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 => {
+    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)))))));

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

@@ -239,7 +239,7 @@ export class MgInputSelect {
    * @returns HTML Element
    */
   render() {
-    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 => {
+    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

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

@@ -179,7 +179,7 @@ export class MgInputText {
         '--mg-character-left-message-length': (this.displayCharacterLeft
           ? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1
           : 0).toString(),
-      } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type, class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => {
+      } }, this.icon !== undefined && h("mg-icon", { icon: this.icon }), h("input", { type: this.type, class: "mg-input__box", value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, maxlength: this.maxlength, disabled: this.disabled, required: this.required, pattern: this.pattern, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
         if (el !== null)
           this.input = el;
       } }), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength }))), h("slot", { name: "append-input" })));

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

@@ -166,7 +166,7 @@ export class MgInputTextarea {
         'mg-input__box--resizable': this.resizable === 'both',
         'mg-input__box--resizable-horizontal': this.resizable === 'horizontal',
         'mg-input__box--resizable-vertical': this.resizable === 'vertical',
-      }, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: el => {
+      }, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
         if (el !== null)
           this.input = el;
       } }), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength })))));

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

@@ -264,7 +264,7 @@ export class MgMenuItem {
    */
   renderInteractiveElement() {
     const TagName = this.href !== undefined ? 'a' : 'button';
-    return (h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : 0, disabled: this.status === Status.DISABLED, hidden: this.status === Status.HIDDEN, "aria-expanded": this.hasChildren && this.expanded.toString(), "aria-current": this.status === Status.ACTIVE && 'page', onClick: this.handleElementCLick }, h("slot", { name: "image" }), h("div", { class: `${this.navigationButton}-center` }, h("div", { class: `${this.navigationButton}-text-content` }, h("slot", { name: "label" }), !this.displayNotificationBadge && h("slot", { name: "information" }), this.displayNotificationBadge && (h("span", { class: "mg-menu-item__navigation-button-text-content-notification" }, h("mg-badge", { label: this.badgeLabel, value: "!", variant: "text-color", slot: "information" })))), this.size !== 'regular' && h("slot", { name: "metadata" })), this.hasChildren && this.href === undefined && (h("span", { class: {
+    return (h(TagName, { href: this.href, class: this.navigationButtonClassList.join(), tabindex: [Status.DISABLED, Status.HIDDEN].includes(this.status) ? -1 : undefined, disabled: this.status === Status.DISABLED, hidden: this.status === Status.HIDDEN, "aria-expanded": this.hasChildren && this.expanded.toString(), "aria-current": this.status === Status.ACTIVE && 'page', onClick: this.handleElementCLick }, h("slot", { name: "image" }), h("div", { class: `${this.navigationButton}-center` }, h("div", { class: `${this.navigationButton}-text-content` }, h("slot", { name: "label" }), !this.displayNotificationBadge && h("slot", { name: "information" }), this.displayNotificationBadge && (h("span", { class: "mg-menu-item__navigation-button-text-content-notification" }, h("mg-badge", { label: this.badgeLabel, value: "!", variant: "text-color", slot: "information" })))), this.size !== 'regular' && h("slot", { name: "metadata" })), this.hasChildren && this.href === undefined && (h("span", { class: {
         [`${this.navigationButton}-chevron`]: true,
         [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
         'mg-a11y-animation': true,
@@ -279,7 +279,7 @@ export class MgMenuItem {
       [`${this.name}__collapse-container`]: true,
       [`${this.name}__collapse-container--first-level`]: (this.isInMainMenu || this.isItemMore) && this.isDirection(Direction.HORIZONTAL),
     });
-    return (h(Host, { role: "listitem" }, this.displayPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
+    return (h(Host, { role: this.isItemMore ? 'presentation' : 'listitem' }, this.displayPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.getPopoverIdentifier() }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
       this.renderInteractiveElement(),
       h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
     ])));

package/dist/collection/components/molecules/mg-action-more/mg-action-more.js

@@ -38,7 +38,7 @@ export class MgActionMore {
     this.name = 'mg-action-more';
     this.mgPopoverIdentifier = createID(this.name);
     /************
-     * Merthods *
+     * Methods *
      ***********/
     /**
      * Toogle expanded props
@@ -46,6 +46,13 @@ export class MgActionMore {
     this.toggleExpanded = () => {
       this.expanded = !this.expanded;
     };
+    /**
+     * Handle popover display change value
+     * @param event - display change updated value
+     */
+    this.handleDisplayChange = (event) => {
+      this.expanded = event.detail;
+    };
     /**
      * Button click handler
      */
@@ -114,7 +121,7 @@ export class MgActionMore {
           'mg-a11y-animation': true,
         } }, h("mg-icon", { icon: "chevron-down", size: "small" })));
     }
-    return (h(Host, { "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { class: "mg-action-more" }, h("mg-popover", { identifier: this.mgPopoverIdentifier, display: this.expanded }, h("mg-button", { variant: this.button.variant, isIcon: this.button.isIcon, type: "button", label: buttonLabel, onClick: this.handleButton }, h("mg-icon", Object.assign({}, this.icon)), !this.button.isIcon && buttonContent), h("div", { slot: "content" }, h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
+    return (h(Host, { "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { class: "mg-action-more" }, h("mg-popover", { identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { variant: this.button.variant, isIcon: this.button.isIcon, type: "button", label: buttonLabel, onClick: this.handleButton }, h("mg-icon", Object.assign({}, this.icon)), !this.button.isIcon && buttonContent), h("div", { slot: "content" }, h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
       var _a;
       return (
       // eslint-disable-next-line react/jsx-no-bind

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

@@ -35,7 +35,7 @@ export class MgDetails {
    * @returns HTML Element
    */
   render() {
-    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: "chevron-up", size: "small", class: { 'mg-details__toggle-icon': true, 'mg-details__toggle-icon--reverse': !this.expanded } }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
+    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: "chevron-up", size: "small", class: { 'mg-details__toggle-icon': true, 'mg-details__toggle-icon--reverse': !this.expanded } }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
   }
   static get is() { return "mg-details"; }
   static get encapsulation() { return "shadow"; }

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

@@ -14,21 +14,34 @@ export class MgForm {
       this.classCollection.delete(this.classAllRequired);
       // If the form is disabled or readonly none of them are required
       // Check if all fields are not editable (readonly or disabled)
-      if (!this.disabled && !this.readonly && !this.mgInputs.every(input => input.disabled || input.readonly)) {
-        // Get required fields
-        const requiredInputs = this.mgInputs.filter(input => input.required && !input.disabled && !input.readonly);
-        // All fields are required
+      const isEditable = input => !(input.disabled || input.readonly);
+      const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';
+      if (!this.disabled && !this.readonly && this.mgInputs.some(input => isEditable(input) && !isMgInputToggle(input))) {
+        // Get editable inputs
+        const editableInputs = this.mgInputs.filter(isEditable);
+        // Get required inputs
         // mg-input-toggle can not be required
-        if (requiredInputs.length > 0 && requiredInputs.length === this.mgInputs.filter(input => input.nodeName !== 'MG-INPUT-TOGGLE').length) {
-          this.requiredMessage = requiredInputs.length === 1 ? this.messages.form.allRequiredSingle : this.messages.form.allRequired;
+        const requiredInputs = editableInputs.filter(input => !isMgInputToggle(input) && input.required);
+        // All inputs are required
+        if ([requiredInputs.length, editableInputs.length].every(length => length === 1) ||
+          (requiredInputs.length > 1 && requiredInputs.length === editableInputs.filter(input => !isMgInputToggle(input)).length)) {
+          this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');
           this.classCollection.add(this.classAllRequired);
         }
         // Some fields are required
         else if (requiredInputs.length > 0) {
-          this.requiredMessage = requiredInputs.length === 1 ? this.messages.form.requiredSingle : this.messages.form.required;
+          this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');
         }
       }
     };
+    /**
+     * Returns a required message based on the count of required inputs.
+     * @param requiredInputs - An array of required input elements.
+     * @param keySingle - The key for the singular message format.
+     * @param keyPlural - The key for the plural message format.
+     * @returns The appropriate required message based on the count of required inputs.
+     */
+    this.getRequiredMessageBasedOnCount = (requiredInputs, keySingle, keyPlural) => this.messages.form[requiredInputs.length === 1 ? keySingle : keyPlural];
     /**
      * Check if form is valid
      */
@@ -140,7 +153,7 @@ export class MgForm {
    * @returns HTML Element
    */
   render() {
-    return (h("form", { class: this.classCollection.join(), id: this.identifier, name: this.name, ref: el => (this.form = el), onSubmit: this.handleFormSubmit }, this.requiredMessage && h("p", { innerHTML: this.requiredMessage }), h("slot", null), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
+    return (h("form", { class: this.classCollection.join(), id: this.identifier, name: this.name, ref: (el) => (this.form = el), onSubmit: this.handleFormSubmit }, this.requiredMessage && h("p", { innerHTML: this.requiredMessage }), h("slot", null), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
   }
   static get is() { return "mg-form"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/mg-item-more/mg-item-more.js

@@ -26,7 +26,9 @@ export class MgItemMore {
         // manage click on proxy to mirror it on initial element
         proxy.addEventListener('click', () => {
           // be carefull to use element.click() method instead of dispatchEvent to ensure bubbles outside shadowDom
-          allMenuItem[index].shadowRoot.querySelector('a, button').click();
+          const navElement = allMenuItem[index].shadowRoot.querySelector('a, button');
+          if (navElement instanceof HTMLButtonElement || navElement instanceof HTMLAnchorElement)
+            navElement.click();
         });
         // add id suffix to prevent duplicate key. default html id is: '';
         if (proxy.id.trim() !== '')
@@ -90,7 +92,7 @@ export class MgItemMore {
    * @returns HTML Element
    */
   render() {
-    return (h(Host, { role: "menuitem", "aria-haspopup": "true" }, h("mg-menu-item", { "data-overflow-more": true, "data-size": this.parentMenu.size }, h("mg-icon", { icon: this.icon.icon, slot: "image" }), h("span", { class: { 'sr-only': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.moreLabel, size: this.size }))));
+    return (h(Host, { role: "listitem" }, h("mg-menu-item", { "data-overflow-more": true, "data-size": this.parentMenu.size }, h("mg-icon", { icon: this.icon.icon, slot: "image" }), h("span", { class: { 'sr-only': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.moreLabel, size: this.size }))));
   }
   static get is() { return "mg-item-more"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/mg-modal/mg-modal.conf.js

@@ -0,0 +1,4 @@
+/**
+ * List of all possibles dialog roles
+ */
+export const dialogRoles = ['dialog', 'alertdialog'];

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

@@ -1,6 +1,7 @@
 import { h } from '@stencil/core';
 import { createID, ClassList, focusableElements } from '../../../utils/components.utils';
 import { initLocales } from '../../../locales';
+import { dialogRoles } from './mg-modal.conf';
 export class MgModal {
   constructor() {
     /************
@@ -69,13 +70,18 @@ export class MgModal {
       this.hide = true;
     };
     this.identifier = createID('mg-modal');
+    this.dialogRole = dialogRoles[0];
     this.modalTitle = undefined;
     this.closeButton = false;
-    this.hide = false;
+    this.hide = undefined;
     this.hasActions = false;
     this.hasContent = false;
     this.classCollection = new ClassList(['mg-modal']);
   }
+  validateDialogRole(newValue) {
+    if (!dialogRoles.includes(newValue))
+      throw new Error(`<mg-modal> prop "dialogRole" must be one of: ${dialogRoles.join(', ')}.`);
+  }
   validateModalTitle(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
       throw new Error('<mg-modal> prop "modalTitle" is required.');
@@ -92,7 +98,7 @@ export class MgModal {
       if (this.modalFocusableElements.length > 0)
         this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);
     }
-    else {
+    else if (newValue === false) {
       this.componentShow.emit();
       this.classCollection.delete(this.classHide);
       document.body.style.overflow = 'hidden';
@@ -126,6 +132,7 @@ export class MgModal {
     this.titleId = `${this.identifier}-title`;
     this.validateModalTitle(this.modalTitle);
     this.validateHide(this.hide);
+    this.validateDialogRole(this.dialogRole);
   }
   /**
    * Add observer on component to set focus when displayed
@@ -144,7 +151,7 @@ export class MgModal {
    * @returns HTML Element
    */
   render() {
-    return (h("div", { role: "alertdialog", id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", null, h("div", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: el => {
+    return (h("div", { role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", null, h("div", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: `${this.identifier}-close-button`, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose, ref: (el) => {
         if (el !== null) {
           // store closeButton Element
           this.closeButtonElement = el;
@@ -185,6 +192,29 @@ export class MgModal {
         "reflect": false,
         "defaultValue": "createID('mg-modal')"
       },
+      "dialogRole": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DialogRoleType",
+          "resolved": "\"alertdialog\" | \"dialog\"",
+          "references": {
+            "DialogRoleType": {
+              "location": "import",
+              "path": "./mg-modal.conf"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Modal dialog role."
+        },
+        "attribute": "dialog-role",
+        "reflect": false,
+        "defaultValue": "dialogRoles[0]"
+      },
       "modalTitle": {
         "type": "string",
         "mutable": false,
@@ -235,8 +265,7 @@ export class MgModal {
           "text": "Define if modal is hidden"
         },
         "attribute": "hide",
-        "reflect": false,
-        "defaultValue": "false"
+        "reflect": false
       }
     };
   }
@@ -283,6 +312,9 @@ export class MgModal {
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
+        "propName": "dialogRole",
+        "methodName": "validateDialogRole"
+      }, {
         "propName": "modalTitle",
         "methodName": "validateModalTitle"
       }, {

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

@@ -70,7 +70,7 @@ export class MgPanel {
      * Render input button
      * @returns edit title input
      */
-    this.renderEditInput = () => (h("mg-input-text", { key: "edition-input", label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, h("mg-icon", { icon: "check" }))));
+    this.renderEditInput = () => (h("mg-input-text", { key: "edition-input", label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: (el) => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, h("mg-icon", { icon: "check" }))));
     /**
      * Render title
      * @returns title element