@mgdis/mg-components 5.19.3 → 5.21.0

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

@@ -1,344 +1,422 @@
 import { h } from "@stencil/core";
 import { createID, ClassList } from "../../../utils/components.utils";
 import { initLocales } from "../../../locales";
+import { requiredMessageStatus, roles } from "./mg-form.conf";
 export class MgForm {
-  constructor() {
-    // Classes
-    this.classAllRequired = 'mg-c-form--all-required';
+    constructor() {
+        // Classes
+        this.classAllRequired = 'mg-c-form--all-required';
+        /**
+         * Define required message based on mg-inputs required elements
+         */
+        this.setRequiredMessage = () => {
+            // init required message
+            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);
+            const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';
+            if (!this.disabled && !this.readonly && this.mgInputs.some(input => isEditable(input) && !isMgInputToggle(input))) {
+                // Get editable inputs
+                const editableInputs = this.mgInputs.filter(isEditable);
+                // Get required inputs
+                // mg-input-toggle can not be required
+                const requiredInputs = editableInputs.filter(input => !isMgInputToggle(input) && input.required);
+                // 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.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');
+                    this.classCollection.add(this.classAllRequired);
+                }
+                // Some fields are required
+                else if (requiredInputs.length > 0) {
+                    this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');
+                }
+            }
+        };
+        /**
+         * Returns a required message based on the count of required inputs.
+         * @param requiredInputs - An array of required input elements.
+         * @param keySingle - The key for the singular message format.
+         * @param keyPlural - The key for the plural message format.
+         * @returns The appropriate required message based on the count of required inputs.
+         */
+        this.getRequiredMessageBasedOnCount = (requiredInputs, keySingle, keyPlural) => this.messages.form[requiredInputs.length === 1 ? keySingle : keyPlural];
+        /**
+         * Check if form is valid
+         */
+        this.checkValidity = () => {
+            // Update required on input event
+            this.setRequiredMessage();
+            this.valid = !this.mgInputs.some(input => input.invalid);
+            this.invalid = !this.valid;
+            // We need to send valid event if it is the same value
+            this.formValid.emit(this.valid);
+        };
+        /**
+         * Handle Form Submit
+         * @param event - submit event
+         */
+        this.handleFormSubmit = (event) => {
+            event.preventDefault();
+            this.formSubmit.emit();
+        };
+        /**
+         * Set mgInputs
+         */
+        this.setMgInputs = () => {
+            // Get slotted mgInputs
+            this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-INPUT-'));
+            // Set inputs readonly or disabled based on form configuration
+            // Othewise listen to events
+            this.mgInputs.forEach(input => {
+                if (this.readonly)
+                    input.readonly = true;
+                else if (this.disabled)
+                    input.disabled = true;
+                else
+                    input.addEventListener('input-valid', this.checkValidity);
+            });
+        };
+        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.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();
+        this.setRequiredMessage();
+    }
     /**
-     * Define required message based on mg-inputs required elements
+     * Display input error if it exists.
      */
-    this.setRequiredMessage = () => {
-      // init required message
-      this.requiredMessage = null;
-      this.classCollection.delete(this.classAllRequired);
-      // 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);
-      const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';
-      if (!this.disabled && !this.readonly && this.mgInputs.some(input => isEditable(input) && !isMgInputToggle(input))) {
-        // Get editable inputs
-        const editableInputs = this.mgInputs.filter(isEditable);
-        // Get required inputs
-        // mg-input-toggle can not be required
-        const requiredInputs = editableInputs.filter(input => !isMgInputToggle(input) && input.required);
-        // 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.classCollection.add(this.classAllRequired);
+    async displayError() {
+        if (!this.readonly) {
+            this.mgInputs.forEach(input => {
+                var _a;
+                (_a = input.displayError) === null || _a === void 0 ? void 0 : _a.call(input);
+            });
+            this.checkValidity();
         }
-        // Some fields are required
-        else if (requiredInputs.length > 0) {
-          this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');
-        }
-      }
-    };
-    /**
-     * Returns a required message based on the count of required inputs.
-     * @param requiredInputs - An array of required input elements.
-     * @param keySingle - The key for the singular message format.
-     * @param keyPlural - The key for the plural message format.
-     * @returns The appropriate required message based on the count of required inputs.
-     */
-    this.getRequiredMessageBasedOnCount = (requiredInputs, keySingle, keyPlural) => this.messages.form[requiredInputs.length === 1 ? keySingle : keyPlural];
+    }
+    /*************
+     * Lifecycle *
+     *************/
     /**
-     * Check if form is valid
+     * Check if component props are well configured on init
      */
