@mgdis/mg-components 6.26.0 → 6.28.0

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

@@ -7,6 +7,8 @@ export class MgInputTextarea {
     constructor() {
         // hasDisplayedError (triggered by blur event)
         this.hasDisplayedError = false;
+        // raised when `value` changed, so componentDidUpdate revalidates once the DOM is in sync
+        this.validityCheckPending = false;
         this.customErrorMessage = { lock: false };
         /**
          * Input name
@@ -65,10 +67,6 @@ export class MgInputTextarea {
          * Handle input event
          */
         this.handleInput = () => {
-            if (this.hasDisplayedError) {
-                this.checkValidity();
-                this.setErrorMessage();
-            }
             this.value = this.input.value;
         };
         /**
@@ -118,7 +116,7 @@ export class MgInputTextarea {
         };
     }
     handleValue(newValue) {
-        this.checkValidity();
+        this.validityCheckPending = true;
         this.valueChange.emit(newValue);
     }
     watchReadonly(newValue) {
@@ -212,6 +210,8 @@ export class MgInputTextarea {
                 lock: valid ? false : errorMessageLock,
                 message: valid ? undefined : errorMessage,
             };
+            // setError() states the validity explicitly, so drop any pending recomputation
+            this.validityCheckPending = false;
             this.setValidity(valid);
             this.setErrorMessage(true);
             this.hasDisplayedError = this.invalid;
@@ -279,14 +279,32 @@ export class MgInputTextarea {
         // https://stenciljs.com/docs/component-lifecycle#componentwillload
         return setTimeout(() => {
             this.checkValidity();
+            // the initial check covers the initial value: nothing is pending yet
+            this.validityCheckPending = false;
         }, 0);
     }
+    /**
+     * Recompute validity once the DOM is in sync with `value`.
+     * `@Watch('value')` fires before Stencil re-renders, so the rendered control still holds the
+     * previous value at that point (visible with a programmatic value change, e.g. a `v-model`
+     * default value). The watcher therefore only raises a flag, and the check runs here, after the
+     * render. Renders unrelated to `value` leave the flag down and recompute nothing.
+     */
+    componentDidUpdate() {
+        if (this.validityCheckPending && this.input !== undefined) {
+            this.validityCheckPending = false;
+            this.checkValidity();
+            if (this.hasDisplayedError) {
+                this.setErrorMessage();
+            }
+        }
+    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '36575f026a23722bb6d224aaeacf0e80d3e1bbfd', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__input-group-container" }, h("textarea", { class: {
+        return (h("mg-input", { key: 'e3bf8b4bbddccaf86a78f8517cc529aa41cc61d6', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__input-group-container" }, h("textarea", { class: {
                 'mg-c-input__box': true,
                 'mg-c-input__box--width': true,
                 'mg-c-input__box--resizable': this.resizable === 'both',

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

@@ -55,7 +55,11 @@ export class MgDetails {
      * @returns HTML Element
      */
     render() {
-        return (h("details", { key: '78dbeab3b3e6c245bda8fad5900b70727fd47595', 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: '766e4756a66a1f8e6bc2159f30133a0702353f32' }, h("slot", { key: '3473dd0c0fc7de78c1d7ae6f9ee4a4d2fc7835ee', name: "summary" }), h("span", { key: '7c8d3da4df69d2802f104caaf568ac513f9f03b6', class: "mg-c-details__toggle" }, h("mg-icon", { key: '44da384780ab768bde20acb58885280e193de921', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '387de0caa5ae819c89449e5063e0b6e05b3df8fe', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '48c1fe8df990a250f098594d9b50df947613955c', class: "mg-c-details__details" }, h("slot", { key: '95554b4d890750cc3b3008965be3e5954d49d810', name: "details" }))));
+        return (h("details", { key: '12eac25682e22d65ace61f6697656459d1494903', class: {
+                'mg-c-details': true,
+                'mg-c-details--hide-summary': this.hideSummary,
+                'mg-c-details--empty-summary': this.isEmptySummary,
+            }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: 'd6d621db04bca17297f770a633fcb17711f99ecf' }, h("slot", { key: '245aad29a2f2cd93e3a5426ce1e010ab6f5b5e07', name: "summary" }), h("span", { key: 'ebfe3c80a00b9b7a38a670f536a3984420ec3945', class: "mg-c-details__toggle" }, h("mg-icon", { key: '73c4eb27b3d6aa9168bf6af9fa118afc51b8ee1a', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '96730ec386137f7f3aa463b76c20547a5922f294', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '8ac6eee499e613a543fd2a2ea9d954719d48005d', class: "mg-c-details__details" }, h("slot", { key: '37af4674491d7857163dcc48424e652cfcefbed6', name: "details" }))));
     }
     static get is() { return "mg-details"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { ClassList, createID, isValideID, toString } from "@mgdis/core-ui-helpers/dist/utils";
+import { ClassList, createID, isValideID, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
 import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 import { initLocales } from "../../../locales";
 import { isMgInputFile } from "../inputs/mg-input/mg-input.conf";
@@ -39,6 +39,10 @@ export class MgForm {
          * Component classes
          */
         this.classCollection = new ClassList(['mg-c-form']);
+        /**
+         * Whether the form has slotted actions
+         */
+        this.hasActions = false;
         /**
          * Define required message based on mg-inputs required elements
          */
@@ -191,6 +195,38 @@ export class MgForm {
             this.formReset.emit(true);
         }
     }
+    /**
+     * Request the form submission: emit `form-submit`, whatever the inputs validity.
+     * This is what a `mg-button` associated with this form goes through, so that reaching the form
+     * needs no access to its shadow DOM. Unlike the native `requestSubmit()`, it runs no constraint
+     * validation: validity is the consumer's call here, as it is on submission from a nested button.
+     * Read `invalid`, or call `displayError()` / `focusFirstInvalidInput()`.
+     * Unlike `reset()`, a readonly form still submits: readonly fields do not block a native
+     * submission either, and a nested button has always submitted such a form.
+     */
+    async requestSubmit() {
+        this.formSubmit.emit();
+    }
+    /**
+     * **Experimental.** The signature may still change in a minor release.
+     *
+     * Display errors, then focus and scroll to the first invalid input. Focusing is what
+     * carries the information for assistive technologies, a scroll announces nothing.
+     * Read the `invalid` property to know whether the form had an invalid input.
+     */
+    async focusFirstInvalidInput() {
+        if (!this.readonly) {
+            await this.displayError();
+            // Inputs defer their displayError() to a requestAnimationFrame
+            await new Promise((resolve) => requestAnimationFrame(resolve));
+            // Read at call time: a MutationObserver rebuilds the list on content change
+            const firstInvalidInput = this.mgInputs.find((input) => input.invalid);
+            if (firstInvalidInput !== undefined) {
+                await firstInvalidInput.setFocus();
+                firstInvalidInput.scrollIntoView();
+            }
+        }
+    }
     /*************
      * Lifecycle *
      *************/
@@ -205,15 +241,17 @@ export class MgForm {
         this.validateAriaRole(this.ariaRole);
         this.validateRequiredMessage(this.requiredMessage);
         this.handlelabelOnTop(this.labelOnTop);
+        // Detect slotted actions
+        this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
         // Get slotted mgButtons
         this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));
-        // Set button form identifier
+        // Announce the association: a slotted button then drives this form through its public API and
+        // handles its own submit and reset, which is why none is wired here. An id it already carries
+        // wins, read as property and attribute since frameworks pass the prop as one or the other.
         this.mgButtons.forEach((mgButton) => {
-            mgButton.setAttribute('form', this.identifier);
-            if (mgButton.type === 'reset') {
-                mgButton.addEventListener('click', () => {
-                    this.reset();
-                });
+            var _a;
+            if (!isValidString((_a = mgButton.form) !== null && _a !== void 0 ? _a : mgButton.getAttribute('form'))) {
+                mgButton.setAttribute('form', this.identifier);
             }
         });
         // Set mgInputs
@@ -239,6 +277,7 @@ export class MgForm {
             if (mutations.some((mutation) => Object.keys(observerOptions).includes(mutation.type))) {
                 this.setMgInputs();
                 this.checkValidity();
+                this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
             }
         }).observe(this.element, observerOptions);
     }
@@ -247,7 +286,7 @@ export class MgForm {
      * @returns HTML Element
      */
     render() {
-        return (h("form", { key: '65d3e11931386af2dedd953f58505e2c71cd99ff', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '7546db3b8a4259fd7d092cc7b912b6593fab9d84', innerHTML: this.requiredMessageText }), h("slot", { key: '0023ed360230ea97395a249b230e02bb7a4bdbda' }), !this.readonly && !this.disabled && h("slot", { key: 'de84e088ff029eff487be1ed8b4766425c558c29', name: "actions" })));
+        return (h("form", { key: '0c23474cba5ae38a70162129641128cdd17224cb', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '8938192d2b2f4d1278f6e5037ed7f0f839c44861', innerHTML: this.requiredMessageText }), h("slot", { key: 'aefbcb13adbe2632b958c55c2c2c0174d5aaf471' }), !this.readonly && !this.disabled && this.hasActions && (h("div", { key: '30675225f5a910945f5b31fb044d3501c323acf9', class: "mg-c-form__actions" }, h("slot", { key: '6f5b871264d0237fc1eccfac5c454e61135b81c4', name: "actions" })))));
     }
     static get is() { return "mg-form"; }
     static get encapsulation() { return "shadow"; }
@@ -458,7 +497,8 @@ export class MgForm {
     static get states() {
         return {
             "classCollection": {},
-            "requiredMessageText": {}
+            "requiredMessageText": {},
+            "hasActions": {}
         };
     }
     static get events() {
@@ -557,6 +597,40 @@ export class MgForm {
                     "text": "Reset form inputs values, validity and error state",
                     "tags": []
                 }
+            },
+            "requestSubmit": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Request the form submission: emit `form-submit`, whatever the inputs validity.\nThis is what a `mg-button` associated with this form goes through, so that reaching the form\nneeds no access to its shadow DOM. Unlike the native `requestSubmit()`, it runs no constraint\nvalidation: validity is the consumer's call here, as it is on submission from a nested button.\nRead `invalid`, or call `displayError()` / `focusFirstInvalidInput()`.\nUnlike `reset()`, a readonly form still submits: readonly fields do not block a native\nsubmission either, and a nested button has always submitted such a form.",
+                    "tags": []
+                }
+            },
+            "focusFirstInvalidInput": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "**Experimental.** The signature may still change in a minor release.\n\nDisplay errors, then focus and scroll to the first invalid input. Focusing is what\ncarries the information for assistive technologies, a scroll announces nothing.\nRead the `invalid` property to know whether the form had an invalid input.",
+                    "tags": []
+                }
             }
         };
     }

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

@@ -100,7 +100,7 @@ export class MgIllustratedMessage {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'daffbfe09d4ccae7b2380d2dcd0f6157acf7a849', class: this.classCollection.join() }, h("div", { key: '503631e106a43186d1031ebfd8bb5fa9e7aaa568', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: '6291af5e6155e38e3cfb63acf3ca774e22d385f6', name: "illustration" })), h("div", { key: '7c7518be3413c7e9cadb149a255505d20525b6c7', class: "mg-c-illustrated-message__slots" }, h("slot", { key: '742dc8a06f3f7ab06e4e67b370a750100585c384', name: "title" }), h("slot", { key: '3da2b7d35d1076d4cb87337f9a21e149c72f9141', name: "details" }))));
+        return (h("div", { key: 'b914eadabb438b17c1cddc6b6e0167facf264a37', class: this.classCollection.join() }, h("div", { key: 'c2c55e775db2a622948ebd0d2efef8336520a52a', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: '1b549999f75245d17d7c4ba5696af25921c1725a', name: "illustration" })), h("div", { key: '6f19510b6775bbd366dbb4127ad1ca7b1be8a261', class: "mg-c-illustrated-message__slots" }, h("slot", { key: 'db37d12c2812c8fca129f4d0f24cb011198ba474', name: "title" }), h("slot", { key: '2a1aaf4fe8ea18a971c741c03e05d146584567a7', 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: 'a2e3880baccec9691a9fd6abbdb9e01d452136aa', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '044153b87e799f1f51cb3c9c6236bf6b8b328cf5', icon: "loader", spin: true }), h("span", { key: '5e4293bd33bd2a51b7557ebf26037991e4fc853e', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgress)));
+        return (h("div", { key: '55e8bc6908f1cd83f9ffc0e30dd28ede501e30d8', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '4306e748a509ac3c546d565bf2bed74529ce3c24', icon: "loader", spin: true }), h("span", { key: '6636df5f58654f6de7f0b79e8e4dd32e4fe2bfc7', 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

@@ -100,9 +100,9 @@ export class MgMessage {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'a182451917bfe33de32c893d9eeedd52b11f8b15', class: this.classCollection.join() }, h("mg-card", { key: '9dd0da031d97f669e885a1681b72e5a086e79c0b', shadow: this.variantStyle !== 'background' }, h("span", { key: '158c2470a10ab9d677e2031c28ad0d43c09e4cf2', class: "mg-c-message__icon" }, h("mg-icon", { key: 'f7d0cb02781d2bf5a71fbd7f9498ebf4dca31edf', icon: this.getIcon() })), h("div", { key: '56a7299983c30ea4527bb19a46ac0677b6e8c40e', class: "mg-c-message__content" }, h("span", { key: '744ad763177f92bdbac37d43a5a58f221ff97e69', class: "mg-c-message__content-slot" }, h("slot", { key: '14b7f22e206bd074336287809574b2a5abfe5bf5' })), this.hasActions && [
+        return (h("div", { key: 'ac4ce18faacbbc2e1f1ecaa03f4ddb4693c9f821', class: this.classCollection.join() }, h("mg-card", { key: '25ce44964f85c27386138f9e2f2e6f9c066810b4', shadow: this.variantStyle !== 'background' }, h("span", { key: '1ec4146aefe5f7a41eb92947b3dfd2d975517de2', class: "mg-c-message__icon" }, h("mg-icon", { key: '24e7c80b674e260e47d6134a996a8da774e5eb68', icon: this.getIcon() })), h("div", { key: '5344654d4373a0f4636d062b16a861a12eda19f0', class: "mg-c-message__content" }, h("span", { key: '63bd0aecd75f348be533a92cf63697eaa35db77b', class: "mg-c-message__content-slot" }, h("slot", { key: '4321f84c6b1679b163b0115b78e4801eeece2e25' })), 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: '104be326f73ded002cba9a471491ca614227e3d5', name: "actions" })),
+            h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '42c8d32832a41bb6dce997078aabaa8a40c16f5c', name: "actions" })),
         ]))));
     }
     static get is() { return "mg-message"; }
