@mgdis/mg-components 5.13.0 → 5.13.1

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

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/mg-modal/mg-modal.js

@@ -8,6 +8,9 @@ export class MgModal {
     // IDs
     this.closeButtonId = '';
     this.titleId = '';
+    /**
+     * 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) => {

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/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 = {