-    this.checkValidity = () => {
-      // Update required on input event
-      this.setRequiredMessage();
-      this.valid = !this.mgInputs.some(input => input.invalid);
-      this.invalid = !this.valid;
-      // We need to send valid event if it is the same value
-      this.formValid.emit(this.valid);
-    };
+    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
+        this.mgButtons.forEach(mgButton => {
+            mgButton.setAttribute('form', this.identifier);
+        });
+        // Set mgInputs
+        this.setMgInputs();
+        // Check validity when slotted mgInputs are ready
+        Promise.all(this.mgInputs.map(async (input) => {
+            try {
+                await input.componentOnReady();
+            }
+            catch (_a) { } // prevent error with VueJS first render
+        })).then(() => {
+            // Define required message and check validity
+            this.checkValidity();
+        });
+    }
     /**
-     * Handle Form Submit
-     * @param event - submit event
+     * Add slot listeners
      */
-    this.handleFormSubmit = (event) => {
-      event.preventDefault();
-      this.formSubmit.emit();
-    };
+    componentDidLoad() {
+        // Update mgInputs when mgForm content change
+        new MutationObserver(() => {
+            this.setMgInputs();
+        }).observe(this.element, { childList: true });
+    }
     /**
-     * Set mgInputs
+     * Render
+     * @returns HTML Element
      */
