@mgdis/mg-components 5.19.3 → 5.20.0

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

@@ -1,51 +1,51 @@
 import { h } from "@stencil/core";
 export class MgDivider {
-  constructor() {
-    this.size = 'regular';
-  }
-  /**
-   * Render
-   * @returns HTML Element
-   */
-  render() {
-    return (h("div", { class: {
-        'mg-c-divider': true,
-        'mg-c-divider--full': this.size === 'full',
-      } }));
-  }
-  static get is() { return "mg-divider"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-divider.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-divider.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'regular' | 'full'",
-          "resolved": "\"full\" | \"regular\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define component size"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'regular'"
-      }
-    };
-  }
+    constructor() {
+        this.size = 'regular';
+    }
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        return (h("div", { class: {
+                'mg-c-divider': true,
+                'mg-c-divider--full': this.size === 'full',
+            } }));
+    }
+    static get is() { return "mg-divider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-divider.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-divider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'regular' | 'full'",
+                    "resolved": "\"full\" | \"regular\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define component size"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'regular'"
+            }
+        };
+    }
 }
 //# sourceMappingURL=mg-divider.js.map

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;;gBAQe,SAAS;;EAE5C;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,WACE,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,oBAAoB,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;OAC3C,GACI,CACR,CAAC;EACJ,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() size: 'regular' | 'full' = 'regular';\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': this.size === 'full',\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;;oBAQe,SAAS;;IAE5C;;;OAGG;IACH,MAAM;QACJ,OAAO,CACL,WACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,oBAAoB,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;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() size: 'regular' | 'full' = 'regular';\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': this.size === 'full',\n        }}\n      ></div>\n    );\n  }\n}\n"]}

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

