npm - @mgdis/mg-components - Versions diffs - 5.18.0 → 5.19.1 - Mend

@mgdis/mg-components 5.18.0 → 5.19.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (358) hide show

package/dist/collection/components/atoms/mg-button/test/mg-button.e2e.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-button.e2e.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-button/test/mg-button.e2e.ts"],"names":[],"mappings":"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~~eAAe~~,CAAC,CAAC;~~MACxC~~,CAAC,CAAC,CAAC;MACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,iBAAiB,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;MAClD,MAAM,CAAC,iBAAiB,CAAC,CAAC,oBAAoB,EAAE,CAAC;IACnD,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;IACpD,MAAM,KAAK,GAAG;MACZ,~~kEAAkE~~;~~MAClE~~,~~iHAAiH~~;~~MACjH~~,~~8GAA8G~~;~~KAC/G~~,CAAC;IACF,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9D,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,iFAAiF,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,YAAY,EAAE,CAAC,CAAC;IAE5K,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 { variants } from '../mg-button.conf';\n\nconst buttonHeight = 35;\n\ndescribe('mg-button', () => {\n test('Should render', async () => {\n const html = variants\n .map(\n variant => `<div>\n <mg-button variant=\"${variant}\">${variant}</mg-button>\n <mg-button variant=\"${variant}\" is-icon><mg-icon icon=\"check-circle\"></mg-icon></mg-button>\n <mg-button variant=\"${variant}\" disabled>disabled</mg-button>\n <mg-button variant=\"${variant}\" is-icon disabled label=\"disabled\"><mg-icon icon=\"check-circle\"></mg-icon></mg-button>\n </div>`,\n )\n .join('');\n const page = await createPage(html, { width: 250, height: variants.length * buttonHeight });\n\n const screenshot = await page.screenshot();\n expect(screenshot).toMatchImageSnapshot();\n });\n\n test('Should render whith icon slot', async () => {\n const slots = ['<mg-icon icon=\"trash\"></mg-icon>Text button', '<mg-icon icon=\"trash\"></mg-icon>Text button<mg-badge value=\"1\" label=\"label\"></mg-badge>'];\n const html = slots.map(slot => `<div><mg-button>${slot}</mg-button></div>`).join('');\n const page = await createPage(html, { width: 150, height: slots.length * buttonHeight });\n\n const screenshot = await page.screenshot();\n expect(screenshot).toMatchImageSnapshot();\n });\n\n test('Should render a 2 lines button', async () => {\n const page = await createPage(`<mg-button>Button with a<br> two lines text</mg-button>`);\n\n const screenshot = await page.screenshot();\n expect(screenshot).toMatchImageSnapshot();\n });\n\n test('Should render a button in a paragraph', async () => {\n const paragraphs = [`<p>This is a <mg-button>button</mg-button> in a paragraph.</p>`, `<p>This is a <mg-button variant=\"link\">button</mg-button> in a paragraph.</p>`];\n const html = paragraphs.join('');\n const page = await createPage(html);\n\n const screenshot = await page.screenshot();\n expect(screenshot).toMatchImageSnapshot();\n });\n\n test.each(variants)('Should render focused and hover %s button', async variant => {\n const page = await createPage(`\n <mg-button variant=\"${variant}\">${variant}:focus</mg-button>\n <mg-button variant=\"${variant}\" class=\"hover\">${variant}:hover</mg-button>\n `);\n\n await page.keyboard.down('Tab');\n await page.waitForChanges();\n\n const button = await page.find('mg-button.hover');\n button.hover();\n\n const screenshot = await page.screenshot();\n expect(screenshot).toMatchImageSnapshot();\n });\n\n test('Should render a full-width button', async () => {\n const slots = ['batman', '<mg-icon icon=\"check-circle\"></mg-icon>batman'];\n const html = slots.map(slot => `<mg-button full-width>${slot}</mg-button>`).join('');\n\n const page = await createPage(html);\n\n const screenshot = await page.screenshot();\n expect(screenshot).toMatchImageSnapshot();\n });\n\n describe.each([\n '<mg-button disable-on-click>Message action</mg-button>',\n '<mg-button disable-on-click label=\"test\" is-icon><mg-icon icon=\"info-circle\"></mg-icon></mg-button>',\n '<mg-button disable-on-click><mg-icon icon=\"info-circle\"></mg-icon> Message action</mg-button>',\n ])('template', template => {\n test('should disable button after keyUp \"Space\"', async () => {\n const page = await createPage(template);\n const button = await page.find('mg-button');\n\n const screenshot = await page.screenshot();\n expect(screenshot).toMatchImageSnapshot();\n\n await button.press('Space');\n\n // Wait for spinner to be displayed\n await page.waitForChanges();\n\n // Remove spinner annimation for screenshot\n await page.$eval('mg-button', elm => {\n const svg = elm.shadowRoot.querySelector('mg-icon').shadowRoot.querySelector('svg');\n svg.classList.remove('mg-icon--spin');\n });\n await page.waitForChanges();\n\n const screenshotLoading = await page.screenshot();\n expect(screenshotLoading).toMatchImageSnapshot();\n });\n });\n\n test('should render a link like a button', async () => {\n const links = [\n '<a href=\"#\" class=\"mg-button mg-button--primary\">a.mg-button</a>',\n '<a href=\"#\" class=\"mg-button mg-button--primary\"><mg-icon icon=\"check-circle\"></mg-icon>a.mg-button w/ icon</a>',\n '<a href=\"#\" class=\"mg-button mg-button--primary mg-button--icon\"><mg-icon icon=\"check-circle\"></mg-icon></a>',\n ];\n const html = links.map(link => `<div>${link}</div>`).join('');\n const page = await createPage(`<link rel=\"stylesheet\" href=\"http://localhost:3333/build/mg-components.css\" />${html}`, { width: 200, height: links.length * buttonHeight });\n\n const screenshot = await page.screenshot();\n expect(screenshot).toMatchImageSnapshot();\n });\n});\n"]}
1	+ {"version":3,"file":"mg-button.e2e.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-button/test/mg-button.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { createPage } from '../../../../utils/stencil.e2e.test.utils';\nimport { variants } from '../mg-button.conf';\n\nconst buttonHeight = 35;\n\ndescribe('mg-button', () => {\n test('Should render', async () => {\n const html = variants\n .map(\n variant => `<div>\n <mg-button variant=\"${variant}\">${variant}</mg-button>\n <mg-button variant=\"${variant}\" is-icon><mg-icon icon=\"check-circle\"></mg-icon></mg-button>\n <mg-button variant=\"${variant}\" disabled>disabled</mg-button>\n <mg-button variant=\"${variant}\" is-icon disabled label=\"disabled\"><mg-icon icon=\"check-circle\"></mg-icon></mg-button>\n </div>`,\n )\n .join('');\n const page = await createPage(html, { width: 250, height: variants.length * buttonHeight });\n\n const screenshot = await page.screenshot();\n expect(screenshot).toMatchImageSnapshot();\n });\n\n test('Should render whith icon slot', async () => {\n const slots = ['<mg-icon icon=\"trash\"></mg-icon>Text button', '<mg-icon icon=\"trash\"></mg-icon>Text button<mg-badge value=\"1\" label=\"label\"></mg-badge>'];\n const html = slots.map(slot => `<div><mg-button>${slot}</mg-button></div>`).join('');\n const page = await createPage(html, { width: 150, height: slots.length * buttonHeight });\n\n const screenshot = await page.screenshot();\n expect(screenshot).toMatchImageSnapshot();\n });\n\n test('Should render a 2 lines button', async () => {\n const page = await createPage(`<mg-button>Button with a<br> two lines text</mg-button>`);\n\n const screenshot = await page.screenshot();\n expect(screenshot).toMatchImageSnapshot();\n });\n\n test('Should render a button in a paragraph', async () => {\n const paragraphs = [`<p>This is a <mg-button>button</mg-button> in a paragraph.</p>`, `<p>This is a <mg-button variant=\"link\">button</mg-button> in a paragraph.</p>`];\n const html = paragraphs.join('');\n const page = await createPage(html);\n\n const screenshot = await page.screenshot();\n expect(screenshot).toMatchImageSnapshot();\n });\n\n test.each(variants)('Should render focused and hover %s button', async variant => {\n const page = await createPage(`\n <mg-button variant=\"${variant}\">${variant}:focus</mg-button>\n <mg-button variant=\"${variant}\" class=\"hover\">${variant}:hover</mg-button>\n `);\n\n await page.keyboard.down('Tab');\n await page.waitForChanges();\n\n const button = await page.find('mg-button.hover');\n button.hover();\n\n const screenshot = await page.screenshot();\n expect(screenshot).toMatchImageSnapshot();\n });\n\n test('Should render a full-width button', async () => {\n const slots = ['batman', '<mg-icon icon=\"check-circle\"></mg-icon>batman'];\n const html = slots.map(slot => `<mg-button full-width>${slot}</mg-button>`).join('');\n\n const page = await createPage(html);\n\n const screenshot = await page.screenshot();\n expect(screenshot).toMatchImageSnapshot();\n });\n\n describe.each([\n '<mg-button disable-on-click>Message action</mg-button>',\n '<mg-button disable-on-click label=\"test\" is-icon><mg-icon icon=\"info-circle\"></mg-icon></mg-button>',\n '<mg-button disable-on-click><mg-icon icon=\"info-circle\"></mg-icon> Message action</mg-button>',\n ])('template', template => {\n test('should disable button after keyUp \"Space\"', async () => {\n const page = await createPage(template);\n const button = await page.find('mg-button');\n\n const screenshot = await page.screenshot();\n expect(screenshot).toMatchImageSnapshot();\n\n await button.press('Space');\n\n // Wait for spinner to be displayed\n await page.waitForChanges();\n\n // Remove spinner annimation for screenshot\n await page.$eval('mg-button', elm => {\n const svg = elm.shadowRoot.querySelector('mg-icon').shadowRoot.querySelector('svg');\n svg.classList.remove('mg-c-icon--spin');\n });\n await page.waitForChanges();\n\n const screenshotLoading = await page.screenshot();\n expect(screenshotLoading).toMatchImageSnapshot();\n });\n });\n\n test('should render a link like a button', async () => {\n const links = [\n '<a href=\"#\" class=\"mg-c-button mg-c-button--primary\">a.mg-button</a>',\n '<a href=\"#\" class=\"mg-c-button mg-c-button--primary\"><mg-icon icon=\"check-circle\"></mg-icon>a.mg-button w/ icon</a>',\n '<a href=\"#\" class=\"mg-c-button mg-c-button--primary mg-c-button--icon\"><mg-icon icon=\"check-circle\"></mg-icon></a>',\n ];\n const html = links.map(link => `<div>${link}</div>`).join('');\n const page = await createPage(`<link rel=\"stylesheet\" href=\"http://localhost:3333/build/mg-components.css\" />${html}`, { width: 200, height: links.length * buttonHeight });\n\n const screenshot = await page.screenshot();\n expect(screenshot).toMatchImageSnapshot();\n });\n});\n"]}

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

@@ -28,13 +28,13 @@ describe('mg-button', () => {
   test('Should replace classes on variant changes', async () => {
     const page = await getPage({ variant: 'primary', label: 'label' });
     const element = page.doc.querySelector('mg-button');
-    let classPrimary = element.shadowRoot.querySelector('.mg-button--primary');
+    let classPrimary = element.shadowRoot.querySelector('.mg-c-button--primary');
     expect(classPrimary).not.toBeNull();
     // Change variant
     element.variant = 'danger';
     await page.waitForChanges();
-    classPrimary = element.shadowRoot.querySelector('.mg-button--primary');
-    const classDanger = element.shadowRoot.querySelector('.mg-button--danger');
+    classPrimary = element.shadowRoot.querySelector('.mg-c-button--primary');
+    const classDanger = element.shadowRoot.querySelector('.mg-c-button--danger');
     expect(classPrimary).toBeNull();
     expect(classDanger).not.toBeNull();
   });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-button.spec.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-button/test/mg-button.spec.tsx"],"names":[],"mappings":"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","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"]}
1	+ {"version":3,"file":"mg-button.spec.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-button/test/mg-button.spec.tsx"],"names":[],"mappings":"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","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-c-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-c-button--primary');\n const classDanger = element.shadowRoot.querySelector('.mg-c-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.js CHANGED Viewed

@@ -7,7 +7,7 @@ export class MgCard {
      * Private *
      *************/
     this.name = 'mg-card';
-    this.baseClass = this.name;
+    this.classBase = 'mg-c-card';
     /**
      * Methode to set default varianStyle props
      * needeed has stencil doesn't know that props is mutated when updated in prop watcher
@@ -18,27 +18,27 @@ export class MgCard {
     };
     this.variant = undefined;
     this.variantStyle = undefined;
-    this.classCollection = new ClassList([this.baseClass]);
+    this.classCollection = new ClassList([this.classBase]);
   }
   validateVariant(newValue, oldValue) {
     if (newValue && !variants.includes(newValue))
       throw new Error(`<${this.name}> prop "variant" must match VariantType type.`);
-    if (Boolean(newValue)) {
+    if (newValue) {
       this.setDefaultVariantStyle();
-      this.classCollection.add(`${this.baseClass}--${newValue}`);
+      this.classCollection.add(`${this.classBase}--${newValue}`);
     }
-    if (Boolean(oldValue))
-      this.classCollection.delete(`${this.baseClass}--${oldValue}`);
+    if (oldValue)
+      this.classCollection.delete(`${this.classBase}--${oldValue}`);
   }
   validateVariantStyle(newValue, oldValue) {
     if (newValue && !variantStyles.includes(newValue))
       throw new Error(`<${this.name}> prop "variantStyle" must match VariantStyleType type.`);
     else if (Boolean(newValue) && !variants.includes(this.variant))
       throw new Error(`<${this.name}> prop "variantStyle" must be paired with ${JSON.stringify(variants)} "variant" prop.`);
-    if (Boolean(newValue))
-      this.classCollection.add(`${this.baseClass}--${newValue}`);
-    if (Boolean(oldValue))
-      this.classCollection.delete(`${this.baseClass}--${oldValue}`);
+    if (newValue)
+      this.classCollection.add(`${this.classBase}--${newValue}`);
+    if (oldValue)
+      this.classCollection.delete(`${this.classBase}--${oldValue}`);
   }
   /*************
    * Lifecycle *
@@ -56,18 +56,18 @@ export class MgCard {
    */
   render() {
     var _a;
-    return (h("div", { class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { class: "mg-card__bar" }), h("slot", null)));
+    return (h("div", { class: this.classCollection.join() }, ((_a = this.variantStyle) === null || _a === void 0 ? void 0 : _a.startsWith('bar-')) && h("span", { class: "mg-c-card__bar" }), h("slot", null)));
   }
   static get is() { return "mg-card"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["mg-card.scss"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-card.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["mg-card.css"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-card.css"]
     };
   }
   static get properties() {

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

	@@ -1 +1 @@
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"]}
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,WAAW,CAAC;IAsCzC;;;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,QAAQ,EAAE;MACZ,IAAI,CAAC,sBAAsB,EAAE,CAAC;MAC9B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;KAC5D;IACD,IAAI,QAAQ;MAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;EAC9E,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,QAAQ;MAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;IACzE,IAAI,QAAQ;MAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;EAC9E,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,gBAAgB,GAAQ;MAC9E,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: '../../../../node_modules/@mgdis/styles/dist/components/mg-card.css',\n shadow: true,\n})\nexport class MgCard {\n /************\n Private \n **********/\n\n private readonly name = 'mg-card';\n private readonly classBase = 'mg-c-card';\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 (newValue) {\n this.setDefaultVariantStyle();\n this.classCollection.add(`${this.classBase}--${newValue}`);\n }\n if (oldValue) this.classCollection.delete(`${this.classBase}--${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 (newValue) this.classCollection.add(`${this.classBase}--${newValue}`);\n if (oldValue) this.classCollection.delete(`${this.classBase}--${oldValue}`);\n }\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList([this.classBase]);\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-c-card__bar\"></span>}\n <slot></slot>\n </div>\n );\n }\n}\n"]}

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

@@ -26,18 +26,18 @@ export class MgCharacterLeft {
    * @returns HTML Element
    */
   render() {
-    return (h("span", { id: this.identifier, "aria-live": "polite" }, h("span", { "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { class: "sr-only" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
+    return (h("span", { id: this.identifier, "aria-live": "polite" }, h("span", { "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { class: "mg-u-visually-hidden" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
   }
   static get is() { return "mg-character-left"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
-      "$": ["mg-character-left.scss"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-character-left.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["mg-character-left.css"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-character-left.css"]
     };
   }
   static get properties() {

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

	@@ -1 +1 @@
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"]}
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,sBAAsB,IAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAQ,CAC7H,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: '../../../../node_modules/@mgdis/styles/dist/components/mg-character-left.css',\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=\"mg-u-visually-hidden\">{this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length)}</span>\n </span>\n );\n }\n}\n"]}

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

@@ -9,20 +9,20 @@ export class MgDivider {
    */
   render() {
     return (h("div", { class: {
-        'mg-divider': true,
-        'mg-divider--full': this.size === 'full',
+        'mg-c-divider': true,
+        'mg-c-divider--full': this.size === 'full',
       } }));
   }
   static get is() { return "mg-divider"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["mg-divider.scss"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-divider.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["mg-divider.css"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-divider.css"]
     };
   }
   static get properties() {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-divider.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-divider/mg-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,SAAS;;gBAQe,SAAS;;EAE5C;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,WACE,KAAK,EAAE;QACL,~~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"]}
1	+ {"version":3,"file":"mg-divider.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-divider/mg-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,SAAS;;gBAQe,SAAS;;EAE5C;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,WACE,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,oBAAoB,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;OAC3C,GACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'mg-divider',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-divider.css',\n shadow: true,\n})\nexport class MgDivider {\n /*************\n Decorators \n ***********/\n\n /\n * Define component size\n /\n @Prop() size: 'regular' \| 'full' = 'regular';\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div\n class={{\n 'mg-c-divider': true,\n 'mg-c-divider--full': this.size === 'full',\n }}\n ></div>\n );\n }\n}\n"]}

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

@@ -29,15 +29,15 @@ export class MgIcon {
     this.variant = undefined;
     this.variantStyle = undefined;
     this.spin = false;
-    this.classCollection = new ClassList(['mg-icon']);
+    this.classCollection = new ClassList(['mg-c-icon']);
   }
   validateIcon(newValue, oldValue) {
     if (!iconList.includes(newValue))
       throw new Error(`<mg-icon> prop "icon" must be one of: ${iconList.join(', ')}`);
     else {
       if (oldValue !== undefined)
-        this.classCollection.delete(`mg-icon--${oldValue}`);
-      this.classCollection.add(`mg-icon--${newValue}`);
+        this.classCollection.delete(`mg-c-icon--${oldValue}`);
+      this.classCollection.add(`mg-c-icon--${newValue}`);
       this.renderIcon(newValue);
     }
   }
@@ -46,41 +46,39 @@ export class MgIcon {
       throw new Error(`<mg-icon> prop "size" must be one of: ${sizes.join(', ')}`);
     else {
       if (oldValue !== undefined)
-        this.classCollection.delete(`mg-icon--size-${oldValue}`);
-      this.classCollection.add(`mg-icon--size-${newValue}`);
+        this.classCollection.delete(`mg-c-icon--size-${oldValue}`);
+      this.classCollection.add(`mg-c-icon--size-${newValue}`);
     }
   }
   validateVariant(newValue, oldValue) {
-    if (Boolean(newValue)) {
+    if (newValue) {
       if (!variants.includes(newValue))
         throw new Error(`<mg-icon> prop "variant" must be one of: ${variants.join(', ')}`);
       else {
         this.setDefaultVariantStyle();
         if (oldValue !== undefined)
-          this.classCollection.delete(`mg-icon--variant-${oldValue}`);
-        this.classCollection.add(`mg-icon--variant-${newValue}`);
+          this.classCollection.delete(`mg-c-icon--variant-${oldValue}`);
+        this.classCollection.add(`mg-c-icon--variant-${newValue}`);
       }
     }
   }
   validateVariantStyle(newValue, oldValue) {
-    if (Boolean(newValue)) {
+    if (newValue) {
       if (!variantStyles.includes(newValue))
         throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles.join(', ')}`);
       else {
         if (oldValue !== undefined)
-          this.classCollection.delete(`mg-icon--variant-style-${oldValue}`);
-        this.classCollection.add(`mg-icon--variant-style-${newValue}`);
+          this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);
+        this.classCollection.add(`mg-c-icon--variant-style-${newValue}`);
       }
     }
   }
   handleSpin(newValue) {
     if (newValue) {
-      this.classCollection.add('mg-icon--spin');
-      this.classCollection.add('mg-a11y-animation');
+      this.classCollection.add('mg-c-icon--spin');
     }
     else {
-      this.classCollection.delete('mg-icon--spin');
-      this.classCollection.delete('mg-a11y-animation');
+      this.classCollection.delete('mg-c-icon--spin');
     }
   }
   /**
@@ -105,12 +103,12 @@ export class MgIcon {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["mg-icon.scss"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-icon.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["mg-icon.css"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-icon.css"]
     };
   }
   static get properties() {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-icon.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-icon/mg-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAuD,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACrH,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,QAAQ,MAAM,kCAAkC,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAO9C,MAAM,OAAO,MAAM;;~~IA0FjB~~;;;OAGG;IACK,2BAAsB,GAAG,GAAS,EAAE;MAC1C,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS;QAAE,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACxE,CAAC,CAAC;IAEF;;;OAGG;IACK,eAAU,GAAG,IAAI,CAAC,EAAE;MAC1B,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;MAChD,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;MACxD,wBAAwB;MACxB,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;MAC7C,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;MAC5C,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC;IAC9D,CAAC,CAAC;;~~gBApF2B~~,SAAS;;;gBAgDvB,KAAK;~~2BAekB~~,IAAI,SAAS,CAAC,CAAC,~~SAAS~~,CAAC,CAAC;;~~EA3EhE~~,YAAY,CAAC,QAAwB,EAAE,QAAyB;IAC9D,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,yCAAyC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SAC7G;MACH,IAAI,QAAQ,KAAK,SAAS;QAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,~~YAAY~~,QAAQ,EAAE,CAAC,CAAC;~~MAChF~~,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,~~YAAY~~,QAAQ,EAAE,CAAC,CAAC;~~MACjD~~,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;KAC3B;EACH,CAAC;EAOD,YAAY,CAAC,QAAwB,EAAE,QAAyB;IAC9D,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,yCAAyC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SACvG;MACH,IAAI,QAAQ,KAAK,SAAS;QAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,~~iBAAiB~~,QAAQ,EAAE,CAAC,CAAC;~~MACrF~~,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,~~iBAAiB~~,QAAQ,EAAE,CAAC,CAAC;~~KACvD~~;EACH,CAAC;EAOD,eAAe,CAAC,QAA2B,EAAE,QAA4B;IACvE,IAAI,~~OAAO,CAAC,~~QAAQ,~~CAAC,~~EAAE;~~MACrB~~,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,4CAA4C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;WAChH;QACH,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,QAAQ,KAAK,SAAS;UAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,~~oBAAoB~~,QAAQ,EAAE,CAAC,CAAC;~~QACxF~~,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,~~oBAAoB~~,QAAQ,EAAE,CAAC,CAAC;~~OAC1D~~;KACF;EACH,CAAC;EAWD,oBAAoB,CAAC,QAAgC,EAAE,QAAiC;IACtF,IAAI,~~OAAO,CAAC,~~QAAQ,~~CAAC,~~EAAE;~~MACrB~~,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,iDAAiD,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;WAC/H;QACH,IAAI,QAAQ,KAAK,SAAS;UAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,~~0BAA0B~~,QAAQ,EAAE,CAAC,CAAC;~~QAC9F~~,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,~~0BAA0B~~,QAAQ,EAAE,CAAC,CAAC;~~OAChE~~;KACF;EACH,CAAC;EAOD,UAAU,CAAC,QAAwB;IACjC,IAAI,QAAQ,EAAE;MACZ,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,~~eAAe~~,CAAC,CAAC;~~MAC1C,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC~~;~~KAC/C;~~SAAM;MACL,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,~~eAAe~~,CAAC,CAAC;~~MAC7C,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC~~;~~KAClD;~~EACH,CAAC;EA4BD;;KAEG;EACH,iBAAiB;IACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC7C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3B,cAAc;IACd,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC7B,CAAC;EAED;;KAEG;EACH,mBAAmB;IACjB,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC;EAC9D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Watch, State, Element } from '@stencil/core';\nimport { sizes, variants, IconVariantType, IconSizeType, IconVariantStyleType, variantStyles } from './mg-icon.conf';\nimport { ClassList } from '../../../utils/components.utils';\nimport iconList from '@mgdis/img/dist/icons/index.json';\nimport { icons } from '../../../assets/icons';\n\n@Component({\n tag: 'mg-icon',\n styleUrl: '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"]}
1	+ {"version":3,"file":"mg-icon.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-icon/mg-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAuD,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACrH,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,QAAQ,MAAM,kCAAkC,CAAC;AACxD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAO9C,MAAM,OAAO,MAAM;;IAwFjB;;;OAGG;IACK,2BAAsB,GAAG,GAAS,EAAE;MAC1C,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS;QAAE,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACxE,CAAC,CAAC;IAEF;;;OAGG;IACK,eAAU,GAAG,IAAI,CAAC,EAAE;MAC1B,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;MAChD,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;MACxD,wBAAwB;MACxB,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;MAC7C,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;MAC5C,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC;IAC9D,CAAC,CAAC;;gBAlF2B,SAAS;;;gBAgDvB,KAAK;2BAakB,IAAI,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;;EAzElE,YAAY,CAAC,QAAwB,EAAE,QAAyB;IAC9D,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,yCAAyC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SAC7G;MACH,IAAI,QAAQ,KAAK,SAAS;QAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,cAAc,QAAQ,EAAE,CAAC,CAAC;MAClF,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,cAAc,QAAQ,EAAE,CAAC,CAAC;MACnD,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;KAC3B;EACH,CAAC;EAOD,YAAY,CAAC,QAAwB,EAAE,QAAyB;IAC9D,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,yCAAyC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SACvG;MACH,IAAI,QAAQ,KAAK,SAAS;QAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,mBAAmB,QAAQ,EAAE,CAAC,CAAC;MACvF,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,mBAAmB,QAAQ,EAAE,CAAC,CAAC;KACzD;EACH,CAAC;EAOD,eAAe,CAAC,QAA2B,EAAE,QAA4B;IACvE,IAAI,QAAQ,EAAE;MACZ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,4CAA4C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;WAChH;QACH,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,QAAQ,KAAK,SAAS;UAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,sBAAsB,QAAQ,EAAE,CAAC,CAAC;QAC1F,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,sBAAsB,QAAQ,EAAE,CAAC,CAAC;OAC5D;KACF;EACH,CAAC;EAWD,oBAAoB,CAAC,QAAgC,EAAE,QAAiC;IACtF,IAAI,QAAQ,EAAE;MACZ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,iDAAiD,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;WAC/H;QACH,IAAI,QAAQ,KAAK,SAAS;UAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,4BAA4B,QAAQ,EAAE,CAAC,CAAC;QAChG,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,4BAA4B,QAAQ,EAAE,CAAC,CAAC;OAClE;KACF;EACH,CAAC;EAOD,UAAU,CAAC,QAAwB;IACjC,IAAI,QAAQ,EAAE;MACZ,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;KAC7C;SAAM;MACL,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;KAChD;EACH,CAAC;EA4BD;;KAEG;EACH,iBAAiB;IACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC7C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3B,cAAc;IACd,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC7B,CAAC;EAED;;KAEG;EACH,mBAAmB;IACjB,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC;EAC9D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Watch, State, Element } from '@stencil/core';\nimport { sizes, variants, IconVariantType, IconSizeType, IconVariantStyleType, variantStyles } from './mg-icon.conf';\nimport { ClassList } from '../../../utils/components.utils';\nimport iconList from '@mgdis/img/dist/icons/index.json';\nimport { icons } from '../../../assets/icons';\n\n@Component({\n tag: 'mg-icon',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-icon.css',\n shadow: true,\n})\nexport class MgIcon {\n private svg: SVGSVGElement;\n\n /*\n Icon HTML Element\n /\n @Element() element: HTMLMgIconElement;\n\n /\n Icon to display.\n /\n @Prop() icon!: string;\n @Watch('icon')\n validateIcon(newValue: MgIcon['icon'], oldValue?: MgIcon['icon']): void {\n if (!iconList.includes(newValue)) throw new Error(`<mg-icon> prop \"icon\" must be one of: ${iconList.join(', ')}`);\n else {\n if (oldValue !== undefined) this.classCollection.delete(`mg-c-icon--${oldValue}`);\n this.classCollection.add(`mg-c-icon--${newValue}`);\n this.renderIcon(newValue);\n }\n }\n\n /\n Define icon size\n /\n @Prop() size: IconSizeType = 'regular';\n @Watch('size')\n validateSize(newValue: MgIcon['size'], oldValue?: MgIcon['size']): void {\n if (!sizes.includes(newValue)) throw new Error(`<mg-icon> prop \"size\" must be one of: ${sizes.join(', ')}`);\n else {\n if (oldValue !== undefined) this.classCollection.delete(`mg-c-icon--size-${oldValue}`);\n this.classCollection.add(`mg-c-icon--size-${newValue}`);\n }\n }\n\n /\n Define icon variant color\n /\n @Prop() variant: IconVariantType;\n @Watch('variant')\n validateVariant(newValue: MgIcon['variant'], oldValue?: MgIcon['variant']): void {\n if (newValue) {\n if (!variants.includes(newValue)) throw new Error(`<mg-icon> prop \"variant\" must be one of: ${variants.join(', ')}`);\n else {\n this.setDefaultVariantStyle();\n if (oldValue !== undefined) this.classCollection.delete(`mg-c-icon--variant-${oldValue}`);\n this.classCollection.add(`mg-c-icon--variant-${newValue}`);\n }\n }\n }\n\n /\n Define icon color variant style\n * Add a color to the icon based on variant color with given style\n * 'full': Used to set a circular background with variant soft color and icon variant color\n * 'background': Used to set a circular background with variant soft color\n * 'icon': Used to set a color only to the icon\n /\n @Prop({ mutable: true }) variantStyle: IconVariantStyleType;\n @Watch('variantStyle')\n validateVariantStyle(newValue: MgIcon['variantStyle'], oldValue?: MgIcon['variantStyle']): void {\n if (newValue) {\n if (!variantStyles.includes(newValue)) throw new Error(`<mg-icon> prop \"variantStyle\" must be one of: ${variantStyles.join(', ')}`);\n else {\n if (oldValue !== undefined) this.classCollection.delete(`mg-c-icon--variant-style-${oldValue}`);\n this.classCollection.add(`mg-c-icon--variant-style-${newValue}`);\n }\n }\n }\n\n /\n Make the icon spin\n /\n @Prop() spin = false;\n @Watch('spin')\n handleSpin(newValue: MgIcon['spin']): void {\n if (newValue) {\n this.classCollection.add('mg-c-icon--spin');\n } else {\n this.classCollection.delete('mg-c-icon--spin');\n }\n }\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-icon']);\n\n /\n Method to set default varianStyle props\n * needeed has stencil doesn't know that props is mutated when updated in prop watcher\n /\n private setDefaultVariantStyle = (): void => {\n if (this.variantStyle === undefined) this.variantStyle = 'background';\n };\n\n /\n Render icon in shadowroot\n * @param icon - icon to render\n /\n private renderIcon = icon => {\n this.element.shadowRoot.innerHTML = icons[icon];\n this.svg = this.element.shadowRoot.querySelector('svg');\n // update svg attributes\n this.svg.setAttribute('aria-hidden', 'true');\n this.svg.setAttribute('focusable', 'false');\n this.svg.setAttribute('class', this.classCollection.join());\n };\n\n /\n Check if props are well configured on init\n /\n componentWillLoad(): void {\n this.validateIcon(this.icon);\n this.validateSize(this.size);\n this.validateVariant(this.variant);\n this.validateVariantStyle(this.variantStyle);\n this.handleSpin(this.spin);\n // render icon\n this.renderIcon(this.icon);\n }\n\n /\n update html when component trigger changes\n */\n componentWillUpdate() {\n this.svg.setAttribute('class', this.classCollection.join());\n }\n}\n"]}

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

@@ -30,13 +30,13 @@ describe('mg-icon', () => {
     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' }, initialClass: ['.mg-c-icon--chevron-up'], nextProps: { icon: 'chevron-down' }, nextClass: ['.mg-c-icon--chevron-down'] },
+    { initialProps: { icon: 'chevron-up' }, initialClass: ['.mg-c-icon--size-regular'], nextProps: { size: 'large' }, nextClass: ['.mg-c-icon--size-large'] },
     {
       initialProps: { icon: 'chevron-up', variant: 'success', variantStyle: 'icon' },
-      initialClass: ['.mg-icon--variant-success', '.mg-icon--variant-style-icon'],
+      initialClass: ['.mg-c-icon--variant-success', '.mg-c-icon--variant-style-icon'],
       nextProps: { variant: 'danger', variantStyle: 'background' },
-      nextClass: ['.mg-icon--variant-danger', '.mg-icon--variant-style-background'],
+      nextClass: ['.mg-c-icon--variant-danger', '.mg-c-icon--variant-style-background'],
     },
   ])('Should replace classes on icon changes', async ({ initialProps, initialClass, nextProps, nextClass }) => {
     const page = await getPage(initialProps);

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

	@@ -1 +1 @@
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~~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","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"]}
1	+ {"version":3,"file":"mg-icon.spec.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-icon/test/mg-icon.spec.tsx"],"names":[],"mappings":"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","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-c-icon--chevron-up'], nextProps: { icon: 'chevron-down' }, nextClass: ['.mg-c-icon--chevron-down'] },\n { initialProps: { icon: 'chevron-up' }, initialClass: ['.mg-c-icon--size-regular'], nextProps: { size: 'large' }, nextClass: ['.mg-c-icon--size-large'] },\n {\n initialProps: { icon: 'chevron-up', variant: 'success', variantStyle: 'icon' },\n initialClass: ['.mg-c-icon--variant-success', '.mg-c-icon--variant-style-icon'],\n nextProps: { variant: 'danger', variantStyle: 'background' },\n nextClass: ['.mg-c-icon--variant-danger', '.mg-c-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 CHANGED Viewed

@@ -1,13 +1,15 @@
 import { h } from "@stencil/core";
+import { isValidString } from "../../../utils/components.utils";
 export class MgInputTitle {
   constructor() {
     this.identifier = undefined;
     this.required = undefined;
+    this.readonly = undefined;
     this.isLegend = false;
     this.tagName = 'label';
   }
   validateIdentifier(newValue) {
-    if (typeof newValue !== 'string' || newValue.trim() === '') {
+    if (!isValidString(newValue)) {
       throw new Error('<mg-input-title> prop "identifier" is required.');
     }
   }
@@ -29,20 +31,20 @@ export class MgInputTitle {
    * @returns HTML element
    */
   render() {
-    const TagName = this.tagName;
+    const TagName = this.readonly ? 'span' : this.tagName;
     // \u00A0 represent a &nbsp;
-    return (h(TagName, { class: "mg-input-title", htmlFor: this.isLegend ? undefined : this.identifier }, h("slot", null), this.required && (h("span", { class: "mg-input-title__required" }, "\u00A0", h("span", { class: "is-asterisk" }, "*")))));
+    return (h(TagName, { class: "mg-c-input-title", htmlFor: this.isLegend ? undefined : this.identifier }, h("slot", null), this.required && (h("span", { class: "mg-c-input-title__required" }, "\u00A0", h("span", { class: "mg-u-is-asterisk" }, "*")))));
   }
   static get is() { return "mg-input-title"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
-      "$": ["mg-input-title.scss"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-input-title.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["mg-input-title.css"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-input-title.css"]
     };
   }
   static get properties() {
@@ -81,6 +83,23 @@ export class MgInputTitle {
         "attribute": "required",
         "reflect": false
       },
+      "readonly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If input is required an asterisk is added at the end of the label"
+        },
+        "attribute": "readonly",
+        "reflect": false
+      },
       "isLegend": {
         "type": "boolean",
         "mutable": false,

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

	@@ -1 +1 @@
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  \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  <span class=\"is-asterisk\"></span>\n </span>\n )}\n </TagName>\n );\n }\n}\n"]}
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;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAOhE,MAAM,OAAO,YAAY;;;;;oBAyBJ,KAAK;mBASL,OAAO;;EA5B1B,kBAAkB,CAAC,QAAoC;IACrD,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;MAC5B,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;KACpE;EACH,CAAC;EAiBD,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,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;IACtD,4BAA4B;IAC5B,OAAO,CACL,EAAC,OAAO,IAAC,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU;MACpF,eAAa;MACZ,IAAI,CAAC,QAAQ,IAAI,CAChB,YAAM,KAAK,EAAC,4BAA4B;;QAChC,YAAM,KAAK,EAAC,kBAAkB,QAAS,CACxC,CACR,CACO,CACX,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { isValidString } from '../../../utils/components.utils';\n\n@Component({\n tag: 'mg-input-title',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-input-title.css',\n scoped: true,\n})\nexport class MgInputTitle {\n /*\n Label input id\n /\n @Prop() identifier!: string;\n @Watch('identifier')\n validateIdentifier(newValue: MgInputTitle['identifier']): void {\n if (!isValidString(newValue)) {\n throw new Error('<mg-input-title> prop \"identifier\" is required.');\n }\n }\n\n /\n If input is required an asterisk is added at the end of the label\n /\n @Prop() required: boolean;\n\n /\n If input is required an asterisk is added at the end of the label\n /\n @Prop() readonly: boolean;\n\n /\n Switch from label to fieldset sementic\n /\n @Prop() isLegend = false;\n @Watch('isLegend')\n validateIsLegend(newValue: MgInputTitle['isLegend']) {\n this.tagName = newValue ? 'legend' : 'label';\n }\n\n /\n Component parent tagname\n /\n @State() tagName = 'label';\n\n /***********\n Lifecycle \n **********/\n\n /\n * Init tag name\n /\n componentWillLoad(): void {\n this.validateIdentifier(this.identifier);\n this.validateIsLegend(this.isLegend);\n }\n\n /\n Render\n * @returns HTML element\n /\n render(): HTMLElement {\n const TagName = this.readonly ? 'span' : this.tagName;\n // \\u00A0 represent a  \n return (\n <TagName class=\"mg-c-input-title\" htmlFor={this.isLegend ? undefined : this.identifier}>\n <slot></slot>\n {this.required && (\n <span class=\"mg-c-input-title__required\">\n  <span class=\"mg-u-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.playwright.js ADDED Viewed

@@ -0,0 +1,12 @@
+import { renderAttributes } from "../../../../utils/e2e.test.utils";
+import { setPageContent, describe, testEach, expect } from "../../../../utils/playwright.e2e.test.utils";
+const createHtml = args => `<mg-input-title ${renderAttributes(Object.assign(Object.assign({}, args), { identifier: 'identifier' }))}>Label</mg-input-title>`;
+const TIMEOUT = 1000;
+describe('mg-input-title', () => {
+  testEach([true, false].flatMap(isLegend => [true, false].flatMap(required => [true, false].map(readonly => ({ isLegend, required, readonly })))))('Should render %s', async (page, args) => {
+    await setPageContent(page, createHtml(args));
+    await page.locator('mg-input-title.hydrated').waitFor({ timeout: TIMEOUT });
+    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+  });
+});
+//# sourceMappingURL=mg-input-title.e2e.playwright.js.map