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/molecules/mg-modal/test/mg-modal.spec.js CHANGED Viewed

@@ -95,7 +95,7 @@ describe('mg-modal', () => {
         }, []);
         // When close button is enabled it's the first focusable element.
         if (closeButton) {
-          modalFocusableElements.unshift(element.shadowRoot.querySelector(`.mg-modal__close-button mg-button`));
+          modalFocusableElements.unshift(element.shadowRoot.querySelector(`.mg-c-modal__close-button mg-button`));
         }
         const lastFocusableElement = modalFocusableElements[modalFocusableElements.length - 1];
         const spyFirst = jest.spyOn(modalFocusableElements[0], 'focus');

package/dist/collection/components/molecules/mg-modal/test/mg-modal.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-modal.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-modal/test/mg-modal.spec.tsx"],"names":[],"mappings":"AAAA,sDAAsD;AACtD,yDAAyD;AACzD,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,OAAO,GAAG,CAAC,IAAI,EAAE,KAAM,EAAE,EAAE,CAC/B,WAAW,CAAC;EACV,UAAU,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;EAC/B,QAAQ,EAAE,GAAG,EAAE,CAAC,CACd,gCAAc,IAAI;IACf,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,KAAI,CACjB,SAAG,IAAI,EAAC,SAAS;MACf,2BAAuB;;MAAc,SAAG,IAAI,EAAC,IAAI,aAAW;UAC1D,CACL;IACA,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,KAAI,CACjB,WAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,kDAAkD;MAC1E,+BAA8B;MAC9B,iBAAW,OAAO,EAAC,WAAW,gBAAsB,CAChD,CACP,CACQ,CACZ;CACF,CAAC,CAAC;AAEL,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;EACxB,IAAI,MAAM,CAAC;EAEX,UAAU,CAAC,GAAG,EAAE;IACd,yBAAyB,CAAC;MACxB,OAAO,EAAE;QACP,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;MACnB,CAAC;MACD,UAAU,EAAE;QACV,OAAO,IAAI,CAAC;MACd,CAAC;MACD,WAAW,EAAE,GAAG,EAAE,CAAC,EAAE;KACtB,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,uBAAuB,EAAE,KAAK,CAAC,EAAE;IAClI,IAAI,CAAC,IAAI,CAAC;MACR,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,EAAE;MACvD,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE;MAClF,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,IAAI,EAAE;MAC1E,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;MACtF,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;MACtF,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;KACvF,CAAC,CAAC,cAAc,EAAE,KAAK,EAAC,IAAI,EAAC,EAAE;MAC9B,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,mBAAM,IAAI,GAAI,KAAK,CAAC,CAAC;MACnD,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,wDAAwD,EAAE,KAAK,EAAC,UAAU,EAAC,EAAE;IAC3G,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,IAAI;MACF,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;KAC/B;IAAC,OAAO,GAAG,EAAE;MACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,2CAA2C,CAAC,CAAC;KAC1E;EACH,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,yDAAyD,EAAE,KAAK,EAAC,UAAU,EAAC,EAAE;IACvG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,IAAI;MACF,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC,CAAC;KAC1D;IAAC,OAAO,GAAG,EAAE;MACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,gDAAgD,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACxG;EACH,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;MAC/C,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;MACvG,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;MAEpE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;MAEhE,WAAW,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MACvE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MACpC,MAAM,CAAC,GAAG,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,wCAAwC,EAAE,KAAK,EAAC,WAAW,EAAC,EAAE;MACrF,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,CAAC,CAAC;MACjG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;MAEhE,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;MACxE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MACpC,IAAI,WAAW,EAAE;QACf,MAAM,CAAC,GAAG,CAAC,CAAC,gBAAgB,EAAE,CAAC;OAChC;WAAM;QACL,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;OACpC;IACH,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,IAAI,CAAC;MACZ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,EAAE;MAC9D,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE;MAC5D,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE;KACpE,CAAC,CAAC,kBAAkB,EAAE,QAAQ,CAAC,EAAE;MAChC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,gDAAgD,EAAE,KAAK,EAAC,WAAW,EAAC,EAAE;QAC7F,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC/I,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACnD,6BAA6B;QAC7B,MAAM,sBAAsB,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,gBAAgB,EAAE,EAAE;UACtH,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,IAAI,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC;UACrJ,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,EAAE,CAAC,CAAC;QACP,iEAAiE;QACjE,IAAI,WAAW,EAAE;UACf,sBAAsB,CAAC,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,mCAAmC,CAAC,CAAC,CAAC;SACvG;QACD,MAAM,oBAAoB,GAAG,sBAAsB,CAAC,sBAAsB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACvF,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;QAChE,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC;QAE1D,gBAAgB;QAChB,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC;QACrB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,QAAQ,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;QAC1C,MAAM,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;QACnB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,QAAQ,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;QAC1C,kCAAkC;QAClC,oBAAoB,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QACjH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,QAAQ,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;QAC1C,6CAA6C;QAC7C,sBAAsB,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACrH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;MAC3C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars /\n/ eslint-disable @typescript-eslint/no-empty-function */\nimport { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgButton } from '../../../atoms/mg-button/mg-button';\nimport { MgModal } from '../mg-modal';\nimport { focusableElements } from '../../../../utils/components.utils';\nimport { setupMutationObserverMock } from '../../../../utils/unit.test.utils';\nimport { dialogRoles } from '../mg-modal.conf';\n\nconst getPage = (args, slots?) =>\n newSpecPage({\n components: [MgModal, MgButton],\n template: () => (\n <mg-modal {...args}>\n {slots?.content && (\n <p slot=\"content\">\n <strong>Strong</strong> content with <a href=\"./\">a link</a>!\n </p>\n )}\n {slots?.actions && (\n <div slot=\"actions\" class=\"mg-group-elements mg-group-elements--align-right\">\n <mg-button>Primary</mg-button>\n <mg-button variant=\"secondary\">Secondary</mg-button>\n </div>\n )}\n </mg-modal>\n ),\n });\n\ndescribe('mg-modal', () => {\n let fireMo;\n\n beforeEach(() => {\n setupMutationObserverMock({\n observe: function () {\n fireMo = this.cb;\n },\n disconnect: function () {\n return null;\n },\n takeRecords: () => [],\n });\n });\n\n describe.each([undefined, { content: true }, { actions: true }, { content: true, actions: true }])('Should render a modal', slots => {\n test.each([\n { modalTitle: 'Modal Title', identifier: 'identifier' },\n { modalTitle: 'Modal Title', identifier: 'identifier', dialogRole: 'alertdialog' },\n { modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true },\n { modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true, hide: true },\n { modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true, lang: 'fr' },\n { modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true, lang: 'xx' },\n ])('with args %s', async args => {\n const { root } = await getPage({ ...args }, slots);\n expect(root).toMatchSnapshot();\n });\n });\n\n test.each(['', ' ', undefined])('Should not render with invalid modalTitle property: %s', async modalTitle => {\n expect.assertions(1);\n try {\n await getPage({ modalTitle });\n } catch (err) {\n expect(err.message).toMatch('<mg-modal> prop \"modalTitle\" is required.');\n }\n });\n\n test.each([' ', 'batman'])('Should throw error with invalid dialogRole property: %s', async dialogRole => {\n expect.assertions(1);\n try {\n await getPage({ modalTitle: 'Modal title', dialogRole });\n } catch (err) {\n expect(err.message).toMatch(`<mg-modal> prop \"dialogRole\" must be one of: ${dialogRoles.join(', ')}.`);\n }\n });\n\n describe('navigation', () => {\n test('should hide panel with button', async () => {\n const page = await getPage({ modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true });\n const closeButton = page.root.shadowRoot.querySelector('mg-button');\n\n expect(page.root).toMatchSnapshot();\n\n const spy = jest.spyOn(page.rootInstance.componentHide, 'emit');\n\n closeButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n expect(spy).toHaveBeenCalled();\n });\n\n test.each([true, false])('should hide panel with escape keyboard', async closeButton => {\n const page = await getPage({ modalTitle: 'Modal Title', identifier: 'identifier', closeButton });\n expect(page.root).toMatchSnapshot();\n\n const spy = jest.spyOn(page.rootInstance.componentHide, 'emit');\n\n page.win.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n if (closeButton) {\n expect(spy).toHaveBeenCalled();\n } else {\n expect(spy).not.toHaveBeenCalled();\n }\n });\n\n describe.each([\n { attributeName: 'aria-hidden', target: { ariaHidden: null } },\n { attributeName: 'aria-hidden', target: { ariaHidden: '' } },\n { attributeName: 'aria-hidden', target: { ariaHidden: undefined } },\n ])('mutationObserver', mutation => {\n test.each([true, false])('should keep focus inside modal, closeButton %s', async closeButton => {\n const page = await getPage({ modalTitle: 'Modal Title', identifier: 'identifier', closeButton, hide: true }, { content: true, actions: true });\n const element = page.doc.querySelector('mg-modal');\n // Get all focusable elements\n const modalFocusableElements = Array.from(element.querySelectorAll(focusableElements)).reduce((acc, focusableElement) => {\n acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) \|\| focusableElement : focusableElement);\n return acc;\n }, []);\n // When close button is enabled it's the first focusable element.\n if (closeButton) {\n modalFocusableElements.unshift(element.shadowRoot.querySelector(`.mg-modal__close-button mg-button`));\n }\n const lastFocusableElement = modalFocusableElements[modalFocusableElements.length - 1];\n const spyFirst = jest.spyOn(modalFocusableElements[0], 'focus');\n const spyLast = jest.spyOn(lastFocusableElement, 'focus');\n\n // Display modal\n element.hide = false;\n await page.waitForChanges();\n expect(spyFirst).toHaveBeenCalledTimes(0);\n fireMo([mutation]);\n await page.waitForChanges();\n expect(spyFirst).toHaveBeenCalledTimes(1);\n // Tab from last focusable element\n lastFocusableElement.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Tab', shiftKey: false }));\n await page.waitForChanges();\n expect(spyFirst).toHaveBeenCalledTimes(2);\n // Tab first focusable element with shift key\n modalFocusableElements[0].dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Tab', shiftKey: true }));\n await page.waitForChanges();\n expect(spyLast).toHaveBeenCalledTimes(1);\n });\n });\n });\n});\n"]}
1	+ {"version":3,"file":"mg-modal.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-modal/test/mg-modal.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars /\n/ eslint-disable @typescript-eslint/no-empty-function */\nimport { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgButton } from '../../../atoms/mg-button/mg-button';\nimport { MgModal } from '../mg-modal';\nimport { focusableElements } from '../../../../utils/components.utils';\nimport { setupMutationObserverMock } from '../../../../utils/unit.test.utils';\nimport { dialogRoles } from '../mg-modal.conf';\n\nconst getPage = (args, slots?) =>\n newSpecPage({\n components: [MgModal, MgButton],\n template: () => (\n <mg-modal {...args}>\n {slots?.content && (\n <p slot=\"content\">\n <strong>Strong</strong> content with <a href=\"./\">a link</a>!\n </p>\n )}\n {slots?.actions && (\n <div slot=\"actions\" class=\"mg-group-elements mg-group-elements--align-right\">\n <mg-button>Primary</mg-button>\n <mg-button variant=\"secondary\">Secondary</mg-button>\n </div>\n )}\n </mg-modal>\n ),\n });\n\ndescribe('mg-modal', () => {\n let fireMo;\n\n beforeEach(() => {\n setupMutationObserverMock({\n observe: function () {\n fireMo = this.cb;\n },\n disconnect: function () {\n return null;\n },\n takeRecords: () => [],\n });\n });\n\n describe.each([undefined, { content: true }, { actions: true }, { content: true, actions: true }])('Should render a modal', slots => {\n test.each([\n { modalTitle: 'Modal Title', identifier: 'identifier' },\n { modalTitle: 'Modal Title', identifier: 'identifier', dialogRole: 'alertdialog' },\n { modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true },\n { modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true, hide: true },\n { modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true, lang: 'fr' },\n { modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true, lang: 'xx' },\n ])('with args %s', async args => {\n const { root } = await getPage({ ...args }, slots);\n expect(root).toMatchSnapshot();\n });\n });\n\n test.each(['', ' ', undefined])('Should not render with invalid modalTitle property: %s', async modalTitle => {\n expect.assertions(1);\n try {\n await getPage({ modalTitle });\n } catch (err) {\n expect(err.message).toMatch('<mg-modal> prop \"modalTitle\" is required.');\n }\n });\n\n test.each([' ', 'batman'])('Should throw error with invalid dialogRole property: %s', async dialogRole => {\n expect.assertions(1);\n try {\n await getPage({ modalTitle: 'Modal title', dialogRole });\n } catch (err) {\n expect(err.message).toMatch(`<mg-modal> prop \"dialogRole\" must be one of: ${dialogRoles.join(', ')}.`);\n }\n });\n\n describe('navigation', () => {\n test('should hide panel with button', async () => {\n const page = await getPage({ modalTitle: 'Modal Title', identifier: 'identifier', closeButton: true });\n const closeButton = page.root.shadowRoot.querySelector('mg-button');\n\n expect(page.root).toMatchSnapshot();\n\n const spy = jest.spyOn(page.rootInstance.componentHide, 'emit');\n\n closeButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n expect(spy).toHaveBeenCalled();\n });\n\n test.each([true, false])('should hide panel with escape keyboard', async closeButton => {\n const page = await getPage({ modalTitle: 'Modal Title', identifier: 'identifier', closeButton });\n expect(page.root).toMatchSnapshot();\n\n const spy = jest.spyOn(page.rootInstance.componentHide, 'emit');\n\n page.win.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n if (closeButton) {\n expect(spy).toHaveBeenCalled();\n } else {\n expect(spy).not.toHaveBeenCalled();\n }\n });\n\n describe.each([\n { attributeName: 'aria-hidden', target: { ariaHidden: null } },\n { attributeName: 'aria-hidden', target: { ariaHidden: '' } },\n { attributeName: 'aria-hidden', target: { ariaHidden: undefined } },\n ])('mutationObserver', mutation => {\n test.each([true, false])('should keep focus inside modal, closeButton %s', async closeButton => {\n const page = await getPage({ modalTitle: 'Modal Title', identifier: 'identifier', closeButton, hide: true }, { content: true, actions: true });\n const element = page.doc.querySelector('mg-modal');\n // Get all focusable elements\n const modalFocusableElements = Array.from(element.querySelectorAll(focusableElements)).reduce((acc, focusableElement) => {\n acc.push(focusableElement.shadowRoot !== null ? focusableElement.shadowRoot.querySelector(focusableElements) \|\| focusableElement : focusableElement);\n return acc;\n }, []);\n // When close button is enabled it's the first focusable element.\n if (closeButton) {\n modalFocusableElements.unshift(element.shadowRoot.querySelector(`.mg-c-modal__close-button mg-button`));\n }\n const lastFocusableElement = modalFocusableElements[modalFocusableElements.length - 1];\n const spyFirst = jest.spyOn(modalFocusableElements[0], 'focus');\n const spyLast = jest.spyOn(lastFocusableElement, 'focus');\n\n // Display modal\n element.hide = false;\n await page.waitForChanges();\n expect(spyFirst).toHaveBeenCalledTimes(0);\n fireMo([mutation]);\n await page.waitForChanges();\n expect(spyFirst).toHaveBeenCalledTimes(1);\n // Tab from last focusable element\n lastFocusableElement.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Tab', shiftKey: false }));\n await page.waitForChanges();\n expect(spyFirst).toHaveBeenCalledTimes(2);\n // Tab first focusable element with shift key\n modalFocusableElements[0].dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key: 'Tab', shiftKey: true }));\n await page.waitForChanges();\n expect(spyLast).toHaveBeenCalledTimes(1);\n });\n });\n });\n});\n"]}

package/dist/collection/components/molecules/mg-pagination/mg-pagination.js CHANGED Viewed

@@ -98,18 +98,18 @@ export class MgPagination {
     const navigationActionButton = (disabled, action) => (h("mg-button", { identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
       // eslint-disable-next-line react/jsx-no-bind
       onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), !this.hideNavigationLabels && this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
-    return (h(Host, { hidden: this.totalPages < 2 }, h("nav", { "aria-label": this.label, id: this.identifier, class: { 'mg-pagination': true, 'mg-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true })), h("span", { class: "sr-only" }, this.messages.pagination.page, " ", this.currentPage), h("span", { class: { 'sr-only': this.hidePageCount } }, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
+    return (h(Host, { hidden: this.totalPages < 2 }, h("nav", { role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true })), h("span", { class: "mg-u-visually-hidden" }, this.messages.pagination.page, " ", this.currentPage), h("span", { class: { 'mg-u-visually-hidden': this.hidePageCount } }, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
   }
   static get is() { return "mg-pagination"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["mg-pagination.scss"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-pagination.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["mg-pagination.css"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-pagination.css"]
     };
   }
   static get properties() {

package/dist/collection/components/molecules/mg-pagination/mg-pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-pagination.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-pagination/mg-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, Watch, Event, EventEmitter, Host } from '@stencil/core';\nimport { createID } from '../../../utils/components.utils';\nimport { NavigationAction } from './mg-pagination.conf';\nimport { initLocales } from './../../../locales';\n\n/*\n Range generator\n \n ```\n * start by get the range length, add \"+ 1\" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3\n * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]\n * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values\n * then with Array.from(Array(...)) we get the complete array with \"index\" values instead of \"empty\" values\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) \|\| 1).keys()) => [0, 1, 2]\n * finaly we map values from \"start\" range and apply the \"step\" coefficiant,\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) \|\| 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]\n * ```\n \n range(1, 1) = [1]\n * range(1, 5) = [1, 2, 3, 4, 5]\n * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]\n * @param start - start range\n * @param end - start end\n * @param step - step size\n * @returns range numbers\n /\nconst range = (start: number, end: number, step = 1): number[] => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x step);\n\n@Component({\n tag: 'mg-pagination',\n styleUrl: 'mg-pagination.scss',\n shadow: true,\n})\nexport class MgPagination {\n /***********\n Internal \n *********/\n\n // Locales\n private messages;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgPaginationElement;\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-pagination');\n\n /\n Panignation label. Is a short description.\n * Customize default value can be usefull to improve accessibility\n /\n @Prop({ mutable: true }) label: string;\n\n /\n Hide navigation label\n /\n @Prop() hideNavigationLabels: boolean;\n\n /\n Hide select input\n /\n @Prop() hidePageCount: boolean;\n\n /\n Component total pages\n /\n @Prop() totalPages = 1;\n @Watch('totalPages')\n validateTotalPages(newValue: number): void {\n if (newValue < 1) {\n throw new Error('<mg-pagination> prop \"totalPages\" must be greater than 0');\n }\n }\n\n /\n Component current page\n /\n @Prop({ reflect: true, mutable: true }) currentPage = 1;\n @Watch('currentPage')\n validateCurrentPage(newValue: number): void {\n if (newValue < 1) {\n throw new Error('<mg-pagination> prop \"currentPage\" must be greater than 0');\n } else if (newValue > this.totalPages) {\n throw new Error('<mg-pagination> prop \"currentPage\" can not be greater than total page');\n }\n\n this.currentPageChange.emit(newValue);\n }\n\n /\n Emmited event when current page change\n /\n @Event({ eventName: 'current-page-change' }) currentPageChange: EventEmitter<number>;\n\n /\n Change current page from target\n * @param target - target page\n /\n private goToPage = (target: number): void => {\n this.currentPage = target;\n };\n\n /**********\n Handlers \n *********/\n\n /\n * select handler\n * @param event - value change event\n /\n private handleSelect = (event: InputEvent & { target: HTMLInputElement }): void => {\n const to = Number(event.target.value);\n this.goToPage(to > 0 ? to : 1);\n };\n\n /\n Go to 'previous/next' page button handler\n * @param action - navigation action\n * @param disabled - button disable state\n /\n private handleGoToPage = (action: string, disabled: boolean): void => {\n !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if props are well configured on init\n /\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validateTotalPages(this.totalPages);\n this.validateCurrentPage(this.currentPage);\n // Set default label\n if (this.label === undefined \|\| this.label === '') {\n this.label = this.messages.pagination.label;\n }\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const navigationActionButton = (disabled: boolean, action: string) => (\n <mg-button\n identifier={`${this.identifier}-button-${action}`}\n label={this.messages.pagination[`${action}Page`]}\n // eslint-disable-next-line react/jsx-no-bind\n onClick={() => this.handleGoToPage(action, disabled)}\n disabled={disabled}\n variant=\"flat\"\n isIcon={this.hideNavigationLabels}\n >\n {action === NavigationAction.PREVIOUS && <mg-icon icon=\"chevron-left\"></mg-icon>}\n {!this.hideNavigationLabels && this.messages.general[action]}\n {action === NavigationAction.NEXT && <mg-icon icon=\"chevron-right\"></mg-icon>}\n </mg-button>\n );\n\n return (\n <Host hidden={this.totalPages < 2}>\n <nav aria-label={this.label} id={this.identifier} class={{ 'mg-pagination': true, 'mg-pagination--hide-page-count': this.hidePageCount }}>\n {navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS)}\n {!this.hidePageCount && (\n <mg-input-select\n identifier={`${this.identifier}-select`}\n items={range(1, this.totalPages).map(page => page.toString())}\n label={this.messages.pagination.selectPage}\n label-hide={true}\n on-value-change={this.handleSelect}\n value={this.currentPage.toString()}\n placeholder-hide\n ></mg-input-select>\n )}\n <span class=\"sr-only\">\n {this.messages.pagination.page} {this.currentPage}\n </span>\n <span class={{ 'sr-only': this.hidePageCount }}>\n / {this.totalPages} {this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page}\n </span>\n {navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)}\n </nav>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"mg-pagination.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-pagination/mg-pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, Watch, Event, EventEmitter, Host } from '@stencil/core';\nimport { createID } from '../../../utils/components.utils';\nimport { NavigationAction } from './mg-pagination.conf';\nimport { initLocales } from './../../../locales';\n\n/*\n Range generator\n \n ```\n * start by get the range length, add \"+ 1\" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3\n * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]\n * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values\n * then with Array.from(Array(...)) we get the complete array with \"index\" values instead of \"empty\" values\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) \|\| 1).keys()) => [0, 1, 2]\n * finaly we map values from \"start\" range and apply the \"step\" coefficiant,\n * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) \|\| 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]\n * ```\n \n range(1, 1) = [1]\n * range(1, 5) = [1, 2, 3, 4, 5]\n * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]\n * @param start - start range\n * @param end - start end\n * @param step - step size\n * @returns range numbers\n /\nconst range = (start: number, end: number, step = 1): number[] => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x step);\n\n@Component({\n tag: 'mg-pagination',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-pagination.css',\n shadow: true,\n})\nexport class MgPagination {\n /***********\n Internal \n *********/\n\n // Locales\n private messages;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgPaginationElement;\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-pagination');\n\n /\n Panignation label. Is a short description.\n * Customize default value can be usefull to improve accessibility\n /\n @Prop({ mutable: true }) label: string;\n\n /\n Hide navigation label\n /\n @Prop() hideNavigationLabels: boolean;\n\n /\n Hide select input\n /\n @Prop() hidePageCount: boolean;\n\n /\n Component total pages\n /\n @Prop() totalPages = 1;\n @Watch('totalPages')\n validateTotalPages(newValue: number): void {\n if (newValue < 1) {\n throw new Error('<mg-pagination> prop \"totalPages\" must be greater than 0');\n }\n }\n\n /\n Component current page\n /\n @Prop({ reflect: true, mutable: true }) currentPage = 1;\n @Watch('currentPage')\n validateCurrentPage(newValue: number): void {\n if (newValue < 1) {\n throw new Error('<mg-pagination> prop \"currentPage\" must be greater than 0');\n } else if (newValue > this.totalPages) {\n throw new Error('<mg-pagination> prop \"currentPage\" can not be greater than total page');\n }\n\n this.currentPageChange.emit(newValue);\n }\n\n /\n Emmited event when current page change\n /\n @Event({ eventName: 'current-page-change' }) currentPageChange: EventEmitter<number>;\n\n /\n Change current page from target\n * @param target - target page\n /\n private goToPage = (target: number): void => {\n this.currentPage = target;\n };\n\n /**********\n Handlers \n *********/\n\n /\n * select handler\n * @param event - value change event\n /\n private handleSelect = (event: InputEvent & { target: HTMLInputElement }): void => {\n const to = Number(event.target.value);\n this.goToPage(to > 0 ? to : 1);\n };\n\n /\n Go to 'previous/next' page button handler\n * @param action - navigation action\n * @param disabled - button disable state\n /\n private handleGoToPage = (action: string, disabled: boolean): void => {\n !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if props are well configured on init\n /\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validateTotalPages(this.totalPages);\n this.validateCurrentPage(this.currentPage);\n // Set default label\n if (this.label === undefined \|\| this.label === '') {\n this.label = this.messages.pagination.label;\n }\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n const navigationActionButton = (disabled: boolean, action: string) => (\n <mg-button\n identifier={`${this.identifier}-button-${action}`}\n label={this.messages.pagination[`${action}Page`]}\n // eslint-disable-next-line react/jsx-no-bind\n onClick={() => this.handleGoToPage(action, disabled)}\n disabled={disabled}\n variant=\"flat\"\n isIcon={this.hideNavigationLabels}\n >\n {action === NavigationAction.PREVIOUS && <mg-icon icon=\"chevron-left\"></mg-icon>}\n {!this.hideNavigationLabels && this.messages.general[action]}\n {action === NavigationAction.NEXT && <mg-icon icon=\"chevron-right\"></mg-icon>}\n </mg-button>\n );\n\n return (\n <Host hidden={this.totalPages < 2}>\n <nav role=\"navigation\" aria-label={this.label} id={this.identifier} class={{ 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount }}>\n {navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS)}\n {!this.hidePageCount && (\n <mg-input-select\n identifier={`${this.identifier}-select`}\n items={range(1, this.totalPages).map(page => page.toString())}\n label={this.messages.pagination.selectPage}\n label-hide={true}\n on-value-change={this.handleSelect}\n value={this.currentPage.toString()}\n placeholder-hide\n ></mg-input-select>\n )}\n <span class=\"mg-u-visually-hidden\">\n {this.messages.pagination.page} {this.currentPage}\n </span>\n <span class={{ 'mg-u-visually-hidden': this.hidePageCount }}>\n / {this.totalPages} {this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page}\n </span>\n {navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)}\n </nav>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/molecules/mg-panel/mg-panel.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { createID, ClassList } from "../../../utils/components.utils";
+import { createID, ClassList, isValidString } from "../../../utils/components.utils";
 import { initLocales } from "../../../locales";
 import { expandToggleDisplays, titlePositions } from "./mg-panel.conf";
 export class MgPanel {
@@ -60,7 +60,7 @@ export class MgPanel {
      * Render collapse button
      * @returns collpase button
      */
-    this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, "aria-expanded": this.expanded !== undefined && this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.panelTitle }, h("span", { class: "mg-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: { 'mg-panel__collapse-button-icon': true, 'mg-panel__collapse-button-icon--reverse': !this.expanded } }), !this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle)));
+    this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, "aria-expanded": this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.panelTitle }, h("span", { class: "mg-c-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: { 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded } }), !this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle)));
     /**
      * Render edit button
      * @returns edit Button
@@ -91,8 +91,8 @@ export class MgPanel {
      */
     this.renderHeaderChildren = () => {
       const children = [
-        h("div", { class: { 'mg-panel__header-title': true, 'mg-panel__header-title--full': this.isEditing, 'mg-panel__header-title--reverse': this.titlePosition === 'right' }, key: this.panelTitle }, this.renderTitle()),
-        h("div", { class: "mg-panel__header-content", key: "slot-header" }, h("slot", { name: "header-right" })),
+        h("div", { class: { 'mg-c-panel__header-title': true, 'mg-c-panel__header-title--full': this.isEditing, 'mg-c-panel__header-title--reverse': this.titlePosition === 'right' }, key: this.panelTitle }, this.renderTitle()),
+        h("div", { class: "mg-c-panel__header-content", key: "slot-header" }, h("slot", { name: "header-right" })),
       ];
       return this.titlePosition === 'right' ? children.reverse() : children;
     };
@@ -105,12 +105,12 @@ export class MgPanel {
     this.expanded = false;
     this.expandToggleDisplay = expandToggleDisplays[0];
     this.expandToggleDisabled = undefined;
-    this.classCollection = new ClassList(['mg-panel']);
+    this.classCollection = new ClassList(['mg-c-panel']);
     this.isEditing = false;
     this.updatedPanelTitle = undefined;
   }
   validatePanelTitle(newValue) {
-    if (typeof newValue !== 'string' || newValue.trim() === '')
+    if (!isValidString(newValue))
       throw new Error('<mg-panel> prop "panelTitle" is required.');
     this.titleChange.emit(newValue);
   }
@@ -161,18 +161,18 @@ export class MgPanel {
    */
   render() {
     const headerId = `${this.identifier}-header`;
-    return (h("section", { class: this.classCollection.join(), id: this.identifier }, h("mg-card", null, h("header", { class: { 'mg-panel__header': true, 'mg-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", null)))));
+    return (h("section", { class: this.classCollection.join(), id: this.identifier }, h("mg-card", null, h("header", { class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", null)))));
   }
   static get is() { return "mg-panel"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["mg-panel.scss"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-panel.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["mg-panel.css"]
+      "$": ["../../../../node_modules/@mgdis/styles/dist/components/mg-panel.css"]
     };
   }
   static get properties() {

package/dist/collection/components/molecules/mg-panel/mg-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-panel.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-panel/mg-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, EventEmitter, Watch, Event } from '@stencil/core';\nimport { createID, ClassList } from '../../../utils/components.utils';\nimport { initLocales } from '../../../locales';\nimport { type ExpandToggleDisplayType, type TitlePositionType, expandToggleDisplays, titlePositions } from './mg-panel.conf';\n\n@Component({\n tag: 'mg-panel',\n styleUrl: 'mg-panel.scss',\n shadow: true,\n})\nexport class MgPanel {\n /***********\n Internal \n *********/\n\n // HTML selector\n private editInputElement: HTMLMgInputTextElement;\n\n // Locales\n private messages;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgPanelElement;\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-panel');\n\n /\n Panel title\n /\n @Prop({ mutable: true }) panelTitle!: string;\n @Watch('panelTitle')\n validatePanelTitle(newValue: string): void {\n if (typeof newValue !== 'string' \|\| newValue.trim() === '') throw new Error('<mg-panel> prop \"panelTitle\" is required.');\n this.titleChange.emit(newValue);\n }\n\n /\n Panel title pattern\n /\n @Prop() titlePattern: string;\n\n /\n Panel title pattern error message\n /\n @Prop() titlePatternErrorMessage: string;\n @Watch('titlePattern')\n @Watch('titlePatternErrorMessage')\n validateTitlePattern(newValue: string): void {\n if (newValue !== undefined && !this.titleEditable) throw new Error(`<mg-panel> prop \"titleEditable\" must be set to \"true\".`);\n }\n\n /\n Define if panel title is editable\n /\n @Prop({ mutable: true }) titleEditable = false;\n\n /\n Define title position\n /\n @Prop() titlePosition: TitlePositionType = titlePositions[0];\n @Watch('titlePosition')\n validateTitlePosition(newValue: MgPanel['titlePosition']) {\n if (!titlePositions.includes(newValue)) throw new Error(`<mg-panel> prop \"titlePosition\" must be one of: ${titlePositions.join(', ')}.`);\n }\n\n /\n Panel is opened\n /\n @Prop({ mutable: true }) expanded = false;\n @Watch('expanded')\n handleExpanded(newValue: boolean): void {\n this.expandedChange.emit(newValue);\n }\n\n /\n Define expand toggle button display\n /\n @Prop() expandToggleDisplay: ExpandToggleDisplayType = expandToggleDisplays[0];\n @Watch('expandToggleDisplay')\n validateExpandToggleDisplay(newValue: MgPanel['expandToggleDisplay']) {\n if (!expandToggleDisplays.includes(newValue)) throw new Error(`<mg-panel> prop \"expandToggleDisplay\" must be one of: ${expandToggleDisplays.join(', ')}.`);\n if (newValue === 'icon' && this.titleEditable) this.titleEditable = false;\n }\n\n /\n Disable possibility to toggle expand\n /\n @Prop() expandToggleDisabled: boolean;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-panel']);\n\n /\n Title is in edition mode\n /\n @State() isEditing = false;\n\n /\n Cache for updated panel title before validation\n /\n @State() updatedPanelTitle: string;\n\n /\n Emmited event when title change\n /\n @Event({ eventName: 'title-change' }) titleChange: EventEmitter<string>;\n\n /\n Emmited event when expanded change\n /\n @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<boolean>;\n\n /**********\n Methods \n *********/\n\n /\n * Toggle is editing state\n /\n private toggleIsEditing = (): void => {\n this.isEditing = !this.isEditing;\n };\n\n /**********\n Handlers \n *********/\n\n /\n * Collapse button click handler\n /\n private handleCollapseButton = (): void => {\n if (!this.expandToggleDisabled) this.expanded = !this.expanded;\n };\n\n /\n Edit button click handler\n /\n private handleEditButton = (): void => {\n this.toggleIsEditing();\n };\n\n /\n Update title handler\n * @param event - input value change event\n /\n private handleUpdateTitle = (event: CustomEvent<string>): void => {\n this.updatedPanelTitle = event.detail;\n };\n\n /\n Cancel edition button handler\n /\n private handleCancelEditButton = (): void => {\n this.updatedPanelTitle = undefined;\n this.toggleIsEditing();\n };\n\n /\n Validate edition button handler\n /\n private handleValidateEditButton = (): void => {\n if (!this.editInputElement.valid) return;\n if (this.updatedPanelTitle !== undefined) this.panelTitle = this.updatedPanelTitle;\n this.toggleIsEditing();\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if props are well configured on init\n /\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validateTitlePattern(this.titlePattern);\n this.validateTitlePattern(this.titlePatternErrorMessage);\n this.validatePanelTitle(this.panelTitle);\n this.validateExpandToggleDisplay(this.expandToggleDisplay);\n this.validateTitlePosition(this.titlePosition);\n }\n\n /\n Edit DOM after render\n /\n componentDidRender(): void {\n // when we are editing we get focus on edition input\n if (this.isEditing) this.editInputElement.setFocus();\n }\n\n /***********\n Render \n **********/\n\n /\n * Render collapse button\n * @returns collpase button\n /\n private renderCollapseButton = (): HTMLMgButtonElement => (\n <mg-button\n onClick={this.handleCollapseButton}\n variant=\"flat\"\n identifier={`${this.identifier}-collapse-button`}\n aria-expanded={this.expanded !== undefined && this.expanded.toString()}\n aria-controls={`${this.identifier}-content`}\n disabled={this.expandToggleDisabled}\n isIcon={this.expandToggleDisplay === 'icon'}\n label={this.panelTitle}\n >\n <span class=\"mg-panel__collapse-button-content\">\n <mg-icon icon=\"chevron-up\" class={{ 'mg-panel__collapse-button-icon': true, 'mg-panel__collapse-button-icon--reverse': !this.expanded }}></mg-icon>\n {!this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle}\n </span>\n </mg-button>\n );\n\n /\n Render edit button\n * @returns edit Button\n /\n private renderEditButton = (): HTMLMgButtonElement => (\n <mg-button key=\"edit-button\" is-icon variant=\"flat\" label={this.messages.panel.editLabel} onClick={this.handleEditButton} identifier={`${this.identifier}-edit-button`}>\n <mg-icon icon=\"pen\"></mg-icon>\n </mg-button>\n );\n\n /\n Render input button\n * @returns edit title input\n /\n private renderEditInput = (): HTMLMgInputTextElement => (\n <mg-input-text\n key=\"edition-input\"\n label={this.messages.panel.editLabel}\n label-hide\n value={this.panelTitle}\n onValue-change={this.handleUpdateTitle}\n displayCharacterLeft={false}\n pattern={this.titlePattern}\n pattern-error-message={this.titlePatternErrorMessage}\n identifier={`${this.identifier}-edition-input`}\n ref={(el: HTMLMgInputTextElement) => (this.editInputElement = el)}\n >\n <mg-button\n slot=\"append-input\"\n label={this.messages.general.cancel}\n is-icon\n variant=\"secondary\"\n onClick={this.handleCancelEditButton}\n identifier={`${this.identifier}-edition-button-cancel`}\n >\n <mg-icon icon=\"cross\"></mg-icon>\n </mg-button>\n <mg-button\n slot=\"append-input\"\n label={this.messages.general.confirm}\n is-icon\n variant=\"secondary\"\n onClick={this.handleValidateEditButton}\n identifier={`${this.identifier}-edition-button-validate`}\n >\n <mg-icon icon=\"check\"></mg-icon>\n </mg-button>\n </mg-input-text>\n );\n\n /\n Render title\n * @returns title element\n /\n private renderTitle = (): HTMLElement[] => {\n const elementsToRender: HTMLElement[] = [this.renderCollapseButton()];\n if (this.titleEditable) {\n if (!this.isEditing) elementsToRender.push(this.renderEditButton());\n else elementsToRender.push(this.renderEditInput());\n }\n\n return this.titlePosition === 'right' ? elementsToRender.reverse() : elementsToRender;\n };\n\n /\n Render header children\n * @returns header child\n /\n private renderHeaderChildren = (): HTMLElement[] => {\n const children = [\n <div\n class={{ 'mg-panel__header-title': true, 'mg-panel__header-title--full': this.isEditing, 'mg-panel__header-title--reverse': this.titlePosition === 'right' }}\n key={this.panelTitle}\n >\n {this.renderTitle()}\n </div>,\n <div class=\"mg-panel__header-content\" key=\"slot-header\">\n <slot name=\"header-right\"></slot>\n </div>,\n ];\n return this.titlePosition === 'right' ? children.reverse() : children;\n };\n\n /\n Render component\n * @returns rendered component\n */\n render(): HTMLElement {\n const headerId = `${this.identifier}-header`;\n return (\n <section class={this.classCollection.join()} id={this.identifier}>\n <mg-card>\n <header class={{ 'mg-panel__header': true, 'mg-panel__header--reverse': this.titlePosition === 'right' }} id={headerId}>\n {this.renderHeaderChildren()}\n </header>\n <article class=\"mg-panel__content\" id={`${this.identifier}-content`} aria-labelledby={headerId} hidden={!this.expanded}>\n <slot></slot>\n </article>\n </mg-card>\n </section>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"mg-panel.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-panel/mg-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, EventEmitter, Watch, Event } from '@stencil/core';\nimport { createID, ClassList, isValidString } from '../../../utils/components.utils';\nimport { initLocales } from '../../../locales';\nimport { type ExpandToggleDisplayType, type TitlePositionType, expandToggleDisplays, titlePositions } from './mg-panel.conf';\n\n@Component({\n tag: 'mg-panel',\n styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-panel.css',\n shadow: true,\n})\nexport class MgPanel {\n /***********\n Internal \n *********/\n\n // HTML selector\n private editInputElement: HTMLMgInputTextElement;\n\n // Locales\n private messages;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgPanelElement;\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-panel');\n\n /\n Panel title\n /\n @Prop({ mutable: true }) panelTitle!: string;\n @Watch('panelTitle')\n validatePanelTitle(newValue: MgPanel['panelTitle']): void {\n if (!isValidString(newValue)) throw new Error('<mg-panel> prop \"panelTitle\" is required.');\n this.titleChange.emit(newValue);\n }\n\n /\n Panel title pattern\n /\n @Prop() titlePattern: string;\n\n /\n Panel title pattern error message\n /\n @Prop() titlePatternErrorMessage: string;\n @Watch('titlePattern')\n @Watch('titlePatternErrorMessage')\n validateTitlePattern(newValue: string): void {\n if (newValue !== undefined && !this.titleEditable) throw new Error(`<mg-panel> prop \"titleEditable\" must be set to \"true\".`);\n }\n\n /\n Define if panel title is editable\n /\n @Prop({ mutable: true }) titleEditable = false;\n\n /\n Define title position\n /\n @Prop() titlePosition: TitlePositionType = titlePositions[0];\n @Watch('titlePosition')\n validateTitlePosition(newValue: MgPanel['titlePosition']) {\n if (!titlePositions.includes(newValue)) throw new Error(`<mg-panel> prop \"titlePosition\" must be one of: ${titlePositions.join(', ')}.`);\n }\n\n /\n Panel is opened\n /\n @Prop({ mutable: true }) expanded = false;\n @Watch('expanded')\n handleExpanded(newValue: MgPanel['expanded']): void {\n this.expandedChange.emit(newValue);\n }\n\n /\n Define expand toggle button display\n /\n @Prop() expandToggleDisplay: ExpandToggleDisplayType = expandToggleDisplays[0];\n @Watch('expandToggleDisplay')\n validateExpandToggleDisplay(newValue: MgPanel['expandToggleDisplay']) {\n if (!expandToggleDisplays.includes(newValue)) throw new Error(`<mg-panel> prop \"expandToggleDisplay\" must be one of: ${expandToggleDisplays.join(', ')}.`);\n if (newValue === 'icon' && this.titleEditable) this.titleEditable = false;\n }\n\n /\n Disable possibility to toggle expand\n /\n @Prop() expandToggleDisabled: boolean;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-panel']);\n\n /\n Title is in edition mode\n /\n @State() isEditing = false;\n\n /\n Cache for updated panel title before validation\n /\n @State() updatedPanelTitle: string;\n\n /\n Emmited event when title change\n /\n @Event({ eventName: 'title-change' }) titleChange: EventEmitter<string>;\n\n /\n Emmited event when expanded change\n /\n @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<boolean>;\n\n /**********\n Methods \n *********/\n\n /\n * Toggle is editing state\n /\n private toggleIsEditing = (): void => {\n this.isEditing = !this.isEditing;\n };\n\n /**********\n Handlers \n *********/\n\n /\n * Collapse button click handler\n /\n private handleCollapseButton = (): void => {\n if (!this.expandToggleDisabled) this.expanded = !this.expanded;\n };\n\n /\n Edit button click handler\n /\n private handleEditButton = (): void => {\n this.toggleIsEditing();\n };\n\n /\n Update title handler\n * @param event - input value change event\n /\n private handleUpdateTitle = (event: CustomEvent<string>): void => {\n this.updatedPanelTitle = event.detail;\n };\n\n /\n Cancel edition button handler\n /\n private handleCancelEditButton = (): void => {\n this.updatedPanelTitle = undefined;\n this.toggleIsEditing();\n };\n\n /\n Validate edition button handler\n /\n private handleValidateEditButton = (): void => {\n if (!this.editInputElement.valid) return;\n if (this.updatedPanelTitle !== undefined) this.panelTitle = this.updatedPanelTitle;\n this.toggleIsEditing();\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if props are well configured on init\n /\n componentWillLoad(): void {\n // Get locales\n this.messages = initLocales(this.element).messages;\n // Validate\n this.validateTitlePattern(this.titlePattern);\n this.validateTitlePattern(this.titlePatternErrorMessage);\n this.validatePanelTitle(this.panelTitle);\n this.validateExpandToggleDisplay(this.expandToggleDisplay);\n this.validateTitlePosition(this.titlePosition);\n }\n\n /\n Edit DOM after render\n /\n componentDidRender(): void {\n // when we are editing we get focus on edition input\n if (this.isEditing) this.editInputElement.setFocus();\n }\n\n /***********\n Render \n **********/\n\n /\n * Render collapse button\n * @returns collpase button\n /\n private renderCollapseButton = (): HTMLMgButtonElement => (\n <mg-button\n onClick={this.handleCollapseButton}\n variant=\"flat\"\n identifier={`${this.identifier}-collapse-button`}\n aria-expanded={this.expanded.toString()}\n aria-controls={`${this.identifier}-content`}\n disabled={this.expandToggleDisabled}\n isIcon={this.expandToggleDisplay === 'icon'}\n label={this.panelTitle}\n >\n <span class=\"mg-c-panel__collapse-button-content\">\n <mg-icon icon=\"chevron-up\" class={{ 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded }}></mg-icon>\n {!this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle}\n </span>\n </mg-button>\n );\n\n /\n Render edit button\n * @returns edit Button\n /\n private renderEditButton = (): HTMLMgButtonElement => (\n <mg-button key=\"edit-button\" is-icon variant=\"flat\" label={this.messages.panel.editLabel} onClick={this.handleEditButton} identifier={`${this.identifier}-edit-button`}>\n <mg-icon icon=\"pen\"></mg-icon>\n </mg-button>\n );\n\n /\n Render input button\n * @returns edit title input\n /\n private renderEditInput = (): HTMLMgInputTextElement => (\n <mg-input-text\n key=\"edition-input\"\n label={this.messages.panel.editLabel}\n label-hide\n value={this.panelTitle}\n onValue-change={this.handleUpdateTitle}\n displayCharacterLeft={false}\n pattern={this.titlePattern}\n pattern-error-message={this.titlePatternErrorMessage}\n identifier={`${this.identifier}-edition-input`}\n ref={(el: HTMLMgInputTextElement) => (this.editInputElement = el)}\n >\n <mg-button\n slot=\"append-input\"\n label={this.messages.general.cancel}\n is-icon\n variant=\"secondary\"\n onClick={this.handleCancelEditButton}\n identifier={`${this.identifier}-edition-button-cancel`}\n >\n <mg-icon icon=\"cross\"></mg-icon>\n </mg-button>\n <mg-button\n slot=\"append-input\"\n label={this.messages.general.confirm}\n is-icon\n variant=\"secondary\"\n onClick={this.handleValidateEditButton}\n identifier={`${this.identifier}-edition-button-validate`}\n >\n <mg-icon icon=\"check\"></mg-icon>\n </mg-button>\n </mg-input-text>\n );\n\n /\n Render title\n * @returns title element\n /\n private renderTitle = (): HTMLElement[] => {\n const elementsToRender: HTMLElement[] = [this.renderCollapseButton()];\n if (this.titleEditable) {\n if (!this.isEditing) elementsToRender.push(this.renderEditButton());\n else elementsToRender.push(this.renderEditInput());\n }\n\n return this.titlePosition === 'right' ? elementsToRender.reverse() : elementsToRender;\n };\n\n /\n Render header children\n * @returns header child\n /\n private renderHeaderChildren = (): HTMLElement[] => {\n const children = [\n <div\n class={{ 'mg-c-panel__header-title': true, 'mg-c-panel__header-title--full': this.isEditing, 'mg-c-panel__header-title--reverse': this.titlePosition === 'right' }}\n key={this.panelTitle}\n >\n {this.renderTitle()}\n </div>,\n <div class=\"mg-c-panel__header-content\" key=\"slot-header\">\n <slot name=\"header-right\"></slot>\n </div>,\n ];\n return this.titlePosition === 'right' ? children.reverse() : children;\n };\n\n /\n Render component\n * @returns rendered component\n */\n render(): HTMLElement {\n const headerId = `${this.identifier}-header`;\n return (\n <section class={this.classCollection.join()} id={this.identifier}>\n <mg-card>\n <header class={{ 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }} id={headerId}>\n {this.renderHeaderChildren()}\n </header>\n <article class=\"mg-c-panel__content\" id={`${this.identifier}-content`} aria-labelledby={headerId} hidden={!this.expanded}>\n <slot></slot>\n </article>\n </mg-card>\n </section>\n );\n }\n}\n"]}

package/dist/collection/components/molecules/mg-panel/test/mg-panel.e2e.playwright.js CHANGED Viewed

@@ -64,7 +64,7 @@ describe('mg-panel', () => {
     ])('Should navigate throw editabled panel %s', async (page, args) => {
       await setPageContent(page, createHTML(Object.assign({}, args)));
       await expect(page.locator('mg-panel')).toHaveScreenshot();
-      await page.locator('.mg-panel__header-title mg-button:last-of-type').click();
+      await page.locator('.mg-c-panel__header-title mg-button:last-of-type').click();
       // Hide caret for screenshots
       await page.locator('mg-panel input').evaluate(element => (element.style.caretColor = 'transparent'));
       await expect(page.locator('mg-panel')).toHaveScreenshot();
@@ -83,7 +83,7 @@ describe('mg-panel', () => {
     test('Should NOT update panel title, case input new value does NOT match pattern', async ({ page }) => {
       const args = Object.assign(Object.assign({}, baseArgs), { titleEditable: true, titlePattern: '^((?!joker).)*$', titlePatternErrorMessage: "You can't enter a bad guy !" });
       await setPageContent(page, createHTML(args));
-      await page.locator('.mg-panel__header-title mg-button:last-of-type').click();
+      await page.locator('.mg-c-panel__header-title mg-button:last-of-type').click();
       // Hide caret for screenshots
       await page.locator('mg-panel input').evaluate(element => (element.style.caretColor = 'transparent'));
       await expect(page.locator('mg-panel')).toHaveScreenshot();

package/dist/collection/components/molecules/mg-panel/test/mg-panel.e2e.playwright.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-panel.e2e.playwright.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-panel/test/mg-panel.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setPageContent, expect, describe, testEach, updateScreenshotClass, PageType, test } from '../../../../utils/playwright.e2e.test.utils';\nimport { createID } from '../../../../utils/components.utils';\nimport { renderAttributes, renderProperties } from '../../../../utils/e2e.test.utils';\nimport { type MgPanel } from '../mg-panel';\n\ntype ArgsType = Partial<MgPanel> & { slot?: SlotType };\nconst slots = ['default', 'flex'] as const;\ntype SlotType = (typeof slots)[number] \| string;\n\nconst baseArgs = {\n panelTitle: 'panel title',\n};\n\nconst createHTML = (args: ArgsType): string => {\n const identifier = createID();\n const slot: SlotType = Boolean(args.slot) ? args.slot : slots[0];\n delete args.slot;\n\n const flexSlotContainer = (content: string): string => '<mg-badge variant=\"primary\" value=\"1\" label=\"label\"></mg-badge><div>' + content + '</div>';\n const slotContent = `\n <mg-button variant=\"secondary\" style=\"margin-left: 200px;\">\n <mg-icon icon=\"file-upload\"></mg-icon> Upload\n </mg-button>\n <mg-button is-icon variant=\"secondary\" label=\"delete\">\n <mg-icon icon=\"trash\"></mg-icon>\n </mg-button>\n `;\n\n return `\n <mg-panel ${renderAttributes({ ...args, identifier })}>\n ${\n slots.includes(slot as (typeof slots)[number])\n ? `\n <div>Content</div>\n <div slot=\"header-right\" ${slot === 'flex' ? 'style=\"display:flex; justify-content:space-between; align-items:center; width:100%;\"' : ''}>\n ${slot === 'flex' ? flexSlotContainer(slotContent) : slotContent}\n </div>`\n : slot\n }\n </mg-panel>\n <script>${renderProperties(args, `[identifier=\"${identifier}\"]`)}</script>`;\n};\n\ndescribe('mg-panel', () => {\n testEach([\n { ...baseArgs },\n { ...baseArgs, titlePosition: 'left' },\n { ...baseArgs, titlePosition: 'right' },\n { ...baseArgs, titlePosition: 'right', titleEditable: true },\n { ...baseArgs, expandToggleDisplay: 'text' },\n { ...baseArgs, expandToggleDisplay: 'icon' },\n { ...baseArgs, expandToggleDisplay: 'icon', titleEditable: true },\n { ...baseArgs, expanded: true },\n { ...baseArgs, titleEditable: true },\n {\n ...baseArgs,\n panelTitle:\n 'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title',\n },\n {\n ...baseArgs,\n titleEditable: true,\n panelTitle:\n 'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title',\n },\n { ...baseArgs, slot: 'flex' },\n {\n ...baseArgs,\n slot: 'flex',\n panelTitle:\n 'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title',\n },\n { ...baseArgs, expanded: true, style: '--mg-panel-content-padding: 0', slot: '<div>Content without padding.</div>' },\n { ...baseArgs, expanded: true, style: '--mg-panel-background: none; --mg-panel-border-radius: 0; --mg-panel-box-shadow: none', slot: '<div>Transparent mg-panel</div>' },\n {\n ...baseArgs,\n expanded: true,\n slot: '<div>header right items should be vertically aligned</div><div slot=\"header-right\"><mg-tag>Label</mg-tag><mg-icon size=\"small\" icon=\"check-circle\" variant=\"success\"></mg-icon></div>',\n },\n { ...baseArgs, expanded: true, style: '--mg-panel-background: var(--color-danger)', slot: '<mg-card>Content whith child card.</mg-card>' },\n ])('Should render with template %s', async (page: PageType, args: ArgsType) => {\n await setPageContent(\n page,\n createHTML({\n ...args,\n }),\n );\n\n await updateScreenshotClass(page, { width: '500px', height: '100%' });\n\n await expect(page.locator('mg-panel')).toHaveScreenshot();\n\n await page.keyboard.press('Tab');\n await page.keyboard.press('Enter');\n await expect(page.locator('mg-panel')).toHaveScreenshot();\n });\n\n describe('navigation', () => {\n testEach([\n { ...baseArgs, titleEditable: true },\n {\n ...baseArgs,\n titleEditable: true,\n panelTitle:\n 'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title',\n },\n ])('Should navigate throw editabled panel %s', async (page: PageType, args: ArgsType) => {\n await setPageContent(\n page,\n createHTML({\n ...args,\n }),\n );\n\n await expect(page.locator('mg-panel')).toHaveScreenshot();\n\n await page.locator('.mg-panel__header-title mg-button:last-of-type').click();\n\n // Hide caret for screenshots\n await page.locator('mg-panel input').evaluate(element => (element.style.caretColor = 'transparent'));\n\n await expect(page.locator('mg-panel')).toHaveScreenshot();\n\n const input = await page.locator('mg-panel mg-input-text input');\n\n await input.press('Space');\n await input.press('KeyU');\n await input.press('KeyP');\n await input.press('KeyD');\n await input.press('KeyA');\n await input.press('KeyT');\n await input.press('KeyE');\n await input.press('KeyD');\n\n await page.locator('mg-panel mg-input-text mg-button:last-of-type').click();\n\n await expect(page.locator('mg-panel')).toHaveScreenshot();\n });\n\n test('Should NOT update panel title, case input new value does NOT match pattern', async ({ page }) => {\n const args = {\n ...baseArgs,\n titleEditable: true,\n titlePattern: '^((?!joker).)*$',\n titlePatternErrorMessage: \"You can't enter a bad guy !\",\n };\n\n await setPageContent(page, createHTML(args));\n\n await page.locator('.mg-panel__header-title mg-button:last-of-type').click();\n\n // Hide caret for screenshots\n await page.locator('mg-panel input').evaluate(element => (element.style.caretColor = 'transparent'));\n\n await expect(page.locator('mg-panel')).toHaveScreenshot();\n\n const input = await page.locator('mg-panel mg-input-text input');\n\n await input.press('Backspace');\n await input.press('Backspace');\n await input.press('Backspace');\n await input.press('Backspace');\n await input.press('Backspace');\n await input.press('KeyJ');\n await input.press('KeyO');\n await input.press('KeyK');\n await input.press('KeyE');\n await input.press('KeyR');\n\n await page.locator('mg-panel mg-input-text mg-button:last-of-type').click();\n\n await expect(page.locator('mg-panel')).toHaveScreenshot();\n });\n });\n});\n"]}
1	+ {"version":3,"file":"mg-panel.e2e.playwright.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-panel/test/mg-panel.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setPageContent, expect, describe, testEach, updateScreenshotClass, PageType, test } from '../../../../utils/playwright.e2e.test.utils';\nimport { createID } from '../../../../utils/components.utils';\nimport { renderAttributes, renderProperties } from '../../../../utils/e2e.test.utils';\nimport { type MgPanel } from '../mg-panel';\n\ntype ArgsType = Partial<MgPanel> & { slot?: SlotType };\nconst slots = ['default', 'flex'] as const;\ntype SlotType = (typeof slots)[number] \| string;\n\nconst baseArgs = {\n panelTitle: 'panel title',\n};\n\nconst createHTML = (args: ArgsType): string => {\n const identifier = createID();\n const slot: SlotType = Boolean(args.slot) ? args.slot : slots[0];\n delete args.slot;\n\n const flexSlotContainer = (content: string): string => '<mg-badge variant=\"primary\" value=\"1\" label=\"label\"></mg-badge><div>' + content + '</div>';\n const slotContent = `\n <mg-button variant=\"secondary\" style=\"margin-left: 200px;\">\n <mg-icon icon=\"file-upload\"></mg-icon> Upload\n </mg-button>\n <mg-button is-icon variant=\"secondary\" label=\"delete\">\n <mg-icon icon=\"trash\"></mg-icon>\n </mg-button>\n `;\n\n return `\n <mg-panel ${renderAttributes({ ...args, identifier })}>\n ${\n slots.includes(slot as (typeof slots)[number])\n ? `\n <div>Content</div>\n <div slot=\"header-right\" ${slot === 'flex' ? 'style=\"display:flex; justify-content:space-between; align-items:center; width:100%;\"' : ''}>\n ${slot === 'flex' ? flexSlotContainer(slotContent) : slotContent}\n </div>`\n : slot\n }\n </mg-panel>\n <script>${renderProperties(args, `[identifier=\"${identifier}\"]`)}</script>`;\n};\n\ndescribe('mg-panel', () => {\n testEach([\n { ...baseArgs },\n { ...baseArgs, titlePosition: 'left' },\n { ...baseArgs, titlePosition: 'right' },\n { ...baseArgs, titlePosition: 'right', titleEditable: true },\n { ...baseArgs, expandToggleDisplay: 'text' },\n { ...baseArgs, expandToggleDisplay: 'icon' },\n { ...baseArgs, expandToggleDisplay: 'icon', titleEditable: true },\n { ...baseArgs, expanded: true },\n { ...baseArgs, titleEditable: true },\n {\n ...baseArgs,\n panelTitle:\n 'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title',\n },\n {\n ...baseArgs,\n titleEditable: true,\n panelTitle:\n 'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title',\n },\n { ...baseArgs, slot: 'flex' },\n {\n ...baseArgs,\n slot: 'flex',\n panelTitle:\n 'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title',\n },\n { ...baseArgs, expanded: true, style: '--mg-panel-content-padding: 0', slot: '<div>Content without padding.</div>' },\n { ...baseArgs, expanded: true, style: '--mg-panel-background: none; --mg-panel-border-radius: 0; --mg-panel-box-shadow: none', slot: '<div>Transparent mg-panel</div>' },\n {\n ...baseArgs,\n expanded: true,\n slot: '<div>header right items should be vertically aligned</div><div slot=\"header-right\"><mg-tag>Label</mg-tag><mg-icon size=\"small\" icon=\"check-circle\" variant=\"success\"></mg-icon></div>',\n },\n { ...baseArgs, expanded: true, style: '--mg-panel-background: var(--color-danger)', slot: '<mg-card>Content whith child card.</mg-card>' },\n ])('Should render with template %s', async (page: PageType, args: ArgsType) => {\n await setPageContent(\n page,\n createHTML({\n ...args,\n }),\n );\n\n await updateScreenshotClass(page, { width: '500px', height: '100%' });\n\n await expect(page.locator('mg-panel')).toHaveScreenshot();\n\n await page.keyboard.press('Tab');\n await page.keyboard.press('Enter');\n await expect(page.locator('mg-panel')).toHaveScreenshot();\n });\n\n describe('navigation', () => {\n testEach([\n { ...baseArgs, titleEditable: true },\n {\n ...baseArgs,\n titleEditable: true,\n panelTitle:\n 'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title',\n },\n ])('Should navigate throw editabled panel %s', async (page: PageType, args: ArgsType) => {\n await setPageContent(\n page,\n createHTML({\n ...args,\n }),\n );\n\n await expect(page.locator('mg-panel')).toHaveScreenshot();\n\n await page.locator('.mg-c-panel__header-title mg-button:last-of-type').click();\n\n // Hide caret for screenshots\n await page.locator('mg-panel input').evaluate(element => (element.style.caretColor = 'transparent'));\n\n await expect(page.locator('mg-panel')).toHaveScreenshot();\n\n const input = await page.locator('mg-panel mg-input-text input');\n\n await input.press('Space');\n await input.press('KeyU');\n await input.press('KeyP');\n await input.press('KeyD');\n await input.press('KeyA');\n await input.press('KeyT');\n await input.press('KeyE');\n await input.press('KeyD');\n\n await page.locator('mg-panel mg-input-text mg-button:last-of-type').click();\n\n await expect(page.locator('mg-panel')).toHaveScreenshot();\n });\n\n test('Should NOT update panel title, case input new value does NOT match pattern', async ({ page }) => {\n const args = {\n ...baseArgs,\n titleEditable: true,\n titlePattern: '^((?!joker).)*$',\n titlePatternErrorMessage: \"You can't enter a bad guy !\",\n };\n\n await setPageContent(page, createHTML(args));\n\n await page.locator('.mg-c-panel__header-title mg-button:last-of-type').click();\n\n // Hide caret for screenshots\n await page.locator('mg-panel input').evaluate(element => (element.style.caretColor = 'transparent'));\n\n await expect(page.locator('mg-panel')).toHaveScreenshot();\n\n const input = await page.locator('mg-panel mg-input-text input');\n\n await input.press('Backspace');\n await input.press('Backspace');\n await input.press('Backspace');\n await input.press('Backspace');\n await input.press('Backspace');\n await input.press('KeyJ');\n await input.press('KeyO');\n await input.press('KeyK');\n await input.press('KeyE');\n await input.press('KeyR');\n\n await page.locator('mg-panel mg-input-text mg-button:last-of-type').click();\n\n await expect(page.locator('mg-panel')).toHaveScreenshot();\n });\n });\n});\n"]}

package/dist/collection/components/molecules/mg-panel/test/mg-panel.spec.js CHANGED Viewed

@@ -94,7 +94,7 @@ describe('mg-panel', () => {
     test.each([true, false])('Should toggle edit panel title', async (titleEditable) => {
       const page = await getPage({ identifier: 'identifier', panelTitle: 'panel title', titleEditable });
       const mgPanel = page.doc.querySelector('mg-panel');
-      const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');
+      const editButton = mgPanel.shadowRoot.querySelector('.mg-c-panel__header-title mg-button[is-icon]');
       expect(page.root).toMatchSnapshot();
       if (titleEditable) {
         editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
@@ -111,7 +111,7 @@ describe('mg-panel', () => {
       const args = { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true };
       const page = await getPage(args);
       const mgPanel = page.doc.querySelector('mg-panel');
-      const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');
+      const editButton = mgPanel.shadowRoot.querySelector('.mg-c-panel__header-title mg-button[is-icon]');
       expect(page.root).toMatchSnapshot();
       jest.spyOn(page.rootInstance.titleChange, 'emit');
       editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
@@ -124,7 +124,7 @@ describe('mg-panel', () => {
       await page.waitForChanges();
       input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));
       await page.waitForChanges();
-      const afterInputAction = mgPanel.shadowRoot.querySelector(`.mg-panel__header-title mg-input-text mg-button:${lastAction}`);
+      const afterInputAction = mgPanel.shadowRoot.querySelector(`.mg-c-panel__header-title mg-input-text mg-button:${lastAction}`);
       afterInputAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));
       jest.runOnlyPendingTimers();
       await page.waitForChanges();
@@ -143,7 +143,7 @@ describe('mg-panel', () => {
       const args = { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true };
       const page = await getPage(args);
       const mgPanel = page.doc.querySelector('mg-panel');
-      const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');
+      const editButton = mgPanel.shadowRoot.querySelector('.mg-c-panel__header-title mg-button[is-icon]');
       expect(page.root).toMatchSnapshot();
       jest.spyOn(page.rootInstance.titleChange, 'emit');
       editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
@@ -153,7 +153,7 @@ describe('mg-panel', () => {
       const input = mgInputText.shadowRoot.querySelector('input');
       input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));
       await page.waitForChanges();
-      const afterInputAction = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-input-text mg-button:last-of-type');
+      const afterInputAction = mgPanel.shadowRoot.querySelector('.mg-c-panel__header-title mg-input-text mg-button:last-of-type');
       afterInputAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));
       jest.runOnlyPendingTimers();
       await page.waitForChanges();
@@ -172,7 +172,7 @@ describe('mg-panel', () => {
       };
       const page = await getPage(args);
       const mgPanel = page.doc.querySelector('mg-panel');
-      const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');
+      const editButton = mgPanel.shadowRoot.querySelector('.mg-c-panel__header-title mg-button[is-icon]');
       expect(page.root).toMatchSnapshot();
       jest.spyOn(page.rootInstance.titleChange, 'emit');
       // first switch to title edition
@@ -194,7 +194,7 @@ describe('mg-panel', () => {
       input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));
       await page.waitForChanges();
       // and click on validate button
-      const afterInputAction = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-input-text mg-button:last-of-type');
+      const afterInputAction = mgPanel.shadowRoot.querySelector('.mg-c-panel__header-title mg-input-text mg-button:last-of-type');
       afterInputAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));
       jest.runOnlyPendingTimers();
       await page.waitForChanges();
@@ -202,7 +202,7 @@ describe('mg-panel', () => {
       expect(mgPanel.panelTitle).toBe(args.panelTitle);
       expect(page.rootInstance.titleChange.emit).not.toHaveBeenCalledWith(updatedPanelTitle);
       // finaly return to default view by clicking on cancel button
-      const cancelAction = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-input-text mg-button:last-of-type');
+      const cancelAction = mgPanel.shadowRoot.querySelector('.mg-c-panel__header-title mg-input-text mg-button:last-of-type');
       cancelAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));
       jest.runOnlyPendingTimers();
       await page.waitForChanges();

package/dist/collection/components/molecules/mg-panel/test/mg-panel.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-panel.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-panel/test/mg-panel.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgPanel } from '../mg-panel';\n\nimport { MgButton } from '../../../atoms/mg-button/mg-button';\nimport { MgInputText } from '../../inputs/mg-input-text/mg-input-text';\nimport { expandToggleDisplays, titlePositions } from '../mg-panel.conf';\n\nconst getPage = (args, slot?) => {\n const page = newSpecPage({\n components: [MgPanel, MgButton, MgInputText],\n template: () => <mg-panel {...args}>{slot}</mg-panel>,\n });\n jest.runAllTimers();\n\n return page;\n};\n\ndescribe('mg-panel', () => {\n beforeAll(() => (global.HTMLInputElement.prototype.focus = jest.fn()));\n afterAll(() => delete global.HTMLInputElement.prototype.focus);\n\n beforeEach(() => jest.useFakeTimers());\n afterEach(() => jest.runOnlyPendingTimers());\n\n test.each([\n { identifier: 'identifier', panelTitle: 'panel title' },\n { identifier: 'identifier', panelTitle: 'panel title', expanded: true },\n { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true },\n { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, titlePattern: /joker/, titlePatternErrorMessage: \"You can't enter a bad guy !\" },\n { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, lang: 'fr' },\n { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, lang: 'xx' },\n ...titlePositions.map(titlePosition => ({ identifier: 'identifier', panelTitle: 'panel title', titlePosition })),\n ...expandToggleDisplays.map(expandToggleDisplay => ({ identifier: 'identifier', panelTitle: 'panel title', expandToggleDisplay })),\n ...expandToggleDisplays.map(expandToggleDisplay => ({ identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, expandToggleDisplay })),\n ])('Should render with args %s:', async args => {\n const { root } = await getPage(args);\n expect(root).toMatchSnapshot();\n });\n\n describe('errors', () => {\n test('Should throw error when props association are unauthorized %s:', async () => {\n expect.assertions(1);\n try {\n await getPage({ identifier: 'identifier', panelTitle: 'panel title', titlePattern: /joker/ });\n } catch (err) {\n expect(err.message).toBe('<mg-panel> prop \"titleEditable\" must be set to \"true\".');\n }\n });\n\n test.each(['', ' ', undefined])('Should not render with invalid panelTitle property: %s', async panelTitle => {\n expect.assertions(1);\n try {\n await getPage({ panelTitle });\n } catch (err) {\n expect(err.message).toMatch('<mg-panel> prop \"panelTitle\" is required.');\n }\n });\n\n test.each(['', ' ', 'batman'].map(titlePosition => ({ panelTitle: 'panel title', titlePosition })))(\n 'Should throw an error when prop \"titlePosition\" is invalid',\n async props => {\n try {\n await getPage(props);\n } catch (err) {\n expect(err.message).toMatch(`<mg-panel> prop \"titlePosition\" must be one of: ${titlePositions.join(', ')}.`);\n }\n },\n );\n\n test.each(['', ' ', 'batman'].map(expandToggleDisplay => ({ panelTitle: 'panel title', expandToggleDisplay })))(\n 'Should throw an error when prop \"expandToggleDisplay\" is invalid',\n async props => {\n try {\n await getPage(props);\n } catch (err) {\n expect(err.message).toMatch(`<mg-panel> prop \"expandToggleDisplay\" must be one of: ${expandToggleDisplays.join(', ')}.`);\n }\n },\n );\n });\n\n describe('navigation', () => {\n test.each([true, false])('Should toggle collapse panel, expanded %s', async expanded => {\n const page = await getPage({ identifier: 'identifier', panelTitle: 'panel title', expanded });\n const mgPanel = page.doc.querySelector('mg-panel');\n const collapseButton = mgPanel.shadowRoot.querySelector('mg-button:first-of-type');\n\n const spy = jest.spyOn(page.rootInstance.expandedChange, 'emit');\n\n expect(page.root).toMatchSnapshot();\n\n collapseButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n\n collapseButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n\n expect(spy).toBeCalledTimes(2);\n });\n\n test.each([true, false])('Should NOT collapse panel, case expandToggleDisabled = true', async expanded => {\n const page = await getPage({ identifier: 'identifier', panelTitle: 'panel title', expanded, expandToggleDisabled: true });\n const mgPanel = page.doc.querySelector('mg-panel');\n const collapseButton = mgPanel.shadowRoot.querySelector('mg-button:first-of-type');\n\n expect(page.root).toMatchSnapshot();\n\n collapseButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n });\n\n test.each([true, false])('Should toggle edit panel title', async titleEditable => {\n const page = await getPage({ identifier: 'identifier', panelTitle: 'panel title', titleEditable });\n const mgPanel = page.doc.querySelector('mg-panel');\n const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');\n\n expect(page.root).toMatchSnapshot();\n\n if (titleEditable) {\n editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n\n editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n jest.runOnlyPendingTimers();\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n }\n });\n\n test.each(['first-of-type', 'last-of-type'])('should update panel title, case %s', async lastAction => {\n const updatedPanelTitle = 'Updated panel title';\n const args = { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true };\n const page = await getPage(args);\n const mgPanel = page.doc.querySelector('mg-panel');\n const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');\n\n expect(page.root).toMatchSnapshot();\n\n jest.spyOn(page.rootInstance.titleChange, 'emit');\n\n editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n\n const mgInputText = mgPanel.shadowRoot.querySelector('mg-input-text');\n const input = mgInputText.shadowRoot.querySelector('input');\n\n input.value = updatedPanelTitle;\n input.dispatchEvent(new CustomEvent('input', { bubbles: true }));\n await page.waitForChanges();\n\n input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));\n await page.waitForChanges();\n\n const afterInputAction = mgPanel.shadowRoot.querySelector(`.mg-panel__header-title mg-input-text mg-button:${lastAction}`);\n\n afterInputAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n jest.runOnlyPendingTimers();\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n\n if (lastAction === 'last-of-type') {\n expect(mgPanel.panelTitle).toBe(updatedPanelTitle);\n expect(page.rootInstance.titleChange.emit).toHaveBeenCalledWith(updatedPanelTitle);\n } else {\n expect(mgPanel.panelTitle).toBe(args.panelTitle);\n expect(page.rootInstance.titleChange.emit).not.toHaveBeenCalled();\n }\n });\n\n test('should NOT update panel title, case no enter in input', async () => {\n const updatedPanelTitle = 'Updated panel title';\n const args = { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true };\n const page = await getPage(args);\n const mgPanel = page.doc.querySelector('mg-panel');\n const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');\n\n expect(page.root).toMatchSnapshot();\n\n jest.spyOn(page.rootInstance.titleChange, 'emit');\n\n editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n\n const mgInputText = mgPanel.shadowRoot.querySelector('mg-input-text');\n const input = mgInputText.shadowRoot.querySelector('input');\n\n input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));\n await page.waitForChanges();\n\n const afterInputAction = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-input-text mg-button:last-of-type');\n\n afterInputAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n jest.runOnlyPendingTimers();\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n\n expect(mgPanel.panelTitle).toBe(args.panelTitle);\n expect(page.rootInstance.titleChange.emit).not.toHaveBeenCalledWith(updatedPanelTitle);\n });\n\n test('Should NOT update panel title, case input new value does NOT match pattern', async () => {\n const updatedPanelTitle = 'joker';\n const args = {\n identifier: 'identifier',\n panelTitle: 'panel title',\n titleEditable: true,\n titlePattern: '^(?!(joker)$)[a-z A-Z0-9s]+$',\n titlePatternErrorMessage: \"You can't enter a bad guy !\",\n };\n const page = await getPage(args);\n const mgPanel = page.doc.querySelector('mg-panel');\n const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');\n\n expect(page.root).toMatchSnapshot();\n\n jest.spyOn(page.rootInstance.titleChange, 'emit');\n\n // first switch to title edition\n editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n\n const mgInputText = mgPanel.shadowRoot.querySelector('mg-input-text');\n const input = mgInputText.shadowRoot.querySelector('input');\n input.checkValidity = jest.fn(() => false);\n Object.defineProperty(input, 'validity', {\n get: jest.fn(() => ({\n patternMismatch: false,\n })),\n });\n\n // second update title with a falsy update title\n input.value = updatedPanelTitle;\n input.dispatchEvent(new CustomEvent('input', { bubbles: true }));\n await page.waitForChanges();\n\n input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));\n await page.waitForChanges();\n\n // and click on validate button\n const afterInputAction = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-input-text mg-button:last-of-type');\n\n afterInputAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n jest.runOnlyPendingTimers();\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n\n expect(mgPanel.panelTitle).toBe(args.panelTitle);\n expect(page.rootInstance.titleChange.emit).not.toHaveBeenCalledWith(updatedPanelTitle);\n\n // finaly return to default view by clicking on cancel button\n const cancelAction = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-input-text mg-button:last-of-type');\n\n cancelAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n jest.runOnlyPendingTimers();\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n });\n });\n});\n"]}
1	+ {"version":3,"file":"mg-panel.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-panel/test/mg-panel.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAExE,MAAM,OAAO,GAAG,CAAC,IAAI,EAAE,IAAK,EAAE,EAAE;EAC9B,MAAM,IAAI,GAAG,WAAW,CAAC;IACvB,UAAU,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,WAAW,CAAC;IAC5C,QAAQ,EAAE,GAAG,EAAE,CAAC,gCAAc,IAAI,GAAG,IAAI,CAAY;GACtD,CAAC,CAAC;EACH,IAAI,CAAC,YAAY,EAAE,CAAC;EAEpB,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;EACxB,SAAS,CAAC,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;EACvE,QAAQ,CAAC,GAAG,EAAE,CAAC,OAAO,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;EAE/D,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;EACvC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;EAE7C,IAAI,CAAC,IAAI,CAAC;IACR,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE;IACvD,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE;IACvE,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,IAAI,EAAE;IAC5E,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,wBAAwB,EAAE,6BAA6B,EAAE;IAC5J,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;IACxF,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;IACxF,GAAG,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC,CAAC;IAChH,GAAG,oBAAoB,CAAC,GAAG,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,mBAAmB,EAAE,CAAC,CAAC;IAClI,GAAG,oBAAoB,CAAC,GAAG,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAC,CAAC;GACxJ,CAAC,CAAC,6BAA6B,EAAE,KAAK,EAAC,IAAI,EAAC,EAAE;IAC7C,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,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,IAAI,CAAC,gEAAgE,EAAE,KAAK,IAAI,EAAE;MAChF,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;MACrB,IAAI;QACF,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC;OAC/F;MAAC,OAAO,GAAG,EAAE;QACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,wDAAwD,CAAC,CAAC;OACpF;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,wDAAwD,EAAE,KAAK,EAAC,UAAU,EAAC,EAAE;MAC3G,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;MACrB,IAAI;QACF,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC;OAC/B;MAAC,OAAO,GAAG,EAAE;QACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,2CAA2C,CAAC,CAAC;OAC1E;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC,CACjG,4DAA4D,EAC5D,KAAK,EAAC,KAAK,EAAC,EAAE;MACZ,IAAI;QACF,MAAM,OAAO,CAAC,KAAK,CAAC,CAAC;OACtB;MAAC,OAAO,GAAG,EAAE;QACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,mDAAmD,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;OAC9G;IACH,CAAC,CACF,CAAC;IAEF,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,GAAG,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC,CAC7G,kEAAkE,EAClE,KAAK,EAAC,KAAK,EAAC,EAAE;MACZ,IAAI;QACF,MAAM,OAAO,CAAC,KAAK,CAAC,CAAC;OACtB;MAAC,OAAO,GAAG,EAAE;QACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,yDAAyD,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;OAC1H;IACH,CAAC,CACF,CAAC;EACJ,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,2CAA2C,EAAE,KAAK,EAAC,QAAQ,EAAC,EAAE;MACrF,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,CAAC;MAC9F,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MACnD,MAAM,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;MAEnF,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;MAEjE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,cAAc,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MAC1E,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,cAAc,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MAC1E,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,MAAM,CAAC,GAAG,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,6DAA6D,EAAE,KAAK,EAAC,QAAQ,EAAC,EAAE;MACvG,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC,CAAC;MAC1H,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MACnD,MAAM,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,yBAAyB,CAAC,CAAC;MAEnF,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,cAAc,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MAC1E,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,gCAAgC,EAAE,KAAK,EAAC,aAAa,EAAC,EAAE;MAC/E,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC,CAAC;MACnG,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MACnD,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,8CAA8C,CAAC,CAAC;MAEpG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,IAAI,aAAa,EAAE;QACjB,UAAU,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACtE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpC,UAAU,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;OACrC;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC,oCAAoC,EAAE,KAAK,EAAC,UAAU,EAAC,EAAE;MACpG,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;MAChD,MAAM,IAAI,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;MAC1F,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;MACjC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MACnD,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,8CAA8C,CAAC,CAAC;MAEpG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;MAElD,UAAU,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MACtE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,MAAM,WAAW,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;MACtE,MAAM,KAAK,GAAG,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;MAE5D,KAAK,CAAC,KAAK,GAAG,iBAAiB,CAAC;MAChC,KAAK,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MACjE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,KAAK,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MAChE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,gBAAgB,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,qDAAqD,UAAU,EAAE,CAAC,CAAC;MAE7H,gBAAgB,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MAC5E,IAAI,CAAC,oBAAoB,EAAE,CAAC;MAC5B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,IAAI,UAAU,KAAK,cAAc,EAAE;QACjC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACnD,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;OACpF;WAAM;QACL,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACjD,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;OACnE;IACH,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,uDAAuD,EAAE,KAAK,IAAI,EAAE;MACvE,MAAM,iBAAiB,GAAG,qBAAqB,CAAC;MAChD,MAAM,IAAI,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;MAC1F,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;MACjC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MACnD,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,8CAA8C,CAAC,CAAC;MAEpG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;MAElD,UAAU,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MACtE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,MAAM,WAAW,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;MACtE,MAAM,KAAK,GAAG,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;MAE5D,KAAK,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MAChE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,gBAAgB,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,gEAAgE,CAAC,CAAC;MAE5H,gBAAgB,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MAC5E,IAAI,CAAC,oBAAoB,EAAE,CAAC;MAC5B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;MACjD,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IACzF,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,4EAA4E,EAAE,KAAK,IAAI,EAAE;MAC5F,MAAM,iBAAiB,GAAG,OAAO,CAAC;MAClC,MAAM,IAAI,GAAG;QACX,UAAU,EAAE,YAAY;QACxB,UAAU,EAAE,aAAa;QACzB,aAAa,EAAE,IAAI;QACnB,YAAY,EAAE,8BAA8B;QAC5C,wBAAwB,EAAE,6BAA6B;OACxD,CAAC;MACF,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;MACjC,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MACnD,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,8CAA8C,CAAC,CAAC;MAEpG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;MAElD,gCAAgC;MAChC,UAAU,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MACtE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,MAAM,WAAW,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;MACtE,MAAM,KAAK,GAAG,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;MAC5D,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC;MAC3C,MAAM,CAAC,cAAc,CAAC,KAAK,EAAE,UAAU,EAAE;QACvC,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;UAClB,eAAe,EAAE,KAAK;SACvB,CAAC,CAAC;OACJ,CAAC,CAAC;MAEH,gDAAgD;MAChD,KAAK,CAAC,KAAK,GAAG,iBAAiB,CAAC;MAChC,KAAK,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MACjE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,KAAK,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MAChE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,+BAA+B;MAC/B,MAAM,gBAAgB,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,gEAAgE,CAAC,CAAC;MAE5H,gBAAgB,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MAC5E,IAAI,CAAC,oBAAoB,EAAE,CAAC;MAC5B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MAEpC,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;MACjD,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;MAEvF,6DAA6D;MAC7D,MAAM,YAAY,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,gEAAgE,CAAC,CAAC;MAExH,YAAY,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;MACxE,IAAI,CAAC,oBAAoB,EAAE,CAAC;MAC5B,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;MAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgPanel } from '../mg-panel';\n\nimport { MgButton } from '../../../atoms/mg-button/mg-button';\nimport { MgInputText } from '../../inputs/mg-input-text/mg-input-text';\nimport { expandToggleDisplays, titlePositions } from '../mg-panel.conf';\n\nconst getPage = (args, slot?) => {\n const page = newSpecPage({\n components: [MgPanel, MgButton, MgInputText],\n template: () => <mg-panel {...args}>{slot}</mg-panel>,\n });\n jest.runAllTimers();\n\n return page;\n};\n\ndescribe('mg-panel', () => {\n beforeAll(() => (global.HTMLInputElement.prototype.focus = jest.fn()));\n afterAll(() => delete global.HTMLInputElement.prototype.focus);\n\n beforeEach(() => jest.useFakeTimers());\n afterEach(() => jest.runOnlyPendingTimers());\n\n test.each([\n { identifier: 'identifier', panelTitle: 'panel title' },\n { identifier: 'identifier', panelTitle: 'panel title', expanded: true },\n { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true },\n { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, titlePattern: /joker/, titlePatternErrorMessage: \"You can't enter a bad guy !\" },\n { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, lang: 'fr' },\n { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, lang: 'xx' },\n ...titlePositions.map(titlePosition => ({ identifier: 'identifier', panelTitle: 'panel title', titlePosition })),\n ...expandToggleDisplays.map(expandToggleDisplay => ({ identifier: 'identifier', panelTitle: 'panel title', expandToggleDisplay })),\n ...expandToggleDisplays.map(expandToggleDisplay => ({ identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, expandToggleDisplay })),\n ])('Should render with args %s:', async args => {\n const { root } = await getPage(args);\n expect(root).toMatchSnapshot();\n });\n\n describe('errors', () => {\n test('Should throw error when props association are unauthorized %s:', async () => {\n expect.assertions(1);\n try {\n await getPage({ identifier: 'identifier', panelTitle: 'panel title', titlePattern: /joker/ });\n } catch (err) {\n expect(err.message).toBe('<mg-panel> prop \"titleEditable\" must be set to \"true\".');\n }\n });\n\n test.each(['', ' ', undefined])('Should not render with invalid panelTitle property: %s', async panelTitle => {\n expect.assertions(1);\n try {\n await getPage({ panelTitle });\n } catch (err) {\n expect(err.message).toMatch('<mg-panel> prop \"panelTitle\" is required.');\n }\n });\n\n test.each(['', ' ', 'batman'].map(titlePosition => ({ panelTitle: 'panel title', titlePosition })))(\n 'Should throw an error when prop \"titlePosition\" is invalid',\n async props => {\n try {\n await getPage(props);\n } catch (err) {\n expect(err.message).toMatch(`<mg-panel> prop \"titlePosition\" must be one of: ${titlePositions.join(', ')}.`);\n }\n },\n );\n\n test.each(['', ' ', 'batman'].map(expandToggleDisplay => ({ panelTitle: 'panel title', expandToggleDisplay })))(\n 'Should throw an error when prop \"expandToggleDisplay\" is invalid',\n async props => {\n try {\n await getPage(props);\n } catch (err) {\n expect(err.message).toMatch(`<mg-panel> prop \"expandToggleDisplay\" must be one of: ${expandToggleDisplays.join(', ')}.`);\n }\n },\n );\n });\n\n describe('navigation', () => {\n test.each([true, false])('Should toggle collapse panel, expanded %s', async expanded => {\n const page = await getPage({ identifier: 'identifier', panelTitle: 'panel title', expanded });\n const mgPanel = page.doc.querySelector('mg-panel');\n const collapseButton = mgPanel.shadowRoot.querySelector('mg-button:first-of-type');\n\n const spy = jest.spyOn(page.rootInstance.expandedChange, 'emit');\n\n expect(page.root).toMatchSnapshot();\n\n collapseButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n\n collapseButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n\n expect(spy).toBeCalledTimes(2);\n });\n\n test.each([true, false])('Should NOT collapse panel, case expandToggleDisabled = true', async expanded => {\n const page = await getPage({ identifier: 'identifier', panelTitle: 'panel title', expanded, expandToggleDisabled: true });\n const mgPanel = page.doc.querySelector('mg-panel');\n const collapseButton = mgPanel.shadowRoot.querySelector('mg-button:first-of-type');\n\n expect(page.root).toMatchSnapshot();\n\n collapseButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n });\n\n test.each([true, false])('Should toggle edit panel title', async titleEditable => {\n const page = await getPage({ identifier: 'identifier', panelTitle: 'panel title', titleEditable });\n const mgPanel = page.doc.querySelector('mg-panel');\n const editButton = mgPanel.shadowRoot.querySelector('.mg-c-panel__header-title mg-button[is-icon]');\n\n expect(page.root).toMatchSnapshot();\n\n if (titleEditable) {\n editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n\n editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n jest.runOnlyPendingTimers();\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n }\n });\n\n test.each(['first-of-type', 'last-of-type'])('should update panel title, case %s', async lastAction => {\n const updatedPanelTitle = 'Updated panel title';\n const args = { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true };\n const page = await getPage(args);\n const mgPanel = page.doc.querySelector('mg-panel');\n const editButton = mgPanel.shadowRoot.querySelector('.mg-c-panel__header-title mg-button[is-icon]');\n\n expect(page.root).toMatchSnapshot();\n\n jest.spyOn(page.rootInstance.titleChange, 'emit');\n\n editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n\n const mgInputText = mgPanel.shadowRoot.querySelector('mg-input-text');\n const input = mgInputText.shadowRoot.querySelector('input');\n\n input.value = updatedPanelTitle;\n input.dispatchEvent(new CustomEvent('input', { bubbles: true }));\n await page.waitForChanges();\n\n input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));\n await page.waitForChanges();\n\n const afterInputAction = mgPanel.shadowRoot.querySelector(`.mg-c-panel__header-title mg-input-text mg-button:${lastAction}`);\n\n afterInputAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n jest.runOnlyPendingTimers();\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n\n if (lastAction === 'last-of-type') {\n expect(mgPanel.panelTitle).toBe(updatedPanelTitle);\n expect(page.rootInstance.titleChange.emit).toHaveBeenCalledWith(updatedPanelTitle);\n } else {\n expect(mgPanel.panelTitle).toBe(args.panelTitle);\n expect(page.rootInstance.titleChange.emit).not.toHaveBeenCalled();\n }\n });\n\n test('should NOT update panel title, case no enter in input', async () => {\n const updatedPanelTitle = 'Updated panel title';\n const args = { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true };\n const page = await getPage(args);\n const mgPanel = page.doc.querySelector('mg-panel');\n const editButton = mgPanel.shadowRoot.querySelector('.mg-c-panel__header-title mg-button[is-icon]');\n\n expect(page.root).toMatchSnapshot();\n\n jest.spyOn(page.rootInstance.titleChange, 'emit');\n\n editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n\n const mgInputText = mgPanel.shadowRoot.querySelector('mg-input-text');\n const input = mgInputText.shadowRoot.querySelector('input');\n\n input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));\n await page.waitForChanges();\n\n const afterInputAction = mgPanel.shadowRoot.querySelector('.mg-c-panel__header-title mg-input-text mg-button:last-of-type');\n\n afterInputAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n jest.runOnlyPendingTimers();\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n\n expect(mgPanel.panelTitle).toBe(args.panelTitle);\n expect(page.rootInstance.titleChange.emit).not.toHaveBeenCalledWith(updatedPanelTitle);\n });\n\n test('Should NOT update panel title, case input new value does NOT match pattern', async () => {\n const updatedPanelTitle = 'joker';\n const args = {\n identifier: 'identifier',\n panelTitle: 'panel title',\n titleEditable: true,\n titlePattern: '^(?!(joker)$)[a-z A-Z0-9s]+$',\n titlePatternErrorMessage: \"You can't enter a bad guy !\",\n };\n const page = await getPage(args);\n const mgPanel = page.doc.querySelector('mg-panel');\n const editButton = mgPanel.shadowRoot.querySelector('.mg-c-panel__header-title mg-button[is-icon]');\n\n expect(page.root).toMatchSnapshot();\n\n jest.spyOn(page.rootInstance.titleChange, 'emit');\n\n // first switch to title edition\n editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n\n const mgInputText = mgPanel.shadowRoot.querySelector('mg-input-text');\n const input = mgInputText.shadowRoot.querySelector('input');\n input.checkValidity = jest.fn(() => false);\n Object.defineProperty(input, 'validity', {\n get: jest.fn(() => ({\n patternMismatch: false,\n })),\n });\n\n // second update title with a falsy update title\n input.value = updatedPanelTitle;\n input.dispatchEvent(new CustomEvent('input', { bubbles: true }));\n await page.waitForChanges();\n\n input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));\n await page.waitForChanges();\n\n // and click on validate button\n const afterInputAction = mgPanel.shadowRoot.querySelector('.mg-c-panel__header-title mg-input-text mg-button:last-of-type');\n\n afterInputAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n jest.runOnlyPendingTimers();\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n\n expect(mgPanel.panelTitle).toBe(args.panelTitle);\n expect(page.rootInstance.titleChange.emit).not.toHaveBeenCalledWith(updatedPanelTitle);\n\n // finaly return to default view by clicking on cancel button\n const cancelAction = mgPanel.shadowRoot.querySelector('.mg-c-panel__header-title mg-input-text mg-button:last-of-type');\n\n cancelAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n jest.runOnlyPendingTimers();\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n });\n });\n});\n"]}