@@ -3,246 +3,246 @@ import { ClassList } from "../../../utils/components.utils";
 import iconList from "@mgdis/img/dist/icons/index.json";
 import { icons } from "../../../assets/icons";
 export class MgIcon {
-  constructor() {
+    constructor() {
+        /**
+         * Method to set default varianStyle props
+         * needeed has stencil doesn't know that props is mutated when updated in prop watcher
+         */
+        this.setDefaultVariantStyle = () => {
+            if (this.variantStyle === undefined)
+                this.variantStyle = 'background';
+        };
+        /**
+         * Render icon in shadowroot
+         * @param icon - icon to render
+         */
+        this.renderIcon = icon => {
+            this.element.shadowRoot.innerHTML = icons[icon];
+            this.svg = this.element.shadowRoot.querySelector('svg');
+            // update svg attributes
+            this.svg.setAttribute('aria-hidden', 'true');
+            this.svg.setAttribute('focusable', 'false');
+            this.svg.setAttribute('class', this.classCollection.join());
+        };
+        this.icon = undefined;
+        this.size = 'regular';
+        this.variant = undefined;
+        this.variantStyle = undefined;
+        this.spin = false;
+        this.classCollection = new ClassList(['mg-c-icon']);
+    }
+    validateIcon(newValue, oldValue) {
+        if (!iconList.includes(newValue))
+            throw new Error(`<mg-icon> prop "icon" must be one of: ${iconList.join(', ')}`);
+        else {
+            if (oldValue !== undefined)
+                this.classCollection.delete(`mg-c-icon--${oldValue}`);
+            this.classCollection.add(`mg-c-icon--${newValue}`);
+            this.renderIcon(newValue);
+        }
+    }
+    validateSize(newValue, oldValue) {
+        if (!sizes.includes(newValue))
+            throw new Error(`<mg-icon> prop "size" must be one of: ${sizes.join(', ')}`);
+        else {
+            if (oldValue !== undefined)
+                this.classCollection.delete(`mg-c-icon--size-${oldValue}`);
+            this.classCollection.add(`mg-c-icon--size-${newValue}`);
+        }
+    }
+    validateVariant(newValue, oldValue) {
+        if (newValue) {
+            if (!variants.includes(newValue))
+                throw new Error(`<mg-icon> prop "variant" must be one of: ${variants.join(', ')}`);
+            else {
+                this.setDefaultVariantStyle();
+                if (oldValue !== undefined)
+                    this.classCollection.delete(`mg-c-icon--variant-${oldValue}`);
+                this.classCollection.add(`mg-c-icon--variant-${newValue}`);
+            }
+        }
+    }
+    validateVariantStyle(newValue, oldValue) {
+        if (newValue) {
+            if (!variantStyles.includes(newValue))
+                throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles.join(', ')}`);
+            else {
+                if (oldValue !== undefined)
+                    this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);
+                this.classCollection.add(`mg-c-icon--variant-style-${newValue}`);
+            }
+        }
+    }
+    handleSpin(newValue) {
+        if (newValue) {
+            this.classCollection.add('mg-c-icon--spin');
+        }
+        else {
+            this.classCollection.delete('mg-c-icon--spin');
+        }
+    }
     /**
-     * Method to set default varianStyle props
-     * needeed has stencil doesn't know that props is mutated when updated in prop watcher
+     * Check if props are well configured on init
      */
-    this.setDefaultVariantStyle = () => {
-      if (this.variantStyle === undefined)
-        this.variantStyle = 'background';
-    };
+    componentWillLoad() {
+        this.validateIcon(this.icon);
+        this.validateSize(this.size);
+        this.validateVariant(this.variant);
+        this.validateVariantStyle(this.variantStyle);
+        this.handleSpin(this.spin);
+        // render icon
+        this.renderIcon(this.icon);
+    }
     /**
-     * Render icon in shadowroot
-     * @param icon - icon to render
+     * update html when component trigger changes
      */
-    this.renderIcon = icon => {
-      this.element.shadowRoot.innerHTML = icons[icon];
-      this.svg = this.element.shadowRoot.querySelector('svg');
-      // update svg attributes
-      this.svg.setAttribute('aria-hidden', 'true');
-      this.svg.setAttribute('focusable', 'false');
-      this.svg.setAttribute('class', this.classCollection.join());
-    };
-    this.icon = undefined;
-    this.size = 'regular';
-    this.variant = undefined;
-    this.variantStyle = undefined;
-    this.spin = false;
-    this.classCollection = new ClassList(['mg-c-icon']);
-  }
-  validateIcon(newValue, oldValue) {
-    if (!iconList.includes(newValue))
-      throw new Error(`<mg-icon> prop "icon" must be one of: ${iconList.join(', ')}`);
-    else {
-      if (oldValue !== undefined)
-        this.classCollection.delete(`mg-c-icon--${oldValue}`);
-      this.classCollection.add(`mg-c-icon--${newValue}`);
-      this.renderIcon(newValue);
+    componentWillUpdate() {
+        this.svg.setAttribute('class', this.classCollection.join());
     }
-  }
-  validateSize(newValue, oldValue) {
-    if (!sizes.includes(newValue))
-      throw new Error(`<mg-icon> prop "size" must be one of: ${sizes.join(', ')}`);
-    else {
-      if (oldValue !== undefined)
-        this.classCollection.delete(`mg-c-icon--size-${oldValue}`);
-      this.classCollection.add(`mg-c-icon--size-${newValue}`);
+    static get is() { return "mg-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-icon.css"]
+        };
     }
-  }
-  validateVariant(newValue, oldValue) {
-    if (newValue) {
-      if (!variants.includes(newValue))
-        throw new Error(`<mg-icon> prop "variant" must be one of: ${variants.join(', ')}`);
-      else {
-        this.setDefaultVariantStyle();
-        if (oldValue !== undefined)
-          this.classCollection.delete(`mg-c-icon--variant-${oldValue}`);
-        this.classCollection.add(`mg-c-icon--variant-${newValue}`);
-      }
+    static get styleUrls() {
+        return {
+            "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-icon.css"]
+        };
     }
-  }
-  validateVariantStyle(newValue, oldValue) {
-    if (newValue) {
-      if (!variantStyles.includes(newValue))
-        throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles.join(', ')}`);
-      else {
-        if (oldValue !== undefined)
-          this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);
-        this.classCollection.add(`mg-c-icon--variant-style-${newValue}`);
-      }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to display."
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconSizeType",
+                    "resolved": "\"extra-large\" | \"large\" | \"medium\" | \"regular\" | \"small\"",
+                    "references": {
+                        "IconSizeType": {
+                            "location": "import",
+                            "path": "./mg-icon.conf",
+                            "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconSizeType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define icon size"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'regular'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconVariantType",
+                    "resolved": "\"app\" | \"danger\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "IconVariantType": {
+                            "location": "import",
+                            "path": "./mg-icon.conf",
+                            "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconVariantType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define icon variant color"
+                },
+                "attribute": "variant",
+                "reflect": false
+            },
+            "variantStyle": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "IconVariantStyleType",
+                    "resolved": "\"background\" | \"full\" | \"icon\"",
+                    "references": {
+                        "IconVariantStyleType": {
+                            "location": "import",
+                            "path": "./mg-icon.conf",
+                            "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconVariantStyleType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "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"
+                },
+                "attribute": "variant-style",
+                "reflect": false
+            },
+            "spin": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Make the icon spin"
+                },
+                "attribute": "spin",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
     }
