@mgdis/mg-components 6.25.0 → 6.27.0

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { ClassList, isTagName, toString } from "@mgdis/core-ui-helpers/dist/utils";
-import { directions, sizes, } from "./mg-illustrated-message.conf";
+import { aligns, directions, sizes, } from "./mg-illustrated-message.conf";
 /**
  * @slot illustration - Illustration content
  * @slot title - Title content
@@ -16,6 +16,13 @@ export class MgIllustratedMessage {
          * Define component orientation
          */
         this.direction = 'vertical';
+        /**
+         * Define the horizontal alignment of the message inside its container.
+         * The message is sized to its content, so `align` positions it in both the vertical and
+         * horizontal directions. When the content is wide enough to fill the container there is
+         * no room left, so `align` has no visible effect.
+         */
+        this.align = 'center';
         /**
          * Component classes
          */
@@ -43,6 +50,17 @@ export class MgIllustratedMessage {
             this.classCollection.delete('mg-c-illustrated-message--direction-horizontal');
         }
     }
+    watchAlign(newValue, oldValue) {
+        if (!aligns.includes(newValue)) {
+            throw new Error(`<mg-illustrated-message> prop "align" must be one of: ${aligns.join(', ')}. Passed value: ${toString(newValue)}.`);
+        }
+        else {
+            if (oldValue !== undefined) {
+                this.classCollection.delete(`mg-c-illustrated-message--align-${oldValue}`);
+            }
+            this.classCollection.add(`mg-c-illustrated-message--align-${newValue}`);
+        }
+    }
     /***********
      * Methods *
      ***********/
