@mgdis/mg-components 5.15.0 → 5.17.0

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

@@ -0,0 +1,55 @@
+var __asyncValues = (this && this.__asyncValues) || function (o) {
+  if (!Symbol.asyncIterator)
+    throw new TypeError("Symbol.asyncIterator is not defined.");
+  var m = o[Symbol.asyncIterator], i;
+  return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
+  function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
+  function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
+};
+import { createPage } from "../../../../utils/stencil.e2e.test.utils";
+describe('mg-skip-links', () => {
+  test('Should render', async () => {
+    var _a, e_1, _b, _c;
+    const page = await createPage(`<mg-skip-links></mg-skip-links>
+    <style>body{background:#999;}</style>
+    <script>
+      const mgSkipLinks = document.querySelector('mg-skip-links');
+      mgSkipLinks.links = [
+        { href: '#content', label: 'Content' },
+        { href: '#menu', label: 'Menu' },
+        { href: '#search', label: 'Search' },
+        { href: '#footer', label: 'Footer' },
+      ];
+    </script>`);
+    const mgSkipLinks = await page.find('mg-skip-links');
+    expect(mgSkipLinks).toHaveClass('hydrated');
+    await page.setViewport({ width: 400, height: 60 });
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+    try {
+      for (var _d = true, _e = __asyncValues(['Tab', 'Enter']), _f; _f = await _e.next(), _a = _f.done, !_a; _d = true) {
+        _c = _f.value;
+        _d = false;
+        const key = _c;
+        await page.keyboard.down(key);
+        await page.waitForChanges();
+        const screenshotTab = await page.screenshot();
+        expect(screenshotTab).toMatchImageSnapshot();
+      }
+    }
+    catch (e_1_1) {
+      e_1 = { error: e_1_1 };
+    }
+    finally {
+      try {
+        if (!_d && !_a && (_b = _e.return))
+          await _b.call(_e);
+      }
+      finally {
+        if (e_1)
+          throw e_1.error;
+      }
+    }
+  });
+});
+//# sourceMappingURL=mg-skip-links.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-skip-links.e2e.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-skip-links/test/mg-skip-links.e2e.ts"],"names":[],"mappings":";;;;;;;AACA,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAEtE,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;EAC7B,IAAI,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;;IAC/B,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC;;;;;;;;;;cAUpB,CAAC,CAAC;IAEZ,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACrD,MAAM,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAE5C,MAAM,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAEnD,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;;MAE1C,KAAwB,eAAA,KAAA,cAAA,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA,IAAA,sDAAE;QAAlB,cAAgB;QAAhB,WAAgB;QAA7B,MAAM,GAAG,KAAA,CAAA;QAClB,MAAM,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAe,CAAC,CAAC;QAC1C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;QAC9C,MAAM,CAAC,aAAa,CAAC,CAAC,oBAAoB,EAAE,CAAC;OAC9C;;;;;;;;;EACH,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { KeyInput } from 'puppeteer';\nimport { createPage } from '../../../../utils/stencil.e2e.test.utils';\n\ndescribe('mg-skip-links', () => {\n  test('Should render', async () => {\n    const page = await createPage(`<mg-skip-links></mg-skip-links>\n    <style>body{background:#999;}</style>\n    <script>\n      const mgSkipLinks = document.querySelector('mg-skip-links');\n      mgSkipLinks.links = [\n        { href: '#content', label: 'Content' },\n        { href: '#menu', label: 'Menu' },\n        { href: '#search', label: 'Search' },\n        { href: '#footer', label: 'Footer' },\n      ];\n    </script>`);\n\n    const mgSkipLinks = await page.find('mg-skip-links');\n    expect(mgSkipLinks).toHaveClass('hydrated');\n\n    await page.setViewport({ width: 400, height: 60 });\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n\n    for await (const key of ['Tab', 'Enter']) {\n      await page.keyboard.down(key as KeyInput);\n      await page.waitForChanges();\n\n      const screenshotTab = await page.screenshot();\n      expect(screenshotTab).toMatchImageSnapshot();\n    }\n  });\n});\n"]}

