@mgdis/mg-components 5.20.0 → 5.21.0

package/dist/components/mg-form.js

@@ -2,6 +2,15 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { c as createID, C as ClassList } from './components.utils.js';
 import { i as initLocales } from './index2.js';
 
+/**
+ * List of all possibles roles
+ */
+const roles = ['form', 'search', 'none', 'presentation'];
+/**
+ * List of all possibles required message status
+ */
+const requiredMessageStatus = ['default', 'hide'];
+
 const mgFormCss = ".mg-u-is-asterisk{color:hsl(var(--color-danger))}.mg-c-form{--mg-inputs-title-width:var(--mg-form-inputs-title-width, 15rem);--mg-inputs-margin-bottom:1.5rem;--mg-inputs-title-horizontal-space:3rem;--mg-inputs-shrink:0}.mg-c-form.mg-c-form--all-required{--mg-input-title-display:none}.mg-c-form>p{font-size:1.2rem}";
 
 const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLElement {
@@ -18,8 +27,14 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
          */
         this.setRequiredMessage = () => {
             // init required message
-            this.requiredMessage = null;
+            this.requiredMessageText = null;
             this.classCollection.delete(this.classAllRequired);
+            if (this.requiredMessage === 'hide')
+                return;
+            else if (this.requiredMessage === 'default') {
+                this.requiredMessageText = this.messages.form.required;
+                return;
+            }
             // If the form is disabled or readonly none of them are required
             // Check if all fields are not editable (readonly or disabled)
             const isEditable = input => !(input.disabled || input.readonly);
@@ -33,12 +48,12 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
                 // All inputs are required
                 if ([requiredInputs.length, editableInputs.length].every(length => length === 1) ||
                     (requiredInputs.length > 1 && requiredInputs.length === editableInputs.filter(input => !isMgInputToggle(input)).length)) {
-                    this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');
+                    this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');
                     this.classCollection.add(this.classAllRequired);
                 }
                 // Some fields are required
                 else if (requiredInputs.length > 0) {
-                    this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');
+                    this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');
                 }
             }
         };
@@ -89,11 +104,21 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
         this.identifier = createID('mg-form');
         this.name = this.identifier;
         this.readonly = false;
+        this.requiredMessage = undefined;
+        this.ariaRole = undefined;
         this.disabled = false;
         this.valid = undefined;
         this.invalid = undefined;
         this.classCollection = new ClassList(['mg-c-form']);
-        this.requiredMessage = undefined;
+        this.requiredMessageText = undefined;
+    }
+    validateRequiredMessage(newValue) {
+        if (newValue && !requiredMessageStatus.includes(newValue))
+            throw new Error(`<mg-form> prop "requiredMessage" must be one of: ${requiredMessageStatus.join(', ')}.`);
+    }
+    validateAriaRole(newValue) {
+        if (newValue && !roles.includes(newValue))
+            throw new Error(`<mg-form> prop "ariaRole" must be one of: ${roles.join(', ')}.`);
     }
     handleAttributeChange() {
         this.setMgInputs();
@@ -120,6 +145,8 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
     componentWillLoad() {
         // Get locales
         this.messages = initLocales(this.element).messages;
+        this.validateAriaRole(this.ariaRole);
+        this.validateRequiredMessage(this.requiredMessage);
         // Get slotted mgButtons
         this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));
         // Set button form identifier
@@ -128,8 +155,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
         });
         // Set mgInputs
         this.setMgInputs();
-        // Define required message
-        this.setRequiredMessage();
         // Check validity when slotted mgInputs are ready
         Promise.all(this.mgInputs.map(async (input) => {
             try {
@@ -137,6 +162,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
             }
             catch (_a) { } // prevent error with VueJS first render
         })).then(() => {
+            // Define required message and check validity
             this.checkValidity();
         });
     }