@@ -74,6 +92,7 @@ export class MgIllustratedMessage {
     componentWillLoad() {
         this.watchDirection(this.direction);
         this.watchSize(this.size);
+        this.watchAlign(this.align);
         this.validateSlots();
     }
     /**
@@ -81,7 +100,7 @@ export class MgIllustratedMessage {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '87fb97f2eff23d0793e1829a2ac533be7c670f59', class: this.classCollection.join() }, h("div", { key: 'c3395aefc56c00f625a7510ce73204097abbfc06', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: '2505490d95166f2490e75cac403a90c693507502', name: "illustration" })), h("div", { key: '12b89745d353f0a31575f48c15d864459eb2d77e', class: "mg-c-illustrated-message__slots" }, h("slot", { key: 'c56b865f24c818ef40e3e0adb7efb698e509fba9', name: "title" }), h("slot", { key: '018faf36cfd88e1ac38b13636e7c7da7b44c9b40', 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"; }
@@ -150,6 +169,33 @@ export class MgIllustratedMessage {
                 "reflect": false,
                 "attribute": "direction",
                 "defaultValue": "'vertical'"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IllustratedMessageAlignType",
+                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "references": {
+                        "IllustratedMessageAlignType": {
+                            "location": "import",
+                            "path": "./mg-illustrated-message.conf",
+                            "id": "src/components/molecules/mg-illustrated-message/mg-illustrated-message.conf.ts::IllustratedMessageAlignType",
+                            "referenceLocation": "IllustratedMessageAlignType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define the horizontal alignment of the message inside its container.\nThe message is sized to its content, so `align` positions it in both the vertical and\nhorizontal directions. When the content is wide enough to fill the container there is\nno room left, so `align` has no visible effect."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "'center'"
             }
         };
     }
@@ -166,6 +212,9 @@ export class MgIllustratedMessage {
             }, {
                 "propName": "direction",
                 "methodName": "watchDirection"
+            }, {
+                "propName": "align",
+                "methodName": "watchAlign"
             }];
     }
 }

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

@@ -181,6 +181,9 @@ export class MgPopover {
         // Add aria attributes
         this.interactiveElement.setAttribute('aria-controls', this.identifier);
         this.interactiveElement.setAttribute('aria-expanded', `${this.display}`);
+        // Mark the trigger so the button stays visually active while the popover is open,
+        // without styling every generic aria-expanded (e.g. mg-panel disclosure toggle)
+        this.interactiveElement.setAttribute('data-mg-popover-trigger', '');
         const fallbackPlacements = [];
         if (this.element.dataset.fallbackPlacement !== undefined) {
             fallbackPlacements.push(this.element.dataset.fallbackPlacement);
@@ -237,7 +240,7 @@ export class MgPopover {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '9e62e60ba76045222b9c69b34245c3825004f8d6' }, h("slot", { key: '4be1a5c1221e1985cd0c0b4f7b19435d097bee4e' }), h("slot", { key: '07c2003dc3ad0bb7059e75e95e0de2862a64fd22', 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 s}from"./index3.js";import{K as g}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&&[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))}}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(){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(){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([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([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([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([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([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([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([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([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,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),.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 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}

package/dist/components/mg-card2.js

@@ -1 +1 @@
-import{transformTag as a,proxyCustomElement as r,HTMLElement as d,h as c}from"@stencil/core/internal/client";import{C as e,t as s}from"./index2.js";const i=["xsmall","small","medium"],o=r(class extends d{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.shadow=!1,this.radiusSize="medium",this.classCollection=new e(["mg-c-card"])}watchShadow(a){a?this.classCollection.add("mg-c-card--shadow"):this.classCollection.delete("mg-c-card--shadow")}watchRadiusSize(a,r){if(!i.includes(a)){if(""===String(a))return void(this.radiusSize="medium");throw new Error(`<mg-card> prop "radiusSize" must be one of: ${i.join(", ")}. Passed value: ${s(a)}.`)}void 0!==r&&this.classCollection.delete(`mg-c-card--radius-${r}`),this.classCollection.add(`mg-c-card--radius-${a}`)}componentWillLoad(){this.watchShadow(this.shadow),this.watchRadiusSize(this.radiusSize)}render(){return c("div",{key:"8fb6d9aa655b838e219a077670ce6296640d0854",class:this.classCollection.join()},c("slot",{key:"9413035054408e44b8c8bb3f2033ff970931c347"}))}static get watchers(){return{shadow:[{watchShadow:0}],radiusSize:[{watchRadiusSize:0}]}}static get style(){return".mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);max-height:var(--mg-c-card-max-height);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default))}.mg-c-card ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}.mg-c-card.mg-c-card--shadow{--mg-c-card-border:var(--mg-b-color-neutral-20);box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card.mg-c-card--radius-xsmall{--mg-c-card-border-radius:var(--mg-b-size-radius-medium)}.mg-c-card.mg-c-card--radius-small{--mg-c-card-border-radius:var(--mg-b-size-radius-large)}::slotted(h2){margin:0 0 var(--mg-b-size-16)}"}},[257,"mg-card",{shadow:[4],radiusSize:[1025,"radius-size"],classCollection:[32]},void 0,{shadow:[{watchShadow:0}],radiusSize:[{watchRadiusSize:0}]}]);function m(){"undefined"!=typeof customElements&&["mg-card"].forEach((r=>{"mg-card"===r&&(customElements.get(a(r))||customElements.define(a(r),o))}))}m();export{o as M,m as d}
+import{transformTag as a,proxyCustomElement as r,HTMLElement as d,h as c}from"@stencil/core/internal/client";import{C as e,t as i}from"./index2.js";const t=["xsmall","small","medium"],s=r(class extends d{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.shadow=!1,this.radiusSize="medium",this.classCollection=new e(["mg-c-card"])}watchShadow(a){a?this.classCollection.add("mg-c-card--shadow"):this.classCollection.delete("mg-c-card--shadow")}watchRadiusSize(a,r){if(!t.includes(a)){if(""===String(a))return void(this.radiusSize="medium");throw new Error(`<mg-card> prop "radiusSize" must be one of: ${t.join(", ")}. Passed value: ${i(a)}.`)}void 0!==r&&this.classCollection.delete(`mg-c-card--radius-${r}`),this.classCollection.add(`mg-c-card--radius-${a}`)}componentWillLoad(){this.watchShadow(this.shadow),this.watchRadiusSize(this.radiusSize)}render(){return c("div",{key:"8fb6d9aa655b838e219a077670ce6296640d0854",class:this.classCollection.join()},c("slot",{key:"9413035054408e44b8c8bb3f2033ff970931c347"}))}static get watchers(){return{shadow:[{watchShadow:0}],radiusSize:[{watchRadiusSize:0}]}}static get style(){return".mg-c-card{position:relative;z-index:inherit;overflow:var(--mg-c-card-overflow, var(--mg-c-card-overflow-default));width:100%;min-width:var(--mg-c-card-min-width);max-width:var(--mg-c-card-max-width);max-height:var(--mg-c-card-max-height);box-sizing:border-box;padding:var(--mg-c-card-spacing, var(--mg-c-card-spacing-default));border:var(--mg-c-card-border, var(--mg-c-card-border-default));border-radius:var(--mg-c-card-border-radius, var(--mg-c-card-border-radius-default));background:var(--mg-c-card-color-background, var(--mg-c-card-color-background-default))}.mg-c-card ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset;--mg-c-card-max-height:unset;--mg-c-card-overflow:var(--mg-c-card-overflow-default)}.mg-c-card.mg-c-card--shadow{--mg-c-card-border:var(--mg-b-color-neutral-20);box-shadow:var(--mg-c-card-box-shadow, var(--mg-c-card-box-shadow-default))}.mg-c-card.mg-c-card--radius-xsmall{--mg-c-card-border-radius:var(--mg-b-size-radius-medium)}.mg-c-card.mg-c-card--radius-small{--mg-c-card-border-radius:var(--mg-b-size-radius-large)}::slotted(:first-child){margin-block-start:0 !important}::slotted(:last-child){margin-block-end:0 !important}"}},[257,"mg-card",{shadow:[4],radiusSize:[1025,"radius-size"],classCollection:[32]},void 0,{shadow:[{watchShadow:0}],radiusSize:[{watchRadiusSize:0}]}]);function o(){"undefined"!=typeof customElements&&["mg-card"].forEach((r=>{"mg-card"===r&&(customElements.get(a(r))||customElements.define(a(r),s))}))}o();export{s as M,o 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}from"./index2.js";import{n as l}from"./index3.js";import{i as m}from"./index4.js";import{i as d}from"./mg-input.conf.js";const c=["form","search","none","presentation"],f=["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&&!d(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&&!f.includes(t))throw Error(`<mg-form> prop "requiredMessage" must be one of: ${f.join(", ")}. Passed value: ${h(t)}.`)}validateAriaRole(t){if(t&&!c.includes(t))throw Error(`<mg-form> prop "ariaRole" must be one of: ${c.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))}componentWillLoad(){this.messages=m(this.element).messages,l(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=>{t.setAttribute("form",this.identifier),"reset"===t.type&&t.addEventListener("click",(()=>{this.reset()}))})),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:"c851e6f19af32f28cad695daa1f42ddff10796a0",class:this.classCollection.join(),id:this.identifier,name:this.name,onSubmit:this.handleFormSubmit,role:this.ariaRole},this.requiredMessageText&&a("p",{key:"7f92b35872c938e87959acac8841937ad503d98f",innerHTML:this.requiredMessageText}),a("slot",{key:"e75e90f1fe3076d93df82a7a426b17d82035e0cf"}),!this.readonly&&!this.disabled&&this.hasActions&&a("div",{key:"a472cf024a61d6be1665d149749ce7d560a00473",class:"mg-c-form__actions"},a("slot",{key:"f9098c711cb2d2714057c4f14d6df295b75de774",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]},void 0,{identifier:[{watchIdentifier:0}],requiredMessage:[{validateRequiredMessage:0},{handleAttributeChange:0}],ariaRole:[{validateAriaRole:0}],labelOnTop:[{handlelabelOnTop:0}],readonly:[{handleAttributeChange:0}],disabled:[{handleAttributeChange:0}]}]);function u(){"undefined"!=typeof customElements&&["mg-form"].forEach((i=>{"mg-form"===i&&(customElements.get(t(i))||customElements.define(t(i),g))}))}u();const p=g,b=u;export{p as MgForm,b 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"],o=s(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.size="medium",this.direction="vertical",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")}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.validateSlots()}render(){return i("div",{key:"87fb97f2eff23d0793e1829a2ac533be7c670f59",class:this.classCollection.join()},i("div",{key:"c3395aefc56c00f625a7510ce73204097abbfc06",class:"mg-c-illustrated-message__illustration"},i("slot",{key:"2505490d95166f2490e75cac403a90c693507502",name:"illustration"})),i("div",{key:"12b89745d353f0a31575f48c15d864459eb2d77e",class:"mg-c-illustrated-message__slots"},i("slot",{key:"c56b865f24c818ef40e3e0adb7efb698e509fba9",name:"title"}),i("slot",{key:"018faf36cfd88e1ac38b13636e7c7da7b44c9b40",name:"details"})))}get element(){return this}static get watchers(){return{size:[{watchSize:0}],direction:[{watchDirection: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);margin:auto;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{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))}@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],classCollection:[32]},void 0,{size:[{watchSize:0}],direction:[{watchDirection:0}]}]);function c(){"undefined"!=typeof customElements&&["mg-illustrated-message"].forEach((s=>{"mg-illustrated-message"===s&&(customElements.get(e(s))||customElements.define(e(s),o))}))}c();const n=o,d=c;export{n as MgIllustratedMessage,d 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}