@mgdis/mg-components 5.16.0 → 5.18.0

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

@@ -1,6 +1,6 @@
-import { h } from '@stencil/core';
-import { createID, ClassList } from '../../../utils/components.utils';
-import { initLocales } from '../../../locales';
+import { h } from "@stencil/core";
+import { createID, ClassList } from "../../../utils/components.utils";
+import { initLocales } from "../../../locales";
 export class MgForm {
   constructor() {
     // Classes
@@ -92,7 +92,7 @@ export class MgForm {
     this.setRequiredMessage();
   }
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   async displayError() {
     if (!this.readonly) {
@@ -324,13 +324,14 @@ export class MgForm {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Public method to display errors",
+          "text": "Display input error if it exists.",
           "tags": []
         }
       }
@@ -347,3 +348,4 @@ export class MgForm {
       }];
   }
 }
+//# sourceMappingURL=mg-form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-form.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-form/mg-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { createID, ClassList } from '../../../utils/components.utils';\nimport { initLocales } from '../../../locales';\nimport { HTMLMgInputsElement } from '../inputs/MgInput.conf';\n\n@Component({\n  tag: 'mg-form',\n  styleUrl: 'mg-form.scss',\n  shadow: true,\n})\nexport class MgForm {\n  /************\n   * Internal *\n   ************/\n\n  private mgInputs: HTMLMgInputsElement[];\n  private mgButtons: HTMLMgButtonElement[];\n\n  // Classes\n  private readonly classAllRequired = 'mg-form--all-required';\n\n  // HTML selector\n  private form: HTMLFormElement;\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgFormElement;\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   * If not set, it will be created.\n   */\n  @Prop() identifier: string = createID('mg-form');\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Define if form is readonly\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Define if form is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('readonly')\n  @Watch('disabled')\n  handleAttributeChange(): void {\n    this.setMgInputs();\n    this.setRequiredMessage();\n  }\n\n  /**\n   * Define form valid state\n   */\n  @Prop({ mutable: true }) valid: boolean;\n\n  /**\n   * Define form invalid state\n   */\n  @Prop({ mutable: true }) invalid: boolean;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-form']);\n\n  /**\n   * Required message\n   */\n  @State() requiredMessage: string;\n\n  /**\n   * Emitted event on form validity check\n   * Tells if form is valid or not\n   */\n  @Event({ eventName: 'form-valid' }) formValid: EventEmitter<boolean>;\n\n  /**\n   * Emitted event on form submit\n   */\n  @Event({ eventName: 'form-submit' }) formSubmit: EventEmitter<boolean>;\n\n  /**\n   * Display input error if it exists.\n   */\n  @Method()\n  async displayError(): Promise<void> {\n    if (!this.readonly) {\n      this.mgInputs.forEach(input => {\n        input.displayError && input.displayError();\n      });\n      this.checkValidity();\n    }\n  }\n\n  /**\n   * Define required message based on mg-inputs required elements\n   */\n  private setRequiredMessage = (): void => {\n    // init required message\n    this.requiredMessage = null;\n    this.classCollection.delete(this.classAllRequired);\n    // If the form is disabled or readonly none of them are required\n    // Check if all fields are not editable (readonly or disabled)\n    const isEditable = input => !(input.disabled || input.readonly);\n    const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';\n    if (!this.disabled && !this.readonly && this.mgInputs.some(input => isEditable(input) && !isMgInputToggle(input))) {\n      // Get editable inputs\n      const editableInputs: HTMLMgInputsElement[] = this.mgInputs.filter(isEditable);\n      // Get required inputs\n      // mg-input-toggle can not be required\n      const requiredInputs: HTMLMgInputsElement[] = editableInputs.filter(input => !isMgInputToggle(input) && input.required);\n      // All inputs are required\n      if (\n        [requiredInputs.length, editableInputs.length].every(length => length === 1) ||\n        (requiredInputs.length > 1 && requiredInputs.length === editableInputs.filter(input => !isMgInputToggle(input)).length)\n      ) {\n        this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');\n        this.classCollection.add(this.classAllRequired);\n      }\n      // Some fields are required\n      else if (requiredInputs.length > 0) {\n        this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');\n      }\n    }\n  };\n\n  /**\n   * Returns a required message based on the count of required inputs.\n   * @param requiredInputs - An array of required input elements.\n   * @param keySingle - The key for the singular message format.\n   * @param keyPlural - The key for the plural message format.\n   * @returns The appropriate required message based on the count of required inputs.\n   */\n  private getRequiredMessageBasedOnCount = (requiredInputs: HTMLMgInputsElement[], keySingle: string, keyPlural: string) =>\n    this.messages.form[requiredInputs.length === 1 ? keySingle : keyPlural];\n\n  /**\n   * Check if form is valid\n   */\n  private checkValidity = (): void => {\n    // Update required on input event\n    this.setRequiredMessage();\n\n    this.valid = !this.mgInputs.some(input => input.invalid);\n    this.invalid = !this.valid;\n    // We need to send valid event if it is the same value\n    this.formValid.emit(this.valid);\n  };\n\n  /**\n   * Handle Form Submit\n   * @param event - submit event\n   */\n  private handleFormSubmit = (event: SubmitEvent): void => {\n    event.preventDefault();\n    this.formSubmit.emit();\n  };\n\n  /**\n   * Set mgInputs\n   */\n  private setMgInputs = (): void => {\n    // Get slotted mgInputs\n    this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node: Node) => node.nodeName.startsWith('MG-INPUT-')) as HTMLMgInputsElement[];\n    // Set inputs readonly or disabled based on form configuration\n    // Othewise listen to events\n    this.mgInputs.forEach(input => {\n      if (this.readonly) input.readonly = true;\n      else if (this.disabled) input.disabled = true;\n      else input.addEventListener('input-valid', this.checkValidity);\n    });\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n\n    // Get slotted mgButtons\n    this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));\n\n    // Set button form identifier\n    this.mgButtons.forEach(mgButton => {\n      mgButton.setAttribute('form', this.identifier);\n    });\n\n    // Set mgInputs\n    this.setMgInputs();\n\n    // Define required message\n    this.setRequiredMessage();\n\n    // Check validity when slotted mgInputs are ready\n    Promise.all(\n      this.mgInputs.map(async input => {\n        try {\n          await input.componentOnReady();\n        } catch {} // prevent error with VueJS first render\n      }),\n    ).then(() => {\n      this.checkValidity();\n    });\n  }\n\n  /**\n   * Add slot listeners\n   */\n  componentDidLoad(): void {\n    this.mgButtons.forEach(mgButton => {\n      // submit buttons should trigger form submition;\n      if (['submit', null].includes(mgButton.getAttribute('type'))) {\n        mgButton.addEventListener('click', () => {\n          this.form.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));\n        });\n      }\n    });\n    // Update mgInputs when mgForm content change\n    new MutationObserver(() => {\n      this.setMgInputs();\n    }).observe(this.element, { childList: true });\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <form class={this.classCollection.join()} id={this.identifier} name={this.name} ref={(el: HTMLFormElement) => (this.form = el)} onSubmit={this.handleFormSubmit}>\n        {this.requiredMessage && <p innerHTML={this.requiredMessage}></p>}\n        <slot></slot>\n        {!this.readonly && !this.disabled && <slot name=\"actions\"></slot>}\n      </form>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,169 @@
+import { createPage } from "../../../../utils/stencil.e2e.test.utils";
+const inputs = `<mg-input-checkbox identifier="mg-input-checkbox" label="mg-input-checkbox label"></mg-input-checkbox>
+<mg-input-date identifier="mg-input-date" label="mg-input-date label"></mg-input-date>
+<mg-input-numeric identifier="mg-input-numeric" label="mg-input-numeric label"></mg-input-numeric>
+<mg-input-password identifier="mg-input-password" label="mg-input-password label"></mg-input-password>
+<mg-input-radio identifier="mg-input-radio" label="mg-input-radio label"></mg-input-radio>
+<mg-input-select identifier="mg-input-select" label="mg-input-select label"></mg-input-select>
+<mg-input-text identifier="mg-input-text" label="mg-input-text label"></mg-input-text>
+<mg-input-textarea identifier="mg-input-textarea" label="mg-input-textarea label"></mg-input-textarea>
+<mg-input-toggle identifier="mg-input-toggle" label="mg-input-toggle label">
+  <span slot="item-1">non</span>
+  <span slot="item-2">oui</span>
+</mg-input-toggle>`;
+const inputsScript = `<script>
+  const mgInputCheckbox = document.querySelector('mg-input-checkbox');
+  const mgInputDate = document.querySelector('mg-input-date');
+  const mgInputNumeric = document.querySelector('mg-input-numeric');
+  const mgInputPassword = document.querySelector('mg-input-password');
+  const mgInputRadio = document.querySelector('mg-input-radio');
+  const mgInputSelect = document.querySelector('mg-input-select');
+  const mgInputText = document.querySelector('mg-input-text');
+  const mgInputTextarea = document.querySelector('mg-input-textarea');
+  const mgInputToggle = document.querySelector('mg-input-toggle');
+
+  mgInputCheckbox.value = [
+    { title: 'oui', value: false },
+    { title: 'non', value: false },
+  ];
+  mgInputRadio.items = ['blu', 'bli', 'bla', 'blo'];
+  mgInputSelect.items = ['blu', 'bli', 'bla', 'blo'];
+  mgInputToggle.items = [
+    { title: 'non', value: false },
+    { title: 'oui', value: true },
+  ];
+</script>`;
+const inputsScriptSetValues = `<script>
+  mgInputCheckbox.value = [
+    { title: 'oui', value: true },
+    { title: 'non', value: false },
+  ];
+  mgInputDate.value = '2022-04-15';
+  mgInputNumeric.value = 1234567890;
+  mgInputPassword.value = 'p455w0rD';
+  mgInputRadio.value = mgInputRadio.items[0];
+  mgInputSelect.value = mgInputSelect.items[0];
+  mgInputText.value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
+  mgInputTextarea.value =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+  mgInputToggle.value = mgInputToggle.items[1].value;
+</script>`;
+const inputsScriptRequiredAll = `<script>
+  mgInputCheckbox.required = true;
+  mgInputDate.required = true;
+  mgInputNumeric.required = true;
+  mgInputPassword.required = true;
+  mgInputRadio.required = true;
+  mgInputSelect.required = true;
+  mgInputText.required = true;
+  mgInputTextarea.required = true;
+</script>`;
+const inputsScriptRequiredSome = `<script>
+  mgInputCheckbox.required = true;
+  mgInputNumeric.required = true;
+  mgInputRadio.required = true;
+  mgInputText.required = true;
+</script>`;
+const inputsScriptRequiredSingle = `<script>
+  mgInputCheckbox.required = true;
+</script>`;
+const inputsScriptReadonlyAll = `<script>
+  mgInputCheckbox.readonly = true;
+  mgInputDate.readonly = true;
+  mgInputNumeric.readonly = true;
+  mgInputPassword.readonly = true;
+  mgInputRadio.readonly = true;
+  mgInputSelect.readonly = true;
+  mgInputText.readonly = true;
+  mgInputTextarea.readonly = true;
+  mgInputToggle.readonly = true;
+</script>`;
+const inputsScriptDisabledAll = `<script>
+  mgInputCheckbox.disabled = true;
+  mgInputDate.disabled = true;
+  mgInputNumeric.disabled = true;
+  mgInputPassword.disabled = true;
+  mgInputRadio.disabled = true;
+  mgInputSelect.disabled = true;
+  mgInputText.disabled = true;
+  mgInputTextarea.disabled = true;
+  mgInputToggle.disabled = true;
+</script>`;
+describe('mg-form', () => {
+  describe.each([`<mg-form>`, `<mg-form disabled>`, `<mg-form readonly>`])('params %s', startTag => {
+    test('Should render', async () => {
+      const page = await createPage(`${startTag}
+        ${inputs}
+        </mg-form>
+        ${inputsScript}
+        ${inputsScriptSetValues}`);
+      const element = await page.find('mg-form');
+      expect(element).toHaveClass('hydrated');
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+    });
+    test('Should render with custom style', async () => {
+      const page = await createPage(`${startTag}
+        ${inputs}
+        </mg-form>
+        ${inputsScript}
+        ${inputsScriptSetValues}
+        ${inputsScriptRequiredSome}`);
+      await page.$eval('mg-form', el => {
+        el.setAttribute('style', '--mg-form-inputs-title-width: 25rem;');
+      });
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+    });
+  });
+  describe.each(['<mg-form>', '<mg-form lang="fr">'])('With different locale', startTag => {
+    describe.each([inputsScriptRequiredAll, inputsScriptRequiredSome, inputsScriptRequiredSingle])('Should render required and errors', inputsScriptRequired => {
+      test('Should render errors', async () => {
+        const page = await createPage(`${startTag}
+        ${inputs}
+        </mg-form>
+        ${inputsScript}
+        ${inputsScriptRequired}`);
+        const element = await page.find('mg-form');
+        expect(element).toHaveClass('hydrated');
+        const screenshot = await page.screenshot();
+        expect(screenshot).toMatchImageSnapshot();
+        await element.callMethod('displayError');
+        await page.waitForChanges();
+        const screenshotErrors = await page.screenshot();
+        expect(screenshotErrors).toMatchImageSnapshot();
+      });
+    });
+    test('Should render single required input in form', async () => {
+      const page = await createPage(`${startTag}
+        <mg-input-date identifier="mg-input-date" label="mg-input-date label"></mg-input-date>
+      </mg-form>
+      <script>
+        const mgInputDate = document.querySelector('mg-input-date');
+        mgInputDate.required = true;
+      </script>`);
+      const element = await page.find('mg-form');
+      expect(element).toHaveClass('hydrated');
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+      await element.callMethod('displayError');
+      await page.waitForChanges();
+      const screenshotErrors = await page.screenshot();
+      expect(screenshotErrors).toMatchImageSnapshot();
+    });
+  });
+  test.each(['readonly', 'disabled'])('Should not have required message when all inputs are required and %s', async (attribute) => {
+    const page = await createPage(`<mg-form>
+    ${inputs}
+    </mg-form>
+    ${inputsScript}
+    ${inputsScriptSetValues}
+    ${inputsScriptRequiredAll}
+    ${attribute === 'readonly' ? inputsScriptReadonlyAll : inputsScriptDisabledAll}`);
+    const element = await page.find('mg-form');
+    expect(element).toHaveClass('hydrated');
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+});
+//# sourceMappingURL=mg-form.e2e.js.map

package/dist/collection/components/molecules/mg-form/test/mg-form.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-form.e2e.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-form/test/mg-form.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { createPage } from '../../../../utils/stencil.e2e.test.utils';\n\nconst inputs = `<mg-input-checkbox identifier=\"mg-input-checkbox\" label=\"mg-input-checkbox label\"></mg-input-checkbox>\n<mg-input-date identifier=\"mg-input-date\" label=\"mg-input-date label\"></mg-input-date>\n<mg-input-numeric identifier=\"mg-input-numeric\" label=\"mg-input-numeric label\"></mg-input-numeric>\n<mg-input-password identifier=\"mg-input-password\" label=\"mg-input-password label\"></mg-input-password>\n<mg-input-radio identifier=\"mg-input-radio\" label=\"mg-input-radio label\"></mg-input-radio>\n<mg-input-select identifier=\"mg-input-select\" label=\"mg-input-select label\"></mg-input-select>\n<mg-input-text identifier=\"mg-input-text\" label=\"mg-input-text label\"></mg-input-text>\n<mg-input-textarea identifier=\"mg-input-textarea\" label=\"mg-input-textarea label\"></mg-input-textarea>\n<mg-input-toggle identifier=\"mg-input-toggle\" label=\"mg-input-toggle label\">\n  <span slot=\"item-1\">non</span>\n  <span slot=\"item-2\">oui</span>\n</mg-input-toggle>`;\n\nconst inputsScript = `<script>\n  const mgInputCheckbox = document.querySelector('mg-input-checkbox');\n  const mgInputDate = document.querySelector('mg-input-date');\n  const mgInputNumeric = document.querySelector('mg-input-numeric');\n  const mgInputPassword = document.querySelector('mg-input-password');\n  const mgInputRadio = document.querySelector('mg-input-radio');\n  const mgInputSelect = document.querySelector('mg-input-select');\n  const mgInputText = document.querySelector('mg-input-text');\n  const mgInputTextarea = document.querySelector('mg-input-textarea');\n  const mgInputToggle = document.querySelector('mg-input-toggle');\n\n  mgInputCheckbox.value = [\n    { title: 'oui', value: false },\n    { title: 'non', value: false },\n  ];\n  mgInputRadio.items = ['blu', 'bli', 'bla', 'blo'];\n  mgInputSelect.items = ['blu', 'bli', 'bla', 'blo'];\n  mgInputToggle.items = [\n    { title: 'non', value: false },\n    { title: 'oui', value: true },\n  ];\n</script>`;\n\nconst inputsScriptSetValues = `<script>\n  mgInputCheckbox.value = [\n    { title: 'oui', value: true },\n    { title: 'non', value: false },\n  ];\n  mgInputDate.value = '2022-04-15';\n  mgInputNumeric.value = 1234567890;\n  mgInputPassword.value = 'p455w0rD';\n  mgInputRadio.value = mgInputRadio.items[0];\n  mgInputSelect.value = mgInputSelect.items[0];\n  mgInputText.value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';\n  mgInputTextarea.value =\n    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';\n  mgInputToggle.value = mgInputToggle.items[1].value;\n</script>`;\n\nconst inputsScriptRequiredAll = `<script>\n  mgInputCheckbox.required = true;\n  mgInputDate.required = true;\n  mgInputNumeric.required = true;\n  mgInputPassword.required = true;\n  mgInputRadio.required = true;\n  mgInputSelect.required = true;\n  mgInputText.required = true;\n  mgInputTextarea.required = true;\n</script>`;\n\nconst inputsScriptRequiredSome = `<script>\n  mgInputCheckbox.required = true;\n  mgInputNumeric.required = true;\n  mgInputRadio.required = true;\n  mgInputText.required = true;\n</script>`;\n\nconst inputsScriptRequiredSingle = `<script>\n  mgInputCheckbox.required = true;\n</script>`;\n\nconst inputsScriptReadonlyAll = `<script>\n  mgInputCheckbox.readonly = true;\n  mgInputDate.readonly = true;\n  mgInputNumeric.readonly = true;\n  mgInputPassword.readonly = true;\n  mgInputRadio.readonly = true;\n  mgInputSelect.readonly = true;\n  mgInputText.readonly = true;\n  mgInputTextarea.readonly = true;\n  mgInputToggle.readonly = true;\n</script>`;\n\nconst inputsScriptDisabledAll = `<script>\n  mgInputCheckbox.disabled = true;\n  mgInputDate.disabled = true;\n  mgInputNumeric.disabled = true;\n  mgInputPassword.disabled = true;\n  mgInputRadio.disabled = true;\n  mgInputSelect.disabled = true;\n  mgInputText.disabled = true;\n  mgInputTextarea.disabled = true;\n  mgInputToggle.disabled = true;\n</script>`;\n\ndescribe('mg-form', () => {\n  describe.each([`<mg-form>`, `<mg-form disabled>`, `<mg-form readonly>`])('params %s', startTag => {\n    test('Should render', async () => {\n      const page = await createPage(`${startTag}\n        ${inputs}\n        </mg-form>\n        ${inputsScript}\n        ${inputsScriptSetValues}`);\n\n      const element = await page.find('mg-form');\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n\n    test('Should render with custom style', async () => {\n      const page = await createPage(`${startTag}\n        ${inputs}\n        </mg-form>\n        ${inputsScript}\n        ${inputsScriptSetValues}\n        ${inputsScriptRequiredSome}`);\n\n      await page.$eval('mg-form', el => {\n        el.setAttribute('style', '--mg-form-inputs-title-width: 25rem;');\n      });\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n  });\n\n  describe.each(['<mg-form>', '<mg-form lang=\"fr\">'])('With different locale', startTag => {\n    describe.each([inputsScriptRequiredAll, inputsScriptRequiredSome, inputsScriptRequiredSingle])('Should render required and errors', inputsScriptRequired => {\n      test('Should render errors', async () => {\n        const page = await createPage(`${startTag}\n        ${inputs}\n        </mg-form>\n        ${inputsScript}\n        ${inputsScriptRequired}`);\n\n        const element = await page.find('mg-form');\n        expect(element).toHaveClass('hydrated');\n\n        const screenshot = await page.screenshot();\n        expect(screenshot).toMatchImageSnapshot();\n\n        await element.callMethod('displayError');\n        await page.waitForChanges();\n\n        const screenshotErrors = await page.screenshot();\n        expect(screenshotErrors).toMatchImageSnapshot();\n      });\n    });\n    test('Should render single required input in form', async () => {\n      const page = await createPage(`${startTag}\n        <mg-input-date identifier=\"mg-input-date\" label=\"mg-input-date label\"></mg-input-date>\n      </mg-form>\n      <script>\n        const mgInputDate = document.querySelector('mg-input-date');\n        mgInputDate.required = true;\n      </script>`);\n      const element = await page.find('mg-form');\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n\n      await element.callMethod('displayError');\n      await page.waitForChanges();\n\n      const screenshotErrors = await page.screenshot();\n      expect(screenshotErrors).toMatchImageSnapshot();\n    });\n  });\n\n  test.each(['readonly', 'disabled'])('Should not have required message when all inputs are required and %s', async attribute => {\n    const page = await createPage(`<mg-form>\n    ${inputs}\n    </mg-form>\n    ${inputsScript}\n    ${inputsScriptSetValues}\n    ${inputsScriptRequiredAll}\n    ${attribute === 'readonly' ? inputsScriptReadonlyAll : inputsScriptDisabledAll}`);\n\n    const element = await page.find('mg-form');\n    expect(element).toHaveClass('hydrated');\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n});\n"]}

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

@@ -0,0 +1,277 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgForm } from "../mg-form";
+import { MgButton } from "../../../atoms/mg-button/mg-button";
+import { buttonTypes } from "../../../atoms/mg-button/mg-button.conf";
+import { MgInputCheckbox } from "../../inputs/mg-input-checkbox/mg-input-checkbox";
+import { MgInputDate } from "../../inputs/mg-input-date/mg-input-date";
+import { MgInputNumeric } from "../../inputs/mg-input-numeric/mg-input-numeric";
+import { MgInputPassword } from "../../inputs/mg-input-password/mg-input-password";
+import { MgInputRadio } from "../../inputs/mg-input-radio/mg-input-radio";
+import { MgInputSelect } from "../../inputs/mg-input-select/mg-input-select";
+import { MgInputText } from "../../inputs/mg-input-text/mg-input-text";
+import { MgInputTextarea } from "../../inputs/mg-input-textarea/mg-input-textarea";
+import { MgInputToggle } from "../../inputs/mg-input-toggle/mg-input-toggle";
+import { setupMutationObserverMock, setupSubmitEventMock } from "../../../../utils/unit.test.utils";
+const getPage = (args, content) => {
+  const page = newSpecPage({
+    components: [MgForm, MgInputCheckbox, MgInputDate, MgInputNumeric, MgInputPassword, MgInputRadio, MgInputSelect, MgInputText, MgInputTextarea, MgInputToggle, MgButton],
+    template: () => h("mg-form", Object.assign({}, args), content),
+  });
+  jest.runAllTimers();
+  return page;
+};
+const getSlottedContent = () => [
+  h("mg-input-checkbox", { identifier: "mg-input-checkbox", label: "mg-input-checkbox label", value: [
+      { title: 'oui', value: true },
+      { title: 'non', value: false },
+    ] }),
+  h("mg-input-date", { identifier: "mg-input-date", label: "mg-input-date label" }),
+  h("mg-input-numeric", { identifier: "mg-input-numeric", label: "mg-input-numeric label" }),
+  h("mg-input-password", { identifier: "mg-input-password", label: "mg-input-password label" }),
+  h("mg-input-radio", { identifier: "mg-input-radio", label: "mg-input-radio label", items: ['blu', 'bli', 'bla', 'blo'] }),
+  h("mg-input-select", { identifier: "mg-input-select", label: "mg-input-select label", items: ['blu', 'bli', 'bla', 'blo'] }),
+  h("mg-input-text", { identifier: "mg-input-text", label: "mg-input-text label" }),
+  h("mg-input-textarea", { identifier: "mg-input-textarea", label: "mg-input-textarea label" }),
+  h("mg-input-toggle", { identifier: "mg-input-toggle", label: "mg-input-toggle label", items: [
+      { title: 'non', value: false },
+      { title: 'oui', value: true },
+    ] }, h("span", { slot: "item-1" }, "non"), h("span", { slot: "item-2" }, "oui")),
+];
+const setCheckValitidy = (input) => {
+  const shadowInputs = input.shadowRoot.querySelectorAll('input, textarea, select');
+  shadowInputs.forEach(input => {
+    input.checkValidity = jest.fn(() => false);
+    Object.defineProperty(input, 'validity', {
+      get: jest.fn(() => ({
+        valueMissing: true,
+      })),
+    });
+  });
+};
+const setMgInputChecboxeInvalid = (input) => {
+  input.required = true;
+  input.value = [
+    { title: 'oui', value: false },
+    { title: 'non', value: false },
+  ];
+};
+describe('mg-form', () => {
+  let fireMo;
+  beforeEach(() => {
+    jest.useFakeTimers();
+    setupMutationObserverMock({
+      observe: function () {
+        fireMo = this.cb;
+      },
+      disconnect: function () {
+        return null;
+      },
+      takeRecords: () => [],
+    });
+    setupSubmitEventMock();
+  });
+  afterEach(() => jest.runOnlyPendingTimers());
+  test.each([
+    { args: { identifier: 'identifier' } },
+    { args: { identifier: 'identifier', readonly: true } },
+    { args: { identifier: 'identifier', disabled: true } },
+    { args: { identifier: 'identifier' }, required: 'one' },
+    { args: { identifier: 'identifier' }, required: 'all' },
+    { args: { identifier: 'identifier' }, required: 'multiple' },
+    { args: { identifier: 'identifier' }, required: 'single' },
+    { args: { identifier: 'identifier' }, readonly: true },
+  ])('Should render with args %o:', async ({ args, required, readonly }) => {
+    const slot = required === 'single' ? getSlottedContent()[0] : getSlottedContent();
+    if (required === 'one')
+      slot[0].$attrs$.required = true;
+    else if (required === 'all')
+      slot.forEach(s => {
+        s.$attrs$.required = true;
+      });
+    else if (required === 'multiple') {
+      slot[0].$attrs$.required = true;
+      slot[1].$attrs$.required = true;
+    }
+    else if (required === 'single')
+      slot.$attrs$.required = true;
+    if (readonly)
+      slot.forEach(s => {
+        s.$attrs$.readonly = true;
+      });
+    const { root } = await getPage(args, slot);
+    expect(root).toMatchSnapshot();
+  });
+  test.each([false, true])('Should display components errors (readonly: %s)', async (readonly) => {
+    const args = { identifier: 'identifier', readonly };
+    const slot = getSlottedContent();
+    // Set all elements required
+    slot.forEach(s => {
+      s.$attrs$.required = true;
+    });
+    const page = await getPage(args, slot);
+    const mgForm = page.doc.querySelector('mg-form');
+    if (!readonly) {
+      // Mock all input validity
+      const mgInputs = Array.from(mgForm.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-INPUT-') && node.nodeName !== 'MG-INPUT-TOGGLE');
+      mgInputs.forEach(input => {
+        if (input.nodeName.includes('CHECKBOX'))
+          setMgInputChecboxeInvalid(input);
+        setCheckValitidy(input);
+      });
+      await page.waitForChanges();
+      await mgForm.displayError();
+    }
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot();
+  });
+  test.each(['fr', 'xx'])('display error message with locale: %s', async (lang) => {
+    const args = { identifier: 'identifier', lang };
+    const slot = getSlottedContent();
+    // Set all elements required
+    slot.forEach(s => {
+      s.$attrs$.required = true;
+    });
+    const page = await getPage(args, slot);
+    const mgForm = page.doc.querySelector('mg-form');
+    // Mock all input validity
+    const mgInputs = Array.from(mgForm.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-INPUT-') && node.nodeName !== 'MG-INPUT-TOGGLE');
+    mgInputs.forEach(input => {
+      if (input.nodeName.includes('CHECKBOX'))
+        setMgInputChecboxeInvalid(input);
+      setCheckValitidy(input);
+    });
+    await page.waitForChanges();
+    await mgForm.displayError();
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot();
+  });
+  test.each([undefined, ...buttonTypes])('Should only emit "submit" event for <mg-button type="submit">, case type is %s', async (type) => {
+    const args = { identifier: 'identifier' };
+    const slot = [
+      ...getSlottedContent(),
+      h("div", { slot: "actions" }, h("mg-button", { type: type }, "Submit")),
+    ];
+    const page = await getPage(args, slot);
+    const mgForm = page.doc.querySelector('mg-form');
+    const form = mgForm.shadowRoot.querySelector('form');
+    const mgButton = page.doc.querySelector('mg-button');
+    const formSpy = jest.spyOn(form, 'dispatchEvent');
+    const mgFormSpy = jest.spyOn(page.rootInstance.formSubmit, 'emit');
+    mgButton.dispatchEvent(new Event('click', { bubbles: true }));
+    await page.waitForChanges();
+    if ([undefined, 'submit'].includes(type)) {
+      expect(formSpy).toHaveBeenCalledWith(expect.objectContaining({
+        type: 'submit',
+        cancelable: true,
+      }));
+      expect(mgFormSpy).toHaveBeenCalled();
+    }
+    else {
+      expect(formSpy).not.toHaveBeenCalled();
+      expect(mgFormSpy).not.toHaveBeenCalled();
+    }
+  });
+  test('Should update input list when element is added to DOM', async () => {
+    const args = { identifier: 'identifier' };
+    const slot = getSlottedContent();
+    const page = await getPage(args, slot);
+    spyOn(page.rootInstance, 'setMgInputs');
+    expect(page.rootInstance.setMgInputs).not.toHaveBeenCalled();
+    fireMo([]);
+    await page.waitForChanges();
+    expect(page.rootInstance.setMgInputs).toHaveBeenCalled();
+  });
+  test.each(['readonly', 'disabled'])('Should update input list when attribute % change', async (attribute) => {
+    const args = { identifier: 'identifier' };
+    const slot = getSlottedContent();
+    const page = await getPage(args, slot);
+    const mgForm = page.doc.querySelector('mg-form');
+    spyOn(page.rootInstance, 'setMgInputs');
+    spyOn(page.rootInstance, 'setRequiredMessage');
+    expect(page.rootInstance.setMgInputs).not.toHaveBeenCalled();
+    expect(page.rootInstance.setRequiredMessage).not.toHaveBeenCalled();
+    mgForm[attribute] = true;
+    await page.waitForChanges();
+    expect(page.rootInstance.setMgInputs).toHaveBeenCalled();
+    expect(page.rootInstance.setRequiredMessage).toHaveBeenCalled();
+  });
+  test.each([
+    {
+      slot: () => [h("mg-input-text", { identifier: "mg-input-text", label: "mg-input-text label" })],
+      message: null,
+    },
+    {
+      slot: () => [
+        h("mg-input-text", { identifier: "mg-input-text", label: "mg-input-text label" }),
+        h("mg-input-toggle", { identifier: "mg-input-toggle", label: "mg-input-toggle label", items: [
+            { title: 'non', value: false },
+            { title: 'oui', value: true },
+          ] }, h("span", { slot: "item-1" }, "non"), h("span", { slot: "item-2" }, "oui")),
+      ],
+      message: null,
+    },
+    {
+      slot: () => [h("mg-input-text", { required: true, identifier: "mg-input-text", label: "mg-input-text label" })],
+      message: 'The field is required',
+    },
+    {
+      slot: () => [
+        h("mg-input-text", { required: true, identifier: "mg-input-text", label: "mg-input-text label" }),
+        h("mg-input-text", { required: true, identifier: "mg-input-text", label: "mg-input-text label" }),
+      ],
+      message: 'All fields are required',
+    },
+    {
+      slot: () => [
+        h("mg-input-text", { required: true, identifier: "mg-input-text", label: "mg-input-text label" }),
+        h("mg-input-text", { identifier: "mg-input-text", label: "mg-input-text label" }),
+      ],
+      message: 'Field with a <strong class="is-asterisk">*</strong> is required',
+    },
+    {
+      slot: () => [
+        h("mg-input-text", { required: true, identifier: "mg-input-text", label: "mg-input-text label" }),
+        h("mg-input-text", { identifier: "mg-input-text", label: "mg-input-text label" }),
+        h("mg-input-toggle", { identifier: "mg-input-toggle", label: "mg-input-toggle label", items: [
+            { title: 'non', value: false },
+            { title: 'oui', value: true },
+          ] }, h("span", { slot: "item-1" }, "non"), h("span", { slot: "item-2" }, "oui")),
+      ],
+      message: 'Field with a <strong class="is-asterisk">*</strong> is required',
+    },
+    {
+      slot: () => [
+        h("mg-input-text", { required: true, identifier: "mg-input-text", label: "mg-input-text label" }),
+        h("mg-input-text", { required: true, identifier: "mg-input-text", label: "mg-input-text label" }),
+        h("mg-input-toggle", { identifier: "mg-input-toggle", label: "mg-input-toggle label", items: [
+            { title: 'non', value: false },
+            { title: 'oui', value: true },
+          ] }, h("span", { slot: "item-1" }, "non"), h("span", { slot: "item-2" }, "oui")),
+      ],
+      message: 'All fields are required',
+    },
+    {
+      slot: () => [
+        h("mg-input-text", { required: true, identifier: "mg-input-text", label: "mg-input-text label" }),
+        h("mg-input-text", { required: true, identifier: "mg-input-text", label: "mg-input-text label" }),
+        h("mg-input-text", { identifier: "mg-input-text", label: "mg-input-text label" }),
+      ],
+      message: 'Fields with a <strong class="is-asterisk">*</strong> are required',
+    },
+    {
+      slot: () => [
+        h("mg-input-text", { required: true, identifier: "mg-input-text", label: "mg-input-text label" }),
+        h("mg-input-toggle", { identifier: "mg-input-toggle", label: "mg-input-toggle label", items: [
+            { title: 'non', value: false },
+            { title: 'oui', value: true },
+          ] }, h("span", { slot: "item-1" }, "non"), h("span", { slot: "item-2" }, "oui")),
+      ],
+      message: 'Field with a <strong class="is-asterisk">*</strong> is required',
+    },
+  ])('Should display needeed required message', async ({ slot, message }) => {
+    const page = await getPage({ identifier: 'identifier' }, slot());
+    expect(page.rootInstance.requiredMessage).toBe(message);
+  });
+});
+//# sourceMappingURL=mg-form.spec.js.map

package/dist/collection/components/molecules/mg-form/test/mg-form.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-form.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-form/test/mg-form.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgForm } from '../mg-form';\nimport { MgButton } from '../../../atoms/mg-button/mg-button';\nimport { buttonTypes } from '../../../atoms/mg-button/mg-button.conf';\nimport { MgInputCheckbox } from '../../inputs/mg-input-checkbox/mg-input-checkbox';\nimport { MgInputDate } from '../../inputs/mg-input-date/mg-input-date';\nimport { MgInputNumeric } from '../../inputs/mg-input-numeric/mg-input-numeric';\nimport { MgInputPassword } from '../../inputs/mg-input-password/mg-input-password';\nimport { MgInputRadio } from '../../inputs/mg-input-radio/mg-input-radio';\nimport { MgInputSelect } from '../../inputs/mg-input-select/mg-input-select';\nimport { MgInputText } from '../../inputs/mg-input-text/mg-input-text';\nimport { MgInputTextarea } from '../../inputs/mg-input-textarea/mg-input-textarea';\nimport { MgInputToggle } from '../../inputs/mg-input-toggle/mg-input-toggle';\nimport { HTMLMgInputsElement } from '../../inputs/MgInput.conf';\nimport { setupMutationObserverMock, setupSubmitEventMock } from '../../../../utils/unit.test.utils';\n\nconst getPage = (args, content?) => {\n  const page = newSpecPage({\n    components: [MgForm, MgInputCheckbox, MgInputDate, MgInputNumeric, MgInputPassword, MgInputRadio, MgInputSelect, MgInputText, MgInputTextarea, MgInputToggle, MgButton],\n    template: () => <mg-form {...args}>{content}</mg-form>,\n  });\n\n  jest.runAllTimers();\n\n  return page;\n};\n\nconst getSlottedContent = () => [\n  <mg-input-checkbox\n    identifier=\"mg-input-checkbox\"\n    label=\"mg-input-checkbox label\"\n    value={[\n      { title: 'oui', value: true },\n      { title: 'non', value: false },\n    ]}\n  ></mg-input-checkbox>,\n  <mg-input-date identifier=\"mg-input-date\" label=\"mg-input-date label\"></mg-input-date>,\n  <mg-input-numeric identifier=\"mg-input-numeric\" label=\"mg-input-numeric label\"></mg-input-numeric>,\n  <mg-input-password identifier=\"mg-input-password\" label=\"mg-input-password label\"></mg-input-password>,\n  <mg-input-radio identifier=\"mg-input-radio\" label=\"mg-input-radio label\" items={['blu', 'bli', 'bla', 'blo']}></mg-input-radio>,\n  <mg-input-select identifier=\"mg-input-select\" label=\"mg-input-select label\" items={['blu', 'bli', 'bla', 'blo']}></mg-input-select>,\n  <mg-input-text identifier=\"mg-input-text\" label=\"mg-input-text label\"></mg-input-text>,\n  <mg-input-textarea identifier=\"mg-input-textarea\" label=\"mg-input-textarea label\"></mg-input-textarea>,\n  <mg-input-toggle\n    identifier=\"mg-input-toggle\"\n    label=\"mg-input-toggle label\"\n    items={[\n      { title: 'non', value: false },\n      { title: 'oui', value: true },\n    ]}\n  >\n    <span slot=\"item-1\">non</span>\n    <span slot=\"item-2\">oui</span>\n  </mg-input-toggle>,\n];\n\nconst setCheckValitidy = (input: HTMLMgInputsElement): void => {\n  const shadowInputs = input.shadowRoot.querySelectorAll('input, textarea, select') as NodeListOf<HTMLInputElement>;\n  shadowInputs.forEach(input => {\n    input.checkValidity = jest.fn(() => false);\n    Object.defineProperty(input, 'validity', {\n      get: jest.fn(() => ({\n        valueMissing: true,\n      })),\n    });\n  });\n};\n\nconst setMgInputChecboxeInvalid = (input: HTMLMgInputCheckboxElement): void => {\n  input.required = true;\n  input.value = [\n    { title: 'oui', value: false },\n    { title: 'non', value: false },\n  ];\n};\n\ndescribe('mg-form', () => {\n  let fireMo;\n\n  beforeEach(() => {\n    jest.useFakeTimers();\n\n    setupMutationObserverMock({\n      observe: function () {\n        fireMo = this.cb;\n      },\n      disconnect: function () {\n        return null;\n      },\n      takeRecords: () => [],\n    });\n    setupSubmitEventMock();\n  });\n\n  afterEach(() => jest.runOnlyPendingTimers());\n\n  test.each([\n    { args: { identifier: 'identifier' } },\n    { args: { identifier: 'identifier', readonly: true } },\n    { args: { identifier: 'identifier', disabled: true } },\n    { args: { identifier: 'identifier' }, required: 'one' },\n    { args: { identifier: 'identifier' }, required: 'all' },\n    { args: { identifier: 'identifier' }, required: 'multiple' },\n    { args: { identifier: 'identifier' }, required: 'single' },\n    { args: { identifier: 'identifier' }, readonly: true },\n  ])('Should render with args %o:', async ({ args, required, readonly }) => {\n    const slot = required === 'single' ? getSlottedContent()[0] : getSlottedContent();\n    if (required === 'one') slot[0].$attrs$.required = true;\n    else if (required === 'all')\n      slot.forEach(s => {\n        s.$attrs$.required = true;\n      });\n    else if (required === 'multiple') {\n      slot[0].$attrs$.required = true;\n      slot[1].$attrs$.required = true;\n    } else if (required === 'single') slot.$attrs$.required = true;\n\n    if (readonly)\n      slot.forEach(s => {\n        s.$attrs$.readonly = true;\n      });\n\n    const { root } = await getPage(args, slot);\n    expect(root).toMatchSnapshot();\n  });\n\n  test.each([false, true])('Should display components errors (readonly: %s)', async readonly => {\n    const args = { identifier: 'identifier', readonly };\n\n    const slot = getSlottedContent();\n    // Set all elements required\n    slot.forEach(s => {\n      s.$attrs$.required = true;\n    });\n\n    const page = await getPage(args, slot);\n    const mgForm = page.doc.querySelector('mg-form');\n\n    if (!readonly) {\n      // Mock all input validity\n      const mgInputs = Array.from(mgForm.querySelectorAll('*')).filter(\n        (node: Node) => node.nodeName.startsWith('MG-INPUT-') && node.nodeName !== 'MG-INPUT-TOGGLE',\n      ) as HTMLMgInputsElement[];\n      mgInputs.forEach(input => {\n        if (input.nodeName.includes('CHECKBOX')) setMgInputChecboxeInvalid(input as HTMLMgInputCheckboxElement);\n        setCheckValitidy(input);\n      });\n      await page.waitForChanges();\n\n      await mgForm.displayError();\n    }\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  test.each(['fr', 'xx'])('display error message with locale: %s', async lang => {\n    const args = { identifier: 'identifier', lang };\n\n    const slot = getSlottedContent();\n    // Set all elements required\n    slot.forEach(s => {\n      s.$attrs$.required = true;\n    });\n\n    const page = await getPage(args, slot);\n    const mgForm = page.doc.querySelector('mg-form');\n\n    // Mock all input validity\n    const mgInputs = Array.from(mgForm.querySelectorAll('*')).filter(\n      (node: Node) => node.nodeName.startsWith('MG-INPUT-') && node.nodeName !== 'MG-INPUT-TOGGLE',\n    ) as HTMLMgInputsElement[];\n    mgInputs.forEach(input => {\n      if (input.nodeName.includes('CHECKBOX')) setMgInputChecboxeInvalid(input as HTMLMgInputCheckboxElement);\n      setCheckValitidy(input);\n    });\n    await page.waitForChanges();\n\n    await mgForm.displayError();\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  test.each([undefined, ...buttonTypes])('Should only emit \"submit\" event for <mg-button type=\"submit\">, case type is %s', async type => {\n    const args = { identifier: 'identifier' };\n    const slot = [\n      ...getSlottedContent(),\n      <div slot=\"actions\">\n        <mg-button type={type}>Submit</mg-button>\n      </div>,\n    ];\n    const page = await getPage(args, slot);\n\n    const mgForm = page.doc.querySelector('mg-form');\n    const form = mgForm.shadowRoot.querySelector('form');\n    const mgButton = page.doc.querySelector('mg-button');\n\n    const formSpy = jest.spyOn(form, 'dispatchEvent');\n    const mgFormSpy = jest.spyOn(page.rootInstance.formSubmit, 'emit');\n\n    mgButton.dispatchEvent(new Event('click', { bubbles: true }));\n\n    await page.waitForChanges();\n\n    if ([undefined, 'submit'].includes(type)) {\n      expect(formSpy).toHaveBeenCalledWith(\n        expect.objectContaining({\n          type: 'submit',\n          cancelable: true,\n        }),\n      );\n      expect(mgFormSpy).toHaveBeenCalled();\n    } else {\n      expect(formSpy).not.toHaveBeenCalled();\n      expect(mgFormSpy).not.toHaveBeenCalled();\n    }\n  });\n\n  test('Should update input list when element is added to DOM', async () => {\n    const args = { identifier: 'identifier' };\n    const slot = getSlottedContent();\n    const page = await getPage(args, slot);\n\n    spyOn(page.rootInstance, 'setMgInputs');\n\n    expect(page.rootInstance.setMgInputs).not.toHaveBeenCalled();\n\n    fireMo([]);\n    await page.waitForChanges();\n\n    expect(page.rootInstance.setMgInputs).toHaveBeenCalled();\n  });\n\n  test.each(['readonly', 'disabled'])('Should update input list when attribute % change', async attribute => {\n    const args = { identifier: 'identifier' };\n    const slot = getSlottedContent();\n    const page = await getPage(args, slot);\n    const mgForm = page.doc.querySelector('mg-form');\n\n    spyOn(page.rootInstance, 'setMgInputs');\n    spyOn(page.rootInstance, 'setRequiredMessage');\n\n    expect(page.rootInstance.setMgInputs).not.toHaveBeenCalled();\n    expect(page.rootInstance.setRequiredMessage).not.toHaveBeenCalled();\n\n    mgForm[attribute] = true;\n    await page.waitForChanges();\n\n    expect(page.rootInstance.setMgInputs).toHaveBeenCalled();\n    expect(page.rootInstance.setRequiredMessage).toHaveBeenCalled();\n  });\n\n  test.each([\n    {\n      slot: () => [<mg-input-text identifier=\"mg-input-text\" label=\"mg-input-text label\"></mg-input-text>],\n      message: null,\n    },\n    {\n      slot: () => [\n        <mg-input-text identifier=\"mg-input-text\" label=\"mg-input-text label\"></mg-input-text>,\n        <mg-input-toggle\n          identifier=\"mg-input-toggle\"\n          label=\"mg-input-toggle label\"\n          items={[\n            { title: 'non', value: false },\n            { title: 'oui', value: true },\n          ]}\n        >\n          <span slot=\"item-1\">non</span>\n          <span slot=\"item-2\">oui</span>\n        </mg-input-toggle>,\n      ],\n      message: null,\n    },\n    {\n      slot: () => [<mg-input-text required identifier=\"mg-input-text\" label=\"mg-input-text label\"></mg-input-text>],\n      message: 'The field is required',\n    },\n    {\n      slot: () => [\n        <mg-input-text required identifier=\"mg-input-text\" label=\"mg-input-text label\"></mg-input-text>,\n        <mg-input-text required identifier=\"mg-input-text\" label=\"mg-input-text label\"></mg-input-text>,\n      ],\n      message: 'All fields are required',\n    },\n    {\n      slot: () => [\n        <mg-input-text required identifier=\"mg-input-text\" label=\"mg-input-text label\"></mg-input-text>,\n        <mg-input-text identifier=\"mg-input-text\" label=\"mg-input-text label\"></mg-input-text>,\n      ],\n      message: 'Field with a <strong class=\"is-asterisk\">*</strong> is required',\n    },\n    {\n      slot: () => [\n        <mg-input-text required identifier=\"mg-input-text\" label=\"mg-input-text label\"></mg-input-text>,\n        <mg-input-text identifier=\"mg-input-text\" label=\"mg-input-text label\"></mg-input-text>,\n        <mg-input-toggle\n          identifier=\"mg-input-toggle\"\n          label=\"mg-input-toggle label\"\n          items={[\n            { title: 'non', value: false },\n            { title: 'oui', value: true },\n          ]}\n        >\n          <span slot=\"item-1\">non</span>\n          <span slot=\"item-2\">oui</span>\n        </mg-input-toggle>,\n      ],\n      message: 'Field with a <strong class=\"is-asterisk\">*</strong> is required',\n    },\n    {\n      slot: () => [\n        <mg-input-text required identifier=\"mg-input-text\" label=\"mg-input-text label\"></mg-input-text>,\n        <mg-input-text required identifier=\"mg-input-text\" label=\"mg-input-text label\"></mg-input-text>,\n        <mg-input-toggle\n          identifier=\"mg-input-toggle\"\n          label=\"mg-input-toggle label\"\n          items={[\n            { title: 'non', value: false },\n            { title: 'oui', value: true },\n          ]}\n        >\n          <span slot=\"item-1\">non</span>\n          <span slot=\"item-2\">oui</span>\n        </mg-input-toggle>,\n      ],\n      message: 'All fields are required',\n    },\n    {\n      slot: () => [\n        <mg-input-text required identifier=\"mg-input-text\" label=\"mg-input-text label\"></mg-input-text>,\n        <mg-input-text required identifier=\"mg-input-text\" label=\"mg-input-text label\"></mg-input-text>,\n        <mg-input-text identifier=\"mg-input-text\" label=\"mg-input-text label\"></mg-input-text>,\n      ],\n      message: 'Fields with a <strong class=\"is-asterisk\">*</strong> are required',\n    },\n    {\n      slot: () => [\n        <mg-input-text required identifier=\"mg-input-text\" label=\"mg-input-text label\"></mg-input-text>,\n        <mg-input-toggle\n          identifier=\"mg-input-toggle\"\n          label=\"mg-input-toggle label\"\n          items={[\n            { title: 'non', value: false },\n            { title: 'oui', value: true },\n          ]}\n        >\n          <span slot=\"item-1\">non</span>\n          <span slot=\"item-2\">oui</span>\n        </mg-input-toggle>,\n      ],\n      message: 'Field with a <strong class=\"is-asterisk\">*</strong> is required',\n    },\n  ])('Should display needeed required message', async ({ slot, message }) => {\n    const page = await getPage({ identifier: 'identifier' }, slot());\n\n    expect(page.rootInstance.requiredMessage).toBe(message);\n  });\n});\n"]}

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

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { isTagName } from '../../../utils/components.utils';
+import { h } from "@stencil/core";
+import { isTagName } from "../../../utils/components.utils";
 export class MgIllustratedMessage {
   constructor() {
     this.size = 'regular';
@@ -89,3 +89,4 @@ export class MgIllustratedMessage {
   }
   static get elementRef() { return "element"; }
 }
+//# sourceMappingURL=mg-illustrated-message.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-illustrated-message.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-illustrated-message/mg-illustrated-message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAO5D,MAAM,OAAO,oBAAoB;;gBAaK,SAAS;qBAKE,UAAU;;EAEzD;;iBAEe;EAEf;;KAEG;EACH,gBAAgB;IACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IACzD,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;IAEpF,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC,EAAE;MACzE,MAAM,IAAI,KAAK,CAAC,6DAA6D,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACxG;SAAM,IAAI,oBAAoB,CAAC,MAAM,KAAK,CAAC,EAAE;MAC5C,MAAM,IAAI,KAAK,CAAC,2EAA2E,CAAC,CAAC;KAC9F;IAED,oBAAoB,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;EAC9D,CAAC;EAED;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,WACE,KAAK,EAAE;QACL,wBAAwB,EAAE,IAAI;QAC9B,oCAAoC,EAAE,IAAI,CAAC,SAAS,KAAK,YAAY;OACtE;MAED,WACE,KAAK,EAAE;UACL,sCAAsC,EAAE,IAAI;UAC5C,6CAA6C,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;SACrE;QAED,YAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B;MACN,WAAK,KAAK,EAAC,+BAA+B;QACxC,WAAK,KAAK,EAAC,+BAA+B;UACxC,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;QACN,WAAK,KAAK,EAAC,iCAAiC;UAC1C,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACF,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop } from '@stencil/core';\nimport { isTagName } from '../../../utils/components.utils';\n\n@Component({\n  tag: 'mg-illustrated-message',\n  styleUrl: 'mg-illustrated-message.scss',\n  shadow: true,\n})\nexport class MgIllustratedMessage {\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgIllustratedMessageElement;\n\n  /**\n   * Define illustration size\n   */\n  @Prop() size: 'regular' | 'small' = 'regular';\n\n  /**\n   * Define component orientation\n   */\n  @Prop() direction: 'vertical' | 'horizontal' = 'vertical';\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentDidLoad(): void {\n    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n    const slottedIllustrations = this.element.querySelectorAll('[slot=\"illustration\"]');\n\n    if (!isTagName(this.element.querySelector('[slot=\"title\"]'), headingTags)) {\n      throw new Error(`<mg-illustrated-message> Slotted title must be a heading: ${headingTags.join(', ')}`);\n    } else if (slottedIllustrations.length !== 1) {\n      throw new Error('<mg-illustrated-message> Slotted illustration must be present and unique.');\n    }\n\n    slottedIllustrations[0].setAttribute('aria-hidden', 'true');\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div\n        class={{\n          'mg-illustrated-message': true,\n          'mg-illustrated-message--horizontal': this.direction === 'horizontal',\n        }}\n      >\n        <div\n          class={{\n            'mg-illustrated-message__illustration': true,\n            'mg-illustrated-message__illustration--small': this.size === 'small',\n          }}\n        >\n          <slot name=\"illustration\"></slot>\n        </div>\n        <div class=\"mg-illustrated-message__slots\">\n          <div class=\"mg-illustrated-message__title\">\n            <slot name=\"title\"></slot>\n          </div>\n          <div class=\"mg-illustrated-message__details\">\n            <slot name=\"details\"></slot>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}