@@ -154,10 +180,12 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
      * @returns HTML Element
      */
     render() {
-        return (h("form", { class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit }, this.requiredMessage && h("p", { innerHTML: this.requiredMessage }), h("slot", null), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
+        return (h("form", { class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { innerHTML: this.requiredMessageText }), h("slot", null), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
     }
     get element() { return this; }
     static get watchers() { return {
+        "requiredMessage": ["validateRequiredMessage", "handleAttributeChange"],
+        "ariaRole": ["validateAriaRole"],
         "readonly": ["handleAttributeChange"],
         "disabled": ["handleAttributeChange"]
     }; }
@@ -166,13 +194,17 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
         "identifier": [1],
         "name": [1],
         "readonly": [4],
+        "requiredMessage": [1, "required-message"],
+        "ariaRole": [1, "aria-role"],
         "disabled": [4],
         "valid": [1028],
         "invalid": [1028],
         "classCollection": [32],
-        "requiredMessage": [32],
+        "requiredMessageText": [32],
         "displayError": [64]
     }, undefined, {
+        "requiredMessage": ["validateRequiredMessage", "handleAttributeChange"],
+        "ariaRole": ["validateAriaRole"],
         "readonly": ["handleAttributeChange"],
         "disabled": ["handleAttributeChange"]
     }]);

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

@@ -1 +1 @@
-{"file":"mg-form.js","mappings":"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","names":["MgForm"],"sources":["../styles/dist/components/mg-form.css?tag=mg-form&encapsulation=shadow","src/components/molecules/mg-form/mg-form.tsx"],"sourcesContent":[".mg-u-is-asterisk{color:hsl(var(--color-danger))}.mg-c-form{--mg-inputs-title-width: var(--mg-form-inputs-title-width, 15rem);--mg-inputs-margin-bottom: 1.5rem;--mg-inputs-title-horizontal-space: 3rem;--mg-inputs-shrink: 0}.mg-c-form.mg-c-form--all-required{--mg-input-title-display: none}.mg-c-form>p{font-size:1.2rem}/*# sourceMappingURL=mg-form.css.map */\n","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: '../../../../node_modules/@mgdis/styles/dist/components/mg-form.css',\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-c-form--all-required';\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-c-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<HTMLMgFormElement['valid']>;\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?.();\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    // 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} 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"],"version":3}
+{"file":"mg-form.js","mappings":"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","names":["MgForm"],"sources":["src/components/molecules/mg-form/mg-form.conf.ts","../styles/dist/components/mg-form.css?tag=mg-form&encapsulation=shadow","src/components/molecules/mg-form/mg-form.tsx"],"sourcesContent":["/**\n * List of all possibles roles\n */\nexport const roles = ['form', 'search', 'none', 'presentation'] as const;\n\n/**\n * Aria Role type from roles\n */\nexport type AriaRoleType = (typeof roles)[number];\n\n/**\n * List of all possibles required message status\n */\nexport const requiredMessageStatus = ['default', 'hide'] as const;\n\n/**\n * RequiredMessageStatus type from requiredMessageStatus\n */\nexport type RequiredMessageStatusType = (typeof requiredMessageStatus)[number];\n",".mg-u-is-asterisk{color:hsl(var(--color-danger))}.mg-c-form{--mg-inputs-title-width: var(--mg-form-inputs-title-width, 15rem);--mg-inputs-margin-bottom: 1.5rem;--mg-inputs-title-horizontal-space: 3rem;--mg-inputs-shrink: 0}.mg-c-form.mg-c-form--all-required{--mg-input-title-display: none}.mg-c-form>p{font-size:1.2rem}/*# sourceMappingURL=mg-form.css.map */\n","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';\nimport { AriaRoleType, requiredMessageStatus, RequiredMessageStatusType, roles } from './mg-form.conf';\n\n@Component({\n  tag: 'mg-form',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-form.css',\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-c-form--all-required';\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 when required message is display.\n   * When it is unset, component use it internal logic to manage \"required message\" help text display.\n   * When you set the prop to `default`, you override the component internal logique to torce it display \"required message\" help text.\n   * When you set the prop to `hide`, it will prevent the rendering of the message in the component's DOM.\n   * As **this element is an accessibility requirement in the view**,\n   * you **MUST*** re-implement this message on your own and display it when your form contains required inputs.\n   */\n  @Prop() requiredMessage: RequiredMessageStatusType;\n  @Watch('requiredMessage')\n  validateRequiredMessage(newValue): void {\n    if (newValue && !requiredMessageStatus.includes(newValue)) throw new Error(`<mg-form> prop \"requiredMessage\" must be one of: ${requiredMessageStatus.join(', ')}.`);\n  }\n\n  /**\n   * Define `<form/>` element aria role\n   * see more about aria roles use case: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles\n   */\n  @Prop() ariaRole: AriaRoleType;\n  @Watch('ariaRole')\n  validateAriaRole(newValue: MgForm['ariaRole']) {\n    if (newValue && !roles.includes(newValue)) throw new Error(`<mg-form> prop \"ariaRole\" must be one of: ${roles.join(', ')}.`);\n  }\n\n  /**\n   * Define if form is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('readonly')\n  @Watch('disabled')\n  @Watch('requiredMessage')\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-c-form']);\n\n  /**\n   * Required message\n   */\n  @State() requiredMessageText: 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<HTMLMgFormElement['valid']>;\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?.();\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.requiredMessageText = null;\n    this.classCollection.delete(this.classAllRequired);\n\n    if (this.requiredMessage === 'hide') return;\n    else if (this.requiredMessage === 'default') {\n      this.requiredMessageText = this.messages.form.required;\n      return;\n    }\n\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.requiredMessageText = 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.requiredMessageText = 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    this.validateAriaRole(this.ariaRole);\n    this.validateRequiredMessage(this.requiredMessage);\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    // 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      // Define required message and check validity\n      this.checkValidity();\n    });\n  }\n\n  /**\n   * Add slot listeners\n   */\n  componentDidLoad(): void {\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} onSubmit={this.handleFormSubmit} role={this.ariaRole}>\n        {this.requiredMessageText && <p innerHTML={this.requiredMessageText}></p>}\n        <slot></slot>\n        {!this.readonly && !this.disabled && <slot name=\"actions\"></slot>}\n      </form>\n    );\n  }\n}\n"],"version":3}