@mgdis/mg-components 5.19.2 → 5.20.0

package/dist/components/mg-badge2.js

@@ -9,95 +9,95 @@ const variants = ['info', 'primary', 'secondary', 'success', 'warning', 'danger'
 const mgBadgeCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-badge{min-width:var(--mg-badge-size);height:var(--mg-badge-size);box-sizing:border-box;padding:0 .4rem;border:.1rem solid;border-radius:calc(var(--mg-badge-size)/2);font-size:var(--mg-badge-font-size);font-weight:600;line-height:var(--mg-badge-size);text-align:center}.mg-c-badge.mg-c-badge--primary{border-color:hsl(var(--color-dark));background-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--primary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--secondary{border-color:hsl(var(--color-light));background-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--secondary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--success{border-color:hsl(var(--color-success));background-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--success.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-success))}.mg-c-badge.mg-c-badge--warning{border-color:hsl(var(--color-warning));background-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--warning.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-warning))}.mg-c-badge.mg-c-badge--danger{border-color:hsl(var(--color-danger));background-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--danger.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-danger))}.mg-c-badge.mg-c-badge--info{border-color:hsl(var(--color-info));background-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--info.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-info))}.mg-c-badge.mg-c-badge--text-color{border-color:currentcolor;background-color:currentcolor}.mg-c-badge.mg-c-badge--text-color .mg-c-badge__value{color:hsl(var(--mg-badge-text-color, var(--color-light)))}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline{background-color:rgba(0,0,0,0)}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline .mg-c-badge__value{color:currentcolor}.mg-c-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}";
 
 const MgBadge = /*@__PURE__*/ proxyCustomElement(class MgBadge extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /************
-     * Internal *
-     ************/
-    // Classes
-    this.classOutline = `mg-c-badge--outline`;
-    this.value = undefined;
-    this.label = undefined;
-    this.variant = variants[0];
-    this.outline = undefined;
-    this.classCollection = new ClassList(['mg-c-badge']);
-  }
-  validateValue(newValue) {
-    if (/^(\d+\+*|[?*!a-z])$/i.exec(`${newValue}`) === null) {
-      throw new Error('<mg-badge> prop "value" must be integer or ponctuation character.');
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /************
+         * Internal *
+         ************/
+        // Classes
+        this.classOutline = `mg-c-badge--outline`;
+        this.value = undefined;
+        this.label = undefined;
+        this.variant = variants[0];
+        this.outline = undefined;
+        this.classCollection = new ClassList(['mg-c-badge']);
     }
-  }
-  validateLabel(newValue) {
-    if (!isValidString(newValue)) {
-      throw new Error('<mg-badge> prop "label" is required.');
+    validateValue(newValue) {
+        if (/^(\d+\+*|[?*!a-z])$/i.exec(`${newValue}`) === null) {
+            throw new Error('<mg-badge> prop "value" must be integer or ponctuation character.');
+        }
     }
-  }
-  validateVariant(newValue, oldValue) {
-    if (!variants.includes(newValue)) {
-      throw new Error(`<mg-badge> prop "variant" must be one of: ${variants.join(', ')}.`);
+    validateLabel(newValue) {
+        if (!isValidString(newValue)) {
+            throw new Error('<mg-badge> prop "label" is required.');
+        }
     }
-    else {
-      if (oldValue !== undefined) {
-        this.classCollection.delete(`mg-c-badge--${oldValue}`);
-      }
-      this.classCollection.add(`mg-c-badge--${newValue}`);
+    validateVariant(newValue, oldValue) {
+        if (!variants.includes(newValue)) {
+            throw new Error(`<mg-badge> prop "variant" must be one of: ${variants.join(', ')}.`);
+        }
+        else {
+            if (oldValue !== undefined) {
+                this.classCollection.delete(`mg-c-badge--${oldValue}`);
+            }
+            this.classCollection.add(`mg-c-badge--${newValue}`);
+        }
     }
-  }
-  validateOutline(newValue) {
-    if (newValue)
-      this.classCollection.add(this.classOutline);
-    else
-      this.classCollection.delete(this.classOutline);
-  }
-  /**
-   * Check if props are well configured on init
-   */
-  componentWillLoad() {
-    this.validateValue(this.value);
-    this.validateLabel(this.label);
-    this.validateVariant(this.variant);
-    this.validateOutline(this.outline);
-  }
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render() {
-    return (h("span", { class: this.classCollection.join() }, h("span", { class: "mg-c-badge__value" }, this.value), h("span", { class: "mg-u-visually-hidden" }, this.label)));
-  }
-  static get watchers() { return {
-    "value": ["validateValue"],
-    "label": ["validateLabel"],
-    "variant": ["validateVariant"],
-    "outline": ["validateOutline"]
-  }; }
-  static get style() { return mgBadgeCss; }
+    validateOutline(newValue) {
+        if (newValue)
+            this.classCollection.add(this.classOutline);
+        else
+            this.classCollection.delete(this.classOutline);
+    }
+    /**
+     * Check if props are well configured on init
+     */
+    componentWillLoad() {
+        this.validateValue(this.value);
+        this.validateLabel(this.label);
+        this.validateVariant(this.variant);
+        this.validateOutline(this.outline);
+    }
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        return (h("span", { class: this.classCollection.join() }, h("span", { class: "mg-c-badge__value" }, this.value), h("span", { class: "mg-u-visually-hidden" }, this.label)));
+    }
+    static get watchers() { return {
+        "value": ["validateValue"],
+        "label": ["validateLabel"],
+        "variant": ["validateVariant"],
+        "outline": ["validateOutline"]
+    }; }
+    static get style() { return mgBadgeCss; }
 }, [1, "mg-badge", {
-    "value": [8],
-    "label": [1],
-    "variant": [1],
-    "outline": [4],
-    "classCollection": [32]
-  }, undefined, {
-    "value": ["validateValue"],
-    "label": ["validateLabel"],
-    "variant": ["validateVariant"],
-    "outline": ["validateOutline"]
-  }]);
+        "value": [8],
+        "label": [1],
+        "variant": [1],
+        "outline": [4],
+        "classCollection": [32]
+    }, undefined, {
+        "value": ["validateValue"],
+        "label": ["validateLabel"],
+        "variant": ["validateVariant"],
+        "outline": ["validateOutline"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["mg-badge"];
-  components.forEach(tagName => { switch (tagName) {
-    case "mg-badge":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MgBadge);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-badge"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-badge":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgBadge);
+            }
+            break;
+    } });
 }
 defineCustomElement();
 

