@mgdis/mg-components 6.16.0 → 6.18.0

package/dist/components/mg-fieldset.js

@@ -0,0 +1,209 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { C as ClassList, i as isValidString } from './index2.js';
+import { d as defineCustomElement$5, c as classReadonly } from './mg-input2.js';
+import { d as defineCustomElement$6 } from './mg-icon2.js';
+import { d as defineCustomElement$4 } from './mg-input-title2.js';
+import { d as defineCustomElement$3 } from './mg-tooltip2.js';
+import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
+
+const MgFieldset$1 = /*@__PURE__*/ proxyCustomElement(class MgFieldset extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        /**
+         * 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' }))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "legendBorderDisplay": ["watchLegendBorderDisplay"],
+        "readonly": ["watchReadonly", "handleAttributeChange"],
+        "disabled": ["handleAttributeChange"]
+    }; }
+}, [257, "mg-fieldset", {
+        "identifier": [1],
+        "name": [1],
+        "legend": [1],
+        "legendHide": [4, "legend-hide"],
+        "legendHeading": [1, "legend-heading"],
+        "legendBorderDisplay": [4, "legend-border-display"],
+        "readonly": [4],
+        "disabled": [4],
+        "tooltip": [1],
+        "helpText": [1, "help-text"],
+        "errorMessage": [32],
+        "valid": [32],
+        "classCollection": [32],
+        "setCustomValidity": [64],
+        "displayError": [64]
+    }, undefined, {
+        "legendBorderDisplay": ["watchLegendBorderDisplay"],
+        "readonly": ["watchReadonly", "handleAttributeChange"],
+        "disabled": ["handleAttributeChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-fieldset", "mg-icon", "mg-input", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-fieldset":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgFieldset$1);
+            }
+            break;
+        case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "mg-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "mg-input-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "mg-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "mg-tooltip-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const MgFieldset = MgFieldset$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MgFieldset, defineCustomElement };

package/dist/components/mg-form.js

@@ -14,9 +14,11 @@ const requiredMessageStatus = ['default', 'hide'];
 const mgFormCss = ".mg-u-form-legacy{--mg-c-form-inputs-title-width:calc(100% / 3 - 20px)}.mg-u-is-asterisk{color:var(--mg-b-color-danger)}/*!\n * @prop --mg-c-form-inputs-title-width: Defines the width of the input title. Fallback on `calc(28 * var(--mg-b-size-8))`.\n */.mg-c-form{--mg-c-input-title-width:var(--mg-c-form-inputs-title-width, calc(28 * var(--mg-b-size-8)));--mg-c-input-margin-bottom:var(--mg-b-size-16);--mg-c-input-title-horizontal-space:var(--mg-b-size-32)}.mg-c-form.mg-c-form--all-required{--mg-c-input-title-display:none}.mg-c-form.mg-c-form--label-on-top{--mg-c-input-margin-bottom:var(--mg-b-size-24)}.mg-c-form>p{font-size:var(--mg-b-font-size-small)}";
 
 const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.formValid = createEvent(this, "form-valid", 7);
         this.formSubmit = createEvent(this, "form-submit", 7);
@@ -164,11 +166,12 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
         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);
             });
@@ -244,7 +247,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class MgForm extends HTMLEleme
      * @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" })));
     }
     get element() { return this; }
     static get watchers() { return {