@mgdis/mg-components 5.16.0 → 5.18.0

package/dist/collection/components/molecules/mg-illustrated-message/test/mg-illustrated-message.e2e.js

@@ -0,0 +1,39 @@
+import { createPage } from "../../../../utils/stencil.e2e.test.utils";
+const template = (size = 'regular', direction = 'vertical') => `<mg-illustrated-message size="${size}" direction="${direction}">
+<svg slot="illustration" width="190" height="350" viewBox="0 0 190 350" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M0 0H15C23.2843 0 30 6.71573 30 15V290H40V15C40 6.71573 46.7157 0 55 0C63.2843 0 70 6.71573 70 15V275C70 277.761 67.7615 280 65 280H60V40H50V340H60V290H65C67.7615 290 70 292.239 70 295V340H80V295C80 291.158 78.5558 287.654 76.1805 285C78.5558 282.346 80 278.842 80 275V0H95C103.284 0 110 6.71573 110 15V25C110 28.8418 108.556 32.3462 106.181 35C108.556 37.6538 110 41.1582 110 45V305C110 307.761 107.761 310 105 310H100V45C100 42.2386 97.7615 40 95 40H90V325C90 333.284 96.7157 340 105 340H120V330H105C102.239 330 100 327.761 100 325V320H105C113.284 320 120 313.284 120 305V15C120 6.71573 126.716 0 135 0C143.284 0 150 6.71573 150 15V330H140V15C140 12.2386 137.761 10 135 10C132.239 10 130 12.2386 130 15V340H165C173.284 340 180 333.284 180 325V15C180 12.2386 177.761 10 175 10H170V325C170 327.761 167.761 330 165 330H160V0H175C183.284 0 190 6.71573 190 15V350H0V0ZM10 325C10 333.284 16.7157 340 25 340C33.2843 340 40 333.284 40 325V300H30V325C30 327.761 27.7615 330 25 330C22.2385 330 20 327.761 20 325V15C20 12.2386 17.7615 10 15 10H10V325ZM60 15V30H50V15C50 12.2386 52.2385 10 55 10C57.7615 10 60 12.2386 60 15ZM95 30H90V10H95C97.7615 10 100 12.2386 100 15V25C100 27.7614 97.7615 30 95 30Z"
+    fill="black"
+  />
+</svg>
+<h2 slot="title">Lorem Ipsum</h2>
+<h3 slot="details">The standard Lorem Ipsum passage, used since the 1500s</h3>
+<div slot="details">
+  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.
+</div>
+</mg-illustrated-message>`;
+describe('mg-illustrated-message', () => {
+  test.each(['regular', 'small'])('renders size %', async (size) => {
+    const page = await createPage(template(size));
+    const element = await page.find('mg-illustrated-message');
+    expect(element).toHaveClass('hydrated');
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  test('renders horizontal', async () => {
+    const page = await createPage(template(undefined, 'horizontal'));
+    const element = await page.find('mg-illustrated-message');
+    expect(element).toHaveClass('hydrated');
+    await page.setViewport({ width: 800, height: 300 });
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+    await page.setViewport({ width: 600, height: 600 });
+    const screenshotResponsive = await page.screenshot();
+    expect(screenshotResponsive).toMatchImageSnapshot();
+  });
+});
+//# sourceMappingURL=mg-illustrated-message.e2e.js.map

package/dist/collection/components/molecules/mg-illustrated-message/test/mg-illustrated-message.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-illustrated-message.e2e.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-illustrated-message/test/mg-illustrated-message.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAEtE,MAAM,QAAQ,GAAG,CAAC,IAAI,GAAG,SAAS,EAAE,SAAS,GAAG,UAAU,EAAE,EAAE,CAAC,iCAAiC,IAAI,gBAAgB,SAAS;;;;;;;;;;;;;;;;0BAgBnG,CAAC;AAE3B,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;EACtC,IAAI,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,EAAE,KAAK,EAAC,IAAI,EAAC,EAAE;IAC7D,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;IAE9C,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;IAC1D,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,oBAAoB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,QAAQ,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjE,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;IAC1D,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAExC,MAAM,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpD,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;IAE1C,MAAM,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpD,MAAM,oBAAoB,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IACrD,MAAM,CAAC,oBAAoB,CAAC,CAAC,oBAAoB,EAAE,CAAC;EACtD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { createPage } from '../../../../utils/stencil.e2e.test.utils';\n\nconst template = (size = 'regular', direction = 'vertical') => `<mg-illustrated-message size=\"${size}\" direction=\"${direction}\">\n<svg slot=\"illustration\" width=\"190\" height=\"350\" viewBox=\"0 0 190 350\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path\n    fill-rule=\"evenodd\"\n    clip-rule=\"evenodd\"\n    d=\"M0 0H15C23.2843 0 30 6.71573 30 15V290H40V15C40 6.71573 46.7157 0 55 0C63.2843 0 70 6.71573 70 15V275C70 277.761 67.7615 280 65 280H60V40H50V340H60V290H65C67.7615 290 70 292.239 70 295V340H80V295C80 291.158 78.5558 287.654 76.1805 285C78.5558 282.346 80 278.842 80 275V0H95C103.284 0 110 6.71573 110 15V25C110 28.8418 108.556 32.3462 106.181 35C108.556 37.6538 110 41.1582 110 45V305C110 307.761 107.761 310 105 310H100V45C100 42.2386 97.7615 40 95 40H90V325C90 333.284 96.7157 340 105 340H120V330H105C102.239 330 100 327.761 100 325V320H105C113.284 320 120 313.284 120 305V15C120 6.71573 126.716 0 135 0C143.284 0 150 6.71573 150 15V330H140V15C140 12.2386 137.761 10 135 10C132.239 10 130 12.2386 130 15V340H165C173.284 340 180 333.284 180 325V15C180 12.2386 177.761 10 175 10H170V325C170 327.761 167.761 330 165 330H160V0H175C183.284 0 190 6.71573 190 15V350H0V0ZM10 325C10 333.284 16.7157 340 25 340C33.2843 340 40 333.284 40 325V300H30V325C30 327.761 27.7615 330 25 330C22.2385 330 20 327.761 20 325V15C20 12.2386 17.7615 10 15 10H10V325ZM60 15V30H50V15C50 12.2386 52.2385 10 55 10C57.7615 10 60 12.2386 60 15ZM95 30H90V10H95C97.7615 10 100 12.2386 100 15V25C100 27.7614 97.7615 30 95 30Z\"\n    fill=\"black\"\n  />\n</svg>\n<h2 slot=\"title\">Lorem Ipsum</h2>\n<h3 slot=\"details\">The standard Lorem Ipsum passage, used since the 1500s</h3>\n<div slot=\"details\">\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\n  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\n  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n</div>\n</mg-illustrated-message>`;\n\ndescribe('mg-illustrated-message', () => {\n  test.each(['regular', 'small'])('renders size %', async size => {\n    const page = await createPage(template(size));\n\n    const element = await page.find('mg-illustrated-message');\n    expect(element).toHaveClass('hydrated');\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  test('renders horizontal', async () => {\n    const page = await createPage(template(undefined, 'horizontal'));\n\n    const element = await page.find('mg-illustrated-message');\n    expect(element).toHaveClass('hydrated');\n\n    await page.setViewport({ width: 800, height: 300 });\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n\n    await page.setViewport({ width: 600, height: 600 });\n\n    const screenshotResponsive = await page.screenshot();\n    expect(screenshotResponsive).toMatchImageSnapshot();\n  });\n});\n"]}

package/dist/collection/components/molecules/mg-illustrated-message/test/mg-illustrated-message.spec.js

@@ -0,0 +1,36 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgIllustratedMessage } from "../mg-illustrated-message";
+const getPage = (args, title = h("h2", { slot: "title" }, "Lorem Ipsum"), illustration = (h("svg", { slot: "illustration", width: "190", height: "350", viewBox: "0 0 190 350", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0 0H15C23.2843 0 30 6.71573 30 15V290H40V15C40 6.71573 46.7157 0 55 0C63.2843 0 70 6.71573 70 15V275C70 277.761 67.7615 280 65 280H60V40H50V340H60V290H65C67.7615 290 70 292.239 70 295V340H80V295C80 291.158 78.5558 287.654 76.1805 285C78.5558 282.346 80 278.842 80 275V0H95C103.284 0 110 6.71573 110 15V25C110 28.8418 108.556 32.3462 106.181 35C108.556 37.6538 110 41.1582 110 45V305C110 307.761 107.761 310 105 310H100V45C100 42.2386 97.7615 40 95 40H90V325C90 333.284 96.7157 340 105 340H120V330H105C102.239 330 100 327.761 100 325V320H105C113.284 320 120 313.284 120 305V15C120 6.71573 126.716 0 135 0C143.284 0 150 6.71573 150 15V330H140V15C140 12.2386 137.761 10 135 10C132.239 10 130 12.2386 130 15V340H165C173.284 340 180 333.284 180 325V15C180 12.2386 177.761 10 175 10H170V325C170 327.761 167.761 330 165 330H160V0H175C183.284 0 190 6.71573 190 15V350H0V0ZM10 325C10 333.284 16.7157 340 25 340C33.2843 340 40 333.284 40 325V300H30V325C30 327.761 27.7615 330 25 330C22.2385 330 20 327.761 20 325V15C20 12.2386 17.7615 10 15 10H10V325ZM60 15V30H50V15C50 12.2386 52.2385 10 55 10C57.7615 10 60 12.2386 60 15ZM95 30H90V10H95C97.7615 10 100 12.2386 100 15V25C100 27.7614 97.7615 30 95 30Z", fill: "black" })))) => newSpecPage({
+  components: [MgIllustratedMessage],
+  template: () => (h("mg-illustrated-message", Object.assign({}, args), illustration, title, h("h3", { slot: "details" }, "The standard Lorem Ipsum passage, used since the 1500s"), h("div", { slot: "details" }, "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."))),
+});
+describe('mg-illustrated-message', () => {
+  test.each([{}, { size: 'small' }, { direction: 'horizontal' }])('with args %s', async (args) => {
+    const { root } = await getPage(args);
+    expect(root).toMatchSnapshot();
+  });
+  test('Should render even if slotted content is not an image file', async () => {
+    const { root } = await getPage({}, undefined, h("span", { slot: "illustration" }));
+    expect(root).toMatchSnapshot();
+  });
+  test('Should throw error if slot title element is not a heading', async () => {
+    expect.assertions(1);
+    try {
+      await getPage({}, h("span", { slot: "title" }, "Lorem Ipsum"));
+    }
+    catch (err) {
+      expect(err.message).toContain('<mg-illustrated-message> Slotted title must be a heading: ');
+    }
+  });
+  test.each([h("div", null, "content without illustration slot"), [h("svg", { slot: "illustration" }), h("svg", { slot: "illustration" })]])('Should throw error if slot illustration is not single or element is not an image', async (slottedIllustration) => {
+    expect.assertions(1);
+    try {
+      await getPage({}, undefined, slottedIllustration);
+    }
+    catch (err) {
+      expect(err.message).toEqual('<mg-illustrated-message> Slotted illustration must be present and unique.');
+    }
+  });
+});
+//# sourceMappingURL=mg-illustrated-message.spec.js.map

package/dist/collection/components/molecules/mg-illustrated-message/test/mg-illustrated-message.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-illustrated-message.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-illustrated-message/test/mg-illustrated-message.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,MAAM,OAAO,GAAG,CACd,IAAI,EACJ,KAAK,GAAG,UAAI,IAAI,EAAC,OAAO,kBAAiB,EACzC,YAAY,GAAG,CACb,WAAK,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B;EACxG,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,0qCAA0qC,EAC5qC,IAAI,EAAC,OAAO,GACZ,CACE,CACP,EACD,EAAE,CACF,WAAW,CAAC;EACV,UAAU,EAAE,CAAC,oBAAoB,CAAC;EAClC,QAAQ,EAAE,GAAG,EAAE,CAAC,CACd,8CAA4B,IAAI;IAC7B,YAAY;IACZ,KAAK;IACN,UAAI,IAAI,EAAC,SAAS,6DAA4D;IAC9E,WAAK,IAAI,EAAC,SAAS,ocAIb,CACiB,CAC1B;CACF,CAAC,CAAC;AAEL,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;EACtC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,KAAK,EAAC,IAAI,EAAC,EAAE;IAC3F,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACjC,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,4DAA4D,EAAE,KAAK,IAAI,EAAE;IAC5E,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAAC,EAAE,EAAE,SAAS,EAAE,YAAM,IAAI,EAAC,cAAc,GAAQ,CAAC,CAAC;IACjF,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACjC,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;IAC3E,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,IAAI;MACF,MAAM,OAAO,CAAC,EAAE,EAAE,YAAM,IAAI,EAAC,OAAO,kBAAmB,CAAC,CAAC;KAC1D;IAAC,OAAO,GAAG,EAAE;MACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,4DAA4D,CAAC,CAAC;KAC7F;EACH,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,IAAI,CAAC,CAAC,mDAA4C,EAAE,CAAC,WAAK,IAAI,EAAC,cAAc,GAAO,EAAE,WAAK,IAAI,EAAC,cAAc,GAAO,CAAC,CAAC,CAAC,CAC3H,kFAAkF,EAClF,KAAK,EAAC,mBAAmB,EAAC,EAAE;IAC1B,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,IAAI;MACF,MAAM,OAAO,CAAC,EAAE,EAAE,SAAS,EAAE,mBAAmB,CAAC,CAAC;KACnD;IAAC,OAAO,GAAG,EAAE;MACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,2EAA2E,CAAC,CAAC;KAC1G;EACH,CAAC,CACF,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgIllustratedMessage } from '../mg-illustrated-message';\n\nconst getPage = (\n  args,\n  title = <h2 slot=\"title\">Lorem Ipsum</h2>,\n  illustration = (\n    <svg slot=\"illustration\" width=\"190\" height=\"350\" viewBox=\"0 0 190 350\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M0 0H15C23.2843 0 30 6.71573 30 15V290H40V15C40 6.71573 46.7157 0 55 0C63.2843 0 70 6.71573 70 15V275C70 277.761 67.7615 280 65 280H60V40H50V340H60V290H65C67.7615 290 70 292.239 70 295V340H80V295C80 291.158 78.5558 287.654 76.1805 285C78.5558 282.346 80 278.842 80 275V0H95C103.284 0 110 6.71573 110 15V25C110 28.8418 108.556 32.3462 106.181 35C108.556 37.6538 110 41.1582 110 45V305C110 307.761 107.761 310 105 310H100V45C100 42.2386 97.7615 40 95 40H90V325C90 333.284 96.7157 340 105 340H120V330H105C102.239 330 100 327.761 100 325V320H105C113.284 320 120 313.284 120 305V15C120 6.71573 126.716 0 135 0C143.284 0 150 6.71573 150 15V330H140V15C140 12.2386 137.761 10 135 10C132.239 10 130 12.2386 130 15V340H165C173.284 340 180 333.284 180 325V15C180 12.2386 177.761 10 175 10H170V325C170 327.761 167.761 330 165 330H160V0H175C183.284 0 190 6.71573 190 15V350H0V0ZM10 325C10 333.284 16.7157 340 25 340C33.2843 340 40 333.284 40 325V300H30V325C30 327.761 27.7615 330 25 330C22.2385 330 20 327.761 20 325V15C20 12.2386 17.7615 10 15 10H10V325ZM60 15V30H50V15C50 12.2386 52.2385 10 55 10C57.7615 10 60 12.2386 60 15ZM95 30H90V10H95C97.7615 10 100 12.2386 100 15V25C100 27.7614 97.7615 30 95 30Z\"\n        fill=\"black\"\n      />\n    </svg>\n  ),\n) =>\n  newSpecPage({\n    components: [MgIllustratedMessage],\n    template: () => (\n      <mg-illustrated-message {...args}>\n        {illustration}\n        {title}\n        <h3 slot=\"details\">The standard Lorem Ipsum passage, used since the 1500s</h3>\n        <div slot=\"details\">\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\n          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\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n        </div>\n      </mg-illustrated-message>\n    ),\n  });\n\ndescribe('mg-illustrated-message', () => {\n  test.each([{}, { size: 'small' }, { direction: 'horizontal' }])('with args %s', async args => {\n    const { root } = await getPage(args);\n    expect(root).toMatchSnapshot();\n  });\n\n  test('Should render even if slotted content is not an image file', async () => {\n    const { root } = await getPage({}, undefined, <span slot=\"illustration\"></span>);\n    expect(root).toMatchSnapshot();\n  });\n\n  test('Should throw error if slot title element is not a heading', async () => {\n    expect.assertions(1);\n    try {\n      await getPage({}, <span slot=\"title\">Lorem Ipsum</span>);\n    } catch (err) {\n      expect(err.message).toContain('<mg-illustrated-message> Slotted title must be a heading: ');\n    }\n  });\n\n  test.each([<div>content without illustration slot</div>, [<svg slot=\"illustration\"></svg>, <svg slot=\"illustration\"></svg>]])(\n    'Should throw error if slot illustration is not single or element is not an image',\n    async slottedIllustration => {\n      expect.assertions(1);\n      try {\n        await getPage({}, undefined, slottedIllustration);\n      } catch (err) {\n        expect(err.message).toEqual('<mg-illustrated-message> Slotted illustration must be present and unique.');\n      }\n    },\n  );\n});\n"]}

package/dist/collection/components/molecules/mg-item-more/mg-item-more.conf.js

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=mg-item-more.conf.js.map

package/dist/collection/components/molecules/mg-item-more/mg-item-more.conf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-item-more.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-item-more/mg-item-more.conf.ts"],"names":[],"mappings":"","sourcesContent":["import { MgIcon } from '../../atoms/mg-icon/mg-icon';\nimport { MgMenu } from '../menu/mg-menu/mg-menu';\n\n/**\n * message type\n */\nexport type MessageType = { moreLabel: string; badgeLabel: string };\n\n/**\n * SlotLabel prop type\n */\nexport type SlotLabelType = {\n  label?: string;\n  display?: boolean;\n};\n\n/**\n * icon prop type\n */\nexport type IconType = {\n  icon: MgIcon['icon'];\n};\n\n/**\n * size type\n */\nexport type SizeType = MgMenu['size'];\n"]}

package/dist/collection/components/molecules/mg-item-more/mg-item-more.js

@@ -1,7 +1,7 @@
-import { h, Host } from '@stencil/core';
-import { initLocales } from '../../../locales';
-import { OverflowBehavior } from '../../../utils/behaviors.utils';
-import { Direction } from '../menu/mg-menu/mg-menu.conf';
+import { h, Host } from "@stencil/core";
+import { initLocales } from "../../../locales";
+import { OverflowBehavior } from "../../../utils/behaviors.utils";
+import { Direction } from "../menu/mg-menu/mg-menu.conf";
 export class MgItemMore {
   constructor() {
     /************
@@ -117,7 +117,8 @@ export class MgItemMore {
           "references": {
             "IconType": {
               "location": "import",
-              "path": "./mg-item-more.conf"
+              "path": "./mg-item-more.conf",
+              "id": "src/components/molecules/mg-item-more/mg-item-more.conf.ts::IconType"
             }
           }
         },
@@ -138,7 +139,8 @@ export class MgItemMore {
           "references": {
             "SlotLabelType": {
               "location": "import",
-              "path": "./mg-item-more.conf"
+              "path": "./mg-item-more.conf",
+              "id": "src/components/molecules/mg-item-more/mg-item-more.conf.ts::SlotLabelType"
             }
           }
         },
@@ -159,7 +161,8 @@ export class MgItemMore {
           "references": {
             "SizeType": {
               "location": "import",
-              "path": "./mg-item-more.conf"
+              "path": "./mg-item-more.conf",
+              "id": "src/components/molecules/mg-item-more/mg-item-more.conf.ts::SizeType"
             }
           }
         },
@@ -193,3 +196,4 @@ export class MgItemMore {
       }];
   }
 }
+//# sourceMappingURL=mg-item-more.js.map

package/dist/collection/components/molecules/mg-item-more/mg-item-more.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-item-more.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-item-more/mg-item-more.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, Host, Watch, State } from '@stencil/core';\nimport { initLocales } from '../../../locales';\nimport { OverflowBehavior } from '../../../utils/behaviors.utils';\nimport { Direction } from '../menu/mg-menu/mg-menu.conf';\nimport type { IconType, MessageType, SizeType, SlotLabelType } from './mg-item-more.conf';\n\n@Component({\n  tag: 'mg-item-more',\n  styleUrl: 'mg-item-more.scss',\n  shadow: true,\n})\nexport class MgItemMore {\n  /************\n   * Internal *\n   ************/\n  private readonly name = 'mg-item-more';\n  private messages: MessageType;\n  private menuItems: HTMLMgMenuItemElement[];\n  private overflowBehavior: OverflowBehavior;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgItemMoreElement;\n\n  /**\n   * Define icon\n   */\n  @Prop() icon: IconType = { icon: 'ellipsis-vertical' };\n  @Watch('icon')\n  validateIcon(newValue: MgItemMore['icon']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))\n      throw new Error(`<${this.name}> prop \"icon\" must match MgItemMore['icon'] type.`);\n  }\n\n  /**\n   * Define slot label element\n   */\n  @Prop() slotlabel: SlotLabelType = { display: false };\n  @Watch('slotlabel')\n  validateSlotLabel(newValue: MgItemMore['slotlabel']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))\n      throw new Error(`<${this.name}> prop \"slotlabel\" must match MgItemMore['slotlabel'] type.`);\n    else if (typeof newValue.label !== 'string') this.slotlabel.label = this.messages.moreLabel;\n  }\n\n  /**\n   * Define component child menu size.\n   */\n  @Prop() size: SizeType;\n  @Watch('size')\n  validateSize(newValue: MgItemMore['size']): void {\n    if (newValue && typeof newValue !== 'string') throw new Error(`<${this.name}> prop \"size\" must match MgItemMore['size'] type.`);\n  }\n\n  /**\n   * Define component parent menu.\n   */\n  @State() parentMenu: HTMLMgMenuElement;\n\n  /***********\n   * Methods *\n   ***********/\n\n  /**\n   * render mg-item-more overflow element\n   * @returns mg-item-more element\n   */\n  private renderMgMenuItemOverflowElement = (): HTMLMgItemMoreElement => {\n    // create menu items proxy element from item clones\n    const moreElementMenuItem = this.element.shadowRoot.querySelector('mg-menu-item');\n    this.menuItems.forEach((child: HTMLMgMenuItemElement) => {\n      moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));\n    });\n\n    const allMenuItem = Array.from(this.parentMenu.querySelectorAll('mg-menu-item:not([data-overflow-more])'));\n\n    Array.from(moreElementMenuItem.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {\n      // manage click on proxy to mirror it on initial element\n      proxy.addEventListener('click', () => {\n        // be carefull to use element.click() method instead of dispatchEvent to ensure bubbles outside shadowDom\n        const navElement = allMenuItem[index].shadowRoot.querySelector('a, button');\n        if (navElement instanceof HTMLButtonElement || navElement instanceof HTMLAnchorElement) navElement.click();\n      });\n\n      // add id suffix to prevent duplicate key. default html id is: '';\n      if (proxy.id.trim() !== '') proxy.id = `${proxy.id}-proxy`;\n\n      // manage status change miror in proxy\n      allMenuItem[index].addEventListener('status-change', (event: CustomEvent) => {\n        proxy.setAttribute('status', event.detail);\n      });\n    });\n\n    return this.element;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Disconnect overflow ResizeObserver\n   */\n  disconnectedCallback(): void {\n    this.overflowBehavior.disconnect();\n  }\n\n  /**\n   * Set variables and validate props\n   */\n  componentWillLoad(): void {\n    // init variables\n    this.messages = (initLocales(this.element).messages as { plusMenu: MessageType }).plusMenu;\n    this.parentMenu = this.element.closest('mg-menu');\n    this.menuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n\n    // validate props\n    this.validateIcon(this.icon);\n    this.validateSlotLabel(this.slotlabel);\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Add overflow behavior\n   */\n  componentDidLoad(): void {\n    this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"listitem\">\n        <mg-menu-item data-overflow-more data-size={this.parentMenu.size}>\n          <mg-icon icon={this.icon.icon} slot=\"image\"></mg-icon>\n          <span class={{ 'sr-only': !this.slotlabel.display }} slot=\"label\">\n            {this.slotlabel.label}\n          </span>\n          <mg-menu direction={Direction.VERTICAL} label={this.messages.moreLabel} size={this.size}></mg-menu>\n        </mg-menu-item>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/mg-item-more/test/mg-item-more.e2e.playwright.js

@@ -0,0 +1,85 @@
+import { OverflowBehaviorElements } from "../../../../utils/behaviors.utils";
+import { setPageContent, expect, describe, testEach } from "../../../../utils/playwright.e2e.test.utils";
+import { renderAttributes } from "../../../../utils/e2e.test.utils";
+import { Status } from "../../menu/mg-menu-item/mg-menu-item.conf";
+import { Direction, sizes } from "../../menu/mg-menu/mg-menu.conf";
+const verticalFrameSizes = {
+  regular: {
+    height: 200,
+    width: 180,
+  },
+  medium: {
+    height: 300,
+    width: 180,
+  },
+  large: {
+    height: 400,
+    width: 180,
+  },
+};
+const getSubMenuSize = (size) => {
+  if (size === 'large')
+    return 'medium';
+  else if (size === 'medium')
+    return 'regular';
+  else
+    return 'regular';
+};
+const createHTML = args => `
+  <header class="menu-container menu-container--${args.direction}-small">
+    <mg-menu ${renderAttributes(Object.assign({ label: 'menu' }, args))}>
+      <mg-menu-item status="active">
+        <span slot="label">1 - head-1</span>
+        <mg-menu ${renderAttributes({ label: 'sub-menu 1', direction: Direction.VERTICAL, size: getSubMenuSize(args === null || args === void 0 ? void 0 : args.size) })}>
+          <mg-menu-item><span slot="label">Batman begins</span></mg-menu-item>
+        </mg-menu>
+      </mg-menu-item>
+      <mg-menu-item status="disabled"><span slot="label">1 - head-2 long</span></mg-menu-item>
+      <mg-menu-item href="#link">
+        <span slot="label">1 - head-3 very long</span>
+        <mg-icon icon='user' slot='image'></mg-icon>
+      </mg-menu-item>
+      <mg-menu-item>
+        <span slot="label">1 - head-4</span>
+        <mg-icon icon='user' slot='image'></mg-icon>
+        ${(args === null || args === void 0 ? void 0 : args.badge) ? "<mg-badge value='2' label='hello' slot='information'></mg-badge>" : ''}  
+      </mg-menu-item>
+      <mg-menu-item>
+        <span slot="label">1 - head-5</span>
+        <mg-icon icon='user' slot='image'></mg-icon>
+        ${(args === null || args === void 0 ? void 0 : args.badge) ? "<mg-badge value='2' label='hello' slot='information'></mg-badge>" : ''} 
+        <mg-menu ${renderAttributes({ label: 'sub-menu 2', direction: Direction.VERTICAL, size: getSubMenuSize(args === null || args === void 0 ? void 0 : args.size) })}>
+          <mg-menu-item><span slot="label">Batman begins with a longer title to go outide screen</span></mg-menu-item>
+        </mg-menu>
+      </mg-menu-item>
+    </mg-menu>
+  </header>
+  <style>
+    .menu-container.menu-container--vertical-small {
+      width: 180px;
+    }
+    .menu-container.menu-container--horizontal-small {
+      width: 200px;
+    }
+  </style>
+  `;
+describe('mg-item-more', () => {
+  describe('mg-menu', () => {
+    testEach(sizes)(`should renders, case direction ${Direction.VERTICAL} size %s with small screen`, async (page, size) => {
+      await setPageContent(page, createHTML({ direction: Direction.VERTICAL, size }), verticalFrameSizes[size]);
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+    testEach([true, false])('should renders with overflow, case badge %s', async (page, badge) => {
+      await setPageContent(page, createHTML({ direction: Direction.HORIZONTAL, badge }), { width: 400, height: 250 });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      await page.$eval(`[${OverflowBehaviorElements.BASE_INDEX}="0"]`, (elm, status) => {
+        elm.setAttribute('status', status);
+      }, Status.VISIBLE);
+      await page.$eval(`[${OverflowBehaviorElements.BASE_INDEX}="2"]`, (elm, status) => {
+        elm.setAttribute('status', status);
+      }, Status.ACTIVE);
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+  });
+});
+//# sourceMappingURL=mg-item-more.e2e.playwright.js.map

package/dist/collection/components/molecules/mg-item-more/test/mg-item-more.e2e.playwright.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-item-more.e2e.playwright.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-item-more/test/mg-item-more.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { OverflowBehaviorElements } from '../../../../utils/behaviors.utils';\nimport { setPageContent, expect, describe, testEach, PageType } from '../../../../utils/playwright.e2e.test.utils';\nimport { renderAttributes } from '../../../../utils/e2e.test.utils';\nimport { Status } from '../../menu/mg-menu-item/mg-menu-item.conf';\nimport { Direction, MenuSizeType, sizes } from '../../menu/mg-menu/mg-menu.conf';\n\nconst verticalFrameSizes = {\n  regular: {\n    height: 200,\n    width: 180,\n  },\n  medium: {\n    height: 300,\n    width: 180,\n  },\n  large: {\n    height: 400,\n    width: 180,\n  },\n};\n\nconst getSubMenuSize = (size: MenuSizeType) => {\n  if (size === 'large') return 'medium';\n  else if (size === 'medium') return 'regular';\n  else return 'regular';\n};\n\nconst createHTML = args => `\n  <header class=\"menu-container menu-container--${args.direction}-small\">\n    <mg-menu ${renderAttributes({ label: 'menu', ...args })}>\n      <mg-menu-item status=\"active\">\n        <span slot=\"label\">1 - head-1</span>\n        <mg-menu ${renderAttributes({ label: 'sub-menu 1', direction: Direction.VERTICAL, size: getSubMenuSize(args?.size) })}>\n          <mg-menu-item><span slot=\"label\">Batman begins</span></mg-menu-item>\n        </mg-menu>\n      </mg-menu-item>\n      <mg-menu-item status=\"disabled\"><span slot=\"label\">1 - head-2 long</span></mg-menu-item>\n      <mg-menu-item href=\"#link\">\n        <span slot=\"label\">1 - head-3 very long</span>\n        <mg-icon icon='user' slot='image'></mg-icon>\n      </mg-menu-item>\n      <mg-menu-item>\n        <span slot=\"label\">1 - head-4</span>\n        <mg-icon icon='user' slot='image'></mg-icon>\n        ${args?.badge ? \"<mg-badge value='2' label='hello' slot='information'></mg-badge>\" : ''}  \n      </mg-menu-item>\n      <mg-menu-item>\n        <span slot=\"label\">1 - head-5</span>\n        <mg-icon icon='user' slot='image'></mg-icon>\n        ${args?.badge ? \"<mg-badge value='2' label='hello' slot='information'></mg-badge>\" : ''} \n        <mg-menu ${renderAttributes({ label: 'sub-menu 2', direction: Direction.VERTICAL, size: getSubMenuSize(args?.size) })}>\n          <mg-menu-item><span slot=\"label\">Batman begins with a longer title to go outide screen</span></mg-menu-item>\n        </mg-menu>\n      </mg-menu-item>\n    </mg-menu>\n  </header>\n  <style>\n    .menu-container.menu-container--vertical-small {\n      width: 180px;\n    }\n    .menu-container.menu-container--horizontal-small {\n      width: 200px;\n    }\n  </style>\n  `;\n\ndescribe('mg-item-more', () => {\n  describe('mg-menu', () => {\n    testEach(sizes)(`should renders, case direction ${Direction.VERTICAL} size %s with small screen`, async (page: PageType, size: string) => {\n      await setPageContent(page, createHTML({ direction: Direction.VERTICAL, size }), verticalFrameSizes[size]);\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n\n    testEach([true, false])('should renders with overflow, case badge %s', async (page: PageType, badge) => {\n      await setPageContent(page, createHTML({ direction: Direction.HORIZONTAL, badge }), { width: 400, height: 250 });\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      await page.$eval(\n        `[${OverflowBehaviorElements.BASE_INDEX}=\"0\"]`,\n        (elm, status) => {\n          elm.setAttribute('status', status as string);\n        },\n        Status.VISIBLE,\n      );\n\n      await page.$eval(\n        `[${OverflowBehaviorElements.BASE_INDEX}=\"2\"]`,\n        (elm, status) => {\n          elm.setAttribute('status', status as string);\n        },\n        Status.ACTIVE,\n      );\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n  });\n});\n"]}

package/dist/collection/components/molecules/mg-item-more/test/mg-item-more.spec.js

@@ -0,0 +1,106 @@
+import { h } from "@stencil/core/internal";
+import { newSpecPage } from "@stencil/core/testing";
+import { forcePopoverId, mockConsoleError, mockWindowFrames, setupMutationObserverMock, setupResizeObserverMock } from "../../../../utils/unit.test.utils";
+import { MgItemMore } from "../mg-item-more";
+import { MgMenuItem } from "../../menu/mg-menu-item/mg-menu-item";
+import { MgMenu } from "../../menu/mg-menu/mg-menu";
+import { Status } from "../../menu/mg-menu-item/mg-menu-item.conf";
+import { MgPopover } from "../../mg-popover/mg-popover";
+import { MgPopoverContent } from "../../mg-popover/mg-popover-content/mg-popover-content";
+mockConsoleError();
+mockWindowFrames();
+const udpateItemMorePopoverId = page => {
+  const moreMenuItem = page.doc.querySelector('mg-item-more').shadowRoot.querySelector('mg-menu-item');
+  forcePopoverId(moreMenuItem, `mg-popover-test_more-item`);
+};
+let id;
+/**
+ * set id if param is true
+ * @param hasId - true if need a generated id
+ * @returns genereted id
+ */
+const setId = (hasId) => (hasId ? `my-id-${id++}` : undefined);
+const getPage = async (args) => {
+  const page = await newSpecPage({
+    components: [MgMenu, MgMenuItem, MgItemMore, MgPopover, MgPopoverContent],
+    template: () => (h("mg-menu", Object.assign({}, args), h("mg-menu-item", { href: args.isHref ? '#' : undefined, id: setId(args.hasId) }, h("span", { slot: "label" }, "Batman")), h("mg-menu-item", { id: setId(args.hasId) }, h("span", { slot: "label" }, "Joker")), h("mg-menu-item", { id: setId(args.hasId) }, h("span", { slot: "label" }, "Bane")))),
+  });
+  jest.runAllTimers();
+  await page.waitForChanges();
+  jest.runOnlyPendingTimers();
+  udpateItemMorePopoverId(page);
+  return page;
+};
+describe('mg-item-more', () => {
+  beforeEach(() => {
+    id = 1;
+    jest.useFakeTimers();
+    setupResizeObserverMock({
+      observe: () => null,
+      disconnect: () => null,
+    });
+    setupMutationObserverMock({
+      disconnect: () => null,
+      observe: () => null,
+      takeRecords: () => null,
+    });
+  });
+  afterEach(() => jest.runOnlyPendingTimers());
+  describe('render', () => {
+    test.each([undefined, { icon: { icon: 'user' } }, { slotlabel: { display: true, label: 'more batman menu' } }, { size: 'large' }, { hasId: true }])('should manage resize with observer, case %s', async (args) => {
+      const page = await getPage(Object.assign({ label: 'batman' }, args));
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+  describe('errors', () => {
+    test.each([
+      { props: { itemmore: { size: {} } }, error: '<mg-item-more> prop "size" must match MgItemMore[\'size\'] type' },
+      { props: { itemmore: { icon: '' } }, error: '<mg-item-more> prop "icon" must match MgItemMore[\'icon\'] type' },
+      { props: { itemmore: { icon: { icon: undefined } } }, error: '<mg-item-more> prop "icon" must match MgItemMore[\'icon\'] type' },
+      { props: { itemmore: { slotlabel: {} } }, error: '<mg-item-more> prop "slotlabel" must match MgItemMore[\'slotlabel\'] type' },
+      { props: { itemmore: { slotlabel: { label: undefined } } }, error: '<mg-item-more> prop "slotlabel" must match MgItemMore[\'slotlabel\'] type' },
+      { props: { itemmore: { slotlabel: { display: '' } } }, error: '<mg-item-more> prop "slotlabel" must match MgItemMore[\'slotlabel\'] type' },
+    ])('should throw an error, case %s', async ({ props, error }) => {
+      expect.assertions(1);
+      try {
+        await getPage(Object.assign({ label: 'batman' }, props));
+      }
+      catch (err) {
+        expect(err.message).toMatch(error);
+      }
+    });
+  });
+  describe('events', () => {
+    test('should update proxy status when base item status-change event was trigger', async () => {
+      const page = await getPage({ label: 'batman' });
+      expect(page.root).toMatchSnapshot();
+      const mgMenuItemBase = page.doc.querySelector('mg-menu-item');
+      const mgMenuItemProxy = page.doc.querySelector('mg-item-more').shadowRoot.querySelector('mg-menu mg-menu-item');
+      expect(mgMenuItemProxy).toHaveProperty('status', Status.VISIBLE);
+      mgMenuItemBase.dispatchEvent(new CustomEvent('status-change', { bubbles: true, detail: Status.ACTIVE }));
+      await page.waitForChanges();
+      expect(mgMenuItemProxy).toHaveProperty('status', Status.ACTIVE);
+      udpateItemMorePopoverId(page);
+      expect(page.root).toMatchSnapshot();
+    });
+    test.each([false, true])('should trigger base item click event when proxy item was clicked', async (isHref) => {
+      const page = await getPage({ label: 'batman', isHref });
+      const mgMenuItemBase = page.doc.querySelector('mg-menu-item');
+      const mgMenuItemProxy = page.doc.querySelector('mg-item-more').shadowRoot.querySelector('mg-menu mg-menu-item');
+      const spy = jest.spyOn(mgMenuItemBase.shadowRoot.querySelector(isHref ? 'a' : 'button'), 'click');
+      mgMenuItemProxy.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(spy).toBeCalledTimes(1);
+      udpateItemMorePopoverId(page);
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+  test('should fire disconnect callback', async () => {
+    const page = await getPage({ label: 'batman' });
+    expect(page.root).toMatchSnapshot();
+    page.doc.querySelector('mg-item-more').remove();
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot();
+  });
+});
+//# sourceMappingURL=mg-item-more.spec.js.map

package/dist/collection/components/molecules/mg-item-more/test/mg-item-more.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-item-more.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-item-more/test/mg-item-more.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core/internal';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { forcePopoverId, mockConsoleError, mockWindowFrames, setupMutationObserverMock, setupResizeObserverMock } from '../../../../utils/unit.test.utils';\nimport { MgItemMore } from '../mg-item-more';\nimport { MgMenuItem } from '../../menu/mg-menu-item/mg-menu-item';\nimport { MgMenu } from '../../menu/mg-menu/mg-menu';\nimport { Status } from '../../menu/mg-menu-item/mg-menu-item.conf';\nimport { MgPopover } from '../../mg-popover/mg-popover';\nimport { MgPopoverContent } from '../../mg-popover/mg-popover-content/mg-popover-content';\n\nmockConsoleError();\nmockWindowFrames();\n\nconst udpateItemMorePopoverId = page => {\n  const moreMenuItem = page.doc.querySelector('mg-item-more').shadowRoot.querySelector('mg-menu-item');\n  forcePopoverId(moreMenuItem, `mg-popover-test_more-item`);\n};\n\nlet id;\n/**\n * set id if param is true\n * @param hasId - true if need a generated id\n * @returns genereted id\n */\nconst setId = (hasId: boolean): string => (hasId ? `my-id-${id++}` : undefined);\n\nconst getPage = async args => {\n  const page = await newSpecPage({\n    components: [MgMenu, MgMenuItem, MgItemMore, MgPopover, MgPopoverContent],\n    template: () => (\n      <mg-menu {...args}>\n        <mg-menu-item href={args.isHref ? '#' : undefined} id={setId(args.hasId)}>\n          <span slot=\"label\">Batman</span>\n        </mg-menu-item>\n        <mg-menu-item id={setId(args.hasId)}>\n          <span slot=\"label\">Joker</span>\n        </mg-menu-item>\n        <mg-menu-item id={setId(args.hasId)}>\n          <span slot=\"label\">Bane</span>\n        </mg-menu-item>\n      </mg-menu>\n    ),\n  });\n\n  jest.runAllTimers();\n\n  await page.waitForChanges();\n\n  jest.runOnlyPendingTimers();\n\n  udpateItemMorePopoverId(page);\n\n  return page;\n};\n\ndescribe('mg-item-more', () => {\n  beforeEach(() => {\n    id = 1;\n    jest.useFakeTimers();\n    setupResizeObserverMock({\n      observe: () => null,\n      disconnect: () => null,\n    });\n    setupMutationObserverMock({\n      disconnect: () => null,\n      observe: () => null,\n      takeRecords: () => null,\n    });\n  });\n  afterEach(() => jest.runOnlyPendingTimers());\n\n  describe('render', () => {\n    test.each([undefined, { icon: { icon: 'user' } }, { slotlabel: { display: true, label: 'more batman menu' } }, { size: 'large' }, { hasId: true }])(\n      'should manage resize with observer, case %s',\n      async args => {\n        const page = await getPage({ label: 'batman', ...args });\n\n        expect(page.root).toMatchSnapshot();\n      },\n    );\n  });\n\n  describe('errors', () => {\n    test.each([\n      { props: { itemmore: { size: {} } }, error: '<mg-item-more> prop \"size\" must match MgItemMore[\\'size\\'] type' },\n      { props: { itemmore: { icon: '' } }, error: '<mg-item-more> prop \"icon\" must match MgItemMore[\\'icon\\'] type' },\n      { props: { itemmore: { icon: { icon: undefined } } }, error: '<mg-item-more> prop \"icon\" must match MgItemMore[\\'icon\\'] type' },\n      { props: { itemmore: { slotlabel: {} } }, error: '<mg-item-more> prop \"slotlabel\" must match MgItemMore[\\'slotlabel\\'] type' },\n      { props: { itemmore: { slotlabel: { label: undefined } } }, error: '<mg-item-more> prop \"slotlabel\" must match MgItemMore[\\'slotlabel\\'] type' },\n      { props: { itemmore: { slotlabel: { display: '' } } }, error: '<mg-item-more> prop \"slotlabel\" must match MgItemMore[\\'slotlabel\\'] type' },\n    ])('should throw an error, case %s', async ({ props, error }) => {\n      expect.assertions(1);\n\n      try {\n        await getPage({ label: 'batman', ...props });\n      } catch (err) {\n        expect(err.message).toMatch(error);\n      }\n    });\n  });\n\n  describe('events', () => {\n    test('should update proxy status when base item status-change event was trigger', async () => {\n      const page = await getPage({ label: 'batman' });\n\n      expect(page.root).toMatchSnapshot();\n\n      const mgMenuItemBase = page.doc.querySelector('mg-menu-item');\n      const mgMenuItemProxy = page.doc.querySelector('mg-item-more').shadowRoot.querySelector('mg-menu mg-menu-item');\n      expect(mgMenuItemProxy).toHaveProperty('status', Status.VISIBLE);\n      mgMenuItemBase.dispatchEvent(new CustomEvent('status-change', { bubbles: true, detail: Status.ACTIVE }));\n\n      await page.waitForChanges();\n      expect(mgMenuItemProxy).toHaveProperty('status', Status.ACTIVE);\n\n      udpateItemMorePopoverId(page);\n      expect(page.root).toMatchSnapshot();\n    });\n\n    test.each([false, true])('should trigger base item click event when proxy item was clicked', async isHref => {\n      const page = await getPage({ label: 'batman', isHref });\n\n      const mgMenuItemBase = page.doc.querySelector('mg-menu-item');\n      const mgMenuItemProxy = page.doc.querySelector('mg-item-more').shadowRoot.querySelector('mg-menu mg-menu-item');\n      const spy = jest.spyOn(mgMenuItemBase.shadowRoot.querySelector(isHref ? 'a' : 'button'), 'click');\n\n      mgMenuItemProxy.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(spy).toBeCalledTimes(1);\n\n      udpateItemMorePopoverId(page);\n      expect(page.root).toMatchSnapshot();\n    });\n  });\n\n  test('should fire disconnect callback', async () => {\n    const page = await getPage({ label: 'batman' });\n\n    expect(page.root).toMatchSnapshot();\n\n    page.doc.querySelector('mg-item-more').remove();\n\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n  });\n});\n"]}

package/dist/collection/components/molecules/mg-message/mg-message.conf.js

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

package/dist/collection/components/molecules/mg-message/mg-message.conf.js.map

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

package/dist/collection/components/molecules/mg-message/mg-message.js

@@ -1,7 +1,7 @@
-import { h } from '@stencil/core';
-import { createID, ClassList } from '../../../utils/components.utils';
-import { variants } from './mg-message.conf';
-import { initLocales } from '../../../locales';
+import { h } from "@stencil/core";
+import { createID, ClassList } from "../../../utils/components.utils";
+import { variants } from "./mg-message.conf";
+import { initLocales } from "../../../locales";
 export class MgMessage {
   constructor() {
     /************
@@ -210,7 +210,8 @@ export class MgMessage {
           "references": {
             "VariantType": {
               "location": "import",
-              "path": "./mg-message.conf"
+              "path": "./mg-message.conf",
+              "id": "src/components/molecules/mg-message/mg-message.conf.ts::VariantType"
             }
           }
         },
@@ -318,3 +319,4 @@ export class MgMessage {
       }];
   }
 }
+//# sourceMappingURL=mg-message.js.map

package/dist/collection/components/molecules/mg-message/mg-message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-message.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-message/mg-message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC/F,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAe,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAQ/C,MAAM,OAAO,SAAS;;IACpB;;kBAEc;IAEd,UAAU;IACO,cAAS,GAAG,kBAAkB,CAAC;IAEhD,MAAM;IACE,kBAAa,GAAG,EAAE,CAAC;IAE3B,8DAA8D;IACtD,gBAAW,GAAkC,IAAI,CAAC;IAE1D,eAAe;IACP,cAAS,GAAG,KAAK,CAAC;IAClB,cAAS,GAAG,KAAK,CAAC;IA+G1B;;OAEG;IACK,aAAQ,GAAG,GAAS,EAAE;MAC5B,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC;IAC7E,CAAC,CAAC;IAEF;;OAEG;IACK,eAAU,GAAG,GAAS,EAAE;MAC9B,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACjC,CAAC,CAAC;IAEF;;;OAGG;IACK,gBAAW,GAAG,CAAC,KAA8B,EAAQ,EAAE;MAC7D,IAAI,CAAC,UAAU,EAAE,CAAC;MAClB,MAAM,YAAY,GAAY,KAAK,CAAC,IAAI,KAAK,YAAY,CAAC;MAC1D,4CAA4C;MAC5C,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;MAEtD,iDAAiD;MACjD,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAC3B,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,EACxC,QAAQ,CAAC,EAAE;QACT,IAAI,CAAC,QAAQ,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC;QACzE,wBAAwB;QACxB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS;UAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;MAC1D,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;IACJ,CAAC,CAAC;IAEF;;OAEG;IACK,gBAAW,GAAG,GAAS,EAAE;MAC/B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC,CAAC;IAEF;;;OAGG;IACK,YAAO,GAAG,GAAmB,EAAE;MACrC,QAAQ,IAAI,CAAC,OAAO,EAAE;QACpB,KAAK,MAAM;UACT,OAAO,aAAa,CAAC;QACvB,KAAK,SAAS;UACZ,OAAO,sBAAsB,CAAC;QAChC,KAAK,SAAS;UACZ,OAAO,cAAc,CAAC;QACxB,KAAK,QAAQ;UACX,OAAO,oBAAoB,CAAC;QAC9B;UACE,MAAM;OACT;IACH,CAAC,CAAC;sBAzJ2B,QAAQ,CAAC,YAAY,CAAC;;mBAiBpB,QAAQ,CAAC,CAAC,CAAC;uBAiBH,KAAK;gBAYZ,KAAK;2BA8BC,IAAI,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;sBAK7C,KAAK;;EAzE3B,aAAa,CAAC,QAA4B;IACxC,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,GAAG,CAAC,EAAE;MAC1C,MAAM,IAAI,KAAK,CAAC,2DAA2D,CAAC,CAAC;KAC9E;EACH,CAAC;EAOD,eAAe,CAAC,QAA8B,EAAE,QAA+B;IAC7E,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,+CAA+C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACvF;SAAM;MACL,IAAI,QAAQ,KAAK,SAAS,EAAE;QAC1B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC;OACxD;MACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC;KACrD;EACH,CAAC;EAQD,mBAAmB,CAAC,QAAkC;IACpD,IAAI,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE;MAC/B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;MACzB,MAAM,IAAI,KAAK,CAAC,wEAAwE,CAAC,CAAC;KAC3F;EACH,CAAC;EAOD,YAAY,CAAC,QAA2B;IACtC,IAAI,QAAQ,EAAE;MACZ,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;MAC1B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;MACzC,wBAAwB;MACxB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;QACxC,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;MAC5D,CAAC,CAAC,CAAC;MACH,cAAc;MACd,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;SAAM;MACL,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;MAC1B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;MAC5C,kBAAkB;MAClB,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE;QAClB,cAAc;QACd,IAAI,CAAC,QAAQ,EAAE,CAAC;QAChB,2CAA2C;QAC3C,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;UACxC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACzD,CAAC,CAAC,CAAC;OACJ;KACF;EACH,CAAC;EAoFD;;iBAEe;EAEf;;KAEG;EACH,iBAAiB;IACf,cAAc;IACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;IACnD,WAAW;IACX,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,+CAA+C;IAC/C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IAC1E,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC3C,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAC;MACrD,IAAI,CAAC,aAAa,GAAG,GAAG,IAAI,CAAC,UAAU,eAAe,CAAC;KACxD;IACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC/B,CAAC;EAED;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,WAAK,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;MAC9G,eAAS,OAAO,EAAE,IAAI,CAAC,OAAO,mBAAgB,UAAU;QACtD,YAAM,KAAK,EAAC,kBAAkB;UAC5B,eAAS,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,GAAY,CACpC;QACP,WAAK,KAAK,EAAC,qBAAqB;UAC9B,YAAM,KAAK,EAAC,0BAA0B;YACpC,eAAa,CACR;UACN,IAAI,CAAC,UAAU,IAAI,YAAM,KAAK,EAAC,+BAA+B,GAAQ;UACtE,IAAI,CAAC,UAAU,IAAI,CAClB,YAAM,KAAK,EAAC,kCAAkC;YAC5C,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvB,CACR,CACG;QACL,IAAI,CAAC,WAAW,IAAI,CACnB,YAAM,KAAK,EAAC,0BAA0B;UACpC,iBAAW,UAAU,EAAE,IAAI,CAAC,aAAa,mBAAU,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW;YACnI,eAAS,IAAI,EAAC,OAAO,GAAW,CACtB,CACP,CACR,CACO,CACN,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\nimport { createID, ClassList } from '../../../utils/components.utils';\nimport { variants, VariantType } from './mg-message.conf';\nimport { initLocales } from '../../../locales';\nimport { type MgIcon } from '../../atoms/mg-icon/mg-icon';\n\n@Component({\n  tag: 'mg-message',\n  styleUrl: 'mg-message.scss',\n  shadow: true,\n})\nexport class MgMessage {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classHide = 'mg-message--hide';\n\n  // IDs\n  private closeButtonId = '';\n\n  // Stored timer setted when hide action is run from setTimeOut\n  private storedTimer: ReturnType<typeof setTimeout> = null;\n\n  // Manage hover\n  private isFocused = false;\n  private isHovered = false;\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgMessageElement;\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   * If not set, it will be created.\n   */\n  @Prop() identifier: string = createID('mg-message');\n\n  /**\n   * Add a delay to hide/close message when it passed\n   * Value is defined in seconds and must greater than 2 seconds (PDA9-314 RG-06)\n   */\n  @Prop() delay: number;\n  @Watch('delay')\n  validateDelay(newValue: MgMessage['delay']): void {\n    if (newValue !== undefined && newValue < 2) {\n      throw new Error(`<mg-message> prop \"delay\" must be greater than 2 seconds.`);\n    }\n  }\n\n  /**\n   * Message variant\n   */\n  @Prop() variant: VariantType = variants[0]; // info\n  @Watch('variant')\n  validateVariant(newValue: MgMessage['variant'], oldValue?: MgMessage['variant']): void {\n    if (!variants.includes(newValue)) {\n      throw new Error(`<mg-message> prop \"variant\" must be one of: ${variants.join(', ')}`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-message--${oldValue}`);\n      }\n      this.classCollection.add(`mg-message--${newValue}`);\n    }\n  }\n\n  /**\n   * Define if message has a cross button\n   * RG 01: https://jira.mgdis.fr/browse/PDA9-140\n   */\n  @Prop({ mutable: true }) closeButton = false;\n  @Watch('closeButton')\n  validateCloseButton(newValue: MgMessage['closeButton']): void {\n    if (newValue && this.hasActions) {\n      this.closeButton = false;\n      throw new Error('<mg-message> prop \"close-button\" can\\'t be used with the actions slot.');\n    }\n  }\n\n  /**\n   * Define if message is hidden\n   */\n  @Prop({ mutable: true }) hide = false;\n  @Watch('hide')\n  validateHide(newValue: MgMessage['hide']): void {\n    if (newValue) {\n      this.componentHide.emit();\n      this.classCollection.add(this.classHide);\n      // Remove event Listener\n      ['focusin', 'mouseenter'].forEach(event => {\n        this.element.removeEventListener(event, this.timerEvents);\n      });\n      // Clear Timer\n      this.clearTimer();\n    } else {\n      this.componentShow.emit();\n      this.classCollection.delete(this.classHide);\n      // If delay is set\n      if (this.delay > 1) {\n        // Start timer\n        this.setTimer();\n        // Stop timer when get focus or mouse enter\n        ['focusin', 'mouseenter'].forEach(event => {\n          this.element.addEventListener(event, this.timerEvents);\n        });\n      }\n    }\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-message']);\n\n  /**\n   * Define if component is using actions slot\n   */\n  @State() hasActions = false;\n\n  /**\n   * Emited event when message is diplayed\n   */\n  @Event({ eventName: 'component-show' }) componentShow: EventEmitter<string>;\n\n  /**\n   * Emited event when message is hidden\n   */\n  @Event({ eventName: 'component-hide' }) componentHide: EventEmitter<string>;\n\n  /**\n   * Set timer\n   */\n  private setTimer = (): void => {\n    this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);\n  };\n\n  /**\n   * Clear timer\n   */\n  private clearTimer = (): void => {\n    clearTimeout(this.storedTimer);\n  };\n\n  /**\n   * Event to add on element\n   * @param event - event\n   */\n  private timerEvents = (event: MouseEvent | FocusEvent): void => {\n    this.clearTimer();\n    const isMouseEvent: boolean = event.type === 'mouseenter';\n    // Needed to ensure we don't start the timer\n    this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;\n\n    // Restart timer when loose focus AND mouse leave\n    this.element.addEventListener(\n      isMouseEvent ? 'mouseleave' : 'focusout',\n      eventOut => {\n        this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;\n        // Start timer if needed\n        if (!this.isFocused && !this.isHovered) this.setTimer();\n      },\n      { once: true },\n    );\n  };\n\n  /**\n   * Handle close button\n   */\n  private handleClose = (): void => {\n    this.hide = true;\n  };\n\n  /**\n   * Get icon corresponding to variant\n   * @returns icon\n   */\n  private getIcon = (): MgIcon['icon'] => {\n    switch (this.variant) {\n      case 'info':\n        return 'info-circle';\n      case 'warning':\n        return 'exclamation-triangle';\n      case 'success':\n        return 'check-circle';\n      case 'danger':\n        return 'exclamation-circle';\n      default:\n        break;\n    }\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.validateVariant(this.variant);\n    // Check if close button is an can be activated\n    this.hasActions = this.element.querySelector('[slot=\"actions\"]') !== null;\n    this.validateCloseButton(this.closeButton);\n    if (this.closeButton) {\n      this.classCollection.add('mg-message--close-button');\n      this.closeButtonId = `${this.identifier}-close-button`;\n    }\n    this.validateDelay(this.delay);\n    this.validateHide(this.hide);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div id={this.identifier} class={this.classCollection.join()} role={this.variant === 'info' ? 'status' : 'alert'}>\n        <mg-card variant={this.variant} variant-style=\"bar-left\">\n          <span class=\"mg-message__icon\">\n            <mg-icon icon={this.getIcon()}></mg-icon>\n          </span>\n          <div class=\"mg-message__content\">\n            <span class=\"mg-message__content-slot\">\n              <slot></slot>\n            </span>\n            {this.hasActions && <span class=\"mg-message__content-separator\"></span>}\n            {this.hasActions && (\n              <span class=\"mg-message__content-actions-slot\">\n                <slot name=\"actions\"></slot>\n              </span>\n            )}\n          </div>\n          {this.closeButton && (\n            <span class=\"mg-message__close-button\">\n              <mg-button identifier={this.closeButtonId} is-icon variant=\"flat\" label={this.messages.message.closeButton} onClick={this.handleClose}>\n                <mg-icon icon=\"cross\"></mg-icon>\n              </mg-button>\n            </span>\n          )}\n        </mg-card>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/mg-message/test/mg-message.e2e.js

@@ -0,0 +1,64 @@
+import { createPage } from "../../../../utils/stencil.e2e.test.utils";
+import { variants } from "../mg-message.conf";
+const getContent = (contentSize, withAction) => {
+  let content = '<strong>Strong</strong> content!';
+  let actions = '';
+  if (contentSize === 'long') {
+    content =
+      '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.';
+  }
+  if (withAction) {
+    actions = `<div slot="actions" class="mg-group-elements mg-group-elements--align-right"><mg-button>Primary</mg-button><mg-button variant="secondary">Secondary</mg-button></div>`;
+  }
+  return `<p>${content}</p>${actions}`;
+};
+describe('mg-message', () => {
+  test('Should render', async () => {
+    const html = variants
+      .map(variant => {
+      const props = [
+        { contentSize: 'short', withAction: false, closeButton: false },
+        { contentSize: 'long', withAction: false, closeButton: false },
+        { contentSize: 'short', withAction: true, closeButton: false },
+        { contentSize: 'long', withAction: true, closeButton: false },
+        { contentSize: 'short', withAction: false, closeButton: true },
+        { contentSize: 'long', withAction: false, closeButton: true },
+      ];
+      return props
+        .map(({ contentSize, withAction, closeButton }) => `<mg-message variant="${variant}" close-button="${closeButton}">${getContent(contentSize, withAction)}</mg-message>`)
+        .join('');
+    })
+      .join('');
+    const page = await createPage(html);
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  test('Should render with child mg-card', async () => {
+    const page = await createPage(`
+      <mg-message class="custom-message-card">
+        <mg-card>child card</mg-card>
+      </mg-message>
+      <style>
+        .custom-message-card {
+          --mg-card-background: hsl(var(--color-danger));
+        }
+      </style>
+    `);
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  test('Should hide message on close button click', async () => {
+    const page = await createPage(`<mg-message close-button><p>Blu</p></mg-message>`);
+    const mgMessage = await page.find('mg-message');
+    expect(mgMessage).not.toHaveAttribute('hide');
+    const mgButton = await page.find('mg-message >>> mg-button');
+    mgButton.triggerEvent('click');
+    await page.waitForChanges();
+    const mgMessageHideProp = await mgMessage.getProperty('hide');
+    expect(mgMessageHideProp).toEqual(true);
+    await page.setViewport({ width: 600, height: 100 });
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+});
+//# sourceMappingURL=mg-message.e2e.js.map

package/dist/collection/components/molecules/mg-message/test/mg-message.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-message.e2e.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-message/test/mg-message.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { createPage } from '../../../../utils/stencil.e2e.test.utils';\nimport { variants } from '../mg-message.conf';\n\nconst getContent = (contentSize, withAction) => {\n  let content = '<strong>Strong</strong> content!';\n  let actions = '';\n  if (contentSize === 'long') {\n    content =\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  if (withAction) {\n    actions = `<div slot=\"actions\" class=\"mg-group-elements mg-group-elements--align-right\"><mg-button>Primary</mg-button><mg-button variant=\"secondary\">Secondary</mg-button></div>`;\n  }\n  return `<p>${content}</p>${actions}`;\n};\n\ndescribe('mg-message', () => {\n  test('Should render', async () => {\n    const html = variants\n      .map(variant => {\n        const props = [\n          { contentSize: 'short', withAction: false, closeButton: false },\n          { contentSize: 'long', withAction: false, closeButton: false },\n          { contentSize: 'short', withAction: true, closeButton: false },\n          { contentSize: 'long', withAction: true, closeButton: false },\n          { contentSize: 'short', withAction: false, closeButton: true },\n          { contentSize: 'long', withAction: false, closeButton: true },\n        ];\n        return props\n          .map(({ contentSize, withAction, closeButton }) => `<mg-message variant=\"${variant}\" close-button=\"${closeButton}\">${getContent(contentSize, withAction)}</mg-message>`)\n          .join('');\n      })\n      .join('');\n    const page = await createPage(html);\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  test('Should render with child mg-card', async () => {\n    const page = await createPage(`\n      <mg-message class=\"custom-message-card\">\n        <mg-card>child card</mg-card>\n      </mg-message>\n      <style>\n        .custom-message-card {\n          --mg-card-background: hsl(var(--color-danger));\n        }\n      </style>\n    `);\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  test('Should hide message on close button click', async () => {\n    const page = await createPage(`<mg-message close-button><p>Blu</p></mg-message>`);\n\n    const mgMessage = await page.find('mg-message');\n    expect(mgMessage).not.toHaveAttribute('hide');\n\n    const mgButton = await page.find('mg-message >>> mg-button');\n    mgButton.triggerEvent('click');\n    await page.waitForChanges();\n\n    const mgMessageHideProp = await mgMessage.getProperty('hide');\n    expect(mgMessageHideProp).toEqual(true);\n\n    await page.setViewport({ width: 600, height: 100 });\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n});\n"]}