@mgdis/mg-components 5.15.0 → 5.17.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-button.spec.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-button/test/mg-button.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE1D,MAAM,OAAO,GAAG,CAAC,IAAI,EAAE,OAAO,GAAG,aAAa,EAAE,EAAE,CAChD,WAAW,CAAC;EACV,UAAU,EAAE,CAAC,QAAQ,CAAC;EACtB,QAAQ,EAAE,GAAG,EAAE,CAAC,iCAAe,IAAI,GAAG,OAAO,CAAa;CAC3D,CAAC,CAAC;AAEL,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;EACzB,IAAI,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;IACnD,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;IAC7E,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACjC,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,4BAA4B,EAAE,OAAO,CAAC,EAAE;IAC9D,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,WAAW,EAAE,KAAK,EAAC,MAAM,EAAC,EAAE;MACnD,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;MACpE,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,sCAAsC,EAAE,KAAK,EAAC,IAAI,EAAC,EAAE;IAC1E,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;IACzD,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACjC,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,4CAA4C,EAAE,KAAK,EAAC,SAAS,EAAC,EAAE;IAClG,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC;IAC9D,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACjC,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;IAC3D,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;IACnE,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACpD,IAAI,YAAY,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAE3E,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAEpC,iBAAiB;IACjB,OAAO,CAAC,OAAO,GAAG,QAAQ,CAAC;IAC3B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,YAAY,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACvE,MAAM,WAAW,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAE3E,MAAM,CAAC,YAAY,CAAC,CAAC,QAAQ,EAAE,CAAC;IAChC,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;EACrC,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,oBAAoB,EAAE,KAAK,EAAC,OAAO,EAAC,EAAE;IAC3D,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,IAAI;MACF,MAAM,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;KAC5B;IAAC,OAAO,GAAG,EAAE;MACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,6CAA6C,CAAC,CAAC;KAC9E;EACH,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,yEAAyE,EAAE,KAAK,EAAC,KAAK,EAAC,EAAE;IACvH,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,IAAI;MACF,MAAM,OAAO,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;KACxC;IAAC,OAAO,GAAG,EAAE;MACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,0EAA0E,CAAC,CAAC;KAC3G;EACH,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,6EAA6E,EAAE,KAAK,IAAI,EAAE;IAC7F,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,IAAI;MACF,MAAM,OAAO,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KACnE;IAAC,OAAO,GAAG,EAAE;MACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,gEAAgE,CAAC,CAAC;KACjG;EACH,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;IACpC,IAAI,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;MACvD,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,CAAC,CAAC;MACzD,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;MACnD,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;MAEjE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MAClE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;MACnC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC;MACvB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAC5B,MAAM,CAAC,GAAG,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;MAEvC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;MACnD,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,CAAC;MACrD,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;MACnD,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;MAEjE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MAClE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,GAAG,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,CAAC;MACvC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC;MACxB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,GAAG,CAAC,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;MACxC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;MACjE,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC;QACzB,QAAQ,EAAE,IAAI;QACd,cAAc,EAAE,IAAI;OACrB,CAAC,CAAC;MACH,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;MACnD,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;MAEjE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MAClE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;MACnC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;MAClD,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC;QACzB,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK;OACrB,CAAC,CAAC;MAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE,KAAK,CAAC,EAAE;IAC9G,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,uCAAuC,EAAE,KAAK,EAAC,GAAG,EAAC,EAAE;MAC5F,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,KAAK,CAAC,CAAC;MAClC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;MAEnD,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;MAEhD,MAAM,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;MACnG,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,IAAI,KAAK,CAAC,QAAQ,EAAE;QAClB,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,cAAc,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;OAC5E;WAAM;QACL,MAAM,CAAC,GAAG,CAAC,CAAC,cAAc,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;OACxE;IACH,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,IAAI,CAAC,CAAC,YAAY,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,2CAA2C,EAAE,KAAK,EAAC,GAAG,EAAC,EAAE;MAC7F,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,KAAK,CAAC,CAAC;MAClC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;MAEnD,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;MAEhD,MAAM,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;MAC3E,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,cAAc,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;IAC7E,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgButton } from '../mg-button';\nimport { variants, buttonTypes } from '../mg-button.conf';\n\nconst getPage = (args, content = 'Text button') =>\n  newSpecPage({\n    components: [MgButton],\n    template: () => <mg-button {...args}>{content}</mg-button>,\n  });\n\ndescribe('mg-button', () => {\n  test('Should render a button with an id', async () => {\n    const { root } = await getPage({ identifier: 'identifier', label: 'label' });\n    expect(root).toMatchSnapshot();\n  });\n\n  describe.each(variants)('Should render an %s button', variant => {\n    test.each([false, true])('isIcon %s', async isIcon => {\n      const { root } = await getPage({ variant, isIcon, label: 'label' });\n      expect(root).toMatchSnapshot();\n    });\n  });\n\n  test.each(buttonTypes)('Should render a button, case type %s', async type => {\n    const { root } = await getPage({ label: 'label', type });\n    expect(root).toMatchSnapshot();\n  });\n\n  test.each([true, false, undefined])('Should render a button, case full-width %s', async fullWidth => {\n    const { root } = await getPage({ label: 'label', fullWidth });\n    expect(root).toMatchSnapshot();\n  });\n\n  test('Should replace classes on variant changes', async () => {\n    const page = await getPage({ variant: 'primary', label: 'label' });\n    const element = page.doc.querySelector('mg-button');\n    let classPrimary = element.shadowRoot.querySelector('.mg-button--primary');\n\n    expect(classPrimary).not.toBeNull();\n\n    // Change variant\n    element.variant = 'danger';\n    await page.waitForChanges();\n\n    classPrimary = element.shadowRoot.querySelector('.mg-button--primary');\n    const classDanger = element.shadowRoot.querySelector('.mg-button--danger');\n\n    expect(classPrimary).toBeNull();\n    expect(classDanger).not.toBeNull();\n  });\n\n  test.each(['', 'blu'])('Should throw error', async variant => {\n    expect.assertions(1);\n    try {\n      await getPage({ variant });\n    } catch (err) {\n      expect(err.message).toContain('<mg-button> prop \"variant\" must be one of: ');\n    }\n  });\n\n  test.each(['', ' ', undefined])('should throw error when using prop \"isIcon\" without a good prop \"label\"', async label => {\n    expect.assertions(1);\n    try {\n      await getPage({ isIcon: true, label });\n    } catch (err) {\n      expect(err.message).toContain('<mg-button> prop \"label\" is mandatory when prop \"isIcon\" is set to true.');\n    }\n  });\n\n  test('should throw error when using prop \"isIcon\" without a good prop \"fullWidth\"', async () => {\n    expect.assertions(1);\n    try {\n      await getPage({ isIcon: true, label: 'batman', fullWidth: true });\n    } catch (err) {\n      expect(err.message).toContain('<mg-button> prop \"fullWidth\" cannot be used with prop \"isIcon\"');\n    }\n  });\n\n  describe('prevent double click', () => {\n    test('should NOT disable button after click', async () => {\n      const page = await getPage({ identifier: 'identifier' });\n      const button = page.doc.querySelector('mg-button');\n      const spy = jest.spyOn(page.rootInstance.disabledChange, 'emit');\n\n      expect(page.root).toMatchSnapshot();\n\n      button.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(spy).not.toHaveBeenCalled();\n      expect(page.root).toMatchSnapshot();\n\n      button.disabled = true;\n      await page.waitForChanges();\n      expect(spy).toHaveBeenCalledWith(true);\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    test('should disable button after click', async () => {\n      const page = await getPage({ disableOnClick: true });\n      const button = page.doc.querySelector('mg-button');\n      const spy = jest.spyOn(page.rootInstance.disabledChange, 'emit');\n\n      expect(page.root).toMatchSnapshot();\n\n      button.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(spy).toHaveBeenCalledWith(true);\n      expect(page.root).toMatchSnapshot();\n\n      button.disabled = false;\n      await page.waitForChanges();\n\n      expect(spy).toHaveBeenCalledWith(false);\n      expect(page.root).toMatchSnapshot();\n    });\n\n    test('should not trigger disableOnClick when disabled', async () => {\n      const page = await getPage({\n        disabled: true,\n        disableOnCLick: true,\n      });\n      const button = page.doc.querySelector('mg-button');\n      const spy = jest.spyOn(page.rootInstance.disabledChange, 'emit');\n\n      expect(page.root).toMatchSnapshot();\n\n      button.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(spy).not.toHaveBeenCalled();\n      expect(page.root).toMatchSnapshot();\n    });\n\n    test('should not have fn when disabled', async () => {\n      const page = await getPage({\n        disabled: true,\n        onClick: () => false,\n      });\n\n      expect(page.root).toMatchSnapshot();\n    });\n  });\n\n  describe.each([{ identifier: 'identifier' }, { identifier: 'identifier', disabled: true }])('keyboard', props => {\n    test.each([' ', 'Enter', 'NumpadEnter'])('Should trigger click event on keydown', async key => {\n      const page = await getPage(props);\n      const button = page.doc.querySelector('mg-button');\n\n      const spy = jest.spyOn(button, 'dispatchEvent');\n\n      button.dispatchEvent(new KeyboardEvent(key === ' ' ? 'keyup' : 'keydown', { bubbles: true, key }));\n      await page.waitForChanges();\n\n      if (props.disabled) {\n        expect(spy).not.lastCalledWith(expect.objectContaining({ type: 'click' }));\n      } else {\n        expect(spy).lastCalledWith(expect.objectContaining({ type: 'click' }));\n      }\n    });\n    test.each(['ArrowRight', 'Tab', ' '])('Should NOT trigger click event on keydown', async key => {\n      const page = await getPage(props);\n      const button = page.doc.querySelector('mg-button');\n\n      const spy = jest.spyOn(button, 'dispatchEvent');\n\n      button.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key }));\n      await page.waitForChanges();\n\n      expect(spy).not.lastCalledWith(expect.objectContaining({ type: 'click' }));\n    });\n  });\n});\n"]}

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

@@ -6,3 +6,4 @@ export const variants = ['info', 'warning', 'success', 'danger', 'app'];
  * List available variant styles
  */
 export const variantStyles = ['bar-left', 'fill'];
+//# sourceMappingURL=mg-card.conf.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-card.conf.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-card/mg-card.conf.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAU,CAAC;AAOjF;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,UAAU,EAAE,MAAM,CAAU,CAAC","sourcesContent":["/**\n * List available variants\n */\nexport const variants = ['info', 'warning', 'success', 'danger', 'app'] as const;\n\n/**\n * Variant type\n */\nexport type VariantType = (typeof variants)[number];\n\n/**\n * List available variant styles\n */\nexport const variantStyles = ['bar-left', 'fill'] as const;\n\n/**\n * VariantStyle type\n */\nexport type VariantStyleType = (typeof variantStyles)[number];\n"]}

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

@@ -1,6 +1,6 @@
-import { h } from '@stencil/core';
-import { ClassList } from '../../../utils/components.utils';
-import { variantStyles, variants } from './mg-card.conf';
+import { h } from "@stencil/core";
+import { ClassList } from "../../../utils/components.utils";
+import { variantStyles, variants } from "./mg-card.conf";
 export class MgCard {
   constructor() {
     /*************
@@ -81,7 +81,8 @@ export class MgCard {
           "references": {
             "VariantType": {
               "location": "import",
-              "path": "./mg-card.conf"
+              "path": "./mg-card.conf",
+              "id": "src/components/atoms/mg-card/mg-card.conf.ts::VariantType"
             }
           }
         },
@@ -103,7 +104,8 @@ export class MgCard {
           "references": {
             "VariantStyleType": {
               "location": "import",
-              "path": "./mg-card.conf"
+              "path": "./mg-card.conf",
+              "id": "src/components/atoms/mg-card/mg-card.conf.ts::VariantStyleType"
             }
           }
         },
@@ -133,3 +135,4 @@ export class MgCard {
       }];
   }
 }
+//# sourceMappingURL=mg-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-card.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-card/mg-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAyB,aAAa,EAAoB,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAOlG,MAAM,OAAO,MAAM;;IACjB;;mBAEe;IAEE,SAAI,GAAG,SAAS,CAAC;IACjB,cAAS,GAAG,IAAI,CAAC,IAAI,CAAC;IAsCvC;;;OAGG;IACK,2BAAsB,GAAG,GAAS,EAAE;MAC1C,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS;QAAE,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;IACtE,CAAC,CAAC;;;2BARoC,IAAI,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;;EAzBrE,eAAe,CAAC,QAA2B,EAAE,QAA4B;IACvE,IAAI,QAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,+CAA+C,CAAC,CAAC;IAC5H,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE;MACrB,IAAI,CAAC,sBAAsB,EAAE,CAAC;MAC9B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;KAC5D;IACD,IAAI,OAAO,CAAC,QAAQ,CAAC;MAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;EACvF,CAAC;EAOD,oBAAoB,CAAC,QAAgC,EAAE,QAAiC;IACtF,IAAI,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,yDAAyD,CAAC,CAAC;SACtI,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;MAC5D,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,6CAA6C,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IACxH,IAAI,OAAO,CAAC,QAAQ,CAAC;MAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;IAClF,IAAI,OAAO,CAAC,QAAQ,CAAC;MAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;EACvF,CAAC;EAeD;;iBAEe;EAEf;;KAEG;EACH,iBAAiB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EAC/C,CAAC;EAED;;;KAGG;EACH,MAAM;;IACJ,OAAO,CACL,WAAK,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;MACpC,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,UAAU,CAAC,MAAM,CAAC,KAAI,YAAM,KAAK,EAAC,cAAc,GAAQ;MAC5E,eAAa,CACT,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { ClassList } from '../../../utils/components.utils';\nimport { type VariantStyleType, variantStyles, type VariantType, variants } from './mg-card.conf';\n\n@Component({\n  tag: 'mg-card',\n  styleUrl: 'mg-card.scss',\n  shadow: true,\n})\nexport class MgCard {\n  /*************\n   * Private *\n   *************/\n\n  private readonly name = 'mg-card';\n  private readonly baseClass = this.name;\n\n  /*************\n   * Decorators *\n   *************/\n\n  /**\n   * Define variant prop\n   */\n  @Prop() variant: undefined | VariantType;\n  @Watch('variant')\n  validateVariant(newValue: MgCard['variant'], oldValue?: MgCard['variant']) {\n    if (newValue && !variants.includes(newValue)) throw new Error(`<${this.name}> prop \"variant\" must match VariantType type.`);\n    if (Boolean(newValue)) {\n      this.setDefaultVariantStyle();\n      this.classCollection.add(`${this.baseClass}--${newValue}`);\n    }\n    if (Boolean(oldValue)) this.classCollection.delete(`${this.baseClass}--${oldValue}`);\n  }\n\n  /**\n   * Define variantStyle prop\n   */\n  @Prop({ mutable: true }) variantStyle: undefined | VariantStyleType;\n  @Watch('variantStyle')\n  validateVariantStyle(newValue: MgCard['variantStyle'], oldValue?: MgCard['variantStyle']) {\n    if (newValue && !variantStyles.includes(newValue)) throw new Error(`<${this.name}> prop \"variantStyle\" must match VariantStyleType type.`);\n    else if (Boolean(newValue) && !variants.includes(this.variant))\n      throw new Error(`<${this.name}> prop \"variantStyle\" must be paired with ${JSON.stringify(variants)} \"variant\" prop.`);\n    if (Boolean(newValue)) this.classCollection.add(`${this.baseClass}--${newValue}`);\n    if (Boolean(oldValue)) this.classCollection.delete(`${this.baseClass}--${oldValue}`);\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList([this.baseClass]);\n\n  /**\n   * Methode 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 = 'bar-left';\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.validateVariantStyle(this.variantStyle);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div class={this.classCollection.join()}>\n        {this.variantStyle?.startsWith('bar-') && <span class=\"mg-card__bar\"></span>}\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,36 @@
+import { createPage } from "../../../../utils/stencil.e2e.test.utils";
+import { renderAttributes } from "../../../../utils/e2e.test.utils";
+import { variantStyles, variants } from "../mg-card.conf";
+const style = `<style>.margin-y { margin: 1rem 0; } .d-block { display: block; } [variant='app'] { --mg-color-app-h: 250 }</style>`;
+describe('mg-card', () => {
+  test('Should render', async () => {
+    const props = [undefined, ...variants.flatMap(variant => variantStyles.map(variantStyle => ({ variant, variantStyle })))];
+    const html = [
+      'short text',
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    ]
+      .map(slot => props.map(prop => `<mg-card class="margin-y d-block" ${renderAttributes(prop)}>${slot}</mg-card>`).join(''))
+      .join('');
+    const page = await createPage(html + style);
+    const element = await page.find('mg-card');
+    expect(element).toHaveClass('hydrated');
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  test('Should render with custom card', async () => {
+    const html = [
+      'short text',
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+      '<mg-card>Content whith child card.</mg-card>',
+      '<mg-card class="custom-card--info">Content whith child info card.</mg-card>',
+    ]
+      .map(slot => `<mg-card class="${slot.includes('</mg-card>') ? 'custom-card--danger' : ''} d-block margin-y">${slot}</mg-card>`)
+      .join('');
+    const page = await createPage(html + '<style>.custom-card--danger {--mg-card-background: hsl(var(--color-danger));} .custom-card--info {--mg-card-background: hsl(var(--color-info));}</style>' + style);
+    const element = await page.find('mg-card');
+    expect(element).toHaveClass('hydrated');
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+});
+//# sourceMappingURL=mg-card.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-card.e2e.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-card/test/mg-card.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE1D,MAAM,KAAK,GAAG,qHAAqH,CAAC;AAEpI,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;EACvB,IAAI,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC/B,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,GAAG,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;IAC1H,MAAM,IAAI,GAAG;MACX,YAAY;MACZ,+bAA+b;KAChc;OACE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,qCAAqC,gBAAgB,CAAC,IAAI,CAAC,IAAI,IAAI,YAAY,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;OACxH,IAAI,CAAC,EAAE,CAAC,CAAC;IAEZ,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC;IAE5C,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC3C,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,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAChD,MAAM,IAAI,GAAG;MACX,YAAY;MACZ,+bAA+b;MAC/b,8CAA8C;MAC9C,6EAA6E;KAC9E;OACE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,mBAAmB,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,sBAAsB,IAAI,YAAY,CAAC;OAC9H,IAAI,CAAC,EAAE,CAAC,CAAC;IACZ,MAAM,IAAI,GAAG,MAAM,UAAU,CAC3B,IAAI,GAAG,0JAA0J,GAAG,KAAK,CAC1K,CAAC;IAEF,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC3C,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;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { createPage } from '../../../../utils/stencil.e2e.test.utils';\nimport { renderAttributes } from '../../../../utils/e2e.test.utils';\nimport { variantStyles, variants } from '../mg-card.conf';\n\nconst style = `<style>.margin-y { margin: 1rem 0; } .d-block { display: block; } [variant='app'] { --mg-color-app-h: 250 }</style>`;\n\ndescribe('mg-card', () => {\n  test('Should render', async () => {\n    const props = [undefined, ...variants.flatMap(variant => variantStyles.map(variantStyle => ({ variant, variantStyle })))];\n    const html = [\n      'short text',\n      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',\n    ]\n      .map(slot => props.map(prop => `<mg-card class=\"margin-y d-block\" ${renderAttributes(prop)}>${slot}</mg-card>`).join(''))\n      .join('');\n\n    const page = await createPage(html + style);\n\n    const element = await page.find('mg-card');\n    expect(element).toHaveClass('hydrated');\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  test('Should render with custom card', async () => {\n    const html = [\n      'short text',\n      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',\n      '<mg-card>Content whith child card.</mg-card>',\n      '<mg-card class=\"custom-card--info\">Content whith child info card.</mg-card>',\n    ]\n      .map(slot => `<mg-card class=\"${slot.includes('</mg-card>') ? 'custom-card--danger' : ''} d-block margin-y\">${slot}</mg-card>`)\n      .join('');\n    const page = await createPage(\n      html + '<style>.custom-card--danger {--mg-card-background: hsl(var(--color-danger));} .custom-card--info {--mg-card-background: hsl(var(--color-info));}</style>' + style,\n    );\n\n    const element = await page.find('mg-card');\n    expect(element).toHaveClass('hydrated');\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n});\n"]}

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

@@ -0,0 +1,43 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgCard } from "../mg-card";
+import { variantStyles, variants } from "../mg-card.conf";
+const getPage = (props, slot) => newSpecPage({
+  components: [MgCard],
+  template: () => h("mg-card", Object.assign({}, props), slot),
+});
+describe('mg-card', () => {
+  test.each([undefined, ...variants.flatMap(variant => variantStyles.map(variantStyle => ({ variant, variantStyle }))), ...variants.map(variant => ({ variant }))])('render', async (props) => {
+    const { root } = await getPage(props, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.');
+    expect(root).toMatchSnapshot();
+  });
+  test.each([
+    { oldValue: { variant: variants[0], variantStyle: variantStyles[0] }, newValue: { variant: variants[1], variantStyle: variantStyles[0] } },
+    { oldValue: { variant: variants[0], variantStyle: variantStyles[0] }, newValue: { variant: variants[0], variantStyle: variantStyles[1] } },
+  ])('should update classCollection', async ({ oldValue, newValue }) => {
+    const page = await getPage(oldValue, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.');
+    expect(page.root).toMatchSnapshot();
+    const mgCard = page.doc.querySelector('mg-card');
+    Object.keys(newValue).forEach(key => {
+      mgCard[key] = newValue[key];
+    });
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot();
+  });
+  describe('errors', () => {
+    test.each([
+      { props: { variantStyle: 'batman' }, error: `<mg-card> prop "variantStyle" must match VariantStyleType type.` },
+      ...variantStyles.map(variantStyle => ({ props: { variantStyle }, error: `<mg-card> prop "variantStyle" must be paired with ${JSON.stringify(variants)} "variant" prop.` })),
+      { props: { variant: 'batman' }, error: `<mg-card> prop "variant" must match VariantType type.` },
+    ])('should throw error %s', async ({ props, error }) => {
+      expect.assertions(1);
+      try {
+        await getPage(props, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.');
+      }
+      catch (err) {
+        expect(err.message).toMatch(error);
+      }
+    });
+  });
+});
+//# sourceMappingURL=mg-card.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-card.spec.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-card/test/mg-card.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,aAAa,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE1D,MAAM,OAAO,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,CAC9B,WAAW,CAAC;EACV,UAAU,EAAE,CAAC,MAAM,CAAC;EACpB,QAAQ,EAAE,GAAG,EAAE,CAAC,+BAAa,KAAK,GAAG,IAAI,CAAW;CACrD,CAAC,CAAC;AAEL,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;EACvB,IAAI,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,GAAG,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,EAAE,GAAG,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAC/J,QAAQ,EACR,KAAK,EAAC,KAAK,EAAC,EAAE;IACZ,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAC5B,KAAK,EACL,+bAA+b,CAChc,CAAC;IACF,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACjC,CAAC,CACF,CAAC;EAEF,IAAI,CAAC,IAAI,CAAC;IACR,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE;IAC1I,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE;GAC3I,CAAC,CAAC,+BAA+B,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IACnE,MAAM,IAAI,GAAG,MAAM,OAAO,CACxB,QAAQ,EACR,+bAA+b,CAChc,CAAC;IACF,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IAEpC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IACjD,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;MAClC,MAAM,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACtC,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,IAAI,CAAC,IAAI,CAAC;MACR,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,iEAAiE,EAAE;MAC/G,GAAG,aAAa,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE,KAAK,EAAE,qDAAqD,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,EAAE,CAAC,CAAC;MAC3K,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,uDAAuD,EAAE;KACjG,CAAC,CAAC,uBAAuB,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;MACrD,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;MACrB,IAAI;QACF,MAAM,OAAO,CACX,KAAK,EACL,+bAA+b,CAChc,CAAC;OACH;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 { MgCard } from '../mg-card';\nimport { variantStyles, variants } from '../mg-card.conf';\n\nconst getPage = (props, slot) =>\n  newSpecPage({\n    components: [MgCard],\n    template: () => <mg-card {...props}>{slot}</mg-card>,\n  });\n\ndescribe('mg-card', () => {\n  test.each([undefined, ...variants.flatMap(variant => variantStyles.map(variantStyle => ({ variant, variantStyle }))), ...variants.map(variant => ({ variant }))])(\n    'render',\n    async props => {\n      const { root } = await getPage(\n        props,\n        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',\n      );\n      expect(root).toMatchSnapshot();\n    },\n  );\n\n  test.each([\n    { oldValue: { variant: variants[0], variantStyle: variantStyles[0] }, newValue: { variant: variants[1], variantStyle: variantStyles[0] } },\n    { oldValue: { variant: variants[0], variantStyle: variantStyles[0] }, newValue: { variant: variants[0], variantStyle: variantStyles[1] } },\n  ])('should update classCollection', async ({ oldValue, newValue }) => {\n    const page = await getPage(\n      oldValue,\n      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',\n    );\n    expect(page.root).toMatchSnapshot();\n\n    const mgCard = page.doc.querySelector('mg-card');\n    Object.keys(newValue).forEach(key => {\n      mgCard[key] = newValue[key];\n    });\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  describe('errors', () => {\n    test.each([\n      { props: { variantStyle: 'batman' }, error: `<mg-card> prop \"variantStyle\" must match VariantStyleType type.` },\n      ...variantStyles.map(variantStyle => ({ props: { variantStyle }, error: `<mg-card> prop \"variantStyle\" must be paired with ${JSON.stringify(variants)} \"variant\" prop.` })),\n      { props: { variant: 'batman' }, error: `<mg-card> prop \"variant\" must match VariantType type.` },\n    ])('should throw error %s', async ({ props, error }) => {\n      expect.assertions(1);\n      try {\n        await getPage(\n          props,\n          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',\n        );\n      } catch (err) {\n        expect(err.message).toMatch(error);\n      }\n    });\n  });\n});\n"]}

package/dist/collection/components/atoms/mg-character-left/mg-character-left.js

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { initLocales } from '../../../locales';
+import { h } from "@stencil/core";
+import { initLocales } from "../../../locales";
 export class MgCharacterLeft {
   constructor() {
     this.identifier = undefined;
@@ -104,3 +104,4 @@ export class MgCharacterLeft {
       }];
   }
 }
+//# sourceMappingURL=mg-character-left.js.map

package/dist/collection/components/atoms/mg-character-left/mg-character-left.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-character-left.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-character-left/mg-character-left.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAO/C,MAAM,OAAO,eAAe;;;sBAyBL,EAAE;;;EAOvB,iBAAiB,CAAC,QAAgB;IAChC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;KACtE;EACH,CAAC;EAED;;iBAEe;EAEf;;KAEG;EACH,iBAAiB;IACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACvC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;EACrD,CAAC;EAED;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,YAAM,EAAE,EAAE,IAAI,CAAC,UAAU,eAAY,QAAQ;MAC3C,2BAAkB,MAAM;QACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM;;QAAG,IAAI,CAAC,SAAS,CACpD;MACP,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAQ,CAChH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../locales';\n\n@Component({\n  tag: 'mg-character-left',\n  styleUrl: 'mg-character-left.scss',\n  scoped: true,\n})\nexport class MgCharacterLeft {\n  /************\n   * Internal *\n   ************/\n\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgCharacterLeftElement;\n\n  /**\n   * Sets an `id` attribute.\n   * Needed by the input for accessibility `aria-decribedby`.\n   */\n  @Prop() identifier: string;\n\n  /**\n   * Sets the characters to count\n   */\n  @Prop() characters = '';\n\n  /**\n   * Add maximum length\n   */\n  @Prop() maxlength!: number;\n  @Watch('maxlength')\n  validateMaxlength(newValue: number): void {\n    if (typeof newValue !== 'number') {\n      throw new Error('<mg-character-left> prop \"maxlength\" is required.');\n    }\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateMaxlength(this.maxlength);\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Render component\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <span id={this.identifier} aria-live=\"polite\">\n        <span aria-hidden=\"true\">\n          {this.maxlength - this.characters.length}/{this.maxlength}\n        </span>\n        <span class=\"sr-only\">{this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length)}</span>\n      </span>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,15 @@
+import { createPage } from "../../../../utils/stencil.e2e.test.utils";
+describe('mg-character-left', () => {
+  test('Should render', async () => {
+    const components = [
+      `<mg-character-left characters="" maxlength="100"></mg-character-left>`,
+      `<mg-character-left characters="blu" maxlength="200"></mg-character-left>`,
+      `<mg-character-left characters="blu blu blu blu" maxlength="1000"></mg-character-left>`,
+    ];
+    const html = components.join('');
+    const page = await createPage(html, { width: 60, height: 60 });
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+});
+//# sourceMappingURL=mg-character-left.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-character-left.e2e.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-character-left/test/mg-character-left.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAEtE,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;EACjC,IAAI,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC/B,MAAM,UAAU,GAAG;MACjB,uEAAuE;MACvE,0EAA0E;MAC1E,uFAAuF;KACxF,CAAC;IACF,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACjC,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-character-left', () => {\n  test('Should render', async () => {\n    const components = [\n      `<mg-character-left characters=\"\" maxlength=\"100\"></mg-character-left>`,\n      `<mg-character-left characters=\"blu\" maxlength=\"200\"></mg-character-left>`,\n      `<mg-character-left characters=\"blu blu blu blu\" maxlength=\"1000\"></mg-character-left>`,\n    ];\n    const html = components.join('');\n    const page = await createPage(html, { width: 60, height: 60 });\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n});\n"]}

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

@@ -0,0 +1,42 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgCharacterLeft } from "../mg-character-left";
+import messages from "../../../../locales/en/messages.json";
+const getPage = args => newSpecPage({
+  components: [MgCharacterLeft],
+  template: () => h("mg-character-left", Object.assign({}, args)),
+});
+describe('mg-character-left', () => {
+  describe.each(['blu', 'blublu', 'blu blu blu blu blu'])('Should render nb char left for %s', characters => {
+    test.each([123, 234, 200])('renders', async (maxlength) => {
+      const { root } = await getPage({ characters, maxlength });
+      expect(root).toMatchSnapshot();
+    });
+  });
+  test('Should throw error without maxlength', async () => {
+    expect.assertions(1);
+    try {
+      await getPage({});
+    }
+    catch (err) {
+      expect(err.message).toMatch('<mg-character-left> prop "maxlength" is required.');
+    }
+  });
+  test('Should update character left counter', async () => {
+    const maxlength = 400;
+    const characters = 'blu blu';
+    const page = await getPage({ characters: '', maxlength });
+    const element = page.doc.querySelector('mg-character-left');
+    expect(element.textContent).toContain(messages.nbCharLeft.replace('{counter}', `${maxlength}`));
+    element.setAttribute('characters', characters);
+    await page.waitForChanges();
+    expect(element.textContent).toContain(messages.nbCharLeft.replace('{counter}', `${maxlength - characters.length}`));
+  });
+  test.each(['fr', 'xx'])('Should render component with locale: %s', async (lang) => {
+    const maxlength = 400;
+    const characters = 'blu blu';
+    const { root } = await getPage({ characters, maxlength, lang });
+    expect(root).toMatchSnapshot();
+  });
+});
+//# sourceMappingURL=mg-character-left.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-character-left.spec.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-character-left/test/mg-character-left.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,QAAQ,MAAM,sCAAsC,CAAC;AAE5D,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CACrB,WAAW,CAAC;EACV,UAAU,EAAE,CAAC,eAAe,CAAC;EAC7B,QAAQ,EAAE,GAAG,EAAE,CAAC,yCAAuB,IAAI,EAAsB;CAClE,CAAC,CAAC;AAEL,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;EACjC,QAAQ,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,qBAAqB,CAAC,CAAC,CAAC,mCAAmC,EAAE,UAAU,CAAC,EAAE;IACxG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,EAAC,SAAS,EAAC,EAAE;MACtD,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,CAAC;MAC1D,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACtD,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,IAAI;MACF,MAAM,OAAO,CAAC,EAAE,CAAC,CAAC;KACnB;IAAC,OAAO,GAAG,EAAE;MACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,mDAAmD,CAAC,CAAC;KAClF;EACH,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACtD,MAAM,SAAS,GAAG,GAAG,CAAC;IACtB,MAAM,UAAU,GAAG,SAAS,CAAC;IAC7B,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC;IAE1D,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;IAC5D,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;IAEhG,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;IAC/C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,GAAG,SAAS,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;EACtH,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,yCAAyC,EAAE,KAAK,EAAC,IAAI,EAAC,EAAE;IAC9E,MAAM,SAAS,GAAG,GAAG,CAAC;IACtB,MAAM,UAAU,GAAG,SAAS,CAAC;IAC7B,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAChE,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 { MgCharacterLeft } from '../mg-character-left';\nimport messages from '../../../../locales/en/messages.json';\n\nconst getPage = args =>\n  newSpecPage({\n    components: [MgCharacterLeft],\n    template: () => <mg-character-left {...args}></mg-character-left>,\n  });\n\ndescribe('mg-character-left', () => {\n  describe.each(['blu', 'blublu', 'blu blu blu blu blu'])('Should render nb char left for %s', characters => {\n    test.each([123, 234, 200])('renders', async maxlength => {\n      const { root } = await getPage({ characters, maxlength });\n      expect(root).toMatchSnapshot();\n    });\n  });\n\n  test('Should throw error without maxlength', async () => {\n    expect.assertions(1);\n    try {\n      await getPage({});\n    } catch (err) {\n      expect(err.message).toMatch('<mg-character-left> prop \"maxlength\" is required.');\n    }\n  });\n\n  test('Should update character left counter', async () => {\n    const maxlength = 400;\n    const characters = 'blu blu';\n    const page = await getPage({ characters: '', maxlength });\n\n    const element = page.doc.querySelector('mg-character-left');\n    expect(element.textContent).toContain(messages.nbCharLeft.replace('{counter}', `${maxlength}`));\n\n    element.setAttribute('characters', characters);\n    await page.waitForChanges();\n    expect(element.textContent).toContain(messages.nbCharLeft.replace('{counter}', `${maxlength - characters.length}`));\n  });\n\n  test.each(['fr', 'xx'])('Should render component with locale: %s', async lang => {\n    const maxlength = 400;\n    const characters = 'blu blu';\n    const { root } = await getPage({ characters, maxlength, lang });\n    expect(root).toMatchSnapshot();\n  });\n});\n"]}

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

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class MgDivider {
   constructor() {
     this.size = 'regular';
@@ -48,3 +48,4 @@ export class MgDivider {
     };
   }
 }
+//# sourceMappingURL=mg-divider.js.map

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

@@ -0,0 +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,YAAY,EAAE,IAAI;QAClB,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;OACzC,GACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'mg-divider',\n  styleUrl: 'mg-divider.scss',\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-divider': true,\n          'mg-divider--full': this.size === 'full',\n        }}\n      ></div>\n    );\n  }\n}\n"]}

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":"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","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