@mgdis/mg-components 5.6.0 → 5.7.0

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

@@ -73,6 +73,7 @@
 .mg-input__input {
   display: flex;
   /* Manage space between input and first message */
+  /* Set custom opacity on disabled input */
 }
 .mg-input__input mg-tooltip {
   margin-top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
@@ -83,6 +84,9 @@
 .mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
   margin-top: 0.5rem;
 }
+.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle {
+  opacity: var(--mg-disabled-opacity);
+}
 
 .mg-input__error {
   display: inline-block;
@@ -145,9 +149,6 @@ fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container {
   display: flex;
   align-items: top;
 }
-.mg-input__input-group.mg-input__input-group--disabled label {
-  opacity: 0.3;
-}
 
 /**
  * A11Y

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

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-redundant-roles */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { h } from '@stencil/core';
@@ -154,7 +155,7 @@ export class MgInputRadio {
    * @returns {HTMLElement} 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 } }, this.options.map((input, index) => (h("li", { 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, 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 => {
         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.css

@@ -73,6 +73,7 @@
 .mg-input__input {
   display: flex;
   /* Manage space between input and first message */
+  /* Set custom opacity on disabled input */
 }
 .mg-input__input mg-tooltip {
   margin-top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
@@ -83,6 +84,9 @@
 .mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
   margin-top: 0.5rem;
 }
+.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle {
+  opacity: var(--mg-disabled-opacity);
+}
 
 .mg-input__error {
   display: inline-block;

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

@@ -198,7 +198,7 @@ export class MgInputSelect {
         if (el !== null)
           this.input = el;
       } }, (!this.placeholderHide || !this.valueExist) && ( // In case passed value does not match any option we display the placeholder
-    h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => option.group !== undefined ? (h("optgroup", { label: option.group }, option.options.map(optgroup => (h("option", { value: optgroup.title, selected: JSON.stringify(this.value) === JSON.stringify(optgroup.value), disabled: optgroup.disabled }, optgroup.title))))) : (h("option", { value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title))))));
+    h("option", { value: "", disabled: this.placeholderDisabled && this.valueExist }, this.placeholder)), this.options.map(option => option.group !== undefined ? (h("optgroup", { label: option.group }, option.options.map(optgroup => (h("option", { key: optgroup.title, value: optgroup.title, selected: JSON.stringify(this.value) === JSON.stringify(optgroup.value), disabled: optgroup.disabled }, optgroup.title))))) : (h("option", { value: option.title, selected: JSON.stringify(this.value) === JSON.stringify(option.value), disabled: option.disabled }, option.title))))));
   }
   static get is() { return "mg-input-select"; }
   static get encapsulation() { return "shadow"; }

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

@@ -73,6 +73,7 @@
 .mg-input__input {
   display: flex;
   /* Manage space between input and first message */
+  /* Set custom opacity on disabled input */
 }
 .mg-input__input mg-tooltip {
   margin-top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
@@ -83,6 +84,9 @@
 .mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
   margin-top: 0.5rem;
 }
