@mgdis/mg-components 5.16.0 → 5.17.0

package/dist/collection/utils/behaviors.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"behaviors.utils.js","sourceRoot":"","sources":["../../src/utils/behaviors.utils.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * MgItemMore type guard\n * @param element - element to control type\n * @returns truthy if element is mg-item-more\n */\nconst isMgItemMore = (element: HTMLElement): element is HTMLMgItemMoreElement => element.nodeName === 'MG-ITEM-MORE';\n\nexport enum OverflowBehaviorElements {\n  BASE_INDEX = 'data-overflow-base-index',\n  PROXY_INDEX = 'data-overflow-proxy-index',\n}\n\nexport class OverflowBehavior {\n  // variables\n  private _resizeObserver: ResizeObserver;\n  private _moreElement: HTMLElement;\n  private _baseChildren: Element[];\n  private _proxyChildren: Element[];\n\n  constructor(private element: Element, private render: () => HTMLElement) {\n    if (this._resizeObserver === undefined) {\n      // add resize observer\n      this._resizeObserver = new ResizeObserver(entries => {\n        entries.forEach(entry => {\n          this.run(entry.contentRect.width);\n        });\n      });\n      this._resizeObserver.observe(this.element);\n    }\n    this.run();\n  }\n\n  /**********\n   * Public *\n   **********/\n\n  /**\n   * Disconnect ResizeObserver\n   */\n  public disconnect = (): void => {\n    this._resizeObserver.disconnect();\n  };\n\n  /************\n   * Internal *\n   ************/\n\n  /**\n   * run overflow behavior\n   * @param width - width of the container. Optional.\n   */\n  private run = (width?: number): void => {\n    if (this._moreElement === undefined) {\n      // set moreElement\n      this._moreElement = this.render();\n\n      // set children\n      this._baseChildren = this.getInteractiveItems(this.element);\n      if (isMgItemMore(this._moreElement)) {\n        this._proxyChildren = this.getInteractiveItems(this._moreElement.shadowRoot.querySelector('mg-menu'));\n      }\n\n      // update children\n      this._baseChildren.forEach((child, index) => {\n        child.setAttribute(OverflowBehaviorElements.BASE_INDEX, `${index}`);\n        // set moreElement children\n        this._proxyChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);\n      });\n    }\n\n    if (width !== undefined) this.updateDisplayedItems(width);\n  };\n\n  /**\n   * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']\n   * @param element - element to parse\n   * @returns children\n   */\n  private getInteractiveItems = (element: Element) =>\n    (element.children?.length > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName));\n\n  /**\n   * Update displayed items in container from a given available space\n   * @param availableWidth - available width in container to display child items\n   */\n  private updateDisplayedItems = (availableWidth: number): void => {\n    this.restoreItems();\n    const acc = { accWidth: 0, previousItem: null };\n    [...this._baseChildren, this._moreElement].forEach((child: HTMLMgMenuItemElement | HTMLMgItemMoreElement) => {\n      acc.accWidth += child.offsetWidth;\n      const isPreviousItemHidden = acc.previousItem !== null && acc.previousItem.getAttribute('hidden') !== null;\n      // if previous item is hidden AND is NOT more element we hidde current\n      // OR if item has an overflow we hidde current\n      // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item\n      // ELSE current is a display item\n      this.toggleItem(\n        child,\n        (isPreviousItemHidden && !this.isMoreElement(child)) || this.isOverflowElement(acc.accWidth, child, availableWidth) || (this.isMoreElement(child) && !isPreviousItemHidden),\n      );\n\n      // update previous item with current item\n      acc.previousItem = child;\n    });\n  };\n\n  /**\n   * Utility method to know if item overflow partialy or totaly in the container\n   * @param cumulateWidth - previous sibling elements cumulate width + item width\n   * @param item - item HTML element\n   * @param availableWidth - container available width\n   * @returns truthy if element is overflow\n   */\n  private isOverflowElement = (cumulateWidth: number, item: HTMLElement, availableWidth: number): boolean => {\n    if (item.previousElementSibling === null || this.isMoreElement(item)) return false;\n    else if (!this.isMoreElement(item.nextElementSibling)) return cumulateWidth + this._moreElement.offsetWidth > availableWidth;\n    else return cumulateWidth > availableWidth;\n  };\n\n  /**\n   * Utility method to know if a given element is the 'MORE' element\n   * @param element - element to match with 'MORE' element\n   * @returns truthy if element is the 'MORE' element\n   */\n  private isMoreElement = (element: Element): boolean => element.nodeName === 'MG-ITEM-MORE';\n\n  /**\n   * Toggle display item element\n   * @param item - item to control\n   * @param isHidden - is item hidden\n   */\n  private toggleItem = (item: HTMLElement, isHidden: boolean): void => {\n    const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));\n    if (this.isMoreElement(item)) this.toggleElement(this._moreElement, isHidden);\n    else if (mgActionMenuindex >= 0) {\n      this.toggleElement(item, isHidden);\n      this.toggleElement(this._proxyChildren[mgActionMenuindex], !isHidden);\n    }\n  };\n\n  /**\n   * Toggle element's hidde attribute\n   * @param element - element to toggle\n   * @param isHidden - element is hidden\n   */\n  private toggleElement = (element: Element, isHidden: boolean): void => {\n    if (isHidden) element.setAttribute('hidden', '');\n    else element.removeAttribute('hidden');\n  };\n\n  /**\n   * Remove hidden attributes on all items\n   */\n  private restoreItems = (): void => {\n    [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));\n  };\n}\n"]}

package/dist/collection/utils/behaviors.utils.spec.js