-  }
-  handleSpin(newValue) {
-    if (newValue) {
-      this.classCollection.add('mg-c-icon--spin');
+    static get states() {
+        return {
+            "classCollection": {}
+        };
     }
-    else {
-      this.classCollection.delete('mg-c-icon--spin');
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "icon",
+                "methodName": "validateIcon"
+            }, {
+                "propName": "size",
+                "methodName": "validateSize"
+            }, {
+                "propName": "variant",
+                "methodName": "validateVariant"
+            }, {
+                "propName": "variantStyle",
+                "methodName": "validateVariantStyle"
+            }, {
+                "propName": "spin",
+                "methodName": "handleSpin"
+            }];
     }
-  }
-  /**
-   * Check if props are well configured on init
-   */
-  componentWillLoad() {
-    this.validateIcon(this.icon);
-    this.validateSize(this.size);
-    this.validateVariant(this.variant);
-    this.validateVariantStyle(this.variantStyle);
-    this.handleSpin(this.spin);
-    // render icon
-    this.renderIcon(this.icon);
-  }
-  /**
-   * update html when component trigger changes
-   */
-  componentWillUpdate() {
-    this.svg.setAttribute('class', this.classCollection.join());
-  }
-  static get is() { return "mg-icon"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-icon.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-icon.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Icon to display."
-        },
-        "attribute": "icon",
-        "reflect": false
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IconSizeType",
-          "resolved": "\"extra-large\" | \"large\" | \"medium\" | \"regular\" | \"small\"",
-          "references": {
-            "IconSizeType": {
-              "location": "import",
-              "path": "./mg-icon.conf",
-              "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconSizeType"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define icon size"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'regular'"
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IconVariantType",
-          "resolved": "\"app\" | \"danger\" | \"info\" | \"success\" | \"warning\"",
-          "references": {
-            "IconVariantType": {
-              "location": "import",
-              "path": "./mg-icon.conf",
-              "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconVariantType"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Define icon variant color"
-        },
-        "attribute": "variant",
-        "reflect": false
-      },
-      "variantStyle": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "IconVariantStyleType",
-          "resolved": "\"background\" | \"full\" | \"icon\"",
-          "references": {
-            "IconVariantStyleType": {
-              "location": "import",
-              "path": "./mg-icon.conf",
-              "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconVariantStyleType"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "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"
-        },
-        "attribute": "variant-style",
-        "reflect": false
-      },
-      "spin": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Make the icon spin"
-        },
-        "attribute": "spin",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "classCollection": {}
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "icon",
-        "methodName": "validateIcon"
-      }, {
-        "propName": "size",
-        "methodName": "validateSize"
-      }, {
-        "propName": "variant",
-        "methodName": "validateVariant"
-      }, {
-        "propName": "variantStyle",
-        "methodName": "validateVariantStyle"
-      }, {
-        "propName": "spin",
-        "methodName": "handleSpin"
-      }];
-  }
 }
 //# sourceMappingURL=mg-icon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"mg-icon.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-icon/mg-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAuD,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACrH,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,QAAQ,MAAM,kCAAkC,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAO9C,MAAM,OAAO,MAAM;;IAwFjB;;;OAGG;IACK,2BAAsB,GAAG,GAAS,EAAE;MAC1C,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS;QAAE,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACxE,CAAC,CAAC;IAEF;;;OAGG;IACK,eAAU,GAAG,IAAI,CAAC,EAAE;MAC1B,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;MAChD,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;MACxD,wBAAwB;MACxB,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;MAC7C,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;MAC5C,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC;IAC9D,CAAC,CAAC;;gBAlF2B,SAAS;;;gBAgDvB,KAAK;2BAakB,IAAI,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;;EAzElE,YAAY,CAAC,QAAwB,EAAE,QAAyB;IAC9D,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,yCAAyC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SAC7G;MACH,IAAI,QAAQ,KAAK,SAAS;QAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,cAAc,QAAQ,EAAE,CAAC,CAAC;MAClF,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,cAAc,QAAQ,EAAE,CAAC,CAAC;MACnD,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;KAC3B;EACH,CAAC;EAOD,YAAY,CAAC,QAAwB,EAAE,QAAyB;IAC9D,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,yCAAyC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SACvG;MACH,IAAI,QAAQ,KAAK,SAAS;QAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,mBAAmB,QAAQ,EAAE,CAAC,CAAC;MACvF,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,mBAAmB,QAAQ,EAAE,CAAC,CAAC;KACzD;EACH,CAAC;EAOD,eAAe,CAAC,QAA2B,EAAE,QAA4B;IACvE,IAAI,QAAQ,EAAE;MACZ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,4CAA4C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;WAChH;QACH,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,QAAQ,KAAK,SAAS;UAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,sBAAsB,QAAQ,EAAE,CAAC,CAAC;QAC1F,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,sBAAsB,QAAQ,EAAE,CAAC,CAAC;OAC5D;KACF;EACH,CAAC;EAWD,oBAAoB,CAAC,QAAgC,EAAE,QAAiC;IACtF,IAAI,QAAQ,EAAE;MACZ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,iDAAiD,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;WAC/H;QACH,IAAI,QAAQ,KAAK,SAAS;UAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,4BAA4B,QAAQ,EAAE,CAAC,CAAC;QAChG,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,4BAA4B,QAAQ,EAAE,CAAC,CAAC;OAClE;KACF;EACH,CAAC;EAOD,UAAU,CAAC,QAAwB;IACjC,IAAI,QAAQ,EAAE;MACZ,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;KAC7C;SAAM;MACL,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;KAChD;EACH,CAAC;EA4BD;;KAEG;EACH,iBAAiB;IACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC7C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3B,cAAc;IACd,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC7B,CAAC;EAED;;KAEG;EACH,mBAAmB;IACjB,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC;EAC9D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Watch, State, Element } from '@stencil/core';\nimport { sizes, variants, IconVariantType, IconSizeType, IconVariantStyleType, variantStyles } from './mg-icon.conf';\nimport { ClassList } from '../../../utils/components.utils';\nimport iconList from '@mgdis/img/dist/icons/index.json';\nimport { icons } from '../../../assets/icons';\n\n@Component({\n  tag: 'mg-icon',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-icon.css',\n  shadow: true,\n})\nexport class MgIcon {\n  private svg: SVGSVGElement;\n\n  /**\n   * Icon HTML Element\n   */\n  @Element() element: HTMLMgIconElement;\n\n  /**\n   * Icon to display.\n   */\n  @Prop() icon!: string;\n  @Watch('icon')\n  validateIcon(newValue: MgIcon['icon'], oldValue?: MgIcon['icon']): void {\n    if (!iconList.includes(newValue)) throw new Error(`<mg-icon> prop \"icon\" must be one of: ${iconList.join(', ')}`);\n    else {\n      if (oldValue !== undefined) this.classCollection.delete(`mg-c-icon--${oldValue}`);\n      this.classCollection.add(`mg-c-icon--${newValue}`);\n      this.renderIcon(newValue);\n    }\n  }\n\n  /**\n   * Define icon size\n   */\n  @Prop() size: IconSizeType = 'regular';\n  @Watch('size')\n  validateSize(newValue: MgIcon['size'], oldValue?: MgIcon['size']): void {\n    if (!sizes.includes(newValue)) throw new Error(`<mg-icon> prop \"size\" must be one of: ${sizes.join(', ')}`);\n    else {\n      if (oldValue !== undefined) this.classCollection.delete(`mg-c-icon--size-${oldValue}`);\n      this.classCollection.add(`mg-c-icon--size-${newValue}`);\n    }\n  }\n\n  /**\n   * Define icon variant color\n   */\n  @Prop() variant: IconVariantType;\n  @Watch('variant')\n  validateVariant(newValue: MgIcon['variant'], oldValue?: MgIcon['variant']): void {\n    if (newValue) {\n      if (!variants.includes(newValue)) throw new Error(`<mg-icon> prop \"variant\" must be one of: ${variants.join(', ')}`);\n      else {\n        this.setDefaultVariantStyle();\n        if (oldValue !== undefined) this.classCollection.delete(`mg-c-icon--variant-${oldValue}`);\n        this.classCollection.add(`mg-c-icon--variant-${newValue}`);\n      }\n    }\n  }\n\n  /**\n   * Define icon color variant style\n   * Add 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\n   */\n  @Prop({ mutable: true }) variantStyle: IconVariantStyleType;\n  @Watch('variantStyle')\n  validateVariantStyle(newValue: MgIcon['variantStyle'], oldValue?: MgIcon['variantStyle']): void {\n    if (newValue) {\n      if (!variantStyles.includes(newValue)) throw new Error(`<mg-icon> prop \"variantStyle\" must be one of: ${variantStyles.join(', ')}`);\n      else {\n        if (oldValue !== undefined) this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);\n        this.classCollection.add(`mg-c-icon--variant-style-${newValue}`);\n      }\n    }\n  }\n\n  /**\n   * Make the icon spin\n   */\n  @Prop() spin = false;\n  @Watch('spin')\n  handleSpin(newValue: MgIcon['spin']): void {\n    if (newValue) {\n      this.classCollection.add('mg-c-icon--spin');\n    } else {\n      this.classCollection.delete('mg-c-icon--spin');\n    }\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-icon']);\n\n  /**\n   * Method to set default varianStyle props\n   * needeed has stencil doesn't know that props is mutated when updated in prop watcher\n   */\n  private setDefaultVariantStyle = (): void => {\n    if (this.variantStyle === undefined) this.variantStyle = 'background';\n  };\n\n  /**\n   * Render icon in shadowroot\n   * @param icon - icon to render\n   */\n  private renderIcon = icon => {\n    this.element.shadowRoot.innerHTML = icons[icon];\n    this.svg = this.element.shadowRoot.querySelector('svg');\n    // update svg attributes\n    this.svg.setAttribute('aria-hidden', 'true');\n    this.svg.setAttribute('focusable', 'false');\n    this.svg.setAttribute('class', this.classCollection.join());\n  };\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateIcon(this.icon);\n    this.validateSize(this.size);\n    this.validateVariant(this.variant);\n    this.validateVariantStyle(this.variantStyle);\n    this.handleSpin(this.spin);\n    // render icon\n    this.renderIcon(this.icon);\n  }\n\n  /**\n   * update html when component trigger changes\n   */\n  componentWillUpdate() {\n    this.svg.setAttribute('class', this.classCollection.join());\n  }\n}\n"]}
