@mgdis/mg-components 5.13.0 → 5.14.0

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-03d2557d.js');
+const index = require('./index-fede8ee2.js');
 
 /*
  Stencil Client Patch Browser v2.22.1 | MIT Licensed | https://stenciljs.com
@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["mg-action-more_32.cjs",[[1,"mg-input-checkbox",{"value":[1040],"type":[1025],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"displaySelectedValues":[4,"display-selected-values"],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"checkboxItems":[32],"displaySearchInput":[32],"searchValue":[32],"searchResults":[32],"displayError":[64]}],[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"],"titleEditable":[1028,"title-editable"],"titlePosition":[1,"title-position"],"expanded":[1028],"expandToggleDisplay":[1,"expand-toggle-display"],"expandToggleDisabled":[4,"expand-toggle-disabled"],"classCollection":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[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],"classCollection":[32],"errorMessage":[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],"classCollection":[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],"classCollection":[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],"classCollection":[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],"classCollection":[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"],"classCollection":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classCollection":[32],"hasActions":[32]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[4,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classCollection":[32]},[[8,"keydown","handleKeyDown"]]],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classCollection":[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],"classCollection":[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],"classCollection":[32]}],[2,"mg-input-checkbox-paginated",{"readonly":[4],"disabled":[4],"name":[1],"checkboxes":[16],"sectionKind":[1,"section-kind"],"messages":[16],"titleKind":[32],"currentPage":[32],"itemsExpanded":[32]}],[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-pagination",{"identifier":[1],"label":[1025],"hideNavigationLabels":[4,"hide-navigation-labels"],"hidePageCount":[4,"hide-page-count"],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[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],"classCollection":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-menu",{"label":[1],"direction":[513],"itemmore":[16],"size":[1],"isChildMenu":[32]}],[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],"classCollection":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-popover",{"identifier":[1],"placement":[1],"arrowHide":[4,"arrow-hide"],"closeButton":[4,"close-button"],"display":[1028],"disabled":[4],"classCollection":[32]}],[1,"mg-badge",{"value":[8],"label":[1],"variant":[1],"outline":[4],"classCollection":[32]}],[2,"mg-character-left",{"identifier":[1],"characters":[1],"maxlength":[2]}],[1,"mg-card",{"variant":[1],"variantStyle":[1025,"variant-style"],"classCollection":[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],"classCollection":[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],"classCollection":[32]}]]],["mg-item-more.cjs",[[1,"mg-item-more",{"icon":[16],"slotlabel":[16],"size":[1],"parentMenu":[32]}]]]], options);
+  return index.bootstrapLazy([["mg-action-more_32.cjs",[[1,"mg-input-checkbox",{"value":[1040],"type":[1025],"identifier":[1],"name":[1],"label":[1],"labelOnTop":[4,"label-on-top"],"labelHide":[4,"label-hide"],"inputVerticalList":[4,"input-vertical-list"],"required":[4],"readonly":[4],"displaySelectedValues":[4,"display-selected-values"],"disabled":[4],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"checkboxItems":[32],"displaySearchInput":[32],"searchValue":[32],"searchResults":[32],"displayError":[64]}],[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"],"titleEditable":[1028,"title-editable"],"titlePosition":[1,"title-position"],"expanded":[1028],"expandToggleDisplay":[1,"expand-toggle-display"],"expandToggleDisabled":[4,"expand-toggle-disabled"],"classCollection":[32],"isEditing":[32],"updatedPanelTitle":[32]}],[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],"classCollection":[32],"errorMessage":[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],"classCollection":[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],"classCollection":[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],"classCollection":[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],"classCollection":[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"],"classCollection":[32],"options":[32],"checked":[32]}],[1,"mg-message",{"identifier":[1],"delay":[2],"variant":[1],"closeButton":[1028,"close-button"],"hide":[1028],"classCollection":[32],"hasActions":[32]}],[1,"mg-modal",{"identifier":[1],"modalTitle":[1,"modal-title"],"closeButton":[4,"close-button"],"hide":[1028],"hasActions":[32],"hasContent":[32],"classCollection":[32]},[[8,"keydown","handleKeyDown"]]],[1,"mg-tabs",{"identifier":[1],"label":[1],"size":[1],"items":[16],"activeTab":[1538,"active-tab"],"tabs":[32],"classCollection":[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],"classCollection":[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],"classCollection":[32]}],[2,"mg-input-checkbox-paginated",{"readonly":[4],"disabled":[4],"name":[1],"checkboxes":[16],"sectionKind":[1,"section-kind"],"messages":[16],"titleKind":[32],"currentPage":[32],"expanded":[32]}],[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-pagination",{"identifier":[1],"label":[1025],"hideNavigationLabels":[4,"hide-navigation-labels"],"hidePageCount":[4,"hide-page-count"],"totalPages":[2,"total-pages"],"currentPage":[1538,"current-page"]}],[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],"classCollection":[32],"errorMessage":[32],"setFocus":[64],"displayError":[64]}],[1,"mg-menu",{"label":[1],"direction":[513],"itemmore":[16],"size":[1],"isChildMenu":[32]}],[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":[520,"mg-width"],"tooltip":[1],"helpText":[1,"help-text"],"valid":[1028],"invalid":[1028],"classCollection":[32],"errorMessage":[32],"options":[32],"valueExist":[32],"readonlyValue":[32],"displayError":[64]}],[1,"mg-popover",{"identifier":[1],"placement":[1],"arrowHide":[4,"arrow-hide"],"closeButton":[4,"close-button"],"display":[1028],"disabled":[4],"classCollection":[32]}],[1,"mg-badge",{"value":[8],"label":[1],"variant":[1],"outline":[4],"classCollection":[32]}],[2,"mg-character-left",{"identifier":[1],"characters":[1],"maxlength":[2]}],[1,"mg-card",{"variant":[1],"variantStyle":[1025,"variant-style"],"classCollection":[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],"classCollection":[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],"classCollection":[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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-03d2557d.js');
-const mgMenu_conf = require('./mg-menu.conf-857748e1.js');
+const index = require('./index-fede8ee2.js');
+const mgMenu_conf = require('./mg-menu.conf-f9d0ddec.js');
 
 /**
  * MgItemMore type guard

package/dist/cjs/{mg-menu.conf-857748e1.js → mg-menu.conf-f9d0ddec.js}

@@ -129,12 +129,18 @@ const input = {
 		results: "resultats",
 		searchResults: "List de resultat(s) de la recherche.",
 		noResult: "Aucun resultat.",
-		checkedItem: "Sélectionné",
-		checkedItems: "Sélectionnés",
-		notCheckedItem: "Non sélectionné",
-		notCheckedItems: "Non sélectionnés",
-		unselectAll: "Tout désélectionner",
-		selectAll: "Tout sélectionner"
+		sections: {
+			selected: {
+				title: "Sélectionné",
+				titlePlurial: "Sélectionnés",
+				action: "Tout désélectionner"
+			},
+			notSelected: {
+				title: "Non sélectionné",
+				titlePlurial: "Non sélectionnés",
+				action: "Tout sélectionner"
+			}
+		}
 	}
 };
 const form = {

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

@@ -1,8 +1,7 @@
-import { h } from '@stencil/core';
 import { sizes, variants, variantStyles } from './mg-icon.conf';
 import { ClassList } from '../../../utils/components.utils';
 import iconList from '@mgdis/img/dist/icons/index.json';
-import sprite from '@mgdis/img/dist/icons/sprite.svg';
+import { icons } from '../../../../assets/icons';
 export class MgIcon {
   constructor() {
     /**
@@ -13,6 +12,18 @@ export class MgIcon {
       if (this.variantStyle === undefined)
         this.variantStyle = 'background';
     };
+    /**
+     * Render icon in shadowroot
+     * @param icon - icon to render
+     */
+    this.renderIcon = icon => {
+      this.element.shadowRoot.innerHTML = icons[icon];
+      this.svg = this.element.shadowRoot.querySelector('svg');
+      // update svg attributes
+      this.svg.setAttribute('aria-hidden', 'true');
+      this.svg.setAttribute('focusable', 'false');
+      this.svg.setAttribute('class', this.classCollection.join());
+    };
     this.icon = undefined;
     this.size = 'regular';
     this.variant = undefined;
