@mgdis/mg-components 5.6.0 → 5.8.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.conf.js

@@ -6,19 +6,6 @@ export var Direction;
   Direction["VERTICAL"] = "vertical";
   Direction["HORIZONTAL"] = "horizontal";
 })(Direction || (Direction = {}));
-/**
- * More item type guard
- *
- * @param {unknown} element element to control
- * @returns {boolean} truthy if element is more-item
- */
-export const isMoreItem = (element) => {
-  var _a, _b, _c;
-  const item = element;
-  return (item === undefined ||
-    (typeof item === 'object' &&
-      (typeof item.size === 'string' || typeof ((_a = item.mgIcon) === null || _a === void 0 ? void 0 : _a.icon) === 'string' || typeof ((_b = item.slotLabel) === null || _b === void 0 ? void 0 : _b.label) === 'string' || typeof ((_c = item.slotLabel) === null || _c === void 0 ? void 0 : _c.display) === 'boolean')));
-};
 /**
  * List of all possibles sizes
  */

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

@@ -1,7 +1,5 @@
 import { h, Host } from '@stencil/core';
-import { OverflowBehavior, OverflowBehaviorElements } from '../../../../utils/behaviors.utils';
-import { Direction, isMoreItem, sizes } from './mg-menu.conf';
-import { initLocales } from '../../../../locales';
+import { Direction, sizes } from './mg-menu.conf';
 export class MgMenu {
   constructor() {
     /************
@@ -45,46 +43,23 @@ export class MgMenu {
       });
     };
     /**
-     * render mg-menu-more
+     * render mg-item-more
      *
-     * @returns {HTMLElement} formated mg-menu-item element
-     */
-    this.renderMgMenuMore = () => {
-      const moreElement = this.element.shadowRoot.querySelector(`[${OverflowBehaviorElements.MORE}]`);
-      this.menuItems.forEach((child) => {
-        const proxy = child.cloneNode(true);
-        moreElement.querySelector('mg-menu').appendChild(proxy);
-      });
-      const allMenuItem = Array.from(this.element.querySelectorAll('mg-menu-item:not([data-overflow-more])'));
-      Array.from(moreElement.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {
-        // manage click on proxy to mirror it on initial element
-        proxy.addEventListener('click', () => {
-          (allMenuItem[index].shadowRoot.querySelector('a') || allMenuItem[index].shadowRoot.querySelector('button')).dispatchEvent(new MouseEvent('click', { bubbles: true }));
-        });
-        // manage status change miror in proxy
-        allMenuItem[index].addEventListener('status-change', (event) => {
-          proxy.setAttribute('status', event.detail);
-          this.overflowBehavior.updateActiveStatus();
-        });
-      });
-      this.element.appendChild(moreElement);
-      return this.element.querySelector(`[${OverflowBehaviorElements.MORE}]`);
-    };
-    /**
-     * Render mg-menu-item more element for overflow behavior
-     *
-     * @returns {HTMLElement} rendered mg-menu-item more element
+     * @returns {void}
      */
-    this.renderMgMenuItemMore = () => {
-      var _a, _b, _c, _d, _e, _f, _g;
-      return (h("mg-menu-item", { "data-overflow-more": true }, h("mg-icon", { icon: ((_b = (_a = this.moreitem) === null || _a === void 0 ? void 0 : _a.mgIcon) === null || _b === void 0 ? void 0 : _b.icon) || 'ellipsis-vertical', slot: "image" }), h("span", { class: { 'sr-only': !((_d = (_c = this.moreitem) === null || _c === void 0 ? void 0 : _c.slotLabel) === null || _d === void 0 ? void 0 : _d.display) }, slot: "label" }, ((_f = (_e = this.moreitem) === null || _e === void 0 ? void 0 : _e.slotLabel) === null || _f === void 0 ? void 0 : _f.label) || this.messages.moreLabel), h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.moreLabel, size: (_g = this.moreitem) === null || _g === void 0 ? void 0 : _g.size })));
+    this.renderMgItemMore = () => {
+      // /!\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement
+      // by doing this we prevent stencil to generate a circular dependencies graph at build time with mg-item-more component.
+      const item = 'mg-item-more';
+      const mgItemMore = document.createElement(item);
+      Object.assign(mgItemMore, this.itemMore);
+      this.element.appendChild(mgItemMore);
     };
     this.label = undefined;
     this.direction = Direction.HORIZONTAL;
-    this.moreitem = undefined;
+    this.itemMore = undefined;
     this.size = 'regular';
     this.isChildMenu = undefined;
-    this.hasOverflow = false;
   }
   validateLabel(newValue) {
     if (newValue === undefined) {
@@ -93,20 +68,17 @@ 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) {
+  validateItemMore(newValue) {
     if (newValue !== undefined && this.direction !== Direction.HORIZONTAL) {
-      throw new Error(`<${this.name}> prop "moreitem" must be paired with direction ${Direction.HORIZONTAL}.`);
-    }
-    else if (newValue !== undefined && !isMoreItem(newValue)) {
-      throw new Error(`<${this.name}> prop "moreitem" must match MoreItemType.`);
+      throw new Error(`<${this.name}> prop "itemMore" must be paired with direction ${Direction.HORIZONTAL}.`);
     }
   }
   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(', ')}.`);
     }
   }
   /*************
@@ -118,11 +90,9 @@ export class MgMenu {
    * @returns {void}
    */
   componentWillLoad() {
-    this.messages = initLocales(this.element).messages.plusMenu;
-    // validation
     this.validateDirection(this.direction);
     this.validateLabel(this.label);
-    this.validateMoreItem(this.moreitem);
+    this.validateItemMore(this.itemMore);
     this.validateSize(this.size);
   }
   /**
@@ -138,36 +108,38 @@ export class MgMenu {
       // store all menu-items
       this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
       this.isChildMenu = this.element.closest('mg-menu-item') !== null;
-      this.hasOverflow = this.direction === Direction.HORIZONTAL && !this.isChildMenu;
-      if (this.hasOverflow && isMoreItem(this.moreitem))
-        this.overflowBehavior = new OverflowBehavior(this.element, this.renderMgMenuMore);
+      // add mg-item-more to manage OverflowBehavior
+      if (this.direction === Direction.HORIZONTAL && !this.isChildMenu)
+        this.renderMgItemMore();
+      // use mutation observer to improve reactivity
+      new MutationObserver(entries => {
+        const mgItemMore = this.element.querySelector('mg-item-more');
+        // prevent infinit loop by exclude mg-item-more deletion entry
+        if (entries.some(entry => entry.type === 'childList' && Array.from(entry.removedNodes).some(node => node.nodeName === 'MG-ITEM-MORE')))
+          return;
+        else if (mgItemMore !== null) {
+          // render a new mg-item-more
+          mgItemMore.remove();
+          this.renderMgItemMore();
+        }
+      }).observe(this.element, { childList: true, characterData: true, subtree: true });
     }, 0);
   }
   /**
-   * Check add listeners to childs
+   * Add listeners to items
    *
    * @returns {void}
    */
   componentDidRender() {
-    // add menu items listeners
     this.initMenuItemsListeners();
   }
-  /**
-   * Disconnect overflow ResizeObserver
-   *
-   * @returns {void} run overflow resize obeserver disconnexion
-   */
-  disconnectedCallback() {
-    if (this.hasOverflow)
-      this.overflowBehavior.disconnect();
-  }
   /**
    * Render
    *
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label }, h("slot", null), this.hasOverflow && isMoreItem(this.moreitem) && this.renderMgMenuItemMore()));
+    return (h(Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label }, h("slot", null)));
   }
   static get is() { return "mg-menu"; }
   static get encapsulation() { return "shadow"; }
@@ -223,14 +195,14 @@ export class MgMenu {
         "reflect": true,
         "defaultValue": "Direction.HORIZONTAL"
       },
-      "moreitem": {
+      "itemMore": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
-          "original": "MoreItemType",
-          "resolved": "{ mgIcon?: { icon: string; }; slotLabel?: { label?: string; display?: boolean; }; size?: \"regular\" | \"large\" | \"medium\"; }",
+          "original": "ItemMoreType",
+          "resolved": "{ size: \"regular\" | \"large\" | \"medium\"; icon: IconType; slotlabel: SlotLabelType; }",
           "references": {
-            "MoreItemType": {
+            "ItemMoreType": {
               "location": "import",
               "path": "./mg-menu.conf"
             }
@@ -240,7 +212,7 @@ export class MgMenu {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Customize mg-menu \"more element\"\nUsed with direction: 'vertical' to manage overflow"
+          "text": "Customize \"mg-item-more\" element\nUsed with direction: 'vertical' to manage overflow"
         }
       },
       "size": {
@@ -270,8 +242,7 @@ export class MgMenu {
   }
   static get states() {
     return {
-      "isChildMenu": {},
-      "hasOverflow": {}
+      "isChildMenu": {}
     };
   }
   static get elementRef() { return "element"; }
@@ -283,8 +254,8 @@ export class MgMenu {
         "propName": "direction",
         "methodName": "validateDirection"
       }, {
-        "propName": "moreitem",
-        "methodName": "validateMoreItem"
+        "propName": "itemMore",
+        "methodName": "validateItemMore"
       }, {
         "propName": "size",
         "methodName": "validateSize"

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

@@ -28,7 +28,7 @@
 .mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-regular {
   padding: 1rem 2rem;
-  height: calc(3.8rem);
+  height: 3.8rem;
 }
 .mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button,
 .mg-menu-item.mg-menu-item--size-regular .mg-menu-item__navigation-button ::slotted([slot=label]),
@@ -50,7 +50,7 @@
 .mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-medium {
   padding: 1rem 3rem;
-  height: calc(5.1rem);
+  height: 5.1rem;
 }
 .mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button,
 .mg-menu-item.mg-menu-item--size-medium .mg-menu-item__navigation-button ::slotted([slot=label]),
@@ -72,7 +72,7 @@
 .mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,
 .mg-menu-item__navigation-button.mg-menu-item__navigation-button--size-large {
   padding: 1rem 4rem;
-  height: calc(7.1rem);
+  height: 7.1rem;
 }
 .mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button,
 .mg-menu-item.mg-menu-item--size-large .mg-menu-item__navigation-button ::slotted([slot=label]),
@@ -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;