package/dist/collection/components/molecules/mg-skip-links/test/mg-skip-links.spec.js

@@ -0,0 +1,55 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgSkipLinks } from "../mg-skip-links";
+const getPage = args => newSpecPage({
+  components: [MgSkipLinks],
+  template: () => h("mg-skip-links", Object.assign({}, args)),
+});
+describe('mg-skip-links', () => {
+  test('with args %s', async () => {
+    const { root } = await getPage({
+      links: [
+        { href: '#content', label: 'Content' },
+        { href: '#menu', label: 'Menu' },
+        { href: '#search', label: 'Search' },
+        { href: '#footer', label: 'Footer' },
+      ],
+    });
+    expect(root).toMatchSnapshot();
+  });
+  test.each([
+    {},
+    { links: [] },
+    { links: [{ blu: 'blu', bli: 'bli' }] },
+    { links: [{ href: 'nohash', Label: 'label' }] },
+    { links: [{ href: '#hash', Label: ' ' }] },
+    { links: [{ href: '#hash', Label: '' }] },
+  ])('Should throw error with wrong link params: %s', async (args) => {
+    expect.assertions(1);
+    try {
+      await getPage(args);
+    }
+    catch (err) {
+      expect(err.message).toMatch('<mg-skip-links> prop "links": Cannot be empty and each link must contains an href starting with a "#" and a non empty label attributes.');
+    }
+  });
+  test('should emit event when link is clicked', async () => {
+    const page = await getPage({
+      links: [
+        { href: '#content', label: 'Content' },
+        { href: '#menu', label: 'Menu' },
+        { href: '#search', label: 'Search' },
+        { href: '#footer', label: 'Footer' },
+      ],
+    });
+    const spyGoToAnchor = jest.spyOn(page.rootInstance.goToAnchor, 'emit');
+    const mgSkiplinks = page.doc.querySelector('mg-skip-links');
+    const anchor = mgSkiplinks.shadowRoot.querySelector('a');
+    const spyBlur = jest.spyOn(anchor, 'blur');
+    anchor.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    await page.waitForChanges();
+    expect(spyGoToAnchor).toHaveBeenCalledWith('#content');
+    expect(spyBlur).toHaveBeenCalled();
+  });
+});
+//# sourceMappingURL=mg-skip-links.spec.js.map