+.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle {
+  opacity: var(--mg-disabled-opacity);
+}
 
 .mg-input__error {
   display: inline-block;

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

@@ -73,6 +73,7 @@
 .mg-input__input {
   display: flex;
   /* Manage space between input and first message */
+  /* Set custom opacity on disabled input */
 }
 .mg-input__input mg-tooltip {
   margin-top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
@@ -83,6 +84,9 @@
 .mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
   margin-top: 0.5rem;
 }
+.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle {
+  opacity: var(--mg-disabled-opacity);
+}
 
 .mg-input__error {
   display: inline-block;

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

@@ -41,7 +41,7 @@ export class MgInputTextarea {
     };
     /**
      * Get pattern validity
-     * Pattern is not defined on textarea field : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea
+     * Pattern is not defined on textarea field: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea
      *
      * @returns {boolean} is pattern valid
      */

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

@@ -73,6 +73,7 @@
 .mg-input__input {
   display: flex;
   /* Manage space between input and first message */
+  /* Set custom opacity on disabled input */
 }
 .mg-input__input mg-tooltip {
   margin-top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
@@ -83,6 +84,9 @@
 .mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
   margin-top: 0.5rem;
 }
+.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle {
+  opacity: var(--mg-disabled-opacity);
+}
 
 .mg-input__error {
   display: inline-block;
@@ -226,8 +230,4 @@
 }
 .mg-input.mg-input--toggle-readonly.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type {
   display: flex;
-}
-
-.mg-input.mg-input--toggle-disabled .mg-input__button-toggle {
-  opacity: 0.3;
 }

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

@@ -64,7 +64,6 @@ export class MgMenu {
         // manage status change miror in proxy
         allMenuItem[index].addEventListener('status-change', (event) => {
           proxy.setAttribute('status', event.detail);
-          this.overflowBehavior.updateActiveStatus();
         });
       });
       this.element.appendChild(moreElement);
@@ -93,7 +92,7 @@ export class MgMenu {
   }
   validateDirection(newValue) {
     if (![Direction.VERTICAL, Direction.HORIZONTAL].includes(newValue)) {
-      throw new Error(`<${this.name}> prop "direction" must be one of : ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);
+      throw new Error(`<${this.name}> prop "direction" must be one of: ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);
     }
   }
   validateMoreItem(newValue) {
@@ -106,7 +105,7 @@ export class MgMenu {
   }
   validateSize(newValue) {
     if (!sizes.includes(newValue)) {
-      throw new Error(`<${this.name}> prop "size" must be one of : ${sizes.join(', ')}.`);
+      throw new Error(`<${this.name}> prop "size" must be one of: ${sizes.join(', ')}.`);
     }
   }
   /*************

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

@@ -98,6 +98,7 @@
   background-color: unset;
   border: none;
   font-family: var(--font-family);
+  font-weight: 400;
   color: hsl(var(--mg-menu-item-color-hsl, var(--color-dark)));
   line-height: var(--line-height);
   text-decoration: none;
@@ -107,7 +108,7 @@
 }
 .mg-menu-item__navigation-button:disabled, .mg-menu-item__navigation-button--disabled {
   cursor: default;
-  opacity: 0.3;
+  opacity: var(--mg-disabled-opacity);
 }
 .mg-menu-item__navigation-button:focus-visible {
   z-index: 10;

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

@@ -25,11 +25,11 @@ export class MgMenuItem {
     /**
      * Does an Element have given Status
      *
-     * @param {Element} element to parse
+     * @param {HTMLMgMenuItemElement} mgMenuItemElement to parse
      * @param {MgMenuItem['status']} status to check
      * @returns {boolean} true if element with status is found
      */
-    this.hasStatus = (element, status) => element.querySelector(`${this.name}[status="${status}"]`) !== null;
+    this.hasStatus = (mgMenuItemElement, status) => mgMenuItemElement.status === status;
     /**
      * Is component contextual direction match the given direction
      *
@@ -76,6 +76,17 @@ export class MgMenuItem {
         childMenu !== null &&
           Array.from(childMenu.children).some((subItem) => subItem.querySelector('mg-badge') !== null && subItem.getAttribute('hidden') === null);
     };
+    /**
+     * Method to control if one of component children have active status
+     *
+     * @returns {boolean} truthy if component has active child
+     */
+    this.hasActiveChild = () => {
+      var _a;
+      return Array.from(((_a = this.element.querySelector('mg-menu')) === null || _a === void 0 ? void 0 : _a.children) || [])
+        .filter(element => element.nodeName === 'MG-MENU-ITEM')
+        .some((element) => this.hasStatus(element, Status.ACTIVE) && element.getAttribute('hidden') === null);
+    };
     /**
      * Render slot
      *
@@ -111,7 +122,7 @@ export class MgMenuItem {
           item.expanded = false;
         });
       }
-      else if (this.hasStatus(this.element, Status.ACTIVE)) {
+      else if (this.element.querySelector(`${this.name}[status="${Status.ACTIVE}"]`) !== null) {
         // - when expanded and contain an active item parents are expended too
         subItems.forEach(item => {
           if (this.hasStatus(item, Status.ACTIVE)) {
@@ -178,10 +189,10 @@ export class MgMenuItem {
       this.isInMainMenu = this.element.parentElement.closest('mg-menu-item') === null;
       // when main menu item contain an active item it will get the active style
       // AND if item is in vertical menu it will be expanded
-      const hasActiveChild = Array.from(this.element.children).some(element => this.hasStatus(element, Status.ACTIVE) && element.getAttribute('hidden') === null);
-      if (this.isInMainMenu && hasActiveChild) {
+      if (this.hasActiveChild()) {
         this.status = Status.ACTIVE;
-        this.expanded = this.isDirection(Direction.VERTICAL);
+        if (this.isInMainMenu)
+          this.expanded = this.isDirection(Direction.VERTICAL);
       }
       // manage menu items style depending to parent menu horientation
       this.element.setAttribute(`data-style-direction-${this.direction}`, '');
@@ -190,15 +201,24 @@ export class MgMenuItem {
       // manage all sub levels child menu-items level with data-level attribut
       if (this.isDirection(Direction.VERTICAL)) {
         Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
-          const itemLevel = Number(item.getAttribute('data-level')) || 1;
-          item.setAttribute('data-level', `${itemLevel + 1}`);
+          item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;
         });
       }
       // manage first sub-level menu-items
       const childItems = Array.from(((_a = this.element.querySelector('mg-menu')) === null || _a === void 0 ? void 0 : _a.children) || []).filter(item => item.nodeName === 'MG-MENU-ITEM');
       childItems.forEach(item => {
+        const updateStatus = () => {
+          if (![Status.HIDDEN, Status.DISABLED].includes(this.status)) {
+            this.status = this.hasActiveChild() ? Status.ACTIVE : Status.VISIBLE;
+          }
+        };
         // manage child menu listener
-        new MutationObserver(() => {
+        item.addEventListener('status-change', () => {
+          updateStatus();
+        });
+        new MutationObserver(mutationsList => {
+          if (mutationsList.some(mutation => mutation.attributeName === 'hidden'))
+            updateStatus();
           this.updateDisplayNotificationBadge();
         }).observe(item, { attributes: true });
       });
@@ -211,7 +231,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: "info", 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 : 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: {
         [`${this.navigationButton}-chevron`]: true,
         [`${this.navigationButton}-chevron--rotate`]: this.expanded === true,
         'mg-a11y-animation': true,
@@ -229,7 +249,7 @@ export class MgMenuItem {
     });
     return (h(Host, { role: "menuitem", "aria-haspopup": this.hasChildren.toString() }, this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
       this.renderInteractiveElement(),
-      h("div", { class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
+      h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
     ])));
   }
   static get is() { return "mg-menu-item"; }

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,38 @@
+/**
+ * A11Y
+ */
+.sr-only {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
+}
+
+*:focus:not(:focus-visible) {
+  outline: none;
+}
+
+@media (prefers-reduced-motion) {
+  .mg-a11y-animation {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+:host {
+  --mg-popover-padding-vertical: 1rem;
+  --mg-popover-padding-horizontal: 0;
+}
+
+.mg-action-more__chevron {
+  transition: 200ms;
+}
+.mg-action-more__chevron--rotate.mg-action-more__chevron {
+  transform: rotate(180deg);
+}

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

@@ -0,0 +1,252 @@
+import { h, Host } from '@stencil/core';
+import { initLocales } from '../../../locales';
+import { Status } from '../menu/mg-menu-item/mg-menu-item.conf';
+import { Direction } from '../menu/mg-menu/mg-menu.conf';
+import { createID } from '../../../utils/components.utils';
+/**
+ * MgActionMore['items'] type guard
+ *
+ * @param {unknown} prop commponent items prop
+ * @returns {boolean} return true if type is valid
+ */
+const isMgActionMoreItems = (prop) => {
+  const items = prop;
+  return typeof items === 'object' && items.every(item => typeof item === 'object' && typeof item.label === 'string' && typeof item.mouseEventHandler === 'function');
+};
+/**
+ * MgActionMore['button'] type guard
+ *
+ * @param {unknown} prop commponent button prop
+ * @returns {boolean} return true if type is valid
+ */
+const isMgActionMoreButton = (prop) => {
+  const button = prop;
+  return typeof button === 'object' && typeof button.variant === 'string' && typeof button.isIcon === 'boolean';
+};
+/**
+ * MgActionMore['icon'] type guard
+ *
+ * @param {unknown} prop commponent icon prop
+ * @returns {boolean} return true if type is valid
+ */
+const isMgActionMoreIcon = (prop) => {
+  const icon = prop;
+  return typeof icon === 'object' && typeof icon.icon === 'string';
+};
+export class MgActionMore {
+  constructor() {
+    /************
+     * Internal *
+     ************/
+    this.name = 'mg-action-more';
+    this.mgPopoverIdentifier = createID(this.name);
+    /************
+     * Merthods *
+     ***********/
+    /**
+     * Toogle expanded props
+     *
+     * @returns {void}
+     */
+    this.toggleExpanded = () => {
+      this.expanded = !this.expanded;
+    };
+    /**
+     * Button click handler
+     *
+     * @returns {void}
+     */
+    this.handleButton = () => {
+      this.toggleExpanded();
+    };
+    /**
+     * Item click handler
+     *
+     * @param {MouseEvent} event click event
+     * @param {MgActionMoreItemType['mouseEventHandler']} customHandler item['mouseEventHandler']
+     * @returns {void}
+     */
+    this.handleItemClick = (event, customHandler) => {
+      this.expanded = false;
+      customHandler(event);
+    };
+    this.icon = { icon: 'ellipsis' };
+    this.button = { variant: 'flat', isIcon: true };
+    this.items = undefined;
+    this.displayChevron = undefined;
+    this.expanded = false;
+  }
+  validateIcon(newValue) {
+    if (newValue && !isMgActionMoreIcon(newValue)) {
+      throw new Error(`<${this.name}> prop icon must match MgActionMoreIconType.`);
+    }
+  }
+  validateButton(newValue) {
+    if (newValue && !isMgActionMoreButton(newValue)) {
+      throw new Error(`<${this.name}> prop button must match MgActionMoreButtonType.`);
+    }
+  }
+  validateItems(newValue) {
+    if (!isMgActionMoreItems(newValue)) {
+      throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType.`);
+    }
+  }
+  validateDisplayChevron(newValue) {
+    if (newValue && this.button.isIcon === true) {
+      throw new Error(`<${this.name}> prop "displayChevron" can't be used with a 'button" prop "isIcon" attribute.`);
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Validate props
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    this.messages = initLocales(this.element).messages.actionMore;
+    this.validateItems(this.items);
+    this.validateButton(this.button);
+    this.validateIcon(this.icon);
+    this.validateDisplayChevron(this.displayChevron);
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    const buttonLabel = this.button.label || this.messages.label;
+    const buttonContent = [buttonLabel];
+    if (!this.button.isIcon && this.displayChevron) {
+      buttonContent.push(h("span", { class: {
+          [`${this.name}__chevron`]: true,
+          [`${this.name}__chevron--rotate`]: this.expanded === true,
+          '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 => {
+      var _a;
+      return (
+      // eslint-disable-next-line react/jsx-no-bind
+      h("mg-menu-item", { key: item.label, status: item.status || Status.VISIBLE, onClick: e => this.handleItemClick(e, item.mouseEventHandler), href: item.href }, item.icon && h("mg-icon", { icon: item.icon, slot: "image" }), h("span", { slot: "label" }, item.label), ((_a = item.badge) === null || _a === void 0 ? void 0 : _a.label) && h("mg-badge", { label: item.badge.label, value: item.badge.value, slot: "information", variant: "text-color" })));
+    })))))));
+  }
+  static get is() { return "mg-action-more"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-action-more.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-action-more.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "icon": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "MgActionMoreIconType",
+          "resolved": "{ icon: string; }",
+          "references": {
+            "MgActionMoreIconType": {
+              "location": "import",
+              "path": "./mg-action-more.conf"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define displaied icon\nDefault: {icon: 'ellipsis'}"
+        },
+        "defaultValue": "{ icon: 'ellipsis' }"
+      },
+      "button": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "MgActionMoreButtonType",
+          "resolved": "{ isIcon: boolean; variant: \"flat\" | \"info\" | \"success\" | \"link\" | \"primary\" | \"secondary\" | \"danger\" | \"danger-alt\"; label?: string; }",
+          "references": {
+            "MgActionMoreButtonType": {
+              "location": "import",
+              "path": "./mg-action-more.conf"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define button properties\nDefault: {variant: 'flat', isIcon: true}."
+        },
+        "defaultValue": "{ variant: 'flat', isIcon: true }"
+      },
+      "items": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "MgActionMoreItemType[]",
+          "resolved": "MgActionMoreItemType[]",
+          "references": {
+            "MgActionMoreItemType": {
+              "location": "import",
+              "path": "./mg-action-more.conf"
+            }
+          }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define the menu-items elements"
+        }
+      },
+      "displayChevron": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define if chevron is display"
+        },
+        "attribute": "display-chevron",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "expanded": {}
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "icon",
+        "methodName": "validateIcon"
+      }, {
+        "propName": "button",
+        "methodName": "validateButton"
+      }, {
+        "propName": "items",
+        "methodName": "validateItems"
+      }, {
+        "propName": "displayChevron",
+        "methodName": "validateDisplayChevron"
+      }];
+  }
+}

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

@@ -23,12 +23,12 @@ export class MgForm {
         // All fields are required
         // 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 = this.messages.form.allRequired;
+          this.requiredMessage = requiredInputs.length === 1 ? this.messages.form.allRequiredSingle : this.messages.form.allRequired;
           this.classList.add(this.classAllRequired);
         }
         // Some fields are required
         else if (requiredInputs.length > 0) {
-          this.requiredMessage = this.messages.form.required;
+          this.requiredMessage = requiredInputs.length === 1 ? this.messages.form.requiredSingle : this.messages.form.required;
         }
       }
     };

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

@@ -91,7 +91,7 @@ export class MgMessage {
   }
   validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
-      throw new Error(`<mg-message> prop "variant" must be one of : ${variants.join(', ')}`);
+      throw new Error(`<mg-message> prop "variant" must be one of: ${variants.join(', ')}`);
     }
     else {
       if (oldValue !== undefined) {

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

@@ -59,6 +59,7 @@ export class MgPagination {
     };
     this.identifier = createID('mg-pagination');
     this.label = undefined;
+    this.hideNavigationLabels = undefined;
     this.totalPages = 1;
     this.currentPage = 1;
   }
@@ -103,7 +104,7 @@ export class MgPagination {
   render() {
     const navigationActionButton = (disabled, action) => (h("mg-button", { identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
       // eslint-disable-next-line react/jsx-no-bind
-      onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat" }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
+      onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
     return (h("nav", { "aria-label": this.label, id: this.identifier, class: "mg-pagination" }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), h("span", { class: "sr-only" }, this.messages.pagination.page, " ", this.currentPage), h("span", null, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)));
   }
   static get is() { return "mg-pagination"; }
@@ -155,6 +156,23 @@ export class MgPagination {
         "attribute": "label",
         "reflect": false
       },
+      "hideNavigationLabels": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hide navigation label"
+        },
+        "attribute": "hide-navigation-labels",
+        "reflect": false
+      },
       "totalPages": {
         "type": "number",
         "mutable": false,