+{"version":3,"file":"mg-icon.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-icon/mg-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAuD,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACrH,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,QAAQ,MAAM,kCAAkC,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAO9C,MAAM,OAAO,MAAM;;QAwFjB;;;WAGG;QACK,2BAAsB,GAAG,GAAS,EAAE;YAC1C,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS;gBAAE,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QACxE,CAAC,CAAC;QAEF;;;WAGG;QACK,eAAU,GAAG,IAAI,CAAC,EAAE;YAC1B,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;YAChD,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACxD,wBAAwB;YACxB,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;YAC7C,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;YAC5C,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC;QAC9D,CAAC,CAAC;;oBAlF2B,SAAS;;;oBAgDvB,KAAK;+BAakB,IAAI,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;;IAzElE,YAAY,CAAC,QAAwB,EAAE,QAAyB;QAC9D,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,yCAAyC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;aAC7G;YACH,IAAI,QAAQ,KAAK,SAAS;gBAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,cAAc,QAAQ,EAAE,CAAC,CAAC;YAClF,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,cAAc,QAAQ,EAAE,CAAC,CAAC;YACnD,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;SAC3B;IACH,CAAC;IAOD,YAAY,CAAC,QAAwB,EAAE,QAAyB;QAC9D,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,yCAAyC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;aACvG;YACH,IAAI,QAAQ,KAAK,SAAS;gBAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,mBAAmB,QAAQ,EAAE,CAAC,CAAC;YACvF,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,mBAAmB,QAAQ,EAAE,CAAC,CAAC;SACzD;IACH,CAAC;IAOD,eAAe,CAAC,QAA2B,EAAE,QAA4B;QACvE,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;gBAAE,MAAM,IAAI,KAAK,CAAC,4CAA4C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;iBAChH;gBACH,IAAI,CAAC,sBAAsB,EAAE,CAAC;gBAC9B,IAAI,QAAQ,KAAK,SAAS;oBAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,sBAAsB,QAAQ,EAAE,CAAC,CAAC;gBAC1F,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,sBAAsB,QAAQ,EAAE,CAAC,CAAC;aAC5D;SACF;IACH,CAAC;IAWD,oBAAoB,CAAC,QAAgC,EAAE,QAAiC;QACtF,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC;gBAAE,MAAM,IAAI,KAAK,CAAC,iDAAiD,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;iBAC/H;gBACH,IAAI,QAAQ,KAAK,SAAS;oBAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,4BAA4B,QAAQ,EAAE,CAAC,CAAC;gBAChG,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,4BAA4B,QAAQ,EAAE,CAAC,CAAC;aAClE;SACF;IACH,CAAC;IAOD,UAAU,CAAC,QAAwB;QACjC,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;SAC7C;aAAM;YACL,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;SAChD;IACH,CAAC;IA4BD;;OAEG;IACH,iBAAiB;QACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACnC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC7C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC3B,cAAc;QACd,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED;;OAEG;IACH,mBAAmB;QACjB,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC;IAC9D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Watch, State, Element } from '@stencil/core';\nimport { sizes, variants, IconVariantType, IconSizeType, IconVariantStyleType, variantStyles } from './mg-icon.conf';\nimport { ClassList } from '../../../utils/components.utils';\nimport iconList from '@mgdis/img/dist/icons/index.json';\nimport { icons } from '../../../assets/icons';\n\n@Component({\n  tag: 'mg-icon',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-icon.css',\n  shadow: true,\n})\nexport class MgIcon {\n  private svg: SVGSVGElement;\n\n  /**\n   * Icon HTML Element\n   */\n  @Element() element: HTMLMgIconElement;\n\n  /**\n   * Icon to display.\n   */\n  @Prop() icon!: string;\n  @Watch('icon')\n  validateIcon(newValue: MgIcon['icon'], oldValue?: MgIcon['icon']): void {\n    if (!iconList.includes(newValue)) throw new Error(`<mg-icon> prop \"icon\" must be one of: ${iconList.join(', ')}`);\n    else {\n      if (oldValue !== undefined) this.classCollection.delete(`mg-c-icon--${oldValue}`);\n      this.classCollection.add(`mg-c-icon--${newValue}`);\n      this.renderIcon(newValue);\n    }\n  }\n\n  /**\n   * Define icon size\n   */\n  @Prop() size: IconSizeType = 'regular';\n  @Watch('size')\n  validateSize(newValue: MgIcon['size'], oldValue?: MgIcon['size']): void {\n    if (!sizes.includes(newValue)) throw new Error(`<mg-icon> prop \"size\" must be one of: ${sizes.join(', ')}`);\n    else {\n      if (oldValue !== undefined) this.classCollection.delete(`mg-c-icon--size-${oldValue}`);\n      this.classCollection.add(`mg-c-icon--size-${newValue}`);\n    }\n  }\n\n  /**\n   * Define icon variant color\n   */\n  @Prop() variant: IconVariantType;\n  @Watch('variant')\n  validateVariant(newValue: MgIcon['variant'], oldValue?: MgIcon['variant']): void {\n    if (newValue) {\n      if (!variants.includes(newValue)) throw new Error(`<mg-icon> prop \"variant\" must be one of: ${variants.join(', ')}`);\n      else {\n        this.setDefaultVariantStyle();\n        if (oldValue !== undefined) this.classCollection.delete(`mg-c-icon--variant-${oldValue}`);\n        this.classCollection.add(`mg-c-icon--variant-${newValue}`);\n      }\n    }\n  }\n\n  /**\n   * Define icon color variant style\n   * Add 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\n   */\n  @Prop({ mutable: true }) variantStyle: IconVariantStyleType;\n  @Watch('variantStyle')\n  validateVariantStyle(newValue: MgIcon['variantStyle'], oldValue?: MgIcon['variantStyle']): void {\n    if (newValue) {\n      if (!variantStyles.includes(newValue)) throw new Error(`<mg-icon> prop \"variantStyle\" must be one of: ${variantStyles.join(', ')}`);\n      else {\n        if (oldValue !== undefined) this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);\n        this.classCollection.add(`mg-c-icon--variant-style-${newValue}`);\n      }\n    }\n  }\n\n  /**\n   * Make the icon spin\n   */\n  @Prop() spin = false;\n  @Watch('spin')\n  handleSpin(newValue: MgIcon['spin']): void {\n    if (newValue) {\n      this.classCollection.add('mg-c-icon--spin');\n    } else {\n      this.classCollection.delete('mg-c-icon--spin');\n    }\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-icon']);\n\n  /**\n   * Method to set default varianStyle props\n   * needeed has stencil doesn't know that props is mutated when updated in prop watcher\n   */\n  private setDefaultVariantStyle = (): void => {\n    if (this.variantStyle === undefined) this.variantStyle = 'background';\n  };\n\n  /**\n   * Render icon in shadowroot\n   * @param icon - icon to render\n   */\n  private renderIcon = icon => {\n    this.element.shadowRoot.innerHTML = icons[icon];\n    this.svg = this.element.shadowRoot.querySelector('svg');\n    // update svg attributes\n    this.svg.setAttribute('aria-hidden', 'true');\n    this.svg.setAttribute('focusable', 'false');\n    this.svg.setAttribute('class', this.classCollection.join());\n  };\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateIcon(this.icon);\n    this.validateSize(this.size);\n    this.validateVariant(this.variant);\n    this.validateVariantStyle(this.variantStyle);\n    this.handleSpin(this.spin);\n    // render icon\n    this.renderIcon(this.icon);\n  }\n\n  /**\n   * update html when component trigger changes\n   */\n  componentWillUpdate() {\n    this.svg.setAttribute('class', this.classCollection.join());\n  }\n}\n"]}