package/dist/collection/components/molecules/mg-skip-links/test/mg-skip-links.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-skip-links.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-skip-links/test/mg-skip-links.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CACrB,WAAW,CAAC;EACV,UAAU,EAAE,CAAC,WAAW,CAAC;EACzB,QAAQ,EAAE,GAAG,EAAE,CAAC,qCAAmB,IAAI,EAAkB;CAC1D,CAAC,CAAC;AAEL,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;EAC7B,IAAI,CAAC,cAAc,EAAE,KAAK,IAAI,EAAE;IAC9B,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAAC;MAC7B,KAAK,EAAE;QACL,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE;QACtC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE;QAChC,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE;QACpC,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE;OACrC;KACF,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACjC,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,IAAI,CAAC;IACR,EAAE;IACF,EAAE,KAAK,EAAE,EAAE,EAAE;IACb,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE;IACvC,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE;IAC/C,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE;IAC1C,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,EAAE;GAC1C,CAAC,CAAC,+CAA+C,EAAE,KAAK,EAAC,IAAI,EAAC,EAAE;IAC/D,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,IAAI;MACF,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;KACrB;IAAC,OAAO,GAAG,EAAE;MACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,yIAAyI,CAAC,CAAC;KACxK;EACH,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;IACxD,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC;MACzB,KAAK,EAAE;QACL,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE;QACtC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE;QAChC,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE;QACpC,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE;OACrC;KACF,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IAEvE,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IAC5D,MAAM,MAAM,GAAG,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzD,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3C,MAAM,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAEjE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,aAAa,CAAC,CAAC,oBAAoB,CAAC,UAAU,CAAC,CAAC;IACvD,MAAM,CAAC,OAAO,CAAC,CAAC,gBAAgB,EAAE,CAAC;EACrC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgSkipLinks } from '../mg-skip-links';\n\nconst getPage = args =>\n  newSpecPage({\n    components: [MgSkipLinks],\n    template: () => <mg-skip-links {...args}></mg-skip-links>,\n  });\n\ndescribe('mg-skip-links', () => {\n  test('with args %s', async () => {\n    const { root } = await getPage({\n      links: [\n        { href: '#content', label: 'Content' },\n        { href: '#menu', label: 'Menu' },\n        { href: '#search', label: 'Search' },\n        { href: '#footer', label: 'Footer' },\n      ],\n    });\n    expect(root).toMatchSnapshot();\n  });\n\n  test.each([\n    {},\n    { links: [] },\n    { links: [{ blu: 'blu', bli: 'bli' }] },\n    { links: [{ href: 'nohash', Label: 'label' }] },\n    { links: [{ href: '#hash', Label: ' ' }] },\n    { links: [{ href: '#hash', Label: '' }] },\n  ])('Should throw error with wrong link params: %s', async args => {\n    expect.assertions(1);\n    try {\n      await getPage(args);\n    } catch (err) {\n      expect(err.message).toMatch('<mg-skip-links> prop \"links\": Cannot be empty and each link must contains an href starting with a \"#\" and a non empty label attributes.');\n    }\n  });\n\n  test('should emit event when link is clicked', async () => {\n    const page = await getPage({\n      links: [\n        { href: '#content', label: 'Content' },\n        { href: '#menu', label: 'Menu' },\n        { href: '#search', label: 'Search' },\n        { href: '#footer', label: 'Footer' },\n      ],\n    });\n\n    const spyGoToAnchor = jest.spyOn(page.rootInstance.goToAnchor, 'emit');\n\n    const mgSkiplinks = page.doc.querySelector('mg-skip-links');\n    const anchor = mgSkiplinks.shadowRoot.querySelector('a');\n    const spyBlur = jest.spyOn(anchor, 'blur');\n    anchor.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n\n    await page.waitForChanges();\n\n    expect(spyGoToAnchor).toHaveBeenCalledWith('#content');\n    expect(spyBlur).toHaveBeenCalled();\n  });\n});\n"]}

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

@@ -12,3 +12,4 @@ export var Status;
  * List of all possibles sizes
  */
 export const sizes = ['regular', 'large'];
+//# sourceMappingURL=mg-tabs.conf.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-tabs.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-tabs/mg-tabs.conf.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,CAAN,IAAY,MAKX;AALD,WAAY,MAAM;EAChB,6BAAmB,CAAA;EACnB,2BAAiB,CAAA;EACjB,+BAAqB,CAAA;EACrB,2BAAiB,CAAA;AACnB,CAAC,EALW,MAAM,KAAN,MAAM,QAKjB;AAaD;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,OAAO,CAAU,CAAC","sourcesContent":["import { MgBadge } from '../../atoms/mg-badge/mg-badge';\nimport { MgIcon } from '../../atoms/mg-icon/mg-icon';\n\n/**\n * Available tabs items status\n */\nexport enum Status {\n  VISIBLE = 'visible',\n  HIDDEN = 'hidden',\n  DISABLED = 'disabled',\n  ACTIVE = 'active',\n}\n\n/**\n * type TabItem\n * use to match tabs items\n */\nexport type TabItem = {\n  label: string;\n  icon?: MgIcon['icon'];\n  badge?: Pick<MgBadge, 'value' | 'variant' | 'label'> & { role: 'notification' | 'information' };\n  status: Status;\n};\n\n/**\n * List of all possibles sizes\n */\nexport const sizes = ['regular', 'large'] as const;\n\n/**\n * Variant type from variants\n */\nexport type SizeType = (typeof sizes)[number];\n"]}

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

