@mgdis/mg-components 6.17.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"; }
@@ -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"; }

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"; }

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

@@ -86,9 +86,9 @@ export class MgMessage {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'a113514956d6a3ef9fada1a20baa7b00843e5b96', class: this.classCollection.join() }, h("mg-card", { key: 'db894eb3d0f3cb9b18681e0925e0fd1bdcd208e2', shadow: true }, this.variantStyle === 'bar-left' && h("span", { key: '37eb3a027be82ab006fe30dd07bce88f526fc263', class: "mg-c-message__bar" }), h("span", { key: '76a3b6bf2d27ec85b3e9b7235cf5bba933ac02e2', class: "mg-c-message__icon" }, h("mg-icon", { key: '2988764c8a3d272dab5e749a8dc95643b9ead573', icon: this.getIcon() })), h("div", { key: '64e57835d18f433965eda9260efeb74055489c6e', class: "mg-c-message__content" }, h("span", { key: 'a2032d4fe0eec962cd9bb1e12119709bcb6ff53c', class: "mg-c-message__content-slot" }, h("slot", { key: 'dfe5f7315e8f8d66ccb195d8e7f7862eb803e6d9' })), this.hasActions && [
+        return (h("div", { key: 'f99bf527eb2c6005eeaec11f89aaa08f8865ea57', class: this.classCollection.join() }, h("mg-card", { key: 'beede3cd97b022d947c216b6bba454a104ba5790', shadow: true }, this.variantStyle === 'bar-left' && h("span", { key: '515828d725a996c9d57b39ad75e9373150a1b78a', class: "mg-c-message__bar" }), h("span", { key: '02ae41c66af25c2611b9b6cb8c87a1ad99346fa3', class: "mg-c-message__icon" }, h("mg-icon", { key: '3eadb40ed0dfa5ec51155608a67769c5fee3d402', icon: this.getIcon() })), h("div", { key: 'b832251e8f330d00b512bcd508ae9bf6e5f511cb', class: "mg-c-message__content" }, h("span", { key: 'c3520fc49bd5c3c187a83823050ceb9ca8c12d46', class: "mg-c-message__content-slot" }, h("slot", { key: 'f4064dff9536cbb76e45c5c4c1a89621da9531b2' })), this.hasActions && [
             h("span", { class: "mg-c-message__content-separator", key: "content-separator" }),
-            h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: 'db1782730e0bffb168b8ec23410e6836f572715c', name: "actions" })),
+            h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '5585f7c14c2c3896cfdb5319414cd82f4d4b3a8b', name: "actions" })),
         ]))));
     }
     static get is() { return "mg-message"; }

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

