@mgdis/mg-components 6.13.0 → 6.14.0

package/dist/collection/components/atoms/mg-card/mg-card.js

@@ -1,17 +1,56 @@
 import { h } from "@stencil/core";
+import { ClassList } from "@mgdis/core-ui-helpers/dist/utils";
+import { radiusSizes } from "./mg-card.conf";
 /**
  * @slot - Card content
  */
 export class MgCard {
+    constructor() {
+        /**
+         * Add box-shadow style
+         */
+        this.shadow = false;
+        /**
+         * Define the border radius size
+         */
+        this.radiusSize = 'medium';
+        /**
+         * Component classes
+         */
+        this.classCollection = new ClassList(['mg-c-card']);
+    }
+    watchShadow(newValue) {
+        if (newValue) {
+            this.classCollection.add('mg-c-card--shadow');
+        }
+        else {
+            this.classCollection.delete('mg-c-card--shadow');
+        }
+    }
+    watchRadiusSize(newValue, oldValue) {
+        if (oldValue !== undefined && radiusSizes.includes(oldValue)) {
+            this.classCollection.delete(`mg-c-card--radius-${oldValue}`);
+        }
+        if (radiusSizes.includes(newValue)) {
+            this.classCollection.add(`mg-c-card--radius-${newValue}`);
+        }
+    }
     /*************
      * Lifecycle *
      *************/
+    /**
+     * Check if component props are well configured on init
+     */
+    componentWillLoad() {
+        this.watchShadow(this.shadow);
+        this.watchRadiusSize(this.radiusSize);
+    }
     /**
      * Render
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'e59cabb09dbc28c148770b57de98f130c4479b75', class: "mg-c-card" }, h("slot", { key: 'b6e679317bddd23e73443c601992b7b344d6dc72' })));
+        return (h("div", { key: '6f83c5f7f9e0aacf502e407450cfdf039635a1f1', class: this.classCollection.join() }, h("slot", { key: '6bf8c02d3c3c9d0719e45af96b41f54289e31961' })));
     }
     static get is() { return "mg-card"; }
     static get encapsulation() { return "shadow"; }
@@ -25,5 +64,68 @@ export class MgCard {
             "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-card.css"]
         };
     }
+    static get properties() {
+        return {
+            "shadow": {
+                "type": "boolean",
+                "attribute": "shadow",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Add box-shadow style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "radiusSize": {
+                "type": "string",
+                "attribute": "radius-size",
+                "mutable": false,
+                "complexType": {
+                    "original": "RadiusSizeType",
+                    "resolved": "\"medium\" | \"small\" | \"xsmall\"",
+                    "references": {
+                        "RadiusSizeType": {
+                            "location": "import",
+                            "path": "./mg-card.conf",
+                            "id": "src/components/atoms/mg-card/mg-card.conf.ts::RadiusSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define the border radius size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'medium'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "classCollection": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "shadow",
+                "methodName": "watchShadow"
+            }, {
+                "propName": "radiusSize",
+                "methodName": "watchRadiusSize"
+            }];
+    }
 }
-//# sourceMappingURL=mg-card.js.map

package/dist/collection/components/atoms/mg-divider/mg-divider.js

@@ -35,6 +35,7 @@ export class MgDivider {
         return {
             "fullWidth": {
                 "type": "boolean",
+                "attribute": "full-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -49,11 +50,9 @@ export class MgDivider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "full-width",
                 "reflect": false,
                 "defaultValue": "false"
             }
         };
     }
 }
-//# sourceMappingURL=mg-divider.js.map

package/dist/collection/components/atoms/mg-icon/mg-icon.conf.js

@@ -10,4 +10,3 @@ export const variants = ['success', 'warning', 'danger', 'info', 'app'];
  * List of all possibles variants styles
  */
 export const variantStyles = ['icon', 'background', 'full'];
-//# sourceMappingURL=mg-icon.conf.js.map

package/dist/collection/components/atoms/mg-icon/mg-icon.js

@@ -135,10 +135,11 @@ export class MgIcon {
         return {
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "IconType",
-                    "resolved": "\"filter\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"copy\" | \"history\" | \"location\" | \"key\" | \"loader\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-outline\" | \"comment-sms\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-download\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"list\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"",
+                    "resolved": "\"filter\" | \"link\" | \"picture\" | \"table\" | \"circle\" | \"download\" | \"key\" | \"list\" | \"copy\" | \"history\" | \"location\" | \"loader\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-outline\" | \"comment-sms\" | \"conversation\" | \"conversation-outline\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-download\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"",
                     "references": {
                         "IconType": {
                             "location": "import",
@@ -155,11 +156,11 @@ export class MgIcon {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "IconSizeType",
@@ -180,12 +181,12 @@ export class MgIcon {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'medium'"
             },
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "IconVariantType",
@@ -206,11 +207,11 @@ export class MgIcon {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant",
                 "reflect": false
             },
             "variantStyle": {
                 "type": "string",
+                "attribute": "variant-style",
                 "mutable": true,
                 "complexType": {
                     "original": "IconVariantStyleType",
@@ -231,11 +232,11 @@ export class MgIcon {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant-style",
                 "reflect": false
             },
             "spin": {
                 "type": "boolean",
+                "attribute": "spin",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -250,7 +251,6 @@ export class MgIcon {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "spin",
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -281,4 +281,3 @@ export class MgIcon {
             }];
     }
 }
-//# sourceMappingURL=mg-icon.js.map

package/dist/collection/components/atoms/mg-tag/mg-tag.conf.js

@@ -2,4 +2,3 @@
  * List of all possibles variants
  */
 export const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'];
-//# sourceMappingURL=mg-tag.conf.js.map

package/dist/collection/components/atoms/mg-tag/mg-tag.js

@@ -102,6 +102,7 @@ export class MgTag {
         return {
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "TagVariantType",
@@ -122,12 +123,12 @@ export class MgTag {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "'primary'"
             },
             "outline": {
                 "type": "boolean",
+                "attribute": "outline",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -142,12 +143,12 @@ export class MgTag {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "outline",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "soft": {
                 "type": "boolean",
+                "attribute": "soft",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -162,7 +163,6 @@ export class MgTag {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "soft",
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -187,4 +187,3 @@ export class MgTag {
             }];
     }
 }
-//# sourceMappingURL=mg-tag.js.map

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js

@@ -29,6 +29,7 @@ export class MgTooltipContent {
         return {
             "message": {
                 "type": "string",
+                "attribute": "message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -43,10 +44,8 @@ export class MgTooltipContent {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "message",
                 "reflect": false
             }
         };
     }
 }
-//# sourceMappingURL=mg-tooltip-content.js.map

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.conf.js

@@ -4,4 +4,3 @@ export const Guard = {
     HOVER_TOOLTIPED_ELEMENT: 'hoverTooltiped',
     DISABLE_ON_CLICK: 'disableOnClick',
 };
-//# sourceMappingURL=mg-tooltip.conf.js.map

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js

@@ -382,6 +382,7 @@ export class MgTooltip {
         return {
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -396,12 +397,12 @@ export class MgTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false,
                 "defaultValue": "createID('mg-tooltip')"
             },
             "message": {
                 "type": "string",
+                "attribute": "message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -416,11 +417,11 @@ export class MgTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "message",
                 "reflect": false
             },
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -441,12 +442,12 @@ export class MgTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placement",
                 "reflect": false,
                 "defaultValue": "'bottom'"
             },
             "display": {
                 "type": "boolean",
+                "attribute": "display",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -461,12 +462,12 @@ export class MgTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "display",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -481,7 +482,6 @@ export class MgTooltip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -504,4 +504,3 @@ export class MgTooltip {
             }];
     }
 }
-//# sourceMappingURL=mg-tooltip.js.map

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

@@ -10,4 +10,3 @@ export const classFieldset = 'mg-c-input--fieldset';
 export const classDisabled = 'mg-c-input--disabled';
 export const classReadonly = 'mg-c-input--readonly';
 export const classVerticalList = 'mg-c-input--vertical-list';
-//# sourceMappingURL=mg-input.conf.js.map

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

@@ -29,6 +29,10 @@ export class MgInput {
          * Define if input is required
          */
         this.required = false;
+        /**
+         * Define aria-describedby ids to link with
+         */
+        this.ariaDescribedbyIDs = [];
         /**
          * Element is fieldset
          */
@@ -104,8 +108,17 @@ export class MgInput {
         }
     }
     watchAriaDescribedbyIDs() {
-        if (this.isReadonly)
+        if (this.isReadonly) {
+            return;
+        }
+        else if (typeof this.ariaDescribedbyIDs === 'string') {
+            this.ariaDescribedbyIDs = this.ariaDescribedbyIDs.split(' ');
             return;
+        }
+        else if (!(Array.isArray(this.ariaDescribedbyIDs) && this.ariaDescribedbyIDs.every(entry => typeof entry === 'string'))) {
+            this.ariaDescribedbyIDs = [];
+            return;
+        }
         // a11y IDs
         const ariaDescribedbyIDs = new Set(this.ariaDescribedbyIDs);
         // Help text
@@ -240,7 +253,7 @@ export class MgInput {
      */
     render() {
         const isGroup = this.isFieldset && !this.isReadonly;
-        return (h(Host, { key: 'fb239d1d75a2fe4f2f7796e75fd3949e58c37882', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '0a0b36084782d57db0571b56798d87f8597e1256', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'd89b8b8818b24c0798c1b2dab37faf0d1573dfa1', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '61fd67410d42d49e22f14f9dbff6a20446f2b8bf', class: "mg-c-input__input-container" }, h("div", { key: 'becf5ed690f1d67782c7c3ebd4c1f6ac304d39ed', class: "mg-c-input__input" }, h("slot", { key: '92b902d304351938a538fa8a35cdda0f9ad4d932' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (h("div", { key: 'fcec4c1057241286ed5e2791d09b642d454fceed', class: "mg-c-input__help-text" }, h("slot", { key: '8b219b2d34a73371a0edfe6d545e3023cd4b3621', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (h("div", { key: '644c00027e4a7ba82eadb6a149c58a451c1768d3', class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { key: '612d6bcd7ee465ff671e76b8764044a72459d3d8', name: this.slotError }))))));
+        return (h(Host, { key: '7c4c22aaa8f8d250eafa9159a103a11e637b0cca', class: this.element.classList.toString(), role: isGroup ? 'group' : undefined, "aria-labelledby": isGroup ? `${this.identifier}-title` : undefined }, h("div", { key: '2215e7b2d96e08507579a39d8e05b3e8a3d901fb', class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': this.labelHide } }, h("slot", { key: 'a4dbf4e36dd3ae5437d6dcb05d807f4faa0924b7', name: this.slotLabel }), this.tooltip && (this.tooltipPosition === 'label' || this.labelOnTop) && !this.labelHide && this.renderTooltip()), h("div", { key: '8e382a4857f469a9d6f77cad613183798df4d1e1', class: "mg-c-input__input-container" }, h("div", { key: 'f9897f90d44aab19614d4d40d77a8eb270c92847', class: "mg-c-input__input" }, h("slot", { key: 'c8d809d4ff0d0e660849825f016f9267da3a2d7e' }), this.tooltip && !this.labelOnTop && (this.tooltipPosition === 'input' || this.labelHide) && this.renderTooltip()), this.helptextMessageSlotElement && (h("div", { key: 'cebd6c083d088aebcdae6f032c6cdcf2387c3e27', class: "mg-c-input__help-text" }, h("slot", { key: '923fcc78b309d197e32522052b297ef0f58b1495', name: this.slotHelpText }))), !this.isDisabled && this.errorMessage && (h("div", { key: 'e706bff54ce21191a8c0940c60f6e99a91cfb9ec', class: "mg-c-input__error", "aria-live": "assertive" }, h("slot", { key: '6524debd3640df7b5e73ef4aa4415569eef1ecd8', name: this.slotError }))))));
     }
     static get is() { return "mg-input"; }
     static get encapsulation() { return "shadow"; }
@@ -258,6 +271,7 @@ export class MgInput {
         return {
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -272,11 +286,11 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -291,11 +305,11 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "labelOnTop": {
                 "type": "boolean",
+                "attribute": "label-on-top",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -310,12 +324,12 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-on-top",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "labelHide": {
                 "type": "boolean",
+                "attribute": "label-hide",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -330,12 +344,12 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hide",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "tooltip": {
                 "type": "string",
+                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -350,11 +364,11 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip",
                 "reflect": false
             },
             "tooltipPosition": {
                 "type": "string",
+                "attribute": "tooltip-position",
                 "mutable": false,
                 "complexType": {
                     "original": "TooltipPosition",
@@ -375,12 +389,12 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip-position",
                 "reflect": false,
                 "defaultValue": "'input'"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -395,12 +409,12 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "errorMessage": {
                 "type": "string",
+                "attribute": "error-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -415,11 +429,11 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error-message",
                 "reflect": false
             },
             "helpText": {
                 "type": "string",
+                "attribute": "help-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -434,25 +448,27 @@ export class MgInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "help-text",
                 "reflect": false
             },
             "ariaDescribedbyIDs": {
-                "type": "unknown",
-                "mutable": false,
+                "type": "string",
+                "attribute": "aria-describedby-i-ds",
+                "mutable": true,
                 "complexType": {
-                    "original": "string[]",
-                    "resolved": "string[]",
+                    "original": "string[] | string",
+                    "resolved": "string | string[]",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Define aria-describedby ids to link with"
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "[]"
             }
         };
     }
@@ -520,4 +536,3 @@ export class MgInput {
             }];
     }
 }
-//# sourceMappingURL=mg-input.js.map

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

@@ -8,4 +8,3 @@ export const MgInputCheckboxList = (props) => (h("ul", { class: "mg-c-input__inp
     var _a, _b;
     return (h("li", { key: input._id, class: { 'mg-c-input__input-group': true, 'mg-c-input__input-group--disabled': props.disabled || input.disabled } }, h("input", { type: "checkbox", id: input._id, name: props.name, value: (_a = input.value) === null || _a === void 0 ? void 0 : _a.toString(), checked: Boolean(input.value), required: input.required, "aria-invalid": ((_b = props.invalid) === null || _b === void 0 ? void 0 : _b.toString()) || 'false', disabled: props.disabled || input.disabled, indeterminate: input.value === null, onInput: input._handleInput, onBlur: input._handleBlur, onKeyDown: input._handleKeydown }), h("label", { htmlFor: input._id }, input.title)));
 })));
-//# sourceMappingURL=MgInputCheckboxList.js.map