@mgdis/mg-components 6.16.0 → 6.18.0

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

@@ -31,7 +31,9 @@ export class MgInputToggle {
          */
         this.labelHide = false;
         /**
-         * Define if toggle have on/off style
+         * Define if toggle have on/off style,
+         * the left icon is hidden.
+         * Only available in combination with the "isIcon" prop.
          */
         this.isOnOff = false;
         /**
@@ -66,7 +68,7 @@ export class MgInputToggle {
             // Set error message
             this.errorMessage = undefined;
             // Does have a custom error message
-            if (!this.valid && errorMessage !== undefined) {
+            if (!this.valid && typeof errorMessage === 'string') {
                 this.errorMessage = errorMessage;
             }
         };
@@ -81,14 +83,31 @@ export class MgInputToggle {
          */
         this.validateSlots = () => {
             const slots = Array.from(this.element.children);
+            // validate slots
             if (slots.length !== 2) {
-                throw new Error('<mg-input-toggle> 2 slots are required.');
+                if (this.isOnOff && this.isIcon) {
+                    // ONLY slot="item-2" is required in with isOnOff && isIcon
+                    if (this.element.querySelector('[slot="item-2"]') === null) {
+                        throw new Error('<mg-input-toggle> an element with attribute slot="item-2" is required.');
+                    }
+                }
+                else {
+                    throw new Error('<mg-input-toggle> 2 slots are required.');
+                }
             }
-            else if (!this.isIcon) {
+            // update slots
+            if (!this.isIcon) {
                 // Due to text-overflow set to ellipsis
                 // we need to ensure that slot element have title to display value on mouse over
                 slots.forEach(slot => slot.setAttribute('title', slot.textContent));
             }
+            else {
+                slots.forEach(slot => {
+                    if (slot.nodeName === 'MG-ICON') {
+                        slot.size = 'small';
+                    }
+                });
+            }
         };
         /**
          * Get checked item
@@ -129,10 +148,16 @@ export class MgInputToggle {
         }
     }
     watchIsOnOff(newValue) {
-        if (newValue)
+        if (newValue) {
             this.classCollection.add(this.classOnOff);
-        else
+            if (!this.isIcon) {
+                this.isOnOff = false;
+                console.warn('<mg-input-toggle> prop "isOnOff" must be used with "isIcon". Setting isOnOff to false.');
+            }
+        }
+        else {
             this.classCollection.delete(this.classOnOff);
+        }
     }
     watchIsIcon(newValue) {
         if (newValue)
@@ -180,7 +205,7 @@ export class MgInputToggle {
         if (typeof valid !== 'boolean') {
             throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean.');
         }
-        else if (!isValidString(errorMessage)) {
+        else if (errorMessage !== undefined && !isValidString(errorMessage)) {
             throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string.');
         }
         else {
@@ -257,7 +282,7 @@ export class MgInputToggle {
      */
     render() {
         const checkedItem = this.getCheckedItem(this.checked);
-        return (h("mg-input", { key: '7611cffaf1c01e30c3fa7a27555f94ab357dd374', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked, ref: el => {
+        return (h("mg-input", { key: '4d87ed13bbd3d3a54303c21001247e1251417326', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (checkedItem && h("b", { class: "mg-c-input__readonly-value" }, checkedItem.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked, ref: el => {
                 if (el !== null)
                     this.button = el;
             } }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
@@ -278,7 +303,6 @@ export class MgInputToggle {
         return {
             "value": {
                 "type": "any",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "any",
@@ -293,11 +317,11 @@ export class MgInputToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "value"
             },
             "items": {
                 "type": "unknown",
-                "attribute": "items",
                 "mutable": false,
                 "complexType": {
                     "original": "string[] | ToggleValue[]",
@@ -321,7 +345,6 @@ export class MgInputToggle {
             },
             "identifier": {
                 "type": "string",
-                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -336,11 +359,11 @@ export class MgInputToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "identifier"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -356,11 +379,11 @@ export class MgInputToggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "name",
                 "defaultValue": "this.identifier"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -375,11 +398,11 @@ export class MgInputToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "labelOnTop": {
                 "type": "boolean",
-                "attribute": "label-on-top",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -395,11 +418,11 @@ export class MgInputToggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-on-top",
                 "defaultValue": "false"
             },
             "labelHide": {
                 "type": "boolean",
-                "attribute": "label-hide",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -415,12 +438,12 @@ export class MgInputToggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-hide",
                 "defaultValue": "false"
             },
             "isOnOff": {
                 "type": "boolean",
-                "attribute": "is-on-off",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -430,16 +453,16 @@ export class MgInputToggle {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Define if toggle have on/off style"
+                    "text": "Define if toggle have on/off style,\nthe left icon is hidden.\nOnly available in combination with the \"isIcon\" prop."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "is-on-off",
                 "defaultValue": "false"
             },
             "isIcon": {
                 "type": "boolean",
-                "attribute": "is-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -455,11 +478,11 @@ export class MgInputToggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "is-icon",
                 "defaultValue": "false"
             },
             "readonly": {
                 "type": "boolean",
-                "attribute": "readonly",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -475,11 +498,11 @@ export class MgInputToggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "readonly",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -495,11 +518,11 @@ export class MgInputToggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "tooltip": {
                 "type": "string",
-                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -514,11 +537,11 @@ export class MgInputToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "tooltip"
             },
             "tooltipPosition": {
                 "type": "string",
-                "attribute": "tooltip-position",
                 "mutable": false,
                 "complexType": {
                     "original": "TooltipPosition",
@@ -540,11 +563,11 @@ export class MgInputToggle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "tooltip-position",
                 "defaultValue": "'input'"
             },
             "helpText": {
                 "type": "string",
-                "attribute": "help-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -559,7 +582,8 @@ export class MgInputToggle {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "help-text"
             }
         };
     }
@@ -631,7 +655,7 @@ export class MgInputToggle {
             },
             "setError": {
                 "complexType": {
-                    "signature": "(valid: boolean, errorMessage: string) => Promise<void>",
+                    "signature": "(valid: boolean, errorMessage?: string) => Promise<void>",
                     "parameters": [{
                             "name": "valid",
                             "type": "boolean",

package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js

@@ -101,7 +101,6 @@ export class MgItemMore {
         return {
             "icon": {
                 "type": "unknown",
-                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
@@ -126,7 +125,6 @@ export class MgItemMore {
             },
             "slotlabel": {
                 "type": "unknown",
-                "attribute": "slotlabel",
                 "mutable": false,
                 "complexType": {
                     "original": "SlotLabelType",
@@ -151,7 +149,6 @@ export class MgItemMore {
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "SizeType",
@@ -172,7 +169,8 @@ export class MgItemMore {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "size"
             }
         };
     }

package/dist/collection/components/molecules/menus/mg-menu/mg-menu.js

@@ -102,6 +102,10 @@ export class MgMenu {
      * @param event - mg-item-loaded "item-loaded" custom event
      */
     updateItemListener(event) {
+        // `<mg-action-more>` element doesn't need `data-has-focus` attribute
+        if (event.target.nodeName === 'MG-ACTION-MORE') {
+            return;
+        }
         const itemToWatch = event.target.nodeName === 'MG-ITEM-MORE' ? event.target.shadowRoot.querySelector('mg-menu-item') : event.target;
         ['click', 'focus'].forEach(trigger => {
             itemToWatch.addEventListener(trigger, () => {
@@ -162,7 +166,7 @@ export class MgMenu {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '45bdad3db5dff4700f51152b94682e5df1997dbf', role: "list", "aria-label": this.label }, h("slot", { key: '43c48419f51b58ec2ee9cec3cf3e5a7e21994a4d' })));
+        return (h(Host, { key: '753833b01b86d6983f5d063f5598e2187b147a6e', role: "list", "aria-label": this.label }, h("slot", { key: '56702e49f5a97feddeb66e6271bd898061aa0d48' })));
     }
     static get is() { return "mg-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -180,7 +184,6 @@ export class MgMenu {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -195,11 +198,11 @@ export class MgMenu {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "direction": {
                 "type": "string",
-                "attribute": "direction",
                 "mutable": false,
                 "complexType": {
                     "original": "Direction",
@@ -221,11 +224,11 @@ export class MgMenu {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "direction",
                 "defaultValue": "'horizontal'"
             },
             "itemmore": {
                 "type": "unknown",
-                "attribute": "itemmore",
                 "mutable": false,
                 "complexType": {
                     "original": "ItemMoreType",
@@ -249,7 +252,6 @@ export class MgMenu {
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "MenuSizeType",
@@ -271,6 +273,7 @@ export class MgMenu {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             }
         };

package/dist/collection/components/molecules/menus/mg-menu-item/mg-menu-item.js

@@ -384,7 +384,6 @@ export class MgMenuItem {
         return {
             "identifier": {
                 "type": "string",
-                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -400,11 +399,11 @@ export class MgMenuItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "identifier",
                 "defaultValue": "createID('mg-menu-item')"
             },
             "href": {
                 "type": "string",
-                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -419,11 +418,11 @@ export class MgMenuItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "href"
             },
             "target": {
                 "type": "string",
-                "attribute": "target",
                 "mutable": false,
                 "complexType": {
                     "original": "TargetType",
@@ -444,11 +443,11 @@ export class MgMenuItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "target"
             },
             "status": {
                 "type": "string",
-                "attribute": "status",
                 "mutable": true,
                 "complexType": {
                     "original": "MgMenuStatusType",
@@ -470,11 +469,11 @@ export class MgMenuItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "status",
                 "defaultValue": "'visible'"
             },
             "expanded": {
                 "type": "boolean",
-                "attribute": "expanded",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -490,6 +489,7 @@ export class MgMenuItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "expanded",
                 "defaultValue": "false"
             }
         };

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

@@ -141,7 +141,7 @@ export class MgActionMore {
                     [`${this.classBase}__chevron--rotate`]: this.expanded === true,
                 } }, h("mg-icon", { icon: "chevron-down" })));
         }
-        return (h(Host, { key: 'f1b9e6e54f933a049628067993400d3a31d15710', "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { key: '081b89284d5234f24e6073dcd9bf4088fd5a86b8', class: this.classBase }, h("mg-popover", { key: '0e6c50bc3bcb07f72507571de9fdda90226d2163', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { key: 'ab4a385069e0a33fe9d5bc026c98160eb4ec1dfa', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({ key: 'e9dc31c07c3c0f474cea70f5eeda36707d101e85' }, this.icon)), !this.button.isIcon && buttonContent), h("div", { key: '201666b0bf5513e3360c3cc960e6cd6cd565dda1', slot: "content" }, h("mg-menu", { key: '3b0d56d9779b5bcaad31c714586dcda81bc550fa', direction: directions.VERTICAL, label: this.messages.label }, this.items.map(item => {
+        return (h(Host, { key: 'd75e1a5326ea3a1414f8048858e5ee3fee51760e', "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { key: 'b671a6c35cb3a9fa6eb7b2329f0f595e78b573b5', class: this.classBase }, h("mg-popover", { key: '38a38123d34ca868d0587123c2ab6b11550da8f0', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { key: '030b9360917b79edfc8df325d5ca5cfa08356c81', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({ key: 'a47ca6b078ca160d1cbb13c964df3abede5f373c' }, this.icon)), !this.button.isIcon && buttonContent), h("div", { key: 'ac38c705625cb5716a7e8aabd25d596db3d5adef', slot: "content" }, h("mg-menu", { key: 'cd382a65f69ba3c303a74d6b7444fcf0ccf9d1c5', direction: directions.VERTICAL, label: this.messages.label }, this.items.map(item => {
             var _a, _b;
             return isMgActionMoreDivider(item) ? (h("mg-divider", { class: "mg-c-action-more__divider", key: "divider", "full-width": true })) : (h("mg-menu-item", { key: item.label, status: item.status || Status.VISIBLE, target: item.target, href: item.href,
                 // eslint-disable-next-line react/jsx-no-bind
@@ -164,7 +164,6 @@ export class MgActionMore {
         return {
             "items": {
                 "type": "unknown",
-                "attribute": "items",
                 "mutable": false,
                 "complexType": {
                     "original": "(MgActionMoreItemType | MgActionMoreDividerType)[]",
@@ -193,7 +192,6 @@ export class MgActionMore {
             },
             "icon": {
                 "type": "unknown",
-                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "MgActionMoreIconType",
@@ -217,7 +215,6 @@ export class MgActionMore {
             },
             "button": {
                 "type": "unknown",
-                "attribute": "button",
                 "mutable": false,
                 "complexType": {
                     "original": "MgActionMoreButtonType",
@@ -242,7 +239,6 @@ export class MgActionMore {
             },
             "displayChevron": {
                 "type": "boolean",
-                "attribute": "display-chevron",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -258,6 +254,7 @@ export class MgActionMore {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "display-chevron",
                 "defaultValue": "false"
             }
         };

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

@@ -142,7 +142,7 @@ export class MgAlert {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-message", { key: '626afcfe4c86dacff9860d2515827ae5aa6b7234', class: this.classCollection.join(), role: ['info', 'success'].includes(this.variant) ? 'status' : 'alert', variant: this.variant, variantStyle: this.variantStyle }, h("slot", { key: 'bc7d72c21dcf36c9012e144253ce2b3c6ebc14ed' }), this.hasActions ? (h("span", { slot: "actions" }, h("slot", { name: "actions" }))) : (h("span", { class: "mg-c-alert__close-button" }, h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.alert.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
+        return (h("mg-message", { key: '4b974a10812e527a2c481ec00f22324ab490a135', class: this.classCollection.join(), role: ['info', 'success'].includes(this.variant) ? 'status' : 'alert', variant: this.variant, variantStyle: this.variantStyle }, h("slot", { key: '9133a3cca56d67e75e8c3f018c52838c31e908f2' }), this.hasActions ? (h("span", { slot: "actions" }, h("slot", { name: "actions" }))) : (h("span", { class: "mg-c-alert__close-button" }, h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.alert.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
     }
     static get is() { return "mg-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -160,7 +160,6 @@ export class MgAlert {
         return {
             "delay": {
                 "type": "number",
-                "attribute": "delay",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -175,11 +174,11 @@ export class MgAlert {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "delay"
             },
             "variant": {
                 "type": "string",
-                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "VariantType",
@@ -201,11 +200,11 @@ export class MgAlert {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "'info'"
             },
             "variantStyle": {
                 "type": "string",
-                "attribute": "variant-style",
                 "mutable": false,
                 "complexType": {
                     "original": "VariantStyleType",
@@ -227,6 +226,7 @@ export class MgAlert {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "variant-style",
                 "defaultValue": "'bar-left'"
             }
         };

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

@@ -53,7 +53,7 @@ export class MgDetails {
      * @returns HTML Element
      */
     render() {
-        return (h("details", { key: '4da17afd7a964a14b5b101bcfadc241be569d55a', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '515d6c4e117b547fe80a310fb90e114900f645e8' }, h("slot", { key: '0c9c0dcc47dd418e34e541d878bfc03ca137c68d', name: "summary" }), h("span", { key: 'c94f52994843b10c1161c0d85f38f8cb917ea806', class: "mg-c-details__toggle" }, h("mg-icon", { key: '9421452572af3deb03146a8dfd189369b249ba2d', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'dbfb0b34da00e37f55ec07236611c2babdd6b7c5', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '1b18b65a98e39a8663fa5d7e51eef5fbe2b92f76', class: "mg-c-details__details" }, h("slot", { key: '81c213594b1b67747db439624090784eaa5e6fcd', name: "details" }))));
+        return (h("details", { key: 'bbaac6909fa5f3fbd3236b2a8ace0f7c80b2580b', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '2ed8228b63403dd9b386bf3fa70c9094516b6f0e' }, h("slot", { key: '5461d77d2b2869b14737a5c7cfc40a1f9584ee03', name: "summary" }), h("span", { key: 'bb089365bdeaa7b934b97cff6f5f7c67587048e1', class: "mg-c-details__toggle" }, h("mg-icon", { key: 'dc1a30338703ad4182d50f9953a903ae0f68ecb1', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'a32cbaf9e38b71540deeaa8980895c34a7288ecb', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: 'b9c2bc7d681da8ac8b4dec5ff25287bc68975fb6', class: "mg-c-details__details" }, h("slot", { key: '069f05b4c133ff13055681e0b05bb98744303137', name: "details" }))));
     }
     static get is() { return "mg-details"; }
     static get encapsulation() { return "shadow"; }
@@ -71,7 +71,6 @@ export class MgDetails {
         return {
             "toggleClosed": {
                 "type": "string",
-                "attribute": "toggle-closed",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -86,11 +85,11 @@ export class MgDetails {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "toggle-closed"
             },
             "toggleOpened": {
                 "type": "string",
-                "attribute": "toggle-opened",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -105,11 +104,11 @@ export class MgDetails {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "toggle-opened"
             },
             "hideSummary": {
                 "type": "boolean",
-                "attribute": "hide-summary",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -125,11 +124,11 @@ export class MgDetails {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "hide-summary",
                 "defaultValue": "false"
             },
             "expanded": {
                 "type": "boolean",
-                "attribute": "expanded",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -145,6 +144,7 @@ export class MgDetails {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "expanded",
                 "defaultValue": "false"
             }
         };