@@ -0,0 +1,57 @@
+import { h } from "@stencil/core/internal";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgItemMore } from "../components/molecules/mg-item-more/mg-item-more";
+import { MgMenuItem } from "../components/molecules/menu/mg-menu-item/mg-menu-item";
+import { MgMenu } from "../components/molecules/menu/mg-menu/mg-menu";
+import { OverflowBehavior } from "./behaviors.utils";
+import { setupMutationObserverMock, setupResizeObserverMock } from "./unit.test.utils";
+const getPage = render => newSpecPage({
+  components: [MgMenu, MgMenuItem, MgItemMore],
+  template: () => render,
+});
+describe('behavior.utils', () => {
+  describe('OverflowBehavior', () => {
+    let fireRo;
+    beforeEach(() => {
+      jest.useFakeTimers();
+      setupResizeObserverMock({
+        observe: function () {
+          fireRo = this.cb;
+        },
+        disconnect: () => null,
+      });
+      setupMutationObserverMock({
+        disconnect: () => null,
+        observe: () => null,
+        takeRecords: () => null,
+      });
+    });
+    afterEach(() => jest.runOnlyPendingTimers());
+    describe('render menu', () => {
+      test.each([50, 80, 100, 250])('should manage resize with observer, case %s', async (width) => {
+        const args = { label: 'batman' };
+        const page = await getPage(h("mg-menu", Object.assign({}, args), h("mg-menu-item", null, h("span", { slot: "label" }, "Batman")), h("mg-menu-item", null, h("span", { slot: "label" }, "Joker")), h("mg-menu-item", null, h("span", { slot: "label" }, "Bane"))));
+        jest.runAllTimers();
+        await page.waitForChanges();
+        const items = Array.from(page.doc.querySelectorAll('mg-menu-item'));
+        items.forEach(item => {
+          Object.defineProperty(item, 'offsetWidth', {
+            get: jest.fn(() => 80),
+          });
+        });
+        Object.defineProperty(page.doc.querySelector('mg-item-more'), 'offsetWidth', {
+          get: jest.fn(() => 50),
+        });
+        fireRo([{ contentRect: { width } }]);
+        expect(page.root).toMatchSnapshot();
+      });
+    });
+    test('should fire disconnect callback', () => {
+      const behavior = new OverflowBehavior(h("div", null), () => h("span", null));
+      const spy = jest.spyOn(behavior._resizeObserver, 'disconnect');
+      behavior.disconnect();
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+});
+//# sourceMappingURL=behaviors.utils.spec.js.map

package/dist/collection/utils/behaviors.utils.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"behaviors.utils.spec.js","sourceRoot":"","sources":["../../src/utils/behaviors.utils.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,wBAAwB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,mDAAmD,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,MAAM,wDAAwD,CAAC;AACpF,OAAO,EAAE,MAAM,EAAE,MAAM,8CAA8C,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,yBAAyB,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAEvF,MAAM,OAAO,GAAG,MAAM,CAAC,EAAE,CACvB,WAAW,CAAC;EACV,UAAU,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,UAAU,CAAC;EAC5C,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM;CACvB,CAAC,CAAC;AAEL,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,IAAI,MAAM,CAAC;IACX,UAAU,CAAC,GAAG,EAAE;MACd,IAAI,CAAC,aAAa,EAAE,CAAC;MACrB,uBAAuB,CAAC;QACtB,OAAO,EAAE;UACP,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;QACnB,CAAC;QACD,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI;OACvB,CAAC,CAAC;MACH,yBAAyB,CAAC;QACxB,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI;QACtB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI;QACnB,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI;OACxB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IACH,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;IAE7C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;MAC3B,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,6CAA6C,EAAE,KAAK,EAAC,KAAK,EAAC,EAAE;QACzF,MAAM,IAAI,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;QACjC,MAAM,IAAI,GAAG,MAAM,OAAO,CACxB,+BAAa,IAAI;UACf;YACE,YAAM,IAAI,EAAC,OAAO,aAAc,CACnB;UACf;YACE,YAAM,IAAI,EAAC,OAAO,YAAa,CAClB;UACf;YACE,YAAM,IAAI,EAAC,OAAO,WAAY,CACjB,CACP,CACX,CAAC;QAEF,IAAI,CAAC,YAAY,EAAE,CAAC;QAEpB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC;QACpE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;UACnB,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,aAAa,EAAE;YACzC,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC;WACvB,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,aAAa,EAAE;UAC3E,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC;SACvB,CAAC,CAAC;QAEH,MAAM,CAAC,CAAC,EAAE,WAAW,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;QAErC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;MACtC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,iCAAiC,EAAE,GAAG,EAAE;MAC3C,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,cAAW,EAAE,GAAG,EAAE,CAAC,eAAa,CAAC,CAAC;MACxE,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAE,QAAmD,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;MAC3G,QAAQ,CAAC,UAAU,EAAE,CAAC;MAEtB,MAAM,CAAC,GAAG,CAAC,CAAC,gBAAgB,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core/internal';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgItemMore } from '../components/molecules/mg-item-more/mg-item-more';\nimport { MgMenuItem } from '../components/molecules/menu/mg-menu-item/mg-menu-item';\nimport { MgMenu } from '../components/molecules/menu/mg-menu/mg-menu';\nimport { OverflowBehavior } from './behaviors.utils';\nimport { setupMutationObserverMock, setupResizeObserverMock } from './unit.test.utils';\n\nconst getPage = render =>\n  newSpecPage({\n    components: [MgMenu, MgMenuItem, MgItemMore],\n    template: () => render,\n  });\n\ndescribe('behavior.utils', () => {\n  describe('OverflowBehavior', () => {\n    let fireRo;\n    beforeEach(() => {\n      jest.useFakeTimers();\n      setupResizeObserverMock({\n        observe: function () {\n          fireRo = this.cb;\n        },\n        disconnect: () => null,\n      });\n      setupMutationObserverMock({\n        disconnect: () => null,\n        observe: () => null,\n        takeRecords: () => null,\n      });\n    });\n    afterEach(() => jest.runOnlyPendingTimers());\n\n    describe('render menu', () => {\n      test.each([50, 80, 100, 250])('should manage resize with observer, case %s', async width => {\n        const args = { label: 'batman' };\n        const page = await getPage(\n          <mg-menu {...args}>\n            <mg-menu-item>\n              <span slot=\"label\">Batman</span>\n            </mg-menu-item>\n            <mg-menu-item>\n              <span slot=\"label\">Joker</span>\n            </mg-menu-item>\n            <mg-menu-item>\n              <span slot=\"label\">Bane</span>\n            </mg-menu-item>\n          </mg-menu>,\n        );\n\n        jest.runAllTimers();\n\n        await page.waitForChanges();\n\n        const items = Array.from(page.doc.querySelectorAll('mg-menu-item'));\n        items.forEach(item => {\n          Object.defineProperty(item, 'offsetWidth', {\n            get: jest.fn(() => 80),\n          });\n        });\n\n        Object.defineProperty(page.doc.querySelector('mg-item-more'), 'offsetWidth', {\n          get: jest.fn(() => 50),\n        });\n\n        fireRo([{ contentRect: { width } }]);\n\n        expect(page.root).toMatchSnapshot();\n      });\n    });\n\n    test('should fire disconnect callback', () => {\n      const behavior = new OverflowBehavior(<div></div>, () => <span></span>);\n      const spy = jest.spyOn((behavior as unknown as { _resizeObserver: string })._resizeObserver, 'disconnect');\n      behavior.disconnect();\n\n      expect(spy).toHaveBeenCalled();\n    });\n  });\n});\n"]}

package/dist/collection/utils/components.utils.js

@@ -126,3 +126,4 @@ const getChildWindows = (localWindow, windows = []) => {
   }
   return windows;
 };
+//# sourceMappingURL=components.utils.js.map

package/dist/collection/utils/components.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.utils.js","sourceRoot":"","sources":["../../src/utils/components.utils.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Create random ID\n * @param prefix - add prefix to created ID\n * @param length - ID length\n * @returns ID\n */\nexport const createID = (prefix = '', length = 10): string => {\n  const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';\n  const charsLength = chars.length;\n\n  let ID = '';\n  let now = Date.now();\n  while (length > 0) {\n    now += Math.pow(10, 6); // Add 1 millisecond to the timestamp\n    const index = now % charsLength;\n    ID += chars.charAt(index);\n    length--;\n  }\n  return (prefix !== '' ? `${prefix}-` : '') + ID;\n};\n\n/**\n * Class to manage component classlist\n * Set() are not working when imported in project\n */\nexport class ClassList {\n  /**\n   * Available classes\n   */\n  classes: string[];\n\n  constructor(classlist: string[] = []) {\n    this.classes = classlist;\n  }\n\n  /**\n   * Add class\n   * @param className - class name to add\n   */\n  add = (className: string): void => {\n    if (!this.has(className)) {\n      this.classes.push(className);\n    }\n  };\n\n  /**\n   * Delete class\n   * @param className - class name to delete\n   */\n  delete = (className: string): void => {\n    const index = this.classes.indexOf(className);\n    if (index > -1) {\n      this.classes.splice(index, 1);\n    }\n  };\n\n  /**\n   * Check if class exist in list\n   * @param className - class name to check\n   * @returns class name is in the list\n   */\n  has = (className: string): boolean => {\n    return this.classes.includes(className);\n  };\n\n  /**\n   * Join classes seperated by spaces\n   * @returns joined values\n   */\n  join = (): string => {\n    return this.classes.join(' ');\n  };\n}\n\n/**\n * Check if all items are string\n * @param items - items to check\n * @returns all items are string\n */\nexport const allItemsAreString = (items: unknown): items is string[] => Array.isArray(items) && items.every(item => typeof item === 'string');\n\n/**\n * Check if element is a heading\n * @param element - slotted element\n * @param tagNames - allowed tag names list\n * @returns element is a heading\n */\nexport const isTagName = (element: Element, tagNames: string[]): boolean => {\n  return tagNames.includes(element?.tagName.toLowerCase());\n};\n\n/**\n * Focusable elements query selector\n */\nexport const focusableElements = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"]), [identifier]';\n\n/**\n * Get windows\n * @param localWindow - the window we are lookink for other windows\n * @returns The list of windows found\n */\nexport const getWindows = (localWindow: Window): Window[] => {\n  const parentWindows = getParentWindows(localWindow);\n  const childWindows = getChildWindows(localWindow);\n  return [localWindow, ...parentWindows, ...childWindows];\n};\n\n/**\n * Get parent windows\n * @param localWindow - the window we are lookink for parents\n * @param windows - The list of allready found windows\n * @returns The list of windows found\n */\nexport const getParentWindows = (localWindow: Window, windows: Window[] = []): Window[] => {\n  // Check if is in iframe\n  if (localWindow.self !== localWindow.top) {\n    // Check if we have permission to access parent\n    try {\n      const parentWindow: Window = localWindow.parent;\n      windows.push(parentWindow);\n      return getParentWindows(parentWindow, windows);\n    } catch (err) {\n      console.error('Different hosts between iframes:', err);\n      return windows;\n    }\n  }\n  return windows;\n};\n\n/**\n * Get child windows\n * @param localWindow - the window we are lookink for children\n * @param windows - The list of allready found windows\n * @returns The list of windows found\n */\nconst getChildWindows = (localWindow: Window, windows: Window[] = []): Window[] => {\n  if (localWindow.frames.length > 0) {\n    for (const childWindow of Array.from(localWindow.frames)) {\n      windows.push(childWindow);\n      getChildWindows(childWindow, windows);\n    }\n  }\n  return windows;\n};\n"]}

package/dist/collection/utils/components.utils.spec.js

@@ -0,0 +1,120 @@
+import { createID, ClassList, allItemsAreString, isTagName, getWindows } from "./components.utils";
+import { mockConsoleError } from "./unit.test.utils";
+mockConsoleError();
+describe('components.utils', () => {
+  describe('createID', () => {
+    test.each([undefined, '', 'blu'])('Should generate a prefixed ID if defined : %s', prefix => {
+      const id = createID(prefix);
+      let regexp = /^[a-z0-9]{10}$/;
+      if (prefix !== undefined && prefix !== '') {
+        regexp = new RegExp(`^${prefix}-[a-z0-9]{10}$`);
+      }
+      expect(id).toMatch(regexp);
+    });
+  });
+  describe('ClassList', () => {
+    test('Should add classes to list', () => {
+      const classCollection = new ClassList();
+      expect(classCollection.classes).toEqual([]);
+      classCollection.add('blu');
+      expect(classCollection.classes).toEqual(['blu']);
+      classCollection.add('bli');
+      expect(classCollection.classes).toEqual(['blu', 'bli']);
+      // Should not add classes if already in list
+      classCollection.add('blu');
+      expect(classCollection.classes).toEqual(['blu', 'bli']);
+    });
+    test('Should delete classes from list', () => {
+      const classCollection = new ClassList(['blu', 'bli']);
+      classCollection.delete('blu');
+      expect(classCollection.classes).toEqual(['bli']);
+      // List doesn't change if class name doesn't existe in list
+      classCollection.delete('bla');
+      expect(classCollection.classes).toEqual(['bli']);
+    });
+    test('Should check if class already in list', () => {
+      const classCollection = new ClassList(['blu']);
+      expect(classCollection.has('blu')).toEqual(true);
+      expect(classCollection.has('bli')).toEqual(false);
+    });
+    test('Should return seperated space classes list', () => {
+      const classCollection = new ClassList(['blu', 'bli']);
+      expect(classCollection.join()).toEqual('blu bli');
+    });
+  });
+  describe('allItemsAreString', () => {
+    test.each([
+      { items: ['blu', 'bli', 'blo', 'bla'], expected: true },
+      { items: ['blu', 'bli', 'blo', { value: 'bla' }], expected: false },
+    ])('Should test if all otems are string: %s', ({ items, expected }) => {
+      expect(allItemsAreString(items)).toEqual(expected);
+    });
+  });
+  describe('isTagName', () => {
+    test.each([
+      { querySelector: 'h1', expected: true },
+      { querySelector: 'span', expected: false },
+      { querySelector: 'blu', expected: false },
+    ])('Should test if all otems are string: %s', ({ querySelector, expected }) => {
+      const div = document.createElement('div');
+      div.innerHTML = '<h1></h1><span></span>';
+      const elm = div.querySelector(querySelector);
+      expect(isTagName(elm, ['h1'])).toEqual(expected);
+    });
+  });
+  describe('getWindows', () => {
+    const mockWindowFramesLength = jest.fn();
+    const mockWindowIndexZero = jest.fn();
+    Object.defineProperty(window, 'frames', {
+      value: {
+        get length() {
+          return mockWindowFramesLength();
+        },
+        get 0() {
+          return mockWindowIndexZero();
+        },
+      },
+    });
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+    test('Should return the window in an array', () => {
+      mockWindowFramesLength.mockReturnValue(0);
+      const localWindow = window;
+      const windows = getWindows(localWindow);
+      expect(windows).toHaveLength(1);
+      expect(windows[0]).toEqual(localWindow);
+    });
+    test('Should return the window with a parent', () => {
+      mockWindowFramesLength.mockReturnValue(0);
+      const spyWindowSelf = jest.spyOn(window, 'self', 'get').mockImplementationOnce(jest.fn());
+      const spyWindowParent = jest.spyOn(window, 'parent', 'get').mockImplementationOnce(() => window);
+      const windows = getWindows(window);
+      expect(windows).toHaveLength(2);
+      expect(spyWindowSelf).toBeCalledTimes(2);
+      expect(spyWindowParent).toBeCalledTimes(1);
+    });
+    test('Should return the window with a child', () => {
+      mockWindowFramesLength.mockReturnValueOnce(1).mockReturnValueOnce(1).mockReturnValue(0);
+      mockWindowIndexZero.mockReturnValueOnce(window);
+      const windows = getWindows(window);
+      expect(windows).toHaveLength(2);
+    });
+    test('Should throw an error when cannot access top parent window', () => {
+      mockWindowFramesLength.mockReturnValue(0);
+      const spyConsole = jest.spyOn(console, 'error');
+      const spyWindowSelf = jest.spyOn(window, 'self', 'get').mockImplementationOnce(jest.fn());
+      const spyWindowParent = jest.spyOn(window, 'parent', 'get').mockImplementationOnce(() => {
+        throw new Error('non');
+      });
+      const localWindow = window;
+      const windows = getWindows(localWindow);
+      expect(windows).toHaveLength(1);
+      expect(windows[0]).toEqual(localWindow);
+      expect(spyConsole).toBeCalledTimes(1);
+      expect(spyWindowSelf).toBeCalledTimes(1);
+      expect(spyWindowParent).toBeCalledTimes(1);
+    });
+  });
+});
+//# sourceMappingURL=components.utils.spec.js.map

package/dist/collection/utils/components.utils.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.utils.spec.js","sourceRoot":"","sources":["../../src/utils/components.utils.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { createID, ClassList, allItemsAreString, isTagName, getWindows } from './components.utils';\nimport { mockConsoleError } from './unit.test.utils';\n\nmockConsoleError();\n\ndescribe('components.utils', () => {\n  describe('createID', () => {\n    test.each([undefined, '', 'blu'])('Should generate a prefixed ID if defined : %s', prefix => {\n      const id = createID(prefix);\n      let regexp = /^[a-z0-9]{10}$/;\n      if (prefix !== undefined && prefix !== '') {\n        regexp = new RegExp(`^${prefix}-[a-z0-9]{10}$`);\n      }\n      expect(id).toMatch(regexp);\n    });\n  });\n\n  describe('ClassList', () => {\n    test('Should add classes to list', () => {\n      const classCollection = new ClassList();\n      expect(classCollection.classes).toEqual([]);\n      classCollection.add('blu');\n      expect(classCollection.classes).toEqual(['blu']);\n      classCollection.add('bli');\n      expect(classCollection.classes).toEqual(['blu', 'bli']);\n      // Should not add classes if already in list\n      classCollection.add('blu');\n      expect(classCollection.classes).toEqual(['blu', 'bli']);\n    });\n\n    test('Should delete classes from list', () => {\n      const classCollection = new ClassList(['blu', 'bli']);\n      classCollection.delete('blu');\n      expect(classCollection.classes).toEqual(['bli']);\n      // List doesn't change if class name doesn't existe in list\n      classCollection.delete('bla');\n      expect(classCollection.classes).toEqual(['bli']);\n    });\n\n    test('Should check if class already in list', () => {\n      const classCollection = new ClassList(['blu']);\n      expect(classCollection.has('blu')).toEqual(true);\n      expect(classCollection.has('bli')).toEqual(false);\n    });\n\n    test('Should return seperated space classes list', () => {\n      const classCollection = new ClassList(['blu', 'bli']);\n      expect(classCollection.join()).toEqual('blu bli');\n    });\n  });\n\n  describe('allItemsAreString', () => {\n    test.each([\n      { items: ['blu', 'bli', 'blo', 'bla'], expected: true },\n      { items: ['blu', 'bli', 'blo', { value: 'bla' }], expected: false },\n    ])('Should test if all otems are string: %s', ({ items, expected }) => {\n      expect(allItemsAreString(items as string[])).toEqual(expected);\n    });\n  });\n\n  describe('isTagName', () => {\n    test.each([\n      { querySelector: 'h1', expected: true },\n      { querySelector: 'span', expected: false },\n      { querySelector: 'blu', expected: false },\n    ])('Should test if all otems are string: %s', ({ querySelector, expected }) => {\n      const div = document.createElement('div');\n      div.innerHTML = '<h1></h1><span></span>';\n      const elm = div.querySelector(querySelector);\n      expect(isTagName(elm as HTMLElement, ['h1'])).toEqual(expected);\n    });\n  });\n\n  describe('getWindows', () => {\n    const mockWindowFramesLength = jest.fn();\n    const mockWindowIndexZero = jest.fn();\n    Object.defineProperty(window, 'frames', {\n      value: {\n        get length() {\n          return mockWindowFramesLength();\n        },\n        get 0() {\n          return mockWindowIndexZero();\n        },\n      },\n    });\n\n    afterEach(() => {\n      jest.clearAllMocks();\n    });\n\n    test('Should return the window in an array', () => {\n      mockWindowFramesLength.mockReturnValue(0);\n      const localWindow: Window = window;\n      const windows: Window[] = getWindows(localWindow);\n      expect(windows).toHaveLength(1);\n      expect(windows[0]).toEqual(localWindow);\n    });\n\n    test('Should return the window with a parent', () => {\n      mockWindowFramesLength.mockReturnValue(0);\n      const spyWindowSelf = jest.spyOn(window, 'self', 'get').mockImplementationOnce(jest.fn());\n      const spyWindowParent = jest.spyOn(window, 'parent', 'get').mockImplementationOnce(() => window);\n\n      const windows = getWindows(window);\n      expect(windows).toHaveLength(2);\n      expect(spyWindowSelf).toBeCalledTimes(2);\n      expect(spyWindowParent).toBeCalledTimes(1);\n    });\n\n    test('Should return the window with a child', () => {\n      mockWindowFramesLength.mockReturnValueOnce(1).mockReturnValueOnce(1).mockReturnValue(0);\n      mockWindowIndexZero.mockReturnValueOnce(window);\n      const windows = getWindows(window);\n      expect(windows).toHaveLength(2);\n    });\n\n    test('Should throw an error when cannot access top parent window', () => {\n      mockWindowFramesLength.mockReturnValue(0);\n      const spyConsole = jest.spyOn(console, 'error');\n      const spyWindowSelf = jest.spyOn(window, 'self', 'get').mockImplementationOnce(jest.fn());\n      const spyWindowParent = jest.spyOn(window, 'parent', 'get').mockImplementationOnce(() => {\n        throw new Error('non');\n      });\n      const localWindow: Window = window;\n      const windows: Window[] = getWindows(localWindow);\n      expect(windows).toHaveLength(1);\n      expect(windows[0]).toEqual(localWindow);\n      expect(spyConsole).toBeCalledTimes(1);\n      expect(spyWindowSelf).toBeCalledTimes(1);\n      expect(spyWindowParent).toBeCalledTimes(1);\n    });\n  });\n});\n"]}

package/dist/collection/utils/e2e.test.utils.js

@@ -0,0 +1,46 @@
+/**
+ * Add a darker background
+ * usefull for light rendered element
+ * @param condition - condition to add darker background
+ * @param html - html to update
+ * @returns html to render
+ */
+export const darkBackground = (condition, html) => `${condition ? '<span style="background:#999;display:inline-block;">' : ''}${html}${condition ? '</span>' : ''}`;
+/**
+ * Render attributes from props objects
+ * @param args - argument to render as string. ex: `{status: 'visible'}`
+ * @returns formated inline attributed. ex: 'status="visible"'
+ */
+export const renderAttributes = (args) => (typeof args === 'object' &&
+  Object.keys(args)
+    .filter(key => ![null, undefined, false].includes(args[key]) && typeof args[key] !== 'object')
+    .map(key => `${key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}="${args[key]}"`)
+    .join(' ')) ||
+  '';
+/**
+ * Render properties from props objects.
+ * Insert return value in <script></script> element
+ * @param args - argument to render as script. ex: `{status: 'visible'}`
+ * @param selector - querySelector get targetted element and bind properties on it
+ * @returns stringified properties script
+ */
+export const renderProperties = (args, selector) => {
+  // has generated id selector starting with "#" create charcters (ex: '#0j3xzw4w7m') make test crashed sometime with "querySelector"
+  // we use "getElementById" document query
+  const query = selector.startsWith('#') ? 'getElementById' : 'querySelector';
+  if (query === 'getElementById')
+    selector = selector.replace('#', '');
+  return typeof args === 'object'
+    ? `
+  ${Object.keys(args)
+      .filter(key => typeof args[key] === 'object')
+      .map(key => `document.${query}('${selector}').${key}=${JSON.stringify(args[key], (_key, val) => (typeof val === 'function' ? `<fn>${val}</fn>` : val))}`) // stringify json AND keep function values
+      .join(';\n') // create string
+      .split('"<fn>') // remove fn start decorator
+      .join('')
+      .split('</fn>"')
+      .join('') // remove fn end decorator
+    }`
+    : '';
+};
+//# sourceMappingURL=e2e.test.utils.js.map

package/dist/collection/utils/e2e.test.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"e2e.test.utils.js","sourceRoot":"","sources":["../../src/utils/e2e.test.utils.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,SAAkB,EAAE,IAAY,EAAU,EAAE,CACzE,GAAG,SAAS,CAAC,CAAC,CAAC,sDAAsD,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;AAEnH;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAa,EAAU,EAAE,CACxD,CAAC,OAAO,IAAI,KAAK,QAAQ;EACvB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;KACd,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,QAAQ,CAAC;KAC7F,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC;KACrF,IAAI,CAAC,GAAG,CAAC,CAAC;EACf,EAAE,CAAC;AAEL;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAa,EAAE,QAAgB,EAAU,EAAE;EAC1E,mIAAmI;EACnI,yCAAyC;EACzC,MAAM,KAAK,GAAuC,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,CAAC;EAChH,IAAI,KAAK,KAAK,gBAAgB;IAAE,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;EAErE,OAAO,OAAO,IAAI,KAAK,QAAQ;IAC7B,CAAC,CAAC;IAEF,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;OACd,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,QAAQ,CAAC;OAC5C,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,YAAY,KAAK,KAAK,QAAQ,MAAM,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,OAAO,GAAG,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,0CAA0C;OACnM,IAAI,CAAC,KAAK,CAAC,CAAC,gBAAgB;OAC5B,KAAK,CAAC,OAAO,CAAC,CAAC,4BAA4B;OAC3C,IAAI,CAAC,EAAE,CAAC;OACR,KAAK,CAAC,QAAQ,CAAC;OACf,IAAI,CAAC,EAAE,CAAC,CAAC,0BAA0B;IACxC,EAAE;IACA,CAAC,CAAC,EAAE,CAAC;AACT,CAAC,CAAC","sourcesContent":["/**\n * Add a darker background\n * usefull for light rendered element\n * @param condition - condition to add darker background\n * @param html - html to update\n * @returns html to render\n */\nexport const darkBackground = (condition: boolean, html: string): string =>\n  `${condition ? '<span style=\"background:#999;display:inline-block;\">' : ''}${html}${condition ? '</span>' : ''}`;\n\n/**\n * Render attributes from props objects\n * @param args - argument to render as string. ex: `{status: 'visible'}`\n * @returns formated inline attributed. ex: 'status=\"visible\"'\n */\nexport const renderAttributes = (args: unknown): string =>\n  (typeof args === 'object' &&\n    Object.keys(args)\n      .filter(key => ![null, undefined, false].includes(args[key]) && typeof args[key] !== 'object')\n      .map(key => `${key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}=\"${args[key]}\"`)\n      .join(' ')) ||\n  '';\n\n/**\n * Render properties from props objects.\n * Insert return value in <script></script> element\n * @param args - argument to render as script. ex: `{status: 'visible'}`\n * @param selector - querySelector get targetted element and bind properties on it\n * @returns stringified properties script\n */\nexport const renderProperties = (args: unknown, selector: string): string => {\n  // has generated id selector starting with \"#\" create charcters (ex: '#0j3xzw4w7m') make test crashed sometime with \"querySelector\"\n  // we use \"getElementById\" document query\n  const query: 'querySelector' | 'getElementById' = selector.startsWith('#') ? 'getElementById' : 'querySelector';\n  if (query === 'getElementById') selector = selector.replace('#', '');\n\n  return typeof args === 'object'\n    ? `\n  ${\n    Object.keys(args)\n      .filter(key => typeof args[key] === 'object')\n      .map(key => `document.${query}('${selector}').${key}=${JSON.stringify(args[key], (_key, val) => (typeof val === 'function' ? `<fn>${val}</fn>` : val))}`) // stringify json AND keep function values\n      .join(';\\n') // create string\n      .split('\"<fn>') // remove fn start decorator\n      .join('')\n      .split('</fn>\"')\n      .join('') // remove fn end decorator\n  }`\n    : '';\n};\n"]}

package/dist/collection/utils/locale.utils.js

@@ -54,3 +54,4 @@ export const getLocaleMessages = (element, messages, defaultLocale) => {
     messages: messages[localeSubtag] || messages[defaultLocale],
   };
 };
+//# sourceMappingURL=locale.utils.js.map

package/dist/collection/utils/locale.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"locale.utils.js","sourceRoot":"","sources":["../../src/utils/locale.utils.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,QAAgB,EAAU,EAAE;EACzF,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACvF,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,MAAc,EAAE,MAAc,EAAU,EAAE;EACrE,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;AACtD,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,+CAA+C,CAAC;AAE1E;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,MAAc,EAAU,EAAE;EACjE,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;IACrE,OAAO,EAAE,CAAC;GACX;EACD,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAChE,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,OAAoB,EAAE,QAAiB,EAAE,aAAqB,EAAyD,EAAE;EACzJ,YAAY;EACZ,MAAM,oBAAoB,GAAgB,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;EACpE,MAAM,WAAW,GAAa,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,IAAI,CAAC,CAAC;EAC/F,MAAM,MAAM,GAAG,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,IAAI,aAAa,CAAC;EAC7F,yBAAyB;EACzB,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC;EAC/C,SAAS;EACT,OAAO;IACL,MAAM;IACN,QAAQ,EAAE,QAAQ,CAAC,YAAY,CAAC,IAAI,QAAQ,CAAC,aAAa,CAAC;GAC5D,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/**\n * Format number to the locale currency\n * @param number - number to format\n * @param locale - locale to apply\n * @param currency - currency to apply\n * @returns formatted currency\n */\nexport const localeCurrency = (number: number, locale: string, currency: string): string => {\n  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);\n};\n\n/**\n * Format number to locale\n * @param number - number to format\n * @param locale - locale to apply\n * @returns formatted number\n */\nexport const localeNumber = (number: number, locale: string): string => {\n  return new Intl.NumberFormat(locale).format(number);\n};\n\n/**\n * Date RegExp\n */\nexport const dateRegExp = /^\\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01])$/;\n\n/**\n * Locale date format\n * @param date - date to format\n * @param locale - locale to apply\n * @returns formatted date\n */\nexport const localeDate = (date: string, locale: string): string => {\n  if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {\n    return '';\n  }\n  return new Intl.DateTimeFormat(locale).format(new Date(date));\n};\n\n/**\n * Get locale and messages\n * We load the defined locale but for now we only support the first subtag for messages\n * @param element - element we need to get the language\n * @param messages - messages to use\n * @param defaultLocale - default messages locale\n * @returns messages object\n */\nexport const getLocaleMessages = (element: HTMLElement, messages: unknown, defaultLocale: string): { locale: string; messages: Record<string, unknown> } => {\n  // Get local\n  const closestLangAttribute: HTMLElement = element.closest('[lang]');\n  const closestLang: string[] = Intl.NumberFormat.supportedLocalesOf(closestLangAttribute?.lang);\n  const locale = closestLang.length > 0 ? closestLang[0] : navigator.language || defaultLocale;\n  // Only keep first subtag\n  const localeSubtag = locale.split('-').shift();\n  // Return\n  return {\n    locale,\n    messages: messages[localeSubtag] || messages[defaultLocale],\n  };\n};\n"]}

package/dist/collection/utils/locale.utils.spec.js

@@ -0,0 +1,52 @@
+import { localeCurrency, localeNumber, localeDate, getLocaleMessages } from "./locale.utils";
+import messagesEn from "../locales/en/messages.json";
+import messagesFr from "../locales/fr/messages.json";
+describe('locale.utils', () => {
+  describe.each(['en', 'fr'])('locale.utils: %s', locale => {
+    describe('localeCurrency', () => {
+      test('Should Format number to the locale currency', () => {
+        const formatedCurrency = localeCurrency(1234567890.12, locale, 'EUR');
+        expect(formatedCurrency).toEqual(locale === 'en' ? '€1,234,567,890.12' : '1 234 567 890,12\xa0€');
+      });
+    });
+    describe('localeNumber', () => {
+      test('Should Format number to the locale', () => {
+        const formatedCurrency = localeNumber(1234567890.12, locale);
+        expect(formatedCurrency).toEqual(locale === 'en' ? '1,234,567,890.12' : '1 234 567 890,12');
+      });
+    });
+    describe('localeDate', () => {
+      test.each([undefined, '', 'blu'])('Should return empty string: %s', date => {
+        const formatedDate = localeDate(date, locale);
+        expect(formatedDate).toEqual('');
+      });
+      test('Should return formated date', () => {
+        const formatedDate = localeDate('2022-06-02', locale);
+        expect(formatedDate).toEqual(locale === 'en' ? '6/2/2022' : '02/06/2022');
+      });
+    });
+    describe('getLocaleMessages', () => {
+      const messages = { en: messagesEn, fr: messagesFr };
+      test('Should return default locale', () => {
+        const locales = getLocaleMessages(document.createElement('div'), messages, 'en');
+        expect(locales.locale).toEqual('en');
+        expect(locales.messages).toMatchObject(messagesEn);
+      });
+      test('Should return matching locale', () => {
+        const div = document.createElement('div');
+        div.lang = 'fr-FR';
+        const locales = getLocaleMessages(div, messages, 'en');
+        expect(locales.locale).toEqual(div.lang);
+        expect(locales.messages).toMatchObject(messagesFr);
+      });
+      test('Should return default locale messages when requested does not exist', () => {
+        const div = document.createElement('div');
+        div.lang = 'ca';
+        const locales = getLocaleMessages(div, messages, 'en');
+        expect(locales.locale).toEqual(div.lang);
+        expect(locales.messages).toMatchObject(messagesEn);
+      });
+    });
+  });
+});
+//# sourceMappingURL=locale.utils.spec.js.map

package/dist/collection/utils/locale.utils.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"locale.utils.spec.js","sourceRoot":"","sources":["../../src/utils/locale.utils.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { localeCurrency, localeNumber, localeDate, getLocaleMessages } from './locale.utils';\nimport messagesEn from '../locales/en/messages.json';\nimport messagesFr from '../locales/fr/messages.json';\n\ndescribe('locale.utils', () => {\n  describe.each(['en', 'fr'])('locale.utils: %s', locale => {\n    describe('localeCurrency', () => {\n      test('Should Format number to the locale currency', () => {\n        const formatedCurrency = localeCurrency(1234567890.12, locale, 'EUR');\n        expect(formatedCurrency).toEqual(locale === 'en' ? '€1,234,567,890.12' : '1 234 567 890,12\\xa0€');\n      });\n    });\n\n    describe('localeNumber', () => {\n      test('Should Format number to the locale', () => {\n        const formatedCurrency = localeNumber(1234567890.12, locale);\n        expect(formatedCurrency).toEqual(locale === 'en' ? '1,234,567,890.12' : '1 234 567 890,12');\n      });\n    });\n\n    describe('localeDate', () => {\n      test.each([undefined, '', 'blu'])('Should return empty string: %s', date => {\n        const formatedDate = localeDate(date, locale);\n        expect(formatedDate).toEqual('');\n      });\n\n      test('Should return formated date', () => {\n        const formatedDate = localeDate('2022-06-02', locale);\n        expect(formatedDate).toEqual(locale === 'en' ? '6/2/2022' : '02/06/2022');\n      });\n    });\n\n    describe('getLocaleMessages', () => {\n      const messages = { en: messagesEn, fr: messagesFr };\n      test('Should return default locale', () => {\n        const locales = getLocaleMessages(document.createElement('div'), messages, 'en');\n        expect(locales.locale).toEqual('en');\n        expect(locales.messages).toMatchObject(messagesEn);\n      });\n\n      test('Should return matching locale', () => {\n        const div = document.createElement('div');\n        div.lang = 'fr-FR';\n        const locales = getLocaleMessages(div, messages, 'en');\n        expect(locales.locale).toEqual(div.lang);\n        expect(locales.messages).toMatchObject(messagesFr);\n      });\n\n      test('Should return default locale messages when requested does not exist', () => {\n        const div = document.createElement('div');\n        div.lang = 'ca';\n        const locales = getLocaleMessages(div, messages, 'en');\n        expect(locales.locale).toEqual(div.lang);\n        expect(locales.messages).toMatchObject(messagesEn);\n      });\n    });\n  });\n});\n"]}

package/dist/collection/utils/playwright.e2e.test.utils.js

@@ -0,0 +1,100 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { test as playwrightTest, expect as playwrightExpect, devices as playwrightDevices } from "@playwright/test";
+import { readFile } from "fs/promises";
+import { join } from "path";
+/**
+ * Add mg-components to browser page
+ *
+ * @param page - browser page
+ * @param html - html to load in page
+ */
+export const setPageContent = async (page, html, viewportSize) => {
+  // We need to add mg-components to the e2e page
+  // Those solutions wasn't working to add the CSS
+  // await page.addStyleTag({ url: 'http://localhost:3333/build/mg-components.css' });
+  // CSS
+  const css = await readFile(join(__dirname, '../../www/build/mg-components.css'), { encoding: 'utf8' });
+  await page.addStyleTag({ content: css });
+  // JS
+  await page.addScriptTag({ url: 'http://localhost:3333/build/mg-components.esm.js', type: 'module' });
+  // Set page content
+  // Added the `e2e-screenshot` class to be able to do the screenshot on this specific one with
+  // `await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();`
+  await page.setContent(`<style>${css} .e2e-screenshot { display: inline-block; }</style><span class="e2e-screenshot">${html}</span>`);
+  // Set page size
+  if (viewportSize !== undefined)
+    await page.setViewportSize(viewportSize);
+  // Make sure everything is loaded
+  await page.waitForLoadState('networkidle');
+  await page.waitForSelector('html.hydrated');
+};
+/**
+ * playwright 'expect' function definition
+ */
+export const expect = playwrightExpect;
+/**
+ * playwright 'describe' function definition
+ */
+export const describe = playwrightTest.describe;
+/**
+ * playwright 'test' function definition
+ */
+export const test = playwrightTest;
+/**
+ * playwright 'devices' definition
+ */
+export const devices = playwrightDevices;
+/**
+ * Value to get in string
+ * @param value - valut to stringify
+ * @returns stringified value
+ */
+const valueToString = (value) => (typeof value === 'object' ? JSON.stringify(value) : `${value}`);
+/**
+ * repeat test over array
+ * @param array - array of test
+ * @param option - test runner option
+ * @returns describe iteration
+ */
+export const describeEach = (array, option) => (title, cb) => {
+  array.forEach(value => {
+    const displayTitle = title.replace('%s', valueToString(value));
+    const fn = () => cb(value);
+    if (Boolean(option))
+      describe[option](displayTitle, fn);
+    else
+      describe(displayTitle, fn);
+  });
+};
+/**
+ * repeat test over array
+ * @param array - array of test
+ * @param option - test runner option
+ * @returns test iteration
+ */
+export const testEach = (array, option) => (title, cb) => {
+  array.forEach(value => {
+    const displayTitle = title.replace('%s', valueToString(value));
+    const fn = async ({ page }) => cb(page, value);
+    if (Boolean(option))
+      test[option](displayTitle, fn);
+    else
+      test(displayTitle, fn);
+  });
+};
+/**
+ * Update .e2e-screenshot style for screenshot needs
+ * @param page - playwright Page
+ * @param params - css properties to apply
+ * @returns class style definition
+ */
+export const updateScreenshotClass = async (page, params) => page.evaluate(params => {
+  const css = `.e2e-screenshot { ${Object.keys(params)
+    .map(key => `${key}: ${typeof params[key] === 'string' ? params[key] : ''}`)
+    .join(';')} }`;
+  const body = document.getElementsByTagName('body')[0];
+  const style = document.createElement('style');
+  body.appendChild(style);
+  style.appendChild(document.createTextNode(css));
+}, params);
+//# sourceMappingURL=playwright.e2e.test.utils.js.map

package/dist/collection/utils/playwright.e2e.test.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playwright.e2e.test.utils.js","sourceRoot":"","sources":["../../src/utils/playwright.e2e.test.utils.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { type Page, ViewportSize, test as playwrightTest, expect as playwrightExpect, devices as playwrightDevices } from '@playwright/test';\nimport { readFile } from 'fs/promises';\nimport { join } from 'path';\n\n/**\n * Add mg-components to browser page\n *\n * @param page - browser page\n * @param html - html to load in page\n */\nexport const setPageContent = async (page: Page, html: string, viewportSize?: ViewportSize): Promise<void> => {\n  // We need to add mg-components to the e2e page\n  // Those solutions wasn't working to add the CSS\n  // await page.addStyleTag({ url: 'http://localhost:3333/build/mg-components.css' });\n\n  // CSS\n  const css = await readFile(join(__dirname, '../../www/build/mg-components.css'), { encoding: 'utf8' });\n  await page.addStyleTag({ content: css });\n\n  // JS\n  await page.addScriptTag({ url: 'http://localhost:3333/build/mg-components.esm.js', type: 'module' });\n\n  // Set page content\n  // Added the `e2e-screenshot` class to be able to do the screenshot on this specific one with\n  // `await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();`\n  await page.setContent(`<style>${css} .e2e-screenshot { display: inline-block; }</style><span class=\"e2e-screenshot\">${html}</span>`);\n\n  // Set page size\n  if (viewportSize !== undefined) await page.setViewportSize(viewportSize);\n\n  // Make sure everything is loaded\n  await page.waitForLoadState('networkidle');\n  await page.waitForSelector('html.hydrated');\n};\n\n/**\n * playwright 'expect' function definition\n */\nexport const expect = playwrightExpect;\n\n/**\n * playwright 'describe' function definition\n */\nexport const describe = playwrightTest.describe;\n\n/**\n * playwright 'test' function definition\n */\nexport const test = playwrightTest;\n\n/**\n * playwright 'devices' definition\n */\nexport const devices = playwrightDevices;\n\n/**\n * Value to get in string\n * @param value - valut to stringify\n * @returns stringified value\n */\nconst valueToString = (value: unknown): string => (typeof value === 'object' ? JSON.stringify(value) : `${value}`);\n\n/**\n * Declare page type\n */\nexport type PageType = Page;\n\n/**\n * repeat test over array\n * @param array - array of test\n * @param option - test runner option\n * @returns describe iteration\n */\nexport const describeEach = (array: unknown[] | any, option?: 'skip' | 'only') => (title: string, cb: (param: unknown) => void) => {\n  array.forEach(value => {\n    const displayTitle = title.replace('%s', valueToString(value));\n    const fn = () => cb(value);\n    if (Boolean(option)) describe[option](displayTitle, fn);\n    else describe(displayTitle, fn);\n  });\n};\n\n/**\n * repeat test over array\n * @param array - array of test\n * @param option - test runner option\n * @returns test iteration\n */\nexport const testEach = (array: unknown[] | any, option?: 'skip' | 'only') => (title: string, cb: (page: PageType, param: unknown) => Promise<void>) => {\n  array.forEach(value => {\n    const displayTitle = title.replace('%s', valueToString(value));\n    const fn = async ({ page }) => cb(page, value);\n    if (Boolean(option)) test[option](displayTitle, fn);\n    else test(displayTitle, fn);\n  });\n};\n\n/**\n * Update .e2e-screenshot style for screenshot needs\n * @param page - playwright Page\n * @param params - css properties to apply\n * @returns class style definition\n */\nexport const updateScreenshotClass = async (page: Page, params: unknown): Promise<void> =>\n  page.evaluate(params => {\n    const css = `.e2e-screenshot { ${Object.keys(params)\n      .map(key => `${key}: ${typeof params[key] === 'string' ? params[key] : ''}`)\n      .join(';')} }`;\n    const body = document.getElementsByTagName('body')[0];\n    const style = document.createElement('style');\n    body.appendChild(style);\n    style.appendChild(document.createTextNode(css));\n  }, params);\n"]}

package/dist/collection/utils/stencil.e2e.test.utils.js

@@ -0,0 +1,33 @@
+import { newE2EPage } from "@stencil/core/testing";
+/**
+ * Create E2E page
+ *
+ * @param htmlString - html to render
+ * @param viewPort - custom page viewPort - optional
+ * @returns page
+ */
+export async function createPage(htmlString, viewPort) {
+  const defaultSize = 600;
+  const page = (await newE2EPage());
+  await page.setViewport({ width: (viewPort === null || viewPort === void 0 ? void 0 : viewPort.width) || defaultSize, height: (viewPort === null || viewPort === void 0 ? void 0 : viewPort.height) || defaultSize });
+  await page.setContent(`<link rel="stylesheet" href="http://localhost:3333/build/variables.css" /><meta charset="UTF-8">${htmlString}`, { waitUntil: 'networkidle0' });
+  await page.evaluateHandle('document.fonts.ready');
+  // monkey patch screenshot function to add some extra features
+  const screenshot = page.screenshot;
+  page.screenshot = async () => {
+    let width = page.viewport().width;
+    let height = page.viewport().height;
+    // if viewport has not been redefined
+    if (page.viewport().width === defaultSize && page.viewport().height === defaultSize) {
+      const htmlElement = await page.$('html');
+      const boundingBox = await htmlElement.boundingBox();
+      width = Math.round(boundingBox.width);
+      height = Math.round(boundingBox.height);
+    }
+    return screenshot.call(page, {
+      clip: { x: 0, y: 0, width, height },
+    });
+  };
+  return page;
+}
+//# sourceMappingURL=stencil.e2e.test.utils.js.map

package/dist/collection/utils/stencil.e2e.test.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stencil.e2e.test.utils.js","sourceRoot":"","sources":["../../src/utils/stencil.e2e.test.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAW,MAAM,uBAAuB,CAAC;AAK5D;;;;;;GAMG;AACH,MAAM,CAAC,KAAK,UAAU,UAAU,CAAC,UAAkB,EAAE,QAA8C;EACjG,MAAM,WAAW,GAAG,GAAG,CAAC;EACxB,MAAM,IAAI,GAAG,CAAC,MAAM,UAAU,EAAE,CAAwB,CAAC;EACzD,MAAM,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK,KAAI,WAAW,EAAE,MAAM,EAAE,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,KAAI,WAAW,EAAE,CAAC,CAAC;EAC3G,MAAM,IAAI,CAAC,UAAU,CAAC,mGAAmG,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC,CAAC;EACtK,MAAM,IAAI,CAAC,cAAc,CAAC,sBAAsB,CAAC,CAAC;EAElD,8DAA8D;EAC9D,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;EACnC,IAAI,CAAC,UAAU,GAAG,KAAK,IAAI,EAAE;IAC3B,IAAI,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC;IAClC,IAAI,MAAM,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC;IACpC,qCAAqC;IACrC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAK,WAAW,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,MAAM,KAAK,WAAW,EAAE;MACnF,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;MACzC,MAAM,WAAW,GAAG,MAAM,WAAW,CAAC,WAAW,EAAE,CAAC;MACpD,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;MACtC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;KACzC;IAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE;MAC3B,IAAI,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE;KACpC,CAAC,CAAC;EACL,CAAC,CAAC;EAEF,OAAO,IAAI,CAAC;AACd,CAAC","sourcesContent":["import { newE2EPage, E2EPage } from '@stencil/core/testing';\nimport { Page as PuppeteerPage } from 'puppeteer';\n\nexport type DesignSystemE2EPage = E2EPage & Pick<PuppeteerPage, 'screenshot' | 'viewport'>;\n\n/**\n * Create E2E page\n *\n * @param htmlString - html to render\n * @param viewPort - custom page viewPort - optional\n * @returns page\n */\nexport async function createPage(htmlString: string, viewPort?: { width?: number; height?: number }): Promise<DesignSystemE2EPage> {\n  const defaultSize = 600;\n  const page = (await newE2EPage()) as DesignSystemE2EPage;\n  await page.setViewport({ width: viewPort?.width || defaultSize, height: viewPort?.height || defaultSize });\n  await page.setContent(`<link rel=\"stylesheet\" href=\"http://localhost:3333/build/variables.css\" /><meta charset=\"UTF-8\">${htmlString}`, { waitUntil: 'networkidle0' });\n  await page.evaluateHandle('document.fonts.ready');\n\n  // monkey patch screenshot function to add some extra features\n  const screenshot = page.screenshot;\n  page.screenshot = async () => {\n    let width = page.viewport().width;\n    let height = page.viewport().height;\n    // if viewport has not been redefined\n    if (page.viewport().width === defaultSize && page.viewport().height === defaultSize) {\n      const htmlElement = await page.$('html');\n      const boundingBox = await htmlElement.boundingBox();\n      width = Math.round(boundingBox.width);\n      height = Math.round(boundingBox.height);\n    }\n\n    return screenshot.call(page, {\n      clip: { x: 0, y: 0, width, height },\n    });\n  };\n\n  return page;\n}\n"]}

package/dist/collection/utils/unit.test.utils.js

@@ -1,5 +1,5 @@
 /* eslint-disable jsdoc/require-jsdoc */
-import { MockCustomEvent } from '@stencil/core/mock-doc';
+import { MockCustomEvent } from "@stencil/core/mock-doc";
 /**
  * Clone Deep function
  * @param obj - object to clone
@@ -127,3 +127,4 @@ export const mockWindowFrames = () => {
     value: { length: 0 },
   });
 };
+//# sourceMappingURL=unit.test.utils.js.map

package/dist/collection/utils/unit.test.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"unit.test.utils.js","sourceRoot":"","sources":["../../src/utils/unit.test.utils.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable jsdoc/require-jsdoc */\nimport { MockCustomEvent } from '@stencil/core/mock-doc';\n\n/**\n * Clone Deep function\n * @param obj - object to clone\n * @returns cloned json\n */\nexport const cloneDeep = (obj: unknown): unknown => JSON.parse(JSON.stringify(obj));\n\n/**\n * Utility function that mocks the `MutationObserver` API. Recommended to execute inside `beforeEach`.\n * @param mutationObserverMock - Parameter that is sent to the `Object.defineProperty`\n * overwrite method. `jest.fn()` mock functions can be passed here if the goal is to not only\n * mock the mutation observer, but its methods.\n * You can manually fire an intersection entry:\n * @param mutationObserverMock - configuration object\n * @returns Mocked MutationObserver\n * @example\n * ```\n * let fireMo;\n * setupMutationObserverMock({\n *   observe: function () {\n *     fireMo = this.cb;\n *   },\n * });\n * ...\n * fireMo([{ type: 'childList', addedNodes: [AMockElemenet, AnotherMockElemenet], target: yourMockElemenet }]);;\n * ```\n */\ntype SetupMutationObserverMockParams = { disconnect: MutationObserver['disconnect']; observe: MutationObserver['observe']; takeRecords: MutationObserver['takeRecords'] };\nexport const setupMutationObserverMock = ({ disconnect, observe, takeRecords }: SetupMutationObserverMockParams): typeof MutationObserver => {\n  class MockMutationObserver implements MutationObserver {\n    disconnect: () => void = disconnect;\n    observe: (target: Node, options?: MutationObserverInit) => void = observe;\n    takeRecords: () => MutationRecord[] = takeRecords;\n    cb: () => unknown;\n    constructor(fn) {\n      this.cb = fn;\n    }\n  }\n\n  [window, global].forEach(element => {\n    Object.defineProperty(element, 'MutationObserver', {\n      writable: true,\n      configurable: true,\n      value: MockMutationObserver,\n    });\n  });\n\n  return MockMutationObserver;\n};\n\ntype setupResizeObserverMockParams = { disconnect: ResizeObserver['disconnect']; observe: ResizeObserver['observe'] };\n\n/**\n * Utility function that mocks the `ResizeObserver` API. Recommended to execute inside `beforeEach`.\n * @param resizeObserverMock - Parameter that is sent to the `Object.defineProperty`\n * overwrite method. `jest.fn()` mock functions can be passed here if the goal is to not only\n * mock the resize observer, but its methods.\n * You can manually fire an intersection entry:\n * @param resizeObserverMock - configuration object\n * @returns Mocked ResizeObserver\n * @example\n * ```\n * let fireRo;\n * setupResizeObserverMock({\n *   observe: function () {\n *     fireRo = this.cb;\n *   },\n * });\n * ...\n * fireRo([{\n *  borderBoxSize: ResizeObserverSize[],\n *  contentBoxSize: ResizeObserverSize[],\n *  contentRect: DOMRectReadOnly,\n *  devicePixelContentBoxSize: ResizeObserverSize[],\n *  target: yourMockElemenet\n * }]);;\n * ```\n */\nexport const setupResizeObserverMock = ({ disconnect, observe }: setupResizeObserverMockParams): typeof ResizeObserver => {\n  class MockResizeObserver implements ResizeObserver {\n    disconnect: () => void = disconnect;\n    observe: (target: Element, options?: ResizeObserverOptions) => void = observe;\n    unobserve: () => void;\n    cb: () => unknown;\n    constructor(fn) {\n      this.cb = fn;\n    }\n  }\n\n  [window, global].forEach(element => {\n    Object.defineProperty(element, 'ResizeObserver', {\n      writable: true,\n      configurable: true,\n      value: MockResizeObserver,\n    });\n  });\n\n  return MockResizeObserver;\n};\n\n/**\n * Utility function that mocks the `SubmitEvent` API. Recommended to execute inside `beforeEach`.\n * @example\n * ```\n * setupSubmitEventMock();\n * ```\n * @returns custom event mock\n */\nexport const setupSubmitEventMock = (): typeof MockCustomEvent => {\n  class SubmitEvent extends MockCustomEvent {\n    constructor(type: string, eventInitDict?: SubmitEventInit) {\n      super(type, eventInitDict);\n    }\n  }\n\n  [window, global].forEach(element => {\n    Object.defineProperty(element, 'SubmitEvent', {\n      writable: true,\n      configurable: true,\n      value: SubmitEvent,\n    });\n  });\n\n  return SubmitEvent;\n};\n\n/**\n * force popover id when component use randomed identifier\n * @param component - element wich include mg-popover\n * @param id - new fixed id\n * @param interactiveElement - element where attribute 'aria-controls' is set\n */\nexport const forcePopoverId = (component: Element, id: string, interactiveElement = 'button'): void => {\n  const popover = component.shadowRoot.querySelector('mg-popover');\n  if (popover !== null) {\n    popover.querySelector('mg-popover-content').setAttribute('id', id);\n    component.shadowRoot.querySelector(interactiveElement).setAttribute('aria-controls', id);\n  }\n};\n\n/**\n * fix popper console.error in test\n * it is generated in `@popperjs/core/dist/cjs/popper.js l.1859`\n * this is due to internal function isHTMLElement(), so we can not mock it directly.\n * this function check if test DOM element mockHTMLElement instance is 'instanceof HTMLElement'\n * so we only override the console.error side effect for this error\n */\nexport const mockConsoleError = (): void => {\n  const errorFunction = console.error;\n  const mock = jest.spyOn(console, 'error');\n  mock.mockImplementation(error => {\n    if (!error.includes('Popper')) errorFunction(error);\n  });\n};\n\n/**\n * Add missing window.frames property to test context\n * usefull for component with iframe listeners, ex: mg-popover\n */\nexport const mockWindowFrames = (): void => {\n  Object.defineProperty(window, 'frames', {\n    value: { length: 0 },\n  });\n};\n"]}

package/dist/components/MgInput.js

@@ -133,3 +133,5 @@ const MgInput = (props, children, utils) => {
 };
 
 export { MgInput as M };
+
+//# sourceMappingURL=MgInput.js.map