@@ -189,7 +189,7 @@ export class MgMessage {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "full-width",
                 "defaultValue": "false"
             }

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: '3b802b99d96be80d8071c89be6537269866e6fff', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
+        return (h("dialog", { key: '30175543565cfaad83c561b8316ee7af057d6439', 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: '4985b4af69968577ffd36a6a2b1f96274703d146', shadow: true }, h("div", { key: 'c4aed6d29dc5ee00f323dcbaecff9532f370ec98', class: "mg-c-modal__dialog" }, h("header", { key: '3bfeb66d59144c0cba3fd82c1fb4dee2ed62cea7', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: '55205da6c8991444ff53da7224b28c7475b0e173', class: "mg-c-modal__close-button" }, h("mg-button", { key: 'da7fdea3a124a559cb637beea9d5565c1f777eea', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: '77c2ab2bcacdda9fa179b480651507a1d6584686', icon: "cross" })))), h("h1", { key: 'cedb5efc709de2d18e81409139da790349a48bb8', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: '7f24e65244836c08dbf7465f8c80970080003bcd', class: "mg-c-modal__content" }, h("slot", { key: '36d7c2a0ef1bb1024887da08298391962285bbf8' })), this.hasActions && (h("footer", { key: '5967d650e4e58726641a3c960d82aa7ee588e38f', class: "mg-c-modal__footer" }, h("slot", { key: 'c275b8235acb658ded3db7c69b931000a5ff14d2', name: "actions" })))))));
+            } }, h("mg-card", { key: 'b1ddb9603f4956c171fd4e0f5193236b7fc5a739', shadow: true }, h("div", { key: '9d6e8f1d4e19088a31f6785176cee3c099dce111', class: "mg-c-modal__dialog" }, h("header", { key: 'f2e85f730ff4a4dd94df7640d1bb6e3b89c94fbf', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: 'ab1c36f6bbbeed4ba54342a1cae4b08bc3befbb7', class: "mg-c-modal__close-button" }, h("mg-button", { key: '7d3658b31d901dd6b95610e7cbb1d28a47f178f3', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: '662f7ee9badfe12dff1c2df58572c8829bf32bff', icon: "cross" })))), h("h1", { key: '8e2ec325dacc29c31806c9525dc4e56ce7f1232b', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: '5bc09995ddda790ec1015737176d24484b4b178c', class: "mg-c-modal__content" }, h("slot", { key: 'c3ff57659beb9e0d523ed0a20ad9768c549f6332' })), this.hasActions && (h("footer", { key: '30336eb46581adbc144a9f8275489e5f9a1b9bcd', class: "mg-c-modal__footer" }, h("slot", { key: 'fc2cc4e0b3c300801d1cf928a8d1ef825c8775bc', name: "actions" })))))));
     }
     static get is() { return "mg-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -245,7 +245,7 @@ export class MgPanel {
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        return (h("section", { key: '33e6da36cbb92f19bcd957de7758c1a13ced5e83', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: 'df278e46b4604d8c5dce2abeffb2e979b02f34e9', shadow: this.shadow }, h("header", { key: 'b68012115af4bb5b62b6357fc07cbf50876ac08f', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '3dfec67e6531fc0dff866e102ac36bd6c6a48834', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '56c63dd0b0e98968594ff713c2c6ee2a3269b74b' })))));
+        return (h("section", { key: 'b578e1389d1bbd5e035121c350d5c39b9bdf8a5e', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '44f71cd6cb5973719608d04d1581d440a53f5d7d', shadow: this.shadow }, h("header", { key: 'fb3b381c2c574bca89391e9007afc0552cce9a14', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: 'ee1ee946f594900680e2182a41de5d86dd515212', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '7f878c18e3e5d60a7619312b16336858313f1eae' })))));
     }
     static get is() { return "mg-panel"; }
     static get encapsulation() { return "shadow"; }

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: '7035d8f560b811596c9c641abc7fe28ee9fdf3a2' }, h("mg-card", { key: 'badc81425100283dac69cad111514d8c3edfba45', class: this.classCollection.join(), shadow: true }, this.closeButton && (h("mg-button", { key: 'cb20d8c7db741051b532c3b1653d578df859f0d0', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: '389dc26f4cfdbb899b2b9eb4b27ceb6369209b2f', icon: "cross" }))), h("div", { key: '29b6721af3b6e06760affd6565e740bbc667f457', class: "mg-c-popover-content__title" }, h("slot", { key: '5834364d298a4e65a9170f003d0ec1f5e8868c4a', name: "title" })), h("slot", { key: '8398f497064fe097151ca263225349a9d84d4f36', name: "content" }))));
+        return (h(Host, { key: 'e019ee038ec460eb854f0c3e1735dbf5d107b76c' }, h("mg-card", { key: 'ddcfa4488e4e1d88f9f04cbe1adbce5571810dc2', class: this.classCollection.join(), shadow: true }, this.closeButton && (h("mg-button", { key: 'ecd864254f96e0e4d855f4fd17ea6cefd9606a75', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: 'ef52183b075b47d9fc81b7ec0074c790c51741aa', icon: "cross" }))), h("div", { key: 'df62e551869ec69e902788d20aa50b169bdfc0ee', class: "mg-c-popover-content__title" }, h("slot", { key: '5a4eada9d48368a34094ba22f83d23c0abd92223', name: "title" })), h("slot", { key: 'bfa7298291aed96a01a45cf2921a5646a022287f', name: "content" }))));
     }
     static get is() { return "mg-popover-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -240,7 +240,7 @@ export class MgPopover {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '431539cd450da49af5587372a12cbe33956ec5b1' }, h("slot", { key: '30e66567cc00667665b70306b3c9ba2fa541fa1e' }), h("slot", { key: '7fcfcd55904128ef4f7a66e16a31a957e5b7af75', name: "content" })));
+        return (h(Host, { key: 'c8f404452600fb8c3c4219c3873d407c9546fa9c' }, h("slot", { key: '0031a6cef5ecab29b82c38a6cdfeef61277e7f57' }), h("slot", { key: 'ececc678b5d54aaad029adcf7d9681471cf78701', name: "content" })));
     }
     static get is() { return "mg-popover"; }
     static get encapsulation() { return "shadow"; }

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: '3682d5f1980678e39594dab8223805deb4b425d4', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: '001d511a866ec0526c4ffd01a8a90448b6f40819', class: "mg-c-progress" }, h("div", { key: '504fa583f5b8186236871f3f2cd886acb40614ef', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, h("div", { key: '044c9297d5a12c9d8c6d3b76d17dd2ba6a1a9719', class: "mg-c-progress__fill", style: {
+        return (h(Host, { key: 'c0df3a5d374a8e5761efcd1e340775e5a33b17b4', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: '9481f0fdb3bb5b9c0a27cd47113207537dcf0eec', class: "mg-c-progress" }, h("div", { key: '67bf52635d482d56a8b0a85f31da78c243054e22', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, h("div", { key: '9a55b0bf8132bcec41350941d2bbd470194d7981', 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

@@ -38,7 +38,7 @@ export class MgSkipLinks {
      * @returns HTML Element
      */
     render() {
-        return (h("nav", { key: '9208da538e001be23c8cc78e8a34498cd072cdc6', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: 'fcd69f398fad6964d5c017bb652ad7b8de34dee6', 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: '972bbcd87ccb46025324b4dc8e3ded00407e2b77', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: 'a4673c4b29484e654f4adb5d7c669d4ad372760f', 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

@@ -226,7 +226,7 @@ export class MgTabs {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '37be8d325dfea3a7b828236f3cc21da57be28154', class: this.classCollection.join() }, h("header", { key: 'd88f10c0331984a759f8abc311f11d913fb25206', 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: '6f741baa1d25495fd980586c2cad6203cbb69906', class: this.classCollection.join() }, h("header", { key: '1dd40593a076db2d6c883b2f066e8c96938175bf', 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-button2.js

@@ -1 +1 @@
-import{transformTag as t,proxyCustomElement as o,HTMLElement as n,createEvent as r,h as i,Host as e}from"@stencil/core/internal/client";import{C as a,t as c,i as b,n as d}from"./index2.js";import{n as g}from"./index3.js";import{K as s}from"./events.utils.js";import{d as u}from"./mg-icon2.js";const m=["medium","large"],l=["primary","secondary","danger","danger-alt","info","flat","success","link"],h=o(class extends n{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.disabledChange=r(this,"disabled-change",7),this.onClickElementFn=null,this.classDisabled="mg-c-button--disabled",this.classLoading="mg-c-button--loading",this.classFullWidth="mg-c-button--full-width",this.variant="primary",this.size="medium",this.fullWidth=!1,this.isIcon=!1,this.disableOnClick=!1,this.loading=!1,this.classCollection=new a(["mg-c-button"]),this.handleClick=t=>{this.disabled?t.stopPropagation():this.disableOnClick&&(this.loading=!0,this.disabled=!0)},this.handleKeydown=t=>{this.disabled||" "!==t.key?!this.disabled&&[s.ENTER,s.NUMPADENTER,s.SPACE].includes(t.key)&&(t.preventDefault(),this.element.dispatchEvent(new MouseEvent("click",{bubbles:!0}))):t.preventDefault()},this.handleKeyup=t=>{this.disabled||" "!==t.key||(t.preventDefault(),this.element.dispatchEvent(new MouseEvent("click",{bubbles:!0})))},this.setIconSize=()=>{var t,o;"medium"===this.size?null===(t=this.element.querySelector("mg-icon[size]"))||void 0===t||t.removeAttribute("size"):this.isIcon&&(null===(o=this.element.querySelector("mg-icon"))||void 0===o||o.setAttribute("size",this.size))}}validateVariant(t,o){if(!l.includes(t)){if(""===t)return void(this.variant=l[0]);throw new Error(`<mg-button> prop "variant" must be one of: ${l.join(", ")}. Passed value: ${c(t)}.`)}void 0!==o&&this.classCollection.delete(`mg-c-button--${o}`),this.classCollection.add(`mg-c-button--${t}`)}validateSize(t,o){if(!m.includes(t))throw new Error(`<mg-button> prop "size" must be one of: ${m.join(", ")}. Passed value: ${c(t)}.`);void 0!==o&&this.classCollection.delete(`mg-c-button--${o}`),this.classCollection.add(`mg-c-button--${t}`),this.setIconSize()}validateFullWidth(t){if(t&&this.isIcon)throw new Error('<mg-button> prop "fullWidth" cannot be used with prop "isIcon".');t?this.classCollection.add(this.classFullWidth):this.classCollection.delete(this.classFullWidth)}disabledHandler(t){!t&&this.disableOnClick&&(this.loading=!1),this.element.onclick=t?void 0:this.onClickElementFn,t?this.classCollection.add(this.classDisabled):this.classCollection.delete(this.classDisabled),this.disabledChange.emit(t)}watchIsIcon(t){if(t){if(this.classCollection.add("mg-c-button--icon"),!b(this.label))throw new Error('<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.')}else this.classCollection.delete("mg-c-button--icon");this.setIconSize()}loadingHandler(t){t?this.classCollection.add(this.classLoading):this.classCollection.delete(this.classLoading)}componentWillLoad(){g(this),this.validateVariant(this.variant),this.validateFullWidth(this.fullWidth),this.validateSize(this.size),this.watchIsIcon(this.isIcon),this.onClickElementFn=this.element.onclick,this.disabledHandler(this.disabled)}componentDidLoad(){d((()=>{var t;const o=this.element.closest("form")||(null===(t=this.element.closest("mg-form"))||void 0===t?void 0:t.shadowRoot.querySelector("form"));o&&["submit",void 0].includes(this.type)&&this.element.addEventListener("click",(()=>{o.dispatchEvent(new SubmitEvent("submit",{bubbles:!0,cancelable:!0}))}))}))}render(){var t;return i(e,{key:"9efa9dbbcdb2965cb8fd301c86988d0b0d97b474",role:"button",tabIndex:this.element.getAttribute("tabindex")||0,type:this.type,form:this.form,"full-width":this.fullWidth,"aria-label":this.label,"aria-disabled":null===(t=this.disabled)||void 0===t?void 0:t.toString(),onClick:this.handleClick,onKeyup:this.handleKeyup,onKeydown:this.handleKeydown},i("div",{key:"36918b5b208a9e0a9650107f4418cac35ade1ed2",class:this.classCollection.join()},this.loading&&i("mg-icon",{key:"8ad3e911d273f69441f2a405f8040cc685a0a486",icon:"loader",spin:!0}),i("div",{key:"a6b199c669ef6b15bfc345c98192290ce11e65cb",class:"mg-c-button__content"},i("slot",{key:"b13d317001dbf66c945cdf9e97c06338ce073c12"}))))}get element(){return this}static get watchers(){return{variant:[{validateVariant:0}],size:[{validateSize:0}],fullWidth:[{validateFullWidth:0}],disabled:[{disabledHandler:0}],isIcon:[{watchIsIcon:0}],loading:[{loadingHandler:0}]}}static get style(){return":host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button--flat:not(.mg-c-button--disabled){background:color-mix(in srgb, var(--mg-b-color-dark), transparent 90%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{border-color:var(--mg-c-button-color-border-primary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-primary), var(--mg-c-button-color-gradient-primary));color:var(--mg-c-button-color-text-primary)}:host(:hover) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--primary:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-primary)}.mg-c-button.mg-c-button--secondary{border-color:var(--mg-c-button-color-border-secondary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-secondary), var(--mg-c-button-color-gradient-secondary));color:var(--mg-c-button-color-text-secondary)}:host(:hover) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--secondary:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-secondary)}.mg-c-button.mg-c-button--danger{border-color:var(--mg-c-button-color-border-danger);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger), var(--mg-c-button-color-gradient-danger));color:var(--mg-c-button-color-text-danger)}:host(:hover) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--danger:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-danger)}.mg-c-button.mg-c-button--info{border-color:var(--mg-c-button-color-border-info);background:linear-gradient(to bottom, var(--mg-c-button-color-background-info), var(--mg-c-button-color-gradient-info));color:var(--mg-c-button-color-text-info)}:host(:hover) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--info:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-info)}.mg-c-button.mg-c-button--success{border-color:var(--mg-c-button-color-border-success);background:linear-gradient(to bottom, var(--mg-c-button-color-background-success), var(--mg-c-button-color-gradient-success));color:var(--mg-c-button-color-text-success)}:host(:hover) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--success:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-success)}.mg-c-button.mg-c-button--warning{border-color:var(--mg-c-button-color-border-warning);background:linear-gradient(to bottom, var(--mg-c-button-color-background-warning), var(--mg-c-button-color-gradient-warning));color:var(--mg-c-button-color-text-warning)}:host(:hover) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--warning:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-warning)}.mg-c-button.mg-c-button--danger-alt{border-color:var(--mg-c-button-color-border-danger-alt);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger-alt), var(--mg-c-button-color-gradient-danger-alt));color:var(--mg-c-button-color-text-danger-alt)}:host(:hover) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--danger-alt:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-danger-alt)}.mg-c-button{position:relative;display:inline-flex;min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-width:var(--mg-c-button-border-top-width, var(--mg-b-size-border)) var(--mg-c-button-border-right-width, var(--mg-b-size-border)) var(--mg-c-button-border-bottom-width, var(--mg-b-size-border)) var(--mg-c-button-border-left-width, var(--mg-b-size-border));border-style:solid;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-border-radius));background-image:none;column-gap:var(--mg-b-size-8);cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:var(--mg-b-size-8)}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--disabled,.mg-c-button[aria-disabled=true],.mg-c-button:disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--large{padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border)) calc(var(--mg-b-size-24) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon){line-height:var(--mg-b-size-24)}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) slot,.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) ::slotted(*){font-size:var(--mg-b-size-16)}.mg-c-button.mg-c-button--icon{width:var(--mg-b-size-min-height);height:var(--mg-b-size-min-height);justify-content:center;padding:0;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-icon-border-radius));font-size:var(--mg-b-font-size);line-height:var(--mg-b-font-size)}.mg-c-button.mg-c-button--icon.mg-c-button--large{width:unset;height:unset;padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--icon.mg-c-button--large ::slotted(*){min-width:var(--mg-b-size-24);min-height:var(--mg-b-size-24);align-items:center;justify-content:center}.mg-c-button.mg-c-button--full-width{display:flex;width:100%;justify-content:center}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible),:host([data-focus-visible]){outline:0}:host(:focus-visible) .mg-c-button,:host([data-focus-visible]) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:var(--mg-b-size-2)}"}},[257,"mg-button",{variant:[1025],label:[1],type:[1],size:[1],fullWidth:[4,"full-width"],form:[1],disabled:[1028],isIcon:[4,"is-icon"],disableOnClick:[4,"disable-on-click"],loading:[32],classCollection:[32]},void 0,{variant:[{validateVariant:0}],size:[{validateSize:0}],fullWidth:[{validateFullWidth:0}],disabled:[{disabledHandler:0}],isIcon:[{watchIsIcon:0}],loading:[{loadingHandler:0}]}]);function v(){"undefined"!=typeof customElements&&["mg-button","mg-icon"].forEach((o=>{switch(o){case"mg-button":customElements.get(t(o))||customElements.define(t(o),h);break;case"mg-icon":customElements.get(t(o))||u()}}))}v();export{h as M,v as d}
+import{transformTag as t,proxyCustomElement as o,HTMLElement as n,createEvent as r,h as i,Host as e}from"@stencil/core/internal/client";import{C as a,i as c,t as b}from"./index2.js";import{n as s}from"./index3.js";import{K as g}from"./events.utils.js";import{d}from"./mg-icon2.js";const u=["medium","large"],m=["primary","secondary","danger","danger-alt","info","flat","success","link"],l=o(class extends n{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.disabledChange=r(this,"disabled-change",7),this.onClickElementFn=null,this.classDisabled="mg-c-button--disabled",this.classLoading="mg-c-button--loading",this.classFullWidth="mg-c-button--full-width",this.variant="primary",this.size="medium",this.fullWidth=!1,this.isIcon=!1,this.disableOnClick=!1,this.loading=!1,this.classCollection=new a(["mg-c-button"]),this.handleClick=t=>{this.disabled?t.stopPropagation():this.disableOnClick&&(this.loading=!0,this.disabled=!0)},this.handleKeydown=t=>{this.disabled||" "!==t.key?!this.disabled&&[g.ENTER,g.NUMPADENTER,g.SPACE].includes(t.key)&&(t.preventDefault(),this.element.dispatchEvent(new MouseEvent("click",{bubbles:!0}))):t.preventDefault()},this.handleKeyup=t=>{this.disabled||" "!==t.key||(t.preventDefault(),this.element.dispatchEvent(new MouseEvent("click",{bubbles:!0})))},this.setIconSize=()=>{var t,o;"medium"===this.size?null===(t=this.element.querySelector("mg-icon[size]"))||void 0===t||t.removeAttribute("size"):this.isIcon&&(null===(o=this.element.querySelector("mg-icon"))||void 0===o||o.setAttribute("size",this.size))},this.dispatchSubmit=t=>{t.dispatchEvent(new SubmitEvent("submit",{bubbles:!0,cancelable:!0}))},this.mgFormActions=t=>({submit:()=>t.requestSubmit(),reset:()=>t.reset()}),this.nativeFormActions=t=>({submit:()=>this.dispatchSubmit(t),reset:()=>t.reset()}),this.resolveOwnerById=()=>{const t=this.element.closest("mg-form");if(null!==t&&t.identifier===this.form)return this.mgFormActions(t);const o=this.element.getRootNode(),n=o instanceof ShadowRoot?o:this.element.ownerDocument,r=Array.from(n.querySelectorAll("mg-form")).find((t=>t.identifier===this.form));if(void 0!==r)return this.mgFormActions(r);const i=n.getElementById(this.form);return i instanceof HTMLFormElement?this.nativeFormActions(i):null},this.resolveFormOwner=()=>{if(c(this.form)){const t=this.resolveOwnerById();if(null!==t)return t;console.error(`<mg-button> prop "form" matches no form in the button tree. Passed value: ${b(this.form)}.`)}const t=this.element.closest("form");if(null!==t)return this.nativeFormActions(t);const o=this.element.closest("mg-form");return null===o?null:this.mgFormActions(o)},this.handleFormClick=()=>{const t=["submit",void 0].includes(this.type),o="reset"===this.type&&c(this.form);if(!t&&!o)return;const n=this.resolveFormOwner();null!==n&&(t?n.submit():n.reset())}}validateVariant(t,o){if(!m.includes(t)){if(""===t)return void(this.variant=m[0]);throw new Error(`<mg-button> prop "variant" must be one of: ${m.join(", ")}. Passed value: ${b(t)}.`)}void 0!==o&&this.classCollection.delete(`mg-c-button--${o}`),this.classCollection.add(`mg-c-button--${t}`)}validateSize(t,o){if(!u.includes(t))throw new Error(`<mg-button> prop "size" must be one of: ${u.join(", ")}. Passed value: ${b(t)}.`);void 0!==o&&this.classCollection.delete(`mg-c-button--${o}`),this.classCollection.add(`mg-c-button--${t}`),this.setIconSize()}validateFullWidth(t){if(t&&this.isIcon)throw new Error('<mg-button> prop "fullWidth" cannot be used with prop "isIcon".');t?this.classCollection.add(this.classFullWidth):this.classCollection.delete(this.classFullWidth)}disabledHandler(t){!t&&this.disableOnClick&&(this.loading=!1),this.element.onclick=t?void 0:this.onClickElementFn,t?this.classCollection.add(this.classDisabled):this.classCollection.delete(this.classDisabled),this.disabledChange.emit(t)}watchIsIcon(t){if(t){if(this.classCollection.add("mg-c-button--icon"),!c(this.label))throw new Error('<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.')}else this.classCollection.delete("mg-c-button--icon");this.setIconSize()}loadingHandler(t){t?this.classCollection.add(this.classLoading):this.classCollection.delete(this.classLoading)}componentWillLoad(){s(this),this.validateVariant(this.variant),this.validateFullWidth(this.fullWidth),this.validateSize(this.size),this.watchIsIcon(this.isIcon),this.onClickElementFn=this.element.onclick,this.disabledHandler(this.disabled)}componentDidLoad(){this.element.addEventListener("click",this.handleFormClick)}render(){var t;return i(e,{key:"815bedd3729c652a5faf06c3d451cbc67123ab63",role:"button",tabIndex:this.element.getAttribute("tabindex")||0,type:this.type,form:this.form,"full-width":this.fullWidth,"aria-label":this.label,"aria-disabled":null===(t=this.disabled)||void 0===t?void 0:t.toString(),onClick:this.handleClick,onKeyup:this.handleKeyup,onKeydown:this.handleKeydown},i("div",{key:"2a1c20c677294870958f01c4042e8f530bf0f89d",class:this.classCollection.join()},this.loading&&i("mg-icon",{key:"db3960249deed458f86bcba16b66bbeb9aac69c1",icon:"loader",spin:!0}),i("div",{key:"76a3af6c9a105b91b7f6055cc19bbb6f315be1a5",class:"mg-c-button__content"},i("slot",{key:"ca87921b6c58fbd055a83ea28f5ce58a618f16fe"}))))}get element(){return this}static get watchers(){return{variant:[{validateVariant:0}],size:[{validateSize:0}],fullWidth:[{validateFullWidth:0}],disabled:[{disabledHandler:0}],isIcon:[{watchIsIcon:0}],loading:[{loadingHandler:0}]}}static get style(){return":host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button--flat:not(.mg-c-button--disabled),.mg-c-button--flat:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:color-mix(in srgb, var(--mg-b-color-dark), transparent 90%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{border-color:var(--mg-c-button-color-border-primary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-primary), var(--mg-c-button-color-gradient-primary));color:var(--mg-c-button-color-text-primary)}:host(:hover) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--primary:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--primary:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-primary)}.mg-c-button.mg-c-button--secondary{border-color:var(--mg-c-button-color-border-secondary);background:linear-gradient(to bottom, var(--mg-c-button-color-background-secondary), var(--mg-c-button-color-gradient-secondary));color:var(--mg-c-button-color-text-secondary)}:host(:hover) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--secondary:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--secondary:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-secondary)}.mg-c-button.mg-c-button--danger{border-color:var(--mg-c-button-color-border-danger);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger), var(--mg-c-button-color-gradient-danger));color:var(--mg-c-button-color-text-danger)}:host(:hover) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--danger:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--danger:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-danger)}.mg-c-button.mg-c-button--info{border-color:var(--mg-c-button-color-border-info);background:linear-gradient(to bottom, var(--mg-c-button-color-background-info), var(--mg-c-button-color-gradient-info));color:var(--mg-c-button-color-text-info)}:host(:hover) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--info:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--info:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-info)}.mg-c-button.mg-c-button--success{border-color:var(--mg-c-button-color-border-success);background:linear-gradient(to bottom, var(--mg-c-button-color-background-success), var(--mg-c-button-color-gradient-success));color:var(--mg-c-button-color-text-success)}:host(:hover) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--success:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--success:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-success)}.mg-c-button.mg-c-button--warning{border-color:var(--mg-c-button-color-border-warning);background:linear-gradient(to bottom, var(--mg-c-button-color-background-warning), var(--mg-c-button-color-gradient-warning));color:var(--mg-c-button-color-text-warning)}:host(:hover) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--warning:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--warning:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-warning)}.mg-c-button.mg-c-button--danger-alt{border-color:var(--mg-c-button-color-border-danger-alt);background:linear-gradient(to bottom, var(--mg-c-button-color-background-danger-alt), var(--mg-c-button-color-gradient-danger-alt));color:var(--mg-c-button-color-text-danger-alt)}:host(:hover) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled),:host([data-mg-popover-trigger][aria-expanded=true]) .mg-c-button.mg-c-button--danger-alt:not(.mg-c-button--disabled),.mg-c-button.mg-c-button--danger-alt:hover:not(.mg-c-button--disabled,:disabled,[aria-disabled=true]){background:var(--mg-c-button-color-background-danger-alt)}.mg-c-button{position:relative;display:inline-flex;min-height:var(--mg-b-size-min-height);box-sizing:border-box;align-items:center;padding:calc((var(--mg-b-size-min-height) - 2*var(--mg-b-size-border) - var(--mg-b-font-size)*var(--mg-b-line-height))/2) var(--mg-b-size-12);border-width:var(--mg-c-button-border-top-width, var(--mg-b-size-border)) var(--mg-c-button-border-right-width, var(--mg-b-size-border)) var(--mg-c-button-border-bottom-width, var(--mg-b-size-border)) var(--mg-c-button-border-left-width, var(--mg-b-size-border));border-style:solid;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-border-radius));background-image:none;color:inherit;column-gap:var(--mg-b-size-8);cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--mg-b-font-size);font-weight:var(--mg-c-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:var(--mg-b-size-8)}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--disabled,.mg-c-button[aria-disabled=true],.mg-c-button:disabled{cursor:default;opacity:var(--mg-b-opacity-element-disabled);pointer-events:none}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--large{padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border)) calc(var(--mg-b-size-24) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon){line-height:var(--mg-b-size-24)}.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) slot,.mg-c-button.mg-c-button--large:not(.mg-c-button--icon) ::slotted(*){font-size:var(--mg-b-size-16)}.mg-c-button.mg-c-button--icon{width:var(--mg-b-size-min-height);height:var(--mg-b-size-min-height);justify-content:center;padding:0;border-radius:var(--mg-c-button-border-radius-top-left, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-top-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-right, var(--mg-c-button-icon-border-radius)) var(--mg-c-button-border-radius-bottom-left, var(--mg-c-button-icon-border-radius));font-size:var(--mg-b-font-size);line-height:var(--mg-b-font-size)}.mg-c-button.mg-c-button--icon.mg-c-button--large{width:unset;height:unset;padding:calc(var(--mg-b-size-12) - var(--mg-b-size-border))}.mg-c-button.mg-c-button--icon.mg-c-button--large ::slotted(*){min-width:var(--mg-b-size-24);min-height:var(--mg-b-size-24);align-items:center;justify-content:center}.mg-c-button.mg-c-button--full-width{display:flex;width:100%;justify-content:center}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible),:host([data-focus-visible]){outline:0}:host(:focus-visible) .mg-c-button,:host([data-focus-visible]) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:var(--mg-b-size-2)}.mg-c-button:focus-visible{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:var(--mg-b-size-2)}"}},[257,"mg-button",{variant:[1025],label:[1],type:[1],size:[1],fullWidth:[4,"full-width"],form:[1],disabled:[1028],isIcon:[4,"is-icon"],disableOnClick:[4,"disable-on-click"],loading:[32],classCollection:[32]},void 0,{variant:[{validateVariant:0}],size:[{validateSize:0}],fullWidth:[{validateFullWidth:0}],disabled:[{disabledHandler:0}],isIcon:[{watchIsIcon:0}],loading:[{loadingHandler:0}]}]);function h(){"undefined"!=typeof customElements&&["mg-button","mg-icon"].forEach((o=>{switch(o){case"mg-button":customElements.get(t(o))||customElements.define(t(o),l);break;case"mg-icon":customElements.get(t(o))||d()}}))}h();export{l as M,h as d}

package/dist/components/mg-details.js

@@ -1 +1 @@
-import{transformTag as e,proxyCustomElement as t,HTMLElement as i,createEvent as a,h as s}from"@stencil/core/internal/client";import{i as n}from"./index2.js";import{n as d}from"./index3.js";import{d as o}from"./mg-icon2.js";const m=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.expandedChange=a(this,"expanded-change",7),this.hideSummary=!1,this.expanded=!1,this.handleToggle=()=>{this.expanded=this.details.open}}validateTitles(e){if(!n(e))throw Error(`<mg-details> prop "toggleClosed" and "toggleOpened" is required and must be a valid string. Passed value: "toggleClosed='${this.toggleClosed}'" and "toggleOpened='${this.toggleOpened}'".`)}handleExpanded(e){this.expandedChange.emit(e)}componentWillLoad(){d(this),this.validateTitles(this.toggleClosed),this.validateTitles(this.toggleOpened);const e=this.element.querySelector('[slot="summary"]');this.isEmptySummary=null===e||!n(e.textContent),this.element.addEventListener("click",(e=>{null!==e.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]')&&e.preventDefault()}))}render(){return s("details",{key:"78dbeab3b3e6c245bda8fad5900b70727fd47595",class:{"mg-c-details":!0,"mg-c-details--empty-summary":this.isEmptySummary},onToggle:this.handleToggle,open:this.expanded,ref:e=>this.details=e},s("summary",{key:"766e4756a66a1f8e6bc2159f30133a0702353f32"},s("slot",{key:"3473dd0c0fc7de78c1d7ae6f9ee4a4d2fc7835ee",name:"summary"}),s("span",{key:"7c8d3da4df69d2802f104caaf568ac513f9f03b6",class:"mg-c-details__toggle"},s("mg-icon",{key:"44da384780ab768bde20acb58885280e193de921",icon:"chevron-up",class:{"mg-c-details__toggle-icon":!0,"mg-c-details__toggle-icon--reverse":!this.expanded}}),s("span",{key:"387de0caa5ae819c89449e5063e0b6e05b3df8fe",class:{"mg-u-visually-hidden":this.hideSummary}},this.expanded?this.toggleOpened:this.toggleClosed))),s("div",{key:"48c1fe8df990a250f098594d9b50df947613955c",class:"mg-c-details__details"},s("slot",{key:"95554b4d890750cc3b3008965be3e5954d49d810",name:"details"})))}get element(){return this}static get watchers(){return{toggleClosed:[{validateTitles:0}],toggleOpened:[{validateTitles:0}],expanded:[{handleExpanded:0}]}}static get style(){return".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-details summary{display:inline-flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details.mg-c-details--empty-summary summary{gap:unset}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media (width < 43.75rem){.mg-c-details:not(.mg-c-details--empty-summary) .mg-c-details__toggle>span{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-c-details:not(.mg-c-details--empty-summary) .mg-c-details__toggle>span *{overflow:hidden !important}}"}},[257,"mg-details",{toggleClosed:[1,"toggle-closed"],toggleOpened:[1,"toggle-opened"],hideSummary:[4,"hide-summary"],expanded:[1028]},void 0,{toggleClosed:[{validateTitles:0}],toggleOpened:[{validateTitles:0}],expanded:[{handleExpanded:0}]}]);function l(){"undefined"!=typeof customElements&&["mg-details","mg-icon"].forEach((t=>{switch(t){case"mg-details":customElements.get(e(t))||customElements.define(e(t),m);break;case"mg-icon":customElements.get(e(t))||o()}}))}l();const r=m,g=l;export{r as MgDetails,g as defineCustomElement}
+import{transformTag as e,proxyCustomElement as t,HTMLElement as i,createEvent as a,h as s}from"@stencil/core/internal/client";import{i as n}from"./index2.js";import{n as m}from"./index3.js";import{d as o}from"./mg-icon2.js";const d=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.expandedChange=a(this,"expanded-change",7),this.hideSummary=!1,this.expanded=!1,this.handleToggle=()=>{this.expanded=this.details.open}}validateTitles(e){if(!n(e))throw Error(`<mg-details> prop "toggleClosed" and "toggleOpened" is required and must be a valid string. Passed value: "toggleClosed='${this.toggleClosed}'" and "toggleOpened='${this.toggleOpened}'".`)}handleExpanded(e){this.expandedChange.emit(e)}componentWillLoad(){m(this),this.validateTitles(this.toggleClosed),this.validateTitles(this.toggleOpened);const e=this.element.querySelector('[slot="summary"]');this.isEmptySummary=null===e||!n(e.textContent),this.element.addEventListener("click",(e=>{null!==e.target.closest('[slot="summary"] mg-button, mg-button[slot="summary"]')&&e.preventDefault()}))}render(){return s("details",{key:"12eac25682e22d65ace61f6697656459d1494903",class:{"mg-c-details":!0,"mg-c-details--hide-summary":this.hideSummary,"mg-c-details--empty-summary":this.isEmptySummary},onToggle:this.handleToggle,open:this.expanded,ref:e=>this.details=e},s("summary",{key:"d6d621db04bca17297f770a633fcb17711f99ecf"},s("slot",{key:"245aad29a2f2cd93e3a5426ce1e010ab6f5b5e07",name:"summary"}),s("span",{key:"ebfe3c80a00b9b7a38a670f536a3984420ec3945",class:"mg-c-details__toggle"},s("mg-icon",{key:"73c4eb27b3d6aa9168bf6af9fa118afc51b8ee1a",icon:"chevron-up",class:{"mg-c-details__toggle-icon":!0,"mg-c-details__toggle-icon--reverse":!this.expanded}}),s("span",{key:"96730ec386137f7f3aa463b76c20547a5922f294",class:{"mg-u-visually-hidden":this.hideSummary}},this.expanded?this.toggleOpened:this.toggleClosed))),s("div",{key:"8ac6eee499e613a543fd2a2ea9d954719d48005d",class:"mg-c-details__details"},s("slot",{key:"37af4674491d7857163dcc48424e652cfcefbed6",name:"details"})))}get element(){return this}static get watchers(){return{toggleClosed:[{validateTitles:0}],toggleOpened:[{validateTitles:0}],expanded:[{handleExpanded:0}]}}static get style(){return".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-u-visually-hidden *{overflow:hidden !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-details summary{display:inline-flex;align-items:baseline;cursor:pointer;gap:var(--mg-b-size-16)}.mg-c-details summary::-webkit-details-marker{display:none}.mg-c-details.mg-c-details--hide-summary summary{gap:var(--mg-b-size-4)}.mg-c-details.mg-c-details--empty-summary summary{gap:unset}.mg-c-details__toggle{display:flex;min-height:calc(var(--mg-b-font-size)*var(--mg-b-line-height));flex-shrink:0;align-items:center;align-self:flex-start;gap:var(--mg-b-size-4)}.mg-c-details__toggle-icon.mg-c-details__toggle-icon--reverse{transform:rotate(180deg)}.mg-c-details__details{margin-top:var(--mg-c-details-spacing)}@media (width < 43.75rem){.mg-c-details:not(.mg-c-details--empty-summary) .mg-c-details__toggle>span{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip-path:inset(50%) !important;white-space:nowrap !important}.mg-c-details:not(.mg-c-details--empty-summary) .mg-c-details__toggle>span *{overflow:hidden !important}}"}},[257,"mg-details",{toggleClosed:[1,"toggle-closed"],toggleOpened:[1,"toggle-opened"],hideSummary:[4,"hide-summary"],expanded:[1028]},void 0,{toggleClosed:[{validateTitles:0}],toggleOpened:[{validateTitles:0}],expanded:[{handleExpanded:0}]}]);function l(){"undefined"!=typeof customElements&&["mg-details","mg-icon"].forEach((t=>{switch(t){case"mg-details":customElements.get(e(t))||customElements.define(e(t),d);break;case"mg-icon":customElements.get(e(t))||o()}}))}l();const r=d,g=l;export{r as MgDetails,g as defineCustomElement}

package/dist/components/mg-form.js

@@ -1 +1 @@
-import{transformTag as i,proxyCustomElement as t,HTMLElement as e,createEvent as s,h as r}from"@stencil/core/internal/client";import{c as a,C as h,a as o,t as n}from"./index2.js";import{n as l}from"./index3.js";import{i as d}from"./index4.js";import{i as m}from"./mg-input.conf.js";const c=["form","search","none","presentation"],f=["default","hide"],u=t(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.formValid=s(this,"form-valid",7),this.formSubmit=s(this,"form-submit",7),this.formReset=s(this,"form-reset",7),this.classAllRequired="mg-c-form--all-required",this.classLabelOnTop="mg-c-form--label-on-top",this.identifier=a("mg-form"),this.name=this.identifier,this.readonly=!1,this.labelOnTop=!1,this.disabled=!1,this.classCollection=new h(["mg-c-form"]),this.setRequiredMessage=()=>{if(this.requiredMessageText=null,this.classCollection.delete(this.classAllRequired),"hide"===this.requiredMessage)return;if("default"===this.requiredMessage)return void(this.requiredMessageText=this.messages.form.required);const i=i=>!(i.disabled||i.readonly),t=i=>"MG-INPUT-TOGGLE"===i.nodeName;if(!this.disabled&&!this.readonly&&this.mgInputs.some((e=>i(e)&&!t(e)))){const e=this.mgInputs.filter(i),s=e.filter((i=>!t(i)&&i.required));[s.length,e.length].every((i=>1===i))||s.length>1&&s.length===e.filter((i=>!t(i))).length?(this.requiredMessageText=this.getRequiredMessageBasedOnCount(s,"allRequiredSingle","allRequired"),this.classCollection.add(this.classAllRequired)):s.length>0&&(this.requiredMessageText=this.getRequiredMessageBasedOnCount(s,"requiredSingle","required"))}},this.getRequiredMessageBasedOnCount=(i,t,e)=>this.messages.form[1===i.length?t:e],this.checkValidity=()=>{this.setRequiredMessage(),this.valid=!this.mgInputs.some((i=>i.invalid)),this.invalid=!this.valid,this.formValid.emit(this.valid)},this.handleFormSubmit=i=>{i.preventDefault(),this.formSubmit.emit()},this.setMgInputs=()=>{this.mgInputs=Array.from(this.element.querySelectorAll("*")).filter((i=>i.nodeName.startsWith("MG-INPUT"))),this.mgInputs.forEach((i=>{this.labelOnTop&&(i.labelOnTop=!0),"MG-INPUT-FILE"===i.nodeName&&(this.readonly?i.setAttribute("hidden",""):i.removeAttribute("hidden")),this.readonly&&!m(i)?i.readonly=!0:this.disabled?i.disabled=!0:i.addEventListener("input-valid",this.checkValidity)}))}}watchIdentifier(i){o(i)||console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${n(i)}.`)}validateRequiredMessage(i){if(i&&!f.includes(i))throw Error(`<mg-form> prop "requiredMessage" must be one of: ${f.join(", ")}. Passed value: ${n(i)}.`)}validateAriaRole(i){if(i&&!c.includes(i))throw Error(`<mg-form> prop "ariaRole" must be one of: ${c.join(", ")}. Passed value: ${n(i)}.`)}handlelabelOnTop(i){i?this.classCollection.add(this.classLabelOnTop):this.classCollection.delete(this.classLabelOnTop)}handleAttributeChange(){this.setMgInputs(),this.setRequiredMessage()}async displayError(){this.readonly||([...Array.from(this.element.querySelectorAll("*")).filter((i=>i.nodeName.startsWith("MG-FIELDSET"))),...this.mgInputs].forEach((i=>{var t;null===(t=i.displayError)||void 0===t||t.call(i)})),this.checkValidity())}async reset(){this.readonly||(await Promise.all(this.mgInputs.map((async i=>{void 0!==i.reset&&await i.reset()}))),this.checkValidity(),this.formReset.emit(!0))}componentWillLoad(){this.messages=d(this.element).messages,l(this),this.watchIdentifier(this.identifier),this.validateAriaRole(this.ariaRole),this.validateRequiredMessage(this.requiredMessage),this.handlelabelOnTop(this.labelOnTop),this.mgButtons=Array.from(this.element.querySelectorAll("mg-button")),this.mgButtons.forEach((i=>{i.setAttribute("form",this.identifier),"reset"===i.type&&i.addEventListener("click",(()=>{this.reset()}))})),this.setMgInputs(),Promise.all(this.mgInputs.map((async i=>{try{await i.componentOnReady()}catch(i){}}))).then((()=>{this.checkValidity()}))}componentDidLoad(){const i={childList:!0,subtree:!0};new MutationObserver((t=>{t.some((t=>Object.keys(i).includes(t.type)))&&(this.setMgInputs(),this.checkValidity())})).observe(this.element,i)}render(){return r("form",{key:"65d3e11931386af2dedd953f58505e2c71cd99ff",class:this.classCollection.join(),id:this.identifier,name:this.name,onSubmit:this.handleFormSubmit,role:this.ariaRole},this.requiredMessageText&&r("p",{key:"7546db3b8a4259fd7d092cc7b912b6593fab9d84",innerHTML:this.requiredMessageText}),r("slot",{key:"0023ed360230ea97395a249b230e02bb7a4bdbda"}),!this.readonly&&!this.disabled&&r("slot",{key:"de84e088ff029eff487be1ed8b4766425c558c29",name:"actions"}))}get element(){return this}static get watchers(){return{identifier:[{watchIdentifier:0}],requiredMessage:[{validateRequiredMessage:0},{handleAttributeChange:0}],ariaRole:[{validateAriaRole:0}],labelOnTop:[{handlelabelOnTop:0}],readonly:[{handleAttributeChange:0}],disabled:[{handleAttributeChange:0}]}}static get style(){return".mg-u-form-legacy{--mg-c-form-inputs-title-width:calc(100% / 3 - 20px)}.mg-u-is-asterisk{color:var(--mg-b-color-danger)}.mg-c-form{--mg-c-input-title-width:var(--mg-c-form-inputs-title-width, calc(28 * var(--mg-b-size-8)));--mg-c-input-margin-bottom:var(--mg-b-size-16);--mg-c-input-title-horizontal-space:var(--mg-b-size-32)}.mg-c-form.mg-c-form--all-required{--mg-c-input-title-display:none}.mg-c-form.mg-c-form--label-on-top{--mg-c-input-margin-bottom:var(--mg-b-size-24)}.mg-c-form>p{font-size:var(--mg-b-font-size-small)}"}},[257,"mg-form",{identifier:[1],name:[1],readonly:[4],requiredMessage:[1,"required-message"],ariaRole:[1,"aria-role"],labelOnTop:[4,"label-on-top"],disabled:[4],valid:[1028],invalid:[1028],classCollection:[32],requiredMessageText:[32],displayError:[64],reset:[64]},void 0,{identifier:[{watchIdentifier:0}],requiredMessage:[{validateRequiredMessage:0},{handleAttributeChange:0}],ariaRole:[{validateAriaRole:0}],labelOnTop:[{handlelabelOnTop:0}],readonly:[{handleAttributeChange:0}],disabled:[{handleAttributeChange:0}]}]);function g(){"undefined"!=typeof customElements&&["mg-form"].forEach((t=>{"mg-form"===t&&(customElements.get(i(t))||customElements.define(i(t),u))}))}g();const b=u,p=g;export{b as MgForm,p as defineCustomElement}
+import{transformTag as t,proxyCustomElement as i,HTMLElement as e,createEvent as s,h as a}from"@stencil/core/internal/client";import{c as r,C as o,a as n,t as h,i as l}from"./index2.js";import{n as m}from"./index3.js";import{i as d}from"./index4.js";import{i as c}from"./mg-input.conf.js";const f=["form","search","none","presentation"],u=["default","hide"],g=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.formValid=s(this,"form-valid",7),this.formSubmit=s(this,"form-submit",7),this.formReset=s(this,"form-reset",7),this.classAllRequired="mg-c-form--all-required",this.classLabelOnTop="mg-c-form--label-on-top",this.identifier=r("mg-form"),this.name=this.identifier,this.readonly=!1,this.labelOnTop=!1,this.disabled=!1,this.classCollection=new o(["mg-c-form"]),this.hasActions=!1,this.setRequiredMessage=()=>{if(this.requiredMessageText=null,this.classCollection.delete(this.classAllRequired),"hide"===this.requiredMessage)return;if("default"===this.requiredMessage)return void(this.requiredMessageText=this.messages.form.required);const t=t=>!(t.disabled||t.readonly),i=t=>"MG-INPUT-TOGGLE"===t.nodeName;if(!this.disabled&&!this.readonly&&this.mgInputs.some((e=>t(e)&&!i(e)))){const e=this.mgInputs.filter(t),s=e.filter((t=>!i(t)&&t.required));[s.length,e.length].every((t=>1===t))||s.length>1&&s.length===e.filter((t=>!i(t))).length?(this.requiredMessageText=this.getRequiredMessageBasedOnCount(s,"allRequiredSingle","allRequired"),this.classCollection.add(this.classAllRequired)):s.length>0&&(this.requiredMessageText=this.getRequiredMessageBasedOnCount(s,"requiredSingle","required"))}},this.getRequiredMessageBasedOnCount=(t,i,e)=>this.messages.form[1===t.length?i:e],this.checkValidity=()=>{this.setRequiredMessage(),this.valid=!this.mgInputs.some((t=>t.invalid)),this.invalid=!this.valid,this.formValid.emit(this.valid)},this.handleFormSubmit=t=>{t.preventDefault(),this.formSubmit.emit()},this.setMgInputs=()=>{this.mgInputs=Array.from(this.element.querySelectorAll("*")).filter((t=>t.nodeName.startsWith("MG-INPUT"))),this.mgInputs.forEach((t=>{this.labelOnTop&&(t.labelOnTop=!0),"MG-INPUT-FILE"===t.nodeName&&(this.readonly?t.setAttribute("hidden",""):t.removeAttribute("hidden")),this.readonly&&!c(t)?t.readonly=!0:this.disabled?t.disabled=!0:t.addEventListener("input-valid",this.checkValidity)}))}}watchIdentifier(t){n(t)||console.error(`<mg-form> prop "identifier" value is invalid. Passed value: ${h(t)}.`)}validateRequiredMessage(t){if(t&&!u.includes(t))throw Error(`<mg-form> prop "requiredMessage" must be one of: ${u.join(", ")}. Passed value: ${h(t)}.`)}validateAriaRole(t){if(t&&!f.includes(t))throw Error(`<mg-form> prop "ariaRole" must be one of: ${f.join(", ")}. Passed value: ${h(t)}.`)}handlelabelOnTop(t){t?this.classCollection.add(this.classLabelOnTop):this.classCollection.delete(this.classLabelOnTop)}handleAttributeChange(){this.setMgInputs(),this.setRequiredMessage()}async displayError(){this.readonly||([...Array.from(this.element.querySelectorAll("*")).filter((t=>t.nodeName.startsWith("MG-FIELDSET"))),...this.mgInputs].forEach((t=>{var i;null===(i=t.displayError)||void 0===i||i.call(t)})),this.checkValidity())}async reset(){this.readonly||(await Promise.all(this.mgInputs.map((async t=>{void 0!==t.reset&&await t.reset()}))),this.checkValidity(),this.formReset.emit(!0))}async requestSubmit(){this.formSubmit.emit()}async focusFirstInvalidInput(){if(!this.readonly){await this.displayError(),await new Promise((t=>requestAnimationFrame(t)));const t=this.mgInputs.find((t=>t.invalid));void 0!==t&&(await t.setFocus(),t.scrollIntoView())}}componentWillLoad(){this.messages=d(this.element).messages,m(this),this.watchIdentifier(this.identifier),this.validateAriaRole(this.ariaRole),this.validateRequiredMessage(this.requiredMessage),this.handlelabelOnTop(this.labelOnTop),this.hasActions=null!==this.element.querySelector('[slot="actions"]'),this.mgButtons=Array.from(this.element.querySelectorAll("mg-button")),this.mgButtons.forEach((t=>{var i;l(null!==(i=t.form)&&void 0!==i?i:t.getAttribute("form"))||t.setAttribute("form",this.identifier)})),this.setMgInputs(),Promise.all(this.mgInputs.map((async t=>{try{await t.componentOnReady()}catch(t){}}))).then((()=>{this.checkValidity()}))}componentDidLoad(){const t={childList:!0,subtree:!0};new MutationObserver((i=>{i.some((i=>Object.keys(t).includes(i.type)))&&(this.setMgInputs(),this.checkValidity(),this.hasActions=null!==this.element.querySelector('[slot="actions"]'))})).observe(this.element,t)}render(){return a("form",{key:"0c23474cba5ae38a70162129641128cdd17224cb",class:this.classCollection.join(),id:this.identifier,name:this.name,onSubmit:this.handleFormSubmit,role:this.ariaRole},this.requiredMessageText&&a("p",{key:"8938192d2b2f4d1278f6e5037ed7f0f839c44861",innerHTML:this.requiredMessageText}),a("slot",{key:"aefbcb13adbe2632b958c55c2c2c0174d5aaf471"}),!this.readonly&&!this.disabled&&this.hasActions&&a("div",{key:"30675225f5a910945f5b31fb044d3501c323acf9",class:"mg-c-form__actions"},a("slot",{key:"6f5b871264d0237fc1eccfac5c454e61135b81c4",name:"actions"})))}get element(){return this}static get watchers(){return{identifier:[{watchIdentifier:0}],requiredMessage:[{validateRequiredMessage:0},{handleAttributeChange:0}],ariaRole:[{validateAriaRole:0}],labelOnTop:[{handlelabelOnTop:0}],readonly:[{handleAttributeChange:0}],disabled:[{handleAttributeChange:0}]}}static get style(){return".mg-u-form-legacy{--mg-c-form-inputs-title-width:calc(100% / 3 - 20px)}.mg-u-is-asterisk{color:var(--mg-b-color-danger)}.mg-c-form{--mg-c-input-title-width:var(--mg-c-form-inputs-title-width, calc(28 * var(--mg-b-size-8)));--mg-c-input-margin-bottom:var(--mg-b-size-16);--mg-c-input-title-horizontal-space:var(--mg-b-size-32);--mg-c-form-inputs-field-offset:calc(var(--mg-c-input-title-width) + var(--mg-c-input-title-horizontal-space))}.mg-c-form.mg-c-form--all-required{--mg-c-input-title-display:none}.mg-c-form.mg-c-form--label-on-top{--mg-c-form-inputs-field-offset:0}.mg-c-form>p{font-size:var(--mg-b-font-size-small);margin-block-start:0}.mg-c-form ::slotted(*:last-child){--mg-c-input-margin-bottom:0}.mg-c-form__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--mg-b-size-8)}::slotted(.mg-l-form-field-align){margin-block-end:var(--mg-c-input-margin-bottom);margin-inline-start:var(--mg-c-form-inputs-field-offset)}@media screen and (max-width: 767px){.mg-c-form{--mg-c-form-inputs-field-offset:0}}"}},[257,"mg-form",{identifier:[1],name:[1],readonly:[4],requiredMessage:[1,"required-message"],ariaRole:[1,"aria-role"],labelOnTop:[4,"label-on-top"],disabled:[4],valid:[1028],invalid:[1028],classCollection:[32],requiredMessageText:[32],hasActions:[32],displayError:[64],reset:[64],requestSubmit:[64],focusFirstInvalidInput:[64]},void 0,{identifier:[{watchIdentifier:0}],requiredMessage:[{validateRequiredMessage:0},{handleAttributeChange:0}],ariaRole:[{validateAriaRole:0}],labelOnTop:[{handlelabelOnTop:0}],readonly:[{handleAttributeChange:0}],disabled:[{handleAttributeChange:0}]}]);function p(){"undefined"!=typeof customElements&&["mg-form"].forEach((i=>{"mg-form"===i&&(customElements.get(t(i))||customElements.define(t(i),g))}))}p();const b=g,v=p;export{b as MgForm,v as defineCustomElement}

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

@@ -1 +1 @@
-import{transformTag as e,proxyCustomElement as s,HTMLElement as t,h as i}from"@stencil/core/internal/client";import{C as l,t as a,b as m}from"./index2.js";const r=["small","medium","large"],g=["vertical","horizontal"],c=["left","center","right"],o=s(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.size="medium",this.direction="vertical",this.align="center",this.classCollection=new l(["mg-c-illustrated-message"])}watchSize(e,s){if(!r.includes(e))throw Error(`<mg-illustrated-message> prop "size" must be one of: ${r.join(", ")}. Passed value: ${a(e)}.`);void 0!==s&&this.classCollection.delete("mg-c-illustrated-message--size-"+s),this.classCollection.add("mg-c-illustrated-message--size-"+e)}watchDirection(e,s){if(void 0!==e&&!g.includes(e))throw Error(`<mg-illustrated-message> prop "direction" must be one of: ${g.join(", ")}. Passed value: ${a(e)}.`);"horizontal"===e?this.classCollection.add("mg-c-illustrated-message--direction-horizontal"):"horizontal"===s&&this.classCollection.delete("mg-c-illustrated-message--direction-horizontal")}watchAlign(e,s){if(!c.includes(e))throw Error(`<mg-illustrated-message> prop "align" must be one of: ${c.join(", ")}. Passed value: ${a(e)}.`);void 0!==s&&this.classCollection.delete("mg-c-illustrated-message--align-"+s),this.classCollection.add("mg-c-illustrated-message--align-"+e)}validateSlots(){const e=["h1","h2","h3","h4","h5","h6"],s=this.element.querySelector('[slot="title"]'),t=this.element.querySelectorAll('[slot="illustration"]');if(0===this.element.querySelectorAll('[slot="details"]').length&&null===s)throw Error('<mg-illustrated-message> Slot "title" or "details" must be present.');if(null!==s&&!m(s,e))throw Error(`<mg-illustrated-message> Slotted title must be a heading: ${e.join(", ")}.`);if(1!==t.length)throw Error("<mg-illustrated-message> Slotted illustration must be present and unique.");t[0].setAttribute("aria-hidden","true")}componentWillLoad(){this.watchDirection(this.direction),this.watchSize(this.size),this.watchAlign(this.align),this.validateSlots()}render(){return i("div",{key:"daffbfe09d4ccae7b2380d2dcd0f6157acf7a849",class:this.classCollection.join()},i("div",{key:"503631e106a43186d1031ebfd8bb5fa9e7aaa568",class:"mg-c-illustrated-message__illustration"},i("slot",{key:"6291af5e6155e38e3cfb63acf3ca774e22d385f6",name:"illustration"})),i("div",{key:"7c7518be3413c7e9cadb149a255505d20525b6c7",class:"mg-c-illustrated-message__slots"},i("slot",{key:"742dc8a06f3f7ab06e4e67b370a750100585c384",name:"title"}),i("slot",{key:"3da2b7d35d1076d4cb87337f9a21e149c72f9141",name:"details"})))}get element(){return this}static get watchers(){return{size:[{watchSize:0}],direction:[{watchDirection:0}],align:[{watchAlign:0}]}}static get style(){return".mg-c-illustrated-message{display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-c-illustrated-message-spacing-vertical) var(--mg-b-size-16);gap:var(--mg-b-size-16) var(--mg-b-size-64);max-inline-size:calc(60*var(--mg-b-size-8));text-align:center}.mg-c-illustrated-message__illustration{max-block-size:calc(15*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){block-size:auto;inline-size:100%;margin-inline:auto;max-block-size:calc(15*var(--mg-b-size-8));max-inline-size:calc(15*var(--mg-b-size-8))}.mg-c-illustrated-message__slots{display:flex;flex-direction:column;gap:var(--mg-b-size-8)}.mg-c-illustrated-message__slots ::slotted([slot=title]){margin:0;font-family:var(--mg-b-font-family-heading) !important;font-size:var(--mg-b-font-size-h2) !important}.mg-c-illustrated-message__slots ::slotted([slot=details]){margin:0}.mg-c-illustrated-message.mg-c-illustrated-message--size-small{--mg-c-illustrated-message-spacing-vertical:var(--mg-b-size-24)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__slots{gap:var(--mg-b-size-2)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration{max-block-size:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration ::slotted([slot=illustration]){max-block-size:var(--mg-b-size-64);max-inline-size:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration{max-block-size:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration ::slotted([slot=illustration]){max-block-size:calc(23*var(--mg-b-size-8));max-inline-size:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal{inline-size:fit-content;max-inline-size:unset}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__slots{max-inline-size:calc(60*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__illustration ::slotted(img[slot=illustration]){block-size:calc(15*var(--mg-b-size-8));inline-size:auto}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration ::slotted(img[slot=illustration]){block-size:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration ::slotted(img[slot=illustration]){block-size:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--align-left{margin-inline:0 auto}.mg-c-illustrated-message.mg-c-illustrated-message--align-center{margin-inline:auto}.mg-c-illustrated-message.mg-c-illustrated-message--align-right{margin-inline:auto 0}@container (width > 52.8rem){.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal{flex-direction:row;align-items:center;column-gap:var(--mg-b-size-48);text-align:left}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__slots{max-inline-size:unset}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__illustration{flex:1 0 auto;max-inline-size:fit-content}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-small{column-gap:var(--mg-b-size-24)}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-large{column-gap:var(--mg-b-size-64)}}:host{display:block;container-type:inline-size;inline-size:100%}"}},[257,"mg-illustrated-message",{size:[1],direction:[1],align:[1],classCollection:[32]},void 0,{size:[{watchSize:0}],direction:[{watchDirection:0}],align:[{watchAlign:0}]}]);function n(){"undefined"!=typeof customElements&&["mg-illustrated-message"].forEach((s=>{"mg-illustrated-message"===s&&(customElements.get(e(s))||customElements.define(e(s),o))}))}n();const d=o,u=n;export{d as MgIllustratedMessage,u as defineCustomElement}
+import{transformTag as e,proxyCustomElement as s,HTMLElement as t,h as i}from"@stencil/core/internal/client";import{C as l,t as a,b as m}from"./index2.js";const r=["small","medium","large"],g=["vertical","horizontal"],c=["left","center","right"],o=s(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.size="medium",this.direction="vertical",this.align="center",this.classCollection=new l(["mg-c-illustrated-message"])}watchSize(e,s){if(!r.includes(e))throw Error(`<mg-illustrated-message> prop "size" must be one of: ${r.join(", ")}. Passed value: ${a(e)}.`);void 0!==s&&this.classCollection.delete("mg-c-illustrated-message--size-"+s),this.classCollection.add("mg-c-illustrated-message--size-"+e)}watchDirection(e,s){if(void 0!==e&&!g.includes(e))throw Error(`<mg-illustrated-message> prop "direction" must be one of: ${g.join(", ")}. Passed value: ${a(e)}.`);"horizontal"===e?this.classCollection.add("mg-c-illustrated-message--direction-horizontal"):"horizontal"===s&&this.classCollection.delete("mg-c-illustrated-message--direction-horizontal")}watchAlign(e,s){if(!c.includes(e))throw Error(`<mg-illustrated-message> prop "align" must be one of: ${c.join(", ")}. Passed value: ${a(e)}.`);void 0!==s&&this.classCollection.delete("mg-c-illustrated-message--align-"+s),this.classCollection.add("mg-c-illustrated-message--align-"+e)}validateSlots(){const e=["h1","h2","h3","h4","h5","h6"],s=this.element.querySelector('[slot="title"]'),t=this.element.querySelectorAll('[slot="illustration"]');if(0===this.element.querySelectorAll('[slot="details"]').length&&null===s)throw Error('<mg-illustrated-message> Slot "title" or "details" must be present.');if(null!==s&&!m(s,e))throw Error(`<mg-illustrated-message> Slotted title must be a heading: ${e.join(", ")}.`);if(1!==t.length)throw Error("<mg-illustrated-message> Slotted illustration must be present and unique.");t[0].setAttribute("aria-hidden","true")}componentWillLoad(){this.watchDirection(this.direction),this.watchSize(this.size),this.watchAlign(this.align),this.validateSlots()}render(){return i("div",{key:"b914eadabb438b17c1cddc6b6e0167facf264a37",class:this.classCollection.join()},i("div",{key:"c2c55e775db2a622948ebd0d2efef8336520a52a",class:"mg-c-illustrated-message__illustration"},i("slot",{key:"1b549999f75245d17d7c4ba5696af25921c1725a",name:"illustration"})),i("div",{key:"6f19510b6775bbd366dbb4127ad1ca7b1be8a261",class:"mg-c-illustrated-message__slots"},i("slot",{key:"db37d12c2812c8fca129f4d0f24cb011198ba474",name:"title"}),i("slot",{key:"2a1aaf4fe8ea18a971c741c03e05d146584567a7",name:"details"})))}get element(){return this}static get watchers(){return{size:[{watchSize:0}],direction:[{watchDirection:0}],align:[{watchAlign:0}]}}static get style(){return".mg-c-illustrated-message{display:flex;box-sizing:border-box;flex-direction:column;justify-content:center;padding:var(--mg-c-illustrated-message-spacing-vertical) var(--mg-b-size-16);gap:var(--mg-b-size-16) var(--mg-b-size-64);max-inline-size:calc(60*var(--mg-b-size-8));text-align:center}.mg-c-illustrated-message__illustration{max-block-size:calc(15*var(--mg-b-size-8))}.mg-c-illustrated-message__illustration ::slotted([slot=illustration]){block-size:auto;inline-size:100%;margin-inline:auto;max-block-size:calc(15*var(--mg-b-size-8));max-inline-size:calc(15*var(--mg-b-size-8))}.mg-c-illustrated-message__slots{display:flex;flex-direction:column;gap:var(--mg-b-size-8)}.mg-c-illustrated-message__slots ::slotted([slot=title]){margin:0;font-family:var(--mg-b-font-family-heading) !important;font-size:var(--mg-b-font-size-h2) !important}.mg-c-illustrated-message__slots ::slotted([slot=details]){margin:0}.mg-c-illustrated-message.mg-c-illustrated-message--size-small{--mg-c-illustrated-message-spacing-vertical:var(--mg-b-size-24)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__slots{gap:var(--mg-b-size-2)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration{max-block-size:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration ::slotted([slot=illustration]){max-block-size:var(--mg-b-size-64);max-inline-size:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration{max-block-size:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration ::slotted([slot=illustration]){max-block-size:calc(23*var(--mg-b-size-8));max-inline-size:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal{inline-size:fit-content;max-inline-size:unset}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__slots{max-inline-size:calc(60*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__illustration ::slotted(img[slot=illustration]){block-size:calc(15*var(--mg-b-size-8));inline-size:auto}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-small .mg-c-illustrated-message__illustration ::slotted(img[slot=illustration]){block-size:var(--mg-b-size-64)}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-large .mg-c-illustrated-message__illustration ::slotted(img[slot=illustration]){block-size:calc(23*var(--mg-b-size-8))}.mg-c-illustrated-message.mg-c-illustrated-message--align-left{margin-inline:0 auto}.mg-c-illustrated-message.mg-c-illustrated-message--align-center{margin-inline:auto}.mg-c-illustrated-message.mg-c-illustrated-message--align-right{margin-inline:auto 0}@container (width > 52.8rem){.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal{flex-direction:row;align-items:center;column-gap:var(--mg-b-size-48);text-align:left}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__slots{max-inline-size:unset}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal .mg-c-illustrated-message__illustration{flex:1 0 auto;max-inline-size:fit-content}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-small{column-gap:var(--mg-b-size-24)}.mg-c-illustrated-message.mg-c-illustrated-message--direction-horizontal.mg-c-illustrated-message--size-large{column-gap:var(--mg-b-size-64)}}:host{display:block;container-type:inline-size;inline-size:100%}"}},[257,"mg-illustrated-message",{size:[1],direction:[1],align:[1],classCollection:[32]},void 0,{size:[{watchSize:0}],direction:[{watchDirection:0}],align:[{watchAlign:0}]}]);function n(){"undefined"!=typeof customElements&&["mg-illustrated-message"].forEach((s=>{"mg-illustrated-message"===s&&(customElements.get(e(s))||customElements.define(e(s),o))}))}n();const d=o,u=n;export{d as MgIllustratedMessage,u as defineCustomElement}