@@ -27,6 +38,7 @@ export class MgIcon {
       if (oldValue !== undefined)
         this.classCollection.delete(`mg-icon--${oldValue}`);
       this.classCollection.add(`mg-icon--${newValue}`);
+      this.renderIcon(newValue);
     }
   }
   validateSize(newValue, oldValue) {
@@ -80,13 +92,14 @@ export class MgIcon {
     this.validateVariant(this.variant);
     this.validateVariantStyle(this.variantStyle);
     this.handleSpin(this.spin);
+    // render icon
+    this.renderIcon(this.icon);
   }
   /**
-   * Render component
-   * @returns HTML Element
+   * update html when component trigger changes
    */
-  render() {
-    return (h("svg", { class: this.classCollection.join(), "aria-hidden": "true", focusable: "false", viewBox: "0 0 16 16" }, h("use", { xlinkHref: `${sprite}#${this.icon}` })));
+  componentWillUpdate() {
+    this.svg.setAttribute('class', this.classCollection.join());
   }
   static get is() { return "mg-icon"; }
   static get encapsulation() { return "shadow"; }
@@ -211,6 +224,7 @@ export class MgIcon {
       "classCollection": {}
     };
   }
+  static get elementRef() { return "element"; }
   static get watchers() {
     return [{
         "propName": "icon",

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

@@ -1,9 +1,6 @@
 import { h } from '@stencil/core';
 export class MgInputTitle {
   constructor() {
-    this.getTagName = () => {
-      this.tagName = this.isLegend ? 'legend' : 'label';
-    };
     this.identifier = undefined;
     this.required = undefined;
     this.isLegend = false;
@@ -14,6 +11,9 @@ export class MgInputTitle {
       throw new Error('<mg-input-title> prop "identifier" is required.');
     }
   }
+  validateIsLegend(newValue) {
+    this.tagName = newValue ? 'legend' : 'label';
+  }
   /*************
    * Lifecycle *
    *************/
@@ -22,7 +22,7 @@ export class MgInputTitle {
    */
   componentWillLoad() {
     this.validateIdentifier(this.identifier);
-    this.getTagName();
+    this.validateIsLegend(this.isLegend);
   }
   /**
    * Render
@@ -110,6 +110,9 @@ export class MgInputTitle {
     return [{
         "propName": "identifier",
         "methodName": "validateIdentifier"
+      }, {
+        "propName": "isLegend",
+        "methodName": "validateIsLegend"
       }];
   }
 }

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

@@ -23,7 +23,7 @@ export class MgInputCheckboxPaginated {
      * Toogle items button handler
      */
     this.handleToggleClick = () => {
-      this.itemsExpanded = !this.itemsExpanded;
+      this.expanded = !this.expanded;
     };
     /**
      * Method to get a array range
@@ -53,7 +53,7 @@ export class MgInputCheckboxPaginated {
     this.messages = undefined;
     this.titleKind = undefined;
     this.currentPage = 1;
-    this.itemsExpanded = true;
+    this.expanded = true;
   }
   validateCheckboxes(newValue, oldValue) {
     // after each array.length update we reset pagination
@@ -97,7 +97,7 @@ export class MgInputCheckboxPaginated {
     const [checkboxItemsFromIndex, checkboxItemsToIndex] = this.getFromToIndexes();
     const itemsContainerId = `items-${this.sectionKind}-container`;
     const getText = (checkboxes) => h("em", null, `${this.messages[checkboxes.length > 1 ? 'titlePlurial' : 'title']} (${checkboxes.length})`);
-    return (h(Host, { hidden: this.checkboxes.length < 1 }, h("div", { class: "mg-input__input-checkbox-multi-section-header" }, this.titleKind === SectionTitleKind.BUTTON ? (h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.itemsExpanded.toString() }, h("mg-icon", { icon: this.itemsExpanded ? 'chevron-up' : 'chevron-down', size: "small" }), h("span", { class: "mg-input__input-checkbox-multi-text" }, getText(this.checkboxes)))) : (h("p", { class: "mg-input__input-checkbox-multi-title" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.itemsExpanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (h("mg-button", { variant: "link", onClick: this.massActionHandler }, this.messages.action)), this.getPageCount(this.checkboxes) > 1 && (h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage > 1 ? this.currentPage : 1, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { hidden: !this.itemsExpanded, id: itemsContainerId, class: "mg-input__input-checkbox-multi-section-content" }, h(MgInputCheckboxList, { checkboxes: this.getArrayRange(this.checkboxes, checkboxItemsFromIndex, checkboxItemsToIndex), inputVerticalList: true, type: 'multi', displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, readonly: this.readonly, disabled: this.disabled, name: this.name }))));
+    return (h(Host, { hidden: this.checkboxes.length < 1 }, h("div", { class: "mg-input__input-checkbox-multi-section-header" }, this.titleKind === SectionTitleKind.BUTTON ? (h("mg-button", { variant: "flat", onClick: this.handleToggleClick, "aria-controls": itemsContainerId, "aria-expanded": this.expanded.toString() }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: "small" }), h("span", { class: "mg-input__input-checkbox-multi-text" }, getText(this.checkboxes)))) : (h("p", { class: "mg-input__input-checkbox-multi-title" }, getText(this.checkboxes))), ((this.sectionKind === SectionKind.SELECTED && this.expanded) || this.sectionKind === SectionKind.NOT_SELECTED) && (h("mg-button", { variant: "link", onClick: this.massActionHandler }, this.messages.action)), this.expanded && this.getPageCount(this.checkboxes) > 1 && (h("mg-pagination", { key: "search-pagination", totalPages: this.getPageCount(this.checkboxes), currentPage: this.currentPage > 1 ? this.currentPage : 1, "onCurrent-page-change": this.handleCurrentPageChange, hideNavigationLabels: true, hidePageCount: true, identifier: `input-checkbox-pagination-${this.sectionKind}` }))), h("div", { hidden: !this.expanded, id: itemsContainerId, class: "mg-input__input-checkbox-multi-section-content" }, h(MgInputCheckboxList, { checkboxes: this.getArrayRange(this.checkboxes, checkboxItemsFromIndex, checkboxItemsToIndex), inputVerticalList: true, type: 'multi', displaySearchInput: true, messages: this.messages, id: `items-${this.sectionKind}`, readonly: this.readonly, disabled: this.disabled, name: this.name }))));
   }
   static get is() { return "mg-input-checkbox-paginated"; }
   static get encapsulation() { return "scoped"; }
@@ -222,7 +222,7 @@ export class MgInputCheckboxPaginated {
     return {
       "titleKind": {},
       "currentPage": {},
-      "itemsExpanded": {}
+      "expanded": {}
     };
   }
   static get events() {

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

@@ -258,6 +258,7 @@
   padding-bottom: 0;
   padding-right: 1rem;
 }
-.mg-input.mg-input--select:not(.mg-input--label-on-top) .mg-input__box {
+
+:host(:not([mg-width])) .mg-input--select:not(.mg-input--label-on-top) .mg-input__box {
   max-width: unset;
 }

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

@@ -510,7 +510,7 @@ export class MgInputSelect {
           "text": "Define input width"
         },
         "attribute": "mg-width",
-        "reflect": false
+        "reflect": true
       },
       "tooltip": {
         "type": "string",

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

@@ -39,6 +39,9 @@
   gap: 0.6rem;
   min-height: calc(var(--font-size) * var(--line-height));
 }
+.mg-details__toggle-icon.mg-details__toggle-icon--reverse {
+  transform: rotate(180deg);
+}
 .mg-details__details {
   margin-top: var(--mg-details-spacing);
 }

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: this.expanded ? 'chevron-up' : 'chevron-down', size: "small" }), 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

@@ -126,7 +126,7 @@ export class MgForm {
       // submit buttons should trigger form submition;
       if (['submit', null].includes(mgButton.getAttribute('type'))) {
         mgButton.addEventListener('click', () => {
-          this.form.dispatchEvent(new SubmitEvent('submit', { bubbles: true }));
+          this.form.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
         });
       }
     });

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

@@ -5,6 +5,10 @@
   --mg-card-overflow: hidden;
 }
 
+:host([hide]) {
+  display: none;
+}
+
 .mg-message {
   display: inline-block;
   min-height: var(--default-size);

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

@@ -3,40 +3,60 @@ import { createID, ClassList, focusableElements } from '../../../utils/component
 import { initLocales } from '../../../locales';
 export class MgModal {
   constructor() {
+    /************
+     * Internal *
+     ************/
+    // Modal focusable elements
+    this.modalFocusableElements = [];
     // Classes
     this.classHide = 'mg-modal--hide';
     // IDs
-    this.closeButtonId = '';
     this.titleId = '';
+    /**
+     * Handle last focusable element
+     * @param event - keyboard event
+     */
+    this.handleLastFocusableElement = (event) => {
+      if (event.key === 'Tab' && !event.shiftKey) {
+        event.preventDefault();
+        this.modalFocusableElements[0].focus();
+      }
+    };
+    /**
+     * Handle first focusable element
+     * @param event - keyboard event
+     */
+    this.handleFirstFocusableElement = (event) => {
+      if (event.key === 'Tab' && event.shiftKey) {
+        event.preventDefault();
+        this.getLastFocusableElement().focus();
+      }
+    };
+    /**
+     * Get last focusablmeElement
+     * @returns last modal focusable element
+     */
+    this.getLastFocusableElement = () => (this.modalFocusableElements.length > 0 ? this.modalFocusableElements[this.modalFocusableElements.length - 1] : null);
+    /**
+     * Method to manage focus on modal focusable elements
+     */
     this.setFocus = () => {
       // Get all focusable elements
-      this.modalFocusableElements = Array.from(this.element.querySelectorAll(focusableElements)).reduce((acc, focusableElement) => {
-        acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) || focusableElement : focusableElement);
-        return acc;
-      }, []);
-      // When close button is enabled it's the first focusable element.
-      if (this.closeButton) {
-        this.modalFocusableElements.unshift(this.element.shadowRoot.querySelector(`.mg-modal__close-button mg-button`));
-      }
-      // It at least one
-      if (this.modalFocusableElements.length >= 1) {
-        // Set focus on first element
-        this.modalFocusableElements[0].focus();
+      const allFocusableElements = Array.from(this.element.querySelectorAll(focusableElements));
+      // If at least one
+      if (allFocusableElements.length > 0) {
+        this.modalFocusableElements = allFocusableElements.reduce((acc, focusableElement) => {
+          acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) || focusableElement : focusableElement);
+          return acc;
+        }, []);
+        // When close button is enabled it's the first focusable element.
+        if (this.closeButton && this.closeButtonElement !== undefined) {
+          this.modalFocusableElements.unshift(this.closeButtonElement);
+        }
         // Add event listener on last element
-        const lastFocusableElement = this.modalFocusableElements[this.modalFocusableElements.length - 1];
-        lastFocusableElement.addEventListener('keydown', event => {
-          if (event.key === 'Tab' && !event.shiftKey) {
-            event.preventDefault();
-            this.modalFocusableElements[0].focus();
-          }
-        });
+        this.getLastFocusableElement().addEventListener('keydown', this.handleLastFocusableElement);
         // Add event listener on first element (case shift + tab)
-        this.modalFocusableElements[0].addEventListener('keydown', event => {
-          if (event.key === 'Tab' && event.shiftKey) {
-            event.preventDefault();
-            lastFocusableElement.focus();
-          }
-        });
+        this.modalFocusableElements[0].addEventListener('keydown', this.handleFirstFocusableElement);
       }
     };
     /*************
@@ -62,15 +82,21 @@ export class MgModal {
     }
   }
   validateHide(newValue) {
+    var _a;
     if (newValue) {
       this.componentHide.emit();
       this.classCollection.add(this.classHide);
       document.body.style.overflow = this.bodyOverflow;
+      // reset focus handlers
+      (_a = this.getLastFocusableElement()) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', this.handleLastFocusableElement);
+      if (this.modalFocusableElements.length > 0)
+        this.modalFocusableElements[0].removeEventListener('keydown', this.handleFirstFocusableElement);
     }
     else {
       this.componentShow.emit();
       this.classCollection.delete(this.classHide);
       document.body.style.overflow = 'hidden';
+      this.setFocus();
     }
   }
   /**
@@ -97,9 +123,6 @@ export class MgModal {
     // Validate
     this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
     this.hasContent = this.element.querySelector('[slot="content"]') !== null;
-    if (this.closeButton) {
-      this.closeButtonId = `${this.identifier}-close-button`;
-    }
     this.titleId = `${this.identifier}-title`;
     this.validateModalTitle(this.modalTitle);
     this.validateHide(this.hide);
@@ -109,21 +132,26 @@ export class MgModal {
    */
   componentDidLoad() {
     new MutationObserver(mutationList => {
-      if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && mutation.target.ariaHidden === null)) {
-        this.setFocus();
+      // as mutation.target is null on chrome and '' or undefined on firefox we test both with the 'aria-hidden' attribute mutation
+      if (mutationList.some(mutation => mutation.attributeName === 'aria-hidden' && ['', null, undefined].includes(mutation.target.ariaHidden))) {
+        // Set focus on first element
+        this.modalFocusableElements[0].focus();
       }
     }).observe(this.element.shadowRoot.getElementById(this.identifier), { attributes: true });
-    // Set focus if display on load
-    if (!this.hide) {
-      this.setFocus();
-    }
   }
   /**
    * Render
    * @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.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" })))))));
+    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 => {
+        if (el !== null) {
+          // store closeButton Element
+          this.closeButtonElement = el;
+          // add close button element to modalFocusableElements when it is render
+          this.modalFocusableElements.unshift(this.closeButtonElement);
+        }
+      } }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" })))))));
   }
   static get is() { return "mg-modal"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { createID } from '../../../utils/components.utils';
 import { NavigationAction } from './mg-pagination.conf';
 import { initLocales } from './../../../locales';
@@ -98,7 +98,7 @@ export class MgPagination {
     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", 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': true, 'mg-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (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", { class: { 'sr-only': this.hidePageCount } }, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)));
+    return (h(Host, { hidden: this.totalPages < 2 }, h("nav", { "aria-label": this.label, id: this.identifier, class: { 'mg-pagination': true, 'mg-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (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", { class: { 'sr-only': this.hidePageCount } }, "/ ", 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"; }
   static get encapsulation() { return "shadow"; }

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

@@ -41,6 +41,9 @@
   --font-size: 1.4rem;
   --mg-button-font-weight: 600;
 }
+.mg-panel__collapse-button-icon.mg-panel__collapse-button-icon--reverse {
+  transform: rotate(180deg);
+}
 .mg-panel__content {
   padding: var(--mg-panel-content-padding);
 }

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

@@ -60,7 +60,7 @@ export class MgPanel {
      * Render collapse button
      * @returns collpase button
      */
-    this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, "aria-expanded": this.expanded !== undefined && this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.panelTitle }, h("span", { class: "mg-panel__collapse-button-content" }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), !this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle)));
+    this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, "aria-expanded": this.expanded !== undefined && this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.panelTitle }, h("span", { class: "mg-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: { 'mg-panel__collapse-button-icon': true, 'mg-panel__collapse-button-icon--reverse': !this.expanded } }), !this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle)));
     /**
      * Render edit button
      * @returns edit Button

package/dist/collection/locales/fr/messages.json

@@ -29,12 +29,18 @@
       "results": "resultats",
       "searchResults": "List de resultat(s) de la recherche.",
       "noResult": "Aucun resultat.",
-      "checkedItem": "Sélectionné",
-      "checkedItems": "Sélectionnés",
-      "notCheckedItem": "Non sélectionné",
-      "notCheckedItems": "Non sélectionnés",
-      "unselectAll": "Tout désélectionner",
-      "selectAll": "Tout sélectionner"
+      "sections": {
+        "selected": {
+          "title": "Sélectionné",
+          "titlePlurial": "Sélectionnés",
+          "action": "Tout désélectionner"
+        },
+        "notSelected": {
+          "title": "Non sélectionné",
+          "titlePlurial": "Non sélectionnés",
+          "action": "Tout sélectionner"
+        }
+      }
     }
   },
   "form": {

package/dist/collection/styles/global.scss

@@ -30,13 +30,6 @@
 // Utilities
 @import './utilities.scss';
 
-/**
- * Components style
- * molecules
- */
-
-@import './components.scss';
-
 /* Atoms */
 
 // <mg-badge>

package/dist/collection/utils/unit.test.utils.js

@@ -1,3 +1,4 @@
+/* eslint-disable jsdoc/require-jsdoc */
 import { MockCustomEvent } from '@stencil/core/mock-doc';
 /**
  * Clone Deep function
@@ -23,6 +24,32 @@ export const setupMutationObserverMock = ({ disconnect, observe, takeRecords })
   });
   return MockMutationObserver;
 };
+/**
+ * Utility function that mocks the `ResizeObserver` API. Recommended to execute inside `beforeEach`.
+ * @param resizeObserverMock - Parameter that is sent to the `Object.defineProperty`
+ * overwrite method. `jest.fn()` mock functions can be passed here if the goal is to not only
+ * mock the resize observer, but its methods.
+ * You can manually fire an intersection entry:
+ * @param resizeObserverMock - configuration object
+ * @returns Mocked ResizeObserver
+ * @example
+ * ```
+ * let fireRo;
+ * setupResizeObserverMock({
+ *   observe: function () {
+ *     fireRo = this.cb;
+ *   },
+ * });
+ * ...
+ * fireRo([{
+ *  borderBoxSize: ResizeObserverSize[],
+ *  contentBoxSize: ResizeObserverSize[],
+ *  contentRect: DOMRectReadOnly,
+ *  devicePixelContentBoxSize: ResizeObserverSize[],
+ *  target: yourMockElemenet
+ * }]);;
+ * ```
+ */
 export const setupResizeObserverMock = ({ disconnect, observe }) => {
   class MockResizeObserver {
     constructor(fn) {

package/dist/components/index2.js

@@ -127,12 +127,18 @@ const input = {
 		results: "resultats",
 		searchResults: "List de resultat(s) de la recherche.",
 		noResult: "Aucun resultat.",
-		checkedItem: "Sélectionné",
-		checkedItems: "Sélectionnés",
-		notCheckedItem: "Non sélectionné",
-		notCheckedItems: "Non sélectionnés",
-		unselectAll: "Tout désélectionner",
-		selectAll: "Tout sélectionner"
+		sections: {
+			selected: {
+				title: "Sélectionné",
+				titlePlurial: "Sélectionnés",
+				action: "Tout désélectionner"
+			},
+			notSelected: {
+				title: "Non sélectionné",
+				titlePlurial: "Non sélectionnés",
+				action: "Tout sélectionner"
+			}
+		}
 	}
 };
 const form = {