@mgdis/mg-components 5.16.0 → 5.17.0

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

@@ -0,0 +1,11 @@
+import { createPage } from "../../../../utils/stencil.e2e.test.utils";
+describe('mg-divider', () => {
+  test('Should render', async () => {
+    const sizes = ['regular', 'full'];
+    const html = sizes.map(size => `<mg-divider size="${size}"></mg-divider>`).join('');
+    const page = await createPage(html);
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+});
+//# sourceMappingURL=mg-divider.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-divider.e2e.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-divider/test/mg-divider.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAEtE,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAC1B,IAAI,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC/B,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAClC,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,qBAAqB,IAAI,iBAAiB,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACpF,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,IAAI,CAAC,CAAC;IAEpC,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;EAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { createPage } from '../../../../utils/stencil.e2e.test.utils';\n\ndescribe('mg-divider', () => {\n  test('Should render', async () => {\n    const sizes = ['regular', 'full'];\n    const html = sizes.map(size => `<mg-divider size=\"${size}\"></mg-divider>`).join('');\n    const page = await createPage(html);\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n});\n"]}

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

@@ -0,0 +1,14 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgDivider } from "../mg-divider";
+const getPage = args => newSpecPage({
+  components: [MgDivider],
+  template: () => h("mg-divider", Object.assign({}, args)),
+});
+describe('mg-divider', () => {
+  test.each([undefined, 'regular', 'full'])('size %s', async (size) => {
+    const { root } = await getPage({ size });
+    expect(root).toMatchSnapshot();
+  });
+});
+//# sourceMappingURL=mg-divider.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-divider.spec.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-divider/test/mg-divider.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CACrB,WAAW,CAAC;EACV,UAAU,EAAE,CAAC,SAAS,CAAC;EACvB,QAAQ,EAAE,GAAG,EAAE,CAAC,kCAAgB,IAAI,EAAe;CACpD,CAAC,CAAC;AAEL,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAC1B,IAAI,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,EAAC,IAAI,EAAC,EAAE;IAChE,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IACzC,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgDivider } from '../mg-divider';\n\nconst getPage = args =>\n  newSpecPage({\n    components: [MgDivider],\n    template: () => <mg-divider {...args}></mg-divider>,\n  });\n\ndescribe('mg-divider', () => {\n  test.each([undefined, 'regular', 'full'])('size %s', async size => {\n    const { root } = await getPage({ size });\n    expect(root).toMatchSnapshot();\n  });\n});\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-icon.conf.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-icon/mg-icon.conf.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAU,CAAC;AAOrF;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAU,CAAC;AAOjF;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,MAAM,EAAE,YAAY,EAAE,MAAM,CAAU,CAAC","sourcesContent":["/**\n * List of all possibles sizes\n */\nexport const sizes = ['small', 'regular', 'medium', 'large', 'extra-large'] as const;\n\n/**\n * Icon Size from sizes\n */\nexport type IconSizeType = (typeof sizes)[number];\n\n/**\n * List of all possibles variants\n */\nexport const variants = ['success', 'warning', 'danger', 'info', 'app'] as const;\n\n/**\n * Variant type from variants\n */\nexport type IconVariantType = (typeof variants)[number];\n\n/**\n * List of all possibles variants styles\n */\nexport const variantStyles = ['icon', 'background', 'full'] as const;\n\n/**\n * Variant style type from variant style\n */\nexport type IconVariantStyleType = (typeof variantStyles)[number];\n"]}

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

@@ -1,7 +1,7 @@
-import { sizes, variants, variantStyles } from './mg-icon.conf';
-import { ClassList } from '../../../utils/components.utils';
-import iconList from '@mgdis/img/dist/icons/index.json';
-import { icons } from '../../../assets/icons';
+import { sizes, variants, variantStyles } from "./mg-icon.conf";
+import { ClassList } from "../../../utils/components.utils";
+import iconList from "@mgdis/img/dist/icons/index.json";
+import { icons } from "../../../assets/icons";
 export class MgIcon {
   constructor() {
     /**
@@ -141,7 +141,8 @@ export class MgIcon {
           "references": {
             "IconSizeType": {
               "location": "import",
-              "path": "./mg-icon.conf"
+              "path": "./mg-icon.conf",
+              "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconSizeType"
             }
           }
         },
@@ -164,7 +165,8 @@ export class MgIcon {
           "references": {
             "IconVariantType": {
               "location": "import",
-              "path": "./mg-icon.conf"
+              "path": "./mg-icon.conf",
+              "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconVariantType"
             }
           }
         },
@@ -186,7 +188,8 @@ export class MgIcon {
           "references": {
             "IconVariantStyleType": {
               "location": "import",
-              "path": "./mg-icon.conf"
+              "path": "./mg-icon.conf",
+              "id": "src/components/atoms/mg-icon/mg-icon.conf.ts::IconVariantStyleType"
             }
           }
         },
@@ -244,3 +247,4 @@ export class MgIcon {
       }];
   }
 }
+//# sourceMappingURL=mg-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-icon.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-icon/mg-icon.tsx"],"names":[],"mappings":"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","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: 'mg-icon.scss',\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-icon--${oldValue}`);\n      this.classCollection.add(`mg-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-icon--size-${oldValue}`);\n      this.classCollection.add(`mg-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 (Boolean(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-icon--variant-${oldValue}`);\n        this.classCollection.add(`mg-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 (Boolean(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-icon--variant-style-${oldValue}`);\n        this.classCollection.add(`mg-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-icon--spin');\n      this.classCollection.add('mg-a11y-animation');\n    } else {\n      this.classCollection.delete('mg-icon--spin');\n      this.classCollection.delete('mg-a11y-animation');\n    }\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-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"]}

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

@@ -0,0 +1,55 @@
+import { createPage } from "../../../../utils/stencil.e2e.test.utils";
+import { renderAttributes } from "../../../../utils/e2e.test.utils";
+import { sizes, variantStyles, variants } from "../mg-icon.conf";
+import icons from "@mgdis/img/dist/icons/index.json";
+const getIconWidth = (size) => {
+  switch (size) {
+    case 'small':
+      return 12;
+    case 'medium':
+      return 20;
+    case 'large':
+      return 24;
+    case 'extra-large':
+      return 32;
+    default:
+      return 16;
+  }
+};
+const style = `<style>[variant='app']{ --mg-color-app-h: 250; }</style>`;
+describe('mg-icon', () => {
+  test('renders icons', async () => {
+    const textWithoutDash = text => text.split('-').join('');
+    const html = icons
+      .sort((a, b) => textWithoutDash(a).localeCompare(textWithoutDash(b)))
+      .map(icon => `<mg-icon icon="${icon}"></mg-icon>`)
+      .join('');
+    const page = await createPage(html);
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  test('renders sizes', async () => {
+    const html = sizes.map(size => `<mg-icon ${renderAttributes({ icon: 'thumb-up', size })}></mg-icon>`).join('');
+    const page = await createPage(html);
+    await page.setViewport({ width: 120, height: getIconWidth('extra-large') });
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  test.each(variantStyles)('renders variants, with variantStyle %s', async (variantStyle) => {
+    let width = 0;
+    const variantStyleIsIcon = variantStyle !== 'icon';
+    const html = variants
+      .map(variant => sizes
+      .map(size => {
+      width += variantStyleIsIcon ? getIconWidth(size) * 2 : getIconWidth(size);
+      return `<mg-icon ${renderAttributes({ icon: 'check-circle', variant: variant, variantStyle, size })}></mg-icon>`;
+    })
+      .join(''))
+      .join('');
+    const page = await createPage(html + style);
+    await page.setViewport({ width, height: variantStyleIsIcon ? getIconWidth('extra-large') * 2 : getIconWidth('extra-large') });
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+});
+//# sourceMappingURL=mg-icon.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-icon.e2e.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-icon/test/mg-icon.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,KAAK,MAAM,kCAAkC,CAAC;AAErD,MAAM,YAAY,GAAG,CAAC,IAAoB,EAAU,EAAE;EACpD,QAAQ,IAAI,EAAE;IACZ,KAAK,OAAO;MACV,OAAO,EAAE,CAAC;IACZ,KAAK,QAAQ;MACX,OAAO,EAAE,CAAC;IACZ,KAAK,OAAO;MACV,OAAO,EAAE,CAAC;IACZ,KAAK,aAAa;MAChB,OAAO,EAAE,CAAC;IACZ;MACE,OAAO,EAAE,CAAC;GACb;AACH,CAAC,CAAC;AAEF,MAAM,KAAK,GAAG,0DAA0D,CAAC;AAEzE,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;EACvB,IAAI,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC/B,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACzD,MAAM,IAAI,GAAG,KAAK;OACf,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;OACpE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,kBAAkB,IAAI,cAAc,CAAC;OACjD,IAAI,CAAC,EAAE,CAAC,CAAC;IACZ,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,IAAI,CAAC,CAAC;IAEpC,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;EAC5C,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC/B,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,gBAAgB,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC/G,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,IAAI,CAAC,CAAC;IAEpC,MAAM,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;IAE5E,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;EAC5C,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,wCAAwC,EAAE,KAAK,EAAC,YAAY,EAAC,EAAE;IACtF,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,MAAM,kBAAkB,GAAG,YAAY,KAAK,MAAM,CAAC;IAEnD,MAAM,IAAI,GAAG,QAAQ;OAClB,GAAG,CAAC,OAAO,CAAC,EAAE,CACb,KAAK;OACF,GAAG,CAAC,IAAI,CAAC,EAAE;MACV,KAAK,IAAI,kBAAkB,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;MAC1E,OAAO,YAAY,gBAAgB,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,aAAa,CAAC;IACnH,CAAC,CAAC;OACD,IAAI,CAAC,EAAE,CAAC,CACZ;OACA,IAAI,CAAC,EAAE,CAAC,CAAC;IAEZ,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC;IAE5C,MAAM,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAC,YAAY,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;IAE9H,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;EAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { createPage } from '../../../../utils/stencil.e2e.test.utils';\nimport { renderAttributes } from '../../../../utils/e2e.test.utils';\nimport { MgIcon } from '../mg-icon';\nimport { sizes, variantStyles, variants } from '../mg-icon.conf';\nimport icons from '@mgdis/img/dist/icons/index.json';\n\nconst getIconWidth = (size: MgIcon['size']): number => {\n  switch (size) {\n    case 'small':\n      return 12;\n    case 'medium':\n      return 20;\n    case 'large':\n      return 24;\n    case 'extra-large':\n      return 32;\n    default:\n      return 16;\n  }\n};\n\nconst style = `<style>[variant='app']{ --mg-color-app-h: 250; }</style>`;\n\ndescribe('mg-icon', () => {\n  test('renders icons', async () => {\n    const textWithoutDash = text => text.split('-').join('');\n    const html = icons\n      .sort((a, b) => textWithoutDash(a).localeCompare(textWithoutDash(b)))\n      .map(icon => `<mg-icon icon=\"${icon}\"></mg-icon>`)\n      .join('');\n    const page = await createPage(html);\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  test('renders sizes', async () => {\n    const html = sizes.map(size => `<mg-icon ${renderAttributes({ icon: 'thumb-up', size })}></mg-icon>`).join('');\n    const page = await createPage(html);\n\n    await page.setViewport({ width: 120, height: getIconWidth('extra-large') });\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  test.each(variantStyles)('renders variants, with variantStyle %s', async variantStyle => {\n    let width = 0;\n    const variantStyleIsIcon = variantStyle !== 'icon';\n\n    const html = variants\n      .map(variant =>\n        sizes\n          .map(size => {\n            width += variantStyleIsIcon ? getIconWidth(size) * 2 : getIconWidth(size);\n            return `<mg-icon ${renderAttributes({ icon: 'check-circle', variant: variant, variantStyle, size })}></mg-icon>`;\n          })\n          .join(''),\n      )\n      .join('');\n\n    const page = await createPage(html + style);\n\n    await page.setViewport({ width, height: variantStyleIsIcon ? getIconWidth('extra-large') * 2 : getIconWidth('extra-large') });\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n});\n"]}

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

@@ -0,0 +1,84 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgIcon } from "../mg-icon";
+import { sizes, variantStyles, variants } from "../mg-icon.conf";
+import iconList from "@mgdis/img/dist/icons/index.json";
+const getPage = args => newSpecPage({
+  components: [MgIcon],
+  template: () => h("mg-icon", Object.assign({}, args)),
+});
+describe('mg-icon', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  describe.each(iconList)('Should render %s icon', icon => {
+    test.each(sizes)('in %s size', async (size) => {
+      const { root } = await getPage({ icon, size });
+      expect(root).toMatchSnapshot();
+    });
+    test.each(variants)('using %s variant', async (variant) => {
+      const { root } = await getPage({ icon, variant });
+      expect(root).toMatchSnapshot();
+    });
+    test.each(variants.flatMap(variant => variantStyles.map(variantStyle => ({ variant, variantStyle }))))('using %s variant', async ({ variant, variantStyle }) => {
+      const { root } = await getPage({ icon, variant, variantStyle });
+      expect(root).toMatchSnapshot();
+    });
+  });
+  test('Should render a spin icon', async () => {
+    const { root } = await getPage({ icon: 'check-circle', spin: true });
+    expect(root).toMatchSnapshot();
+  });
+  test.each([
+    { initialProps: { icon: 'chevron-up' }, initialClass: ['.mg-icon--chevron-up'], nextProps: { icon: 'chevron-down' }, nextClass: ['.mg-icon--chevron-down'] },
+    { initialProps: { icon: 'chevron-up' }, initialClass: ['.mg-icon--size-regular'], nextProps: { size: 'large' }, nextClass: ['.mg-icon--size-large'] },
+    {
+      initialProps: { icon: 'chevron-up', variant: 'success', variantStyle: 'icon' },
+      initialClass: ['.mg-icon--variant-success', '.mg-icon--variant-style-icon'],
+      nextProps: { variant: 'danger', variantStyle: 'background' },
+      nextClass: ['.mg-icon--variant-danger', '.mg-icon--variant-style-background'],
+    },
+  ])('Should replace classes on icon changes', async ({ initialProps, initialClass, nextProps, nextClass }) => {
+    const page = await getPage(initialProps);
+    const element = page.doc.querySelector('mg-icon');
+    // validate inital state
+    initialClass.forEach(className => {
+      expect(element.shadowRoot.querySelector(className)).not.toBeNull();
+    });
+    nextClass.forEach(className => {
+      expect(element.shadowRoot.querySelector(className)).toBeNull();
+    });
+    // update props
+    Object.keys(nextProps).forEach(key => {
+      element[key] = nextProps[key];
+    });
+    await page.waitForChanges();
+    // validate next state
+    initialClass.forEach(className => {
+      expect(element.shadowRoot.querySelector(className)).toBeNull();
+    });
+    nextClass.forEach(className => {
+      expect(element.shadowRoot.querySelector(className)).not.toBeNull();
+    });
+    expect(page.root).toMatchSnapshot();
+  });
+  describe('errors', () => {
+    const iconError = ['', 'blu', undefined].map(icon => ({ props: { icon }, error: `<mg-icon> prop "icon" must be one of: ${iconList.join(', ')}` }));
+    const sizeError = ['', 'blu'].map(size => ({ props: { icon: 'check-circle', size }, error: `<mg-icon> prop "size" must be one of: ${sizes.join(', ')}` }));
+    const variantError = { props: { icon: 'check-circle', variant: 'blu' }, error: `<mg-icon> prop "variant" must be one of: ${variants.join(', ')}` };
+    const variantStyleError = {
+      props: { icon: 'check-circle', variantStyle: 'blu' },
+      error: `<mg-icon> prop "variantStyle" must be one of: ${variantStyles.join(', ')}`,
+    };
+    test.each([...iconError, ...sizeError, variantError, variantStyleError])('Should throw error with invalid icon property: %s', async ({ props, error }) => {
+      expect.assertions(1);
+      try {
+        await getPage(props);
+      }
+      catch (err) {
+        expect(err.message).toMatch(error);
+      }
+    });
+  });
+});
+//# sourceMappingURL=mg-icon.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-icon.spec.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-icon/test/mg-icon.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,QAAQ,MAAM,kCAAkC,CAAC;AAExD,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CACrB,WAAW,CAAC;EACV,UAAU,EAAE,CAAC,MAAM,CAAC;EACpB,QAAQ,EAAE,GAAG,EAAE,CAAC,+BAAa,IAAI,EAAY;CAC9C,CAAC,CAAC;AAEL,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;EACvB,SAAS,CAAC,GAAG,EAAE;IACb,IAAI,CAAC,aAAa,EAAE,CAAC;EACvB,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,uBAAuB,EAAE,IAAI,CAAC,EAAE;IACtD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,YAAY,EAAE,KAAK,EAAC,IAAI,EAAC,EAAE;MAC1C,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;MAC/C,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,kBAAkB,EAAE,KAAK,EAAC,OAAO,EAAC,EAAE;MACtD,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;MAClD,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,kBAAkB,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE;MAC7J,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,CAAC;MAChE,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;IAC3C,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IACrE,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACjC,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,IAAI,CAAC;IACR,EAAE,YAAY,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,YAAY,EAAE,CAAC,sBAAsB,CAAC,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,SAAS,EAAE,CAAC,wBAAwB,CAAC,EAAE;IAC5J,EAAE,YAAY,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,YAAY,EAAE,CAAC,wBAAwB,CAAC,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,SAAS,EAAE,CAAC,sBAAsB,CAAC,EAAE;IACrJ;MACE,YAAY,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE;MAC9E,YAAY,EAAE,CAAC,2BAA2B,EAAE,8BAA8B,CAAC;MAC3E,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE;MAC5D,SAAS,EAAE,CAAC,0BAA0B,EAAE,oCAAoC,CAAC;KAC9E;GACF,CAAC,CAAC,wCAAwC,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE;IAC1G,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,YAAY,CAAC,CAAC;IACzC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IAElD,wBAAwB;IACxB,YAAY,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;MAC/B,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IACrE,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;MAC5B,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,eAAe;IACf,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;MACnC,OAAO,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC;IAChC,CAAC,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,sBAAsB;IACtB,YAAY,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;MAC/B,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;MAC5B,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IACrE,CAAC,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACtC,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,MAAM,SAAS,GAAG,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,yCAAyC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;IACnJ,MAAM,SAAS,GAAG,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,yCAAyC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;IAC3J,MAAM,YAAY,GAAG,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,4CAA4C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;IACnJ,MAAM,iBAAiB,GAAG;MACxB,KAAK,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,YAAY,EAAE,KAAK,EAAE;MACpD,KAAK,EAAE,iDAAiD,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;KACnF,CAAC;IAEF,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS,EAAE,GAAG,SAAS,EAAE,YAAY,EAAE,iBAAiB,CAAC,CAAC,CAAC,mDAAmD,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;MACvJ,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;MACrB,IAAI;QACF,MAAM,OAAO,CAAC,KAAK,CAAC,CAAC;OACtB;MAAC,OAAO,GAAG,EAAE;QACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;OACpC;IACH,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgIcon } from '../mg-icon';\nimport { sizes, variantStyles, variants } from '../mg-icon.conf';\nimport iconList from '@mgdis/img/dist/icons/index.json';\n\nconst getPage = args =>\n  newSpecPage({\n    components: [MgIcon],\n    template: () => <mg-icon {...args}></mg-icon>,\n  });\n\ndescribe('mg-icon', () => {\n  afterEach(() => {\n    jest.clearAllMocks();\n  });\n\n  describe.each(iconList)('Should render %s icon', icon => {\n    test.each(sizes)('in %s size', async size => {\n      const { root } = await getPage({ icon, size });\n      expect(root).toMatchSnapshot();\n    });\n\n    test.each(variants)('using %s variant', async variant => {\n      const { root } = await getPage({ icon, variant });\n      expect(root).toMatchSnapshot();\n    });\n\n    test.each(variants.flatMap(variant => variantStyles.map(variantStyle => ({ variant, variantStyle }))))('using %s variant', async ({ variant, variantStyle }) => {\n      const { root } = await getPage({ icon, variant, variantStyle });\n      expect(root).toMatchSnapshot();\n    });\n  });\n\n  test('Should render a spin icon', async () => {\n    const { root } = await getPage({ icon: 'check-circle', spin: true });\n    expect(root).toMatchSnapshot();\n  });\n\n  test.each([\n    { initialProps: { icon: 'chevron-up' }, initialClass: ['.mg-icon--chevron-up'], nextProps: { icon: 'chevron-down' }, nextClass: ['.mg-icon--chevron-down'] },\n    { initialProps: { icon: 'chevron-up' }, initialClass: ['.mg-icon--size-regular'], nextProps: { size: 'large' }, nextClass: ['.mg-icon--size-large'] },\n    {\n      initialProps: { icon: 'chevron-up', variant: 'success', variantStyle: 'icon' },\n      initialClass: ['.mg-icon--variant-success', '.mg-icon--variant-style-icon'],\n      nextProps: { variant: 'danger', variantStyle: 'background' },\n      nextClass: ['.mg-icon--variant-danger', '.mg-icon--variant-style-background'],\n    },\n  ])('Should replace classes on icon changes', async ({ initialProps, initialClass, nextProps, nextClass }) => {\n    const page = await getPage(initialProps);\n    const element = page.doc.querySelector('mg-icon');\n\n    // validate inital state\n    initialClass.forEach(className => {\n      expect(element.shadowRoot.querySelector(className)).not.toBeNull();\n    });\n\n    nextClass.forEach(className => {\n      expect(element.shadowRoot.querySelector(className)).toBeNull();\n    });\n\n    // update props\n    Object.keys(nextProps).forEach(key => {\n      element[key] = nextProps[key];\n    });\n\n    await page.waitForChanges();\n\n    // validate next state\n    initialClass.forEach(className => {\n      expect(element.shadowRoot.querySelector(className)).toBeNull();\n    });\n\n    nextClass.forEach(className => {\n      expect(element.shadowRoot.querySelector(className)).not.toBeNull();\n    });\n    expect(page.root).toMatchSnapshot();\n  });\n\n  describe('errors', () => {\n    const iconError = ['', 'blu', undefined].map(icon => ({ props: { icon }, error: `<mg-icon> prop \"icon\" must be one of: ${iconList.join(', ')}` }));\n    const sizeError = ['', 'blu'].map(size => ({ props: { icon: 'check-circle', size }, error: `<mg-icon> prop \"size\" must be one of: ${sizes.join(', ')}` }));\n    const variantError = { props: { icon: 'check-circle', variant: 'blu' }, error: `<mg-icon> prop \"variant\" must be one of: ${variants.join(', ')}` };\n    const variantStyleError = {\n      props: { icon: 'check-circle', variantStyle: 'blu' },\n      error: `<mg-icon> prop \"variantStyle\" must be one of: ${variantStyles.join(', ')}`,\n    };\n\n    test.each([...iconError, ...sizeError, variantError, variantStyleError])('Should throw error with invalid icon property: %s', async ({ props, error }) => {\n      expect.assertions(1);\n      try {\n        await getPage(props);\n      } catch (err) {\n        expect(err.message).toMatch(error);\n      }\n    });\n  });\n});\n"]}

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class MgInputTitle {
   constructor() {
     this.identifier = undefined;
@@ -116,3 +116,4 @@ export class MgInputTitle {
       }];
   }
 }
+//# sourceMappingURL=mg-input-title.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-input-title.js","sourceRoot":"","sources":["../../../../src/components/atoms/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;AAOjE,MAAM,OAAO,YAAY;;;;oBAoBJ,KAAK;mBASL,OAAO;;EAvB1B,kBAAkB,CAAC,QAAgB;IACjC,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;MAC1D,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;KACpE;EACH,CAAC;EAYD,gBAAgB,CAAC,QAAkC;IACjD,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;EAC/C,CAAC;EAOD;;iBAEe;EAEf;;KAEG;EACH,iBAAiB;IACf,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACzC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EACvC,CAAC;EAED;;;KAGG;EACH,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;IAC7B,4BAA4B;IAC5B,OAAO,CACL,EAAC,OAAO,IAAC,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU;MAClF,eAAa;MACZ,IAAI,CAAC,QAAQ,IAAI,CAChB,YAAM,KAAK,EAAC,0BAA0B;;QAC9B,YAAM,KAAK,EAAC,aAAa,QAAS,CACnC,CACR,CACO,CACX,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'mg-input-title',\n  styleUrl: 'mg-input-title.scss',\n  scoped: true,\n})\nexport class MgInputTitle {\n  /**\n   * Label input id\n   */\n  @Prop() identifier!: string;\n  @Watch('identifier')\n  validateIdentifier(newValue: string): void {\n    if (typeof newValue !== 'string' || newValue.trim() === '') {\n      throw new Error('<mg-input-title> prop \"identifier\" is required.');\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   * 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.tagName;\n    // \\u00A0 represent a &nbsp;\n    return (\n      <TagName class=\"mg-input-title\" htmlFor={this.isLegend ? undefined : this.identifier}>\n        <slot></slot>\n        {this.required && (\n          <span class=\"mg-input-title__required\">\n            &nbsp;<span class=\"is-asterisk\">*</span>\n          </span>\n        )}\n      </TagName>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,18 @@
+import { createPage } from "../../../../utils/stencil.e2e.test.utils";
+describe('mg-input-title', () => {
+  test('Should render', async () => {
+    const props = [
+      { isLegend: false, required: false },
+      { isLegend: false, required: true },
+      { isLegend: true, required: false },
+      { isLegend: true, required: true },
+    ];
+    const html = props
+      .map(({ isLegend, required }) => `<div><mg-input-title identifier="identifier" is-legend="${isLegend}" required=${required}>Label</mg-input-title></div>`)
+      .join('');
+    const page = await createPage(html, { width: 50, height: 75 });
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+});
+//# sourceMappingURL=mg-input-title.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-input-title.e2e.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-input-title/test/mg-input-title.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAEtE,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,IAAI,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC/B,MAAM,KAAK,GAAG;MACZ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE;MACpC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE;MACnC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;MACnC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE;KACnC,CAAC;IACF,MAAM,IAAI,GAAG,KAAK;OACf,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,2DAA2D,QAAQ,cAAc,QAAQ,+BAA+B,CAAC;OACzJ,IAAI,CAAC,EAAE,CAAC,CAAC;IACZ,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAE/D,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;EAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { createPage } from '../../../../utils/stencil.e2e.test.utils';\n\ndescribe('mg-input-title', () => {\n  test('Should render', async () => {\n    const props = [\n      { isLegend: false, required: false },\n      { isLegend: false, required: true },\n      { isLegend: true, required: false },\n      { isLegend: true, required: true },\n    ];\n    const html = props\n      .map(({ isLegend, required }) => `<div><mg-input-title identifier=\"identifier\" is-legend=\"${isLegend}\" required=${required}>Label</mg-input-title></div>`)\n      .join('');\n    const page = await createPage(html, { width: 50, height: 75 });\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n});\n"]}

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

@@ -0,0 +1,27 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgInputTitle } from "../mg-input-title";
+const getPage = args => newSpecPage({
+  components: [MgInputTitle],
+  template: () => h("mg-input-title", Object.assign({}, args), "mg-input-title"),
+});
+describe('mg-input-title', () => {
+  test.each([
+    { required: false, identifier: 'identifier' },
+    { required: true, identifier: 'identifier' },
+    { isLegend: true, identifier: 'identifier' },
+  ])('Should render label with args %s', async (args) => {
+    const { root } = await getPage(args);
+    expect(root).toMatchSnapshot();
+  });
+  test.each(['', ' ', undefined])('Should throw error, case invalid identifier prop', async (identifier) => {
+    expect.assertions(1);
+    try {
+      await getPage({ identifier });
+    }
+    catch (err) {
+      expect(err.message).toContain('<mg-input-title> prop "identifier" is required.');
+    }
+  });
+});
+//# sourceMappingURL=mg-input-title.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-input-title.spec.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-input-title/test/mg-input-title.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CACrB,WAAW,CAAC;EACV,UAAU,EAAE,CAAC,YAAY,CAAC;EAC1B,QAAQ,EAAE,GAAG,EAAE,CAAC,sCAAoB,IAAI,oBAAiC;CAC1E,CAAC,CAAC;AAEL,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,IAAI,CAAC,IAAI,CAAC;IACR,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE;IAC7C,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE;IAC5C,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE;GAC7C,CAAC,CAAC,kCAAkC,EAAE,KAAK,EAAC,IAAI,EAAC,EAAE;IAClD,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACjC,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,kDAAkD,EAAE,KAAK,EAAC,UAAU,EAAC,EAAE;IACrG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,IAAI;MACF,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;KAC/B;IAAC,OAAO,GAAG,EAAE;MACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,iDAAiD,CAAC,CAAC;KAClF;EACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgInputTitle } from '../mg-input-title';\n\nconst getPage = args =>\n  newSpecPage({\n    components: [MgInputTitle],\n    template: () => <mg-input-title {...args}>mg-input-title</mg-input-title>,\n  });\n\ndescribe('mg-input-title', () => {\n  test.each([\n    { required: false, identifier: 'identifier' },\n    { required: true, identifier: 'identifier' },\n    { isLegend: true, identifier: 'identifier' },\n  ])('Should render label with args %s', async args => {\n    const { root } = await getPage(args);\n    expect(root).toMatchSnapshot();\n  });\n\n  test.each(['', ' ', undefined])('Should throw error, case invalid identifier prop', async identifier => {\n    expect.assertions(1);\n    try {\n      await getPage({ identifier });\n    } catch (err) {\n      expect(err.message).toContain('<mg-input-title> prop \"identifier\" is required.');\n    }\n  });\n});\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-tag.conf.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-tag/mg-tag.conf.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAC","sourcesContent":["/**\n * List of all possibles variants\n */\nexport const variants = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'] as const;\n\n/**\n * TagVariantType type from tag variants\n */\nexport type TagVariantType = (typeof variants)[number];\n"]}

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

@@ -1,6 +1,6 @@
-import { h } from '@stencil/core';
-import { variants } from './mg-tag.conf';
-import { ClassList } from '../../../utils/components.utils';
+import { h } from "@stencil/core";
+import { variants } from "./mg-tag.conf";
+import { ClassList } from "../../../utils/components.utils";
 export class MgTag {
   constructor() {
     /************
@@ -94,7 +94,8 @@ export class MgTag {
           "references": {
             "TagVariantType": {
               "location": "import",
-              "path": "./mg-tag.conf"
+              "path": "./mg-tag.conf",
+              "id": "src/components/atoms/mg-tag/mg-tag.conf.ts::TagVariantType"
             }
           }
         },
@@ -163,3 +164,4 @@ export class MgTag {
       }];
   }
 }
+//# sourceMappingURL=mg-tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-tag.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-tag/mg-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAkB,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAM5D,MAAM,OAAO,KAAK;;IAChB;;kBAEc;IAEd,UAAU;IACO,iBAAY,GAAG,iBAAiB,CAAC;IACjC,cAAS,GAAG,cAAc,CAAC;mBAcV,QAAQ,CAAC,CAAC,CAAC;;;2BAwCP,IAAI,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC;;EAtC/D,eAAe,CAAC,QAA0B,EAAE,QAA2B;IACrE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,2CAA2C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACpF;SAAM;MACL,IAAI,QAAQ,KAAK,SAAS,EAAE;QAC1B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,WAAW,QAAQ,EAAE,CAAC,CAAC;OACpD;MACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,WAAW,QAAQ,EAAE,CAAC,CAAC;KACjD;EACH,CAAC;EAOD,eAAe,CAAC,QAA0B;IACxC,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;EACtD,CAAC;EAOD,YAAY,CAAC,QAAuB;IAClC,mBAAmB;IACnB,IAAI,QAAQ,IAAI,IAAI,CAAC,OAAO;MAAE,MAAM,IAAI,KAAK,CAAC,2DAA2D,CAAC,CAAC;IAE3G,cAAc;IACd,IAAI,QAAQ;MAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;;MAClD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;EACnD,CAAC;EAOD;;iBAEe;EAEf;;;KAGG;EACK,mBAAmB,CAAC,WAAmB;IAC7C,IAAI,OAAO,WAAW,KAAK,QAAQ,IAAI,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE;MAAE,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC;EAClI,CAAC;EAED;;iBAEe;EAEf;;KAEG;EACH,iBAAiB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;EACrD,CAAC;EAED;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,YAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;MACtC,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch, Element } from '@stencil/core';\nimport { TagVariantType, variants } from './mg-tag.conf';\nimport { ClassList } from '../../../utils/components.utils';\n@Component({\n  tag: 'mg-tag',\n  styleUrl: 'mg-tag.scss',\n  shadow: true,\n})\nexport class MgTag {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classOutline = 'mg-tag--outline';\n  private readonly classSoft = 'mg-tag--soft';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgTagElement;\n\n  /**\n   * Define tag variant\n   */\n  @Prop() variant: TagVariantType = variants[0]; // primary\n  @Watch('variant')\n  validateVariant(newValue: MgTag['variant'], oldValue?: MgTag['variant']): void {\n    if (!variants.includes(newValue)) {\n      throw new Error(`<mg-tag> prop \"variant\" must be one of: ${variants.join(', ')}.`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-tag--${oldValue}`);\n      }\n      this.classCollection.add(`mg-tag--${newValue}`);\n    }\n  }\n\n  /**\n   * Define if tag is using outline style\n   */\n  @Prop() outline: boolean;\n  @Watch('outline')\n  validateOutline(newValue: MgTag['outline']): void {\n    if (newValue) this.classCollection.add(this.classOutline);\n    else this.classCollection.delete(this.classOutline);\n  }\n\n  /**\n   * Define if tag is using soft style\n   */\n  @Prop() soft: boolean;\n  @Watch('soft')\n  validateSoft(newValue: MgTag['soft']): void {\n    // usage validation\n    if (newValue && this.outline) throw new Error('<mg-tag> prop \"soft\" can NOT be used with prop \"outline\".');\n\n    // apply class\n    if (newValue) this.classCollection.add(this.classSoft);\n    else this.classCollection.delete(this.classSoft);\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-tag']);\n\n  /*************\n   * Methods *\n   *************/\n\n  /**\n   * Validate the given textContent\n   * @param textContent - html element textContent property\n   */\n  private validateTextContent(textContent: string): void {\n    if (typeof textContent !== 'string' || textContent.trim() === '') throw new Error('<mg-tag> slot must contain a text content.');\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateVariant(this.variant);\n    this.validateOutline(this.outline);\n    this.validateSoft(this.soft);\n    this.validateTextContent(this.element.textContent);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <span class={this.classCollection.join()}>\n        <slot></slot>\n      </span>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,37 @@
+import { createPage } from "../../../../utils/stencil.e2e.test.utils";
+import { darkBackground } from "../../../../utils/e2e.test.utils";
+import { variants } from "../mg-tag.conf";
+describe('mg-tag', () => {
+  test('Should render', async () => {
+    const html = variants
+      .map(variant => {
+      const template = [true, false]
+        .map(icon => [
+        { outline: false, soft: false },
+        { outline: true, soft: false },
+        { outline: false, soft: true },
+      ]
+        .map(({ outline, soft }) => darkBackground(variant === 'secondary', `<mg-tag style="margin: 0.2rem;" variant="${variant}" outline="${outline}" soft="${soft}">${icon ? '<mg-icon icon="user"></mg-icon>' : ''}${variant}</mg-tag>`))
+        .join(''))
+        .join('');
+      return `<h2>${variant}<h2/><div>${template}<div>`;
+    })
+      .join('');
+    const page = await createPage(html);
+    const element = await page.find('mg-tag');
+    expect(element).toHaveClass('hydrated');
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  test('Should render a 2 lines tag', async () => {
+    const page = await createPage(`<mg-tag>Tag with a<br> two lines text</mg-tag>`);
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  test('Should render a tag in a paragraph', async () => {
+    const page = await createPage(`<p>This is a <mg-tag>tag</mg-tag> in a paragraph.</p>`);
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+});
+//# sourceMappingURL=mg-tag.e2e.js.map

package/dist/collection/components/atoms/mg-tag/test/mg-tag.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-tag.e2e.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-tag/test/mg-tag.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;EACtB,IAAI,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC/B,MAAM,IAAI,GAAG,QAAQ;OAClB,GAAG,CAAC,OAAO,CAAC,EAAE;MACb,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC;SAC3B,GAAG,CAAC,IAAI,CAAC,EAAE,CACV;QACE,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE;QAC/B,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE;QAC9B,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE;OAC/B;SACE,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,CACzB,cAAc,CACZ,OAAO,KAAK,WAAW,EACvB,4CAA4C,OAAO,cAAc,OAAO,WAAW,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,WAAW,CAC/J,CACF;SACA,IAAI,CAAC,EAAE,CAAC,CACZ;SACA,IAAI,CAAC,EAAE,CAAC,CAAC;MACZ,OAAO,OAAO,OAAO,aAAa,QAAQ,OAAO,CAAC;IACpD,CAAC,CAAC;OACD,IAAI,CAAC,EAAE,CAAC,CAAC;IAEZ,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,IAAI,CAAC,CAAC;IAEpC,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC1C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAExC,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;EAC5C,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;IAC7C,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,gDAAgD,CAAC,CAAC;IAEhF,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;EAC5C,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;IACpD,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,uDAAuD,CAAC,CAAC;IAEvF,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;EAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { createPage } from '../../../../utils/stencil.e2e.test.utils';\nimport { darkBackground } from '../../../../utils/e2e.test.utils';\nimport { variants } from '../mg-tag.conf';\n\ndescribe('mg-tag', () => {\n  test('Should render', async () => {\n    const html = variants\n      .map(variant => {\n        const template = [true, false]\n          .map(icon =>\n            [\n              { outline: false, soft: false },\n              { outline: true, soft: false },\n              { outline: false, soft: true },\n            ]\n              .map(({ outline, soft }) =>\n                darkBackground(\n                  variant === 'secondary',\n                  `<mg-tag style=\"margin: 0.2rem;\" variant=\"${variant}\" outline=\"${outline}\" soft=\"${soft}\">${icon ? '<mg-icon icon=\"user\"></mg-icon>' : ''}${variant}</mg-tag>`,\n                ),\n              )\n              .join(''),\n          )\n          .join('');\n        return `<h2>${variant}<h2/><div>${template}<div>`;\n      })\n      .join('');\n\n    const page = await createPage(html);\n\n    const element = await page.find('mg-tag');\n    expect(element).toHaveClass('hydrated');\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  test('Should render a 2 lines tag', async () => {\n    const page = await createPage(`<mg-tag>Tag with a<br> two lines text</mg-tag>`);\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  test('Should render a tag in a paragraph', async () => {\n    const page = await createPage(`<p>This is a <mg-tag>tag</mg-tag> in a paragraph.</p>`);\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n});\n"]}

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

@@ -0,0 +1,71 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgTag } from "../mg-tag";
+import { variants } from "../mg-tag.conf";
+const getPage = (args, slot) => newSpecPage({
+  components: [MgTag],
+  template: () => h("mg-tag", Object.assign({}, args), slot),
+});
+describe('mg-tag', () => {
+  describe.each(variants)('variant %s', variant => {
+    test.each([true, false])('outline %s', async (outline) => {
+      const { root } = await getPage({ variant, outline }, variant);
+      expect(root).toMatchSnapshot();
+    });
+    test.each([true, false])('soft %s', async (soft) => {
+      const { root } = await getPage({ variant, soft }, variant);
+      expect(root).toMatchSnapshot();
+    });
+  });
+  test('Should replace classes on variant/ouline changes', async () => {
+    const page = await getPage({}, 'Blu');
+    const element = page.doc.querySelector('mg-tag');
+    let classPrimary = element.shadowRoot.querySelector('.mg-tag--primary');
+    let classOutline = element.shadowRoot.querySelector('.mg-tag--outline');
+    expect(classPrimary).not.toBeNull();
+    expect(classOutline).toBeNull();
+    // Change variant
+    element.variant = 'danger';
+    await page.waitForChanges();
+    classPrimary = element.shadowRoot.querySelector('.mg-tag--primary');
+    const classDanger = element.shadowRoot.querySelector('.mg-tag--danger');
+    expect(classPrimary).toBeNull();
+    expect(classDanger).not.toBeNull();
+    // Change outline
+    element.outline = true;
+    await page.waitForChanges();
+    classOutline = element.shadowRoot.querySelector('.mg-tag--outline');
+    expect(classOutline).not.toBeNull();
+  });
+  describe('errors', () => {
+    test.each(['', 'blu'])('Should throw error, case wrong variant', async (variant) => {
+      expect.assertions(1);
+      try {
+        await getPage({ variant }, 'wrong variant');
+      }
+      catch (err) {
+        expect(err.message).toContain('<mg-tag> prop "variant" must be one of: ');
+      }
+    });
+    test.each([undefined, ' '])('Should throw error, case empty slot', async (slot) => {
+      expect.assertions(1);
+      try {
+        await getPage({ variant: variants[0] }, slot);
+      }
+      catch (err) {
+        expect(err.message).toBe('<mg-tag> slot must contain a text content.');
+      }
+    });
+    test('Should throw error, case empty slot', async () => {
+      const variant = variants[0];
+      expect.assertions(1);
+      try {
+        await getPage({ variant, outline: true, soft: true }, variant);
+      }
+      catch (err) {
+        expect(err.message).toBe('<mg-tag> prop "soft" can NOT be used with prop "outline".');
+      }
+    });
+  });
+});
+//# sourceMappingURL=mg-tag.spec.js.map

package/dist/collection/components/atoms/mg-tag/test/mg-tag.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-tag.spec.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-tag/test/mg-tag.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgTag } from '../mg-tag';\nimport { variants } from '../mg-tag.conf';\n\nconst getPage = (args, slot) =>\n  newSpecPage({\n    components: [MgTag],\n    template: () => <mg-tag {...args}>{slot}</mg-tag>,\n  });\n\ndescribe('mg-tag', () => {\n  describe.each(variants)('variant %s', variant => {\n    test.each([true, false])('outline %s', async outline => {\n      const { root } = await getPage({ variant, outline }, variant);\n      expect(root).toMatchSnapshot();\n    });\n\n    test.each([true, false])('soft %s', async soft => {\n      const { root } = await getPage({ variant, soft }, variant);\n      expect(root).toMatchSnapshot();\n    });\n  });\n\n  test('Should replace classes on variant/ouline changes', async () => {\n    const page = await getPage({}, 'Blu');\n    const element = page.doc.querySelector('mg-tag');\n    let classPrimary = element.shadowRoot.querySelector('.mg-tag--primary');\n    let classOutline = element.shadowRoot.querySelector('.mg-tag--outline');\n\n    expect(classPrimary).not.toBeNull();\n    expect(classOutline).toBeNull();\n\n    // Change variant\n    element.variant = 'danger';\n    await page.waitForChanges();\n\n    classPrimary = element.shadowRoot.querySelector('.mg-tag--primary');\n    const classDanger = element.shadowRoot.querySelector('.mg-tag--danger');\n\n    expect(classPrimary).toBeNull();\n    expect(classDanger).not.toBeNull();\n\n    // Change outline\n    element.outline = true;\n    await page.waitForChanges();\n\n    classOutline = element.shadowRoot.querySelector('.mg-tag--outline');\n    expect(classOutline).not.toBeNull();\n  });\n\n  describe('errors', () => {\n    test.each(['', 'blu'])('Should throw error, case wrong variant', async variant => {\n      expect.assertions(1);\n      try {\n        await getPage({ variant }, 'wrong variant');\n      } catch (err) {\n        expect(err.message).toContain('<mg-tag> prop \"variant\" must be one of: ');\n      }\n    });\n    test.each([undefined, ' '])('Should throw error, case empty slot', async slot => {\n      expect.assertions(1);\n      try {\n        await getPage({ variant: variants[0] }, slot);\n      } catch (err) {\n        expect(err.message).toBe('<mg-tag> slot must contain a text content.');\n      }\n    });\n    test('Should throw error, case empty slot', async () => {\n      const variant = variants[0];\n      expect.assertions(1);\n      try {\n        await getPage({ variant, outline: true, soft: true }, variant);\n      } catch (err) {\n        expect(err.message).toBe('<mg-tag> prop \"soft\" can NOT be used with prop \"outline\".');\n      }\n    });\n  });\n});\n"]}

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

@@ -1,4 +1,4 @@
-import { h, Host } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 export class MgTooltipContent {
   constructor() {
     this.message = undefined;
@@ -47,3 +47,4 @@ export class MgTooltipContent {
     };
   }
 }
+//# sourceMappingURL=mg-tooltip-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-tooltip-content.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,gBAAgB;;;;EAM3B;;iBAEe;EAEf;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,SAAS;MAClB,YAAM,SAAS,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,6BAA6B,GAAQ;MAC1E,YAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'mg-tooltip-content',\n  styleUrl: 'mg-tooltip-content.scss',\n  shadow: true,\n})\nexport class MgTooltipContent {\n  /**\n   * Displayed message in the tooltip\n   */\n  @Prop() message!: string;\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"tooltip\">\n        <span innerHTML={this.message} class=\"mg-tooltip-content__message\"></span>\n        <slot name=\"arrow\"></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -4,3 +4,4 @@ export var Guard;
   Guard["HOVER_TOOLTIP_ELEMENT"] = "hoverTooltipGuard";
   Guard["HOVER_TOOLTIPED_ELEMENT"] = "hoverTooltipedGuard";
 })(Guard || (Guard = {}));
+//# sourceMappingURL=mg-tooltip.conf.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-tooltip.conf.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-tooltip/mg-tooltip.conf.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,KAIX;AAJD,WAAY,KAAK;EACf,wBAAe,CAAA;EACf,oDAA2C,CAAA;EAC3C,wDAA+C,CAAA;AACjD,CAAC,EAJW,KAAK,KAAL,KAAK,QAIhB","sourcesContent":["export enum Guard {\n  FOCUS = 'focus',\n  HOVER_TOOLTIP_ELEMENT = 'hoverTooltipGuard',\n  HOVER_TOOLTIPED_ELEMENT = 'hoverTooltipedGuard',\n}\n"]}