@mgdis/mg-components 5.9.1 → 5.10.0

package/dist/cjs/mg-components.cjs.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["mg-action-more_31.cjs",[[1,"mg-action-more",{"icon":[16],"button":[16],"items":[16],"displayChevron":[4,"display-chevron"],"expanded":[32]}],[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1025,"title-pattern"],"titlePatternErrorMessage":[1025,"title-pattern-error-message"],"expanded":[1028],"expandToggleDisabled":[1028,"expand-toggle-disabled"],"titleEditable":[4,"title-editable"],"classList":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-pagination",{"identifier":[1],"label":[1025],"hideNavigationLabels":[4,"hide-navigation-labels"],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-input-textarea",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"resizable":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-checkbox",{"value":[1040],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"checkboxItems":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"currency":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classList":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classList":[32],"hasActions":[32]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[1028,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classList":[32]},[[8,"keydown","handleKeyDown"]]],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classList":[32]}],[1,"mg-details",{"toggleClosed":[1,"toggle-closed"],"toggleOpened":[1,"toggle-opened"],"hideSummary":[4,"hide-summary"],"expanded":[1028]}],[1,"mg-divider",{"size":[1]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classList":[32],"requiredMessage":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1],"direction":[1]}],[1,"mg-skip-links",{"links":[1040]}],[1,"mg-tag",{"variant":[1],"outline":[4],"soft":[4],"classList":[32]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1025],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-menu-item",{"identifier":[1],"href":[1],"status":[1537],"expanded":[1028],"size":[32],"navigationButtonClassList":[32],"direction":[32],"isInMainMenu":[32],"isItemMore":[32],"hasChildren":[32],"displayNotificationBadge":[32]}],[1,"mg-menu",{"label":[1],"direction":[513],"itemmore":[16],"size":[1],"isChildMenu":[32]}],[1,"mg-popover",{"identifier":[1],"placement":[1],"arrowHide":[4,"arrow-hide"],"closeButton":[4,"close-button"],"display":[1028],"disabled":[1028],"classList":[32]}],[2,"mg-character-left",{"identifier":[1],"characters":[1],"maxlength":[2]}],[1,"mg-badge",{"value":[1032],"label":[1],"variant":[1],"outline":[4],"classList":[32]}],[1,"mg-card",{"variant":[1],"variantStyle":[1025,"variant-style"],"classList":[32]}],[1,"mg-button",{"variant":[1],"identifier":[1],"label":[1],"type":[1],"fullWidth":[1028,"full-width"],"form":[1025],"disabled":[1028],"isIcon":[4,"is-icon"],"disableOnClick":[4,"disable-on-click"],"loading":[32],"classList":[32]}],[6,"mg-input-title",{"identifier":[1],"required":[4],"isLegend":[4,"is-legend"],"tagName":[32]}],[1,"mg-tooltip",{"identifier":[1],"message":[1],"placement":[1],"display":[1028],"disabled":[1028]}],[1,"mg-icon",{"icon":[1],"size":[1],"variant":[1],"variantStyle":[1025,"variant-style"],"spin":[4],"classList":[32]}]]],["mg-item-more.cjs",[[1,"mg-item-more",{"icon":[16],"slotlabel":[16],"size":[1],"parentMenu":[32]}]]]], options);
+  return index.bootstrapLazy([["mg-action-more_31.cjs",[[1,"mg-action-more",{"icon":[16],"button":[16],"items":[16],"displayChevron":[4,"display-chevron"],"expanded":[32]}],[1,"mg-panel",{"identifier":[1],"panelTitle":[1025,"panel-title"],"titlePattern":[1,"title-pattern"],"titlePatternErrorMessage":[1,"title-pattern-error-message"],"expanded":[1028],"expandToggleDisabled":[4,"expand-toggle-disabled"],"titleEditable":[4,"title-editable"],"classList":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[1,"mg-pagination",{"identifier":[1],"label":[1025],"hideNavigationLabels":[4,"hide-navigation-labels"],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[1,"mg-input-textarea",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"rows":[2],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"resizable":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-checkbox",{"value":[1040],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"checkboxItems":[32],"displayError":[64]}],[1,"mg-input-date",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"min":[1],"max":[1],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-numeric",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"type":[1],"currency":[1],"max":[2],"min":[2],"integerLength":[2,"integer-length"],"decimalLength":[2,"decimal-length"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"hasFocus":[32],"displayError":[64]}],[1,"mg-input-password",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"displayError":[64]}],[1,"mg-input-radio",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"displayError":[64]}],[1,"mg-input-toggle",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"isOnOff":[4,"is-on-off"],"isIcon":[4,"is-icon"],"readonly":[4],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"classList":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classList":[32],"hasActions":[32]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[4,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classList":[32]},[[8,"keydown","handleKeyDown"]]],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classList":[32]}],[1,"mg-details",{"toggleClosed":[1,"toggle-closed"],"toggleOpened":[1,"toggle-opened"],"hideSummary":[4,"hide-summary"],"expanded":[1028]}],[1,"mg-divider",{"size":[1]}],[1,"mg-form",{"identifier":[1],"name":[1],"readonly":[4],"disabled":[4],"valid":[1028],"invalid":[1028],"classList":[32],"requiredMessage":[32],"displayError":[64]}],[1,"mg-illustrated-message",{"size":[1],"direction":[1]}],[1,"mg-skip-links",{"links":[16]}],[1,"mg-tag",{"variant":[1],"outline":[4],"soft":[4],"classList":[32]}],[1,"mg-input-text",{"value":[1537],"identifier":[1],"name":[1],"label":[1],"type":[1],"icon":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1],"maxlength":[2],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"pattern":[1],"patternErrorMessage":[1,"pattern-error-message"],"tooltip":[1],"displayCharacterLeft":[4,"display-character-left"],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-input-select",{"value":[1032],"items":[16],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"placeholder":[1025],"placeholderHide":[4,"placeholder-hide"],"placeholderDisabled":[4,"placeholder-disabled"],"required":[4],"readonly":[4],"disabled":[4],"mgWidth":[8,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classList":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-menu-item",{"identifier":[1],"href":[1],"status":[1537],"expanded":[1028],"size":[32],"navigationButtonClassList":[32],"direction":[32],"isInMainMenu":[32],"isItemMore":[32],"hasChildren":[32],"displayNotificationBadge":[32]}],[1,"mg-menu",{"label":[1],"direction":[513],"itemmore":[16],"size":[1],"isChildMenu":[32]}],[1,"mg-popover",{"identifier":[1],"placement":[1],"arrowHide":[4,"arrow-hide"],"closeButton":[4,"close-button"],"display":[1028],"disabled":[4],"classList":[32]}],[2,"mg-character-left",{"identifier":[1],"characters":[1],"maxlength":[2]}],[1,"mg-badge",{"value":[8],"label":[1],"variant":[1],"outline":[4],"classList":[32]}],[1,"mg-card",{"variant":[1],"variantStyle":[1025,"variant-style"],"classList":[32]}],[1,"mg-button",{"variant":[1],"identifier":[1],"label":[1],"type":[1],"fullWidth":[4,"full-width"],"form":[1],"disabled":[1028],"isIcon":[4,"is-icon"],"disableOnClick":[4,"disable-on-click"],"loading":[32],"classList":[32]}],[6,"mg-input-title",{"identifier":[1],"required":[4],"isLegend":[4,"is-legend"],"tagName":[32]}],[1,"mg-tooltip",{"identifier":[1],"message":[1],"placement":[1],"display":[1028],"disabled":[4]}],[1,"mg-icon",{"icon":[1],"size":[1],"variant":[1],"variantStyle":[1025,"variant-style"],"spin":[4],"classList":[32]}]]],["mg-item-more.cjs",[[1,"mg-item-more",{"icon":[16],"slotlabel":[16],"size":[1],"parentMenu":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/mg-item-more.cjs.entry.js

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-9e1091ab.js');
-const mgMenu_conf = require('./mg-menu.conf-9afe6571.js');
+const mgMenu_conf = require('./mg-menu.conf-1942ac70.js');
 
 /**
  * MgItemMore type guard
- *
  * @param {HTMLElement} element element to control type
  * @returns {boolean} truthy if element is mg-item-more
  */
@@ -26,7 +25,6 @@ class OverflowBehavior {
      **********/
     /**
      * Disconnect ResizeObserver
-     *
      * @returns {void}
      */
     this.disconnect = () => {
@@ -37,7 +35,6 @@ class OverflowBehavior {
      ************/
     /**
      * run overflow behavior
-     *
      * @param {number} width width of the container. Optional.
      * @returns {void}
      */
@@ -62,14 +59,12 @@ class OverflowBehavior {
     };
     /**
      * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']
-     *
      * @param {Element} element element to parse
      * @returns {Element[]} children
      */
     this.getInteractiveItems = (element) => { var _a; return (((_a = element.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName)); };
     /**
      * Update displayed items in container from a given available space
-     *
      * @param {number} availableWidth available width in container to display child items
      * @returns {void}
      */
@@ -90,7 +85,6 @@ class OverflowBehavior {
     };
     /**
      * Utility method to know if item overflow partialy or totaly in the container
-     *
      * @param {number} cumulateWidth previous sibling elements cumulate width + item width
      * @param {HTMLElement} item item HTML element
      * @param {number} availableWidth container available width
@@ -106,14 +100,12 @@ class OverflowBehavior {
     };
     /**
      * Utility method to know if a given element is the 'MORE' element
-     *
      * @param {Element} element element to match with 'MORE' element
      * @returns {boolean} truthy if element is the 'MORE' element
      */
     this.isMoreElement = (element) => element.nodeName === 'MG-ITEM-MORE';
     /**
      * Toggle display item element
-     *
      * @param {HTMLElement} item item to control
      * @param {boolean} isHidden is item hidden
      * @returns {void}
@@ -129,7 +121,6 @@ class OverflowBehavior {
     };
     /**
      * Toggle element's hidde attribute
-     *
      * @param {Element} element element to toggle
      * @param {boolean} isHidden element is hidden
      * @returns {void}
@@ -142,7 +133,6 @@ class OverflowBehavior {
     };
     /**
      * Remove hidden attributes on all items
-     *
      * @returns {void}
      */
     this.restoreItems = () => {
@@ -175,7 +165,6 @@ const MgItemMore = class {
      ***********/
     /**
      * render mg-item-more overflow element
-     *
      * @returns {HTMLMgItemMoreElement} mg-item-more element
      */
     this.renderMgMenuItemOverflowElement = () => {
@@ -225,7 +214,6 @@ const MgItemMore = class {
    *************/
   /**
    * Disconnect overflow ResizeObserver
-   *
    * @returns {void} run overflow resize obeserver disconnexion
    */
   disconnectedCallback() {
@@ -233,7 +221,6 @@ const MgItemMore = class {
   }
   /**
    * Set variables and validate props
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -248,7 +235,6 @@ const MgItemMore = class {
   }
   /**
    * Add overflow behavior
-   *
    * @returns {void}
    */
   componentDidLoad() {
@@ -256,7 +242,6 @@ const MgItemMore = class {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

package/dist/cjs/{mg-menu.conf-9afe6571.js → mg-menu.conf-1942ac70.js}

@@ -152,7 +152,6 @@ const fr = {
 
 /**
  * Format number to the locale currency
- *
  * @param {number} number number to format
  * @param {string} locale locale to apply
  * @param {string} currency currency to apply
@@ -163,7 +162,6 @@ const localeCurrency = (number, locale, currency) => {
 };
 /**
  * Format number to locale
- *
  * @param {number} number number to format
  * @param {string} locale locale to apply
  * @returns {string} formatted number
@@ -177,7 +175,6 @@ const localeNumber = (number, locale) => {
 const dateRegExp = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
 /**
  * Locale date format
- *
  * @param {string} date date to format
  * @param {string} locale locale to apply
  * @returns {string} formatted date
@@ -191,7 +188,6 @@ const localeDate = (date, locale) => {
 /**
  * Get locale and messages
  * We load the defined locale but for now we only support the first subtag for messages
- *
  * @param {HTMLElement} element element we need to get the language
  * @param {unknown} messages messages to use
  * @param {string} defaultLocale default messages locale
@@ -215,7 +211,6 @@ const defaultLocale = 'en';
 const messages = { en, fr };
 /**
  * Get Intl object
- *
  * @param {HTMLElement} element element we need to get the language
  * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
  */

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

@@ -43,7 +43,6 @@ export class MgBadge {
   }
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -54,7 +53,6 @@ export class MgBadge {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -76,7 +74,7 @@ export class MgBadge {
     return {
       "value": {
         "type": "any",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string | number",
           "resolved": "number | string",

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

@@ -12,7 +12,6 @@ export class MgButton {
     this.classFullWidth = 'mg-button--full-width';
     /**
      * Trigger actions onClick event
-     *
      * @param {MouseEvent} event click event
      * @returns {void}
      */
@@ -27,7 +26,6 @@ export class MgButton {
     };
     /**
      * Handle onKeydown event
-     *
      * @param {KeyboardEvent} event keyboard event
      * @returns {void}
      */
@@ -42,7 +40,6 @@ export class MgButton {
     };
     /**
      * Handle onKeyup event
-     *
      * @param {KeyboardEvent} event keyboard event
      * @returns {void}
      */
@@ -115,7 +112,6 @@ export class MgButton {
   }
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -133,7 +129,6 @@ export class MgButton {
   }
   /**
    * Render component
-   *
    * @returns {HTMLElement} html element
    */
   render() {
@@ -234,7 +229,7 @@ export class MgButton {
       },
       "fullWidth": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -252,7 +247,7 @@ export class MgButton {
       },
       "form": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",

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

@@ -8,6 +8,15 @@ export class MgCard {
      *************/
     this.name = 'mg-card';
     this.baseClass = this.name;
+    /**
+     * Methode to set default varianStyle props
+     * needeed has stencil doesn't know that props is mutated when updated in prop watcher
+     * @returns {void}
+     */
+    this.setDefaultVariantStyle = () => {
+      if (this.variantStyle === undefined)
+        this.variantStyle = 'bar-left';
+    };
     this.variant = undefined;
     this.variantStyle = undefined;
     this.classList = new ClassList([this.baseClass]);
@@ -16,8 +25,7 @@ export class MgCard {
     if (newValue && !variants.includes(newValue))
       throw new Error(`<${this.name}> prop "variant" must match VariantType type.`);
     if (Boolean(newValue)) {
-      if (this.variantStyle === undefined)
-        this.variantStyle = 'bar-left';
+      this.setDefaultVariantStyle();
       this.classList.add(`${this.baseClass}--${newValue}`);
     }
     if (Boolean(oldValue))
@@ -33,9 +41,11 @@ export class MgCard {
     if (Boolean(oldValue))
       this.classList.delete(`${this.baseClass}--${oldValue}`);
   }
+  /*************
+   * Lifecycle *
+   *************/
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -44,7 +54,6 @@ export class MgCard {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

package/dist/collection/components/atoms/mg-character-left/mg-character-left.js

@@ -16,7 +16,6 @@ export class MgCharacterLeft {
    *************/
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -25,7 +24,6 @@ export class MgCharacterLeft {
   }
   /**
    * Render component
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

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

@@ -5,7 +5,6 @@ export class MgDivider {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

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

@@ -5,10 +5,18 @@ export class MgIcon {
   constructor() {
     /**
      * getIcon
-     *
      * @returns {HTMLElement} icon html
      */
     this.getIcon = () => icons[this.icon]();
+    /**
+     * Method to set default varianStyle props
+     * needeed has stencil doesn't know that props is mutated when updated in prop watcher
+     * @returns {void}
+     */
+    this.setDefaultVariantStyle = () => {
+      if (this.variantStyle === undefined)
+        this.variantStyle = 'background';
+    };
     this.icon = undefined;
     this.size = 'regular';
     this.variant = undefined;
@@ -39,8 +47,7 @@ export class MgIcon {
       if (!variants.includes(newValue))
         throw new Error(`<mg-icon> prop "variant" must be one of: ${variants.join(', ')}`);
       else {
-        if (this.variantStyle === undefined)
-          this.variantStyle = 'background';
+        this.setDefaultVariantStyle();
         if (oldValue !== undefined)
           this.classList.delete(`mg-icon--variant-${oldValue}`);
         this.classList.add(`mg-icon--variant-${newValue}`);
@@ -70,7 +77,6 @@ export class MgIcon {
   }
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -82,7 +88,6 @@ export class MgIcon {
   }
   /**
    * Render component
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

package/dist/collection/components/atoms/mg-input-title/mg-input-title.js

@@ -19,7 +19,6 @@ export class MgInputTitle {
    *************/
   /**
    * Init tag name
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -28,7 +27,6 @@ export class MgInputTitle {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

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

@@ -46,7 +46,6 @@ export class MgTag {
    *************/
   /**
    * Validate the given textContent
-   *
    * @param {string} textContent html element textContent property
    * @returns {void}
    */
@@ -59,7 +58,6 @@ export class MgTag {
    *************/
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -70,7 +68,6 @@ export class MgTag {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

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

@@ -6,7 +6,6 @@ export class MgTooltip {
   constructor() {
     /**
      * Show tooltip
-     *
      * @returns {void}
      */
     this.show = () => {
@@ -27,7 +26,6 @@ export class MgTooltip {
     };
     /**
      * Hide tooltip
-     *
      * @returns {void}
      */
     this.hide = () => {
@@ -43,7 +41,6 @@ export class MgTooltip {
     };
     /**
      * Check if clicked outside of component and hidde tooltip
-     *
      * @param {MouseEvent} event mouse event
      * @returns {void}
      */
@@ -53,7 +50,6 @@ export class MgTooltip {
     };
     /**
      * Check if 'Escape' key is pressed of component and hidde tooltip
-     *
      * @param {KeyboardEvent} event keyboard event
      * @returns {void}
      */
@@ -63,7 +59,6 @@ export class MgTooltip {
     };
     /**
      * Method to set display prop
-     *
      * @param {boolean} newValue display prop new value
      * @param {boolean} condition additionnal condition to apply display prop newValue
      * @returns {void}
@@ -74,7 +69,6 @@ export class MgTooltip {
     };
     /**
      * Action for tooltip element and tooltiped element mouse listener
-     *
      * @param {Guard} elementGuard tooltip element guard
      * @param {boolean} isMouseenter mouseenter validation
      * @param {Guard} conditionalGuard guard condition
@@ -97,7 +91,6 @@ export class MgTooltip {
     };
     /**
      * Method to reset guard value
-     *
      * @returns {void}
      */
     this.resetGuard = () => {
@@ -105,7 +98,6 @@ export class MgTooltip {
     };
     /**
      * Update slot content when it is a mg-button
-     *
      * @param {HTMLMgButtonElement} mgButton slotted mg-button
      * @returns {void}
      */
@@ -124,7 +116,6 @@ export class MgTooltip {
     };
     /**
      * Init tooltip
-     *
      * @param {HTMLElement} slotElement slotted element
      * @param {HTMLElement} interactiveElement interactive element
      */
@@ -202,7 +193,6 @@ export class MgTooltip {
    *************/
   /**
    * set variables
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -213,7 +203,6 @@ export class MgTooltip {
    * Get slotted element
    * Check if it already contain an interactive element, if not we need to add a tabIndex attribute
    * We need to attach the focused element to the tooltip (aria-describedby)
-   *
    * @returns {void}
    */
   componentDidLoad() {
@@ -247,7 +236,6 @@ export class MgTooltip {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -345,7 +333,7 @@ export class MgTooltip {
       },
       "disabled": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",

package/dist/collection/components/molecules/inputs/MgInput.js

@@ -1,7 +1,6 @@
 import { h } from '@stencil/core';
 /**
  * Apply in all input child node the aria-describedby attribute
- *
  * @param {VNode[]} children Represent scoped elements
  * @param {Set<string>} ariaDescribedbyIDs List of IDs
  * @param {FunctionalUtilities} utils Stencil.js utils
@@ -18,7 +17,6 @@ const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(
 });
 /**
  * Add classes based on props
- *
  * @param {MgInputProps} props MgInput Interface Props
  */
 const manageClasses = (props) => {
@@ -32,14 +30,12 @@ const manageClasses = (props) => {
 };
 /**
  * Get tagname
- *
  * @param {boolean} isFieldset is fieldset
  * @returns {string} tag name
  */
 const getTagName = (isFieldset) => (isFieldset ? 'fieldset' : 'div');
 /**
  * Get input template
- *
  * @param {MgInputProps} props MgInput Interface Props
  * @param {VNode[]} children Represent scoped elements
  * @param {FunctionalUtilities} utils Stencil.js utils
@@ -99,14 +95,12 @@ export const MgInput = (props, children, utils) => {
   const TagName = getTagName(props.isFieldset);
   /**
    * Get tooltip node
-   *
    * @returns {VNode[]} mg-tooltip
    */
   const getTooltip = () => (h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip }, h("mg-icon", { icon: "info-circle" })));
   /**
    * Get input title (label) node
    * Display asterisk only if not disabled and not readonly
-   *
    * @returns {VNode[]} mg-input-title
    */
   const getInputTitle = () => (h("mg-input-title", { identifier: props.identifier, class: props.labelHide ? 'sr-only' : undefined, required: props.required && !props.disabled && !props.readonly, "is-legend": props.isFieldset }, props.label));

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

@@ -5,7 +5,6 @@ import { ClassList } from '../../../../utils/components.utils';
 import { initLocales } from '../../../../locales';
 /**
  * type CheckboxItem validation function
- *
  * @param {unknown} items Checkbox item
  * @returns {boolean} match item type
  */
@@ -22,7 +21,6 @@ export class MgInputCheckbox {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
      * @param {InputEvent} event input event
      */
     this.handleInput = (event) => {
@@ -45,7 +43,6 @@ export class MgInputCheckbox {
     };
     /**
      * get invalid element
-     *
      * @returns {HTMLInputElement} element
      */
     this.getInvalidElement = () => this.inputs.find((input) => input !== null && !input.disabled && !input.checkValidity());
@@ -113,7 +110,6 @@ export class MgInputCheckbox {
   }
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   async displayError() {
@@ -126,7 +122,6 @@ export class MgInputCheckbox {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
@@ -143,7 +138,6 @@ export class MgInputCheckbox {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

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

@@ -36,7 +36,6 @@ export class MgInputDate {
     };
     /**
      * get input error code
-     *
      * @returns {null | InputError} error code
      */
     this.getInputError = () => {
@@ -62,7 +61,6 @@ export class MgInputDate {
     };
     /**
      * Check input errors
-     *
      * @returns {void}
      */
     this.setErrorMessage = () => {
@@ -132,7 +130,6 @@ export class MgInputDate {
   }
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   async displayError() {
@@ -145,7 +142,6 @@ export class MgInputDate {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
@@ -166,7 +162,6 @@ export class MgInputDate {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {