@mgdis/mg-components 6.16.0 → 6.18.0

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

@@ -0,0 +1,404 @@
+import { h } from "@stencil/core";
+import { ClassList, isValidString } from "@mgdis/core-ui-helpers/dist/utils";
+import { classReadonly } from "../inputs/mg-input/mg-input.conf";
+export class MgFieldset {
+    constructor() {
+        /**
+         * Fieldset name
+         * If not set the value equals the identifier
+         */
+        this.name = this.identifier;
+        /**
+         * Define if legend is visible
+         */
+        this.legendHide = false;
+        /**
+         * Define if legend border is visible.
+         */
+        this.legendBorderDisplay = false;
+        /**
+         * Define if inputs are readonly
+         */
+        this.readonly = false;
+        /**
+         * Define if inputs are disabled
+         */
+        this.disabled = false;
+        /**
+         * Component classes
+         */
+        this.classCollection = new ClassList(['mg-c-input--fieldset']);
+        /**
+         * Check if fieldset is valid
+         */
+        this.checkValidity = () => {
+            var _a;
+            this.valid = !(this.mgInputs.some(input => input.invalid) || ((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.length) > 0);
+        };
+        /**
+         * 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);
+                }
+            });
+        };
+    }
+    watchLegendBorderDisplay(newValue) {
+        if (newValue && !isValidString(this.legendHeading)) {
+            throw new Error('<mg-fieldset> prop "legendBorderDisplay" must not be paired with the prop "legendHeading".');
+        }
+    }
+    watchReadonly(newValue) {
+        if (newValue) {
+            this.classCollection.add(classReadonly);
+        }
+        else {
+            this.classCollection.delete(classReadonly);
+        }
+    }
+    handleAttributeChange() {
+        this.setMgInputs();
+    }
+    /**
+     * Component is not a candidate for constraint validation.
+     * You can use this method to define the `errorMessage` and set the `valid` state to `false`.
+     * @param errorMessage - error message to display. Use a valid `string` to define an error or `undefined` to delete the error
+     */
+    async setCustomValidity(errorMessage) {
+        if (isValidString(errorMessage)) {
+            this.errorMessage = errorMessage;
+        }
+        else {
+            this.errorMessage = undefined;
+        }
+        this.checkValidity();
+    }
+    /**
+     * Display inputs error if it exists.
+     */
+    async displayError() {
+        if (!this.readonly) {
+            this.mgInputs.forEach(input => {
+                input.displayError();
+            });
+        }
+    }
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad() {
+        this.watchReadonly(this.readonly);
+        this.watchLegendBorderDisplay(this.legendBorderDisplay);
+        this.setMgInputs();
+    }
+    /**
+     * Add slot listeners
+     */
+    componentDidLoad() {
+        // Update mgInputs when mgForm content change
+        const observerOptions = { childList: true, subtree: true };
+        new MutationObserver(mutations => {
+            if (mutations.some(mutation => Object.keys(observerOptions).includes(mutation.type))) {
+                this.setMgInputs();
+            }
+        }).observe(this.element, observerOptions);
+    }
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        return (h("mg-input", { key: 'b8b7c203bb2ed22cc9344389af5a6ae8d85af6d5', label: this.legend, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: !this.legendHide, labelHeading: this.legendHeading, labelBorderDisplay: this.legendHeading && this.legendBorderDisplay, labelHide: this.legendHide, inputsOnBottom: this.legendHeading !== undefined, tooltip: this.tooltip, tooltipPosition: 'label', helpText: this.helpText, errorMessage: !this.valid && isValidString(this.errorMessage) ? this.errorMessage : undefined }, h("span", { key: 'c0e7480b14b0a8e136dd951bdce7275b65b59b48', class: "mg-c-input__input-group" }, h("slot", { key: '021e7b126cef9437e64622d8ef59219b09c06e9f' }))));
+    }
+    static get is() { return "mg-fieldset"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "identifier"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fieldset name\nIf not set the value equals the identifier"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "this.identifier"
+            },
+            "legend": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fieldset legend"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "legend"
+            },
+            "legendHide": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if legend is visible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "legend-hide",
+                "defaultValue": "false"
+            },
+            "legendHeading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "labelHeading",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "references": {
+                        "labelHeading": {
+                            "location": "import",
+                            "path": "../inputs/mg-input/mg-input.conf",
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::labelHeading"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define legend heading, use to define legend with associated semantic"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "legend-heading"
+            },
+            "legendBorderDisplay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if legend border is visible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "legend-border-display",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if inputs are readonly"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if inputs are disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "tooltip": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Add a tooltip message next to the fieldset"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip"
+            },
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Add a help text under the fieldset, usually expected data format and example"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "help-text"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "errorMessage": {},
+            "valid": {},
+            "classCollection": {}
+        };
+    }
+    static get methods() {
+        return {
+            "setCustomValidity": {
+                "complexType": {
+                    "signature": "(errorMessage?: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "errorMessage",
+                            "type": "string",
+                            "docs": "- error message to display. Use a valid `string` to define an error or `undefined` to delete the error"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Component is not a candidate for constraint validation.\nYou can use this method to define the `errorMessage` and set the `valid` state to `false`.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "errorMessage - error message to display. Use a valid `string` to define an error or `undefined` to delete the error"
+                        }]
+                }
+            },
+            "displayError": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Display inputs error if it exists.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "legendBorderDisplay",
+                "methodName": "watchLegendBorderDisplay"
+            }, {
+                "propName": "readonly",
+                "methodName": "watchReadonly"
+            }, {
+                "propName": "readonly",
+                "methodName": "handleAttributeChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "handleAttributeChange"
+            }];
+    }
+}

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