@@ -1,6 +1,6 @@
-import { h } from '@stencil/core';
-import { createID, ClassList, allItemsAreString } from '../../../utils/components.utils';
-import { sizes, Status } from './mg-tabs.conf';
+import { h } from "@stencil/core";
+import { createID, ClassList, allItemsAreString } from "../../../utils/components.utils";
+import { sizes, Status } from "./mg-tabs.conf";
 /**
  * type TabItem validation function
  * @param tab - tab item
@@ -269,7 +269,8 @@ export class MgTabs {
           "references": {
             "SizeType": {
               "location": "import",
-              "path": "./mg-tabs.conf"
+              "path": "./mg-tabs.conf",
+              "id": "src/components/molecules/mg-tabs/mg-tabs.conf.ts::SizeType"
             }
           }
         },
@@ -292,7 +293,8 @@ export class MgTabs {
           "references": {
             "TabItem": {
               "location": "import",
-              "path": "./mg-tabs.conf"
+              "path": "./mg-tabs.conf",
+              "id": "src/components/molecules/mg-tabs/mg-tabs.conf.ts::TabItem"
             }
           }
         },
@@ -363,3 +365,4 @@ export class MgTabs {
       }];
   }
 }
+//# sourceMappingURL=mg-tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-tabs.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-tabs/mg-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, State, Element, Watch } from '@stencil/core';\nimport { createID, ClassList, allItemsAreString } from '../../../utils/components.utils';\nimport { TabItem, sizes, Status, SizeType } from './mg-tabs.conf';\n\n/**\n * type TabItem validation function\n * @param tab - tab item\n * @returns tab item type is valid\n */\nconst isTabItem = (tab: TabItem): boolean => typeof tab === 'object' && typeof tab.label === 'string';\n\n@Component({\n  tag: 'mg-tabs',\n  styleUrl: 'mg-tabs.scss',\n  shadow: true,\n})\nexport class MgTabs {\n  /************\n   * Internal *\n   ************/\n\n  // classes\n  private readonly tabPanel = 'panel';\n  private readonly buttonTabBaseClass = 'mg-tabs__navigation-button';\n\n  // variables\n  private tabFocus: number;\n  private startIndex = 1;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgTabsElement;\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-tabs');\n\n  /**\n   * Tabs label. Include short tabs description.\n   * Required for accessibility\n   */\n  @Prop() label!: string;\n  @Watch('label')\n  validateLabel(newValue: MgTabs['label']): void {\n    if (typeof newValue !== 'string' || newValue.trim() === '') {\n      throw new Error('<mg-tabs> prop \"label\" is required.');\n    }\n  }\n\n  /**\n   * Define tabs size\n   */\n  @Prop() size: SizeType = 'regular';\n  @Watch('size')\n  validateSize(newValue: MgTabs['size']): void {\n    if (!sizes.includes(newValue)) {\n      throw new Error(`<mg-tabs> prop \"size\" must be one of: ${sizes.join(', ')}`);\n    }\n    this.classCollection.add(`mg-tabs--size-${this.size}`);\n  }\n\n  /**\n   * Tabs items\n   */\n  @Prop() items!: string[] | TabItem[];\n  @Watch('items')\n  validateItems(newValue: MgTabs['items']): void {\n    // String array\n    if (allItemsAreString(newValue as string[])) {\n      this.tabs = (newValue as string[]).map((item, index) => ({ label: item, status: index === 0 ? Status.ACTIVE : Status.VISIBLE }));\n    }\n    // Object array\n    else if (newValue && newValue.length > 0 && (newValue as TabItem[]).every(item => isTabItem(item))) {\n      this.tabs = newValue as TabItem[];\n      // init active tabs if not set. Default: index 0.\n      if (this.tabs.find(tab => this.tabHasStatus(tab, Status.ACTIVE)) === undefined) this.tabs[0].status = Status.ACTIVE;\n    } else {\n      throw new Error('<mg-tabs> prop \"items\" is required and all items must be the same type: TabItem.');\n    }\n  }\n\n  /**\n   * Active tab number\n   */\n  @Prop({ reflect: true, mutable: true }) activeTab: number;\n  @Watch('activeTab')\n  validateActiveTab(newValue: MgTabs['activeTab']): void {\n    if (typeof newValue === 'number' && newValue >= 1 && newValue <= this.tabs.length) {\n      this.tabs.forEach((tab, index) => {\n        const isNewActiveTab = index === newValue - this.startIndex;\n        // reset active tabs\n        if (this.tabHasStatus(tab, Status.ACTIVE) && !isNewActiveTab) tab.status = Status.VISIBLE;\n        // set active tab from given tab key\n        else if ((tab.status === undefined || this.tabHasStatus(tab, Status.VISIBLE)) && isNewActiveTab) tab.status = Status.ACTIVE;\n      });\n      // emit change active tab key event\n      if (this.tabs.find(tab => this.tabHasStatus(tab, Status.ACTIVE)) !== undefined) {\n        this.activeTabChange.emit(newValue);\n      }\n    } else if (newValue !== undefined) {\n      throw new Error('<mg-tabs> prop \"activeTab\" must be between 1 and tabs length.');\n    }\n  }\n\n  /**\n   * Component tabs\n   */\n  @State() tabs: TabItem[] = [];\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-tabs']);\n\n  /**\n   * Emited event when active tab change\n   */\n  @Event({ eventName: 'active-tab-change' }) activeTabChange: EventEmitter<number>;\n\n  /**\n   * Method to know if given tab has the given status\n   * @param tab - item tab key to set to ACTIVE status\n   * @param status - status to valide\n   * @returns status comparaison\n   */\n  private tabHasStatus = (tab: TabItem, status: Status): boolean => tab.status === status;\n\n  /**\n   * Method to get element id from index\n   * @param element - to get id\n   * @param index - to generate id\n   * @returns generated element id\n   */\n  private getElementId = (element: string, index: number): string => `${element}-${this.getTabItemIndex(index)}`;\n\n  /**\n   * Method to get tab item index\n   * @param index - to get\n   * @returns index\n   */\n  private getTabItemIndex = (index: number): number => index + this.startIndex;\n\n  /**\n   * Method to get the active-tab value\n   * @returns of the active-tab\n   */\n  private getActiveTab = (): number =>\n    this.activeTab || this.getTabItemIndex(this.tabs.map((tab, index) => ({ ...tab, index })).find(tab => this.tabHasStatus(tab, Status.ACTIVE)).index);\n\n  /**\n   * Handle click events on tabs\n   * @param event - mouse event\n   */\n  private handleClick = (event: MouseEvent & { currentTarget: HTMLElement }): void => {\n    const tabId = event.currentTarget.dataset.index;\n    const tab = this.tabs[Number(tabId) - this.startIndex];\n    if (this.tabHasStatus(tab, Status.HIDDEN) || this.tabHasStatus(tab, Status.DISABLED)) {\n      event.preventDefault();\n    } else {\n      this.activeTab = Number(tabId);\n      this.tabFocus = undefined;\n    }\n  };\n\n  /**\n   * get navigation button class from given status\n   * @param status - button tab status\n   * @returns button class/selector variant\n   */\n  private getNavigationButtonClass = (status: Status): string => `${this.buttonTabBaseClass}--${status}`;\n\n  /**\n   * Handle keyboard event on tabs\n   * @param event - mouse event\n   */\n  private handleKeydown = (event: KeyboardEvent & { target: HTMLElement }): void => {\n    const parent = event.target.parentElement;\n    if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {\n      this.tabFocus = Number(event.target.dataset.index);\n      parent.querySelector(`[data-index=\"${this.tabFocus}\"]`).setAttribute('tabindex', '-1');\n\n      // Move right\n      if (event.key === 'ArrowRight') {\n        this.tabFocus++;\n        // If we're at the end, go to the start\n        if (this.tabFocus > this.tabs.length) this.tabFocus = this.startIndex;\n        // Move left\n      } else if (event.key === 'ArrowLeft') {\n        this.tabFocus--;\n        // If we're at the start, move to the end\n        if (this.tabFocus < this.startIndex) this.tabFocus = this.tabs.length;\n      }\n\n      const parentButtonElement: HTMLButtonElement = parent.querySelector(`[data-index=\"${this.tabFocus}\"]`);\n      // if focus item is ['hidden'] we recursively repeat action\n      if (this.tabHasStatus(this.tabs[this.tabFocus - 1], Status.HIDDEN)) {\n        parentButtonElement.dispatchEvent(new KeyboardEvent('keydown', { key: event.key, bubbles: true }));\n        // else run focus methods on tabFocus element\n      } else {\n        parentButtonElement.setAttribute('tabindex', '0');\n        parentButtonElement.focus();\n      }\n    } else if (event.key === 'Tab') {\n      this.resetFocus();\n    }\n  };\n\n  /**\n   * Method to reset focus behavior\n   */\n  private resetFocus = (): void => {\n    // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process\n    setTimeout(() => {\n      this.tabFocus = undefined;\n      Array.from(this.element.shadowRoot.querySelectorAll('[data-index]')).forEach((tab, index) => {\n        tab.setAttribute('tabindex', this.getActiveTab() - this.startIndex !== index ? '-1' : '0');\n      });\n    }, 0);\n  };\n\n  /**\n   * Validate slots setting\n   */\n  private validateSlots = (): void => {\n    const slots = Array.from(this.element.children).filter(slot => slot.getAttribute('slot')?.includes('tab_content-'));\n    if (slots.length !== this.tabs.length) throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Check tabs format\n    this.validateLabel(this.label);\n    this.validateItems(this.items);\n    this.validateActiveTab(this.activeTab);\n    this.validateSize(this.size);\n    this.validateSlots();\n  }\n\n  /**\n   * add listners\n   */\n  componentDidLoad(): void {\n    document.addEventListener(\n      'click',\n      (event: MouseEvent & { target: HTMLElement }) => {\n        if (event.target.closest('mg-tabs') !== this.element) this.resetFocus();\n      },\n      false,\n    );\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <div class={this.classCollection.join()}>\n        <header role=\"tablist\" aria-label={this.label} class=\"mg-tabs__header\">\n          {this.tabs.map((tab, index) => (\n            <button\n              key={tab.label}\n              role=\"tab\"\n              id={this.getElementId(this.identifier, index)}\n              class={{\n                [`${this.buttonTabBaseClass}`]: true,\n                [`${this.buttonTabBaseClass}--horizontal`]: true,\n                [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),\n                [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),\n                [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),\n              }}\n              tabindex={this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1}\n              aria-selected={this.tabHasStatus(tab, Status.ACTIVE).toString()}\n              aria-controls={this.getElementId(this.tabPanel, index)}\n              aria-disabled={this.tabHasStatus(tab, Status.DISABLED)}\n              onClick={this.handleClick}\n              onKeyDown={this.handleKeydown}\n              data-index={this.getTabItemIndex(index)}\n            >\n              {tab.icon !== undefined && <mg-icon icon={tab.icon}></mg-icon>}\n              {tab.label}\n              {tab.badge !== undefined && <mg-badge variant=\"text-color\" value={tab.badge.value} label={tab.badge.label} outline={tab.badge.role === 'information'}></mg-badge>}\n            </button>\n          ))}\n        </header>\n        {this.tabs.map((tab, index) => (\n          <article\n            key={tab.label}\n            role=\"tabpanel\"\n            id={this.getElementId(this.tabPanel, index)}\n            hidden={!this.tabHasStatus(tab, Status.ACTIVE)}\n            aria-labelledby={this.getElementId(this.identifier, index)}\n            tabindex={this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1}\n            class=\"mg-tabs__content-container\"\n          >\n            <slot name={this.getElementId('tab_content', index)}></slot>\n          </article>\n        ))}\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,76 @@
+import { setPageContent, expect, describe, describeEach, testEach, test } from "../../../../utils/playwright.e2e.test.utils";
+import { createID } from "../../../../utils/components.utils";
+import { sizes } from "../mg-tabs.conf";
+import { renderAttributes, renderProperties } from "../../../../utils/e2e.test.utils";
+const defaultArgs = {
+  label: 'label',
+};
+const createSlot = (items) => {
+  const defaultSlotContents = [
+    "Le héros peut être en chacun, même en celui qui fait une chose aussi simple et rassurante que mettre un manteau sur les épaules d'un garçon et ainsi lui faire comprendre que le monde ne s'est pas écroulé.",
+    "La seule façon raisonnable de vivre en ce bas monde, c'est en dehors des règles.",
+    'Bane have an hidden content',
+  ];
+  return items.map((_, i) => `<div slot="tab_content-${i + 1}">${i + 1 <= defaultSlotContents.length ? defaultSlotContents[i] : defaultSlotContents[0]}</div>`).join('');
+};
+var Key;
+(function (Key) {
+  Key["NEXT"] = "ArrowRight";
+  Key["PREV"] = "ArrowLeft";
+  Key["TAB"] = "Tab";
+  Key["ENTER"] = "Enter";
+})(Key || (Key = {}));
+const createHTML = args => {
+  const id = createID();
+  return `<mg-tabs id="${id}" ${renderAttributes(Object.assign({}, args))}">${createSlot(args.items)}</mg-tabs><script>${renderProperties(args, `#${id}`)}</script>`;
+};
+describe('mg-tabs', () => {
+  describeEach(sizes)('size %s', async (size) => {
+    testEach([
+      { items: ['Batman', 'Joker', 'Bane'] },
+      {
+        items: [
+          { label: 'Batman', icon: 'check' },
+          { label: 'Joker', icon: 'cross', status: 'disabled' },
+          { label: 'Bane', icon: 'cross', status: 'hidden' },
+        ],
+      },
+      {
+        items: [
+          { label: 'Batman', badge: { label: 'count', value: 1 } },
+          { label: 'Joker', badge: { label: 'count', value: 1 }, status: 'disabled' },
+          { label: 'Bane', icon: 'cross', status: 'hidden' },
+        ],
+      },
+      {
+        items: [
+          { label: 'Batman', icon: 'check', badge: { label: 'count', value: 99 } },
+          { label: 'Joker', icon: 'cross', badge: { label: 'count', value: 99 }, status: 'disabled' },
+          { label: 'Bane', icon: 'cross', status: 'hidden' },
+        ],
+      },
+      {
+        items: [
+          { label: 'Batman', icon: 'check', badge: { label: 'count', value: 99, role: 'notification' } },
+          { label: 'Joker', icon: 'cross', badge: { label: 'count', value: 99, role: 'information' }, status: 'disabled' },
+          { label: 'Bane', icon: 'cross', status: 'hidden' },
+        ],
+      },
+    ])(`render %s`, async (page, args) => {
+      await setPageContent(page, createHTML(Object.assign(Object.assign(Object.assign({}, defaultArgs), args), { size })));
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+  });
+  describe('navigation', () => {
+    test('should go to next tab on click event', async ({ page }) => {
+      await setPageContent(page, createHTML(Object.assign(Object.assign({}, defaultArgs), { items: ['Batman', 'Joker', 'Bane'] })));
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      await page.keyboard.down('Tab');
+      for (const key of [Key.NEXT, Key.NEXT, Key.PREV, Key.ENTER, Key.TAB]) {
+        await page.keyboard.down(key);
+        await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      }
+    });
+  });
+});
+//# sourceMappingURL=mg-tabs.e2e.playwright.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-tabs.e2e.playwright.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-tabs/test/mg-tabs.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setPageContent, expect, describe, describeEach, testEach, PageType, test } from '../../../../utils/playwright.e2e.test.utils';\nimport { createID } from '../../../../utils/components.utils';\nimport { sizes } from '../mg-tabs.conf';\nimport { MgTabs } from '../mg-tabs';\nimport { renderAttributes, renderProperties } from '../../../../utils/e2e.test.utils';\n\nconst defaultArgs = {\n  label: 'label',\n};\n\nconst createSlot = (items: unknown[]) => {\n  const defaultSlotContents = [\n    \"Le héros peut être en chacun, même en celui qui fait une chose aussi simple et rassurante que mettre un manteau sur les épaules d'un garçon et ainsi lui faire comprendre que le monde ne s'est pas écroulé.\",\n    \"La seule façon raisonnable de vivre en ce bas monde, c'est en dehors des règles.\",\n    'Bane have an hidden content',\n  ];\n  return items.map((_, i) => `<div slot=\"tab_content-${i + 1}\">${i + 1 <= defaultSlotContents.length ? defaultSlotContents[i] : defaultSlotContents[0]}</div>`).join('');\n};\n\nenum Key {\n  NEXT = 'ArrowRight',\n  PREV = 'ArrowLeft',\n  TAB = 'Tab',\n  ENTER = 'Enter',\n}\n\nconst createHTML = args => {\n  const id = createID();\n  return `<mg-tabs id=\"${id}\" ${renderAttributes({ ...args })}\">${createSlot(args.items)}</mg-tabs><script>${renderProperties(args, `#${id}`)}</script>`;\n};\n\ndescribe('mg-tabs', () => {\n  describeEach(sizes)('size %s', async size => {\n    testEach([\n      { items: ['Batman', 'Joker', 'Bane'] },\n      {\n        items: [\n          { label: 'Batman', icon: 'check' },\n          { label: 'Joker', icon: 'cross', status: 'disabled' },\n          { label: 'Bane', icon: 'cross', status: 'hidden' },\n        ],\n      },\n      {\n        items: [\n          { label: 'Batman', badge: { label: 'count', value: 1 } },\n          { label: 'Joker', badge: { label: 'count', value: 1 }, status: 'disabled' },\n          { label: 'Bane', icon: 'cross', status: 'hidden' },\n        ],\n      },\n      {\n        items: [\n          { label: 'Batman', icon: 'check', badge: { label: 'count', value: 99 } },\n          { label: 'Joker', icon: 'cross', badge: { label: 'count', value: 99 }, status: 'disabled' },\n          { label: 'Bane', icon: 'cross', status: 'hidden' },\n        ],\n      },\n      {\n        items: [\n          { label: 'Batman', icon: 'check', badge: { label: 'count', value: 99, role: 'notification' } },\n          { label: 'Joker', icon: 'cross', badge: { label: 'count', value: 99, role: 'information' }, status: 'disabled' },\n          { label: 'Bane', icon: 'cross', status: 'hidden' },\n        ],\n      },\n    ])(`render %s`, async (page: PageType, args: Partial<MgTabs>) => {\n      await setPageContent(\n        page,\n        createHTML({\n          ...defaultArgs,\n          ...args,\n          size,\n        }),\n      );\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n  });\n\n  describe('navigation', () => {\n    test('should go to next tab on click event', async ({ page }) => {\n      await setPageContent(\n        page,\n        createHTML({\n          ...defaultArgs,\n          items: ['Batman', 'Joker', 'Bane'],\n        }),\n      );\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      await page.keyboard.down('Tab');\n\n      for (const key of [Key.NEXT, Key.NEXT, Key.PREV, Key.ENTER, Key.TAB]) {\n        await page.keyboard.down(key);\n        await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n      }\n    });\n  });\n});\n"]}