@mgdis/mg-components 6.17.0 → 6.18.0

package/dist/cjs/mg-input-rich-text-editor.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index$1 = require('./index-DCZEYvlH.js');
 var index = require('./index-CpENFzEo.js');
-var mgInput_conf = require('./mg-input.conf-WTsvDfpC.js');
+var mgInput_conf = require('./mg-input.conf-HYIzRsy7.js');
 var index$2 = require('./index-TUElr4Wv.js');
 
 /** Detect free variable `global` from Node.js. */
@@ -16389,6 +16389,7 @@ const MgInputRichTextEditor = class {
         this.valueChange = index$1.createEvent(this, "value-change", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        this.customErrorMessage = { lock: false };
         // Classes
         this.classFocus = 'mg-u-is-focused';
         /**
@@ -16454,20 +16455,23 @@ const MgInputRichTextEditor = class {
         };
         /**
          * Set input error message
-         * @param errorMessage - errorMessage override
+         * @param fromSetErrorContext - context come from `setError` method
          */
-        this.setErrorMessage = (errorMessage) => {
+        this.setErrorMessage = (fromSetErrorContext = false) => {
+            // Set error message
             this.errorMessage = undefined;
-            if (this.valid)
-                return;
-            else if (index.isValidString(errorMessage)) {
-                this.errorMessage = errorMessage;
-            }
-            else if (this.required && this.isEmpty()) {
-                this.errorMessage = this.messages.errors.required;
-            }
-            else if (!this.getPatternValidity()) {
-                this.errorMessage = this.patternErrorMessage;
+            // Does have a new custom error message
+            if (!this.valid) {
+                // Does have a new custom error message OR does have a custom error message locked
+                if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
+                    this.errorMessage = this.customErrorMessage.message;
+                }
+                else if (this.required && this.isEmpty()) {
+                    this.errorMessage = this.messages.errors.required;
+                }
+                else if (!this.getPatternValidity()) {
+                    this.errorMessage = this.patternErrorMessage;
+                }
             }
         };
         /**
@@ -16595,17 +16599,22 @@ const MgInputRichTextEditor = class {
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    async setError(valid, errorMessage) {
+    async setError(valid, errorMessage, errorMessageLock = false) {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-rich-text-editor> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!index.isValidString(errorMessage)) {
+        else if (errorMessage !== undefined && !index.isValidString(errorMessage)) {
             throw new Error('<mg-input-rich-text-editor> method "setError()" param "errorMessage" must be a string.');
         }
         else {
+            this.customErrorMessage = {
+                lock: valid ? false : errorMessageLock,
+                message: valid ? undefined : errorMessage,
+            };
             this.setValidity(valid);
-            this.setErrorMessage(valid ? undefined : errorMessage);
+            this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
         }
     }
@@ -16624,6 +16633,8 @@ const MgInputRichTextEditor = class {
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
+                    // unlock validity check by reseting customErrorMessage
+                    this.customErrorMessage = { lock: false };
                     this.checkValidity();
                     this.errorMessage = undefined;
                     this.hasDisplayedError = false;
@@ -16637,10 +16648,12 @@ const MgInputRichTextEditor = class {
      * @param newValue - valid new value
      */
     setValidity(newValue) {
-        const oldValidValue = this.valid;
-        this.valid = newValue;
+        const oldValue = this.valid;
+        if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
+            this.valid = newValue;
+        }
         this.invalid = !this.valid;
-        if (this.valid !== oldValidValue) {
+        if (this.valid !== oldValue) {
             this.inputValid.emit(this.valid);
         }
     }
@@ -16689,7 +16702,7 @@ const MgInputRichTextEditor = class {
      * @returns HTML mg-input Element
      */
     render() {
-        return (index$1.h("mg-input", { key: 'b7f7fe282aa00b695418fe7f055955045bbd932d', identifier: this.identifier, class: this.classCollection.join(), label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.hasDisplayedError ? this.errorMessage : undefined }, this.readonly ? (index$1.h("div", { class: "mg-c-input__readonly-value", innerHTML: this.value })) : (index$1.h("div", { ref: el => {
+        return (index$1.h("mg-input", { key: '2f8f244cb60996c9cbe891b04168b5aea420d3a0', identifier: this.identifier, class: this.classCollection.join(), label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, helpText: this.helpText, errorMessage: this.hasDisplayedError ? this.errorMessage : undefined }, this.readonly ? (index$1.h("div", { class: "mg-c-input__readonly-value", innerHTML: this.value })) : (index$1.h("div", { ref: el => {
                 this.wrapperElement = el;
             }, id: this.identifier, class: "mg-c-input__wrapper" }, index$1.h("div", null)))));
     }

package/dist/cjs/{mg-input.conf-WTsvDfpC.js → mg-input.conf-HYIzRsy7.js}

@@ -8,6 +8,10 @@ const widths = [2, 4, 16, 'full'];
  * Possible tootltip postions
  */
 const tooltipPositions = ['input', 'label'];
+/**
+ * Possible label headings
+ */
+const labelHeadings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 const classFieldset = 'mg-c-input--fieldset';
 const classDisabled = 'mg-c-input--disabled';
 const classReadonly = 'mg-c-input--readonly';
@@ -17,5 +21,6 @@ exports.classDisabled = classDisabled;
 exports.classFieldset = classFieldset;
 exports.classReadonly = classReadonly;
 exports.classVerticalList = classVerticalList;
+exports.labelHeadings = labelHeadings;
 exports.tooltipPositions = tooltipPositions;
 exports.widths = widths;

package/dist/cjs/mg-loader.cjs.entry.js

@@ -35,7 +35,7 @@ const MgLoader = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h("div", { key: 'b74028455b7003824fa5618b1751d05a91ab7071', class: "mg-c-loader", "aria-live": "polite" }, index.h("mg-icon", { key: '204acdb8f881b348148020214c05269878852c4f', icon: "loader", spin: true }), index.h("span", { key: '40f1792354df01ec9af61ab128575ea166f34cb5', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgress)));
+        return (index.h("div", { key: '739b4cbacd8a8da056dbb1445c40fac2cf26766a', class: "mg-c-loader", "aria-live": "polite" }, index.h("mg-icon", { key: '95d3cbf26fcd6dbf0dad4853bf55aa66385f1aba', icon: "loader", spin: true }), index.h("span", { key: 'f6322cd3054d8976bd2ec24f86a2d6bb60ca7ae1', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgress)));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mg-progress.cjs.entry.js

@@ -75,7 +75,7 @@ const MgProgress = class {
      * @returns HTML Element
      */
     render() {
-        return (index.h(index.Host, { key: '62c66dbd93249bfde3eb8ff449b49884edfe49c3', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, index.h("div", { key: 'b349c9d7358086ca4668705a1935fd8bbdb86afa', class: "mg-c-progress" }, index.h("div", { key: '57cc19d07c0f006f8ecf3a1f86ec12e37ffd8d6b', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, index.h("div", { key: 'b4c49d94d9cfe2e1a6d8013aa4a39cde51b36d04', class: "mg-c-progress__fill", style: {
+        return (index.h(index.Host, { key: '8e6c727e9416fa777fd94b32d618a9137e8e08f7', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, index.h("div", { key: 'ac42ee9c5dda55d70aad7391895e4a013aaa27f9', class: "mg-c-progress" }, index.h("div", { key: '34c77bc6c133bc59b9daa68d7d6c8534f13f7d37', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, index.h("div", { key: '7ea03a3f0c54ca0c81616c7c070d178a510dd7e1', class: "mg-c-progress__fill", style: {
                 width: `${Math.round(((this.value - this.min) / (this.max - this.min)) * 100)}%`,
             } })))));
     }

package/dist/collection/collection-manifest.json

@@ -29,6 +29,7 @@
     "components/molecules/mg-action-more/mg-action-more.js",
     "components/molecules/mg-alert/mg-alert.js",
     "components/molecules/mg-details/mg-details.js",
+    "components/molecules/mg-fieldset/mg-fieldset.js",
     "components/molecules/mg-form/mg-form.js",
     "components/molecules/mg-illustrated-message/mg-illustrated-message.js",
     "components/molecules/mg-loader/mg-loader.js",

package/dist/collection/components/molecules/inputs/mg-input/mg-input.conf.js

@@ -6,6 +6,10 @@ export const widths = [2, 4, 16, 'full'];
  * Possible tootltip postions
  */
 export const tooltipPositions = ['input', 'label'];
+/**
+ * Possible label headings
+ */
+export const labelHeadings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 export const classFieldset = 'mg-c-input--fieldset';
 export const classDisabled = 'mg-c-input--disabled';
 export const classReadonly = 'mg-c-input--readonly';

package/dist/collection/components/molecules/inputs/mg-input/mg-input.js

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { isValideID, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
-import { tooltipPositions, classFieldset, classReadonly, classDisabled, classVerticalList } from "./mg-input.conf";
+import { tooltipPositions, classFieldset, classReadonly, classDisabled, classVerticalList, labelHeadings } from "./mg-input.conf";
 /**
  * @slot - Input content
  */
@@ -13,6 +13,9 @@ export class MgInput {
         this.classInput = 'mg-c-input';
         this.classHasError = 'mg-c-input--has-error';
         this.classLabelOnTop = 'mg-c-input--label-on-top';
+        this.classHasHeading = 'mg-c-input--has-heading';
+        this.classLabelBorderDisplay = 'mg-c-input--label-border-display';
+        this.classInputsOnBottom = 'mg-c-input--inputs-on-bottom';
         /**
          * Define if label is displayed on top
          */
@@ -21,6 +24,11 @@ export class MgInput {
          * Define if label is visible
          */
         this.labelHide = false;
+        /**
+         * Define if label border is visible
+         * You must pair this mode with `labelOnTop`and `fieldset` class
+         */
+        this.labelBorderDisplay = false;
         /**
          * Define tooltip position
          */
@@ -29,6 +37,10 @@ export class MgInput {
          * Define if input is required
          */
         this.required = false;
+        /**
+         * Display inputs after help-text and error message
+         */
+        this.inputsOnBottom = false;
         /**
          * Define aria-describedby ids to link with
          */
@@ -49,11 +61,44 @@ export class MgInput {
          * Element is disabled
          */
         this.isVerticalList = false;
+        /************
+         * Methods *
+         ************/
+        /**
+         * Update element aria-describedby
+         * @param element - element to update
+         * @param ariaDescribedbyIDs - ariaDescribedbyIDs references
+         */
+        this.updateElementAriaDescribedby = (element, ariaDescribedbyIDs) => {
+            if (ariaDescribedbyIDs.size > 0) {
+                element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));
+            }
+            else {
+                element.removeAttribute('aria-describedby');
+            }
+        };
         /**
          * Get tooltip node
          * @returns mg-tooltip
          */
         this.renderTooltip = () => (h("mg-tooltip", { identifier: `${this.identifier}-tooltip`, message: this.tooltip }, h("mg-icon", { icon: "info-circle" })));
+        /**
+         * Get input container element
+         * @returns ordered elements
+         */
+        this.inputContainerElements = () => {
+            const elements = [
+                this.helptextMessageSlotElement && (h("div", { class: "mg-c-input__help-text" }, h("slot", { name: this.slotHelpText }))),
+                !this.isDisabled && this.errorMessage && (h("div", { class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { name: this.slotError }))),
+            ];
+            const inputSlot = (h("div", { class: "mg-c-input__input" }, h("slot", null), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()));
+            if (this.inputsOnBottom) {
+                return [...elements, inputSlot];
+            }
+            else {
+                return [inputSlot, ...elements];
+            }
+        };
     }
     watchIdentifier(newValue) {
         if (!isValidString(newValue)) {
@@ -80,6 +125,26 @@ export class MgInput {
             throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide".');
         }
     }
+    watchlabelHeading(newValue) {
+        if (this.isFieldset && this.labelOnTop && labelHeadings.includes(newValue)) {
+            this.element.classList.add(this.classHasHeading);
+        }
+        else {
+            if ((!this.isFieldset && newValue !== undefined) || typeof newValue === 'string') {
+                throw new Error(`<mg-input> prop "labelHeading" must be used with a fieldset and be one of: ${labelHeadings.join(', ')}. Passed value: ${toString(newValue)}.`);
+            }
+            this.labelHeading = undefined;
+            this.element.classList.remove(this.classHasHeading);
+        }
+    }
+    watchLabelBorderDisplay(newValue) {
+        if (this.isFieldset && this.labelOnTop && newValue) {
+            this.element.classList.add(this.classLabelBorderDisplay);
+        }
+        else {
+            this.element.classList.remove(this.classLabelBorderDisplay);
+        }
+    }
     watchTooltipPosition(newValue) {
         if (!tooltipPositions.includes(newValue)) {
             throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}. Passed value: ${toString(newValue)}.`);
@@ -99,7 +164,7 @@ export class MgInput {
     }
     watchHelpText(newValue) {
         var _a;
-        if (newValue && !this.isReadonly) {
+        if (isValidString(newValue) && !this.isReadonly) {
             this.renderHelpText();
         }
         else {
@@ -107,6 +172,14 @@ export class MgInput {
             this.helptextMessageSlotElement = undefined;
         }
     }
+    watchInputsOnBottom(newValue) {
+        if (newValue) {
+            this.element.classList.add(this.classInputsOnBottom);
+        }
+        else {
+            this.element.classList.remove(this.classInputsOnBottom);
+        }
+    }
     watchAriaDescribedbyIDs() {
         if (this.isReadonly) {
             return;
@@ -122,23 +195,26 @@ export class MgInput {
         // a11y IDs
         const ariaDescribedbyIDs = new Set(this.ariaDescribedbyIDs);
         // Help text
-        if (this.helpText !== undefined) {
+        if (isValidString(this.helpText)) {
             this.renderHelpText();
             if (!ariaDescribedbyIDs.has(this.helpTextId))
                 ariaDescribedbyIDs.add(this.helpTextId);
         }
         // Error Message
-        if (this.errorMessage !== undefined) {
+        if (isValidString(this.errorMessage)) {
             this.renderErrorMessage();
             if (!ariaDescribedbyIDs.has(this.helpTextErrorId))
                 ariaDescribedbyIDs.add(this.helpTextErrorId);
         }
-        this.element.querySelectorAll('input,select,textarea,[role="switch"]').forEach(element => {
-            if (ariaDescribedbyIDs.size > 0) {
-                element.setAttribute('aria-describedby', Array.from(ariaDescribedbyIDs).join(' '));
-            }
-            else {
-                element.removeAttribute('aria-describedby');
+        const inputs = this.element.querySelectorAll('input,select,textarea,[role="switch"]');
+        inputs.forEach((element) => {
+            this.updateElementAriaDescribedby(element, ariaDescribedbyIDs);
+        });
+        // use timeout to await for legend render for componentWillLoad hook
+        setTimeout(() => {
+            const legend = this.element.querySelector('legend');
+            if (legend !== null) {
+                this.updateElementAriaDescribedby(legend, ariaDescribedbyIDs);
             }
         });
     }
@@ -168,9 +244,6 @@ export class MgInput {
             this.renderLabel();
         }
     }
-    /************
-     * Methods *
-     ************/
     /**
      * Render input label
      */
@@ -190,11 +263,21 @@ export class MgInput {
             labelSlotElement.setAttribute(attr, val);
         });
         // create label element
-        const label = document.createElement('span');
-        label.classList.add('mg-c-input-title__text');
-        label.textContent = this.label;
-        labelSlotElement.appendChild(label);
+        if (labelHeadings.includes(this.labelHeading)) {
+            let label = this.element.shadowRoot.querySelector(this.labelHeading);
+            if (label === null) {
+                label = document.createElement(this.labelHeading);
+                label.classList.add('mg-c-input-title__text');
+                labelSlotElement.appendChild(label);
+            }
+            label.textContent = this.label;
+        }
+        else {
+            labelSlotElement.textContent = this.label;
+        }
         this.element.appendChild(labelSlotElement);
+        // update aria-describedby
+        this.watchAriaDescribedbyIDs();
     }
     /**
      * Render error message
@@ -237,6 +320,9 @@ export class MgInput {
         this.watchTooltipPosition(this.tooltipPosition);
         this.watchHelpText(this.helpText);
         this.watchErrorMessage(this.errorMessage);
+        this.watchInputsOnBottom(this.inputsOnBottom);
+        this.watchlabelHeading(this.labelHeading);
+        this.watchLabelBorderDisplay(this.labelBorderDisplay);
     }
     /**
      * Validate slots
@@ -253,7 +339,7 @@ export class MgInput {
      */
     render() {
         const isGroup = this.isFieldset && !this.isReadonly;
-        return (h(Host, { key: '7c4c22aaa8f8d250eafa9159a103a11e637b0cca', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '2215e7b2d96e08507579a39d8e05b3e8a3d901fb', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'a4dbf4e36dd3ae5437d6dcb05d807f4faa0924b7', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '8e382a4857f469a9d6f77cad613183798df4d1e1', class: "mg-c-input__input-container" }, h("div", { key: 'f9897f90d44aab19614d4d40d77a8eb270c92847', class: "mg-c-input__input" }, h("slot", { key: 'c8d809d4ff0d0e660849825f016f9267da3a2d7e' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (h("div", { key: 'cebd6c083d088aebcdae6f032c6cdcf2387c3e27', class: "mg-c-input__help-text" }, h("slot", { key: '923fcc78b309d197e32522052b297ef0f58b1495', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (h("div", { key: 'e706bff54ce21191a8c0940c60f6e99a91cfb9ec', class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { key: '6524debd3640df7b5e73ef4aa4415569eef1ecd8', name: this.slotError }))))));
+        return (h(Host, { key: 'fbab18280a709407c83f324127e8de6cbb05fe7c', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: 'ac0924c244b9fa87d02e659a5710ee93d12a202f', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'c825af33ba0a6c209d02d6487422347f7d8acfed', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '805e1eedfdea132f3ea4fd11da761810a3d7c939', class: "mg-c-input__input-container" }, this.inputContainerElements())));
     }
     static get is() { return "mg-input"; }
     static get encapsulation() { return "shadow"; }
@@ -347,6 +433,51 @@ export class MgInput {
                 "attribute": "label-hide",
                 "defaultValue": "false"
             },
+            "labelHeading": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "labelHeading",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "references": {
+                        "labelHeading": {
+                            "location": "import",
+                            "path": "./mg-input.conf",
+                            "id": "src/components/molecules/inputs/mg-input/mg-input.conf.ts::labelHeading"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define label heading, use to define label with associated semantic\nYou must pair this mode with `labelOnTop`and `fieldset` class"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-heading"
+            },
+            "labelBorderDisplay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define if label border is visible\nYou must pair this mode with `labelOnTop`and `fieldset` class"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-border-display",
+                "defaultValue": "false"
+            },
             "tooltip": {
                 "type": "string",
                 "mutable": false,
@@ -450,6 +581,26 @@ export class MgInput {
                 "reflect": false,
                 "attribute": "help-text"
             },
+            "inputsOnBottom": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Display inputs after help-text and error message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inputs-on-bottom",
+                "defaultValue": "false"
+            },
             "ariaDescribedbyIDs": {
                 "type": "string",
                 "mutable": true,
@@ -494,6 +645,12 @@ export class MgInput {
             }, {
                 "propName": "labelOnTop",
                 "methodName": "watchLabelConfig"
+            }, {
+                "propName": "labelHeading",
+                "methodName": "watchlabelHeading"
+            }, {
+                "propName": "labelBorderDisplay",
+                "methodName": "watchLabelBorderDisplay"
             }, {
                 "propName": "tooltipPosition",
                 "methodName": "watchTooltipPosition"
@@ -503,6 +660,9 @@ export class MgInput {
             }, {
                 "propName": "helpText",
                 "methodName": "watchHelpText"
+            }, {
+                "propName": "inputsOnBottom",
+                "methodName": "watchInputsOnBottom"
             }, {
                 "propName": "identifier",
                 "methodName": "watchAriaDescribedbyIDs"

package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js

@@ -76,7 +76,7 @@ export class MgInputCheckboxPaginated {
     render() {
         const listId = formatID(this.messages.label);
         const tabId = 'tab-info';
-        return (h(Host, { key: '8e58037e78fcd7990bbd681053758b0ec4d0c4e0' }, h("slot", { key: 'c64e9c8f65a526b2289d3663fff64df02a282c96', name: "header-action" }), h("div", { key: 'c5953bb7e970384b231865d7fa4708fe2da4b407', class: "mg-c-input__tabs-content" }, h("p", { key: 'c0899cb7e7a6dea282f05aacf0fb05acd60a9d20', id: tabId, class: { 'mg-c-input__popover-info': true, 'mg-u-visually-hidden': this.items.length !== 0 }, "aria-live": this.items.length !== 0 ? 'polite' : undefined }, this.items.length === 0 ? this.messages.noValue : this.messages.values.replace('{count}', this.items.length.toString())), this.items.length > 0 && (h(MgInputCheckboxList, { key: '0bb1b4160d75b00d3fb5d9c08f3a560a16105e57', checkboxes: this.items, labelledby: tabId, id: listId, disabled: this.disabled, name: this.name, invalid: this.invalid })), this.hasNext() && (h("mg-button", { key: "load-more", variant: "flat", class: "mg-c-input__load-more", tabIndex: -1, "full-width": true, onClick: this.handleLoadMore, "aria-controls": listId }, h("mg-icon", { key: 'fd1560d7254f437f284925427130f69539b5fd3b', icon: "chevron-down" }), this.messages.showMore)))));
+        return (h(Host, { key: '233ab4fca3f4a3121bc60650ac2f8ae06d47e6e5' }, h("slot", { key: '7d1af8c712928c06953743fc5c182e51d9a6256b', name: "header-action" }), h("div", { key: '95641bd218e36422a6b5b4ead8dd5498e8ac5fa4', class: "mg-c-input__tabs-content" }, h("p", { key: '34814dd1afc9f871cd032500b931e692d63cbd25', id: tabId, class: { 'mg-c-input__popover-info': true, 'mg-u-visually-hidden': this.items.length !== 0 }, "aria-live": this.items.length !== 0 ? 'polite' : undefined }, this.items.length === 0 ? this.messages.noValue : this.messages.values.replace('{count}', this.items.length.toString())), this.items.length > 0 && (h(MgInputCheckboxList, { key: '621077f291a401737157ad0cd9b9348537ef8bdc', checkboxes: this.items, labelledby: tabId, id: listId, disabled: this.disabled, name: this.name, invalid: this.invalid })), this.hasNext() && (h("mg-button", { key: "load-more", variant: "flat", class: "mg-c-input__load-more", tabIndex: -1, "full-width": true, onClick: this.handleLoadMore, "aria-controls": listId }, h("mg-icon", { key: 'cb00bbeb1575475b184cc9623db6c4cefc56c26a', icon: "chevron-down" }), this.messages.showMore)))));
     }
     static get is() { return "mg-input-checkbox-paginated"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js

@@ -16,6 +16,7 @@ export class MgInputCheckbox {
     constructor() {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        this.customErrorMessage = { lock: false };
         this.mode = 'custom';
         // style
         this.baseClassName = 'mg-c-input--checkbox';
@@ -233,17 +234,20 @@ export class MgInputCheckbox {
         };
         /**
          * Set input error message
-         * @param displayError - dispay error condition
-         * @param errorMessage - errorMessage override
+         * @param fromSetErrorContext - context come from `setError` method
          */
-        this.setErrorMessage = (displayError = true, errorMessage) => {
+        this.setErrorMessage = (fromSetErrorContext = false) => {
             // Set error message
             this.errorMessage = undefined;
-            if (displayError && !this.valid) {
-                if (errorMessage !== undefined)
-                    this.errorMessage = errorMessage;
-                else if (!this.validateRequired())
+            if (!this.valid) {
+                // Does have a new custom error message OR does have a custom error message locked
+                if (fromSetErrorContext || (this.customErrorMessage.lock && this.customErrorMessage.message !== undefined)) {
+                    this.errorMessage = this.customErrorMessage.message;
+                }
+                // required
+                else if (!this.validateRequired()) {
                     this.errorMessage = this.messages.errors.required;
+                }
             }
         };
         /**
@@ -337,7 +341,7 @@ export class MgInputCheckbox {
         this.checkValidity();
         if (this.hasDisplayedError) {
             this.hasDisplayedError = prop !== 'required';
-            this.setErrorMessage(this.hasDisplayedError);
+            this.setErrorMessage();
         }
         this.setButtonTextKey();
     }
@@ -401,17 +405,22 @@ export class MgInputCheckbox {
      * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
      * @param valid - value indicating the validity
      * @param errorMessage - the error message to display
+     * @param errorMessageLock - lock the error message and validity state
      */
-    async setError(valid, errorMessage) {
+    async setError(valid, errorMessage, errorMessageLock = false) {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!isValidString(errorMessage)) {
+        else if (errorMessage !== undefined && !isValidString(errorMessage)) {
             throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string.');
         }
         else {
+            this.customErrorMessage = {
+                lock: valid ? false : errorMessageLock,
+                message: valid ? undefined : errorMessage,
+            };
             this.setValidity(valid);
-            this.setErrorMessage(undefined, valid ? undefined : errorMessage);
+            this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
         }
     }
@@ -429,6 +438,8 @@ export class MgInputCheckbox {
             // - Keep everything in sync both inside and outside the component
             return new Promise(resolve => {
                 requestAnimationFrame(() => {
+                    // unlock validity check by reseting customErrorMessage
+                    this.customErrorMessage = { lock: false };
                     this.checkValidity();
                     this.errorMessage = undefined;
                     this.hasDisplayedError = false;
@@ -442,11 +453,13 @@ export class MgInputCheckbox {
      * @param newValue - valid new value
      */
     setValidity(newValue) {
-        const oldValidValue = this.valid;
-        this.valid = newValue;
+        const oldValue = this.valid;
+        if (!this.customErrorMessage.lock || (this.customErrorMessage.message !== undefined && !newValue)) {
+            this.valid = newValue;
+        }
         this.invalid = !this.valid;
         // We need to send valid event even if it is the same value
-        if (this.valid !== oldValidValue)
+        if (this.valid !== oldValue)
             this.inputValid.emit(this.valid);
     }
     /**
@@ -565,7 +578,7 @@ export class MgInputCheckbox {
         else {
             inputContent = this.renderCheckboxMulti();
         }
-        return (h("mg-input", { key: '84d13ac702497773013daa72357e4d1dcf4ebb30', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
+        return (h("mg-input", { key: '5addea288b5c87fec33a56449d14f861aefd465d', label: this.label, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: !this.readonly ? this.required : undefined, tooltip: this.tooltip, tooltipPosition: this.readonly && readonlyValue.length === 0 ? 'label' : this.tooltipPosition, helpText: !this.readonly ? this.helpText : undefined, errorMessage: !this.readonly ? this.errorMessage : undefined }, inputContent));
     }
     static get is() { return "mg-input-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -1081,7 +1094,7 @@ export class MgInputCheckbox {
             },
             "setError": {
                 "complexType": {
-                    "signature": "(valid: MgInputCheckbox[\"valid\"], errorMessage: string) => Promise<void>",
+                    "signature": "(valid: MgInputCheckbox[\"valid\"], errorMessage?: string, errorMessageLock?: boolean) => Promise<void>",
                     "parameters": [{
                             "name": "valid",
                             "type": "boolean",
@@ -1090,6 +1103,10 @@ export class MgInputCheckbox {
                             "name": "errorMessage",
                             "type": "string",
                             "docs": "- the error message to display"
+                        }, {
+                            "name": "errorMessageLock",
+                            "type": "boolean",
+                            "docs": "- lock the error message and validity state"
                         }],
                     "references": {
                         "Promise": {
@@ -1111,6 +1128,9 @@ export class MgInputCheckbox {
                         }, {
                             "name": "param",
                             "text": "errorMessage - the error message to display"
+                        }, {
+                            "name": "param",
+                            "text": "errorMessageLock - lock the error message and validity state"
                         }]
                 }
             },