package/dist/components/mg-badge2.js.map

@@ -1 +1 @@
-{"file":"mg-badge2.js","mappings":";;;AAAA;;;AAGO,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,CAAU;;ACH/G,MAAM,UAAU,GAAG,yoFAAyoF;;MCQ/oF,OAAO;;;;;;;;;IAMD,iBAAY,GAAG,qBAAqB,CAAC;;;mBAgCjB,QAAQ,CAAC,CAAC,CAAC;;2BA0BV,IAAI,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;;EA/CnE,aAAa,CAAC,QAA0B;IACtC,IAAI,sBAAsB,CAAC,IAAI,CAAC,GAAG,QAAQ,EAAE,CAAC,KAAK,IAAI,EAAE;MACvD,MAAM,IAAI,KAAK,CAAC,mEAAmE,CAAC,CAAC;KACtF;GACF;EAQD,aAAa,CAAC,QAA0B;IACtC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;MAC5B,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;KACzD;GACF;EAOD,eAAe,CAAC,QAA4B,EAAE,QAA6B;IACzE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,6CAA6C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACtF;SAAM;MACL,IAAI,QAAQ,KAAK,SAAS,EAAE;QAC1B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC;OACxD;MACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC;KACrD;GACF;EAOD,eAAe,CAAC,QAA4B;IAC1C,IAAI,QAAQ;MAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;;MACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;GACrD;;;;EAUD,iBAAiB;IACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACpC;;;;;EAMD,MAAM;IACJ,QACE,YAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IACtC,YAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACnD,YAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAQ,CACjD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/mg-badge/mg-badge.conf.ts","../styles/dist/components/mg-badge.css?tag=mg-badge&encapsulation=shadow","src/components/atoms/mg-badge/mg-badge.tsx"],"sourcesContent":["/**\n * List of all possibles variants\n */\nexport const variants = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'] as const;\n\n/**\n * Variant type from variants\n */\nexport type BadgeVariantType = (typeof variants)[number];\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-badge{min-width:var(--mg-badge-size);height:var(--mg-badge-size);box-sizing:border-box;padding:0 .4rem;border:.1rem solid;border-radius:calc(var(--mg-badge-size)/2);font-size:var(--mg-badge-font-size);font-weight:600;line-height:var(--mg-badge-size);text-align:center}.mg-c-badge.mg-c-badge--primary{border-color:hsl(var(--color-dark));background-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--primary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--secondary{border-color:hsl(var(--color-light));background-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--secondary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--success{border-color:hsl(var(--color-success));background-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--success.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-success))}.mg-c-badge.mg-c-badge--warning{border-color:hsl(var(--color-warning));background-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--warning.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-warning))}.mg-c-badge.mg-c-badge--danger{border-color:hsl(var(--color-danger));background-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--danger.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-danger))}.mg-c-badge.mg-c-badge--info{border-color:hsl(var(--color-info));background-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--info.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-info))}.mg-c-badge.mg-c-badge--text-color{border-color:currentcolor;background-color:currentcolor}.mg-c-badge.mg-c-badge--text-color .mg-c-badge__value{color:hsl(var(--mg-badge-text-color, var(--color-light)))}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline{background-color:rgba(0,0,0,0)}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline .mg-c-badge__value{color:currentcolor}.mg-c-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}/*# sourceMappingURL=mg-badge.css.map */\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { variants, BadgeVariantType } from './mg-badge.conf';\nimport { ClassList, isValidString } from '../../../utils/components.utils';\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 (/^(\\d+\\+*|[?*!a-z])$/i.exec(`${newValue}`) === null) {\n      throw new Error('<mg-badge> prop \"value\" must be integer or ponctuation character.');\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.');\n    }\n  }\n\n  /**\n   * Define button 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(', ')}.`);\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-badge2.js","mappings":";;;AAAA;;;AAGO,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,CAAU;;ACH/G,MAAM,UAAU,GAAG,yoFAAyoF;;MCQ/oF,OAAO;;;;;;;;;QAMD,iBAAY,GAAG,qBAAqB,CAAC;;;uBAgCjB,QAAQ,CAAC,CAAC,CAAC;;+BA0BV,IAAI,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;;IA/CnE,aAAa,CAAC,QAA0B;QACtC,IAAI,sBAAsB,CAAC,IAAI,CAAC,GAAG,QAAQ,EAAE,CAAC,KAAK,IAAI,EAAE;YACvD,MAAM,IAAI,KAAK,CAAC,mEAAmE,CAAC,CAAC;SACtF;KACF;IAQD,aAAa,CAAC,QAA0B;QACtC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;YAC5B,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;SACzD;KACF;IAOD,eAAe,CAAC,QAA4B,EAAE,QAA6B;QACzE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;YAChC,MAAM,IAAI,KAAK,CAAC,6CAA6C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SACtF;aAAM;YACL,IAAI,QAAQ,KAAK,SAAS,EAAE;gBAC1B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC;aACxD;YACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC;SACrD;KACF;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;KACrD;;;;IAUD,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;KACpC;;;;;IAMD,MAAM;QACJ,QACE,YAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IACtC,YAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACnD,YAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAQ,CACjD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/mg-badge/mg-badge.conf.ts","../styles/dist/components/mg-badge.css?tag=mg-badge&encapsulation=shadow","src/components/atoms/mg-badge/mg-badge.tsx"],"sourcesContent":["/**\n * List of all possibles variants\n */\nexport const variants = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'] as const;\n\n/**\n * Variant type from variants\n */\nexport type BadgeVariantType = (typeof variants)[number];\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-badge{min-width:var(--mg-badge-size);height:var(--mg-badge-size);box-sizing:border-box;padding:0 .4rem;border:.1rem solid;border-radius:calc(var(--mg-badge-size)/2);font-size:var(--mg-badge-font-size);font-weight:600;line-height:var(--mg-badge-size);text-align:center}.mg-c-badge.mg-c-badge--primary{border-color:hsl(var(--color-dark));background-color:hsl(var(--color-dark));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--primary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--secondary{border-color:hsl(var(--color-light));background-color:hsl(var(--color-light));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--secondary.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--success{border-color:hsl(var(--color-success));background-color:hsl(var(--color-success));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--success.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-success))}.mg-c-badge.mg-c-badge--warning{border-color:hsl(var(--color-warning));background-color:hsl(var(--color-warning));color:hsl(var(--color-dark))}.mg-c-badge.mg-c-badge--warning.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-warning))}.mg-c-badge.mg-c-badge--danger{border-color:hsl(var(--color-danger));background-color:hsl(var(--color-danger));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--danger.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-danger))}.mg-c-badge.mg-c-badge--info{border-color:hsl(var(--color-info));background-color:hsl(var(--color-info));color:hsl(var(--color-light))}.mg-c-badge.mg-c-badge--info.mg-c-badge--outline{background-color:rgba(0,0,0,0);color:hsl(var(--color-info))}.mg-c-badge.mg-c-badge--text-color{border-color:currentcolor;background-color:currentcolor}.mg-c-badge.mg-c-badge--text-color .mg-c-badge__value{color:hsl(var(--mg-badge-text-color, var(--color-light)))}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline{background-color:rgba(0,0,0,0)}.mg-c-badge.mg-c-badge--text-color.mg-c-badge--outline .mg-c-badge__value{color:currentcolor}.mg-c-badge,mg-badge{display:inline-flex;align-items:center;justify-content:center}/*# sourceMappingURL=mg-badge.css.map */\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { variants, BadgeVariantType } from './mg-badge.conf';\nimport { ClassList, isValidString } from '../../../utils/components.utils';\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 (/^(\\d+\\+*|[?*!a-z])$/i.exec(`${newValue}`) === null) {\n      throw new Error('<mg-badge> prop \"value\" must be integer or ponctuation character.');\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.');\n    }\n  }\n\n  /**\n   * Define button 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(', ')}.`);\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}

package/dist/components/mg-button.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface MgButton extends Components.MgButton, HTMLElement {}
 export const MgButton: {
-  prototype: MgButton;
-  new (): MgButton;
+    prototype: MgButton;
+    new (): MgButton;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/mg-button2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { C as ClassList, i as isValidString } from './components.utils.js';
+import { C as ClassList, i as isValidString, n as nextTick } from './components.utils.js';
 import { d as defineCustomElement$1 } from './mg-icon2.js';
 
 /**
@@ -10,182 +10,197 @@ const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat'
 const mgButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle}:host(:hover) .mg-c-button--flat:not(.mg-c-button--disabled){background:hsl(var(--color-dark)/10%)}:host([full-width]){display:block}:host([disabled]),:host([aria-disabled=true]){pointer-events:none}.mg-c-button.mg-c-button--primary{border-color:hsl(var(--mg-button-primary-border-color, var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--mg-button-primary-font-color))}:host(:hover) .mg-c-button--primary:not(.mg-c-button--disabled){background:hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l))}.mg-c-button.mg-c-button--secondary{border-color:hsl(var(--mg-button-secondary-border-color, var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--mg-button-secondary-font-color))}:host(:hover) .mg-c-button--secondary:not(.mg-c-button--disabled){background:hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l))}.mg-c-button.mg-c-button--danger{border-color:hsl(var(--mg-button-danger-border-color, var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-neutral))}:host(:hover) .mg-c-button--danger:not(.mg-c-button--disabled){background:hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l))}.mg-c-button.mg-c-button--danger-alt{border-color:hsl(var(--mg-button-danger-alt-border-color, var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-danger))}:host(:hover) .mg-c-button--danger-alt:not(.mg-c-button--disabled){background:hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l))}.mg-c-button.mg-c-button--info{border-color:hsl(var(--mg-button-info-border-color, var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-neutral))}:host(:hover) .mg-c-button--info:not(.mg-c-button--disabled){background:hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l))}.mg-c-button.mg-c-button--success{border-color:hsl(var(--mg-button-success-border-color, var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-border-variation) * 10%)));background:linear-gradient(to bottom, hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l)), hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) - var(--mg-button-gradient) * 10%)));color:hsl(var(--color-dark))}:host(:hover) .mg-c-button--success:not(.mg-c-button--disabled){background:hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l))}.mg-c-button{position:relative;display:inline-flex;min-height:var(--default-size);box-sizing:border-box;align-items:center;padding:calc((var(--default-size) - .2rem - var(--font-size)*var(--line-height))/2) 1.1rem;border-width:var(--mg-button-border-top-width, 0.1rem) var(--mg-button-border-right-width, 0.1rem) var(--mg-button-border-bottom-width, 0.1rem) var(--mg-button-border-left-width, 0.1rem);border-style:solid;border-radius:var(--mg-button-border-radius-top-left, var(--mg-button-border-radius)) var(--mg-button-border-radius-top-right, var(--mg-button-border-radius)) var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius)) var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));background-image:none;column-gap:.6rem;cursor:pointer;touch-action:manipulation;font-family:inherit;font-size:var(--font-size);font-weight:var(--mg-button-font-weight, normal);text-align:left;text-decoration:none}.mg-c-button.mg-c-button--disabled{cursor:default;opacity:var(--mg-button-disabled-opacity)}.mg-c-button.mg-c-button--icon{width:var(--default-size);height:var(--default-size);justify-content:center;padding:0;border-radius:var(--mg-button-border-radius-top-left, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-top-right, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-bottom-right, var(--mg-button-icon-border-radius)) var(--mg-button-border-radius-bottom-left, var(--mg-button-icon-border-radius));font-size:var(--font-size);line-height:var(--font-size)}.mg-c-button.mg-c-button--flat{border:none;background:none}.mg-c-button slot,.mg-c-button ::slotted(*:not(mg-icon)){font-family:inherit;font-size:var(--font-size);font-weight:var(--mg-button-font-weight, normal);text-align:left;text-decoration:none;display:flex;align-items:center;column-gap:.6rem}.mg-c-button.mg-c-button--link{min-height:unset;padding:unset;border:unset;border-radius:unset;background:unset;text-decoration:underline}.mg-c-button.mg-c-button--link slot{font-weight:600}.mg-c-button.mg-c-button--link:hover{text-decoration:none}.mg-c-button.mg-c-button--full-width{display:flex;justify-content:center}.mg-c-button mg-icon:only-child,.mg-c-button ::slotted(mg-icon){display:inline-flex;flex-shrink:0;margin:auto 0;line-height:1}.mg-c-button.mg-c-button--loading>mg-icon:first-of-type{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.mg-c-button.mg-c-button--loading .mg-c-button__content{opacity:0}:host(:focus-visible){outline:0}:host(:focus-visible) .mg-c-button{outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:.2rem}";
 
 const MgButton = /*@__PURE__*/ proxyCustomElement(class MgButton extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.disabledChange = createEvent(this, "disabled-change", 7);
-    /************
-     * Internal *
-     ************/
-    this.onClickElementFn = null;
-    this.classDisabled = 'mg-c-button--disabled';
-    this.classLoading = 'mg-c-button--loading';
-    this.classFullWidth = 'mg-c-button--full-width';
-    /**
-     * Trigger actions onClick event
-     * @param event - click event
-     */
-    this.handleClick = (event) => {
-      if (this.disabled)
-        event.stopPropagation();
-      // Used to prevent multi-click.
-      else if (this.disableOnClick) {
-        this.loading = true;
-        this.disabled = true;
-      }
-    };
-    /**
-     * Handle onKeydown event
-     * @param event - keyboard event
-     */
-    this.handleKeydown = (event) => {
-      if (!this.disabled && event.key === ' ') {
-        event.preventDefault();
-      }
-      else if (!this.disabled && ['Enter', 'NumpadEnter', 'Space'].includes(event.key)) {
-        event.preventDefault();
-        this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-      }
-    };
-    /**
-     * Handle onKeyup event
-     * @param event - keyboard event
-     */
-    this.handleKeyup = (event) => {
-      if (!this.disabled && event.key === ' ') {
-        event.preventDefault();
-        this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-      }
-    };
-    this.variant = variants[0];
-    this.identifier = undefined;
-    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']);
-  }
-  validateVariant(newValue, oldValue) {
-    if (!variants.includes(newValue)) {
-      throw new Error(`<mg-button> prop "variant" must be one of: ${variants.join(', ')}`);
-    }
-    else {
-      if (oldValue !== undefined) {
-        this.classCollection.delete(`mg-c-button--${oldValue}`);
-      }
-      this.classCollection.add(`mg-c-button--${newValue}`);
-    }
-  }
-  validateFullWidth(newValue) {
-    if (newValue && this.isIcon) {
-      throw new Error('<mg-button> prop "fullWidth" cannot be used with prop "isIcon".');
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.disabledChange = createEvent(this, "disabled-change", 7);
+        /************
+         * Internal *
+         ************/
+        this.onClickElementFn = null;
+        this.classDisabled = 'mg-c-button--disabled';
+        this.classLoading = 'mg-c-button--loading';
+        this.classFullWidth = 'mg-c-button--full-width';
+        /**
+         * Trigger actions onClick event
+         * @param event - click event
+         */
+        this.handleClick = (event) => {
+            if (this.disabled)
+                event.stopPropagation();
+            // Used to prevent multi-click.
+            else if (this.disableOnClick) {
+                this.loading = true;
+                this.disabled = true;
+            }
+        };
+        /**
+         * Handle onKeydown event
+         * @param event - keyboard event
+         */
+        this.handleKeydown = (event) => {
+            if (!this.disabled && event.key === ' ') {
+                event.preventDefault();
+            }
+            else if (!this.disabled && ['Enter', 'NumpadEnter', 'Space'].includes(event.key)) {
+                event.preventDefault();
+                this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+            }
+        };
+        /**
+         * Handle onKeyup event
+         * @param event - keyboard event
+         */
+        this.handleKeyup = (event) => {
+            if (!this.disabled && event.key === ' ') {
+                event.preventDefault();
+                this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+            }
+        };
+        this.variant = variants[0];
+        this.identifier = undefined;
+        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']);
     }
-    else if (newValue) {
-      this.classCollection.add(this.classFullWidth);
+    validateVariant(newValue, oldValue) {
+        if (!variants.includes(newValue)) {
+            throw new Error(`<mg-button> prop "variant" must be one of: ${variants.join(', ')}`);
+        }
+        else {
+            if (oldValue !== undefined) {
+                this.classCollection.delete(`mg-c-button--${oldValue}`);
+            }
+            this.classCollection.add(`mg-c-button--${newValue}`);
+        }
     }
-    else {
-      this.classCollection.delete(this.classFullWidth);
+    validateFullWidth(newValue) {
+        if (newValue && this.isIcon) {
+            throw new Error('<mg-button> prop "fullWidth" cannot be used with prop "isIcon".');
+        }
+        else if (newValue) {
+            this.classCollection.add(this.classFullWidth);
+        }
+        else {
+            this.classCollection.delete(this.classFullWidth);
+        }
     }
-  }
-  disabledHandler(isDisabled) {
-    // Remove loading when enable
-    // Will be set back onclick
-    if (!isDisabled && this.disableOnClick) {
-      this.loading = false;
+    disabledHandler(isDisabled) {
+        // Remove loading when enable
+        // Will be set back onclick
+        if (!isDisabled && this.disableOnClick) {
+            this.loading = false;
+        }
+        // Manage if onclick
+        this.element.onclick = isDisabled ? undefined : this.onClickElementFn;
+        // apply style
+        if (isDisabled) {
+            this.classCollection.add(this.classDisabled);
+        }
+        else {
+            this.classCollection.delete(this.classDisabled);
+        }
+        // emit value update
+        this.disabledChange.emit(isDisabled);
     }
-    // Manage if onclick
-    this.element.onclick = isDisabled ? undefined : this.onClickElementFn;
-    // apply style
-    if (isDisabled) {
-      this.classCollection.add(this.classDisabled);
+    loadingHandler(newValue) {
+        // we add loading style if it newvalue is true else we remove it
+        if (newValue) {
+            this.classCollection.add(this.classLoading);
+        }
+        else {
+            this.classCollection.delete(this.classLoading);
+        }
     }
-    else {
-      this.classCollection.delete(this.classDisabled);
-    }
-    // emit value update
-    this.disabledChange.emit(isDisabled);
-  }
-  loadingHandler(newValue) {
-    // we add loading style if it newvalue is true else we remove it
-    if (newValue) {
-      this.classCollection.add(this.classLoading);
+    /**
+     * Check if props are well configured on init
+     */
+    componentWillLoad() {
+        this.validateVariant(this.variant);
+        this.validateFullWidth(this.fullWidth);
+        if (this.isIcon) {
+            this.classCollection.add(`mg-c-button--icon`);
+            if (!isValidString(this.label)) {
+                throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
+            }
+        }
+        // Store the onclick fn
+        this.onClickElementFn = this.element.onclick;
+        this.disabledHandler(this.disabled);
     }
-    else {
-      this.classCollection.delete(this.classLoading);
+    /**
+     * Add listners
+     */
+    componentDidLoad() {
+        nextTick(() => {
+            var _a;
+            const closestForm = this.element.closest('form') || ((_a = this.element.closest('mg-form')) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('form'));
+            // submit buttons should trigger form submition;
+            if (!!closestForm && ['submit', undefined].includes(this.type)) {
+                this.element.addEventListener('click', () => {
+                    closestForm.dispatchEvent(new SubmitEvent('submit', { bubbles: true, cancelable: true }));
+                });
+            }
+        });
     }
-  }
-  /**
-   * Check if props are well configured on init
-   */
-  componentWillLoad() {
-    this.validateVariant(this.variant);
-    this.validateFullWidth(this.fullWidth);
-    if (this.isIcon) {
-      this.classCollection.add(`mg-c-button--icon`);
-      if (!isValidString(this.label)) {
-        throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
-      }
+    /**
+     * Render component
+     * @returns html element
+     */
+    render() {
+        var _a;
+        return (h(Host, { 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", { class: this.classCollection.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-c-button__content" }, h("slot", null)))));
     }
-    // Store the onclick fn
-    this.onClickElementFn = this.element.onclick;
-    this.disabledHandler(this.disabled);
-  }
-  /**
-   * Render component
-   * @returns html element
-   */
-  render() {
-    var _a;
-    return (h(Host, { 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", { class: this.classCollection.join(), id: this.identifier }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-c-button__content" }, h("slot", null)))));
-  }
-  get element() { return this; }
-  static get watchers() { return {
-    "variant": ["validateVariant"],
-    "fullWidth": ["validateFullWidth"],
-    "disabled": ["disabledHandler"],
-    "loading": ["loadingHandler"]
-  }; }
-  static get style() { return mgButtonCss; }
+    get element() { return this; }
+    static get watchers() { return {
+        "variant": ["validateVariant"],
+        "fullWidth": ["validateFullWidth"],
+        "disabled": ["disabledHandler"],
+        "loading": ["loadingHandler"]
+    }; }
+    static get style() { return mgButtonCss; }
 }, [1, "mg-button", {
-    "variant": [1],
-    "identifier": [1],
-    "label": [1],
-    "type": [1],
-    "fullWidth": [4, "full-width"],
-    "form": [1],
-    "disabled": [1028],
-    "isIcon": [4, "is-icon"],
-    "disableOnClick": [4, "disable-on-click"],
-    "loading": [32],
-    "classCollection": [32]
-  }, undefined, {
-    "variant": ["validateVariant"],
-    "fullWidth": ["validateFullWidth"],
-    "disabled": ["disabledHandler"],
-    "loading": ["loadingHandler"]
-  }]);
+        "variant": [1],
+        "identifier": [1],
+        "label": [1],
+        "type": [1],
+        "fullWidth": [4, "full-width"],
+        "form": [1],
+        "disabled": [1028],
+        "isIcon": [4, "is-icon"],
+        "disableOnClick": [4, "disable-on-click"],
+        "loading": [32],
+        "classCollection": [32]
+    }, undefined, {
+        "variant": ["validateVariant"],
+        "fullWidth": ["validateFullWidth"],
+        "disabled": ["disabledHandler"],
+        "loading": ["loadingHandler"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["mg-button", "mg-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "mg-button":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, MgButton);
-      }
-      break;
-    case "mg-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-button", "mg-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgButton);
+            }
+            break;
+        case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
 }
 defineCustomElement();