@@ -151,11 +151,12 @@ export class MgForm {
         this.setRequiredMessage();
     }
     /**
-     * Display input error if it exists.
+     * Display inputs/fieldsets errors if it exists.
      */
     async displayError() {
         if (!this.readonly) {
-            this.mgInputs.forEach(input => {
+            const mgFieldsets = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-FIELDSET'));
+            [...mgFieldsets, ...this.mgInputs].forEach(input => {
                 var _a;
                 (_a = input.displayError) === null || _a === void 0 ? void 0 : _a.call(input);
             });
@@ -231,7 +232,7 @@ export class MgForm {
      * @returns HTML Element
      */
     render() {
-        return (h("form", { key: 'd6842c8daef22c0a3747147d99d7bf6920f7623e', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: 'cf5d9f380dfce313811df2dec390543ee19dffcb', innerHTML: this.requiredMessageText }), h("slot", { key: '2f03dd98f92469bc34b8bf9b8a8ef79cf8adf25c' }), !this.readonly && !this.disabled && h("slot", { key: 'c0f38f24c59d70703accf5fc63a2b58a92a952f0', name: "actions" })));
+        return (h("form", { key: '8b698b2a33af00e36691abab5adff5488b736218', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '2e1fb5c4030ecb99d1f18c57d5c3fe238db4d12e', innerHTML: this.requiredMessageText }), h("slot", { key: '568fb8ac9ab0e3521899c05472592ebd15cc91fa' }), !this.readonly && !this.disabled && h("slot", { key: 'd4f38320de58f3b1d491083a34d1b5366d22b935', name: "actions" })));
     }
     static get is() { return "mg-form"; }
     static get encapsulation() { return "shadow"; }
@@ -249,7 +250,6 @@ export class MgForm {
         return {
             "identifier": {
                 "type": "string",
-                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -265,11 +265,11 @@ export class MgForm {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "identifier",
                 "defaultValue": "createID('mg-form')"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -285,11 +285,11 @@ export class MgForm {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "name",
                 "defaultValue": "this.identifier"
             },
             "readonly": {
                 "type": "boolean",
-                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -305,11 +305,11 @@ export class MgForm {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "readonly",
                 "defaultValue": "false"
             },
             "requiredMessage": {
                 "type": "string",
-                "attribute": "required-message",
                 "mutable": false,
                 "complexType": {
                     "original": "RequiredMessageStatusType",
@@ -330,11 +330,11 @@ export class MgForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "required-message"
             },
             "ariaRole": {
                 "type": "string",
-                "attribute": "aria-role",
                 "mutable": false,
                 "complexType": {
                     "original": "AriaRoleType",
@@ -355,11 +355,11 @@ export class MgForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "aria-role"
             },
             "labelOnTop": {
                 "type": "boolean",
-                "attribute": "label-on-top",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -375,11 +375,11 @@ export class MgForm {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-on-top",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -395,11 +395,11 @@ export class MgForm {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "valid": {
                 "type": "boolean",
-                "attribute": "valid",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -414,11 +414,11 @@ export class MgForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "valid"
             },
             "invalid": {
                 "type": "boolean",
-                "attribute": "invalid",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -433,7 +433,8 @@ export class MgForm {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "invalid"
             }
         };
     }
@@ -506,12 +507,20 @@ export class MgForm {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
+                        },
+                        "Node": {
+                            "location": "global",
+                            "id": "global::Node"
+                        },
+                        "HTMLMgFieldsetElement": {
+                            "location": "global",
+                            "id": "global::HTMLMgFieldsetElement"
                         }
                     },
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Display input error if it exists.",
+                    "text": "Display inputs/fieldsets errors if it exists.",
                     "tags": []
                 }
             },

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

@@ -81,7 +81,7 @@ export class MgIllustratedMessage {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'b7cea46c2fad219e02009fa44c772c0a09a5234f', class: this.classCollection.join() }, h("div", { key: '56b956ee405886ef2de2ef413ac1bc6902f287b3', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: '33183d226a2443ccf1763ebff4c48f670d1d77ec', name: "illustration" })), h("div", { key: '69a7e034da7e2aef8dc488f9275b4546e905513c', class: "mg-c-illustrated-message__slots" }, h("slot", { key: '0eb9d5126f3d13380ea0a13a9eb754a7543e4178', name: "title" }), h("slot", { key: '088d3bae3be0d5e5d9fc8c07fee42dda39177fd6', name: "details" }))));
+        return (h("div", { key: 'c9d8c8bfd2792b1cf5e78ab9d168d597b20e9a1e', class: this.classCollection.join() }, h("div", { key: 'cc8fa03147b9e59e6e8e015be9ed2b8dddd92ded', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: '83a4ec2223c4e74511beb7c0abfa10e77cee425d', name: "illustration" })), h("div", { key: 'dbb4d13ca5324cab889fa2acc9b9b22522d7a8ec', class: "mg-c-illustrated-message__slots" }, h("slot", { key: '9e74d84becf29539ec9c37e8ad1e317714f3c86c', name: "title" }), h("slot", { key: 'ae97d25c19b76ca092560d2555ebd6a87f542ffe', name: "details" }))));
     }
     static get is() { return "mg-illustrated-message"; }
     static get encapsulation() { return "shadow"; }
@@ -99,7 +99,6 @@ export class MgIllustratedMessage {
         return {
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "IllustratedMessageSizeType",
@@ -121,11 +120,11 @@ export class MgIllustratedMessage {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             },
             "direction": {
                 "type": "string",
-                "attribute": "direction",
                 "mutable": false,
                 "complexType": {
                     "original": "IllustratedMessageDirectionType",
@@ -147,6 +146,7 @@ export class MgIllustratedMessage {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "direction",
                 "defaultValue": "'vertical'"
             }
         };

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

@@ -29,7 +29,7 @@ export class MgLoader {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'b74028455b7003824fa5618b1751d05a91ab7071', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '204acdb8f881b348148020214c05269878852c4f', icon: "loader", spin: true }), h("span", { key: '40f1792354df01ec9af61ab128575ea166f34cb5', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgress)));
+        return (h("div", { key: '739b4cbacd8a8da056dbb1445c40fac2cf26766a', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '95d3cbf26fcd6dbf0dad4853bf55aa66385f1aba', icon: "loader", spin: true }), h("span", { key: 'f6322cd3054d8976bd2ec24f86a2d6bb60ca7ae1', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgress)));
     }
     static get is() { return "mg-loader"; }
     static get encapsulation() { return "shadow"; }
@@ -47,7 +47,6 @@ export class MgLoader {
         return {
             "message": {
                 "type": "string",
-                "attribute": "message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -62,11 +61,11 @@ export class MgLoader {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "message"
             },
             "messageHide": {
                 "type": "boolean",
-                "attribute": "message-hide",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -82,6 +81,7 @@ export class MgLoader {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "message-hide",
                 "defaultValue": "false"
             }
         };