@mgdis/mg-components 6.17.0 → 6.18.0

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

@@ -65,7 +65,7 @@ export class MgProgress {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '62c66dbd93249bfde3eb8ff449b49884edfe49c3', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: 'b349c9d7358086ca4668705a1935fd8bbdb86afa', class: "mg-c-progress" }, h("div", { key: '57cc19d07c0f006f8ecf3a1f86ec12e37ffd8d6b', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, h("div", { key: 'b4c49d94d9cfe2e1a6d8013aa4a39cde51b36d04', class: "mg-c-progress__fill", style: {
+        return (h(Host, { key: '8e6c727e9416fa777fd94b32d618a9137e8e08f7', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: 'ac42ee9c5dda55d70aad7391895e4a013aaa27f9', class: "mg-c-progress" }, h("div", { key: '34c77bc6c133bc59b9daa68d7d6c8534f13f7d37', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, 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/components/molecules/mg-skip-links/mg-skip-links.js

@@ -36,7 +36,7 @@ export class MgSkipLinks {
      * @returns HTML Element
      */
     render() {
-        return (h("nav", { key: '66ea9a2abfd1db7a1c7c46e9cdcd15af013ea406', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: '07f404865c3ad0d815b87e32a46716136ed77d7d', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
+        return (h("nav", { key: '5bf4427662bdca6512969bee91aa03f43a126743', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: '1d2b2a56b3960f70a3d37b333c77bf686643e0fd', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
     }
     static get is() { return "mg-skip-links"; }
     static get encapsulation() { return "shadow"; }

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

@@ -234,7 +234,7 @@ export class MgTabs {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '97f18baca4ae45b85401fd38570fe16d8df46c2b', class: this.classCollection.join() }, h("header", { key: '46cffaf2e14dde2a4994e894358caee7553b3bd6', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
+        return (h("div", { key: 'ae71d21c9ce3acb07b3adf67bbe25f205d382abc', class: this.classCollection.join() }, h("header", { key: 'cf6cdae863602c956aa450a34e91a6d8b950d8f5', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
                 [`${this.buttonTabBaseClass}`]: true,
                 [`${this.buttonTabBaseClass}--horizontal`]: true,
                 [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),

package/dist/components/mg-action-more.js

@@ -156,7 +156,7 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class MgActionMore exten
                     [`${this.classBase}__chevron--rotate`]: this.expanded === true,
                 } }, h("mg-icon", { icon: "chevron-down" })));
         }
-        return (h(Host, { key: 'f1b9e6e54f933a049628067993400d3a31d15710', "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { key: '081b89284d5234f24e6073dcd9bf4088fd5a86b8', class: this.classBase }, h("mg-popover", { key: '0e6c50bc3bcb07f72507571de9fdda90226d2163', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { key: 'ab4a385069e0a33fe9d5bc026c98160eb4ec1dfa', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({ key: 'e9dc31c07c3c0f474cea70f5eeda36707d101e85' }, this.icon)), !this.button.isIcon && buttonContent), h("div", { key: '201666b0bf5513e3360c3cc960e6cd6cd565dda1', slot: "content" }, h("mg-menu", { key: '3b0d56d9779b5bcaad31c714586dcda81bc550fa', direction: directions.VERTICAL, label: this.messages.label }, this.items.map(item => {
+        return (h(Host, { key: 'd75e1a5326ea3a1414f8048858e5ee3fee51760e', "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { key: 'b671a6c35cb3a9fa6eb7b2329f0f595e78b573b5', class: this.classBase }, h("mg-popover", { key: '38a38123d34ca868d0587123c2ab6b11550da8f0', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { key: '030b9360917b79edfc8df325d5ca5cfa08356c81', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({ key: 'a47ca6b078ca160d1cbb13c964df3abede5f373c' }, this.icon)), !this.button.isIcon && buttonContent), h("div", { key: 'ac38c705625cb5716a7e8aabd25d596db3d5adef', slot: "content" }, h("mg-menu", { key: 'cd382a65f69ba3c303a74d6b7444fcf0ccf9d1c5', direction: directions.VERTICAL, label: this.messages.label }, this.items.map(item => {
             var _a, _b;
             return isMgActionMoreDivider(item) ? (h("mg-divider", { class: "mg-c-action-more__divider", key: "divider", "full-width": true })) : (h("mg-menu-item", { key: item.label, status: item.status || Status.VISIBLE, target: item.target, href: item.href,
                 // eslint-disable-next-line react/jsx-no-bind

package/dist/components/mg-alert.js

@@ -161,7 +161,7 @@ const MgAlert$1 = /*@__PURE__*/ proxyCustomElement(class MgAlert extends HTMLEle
      * @returns HTML Element
      */
     render() {
-        return (h("mg-message", { key: '626afcfe4c86dacff9860d2515827ae5aa6b7234', class: this.classCollection.join(), role: ['info', 'success'].includes(this.variant) ? 'status' : 'alert', variant: this.variant, variantStyle: this.variantStyle }, h("slot", { key: 'bc7d72c21dcf36c9012e144253ce2b3c6ebc14ed' }), this.hasActions ? (h("span", { slot: "actions" }, h("slot", { name: "actions" }))) : (h("span", { class: "mg-c-alert__close-button" }, h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.alert.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
+        return (h("mg-message", { key: '4b974a10812e527a2c481ec00f22324ab490a135', class: this.classCollection.join(), role: ['info', 'success'].includes(this.variant) ? 'status' : 'alert', variant: this.variant, variantStyle: this.variantStyle }, h("slot", { key: '9133a3cca56d67e75e8c3f018c52838c31e908f2' }), this.hasActions ? (h("span", { slot: "actions" }, h("slot", { name: "actions" }))) : (h("span", { class: "mg-c-alert__close-button" }, h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.alert.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/mg-details.js

@@ -59,7 +59,7 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class MgDetails extends HTM
      * @returns HTML Element
      */
     render() {
-        return (h("details", { key: '4da17afd7a964a14b5b101bcfadc241be569d55a', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '515d6c4e117b547fe80a310fb90e114900f645e8' }, h("slot", { key: '0c9c0dcc47dd418e34e541d878bfc03ca137c68d', name: "summary" }), h("span", { key: 'c94f52994843b10c1161c0d85f38f8cb917ea806', class: "mg-c-details__toggle" }, h("mg-icon", { key: '9421452572af3deb03146a8dfd189369b249ba2d', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'dbfb0b34da00e37f55ec07236611c2babdd6b7c5', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '1b18b65a98e39a8663fa5d7e51eef5fbe2b92f76', class: "mg-c-details__details" }, h("slot", { key: '81c213594b1b67747db439624090784eaa5e6fcd', name: "details" }))));
+        return (h("details", { key: 'bbaac6909fa5f3fbd3236b2a8ace0f7c80b2580b', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '2ed8228b63403dd9b386bf3fa70c9094516b6f0e' }, h("slot", { key: '5461d77d2b2869b14737a5c7cfc40a1f9584ee03', name: "summary" }), h("span", { key: 'bb089365bdeaa7b934b97cff6f5f7c67587048e1', class: "mg-c-details__toggle" }, h("mg-icon", { key: 'dc1a30338703ad4182d50f9953a903ae0f68ecb1', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'a32cbaf9e38b71540deeaa8980895c34a7288ecb', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: 'b9c2bc7d681da8ac8b4dec5ff25287bc68975fb6', class: "mg-c-details__details" }, h("slot", { key: '069f05b4c133ff13055681e0b05bb98744303137', name: "details" }))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/mg-fieldset.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MgFieldset extends Components.MgFieldset, HTMLElement {}
+export const MgFieldset: {
+    prototype: MgFieldset;
+    new (): MgFieldset;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -166,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);
             });
@@ -246,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 {

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

@@ -92,7 +92,7 @@ const MgIllustratedMessage$1 = /*@__PURE__*/ proxyCustomElement(class MgIllustra
      * @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" }))));
     }
     get element() { return this; }
     static get watchers() { return {

package/dist/components/mg-input-checkbox-paginated2.js

@@ -88,7 +88,7 @@ const MgInputCheckboxPaginated = /*@__PURE__*/ proxyCustomElement(class MgInputC
     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 watchers() { return {
         "checkboxes": ["watchCheckboxes"],

package/dist/components/mg-input-checkbox.js

@@ -48,6 +48,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         this.inputValid = createEvent(this, "input-valid", 7);
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        this.customErrorMessage = { lock: false };
         this.mode = 'custom';
         // style
         this.baseClassName = 'mg-c-input--checkbox';
@@ -265,17 +266,20 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(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;
+                }
             }
         };
         /**
@@ -369,7 +373,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class MgInputCheckbox
         this.checkValidity();
         if (this.hasDisplayedError) {
             this.hasDisplayedError = prop !== 'required';
-            this.setErrorMessage(this.hasDisplayedError);
+            this.setErrorMessage();
         }
         this.setButtonTextKey();
     }
@@ -433,17 +437,22 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(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;
         }
     }
@@ -461,6 +470,8 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(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;
@@ -474,11 +485,13 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(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);
     }
     /**
@@ -597,7 +610,7 @@ const MgInputCheckbox$1 = /*@__PURE__*/ proxyCustomElement(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));
     }
     get element() { return this; }
     static get watchers() { return {