-    this.setMgInputs = () => {
-      // Get slotted mgInputs
-      this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-INPUT-'));
-      // Set inputs readonly or disabled based on form configuration
-      // Othewise listen to events
-      this.mgInputs.forEach(input => {
-        if (this.readonly)
-          input.readonly = true;
-        else if (this.disabled)
-          input.disabled = true;
-        else
-          input.addEventListener('input-valid', this.checkValidity);
-      });
-    };
-    this.identifier = createID('mg-form');
-    this.name = this.identifier;
-    this.readonly = false;
-    this.disabled = false;
-    this.valid = undefined;
-    this.invalid = undefined;
-    this.classCollection = new ClassList(['mg-c-form']);
-    this.requiredMessage = undefined;
-  }
-  handleAttributeChange() {
-    this.setMgInputs();
-    this.setRequiredMessage();
-  }
-  /**
-   * Display input error if it exists.
-   */
-  async displayError() {
-    if (!this.readonly) {
-      this.mgInputs.forEach(input => {
-        var _a;
-        (_a = input.displayError) === null || _a === void 0 ? void 0 : _a.call(input);
-      });
-      this.checkValidity();
+    render() {
+        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" })));
     }
-  }
-  /*************
-   * Lifecycle *
-   *************/
-  /**
-   * Check if component props are well configured on init
-   */
-  componentWillLoad() {
-    // Get locales
-    this.messages = initLocales(this.element).messages;
-    // Get slotted mgButtons
-    this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));
-    // Set button form identifier
-    this.mgButtons.forEach(mgButton => {
-      mgButton.setAttribute('form', this.identifier);
-    });
-    // Set mgInputs
-    this.setMgInputs();
-    // Define required message
-    this.setRequiredMessage();
-    // Check validity when slotted mgInputs are ready
-    Promise.all(this.mgInputs.map(async (input) => {
-      try {
-        await input.componentOnReady();
-      }
-      catch (_a) { } // prevent error with VueJS first render
-    })).then(() => {
-      this.checkValidity();
-    });
-  }
-  /**
-   * Add slot listeners
-   */
-  componentDidLoad() {
-    // Update mgInputs when mgForm content change
-    new MutationObserver(() => {
-      this.setMgInputs();
-    }).observe(this.element, { childList: true });
-  }
-  /**
-   * Render
-   * @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" })));
-  }
-  static get is() { return "mg-form"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-form.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-form.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created."
-        },
-        "attribute": "identifier",
-        "reflect": false,
-        "defaultValue": "createID('mg-form')"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Input name\nIf not set the value equals the identifier"
-        },
-        "attribute": "name",
-        "reflect": false,
-        "defaultValue": "this.identifier"
-      },
-      "readonly": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if form is readonly"
-        },
-        "attribute": "readonly",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define if form is disabled"
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "valid": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define form valid state"
-        },
-        "attribute": "valid",
-        "reflect": false
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define form invalid state"
-        },
-        "attribute": "invalid",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "classCollection": {},
-      "requiredMessage": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "formValid",
-        "name": "form-valid",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted event on form validity check\nTells if form is valid or not"
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }, {
-        "method": "formSubmit",
-        "name": "form-submit",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted event on form submit"
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "displayError": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    static get is() { return "mg-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-form.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-form.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created."
+                },
+                "attribute": "identifier",
+                "reflect": false,
+                "defaultValue": "createID('mg-form')"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input name\nIf not set the value equals the identifier"
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "this.identifier"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if form is readonly"
+                },
+                "attribute": "readonly",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "requiredMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RequiredMessageStatusType",
+                    "resolved": "\"default\" | \"hide\"",
+                    "references": {
+                        "RequiredMessageStatusType": {
+                            "location": "import",
+                            "path": "./mg-form.conf",
+                            "id": "src/components/molecules/mg-form/mg-form.conf.ts::RequiredMessageStatusType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define when required message is display.\nWhen it is unset, component use it internal logic to manage \"required message\" help text display.\nWhen you set the prop to `default`, you override the component internal logique to torce it display \"required message\" help text.\nWhen you set the prop to `hide`, it will prevent the rendering of the message in the component's DOM.\nAs **this element is an accessibility requirement in the view**,\nyou **MUST*** re-implement this message on your own and display it when your form contains required inputs."
+                },
+                "attribute": "required-message",
+                "reflect": false
+            },
+            "ariaRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "AriaRoleType",
+                    "resolved": "\"form\" | \"none\" | \"presentation\" | \"search\"",
+                    "references": {
+                        "AriaRoleType": {
+                            "location": "import",
+                            "path": "./mg-form.conf",
+                            "id": "src/components/molecules/mg-form/mg-form.conf.ts::AriaRoleType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define `<form/>` element aria role\nsee more about aria roles use case: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles"
+                },
+                "attribute": "aria-role",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if form is disabled"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "valid": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define form valid state"
+                },
+                "attribute": "valid",
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define form invalid state"
+                },
+                "attribute": "invalid",
+                "reflect": false
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Display input error if it exists.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "readonly",
-        "methodName": "handleAttributeChange"
-      }, {
-        "propName": "disabled",
-        "methodName": "handleAttributeChange"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "classCollection": {},
+            "requiredMessageText": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "formValid",
+                "name": "form-valid",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted event on form validity check\nTells if form is valid or not"
+                },
+                "complexType": {
+                    "original": "HTMLMgFormElement['valid']",
+                    "resolved": "boolean",
+                    "references": {
+                        "HTMLMgFormElement": {
+                            "location": "global",
+                            "id": "global::HTMLMgFormElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "formSubmit",
+                "name": "form-submit",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted event on form submit"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "displayError": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Display input error if it exists.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "requiredMessage",
+                "methodName": "validateRequiredMessage"
+            }, {
+                "propName": "ariaRole",
+                "methodName": "validateAriaRole"
+            }, {
+                "propName": "readonly",
+                "methodName": "handleAttributeChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleAttributeChange"
+            }, {
+                "propName": "requiredMessage",
+                "methodName": "handleAttributeChange"
+            }];
+    }
 }
 //# sourceMappingURL=mg-form.js.map