@mgdis/mg-components 6.2.0 → 6.4.0

package/dist/collection/components/atoms/internals/mg-input-title/mg-input-title.js

@@ -5,10 +5,13 @@ import { isValideID, isValidString, toString } from "@mgdis/stencil-helpers";
  */
 export class MgInputTitle {
     constructor() {
-        this.identifier = undefined;
-        this.required = undefined;
-        this.readonly = undefined;
+        /**
+         * Switch from label to fieldset sementic
+         */
         this.isLegend = false;
+        /**
+         * Component parent tagname
+         */
         this.tagName = 'label';
     }
     validateIdentifier(newValue) {
@@ -39,7 +42,7 @@ export class MgInputTitle {
     render() {
         const TagName = this.readonly ? 'span' : this.tagName;
         // \u00A0 represent a  
-        return (h(TagName, { key: '2185a08a69a1b749c7e36d430b83079cbce131de', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, h("slot", { key: 'eb7409f94e137a2dacd83fa7df27c6b2635bf660' }), this.required && !this.readonly && (h("span", { key: '6910dd3c0d87ea94ab3c07371e5ee55b212d9342', class: "mg-c-input-title__required" }, "\u00A0", h("span", { key: '45e9d38af05410888be0fc36e04d4641a41f367b', class: "mg-u-is-asterisk" }, "*")))));
+        return (h(TagName, { key: 'f8f8baaeb87e7c2cc77e71781f4d33ea5a63f760', class: "mg-c-input-title", htmlFor: !this.isLegend && this.identifier, id: this.isLegend ? `${this.identifier}-title` : undefined }, h("slot", { key: '7f6c0f451dfe789d924e9f608813e03bc72ad88a' }), this.required && !this.readonly && (h("span", { key: 'a78c5191995399e3e2ad346fec8546277581ca9d', class: "mg-c-input-title__required" }, "\u00A0", h("span", { key: 'ae8df5f13d54a1b8419d0d01048ff91dda601ab6', class: "mg-u-is-asterisk" }, "*")))));
     }
     static get is() { return "mg-input-title"; }
     static get encapsulation() { return "scoped"; }
@@ -69,6 +72,8 @@ export class MgInputTitle {
                     "tags": [],
                     "text": "Label input id"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "identifier",
                 "reflect": false
             },
@@ -86,6 +91,8 @@ export class MgInputTitle {
                     "tags": [],
                     "text": "If input is required an asterisk is added at the end of the label"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": false
             },
@@ -103,6 +110,8 @@ export class MgInputTitle {
                     "tags": [],
                     "text": "If input is required an asterisk is added at the end of the label"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "readonly",
                 "reflect": false
             },
@@ -120,6 +129,8 @@ export class MgInputTitle {
                     "tags": [],
                     "text": "Switch from label to fieldset sementic"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-legend",
                 "reflect": false,
                 "defaultValue": "false"

package/dist/collection/components/atoms/internals/mg-input-title/mg-input-title.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-input-title.js","sourceRoot":"","sources":["../../../../../src/components/atoms/internals/mg-input-title/mg-input-title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAE7E;;GAEG;AAMH,MAAM,OAAO,YAAY;;;;;wBA2BJ,KAAK;uBASL,OAAO;;IA9B1B,kBAAkB,CAAC,QAAoC;QACrD,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7B,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;QACrE,CAAC;aAAM,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjC,OAAO,CAAC,KAAK,CAAC,sEAAsE,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC7G,CAAC;IACH,CAAC;IAiBD,gBAAgB,CAAC,QAAkC;QACjD,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;IAC/C,CAAC;IAOD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACvC,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;QACtD,4BAA4B;QAC5B,OAAO,CACL,EAAC,OAAO,qDAAC,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,QAAQ,CAAC,CAAC,CAAC,SAAS;YACtI,8DAAa;YACZ,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAClC,6DAAM,KAAK,EAAC,4BAA4B;;gBAChC,6DAAM,KAAK,EAAC,kBAAkB,QAAS,CACxC,CACR,CACO,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { isValideID, isValidString, toString } from '@mgdis/stencil-helpers';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'mg-input-title',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-title.css',\n  scoped: true,\n})\nexport class MgInputTitle {\n  /**\n   * Label input id\n   */\n  @Prop() identifier!: string;\n  @Watch('identifier')\n  validateIdentifier(newValue: MgInputTitle['identifier']): void {\n    if (!isValidString(newValue)) {\n      throw new Error('<mg-input-title> prop \"identifier\" is required.');\n    } else if (!isValideID(newValue)) {\n      console.error(`<mg-input-title> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * If input is required an asterisk is added at the end of the label\n   */\n  @Prop() required?: boolean;\n\n  /**\n   * If input is required an asterisk is added at the end of the label\n   */\n  @Prop() readonly?: boolean;\n\n  /**\n   * Switch from label to fieldset sementic\n   */\n  @Prop() isLegend = false;\n  @Watch('isLegend')\n  validateIsLegend(newValue: MgInputTitle['isLegend']) {\n    this.tagName = newValue ? 'legend' : 'label';\n  }\n\n  /**\n   * Component parent tagname\n   */\n  @State() tagName = 'label';\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Init tag name\n   */\n  componentWillLoad(): void {\n    this.validateIdentifier(this.identifier);\n    this.validateIsLegend(this.isLegend);\n  }\n\n  /**\n   * Render\n   * @returns HTML element\n   */\n  render(): HTMLElement {\n    const TagName = this.readonly ? 'span' : this.tagName;\n    // \\u00A0 represent a &nbsp;\n    return (\n      <TagName class=\"mg-c-input-title\" htmlFor={!this.isLegend && this.identifier} id={this.isLegend ? `${this.identifier}-title` : undefined}>\n        <slot></slot>\n        {this.required && !this.readonly && (\n          <span class=\"mg-c-input-title__required\">\n            &nbsp;<span class=\"mg-u-is-asterisk\">*</span>\n          </span>\n        )}\n      </TagName>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-input-title.js","sourceRoot":"","sources":["../../../../../src/components/atoms/internals/mg-input-title/mg-input-title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAE7E;;GAEG;AAMH,MAAM,OAAO,YAAY;IALzB;QA6BE;;WAEG;QACK,aAAQ,GAAG,KAAK,CAAC;QAMzB;;WAEG;QACM,YAAO,GAAG,OAAO,CAAC;KAgC5B;IA9DC,kBAAkB,CAAC,QAAoC;QACrD,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7B,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;QACrE,CAAC;aAAM,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjC,OAAO,CAAC,KAAK,CAAC,sEAAsE,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC7G,CAAC;IACH,CAAC;IAiBD,gBAAgB,CAAC,QAAkC;QACjD,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;IAC/C,CAAC;IAOD;;mBAEe;IAEf;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACzC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACvC,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;QACtD,4BAA4B;QAC5B,OAAO,CACL,EAAC,OAAO,qDAAC,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,UAAU,QAAQ,CAAC,CAAC,CAAC,SAAS;YACtI,8DAAa;YACZ,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAClC,6DAAM,KAAK,EAAC,4BAA4B;;gBAChC,6DAAM,KAAK,EAAC,kBAAkB,QAAS,CACxC,CACR,CACO,CACX,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { isValideID, isValidString, toString } from '@mgdis/stencil-helpers';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'mg-input-title',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-title.css',\n  scoped: true,\n})\nexport class MgInputTitle {\n  /**\n   * Label input id\n   */\n  @Prop() identifier!: string;\n  @Watch('identifier')\n  validateIdentifier(newValue: MgInputTitle['identifier']): void {\n    if (!isValidString(newValue)) {\n      throw new Error('<mg-input-title> prop \"identifier\" is required.');\n    } else if (!isValideID(newValue)) {\n      console.error(`<mg-input-title> prop \"identifier\" value is invalid. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * If input is required an asterisk is added at the end of the label\n   */\n  @Prop() required?: boolean;\n\n  /**\n   * If input is required an asterisk is added at the end of the label\n   */\n  @Prop() readonly?: boolean;\n\n  /**\n   * Switch from label to fieldset sementic\n   */\n  @Prop() isLegend = false;\n  @Watch('isLegend')\n  validateIsLegend(newValue: MgInputTitle['isLegend']) {\n    this.tagName = newValue ? 'legend' : 'label';\n  }\n\n  /**\n   * Component parent tagname\n   */\n  @State() tagName = 'label';\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Init tag name\n   */\n  componentWillLoad(): void {\n    this.validateIdentifier(this.identifier);\n    this.validateIsLegend(this.isLegend);\n  }\n\n  /**\n   * Render\n   * @returns HTML element\n   */\n  render(): HTMLElement {\n    const TagName = this.readonly ? 'span' : this.tagName;\n    // \\u00A0 represent a &nbsp;\n    return (\n      <TagName class=\"mg-c-input-title\" htmlFor={!this.isLegend && this.identifier} id={this.isLegend ? `${this.identifier}-title` : undefined}>\n        <slot></slot>\n        {this.required && !this.readonly && (\n          <span class=\"mg-c-input-title__required\">\n            &nbsp;<span class=\"mg-u-is-asterisk\">*</span>\n          </span>\n        )}\n      </TagName>\n    );\n  }\n}\n"]}

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

@@ -8,10 +8,13 @@ export class MgBadge {
          ************/
         // Classes
         this.classOutline = `mg-c-badge--outline`;
-        this.value = undefined;
-        this.label = undefined;
-        this.variant = variants[0];
-        this.outline = undefined;
+        /**
+         * Define badge variant
+         */
+        this.variant = variants[0]; // info
+        /**
+         * Component classes
+         */
         this.classCollection = new ClassList(['mg-c-badge']);
     }
     validateValue(newValue) {
@@ -85,6 +88,8 @@ export class MgBadge {
                     "tags": [],
                     "text": "Badge value"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false
             },
@@ -102,6 +107,8 @@ export class MgBadge {
                     "tags": [],
                     "text": "Badge label. Include short description.\nRequired for accessibility"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -125,6 +132,8 @@ export class MgBadge {
                     "tags": [],
                     "text": "Define badge variant"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "variants[0]"
@@ -143,6 +152,8 @@ export class MgBadge {
                     "tags": [],
                     "text": "Define if button is using outline style"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "outline",
                 "reflect": false
             }

package/dist/collection/components/atoms/mg-badge/mg-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-badge.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-badge/mg-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAoB,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAO5E,MAAM,OAAO,OAAO;;QAClB;;sBAEc;QAEd,UAAU;QACO,iBAAY,GAAG,qBAAqB,CAAC;;;uBAgCjB,QAAQ,CAAC,CAAC,CAAC;;+BA0BV,IAAI,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;;IA/CnE,aAAa,CAAC,QAA0B;QACtC,IAAI,YAAY,CAAC,IAAI,CAAC,GAAG,QAAQ,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC;YAC9C,MAAM,IAAI,KAAK,CAAC,mGAAmG,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC5I,CAAC;IACH,CAAC;IAQD,aAAa,CAAC,QAA0B;QACtC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7B,MAAM,IAAI,KAAK,CAAC,2EAA2E,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACpH,CAAC;IACH,CAAC;IAOD,eAAe,CAAC,QAA4B,EAAE,QAA6B;QACzE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjC,MAAM,IAAI,KAAK,CAAC,6CAA6C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC5H,CAAC;aAAM,CAAC;YACN,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;gBAC3B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC;YACzD,CAAC;YACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAOD,eAAe,CAAC,QAA4B;QAC1C,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;;YACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACtD,CAAC;IAOD;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,6DAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;YACtC,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ;YACnD,6DAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAQ,CACjD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { variants, BadgeVariantType } from './mg-badge.conf';\nimport { ClassList, isValidString, toString } from '@mgdis/stencil-helpers';\n\n@Component({\n  tag: 'mg-badge',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-badge.css',\n  shadow: true,\n})\nexport class MgBadge {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classOutline = `mg-c-badge--outline`;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Badge value\n   */\n  @Prop() value!: string | number;\n  @Watch('value')\n  validateValue(newValue: MgBadge['value']): void {\n    if (/^[^A-Z]+$/i.exec(`${newValue}`) === null) {\n      throw new Error(`<mg-badge> prop \"value\" is required and must be integer and/or special character. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Badge label. Include short description.\n   * Required for accessibility\n   */\n  @Prop() label!: string;\n  @Watch('label')\n  validateLabel(newValue: MgBadge['label']): void {\n    if (!isValidString(newValue)) {\n      throw new Error(`<mg-badge> prop \"label\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define badge variant\n   */\n  @Prop() variant?: BadgeVariantType = variants[0]; // info\n  @Watch('variant')\n  validateVariant(newValue: MgBadge['variant'], oldValue?: MgBadge['variant']): void {\n    if (!variants.includes(newValue)) {\n      throw new Error(`<mg-badge> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-c-badge--${oldValue}`);\n      }\n      this.classCollection.add(`mg-c-badge--${newValue}`);\n    }\n  }\n\n  /**\n   * Define if button is using outline style\n   */\n  @Prop() outline?: boolean;\n  @Watch('outline')\n  validateOutline(newValue: MgBadge['outline']): void {\n    if (newValue) this.classCollection.add(this.classOutline);\n    else this.classCollection.delete(this.classOutline);\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-badge']);\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateValue(this.value);\n    this.validateLabel(this.label);\n    this.validateVariant(this.variant);\n    this.validateOutline(this.outline);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <span class={this.classCollection.join()}>\n        <span class=\"mg-c-badge__value\">{this.value}</span>\n        <span class=\"mg-u-visually-hidden\">{this.label}</span>\n      </span>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-badge.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-badge/mg-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAoB,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAO5E,MAAM,OAAO,OAAO;IALpB;QAME;;sBAEc;QAEd,UAAU;QACO,iBAAY,GAAG,qBAAqB,CAAC;QA6BtD;;WAEG;QACK,YAAO,GAAsB,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO;QAuBzD;;WAEG;QACM,oBAAe,GAAc,IAAI,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;KAwBrE;IAvEC,aAAa,CAAC,QAA0B;QACtC,IAAI,YAAY,CAAC,IAAI,CAAC,GAAG,QAAQ,EAAE,CAAC,KAAK,IAAI,EAAE,CAAC;YAC9C,MAAM,IAAI,KAAK,CAAC,mGAAmG,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC5I,CAAC;IACH,CAAC;IAQD,aAAa,CAAC,QAA0B;QACtC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7B,MAAM,IAAI,KAAK,CAAC,2EAA2E,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACpH,CAAC;IACH,CAAC;IAOD,eAAe,CAAC,QAA4B,EAAE,QAA6B;QACzE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjC,MAAM,IAAI,KAAK,CAAC,6CAA6C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC5H,CAAC;aAAM,CAAC;YACN,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;gBAC3B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC;YACzD,CAAC;YACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAOD,eAAe,CAAC,QAA4B;QAC1C,IAAI,QAAQ;YAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;;YACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACtD,CAAC;IAOD;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IAED;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,6DAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;YACtC,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ;YACnD,6DAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAQ,CACjD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { variants, BadgeVariantType } from './mg-badge.conf';\nimport { ClassList, isValidString, toString } from '@mgdis/stencil-helpers';\n\n@Component({\n  tag: 'mg-badge',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-badge.css',\n  shadow: true,\n})\nexport class MgBadge {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classOutline = `mg-c-badge--outline`;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Badge value\n   */\n  @Prop() value!: string | number;\n  @Watch('value')\n  validateValue(newValue: MgBadge['value']): void {\n    if (/^[^A-Z]+$/i.exec(`${newValue}`) === null) {\n      throw new Error(`<mg-badge> prop \"value\" is required and must be integer and/or special character. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Badge label. Include short description.\n   * Required for accessibility\n   */\n  @Prop() label!: string;\n  @Watch('label')\n  validateLabel(newValue: MgBadge['label']): void {\n    if (!isValidString(newValue)) {\n      throw new Error(`<mg-badge> prop \"label\" is required and must be a string. Passed value: ${toString(newValue)}.`);\n    }\n  }\n\n  /**\n   * Define badge variant\n   */\n  @Prop() variant?: BadgeVariantType = variants[0]; // info\n  @Watch('variant')\n  validateVariant(newValue: MgBadge['variant'], oldValue?: MgBadge['variant']): void {\n    if (!variants.includes(newValue)) {\n      throw new Error(`<mg-badge> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-c-badge--${oldValue}`);\n      }\n      this.classCollection.add(`mg-c-badge--${newValue}`);\n    }\n  }\n\n  /**\n   * Define if button is using outline style\n   */\n  @Prop() outline?: boolean;\n  @Watch('outline')\n  validateOutline(newValue: MgBadge['outline']): void {\n    if (newValue) this.classCollection.add(this.classOutline);\n    else this.classCollection.delete(this.classOutline);\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-badge']);\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateValue(this.value);\n    this.validateLabel(this.label);\n    this.validateVariant(this.variant);\n    this.validateOutline(this.outline);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <span class={this.classCollection.join()}>\n        <span class=\"mg-c-badge__value\">{this.value}</span>\n        <span class=\"mg-u-visually-hidden\">{this.label}</span>\n      </span>\n    );\n  }\n}\n"]}

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

@@ -1,3 +1,7 @@
+/**
+ * List of all possibles sizes
+ */
+export const sizes = ['medium', 'large'];
 /**
  * List of all possibles variants
  */

package/dist/collection/components/atoms/mg-button/mg-button.conf.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-button.conf.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-button/mg-button.conf.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAU,CAAC;AAOrH;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAU,CAAC","sourcesContent":["import type { Variant } from '../../../types';\n\n/**\n * List of all possibles variants\n */\nexport const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'] as const;\n\n/**\n * VariantType type from button variants\n */\nexport type VariantType = Variant & (typeof variants)[number];\n\n/**\n * List of all possibles button types\n */\nexport const buttonTypes = ['button', 'submit', 'reset'] as const;\n\n/**\n * ButtonType type from buttonTypes\n */\nexport type ButtonType = (typeof buttonTypes)[number];\n"]}
+{"version":3,"file":"mg-button.conf.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-button/mg-button.conf.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU,CAAC;AAOlD;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAU,CAAC;AAOrH;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAU,CAAC","sourcesContent":["import type { Variant, Size } from '../../../types';\n\n/**\n * List of all possibles sizes\n */\nexport const sizes = ['medium', 'large'] as const;\n\n/**\n * SizeType type from button sizes\n */\nexport type SizeType = Size & (typeof sizes)[number];\n\n/**\n * List of all possibles variants\n */\nexport const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'] as const;\n\n/**\n * VariantType type from button variants\n */\nexport type VariantType = Variant & (typeof variants)[number];\n\n/**\n * List of all possibles button types\n */\nexport const buttonTypes = ['button', 'submit', 'reset'] as const;\n\n/**\n * ButtonType type from buttonTypes\n */\nexport type ButtonType = (typeof buttonTypes)[number];\n"]}

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { variants } from "./mg-button.conf";
+import { variants, sizes } from "./mg-button.conf";
 import { ClassList, isValidString, nextTick, toString } from "@mgdis/stencil-helpers";
 /**
  * @slot - Button content
@@ -13,6 +13,38 @@ export class MgButton {
         this.classDisabled = 'mg-c-button--disabled';
         this.classLoading = 'mg-c-button--loading';
         this.classFullWidth = 'mg-c-button--full-width';
+        /**
+         * Define button variant
+         */
+        this.variant = variants[0]; // Primary
+        /**
+         * Define button size
+         */
+        this.size = sizes[0]; // medium
+        /**
+         * Set button to full-width
+         */
+        this.fullWidth = false;
+        /**
+         * Define if button is round.
+         * Used for icon button.
+         */
+        this.isIcon = false;
+        /**
+         * Option to set input disable on click, in order to prevent multi-click.
+         * Parent component have to remove the attribute 'disabled' when the process ends.
+         */
+        this.disableOnClick = false;
+        /**
+         * Define if button is loading, default to false.
+         * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.
+         * It's required to reset to false when action/promise in parent is done to stop the loading state
+         */
+        this.loading = false;
+        /**
+         * Component classes
+         */
+        this.classCollection = new ClassList(['mg-c-button']);
         /**
          * Trigger actions onClick event
          * @param event - click event
@@ -49,16 +81,18 @@ export class MgButton {
                 this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
             }
         };
-        this.variant = variants[0];
-        this.label = undefined;
-        this.type = undefined;
-        this.fullWidth = false;
-        this.form = undefined;
-        this.disabled = undefined;
-        this.isIcon = false;
-        this.disableOnClick = false;
-        this.loading = false;
-        this.classCollection = new ClassList(['mg-c-button']);
+        /**
+         * Set child `<mg-icon>` element `size` prop to follow the current `size` prop
+         */
+        this.setIconSize = () => {
+            var _a, _b;
+            if (this.size === 'medium') {
+                (_a = this.element.querySelector('mg-icon')) === null || _a === void 0 ? void 0 : _a.removeAttribute('size');
+            }
+            else if (this.isIcon) {
+                (_b = this.element.querySelector('mg-icon')) === null || _b === void 0 ? void 0 : _b.setAttribute('size', this.size);
+            }
+        };
     }
     validateVariant(newValue, oldValue) {
         // validate new value
@@ -77,6 +111,19 @@ export class MgButton {
             this.classCollection.add(`mg-c-button--${newValue}`);
         }
     }
+    validateSize(newValue, oldValue) {
+        // validate new value
+        if (!sizes.includes(newValue)) {
+            throw new Error(`<mg-button> prop "size" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);
+        }
+        else {
+            if (oldValue !== undefined) {
+                this.classCollection.delete(`mg-c-button--${oldValue}`);
+            }
+            this.classCollection.add(`mg-c-button--${newValue}`);
+            this.setIconSize();
+        }
+    }
     validateFullWidth(newValue) {
         if (newValue && this.isIcon) {
             throw new Error('<mg-button> prop "fullWidth" cannot be used with prop "isIcon".');
@@ -106,6 +153,9 @@ export class MgButton {
         // emit value update
         this.disabledChange.emit(isDisabled);
     }
+    watchIsIcon() {
+        this.setIconSize();
+    }
     loadingHandler(newValue) {
         // we add loading style if it newvalue is true else we remove it
         if (newValue) {
@@ -121,6 +171,8 @@ export class MgButton {
     componentWillLoad() {
         this.validateVariant(this.variant);
         this.validateFullWidth(this.fullWidth);
+        this.validateSize(this.size);
+        this.watchIsIcon();
         if (this.isIcon) {
             this.classCollection.add(`mg-c-button--icon`);
             if (!isValidString(this.label)) {
@@ -152,7 +204,7 @@ export class MgButton {
      */
     render() {
         var _a;
-        return (h(Host, { key: '0e3996123ef570a493d645b7a24d4271f13ae7c4', role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { key: 'bef43bda72867ea981814bdeda110d2dec4306f9', class: this.classCollection.join() }, this.loading && h("mg-icon", { key: 'e5754f3ca96f24da369e0961ced9f119b22b8878', icon: "loader", spin: true }), h("div", { key: '20afb713a15e3a003dc4fd0a5470aa764246858e', class: "mg-c-button__content" }, h("slot", { key: 'd0468692516ebc044a14dedbba96d74791552bd1' })))));
+        return (h(Host, { key: 'a56efb7c3e49a4aadf6751b10bacb39f20c260df', role: "button", tabIndex: 0, type: this.type, form: this.form, "full-width": this.fullWidth, "aria-label": this.label, "aria-disabled": (_a = this.disabled) === null || _a === void 0 ? void 0 : _a.toString(), onClick: this.handleClick, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown }, h("div", { key: '2d47d068d188161b603b26117256d0e828393348', class: this.classCollection.join() }, this.loading && h("mg-icon", { key: 'ba84820c70834f1e345af506265222340659f8ec', icon: "loader", spin: true }), h("div", { key: 'db6c3437d5de7f828cca7df9d83670de9d3a8ed6', class: "mg-c-button__content" }, h("slot", { key: 'b00f76d92e1e2f9e4dd834bf41419c68c2635d1a' })))));
     }
     static get is() { return "mg-button"; }
     static get encapsulation() { return "shadow"; }
@@ -188,6 +240,8 @@ export class MgButton {
                     "tags": [],
                     "text": "Define button variant"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "variants[0]"
@@ -206,6 +260,8 @@ export class MgButton {
                     "tags": [],
                     "text": "aria-label\nIn case button text is not explicit enough"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -229,9 +285,37 @@ export class MgButton {
                     "tags": [],
                     "text": "Define button type"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "type",
                 "reflect": false
             },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SizeType",
+                    "resolved": "\"large\" | \"medium\"",
+                    "references": {
+                        "SizeType": {
+                            "location": "import",
+                            "path": "./mg-button.conf",
+                            "id": "src/components/atoms/mg-button/mg-button.conf.ts::SizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define button size"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "sizes[0]"
+            },
             "fullWidth": {
                 "type": "boolean",
                 "mutable": false,
@@ -246,6 +330,8 @@ export class MgButton {
                     "tags": [],
                     "text": "Set button to full-width"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "full-width",
                 "reflect": false,
                 "defaultValue": "false"
@@ -264,6 +350,8 @@ export class MgButton {
                     "tags": [],
                     "text": "Define form id to attach button with.\nIf this attribute is not set, the `<button>` is associated with its ancestor `<form>` element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "form",
                 "reflect": false
             },
@@ -281,6 +369,8 @@ export class MgButton {
                     "tags": [],
                     "text": "Disable button"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false
             },
@@ -298,6 +388,8 @@ export class MgButton {
                     "tags": [],
                     "text": "Define if button is round.\nUsed for icon button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "is-icon",
                 "reflect": false,
                 "defaultValue": "false"
@@ -316,6 +408,8 @@ export class MgButton {
                     "tags": [],
                     "text": "Option to set input disable on click, in order to prevent multi-click.\nParent component have to remove the attribute 'disabled' when the process ends."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disable-on-click",
                 "reflect": false,
                 "defaultValue": "false"
@@ -356,12 +450,18 @@ export class MgButton {
         return [{
                 "propName": "variant",
                 "methodName": "validateVariant"
+            }, {
+                "propName": "size",
+                "methodName": "validateSize"
             }, {
                 "propName": "fullWidth",
                 "methodName": "validateFullWidth"
             }, {
                 "propName": "disabled",
                 "methodName": "disabledHandler"
+            }, {
+                "propName": "isIcon",
+                "methodName": "watchIsIcon"
             }, {
                 "propName": "loading",
                 "methodName": "loadingHandler"

package/dist/collection/components/atoms/mg-button/mg-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"mg-button.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-button/mg-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, Watch, Host, EventEmitter, Event } from '@stencil/core';\nimport { variants, VariantType, ButtonType } from './mg-button.conf';\nimport { ClassList, isValidString, nextTick, toString } from '@mgdis/stencil-helpers';\n\n/**\n * @slot - Button content\n */\n@Component({\n  tag: 'mg-button',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-button.css',\n  shadow: true,\n})\nexport class MgButton {\n  /************\n   * Internal *\n   ************/\n\n  private onClickElementFn = null;\n  private readonly classDisabled = 'mg-c-button--disabled';\n  private readonly classLoading = 'mg-c-button--loading';\n  private readonly classFullWidth = 'mg-c-button--full-width';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgButtonElement;\n\n  /**\n   * Define button variant\n   */\n  @Prop({ mutable: true }) variant: VariantType = variants[0]; // Primary\n  @Watch('variant')\n  validateVariant(newValue: VariantType, oldValue?: VariantType): void {\n    // validate new value\n    if (!variants.includes(newValue)) {\n      if ((newValue as string) === '') {\n        // Reactive framework like VUE render with `\"\"` when prop is update to undefined\n        this.variant = variants[0];\n        return;\n      }\n      throw new Error(`<mg-button> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-c-button--${oldValue}`);\n      }\n      this.classCollection.add(`mg-c-button--${newValue}`);\n    }\n  }\n\n  /**\n   * aria-label\n   * In case button text is not explicit enough\n   */\n  @Prop() label?: string;\n\n  /**\n   * Define button type\n   */\n  @Prop() type?: ButtonType;\n\n  /**\n   * Set button to full-width\n   */\n  @Prop() fullWidth = false;\n  @Watch('fullWidth')\n  validateFullWidth(newValue: MgButton['fullWidth']): void {\n    if (newValue && this.isIcon) {\n      throw new Error('<mg-button> prop \"fullWidth\" cannot be used with prop \"isIcon\".');\n    } else if (newValue) {\n      this.classCollection.add(this.classFullWidth);\n    } else {\n      this.classCollection.delete(this.classFullWidth);\n    }\n  }\n\n  /**\n   * Define form id to attach button with.\n   * If this attribute is not set, the `<button>` is associated with its ancestor `<form>` element.\n   */\n  @Prop() form?: string;\n\n  /**\n   * Disable button\n   */\n  @Prop({ mutable: true }) disabled?: boolean;\n  @Watch('disabled')\n  disabledHandler(isDisabled: MgButton['disabled']): void {\n    // Remove loading when enable\n    // Will be set back onclick\n    if (!isDisabled && this.disableOnClick) {\n      this.loading = false;\n    }\n    // Manage if onclick\n    this.element.onclick = isDisabled ? undefined : this.onClickElementFn;\n\n    // apply style\n    if (isDisabled) {\n      this.classCollection.add(this.classDisabled);\n    } else {\n      this.classCollection.delete(this.classDisabled);\n    }\n\n    // emit value update\n    this.disabledChange.emit(isDisabled);\n  }\n  /**\n   * Define if button is round.\n   * Used for icon button.\n   */\n  @Prop() isIcon = false;\n\n  /**\n   * Option to set input disable on click, in order to prevent multi-click.\n   * Parent component have to remove the attribute 'disabled' when the process ends.\n   */\n  @Prop() disableOnClick = false;\n\n  /**\n   * Define if button is loading, default to false.\n   * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.\n   * It's required to reset to false when action/promise in parent is done to stop the loading state\n   */\n  @State() loading = false;\n  @Watch('loading')\n  loadingHandler(newValue: MgButton['loading']): void {\n    // we add loading style if it newvalue is true else we remove it\n    if (newValue) {\n      this.classCollection.add(this.classLoading);\n    } else {\n      this.classCollection.delete(this.classLoading);\n    }\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-button']);\n\n  /**\n   * Emmited event when disabled change\n   */\n  @Event({ eventName: 'disabled-change' }) disabledChange: EventEmitter<HTMLMgButtonElement['disabled']>;\n\n  /**\n   * Trigger actions onClick event\n   * @param event - click event\n   */\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled) event.stopPropagation();\n    // Used to prevent multi-click.\n    else if (this.disableOnClick) {\n      this.loading = true;\n      this.disabled = true;\n    }\n  };\n\n  /**\n   * Handle onKeydown event\n   * @param event - keyboard event\n   */\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (!this.disabled && event.key === ' ') {\n      event.preventDefault();\n    } else if (!this.disabled && ['Enter', 'NumpadEnter', 'Space'].includes(event.key)) {\n      event.preventDefault();\n      this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n    }\n  };\n\n  /**\n   * Handle onKeyup event\n   * @param event - keyboard event\n   */\n  private handleKeyup = (event: KeyboardEvent): void => {\n    if (!this.disabled && event.key === ' ') {\n      event.preventDefault();\n      this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n    }\n  };\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateVariant(this.variant);\n    this.validateFullWidth(this.fullWidth);\n    if (this.isIcon) {\n      this.classCollection.add(`mg-c-button--icon`);\n      if (!isValidString(this.label)) {\n        throw new Error(`<mg-button> prop \"label\" is mandatory when prop \"isIcon\" is set to true.`);\n      }\n    }\n    // Store the onclick fn\n    this.onClickElementFn = this.element.onclick;\n    this.disabledHandler(this.disabled);\n  }\n\n  /**\n   * Add listners\n   */\n  componentDidLoad(): void {\n    nextTick(() => {\n      const closestForm = this.element.closest('form') || this.element.closest('mg-form')?.shadowRoot.querySelector('form');\n      // submit buttons should trigger form submition;\n      if (closestForm && ['submit', undefined].includes(this.type)) {\n        this.element.addEventListener('click', () => {\n          closestForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));\n        });\n      }\n    });\n  }\n\n  /**\n   * Render component\n   * @returns html element\n   */\n  render(): HTMLElement {\n    return (\n      <Host\n        role=\"button\"\n        tabIndex={0}\n        type={this.type}\n        form={this.form}\n        full-width={this.fullWidth}\n        aria-label={this.label}\n        aria-disabled={this.disabled?.toString()}\n        onClick={this.handleClick}\n        onKeyup={this.handleKeyup}\n        onKeydown={this.handleKeydown}\n      >\n        <div class={this.classCollection.join()}>\n          {this.loading && <mg-icon icon=\"loader\" spin></mg-icon>}\n          <div class=\"mg-c-button__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-button.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-button/mg-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,QAAQ,EAAqC,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACtF,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAEtF;;GAEG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAME;;sBAEc;QAEN,qBAAgB,GAAG,IAAI,CAAC;QACf,kBAAa,GAAG,uBAAuB,CAAC;QACxC,iBAAY,GAAG,sBAAsB,CAAC;QACtC,mBAAc,GAAG,yBAAyB,CAAC;QAW5D;;WAEG;QACsB,YAAO,GAAgB,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU;QA8BvE;;WAEG;QACK,SAAI,GAAa,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;QAe5C;;WAEG;QACK,cAAS,GAAG,KAAK,CAAC;QA0C1B;;;WAGG;QACK,WAAM,GAAG,KAAK,CAAC;QAMvB;;;WAGG;QACK,mBAAc,GAAG,KAAK,CAAC;QAE/B;;;;WAIG;QACM,YAAO,GAAG,KAAK,CAAC;QAWzB;;WAEG;QACM,oBAAe,GAAc,IAAI,SAAS,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC;QAOrE;;;WAGG;QACK,gBAAW,GAAG,CAAC,KAAiB,EAAQ,EAAE;YAChD,IAAI,IAAI,CAAC,QAAQ;gBAAE,KAAK,CAAC,eAAe,EAAE,CAAC;YAC3C,+BAA+B;iBAC1B,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBAC7B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;gBACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACvB,CAAC;QACH,CAAC,CAAC;QAEF;;;WAGG;QACK,kBAAa,GAAG,CAAC,KAAoB,EAAQ,EAAE;YACrD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBACxC,KAAK,CAAC,cAAc,EAAE,CAAC;YACzB,CAAC;iBAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;gBACnF,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YACzE,CAAC;QACH,CAAC,CAAC;QAEF;;;WAGG;QACK,gBAAW,GAAG,CAAC,KAAoB,EAAQ,EAAE;YACnD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBACxC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YACzE,CAAC;QACH,CAAC,CAAC;QAEF;;WAEG;QACK,gBAAW,GAAG,GAAS,EAAE;;YAC/B,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;gBAC3B,MAAA,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,0CAAE,eAAe,CAAC,MAAM,CAAC,CAAC;YACjE,CAAC;iBAAM,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBACvB,MAAA,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,0CAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YACzE,CAAC;QACH,CAAC,CAAC;KA+DH;IAlPC,eAAe,CAAC,QAAqB,EAAE,QAAsB;QAC3D,qBAAqB;QACrB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YACjC,IAAK,QAAmB,KAAK,EAAE,EAAE,CAAC;gBAChC,gFAAgF;gBAChF,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;gBAC3B,OAAO;YACT,CAAC;YACD,MAAM,IAAI,KAAK,CAAC,8CAA8C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC7H,CAAC;aAAM,CAAC;YACN,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;gBAC3B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,gBAAgB,QAAQ,EAAE,CAAC,CAAC;YAC1D,CAAC;YACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,gBAAgB,QAAQ,EAAE,CAAC,CAAC;QACvD,CAAC;IACH,CAAC;IAkBD,YAAY,CAAC,QAA0B,EAAE,QAA2B;QAClE,qBAAqB;QACrB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC9B,MAAM,IAAI,KAAK,CAAC,2CAA2C,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACvH,CAAC;aAAM,CAAC;YACN,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;gBAC3B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,gBAAgB,QAAQ,EAAE,CAAC,CAAC;YAC1D,CAAC;YACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,gBAAgB,QAAQ,EAAE,CAAC,CAAC;YACrD,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAOD,iBAAiB,CAAC,QAA+B;QAC/C,IAAI,QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAC5B,MAAM,IAAI,KAAK,CAAC,iEAAiE,CAAC,CAAC;QACrF,CAAC;aAAM,IAAI,QAAQ,EAAE,CAAC;YACpB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAChD,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACnD,CAAC;IACH,CAAC;IAaD,eAAe,CAAC,UAAgC;QAC9C,6BAA6B;QAC7B,2BAA2B;QAC3B,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACvC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACvB,CAAC;QACD,oBAAoB;QACpB,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC;QAEtE,cAAc;QACd,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC/C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAClD,CAAC;QAED,oBAAoB;QACpB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACvC,CAAC;IAOD,WAAW;QACT,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAeD,cAAc,CAAC,QAA6B;QAC1C,gEAAgE;QAChE,IAAI,QAAQ,EAAE,CAAC;YACb,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC9C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACjD,CAAC;IACH,CAAC;IA4DD;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACvC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;YAC9C,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC/B,MAAM,IAAI,KAAK,CAAC,0EAA0E,CAAC,CAAC;YAC9F,CAAC;QACH,CAAC;QACD,uBAAuB;QACvB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;QAC7C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC;IAED;;OAEG;IACH,gBAAgB;QACd,QAAQ,CAAC,GAAG,EAAE;;YACZ,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,KAAI,MAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,0CAAE,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA,CAAC;YACtH,gDAAgD;YAChD,IAAI,WAAW,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC7D,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;oBAC1C,WAAW,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;gBAC5F,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACH,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,gBACH,IAAI,CAAC,SAAS,gBACd,IAAI,CAAC,KAAK,mBACP,MAAA,IAAI,CAAC,QAAQ,0CAAE,QAAQ,EAAE,EACxC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa;YAE7B,4DAAK,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;gBACpC,IAAI,CAAC,OAAO,IAAI,gEAAS,IAAI,EAAC,QAAQ,EAAC,IAAI,SAAW;gBACvD,4DAAK,KAAK,EAAC,sBAAsB;oBAC/B,8DAAa,CACT,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, State, Watch, Host, EventEmitter, Event } from '@stencil/core';\nimport { variants, VariantType, ButtonType, SizeType, sizes } from './mg-button.conf';\nimport { ClassList, isValidString, nextTick, toString } from '@mgdis/stencil-helpers';\n\n/**\n * @slot - Button content\n */\n@Component({\n  tag: 'mg-button',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-button.css',\n  shadow: true,\n})\nexport class MgButton {\n  /************\n   * Internal *\n   ************/\n\n  private onClickElementFn = null;\n  private readonly classDisabled = 'mg-c-button--disabled';\n  private readonly classLoading = 'mg-c-button--loading';\n  private readonly classFullWidth = 'mg-c-button--full-width';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgButtonElement;\n\n  /**\n   * Define button variant\n   */\n  @Prop({ mutable: true }) variant: VariantType = variants[0]; // Primary\n  @Watch('variant')\n  validateVariant(newValue: VariantType, oldValue?: VariantType): void {\n    // validate new value\n    if (!variants.includes(newValue)) {\n      if ((newValue as string) === '') {\n        // Reactive framework like VUE render with `\"\"` when prop is update to undefined\n        this.variant = variants[0];\n        return;\n      }\n      throw new Error(`<mg-button> prop \"variant\" must be one of: ${variants.join(', ')}. Passed value: ${toString(newValue)}.`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-c-button--${oldValue}`);\n      }\n      this.classCollection.add(`mg-c-button--${newValue}`);\n    }\n  }\n\n  /**\n   * aria-label\n   * In case button text is not explicit enough\n   */\n  @Prop() label?: string;\n\n  /**\n   * Define button type\n   */\n  @Prop() type?: ButtonType;\n\n  /**\n   * Define button size\n   */\n  @Prop() size: SizeType = sizes[0]; // medium\n  @Watch('size')\n  validateSize(newValue: MgButton['size'], oldValue?: MgButton['size']): void {\n    // validate new value\n    if (!sizes.includes(newValue)) {\n      throw new Error(`<mg-button> prop \"size\" must be one of: ${sizes.join(', ')}. Passed value: ${toString(newValue)}.`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-c-button--${oldValue}`);\n      }\n      this.classCollection.add(`mg-c-button--${newValue}`);\n      this.setIconSize();\n    }\n  }\n\n  /**\n   * Set button to full-width\n   */\n  @Prop() fullWidth = false;\n  @Watch('fullWidth')\n  validateFullWidth(newValue: MgButton['fullWidth']): void {\n    if (newValue && this.isIcon) {\n      throw new Error('<mg-button> prop \"fullWidth\" cannot be used with prop \"isIcon\".');\n    } else if (newValue) {\n      this.classCollection.add(this.classFullWidth);\n    } else {\n      this.classCollection.delete(this.classFullWidth);\n    }\n  }\n\n  /**\n   * Define form id to attach button with.\n   * If this attribute is not set, the `<button>` is associated with its ancestor `<form>` element.\n   */\n  @Prop() form?: string;\n\n  /**\n   * Disable button\n   */\n  @Prop({ mutable: true }) disabled?: boolean;\n  @Watch('disabled')\n  disabledHandler(isDisabled: MgButton['disabled']): void {\n    // Remove loading when enable\n    // Will be set back onclick\n    if (!isDisabled && this.disableOnClick) {\n      this.loading = false;\n    }\n    // Manage if onclick\n    this.element.onclick = isDisabled ? undefined : this.onClickElementFn;\n\n    // apply style\n    if (isDisabled) {\n      this.classCollection.add(this.classDisabled);\n    } else {\n      this.classCollection.delete(this.classDisabled);\n    }\n\n    // emit value update\n    this.disabledChange.emit(isDisabled);\n  }\n  /**\n   * Define if button is round.\n   * Used for icon button.\n   */\n  @Prop() isIcon = false;\n  @Watch('isIcon')\n  watchIsIcon(): void {\n    this.setIconSize();\n  }\n\n  /**\n   * Option to set input disable on click, in order to prevent multi-click.\n   * Parent component have to remove the attribute 'disabled' when the process ends.\n   */\n  @Prop() disableOnClick = false;\n\n  /**\n   * Define if button is loading, default to false.\n   * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.\n   * It's required to reset to false when action/promise in parent is done to stop the loading state\n   */\n  @State() loading = false;\n  @Watch('loading')\n  loadingHandler(newValue: MgButton['loading']): void {\n    // we add loading style if it newvalue is true else we remove it\n    if (newValue) {\n      this.classCollection.add(this.classLoading);\n    } else {\n      this.classCollection.delete(this.classLoading);\n    }\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-button']);\n\n  /**\n   * Emmited event when disabled change\n   */\n  @Event({ eventName: 'disabled-change' }) disabledChange: EventEmitter<HTMLMgButtonElement['disabled']>;\n\n  /**\n   * Trigger actions onClick event\n   * @param event - click event\n   */\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled) event.stopPropagation();\n    // Used to prevent multi-click.\n    else if (this.disableOnClick) {\n      this.loading = true;\n      this.disabled = true;\n    }\n  };\n\n  /**\n   * Handle onKeydown event\n   * @param event - keyboard event\n   */\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (!this.disabled && event.key === ' ') {\n      event.preventDefault();\n    } else if (!this.disabled && ['Enter', 'NumpadEnter', 'Space'].includes(event.key)) {\n      event.preventDefault();\n      this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n    }\n  };\n\n  /**\n   * Handle onKeyup event\n   * @param event - keyboard event\n   */\n  private handleKeyup = (event: KeyboardEvent): void => {\n    if (!this.disabled && event.key === ' ') {\n      event.preventDefault();\n      this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n    }\n  };\n\n  /**\n   * Set child `<mg-icon>` element `size` prop to follow the current `size` prop\n   */\n  private setIconSize = (): void => {\n    if (this.size === 'medium') {\n      this.element.querySelector('mg-icon')?.removeAttribute('size');\n    } else if (this.isIcon) {\n      this.element.querySelector('mg-icon')?.setAttribute('size', this.size);\n    }\n  };\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateVariant(this.variant);\n    this.validateFullWidth(this.fullWidth);\n    this.validateSize(this.size);\n    this.watchIsIcon();\n    if (this.isIcon) {\n      this.classCollection.add(`mg-c-button--icon`);\n      if (!isValidString(this.label)) {\n        throw new Error(`<mg-button> prop \"label\" is mandatory when prop \"isIcon\" is set to true.`);\n      }\n    }\n    // Store the onclick fn\n    this.onClickElementFn = this.element.onclick;\n    this.disabledHandler(this.disabled);\n  }\n\n  /**\n   * Add listners\n   */\n  componentDidLoad(): void {\n    nextTick(() => {\n      const closestForm = this.element.closest('form') || this.element.closest('mg-form')?.shadowRoot.querySelector('form');\n      // submit buttons should trigger form submition;\n      if (closestForm && ['submit', undefined].includes(this.type)) {\n        this.element.addEventListener('click', () => {\n          closestForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));\n        });\n      }\n    });\n  }\n\n  /**\n   * Render component\n   * @returns html element\n   */\n  render(): HTMLElement {\n    return (\n      <Host\n        role=\"button\"\n        tabIndex={0}\n        type={this.type}\n        form={this.form}\n        full-width={this.fullWidth}\n        aria-label={this.label}\n        aria-disabled={this.disabled?.toString()}\n        onClick={this.handleClick}\n        onKeyup={this.handleKeyup}\n        onKeydown={this.handleKeydown}\n      >\n        <div class={this.classCollection.join()}>\n          {this.loading && <mg-icon icon=\"loader\" spin></mg-icon>}\n          <div class=\"mg-c-button__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -11,7 +11,7 @@ export class MgCard {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'b8de627bd3018342b2e33f62e1779de8c53fa61e', class: "mg-c-card" }, h("slot", { key: '210e9b12485a345ab50d4ddb85d091cde58551a8' })));
+        return (h("div", { key: 'e59cabb09dbc28c148770b57de98f130c4479b75', class: "mg-c-card" }, h("slot", { key: 'b6e679317bddd23e73443c601992b7b344d6dc72' })));
     }
     static get is() { return "mg-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,12 @@
 import { h } from "@stencil/core";
 export class MgDivider {
     constructor() {
+        /**************
+         * Decorators *
+         **************/
+        /**
+         * Define component size
+         */
         this.fullWidth = false;
     }
     /**
@@ -8,7 +14,7 @@ export class MgDivider {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'b7d74c11f15700cbffa553bf4d688ad291473087', class: {
+        return (h("div", { key: '60b987cb329c6db14c2cc4a665e7f32b2696a3ee', class: {
                 'mg-c-divider': true,
                 'mg-c-divider--full-width': this.fullWidth,
             } }));
@@ -41,6 +47,8 @@ export class MgDivider {
                     "tags": [],
                     "text": "Define component size"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "full-width",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -1 +1 @@
-{"version":3,"file":"mg-divider.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-divider/mg-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,SAAS;;yBAQA,KAAK;;IAEzB;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,0BAA0B,EAAE,IAAI,CAAC,SAAS;aAC3C,GACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'mg-divider',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-divider.css',\n  shadow: true,\n})\nexport class MgDivider {\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Define component size\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div\n        class={{\n          'mg-c-divider': true,\n          'mg-c-divider--full-width': this.fullWidth,\n        }}\n      ></div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"mg-divider.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-divider/mg-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,SAAS;IALtB;QAME;;wBAEgB;QAEhB;;WAEG;QACK,cAAS,GAAG,KAAK,CAAC;KAgB3B;IAdC;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,0BAA0B,EAAE,IAAI,CAAC,SAAS;aAC3C,GACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'mg-divider',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-divider.css',\n  shadow: true,\n})\nexport class MgDivider {\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Define component size\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div\n        class={{\n          'mg-c-divider': true,\n          'mg-c-divider--full-width': this.fullWidth,\n        }}\n      ></div>\n    );\n  }\n}\n"]}

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

@@ -3,6 +3,18 @@ import { ClassList, toString } from "@mgdis/stencil-helpers";
 import { icons } from "../../../assets/icons";
 export class MgIcon {
     constructor() {
+        /**
+         * Define icon size
+         */
+        this.size = 'medium';
+        /**
+         * Make the icon spin
+         */
+        this.spin = false;
+        /**
+         * Component classes
+         */
+        this.classCollection = new ClassList(['mg-c-icon']);
         /**
          * Method to set default varianStyle props
          * needeed has stencil doesn't know that props is mutated when updated in prop watcher
@@ -23,12 +35,6 @@ export class MgIcon {
             this.svg.setAttribute('focusable', 'false');
             this.svg.setAttribute('class', this.classCollection.join());
         };
-        this.icon = undefined;
-        this.size = 'medium';
-        this.variant = undefined;
-        this.variantStyle = undefined;
-        this.spin = false;
-        this.classCollection = new ClassList(['mg-c-icon']);
     }
     validateIcon(newValue, oldValue) {
         if (!Object.keys(icons).includes(newValue))
@@ -132,6 +138,8 @@ export class MgIcon {
                     "tags": [],
                     "text": "Icon to display."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon",
                 "reflect": false
             },
@@ -155,6 +163,8 @@ export class MgIcon {
                     "tags": [],
                     "text": "Define icon size"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'medium'"
@@ -179,6 +189,8 @@ export class MgIcon {
                     "tags": [],
                     "text": "Define icon variant color"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant",
                 "reflect": false
             },
@@ -202,6 +214,8 @@ export class MgIcon {
                     "tags": [],
                     "text": "Define icon color variant style\nAdd a color to the icon based on variant color with given style\n'full': Used to set a circular background with variant soft color and icon variant color\n'background': Used to set a circular background with variant soft color\n'icon': Used to set a color only to the icon"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "variant-style",
                 "reflect": false
             },
@@ -219,6 +233,8 @@ export class MgIcon {
                     "tags": [],
                     "text": "Make the icon spin"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "spin",
                 "reflect": false,
                 "defaultValue": "false"