@@ -106,11 +106,11 @@ export class MgModal {
      * @returns HTML Element
      */
     render() {
-        return (h("dialog", { key: '783b289712deb419fa7ac4c9f371add80054af6b', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
+        return (h("dialog", { key: '2d99322fd3c80b8cbfea70589cf579e0c1c6f06b', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
                 if (el !== null) {
                     this.dialog = el;
                 }
-            } }, h("mg-card", { key: 'd6006f296ab50a192229e09e6e01a3313ab69cce', shadow: true }, h("div", { key: '76bc44557dc4b4bcce40b54d5d4bfa381f7906af', class: "mg-c-modal__dialog" }, h("header", { key: '08ba473f429ae57434dd321575f9eaf97e41f7a9', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: 'd96baeaaefdb5541da7ee7bc58c3901b3d64ed33', class: "mg-c-modal__close-button" }, h("mg-button", { key: 'f43486e05e337fad6e54b8a0b07b9d13aad50acc', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: '3278e25d15abdefb56cc3c67e7a8ec500d90547b', icon: "cross" })))), h("h1", { key: 'd9246055be4cb938f4aff20fcdc53b3a7c119d20', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: 'bce8cd10a2fffdf726df6d07b9f81da1fd693038', class: "mg-c-modal__content" }, h("slot", { key: '9db561d8462fe9a3afc6be543f2ef3b189f3efd4' })), this.hasActions && (h("footer", { key: '226e235454dce60eb8b5652add3b23e1cf480fc7', class: "mg-c-modal__footer" }, h("slot", { key: '8352666de0db98e96c52a419c939574285972571', name: "actions" })))))));
+            } }, h("mg-card", { key: '32692a6d41ef30b3d3e61ddcfea47350d374ed09', shadow: true }, h("div", { key: 'c87bb43bb069671b65a9759ee293e77975707597', class: "mg-c-modal__dialog" }, h("header", { key: '1272a946878efcf8c69f3b09852ba6938cbe31b0', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: '0704656c7c5ac4c8d405f2cd673e91f72763ee8f', class: "mg-c-modal__close-button" }, h("mg-button", { key: '4402971c763ee34145de5bd69d367fde68f9d1a2', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: '9e16add6a3e387971507a252671c895b6c94a586', icon: "cross" })))), h("h1", { key: '3e4fc2b4419398528565d382b728b8b752758ddd', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: '170ff6bd9592687baa4c561615f540ad1c7400e4', class: "mg-c-modal__content" }, h("slot", { key: 'cb710e2a57e4c997deac367169b56047af1200b1' })), this.hasActions && (h("footer", { key: '1e08d67caeaaaf75eb97faa11528719ea537c24c', class: "mg-c-modal__footer" }, h("slot", { key: '461ec8e4117477aef08dc6d346ad0bf6007ec12d', name: "actions" })))))));
     }
     static get is() { return "mg-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,6 +4,7 @@ import { initLocales } from "../../../locales";
 import { expandToggleDisplays, titlePositions } from "./mg-panel.conf";
 /**
  * @slot - Panel content
+ * @slot panel-title - Panel title content (replaces panel-title prop when used)
  * @slot header-right - Header right panel content
  */
 export class MgPanel {
@@ -48,6 +49,13 @@ export class MgPanel {
         /************
          * Methods *
          ************/
+        /**
+         * Check if panel-title slot is used
+         * @returns true if slot is used
+         */
+        this.hasPanelTitleSlot = () => {
+            return this.element.querySelector('[slot="panel-title"]') !== null;
+        };
         /**
          * Toggle is editing state
          */
@@ -101,7 +109,7 @@ export class MgPanel {
          * Render collapse button
          * @returns collpase button
          */
-        this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", "aria-expanded": this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.panelTitle }, h("span", { class: "mg-c-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: { 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded } }), !this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle)));
+        this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", "aria-expanded": this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.expandToggleDisplay === 'icon' ? this.panelTitle : undefined }, h("span", { class: "mg-c-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: { 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded } }), !this.isEditing && this.expandToggleDisplay !== 'icon' && (this.hasPanelTitleSlot() ? h("slot", { name: "panel-title" }) : this.panelTitle))));
         /**
          * Render edit button
          * @returns edit Button
@@ -118,7 +126,8 @@ export class MgPanel {
          */
         this.renderTitle = () => {
             const elementsToRender = [this.renderCollapseButton()];
-            if (this.titleEditable) {
+            // Add edit functionality only if not using slot and title is editable
+            if (this.titleEditable && !this.hasPanelTitleSlot()) {
                 if (!this.isEditing)
                     elementsToRender.push(this.renderEditButton());
                 else
@@ -144,14 +153,24 @@ export class MgPanel {
         }
     }
     validatePanelTitle(newValue) {
-        if (!isValidString(newValue))
-            throw new Error(`<mg-panel> prop "panelTitle" is required and must be a string. Passed value: ${toString(newValue)}.`);
-        this.titleChange.emit(newValue);
+        if (newValue !== undefined) {
+            if (!isValidString(newValue)) {
+                throw new Error(`<mg-panel> prop "panelTitle" must be a string. Passed value: ${toString(newValue)}.`);
+            }
+            else {
+                this.titleChange.emit(newValue);
+            }
+        }
     }
     validateTitlePattern(newValue) {
         if (newValue !== undefined && !this.titleEditable)
             throw new Error(`<mg-panel> prop "titleEditable" must be set to "true".`);
     }
+    validateTitleEditable(newValue) {
+        if (newValue && this.hasPanelTitleSlot()) {
+            throw new Error(`<mg-panel> prop "titleEditable" cannot be used with panel-title slot.`);
+        }
+    }
     validateTitlePosition(newValue) {
         if (!titlePositions.includes(newValue))
             throw new Error(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}. Passed value: ${toString(newValue)}.`);
@@ -164,6 +183,9 @@ export class MgPanel {
             throw new Error(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}. Passed value: ${toString(newValue)}.`);
         if (newValue === 'icon' && this.titleEditable)
             this.titleEditable = false;
+        if (newValue === 'icon' && this.hasPanelTitleSlot()) {
+            throw new Error(`<mg-panel> prop "expandToggleDisplay" cannot be "icon" when panel-title slot is used.`);
+        }
     }
     /*************
      * Lifecycle *
@@ -178,9 +200,15 @@ export class MgPanel {
         this.watchIdentifier(this.identifier);
         this.validateTitlePattern(this.titlePattern);
         this.validateTitlePattern(this.titlePatternErrorMessage);
-        this.validatePanelTitle(this.panelTitle);
+        // Only validate panelTitle if slot is not used
+        if (!this.hasPanelTitleSlot()) {
+            if (!isValidString(this.panelTitle))
+                throw new Error(`<mg-panel> prop "panelTitle" is required when panel-title slot is not used.`);
+            this.validatePanelTitle(this.panelTitle);
+        }
         this.validateExpandToggleDisplay(this.expandToggleDisplay);
         this.validateTitlePosition(this.titlePosition);
+        this.validateTitleEditable(this.titleEditable);
     }
     /**
      * Edit DOM after render
@@ -196,7 +224,7 @@ export class MgPanel {
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        return (h("section", { key: '6d9b0759cf8d6a8e94a1a6598f45fc00288ca22a', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '21b0d991daf053506097333df58d3b98ec2e5b0e', shadow: this.shadow }, h("header", { key: 'abd9dbeb13d85c9a66aac13e7b32e6a83e2ded57', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '23c74b70bd275fb18c853a1b7a0a4b4ff5a4c605', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '15561936437c960768c4954f45df4045ac3dee03' })))));
+        return (h("section", { key: '3662204d763051c34ea13de4b7b3f7abc7914b81', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '46f113258172b1d040f65a4d312554b0c0551489', shadow: this.shadow }, h("header", { key: '1d7e7a48a5c4f89d141a5a7e46b220d4f9c082a5', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: 'ab0aec831cc79d982b7556d6e245c80ae2979083', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: 'e831573fe9d5ff783073d123b7e2a54baad73bfc' })))));
     }
     static get is() { return "mg-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -240,8 +268,8 @@ export class MgPanel {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Panel title"
@@ -487,6 +515,9 @@ export class MgPanel {
             }, {
                 "propName": "titlePatternErrorMessage",
                 "methodName": "validateTitlePattern"
+            }, {
+                "propName": "titleEditable",
+                "methodName": "validateTitleEditable"
             }, {
                 "propName": "titlePosition",
                 "methodName": "validateTitlePosition"

package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js

@@ -46,7 +46,7 @@ export class MgPopoverContent {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '2746e72f636c1a702d2b15836343ca8503f233e5' }, h("mg-card", { key: '84e28550627969d4e15ded5a5f8b6d19584eb891', class: this.classCollection.join(), shadow: true }, this.closeButton && (h("mg-button", { key: 'f25c773593441597e81330997df3175cd9a963e4', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: '723f3d1e8a85356d7aa9be9c875b273d7c9c1f72', icon: "cross" }))), h("div", { key: '283316f2a66212d9afc128aaec3fb24e4a40c0eb', class: "mg-c-popover-content__title" }, h("slot", { key: 'a1839a9a3259ccb221b90e82f786eb0e7c3d2a19', name: "title" })), h("slot", { key: '708903013417e27f4a9ed9811fde886d6b697dec', name: "content" })), h("slot", { key: 'fad6024a2474ffd5f46925101baa0e6ab9f2e951', name: "arrow" })));
+        return (h(Host, { key: '054fc82954b39a488f7fe5cb391d89b5fa4a61fe' }, h("mg-card", { key: 'bb89bada37069b50295bd93d988667c3b85eada3', class: this.classCollection.join(), shadow: true }, this.closeButton && (h("mg-button", { key: 'a59d6610574b964be1e2ce34ccd8e31c1395b6ff', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: '5bcc9e4eb21396f4fc66a6f1e4d6c5cdf68ec1f4', icon: "cross" }))), h("div", { key: '57be2022f3b61220e1249faeaf2acee9960027fe', class: "mg-c-popover-content__title" }, h("slot", { key: 'c7870e86a9f105cf6b9d4520c77874bce9235d72', name: "title" })), h("slot", { key: '5af8462232625d9c7d694bab46351d5e646f62ca', name: "content" })), h("slot", { key: '599863410dd7d751e82c440cd6c4fb7f2c48d9f3', name: "arrow" })));
     }
     static get is() { return "mg-popover-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -242,7 +242,7 @@ export class MgPopover {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '7ea28f19a5a61f6191c2aece439e85da8f067270' }, h("slot", { key: 'aa6a627b90246ca327e2971329ab58b02eeb1d04' }), h("slot", { key: '1851353a6b4de659d6027a0bf3ba5f2120f7137d', name: "content" })));
+        return (h(Host, { key: '2c1506b8e2da100519aeeae75fc5c378a81c473c' }, h("slot", { key: 'f9aea885e8cbc168614c05761829f0a0740eba9e' }), h("slot", { key: 'fa6106a660a73b3761d4783f8d46d401c47b4eb6', name: "content" })));
     }
     static get is() { return "mg-popover"; }
     static get encapsulation() { return "shadow"; }