@mgdis/mg-components 5.16.0 → 5.18.0

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\n/**\n * Validate string\n * @param value - value to check\n * @returns if string is valid\n */\nexport const isValidString = (value: unknown): boolean => typeof value === 'string' && value.trim() !== '';\n"]}

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

@@ -0,0 +1,128 @@
+import { createID, ClassList, allItemsAreString, isTagName, getWindows, isValidString } 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);
+    });
+  });
+  describe('isValidString', () => {
+    test.each(['', ' ', null, undefined, 1, {}, []])('Should return "false" for invalid values', value => {
+      expect(isValidString(value)).toEqual(false);
+    });
+    test.each(['batman', 'batman '])('Should return "true" for valid value', value => {
+      expect(isValidString(value)).toEqual(true);
+    });
+  });
+});
+//# 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, isValidString } 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  describe('isValidString', () => {\n    test.each(['', ' ', null, undefined, 1, {}, []])('Should return \"false\" for invalid values', value => {\n      expect(isValidString(value)).toEqual(false);\n    });\n\n    test.each(['batman', 'batman '])('Should return \"true\" for valid value', value => {\n      expect(isValidString(value)).toEqual(true);\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":"AAAA,uDAAuD;AACvD,OAAO,EAA2B,IAAI,IAAI,cAAc,EAAE,MAAM,IAAI,gBAAgB,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC7I,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAE5B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,EAAE,IAAU,EAAE,IAAY,EAAE,YAA2B,EAAiB,EAAE;EAC3G,+CAA+C;EAC/C,gDAAgD;EAChD,oFAAoF;EAEpF,MAAM;EACN,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,mCAAmC,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC;EACvG,MAAM,IAAI,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;EAEzC,KAAK;EACL,MAAM,IAAI,CAAC,YAAY,CAAC,EAAE,GAAG,EAAE,kDAAkD,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;EAErG,mBAAmB;EACnB,6FAA6F;EAC7F,sEAAsE;EACtE,MAAM,IAAI,CAAC,UAAU,CAAC,UAAU,GAAG,mFAAmF,IAAI,SAAS,CAAC,CAAC;EAErI,gBAAgB;EAChB,IAAI,YAAY,KAAK,SAAS;IAAE,MAAM,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;EAEzE,iCAAiC;EACjC,MAAM,IAAI,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;EAC3C,MAAM,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;AAC9C,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,gBAAgB,CAAC;AAEvC;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,cAAc,CAAC,QAAQ,CAAC;AAEhD;;GAEG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,cAAc,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,iBAAiB,CAAC;AAEzC;;;;GAIG;AACH,MAAM,aAAa,GAAG,CAAC,KAAc,EAAU,EAAE,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC;AAOnH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAsB,EAAE,MAAwB,EAAE,EAAE,CAAC,CAAC,KAAa,EAAE,EAA4B,EAAE,EAAE;EAChI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;IACpB,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/D,MAAM,EAAE,GAAG,GAAG,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAC3B,IAAI,OAAO,CAAC,MAAM,CAAC;MAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;;MACnD,QAAQ,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;EAClC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAsB,EAAE,MAAwB,EAAE,EAAE,CAAC,CAAC,KAAa,EAAE,EAAqD,EAAE,EAAE;EACrJ,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;IACpB,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/D,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC/C,IAAI,OAAO,CAAC,MAAM,CAAC;MAAE,IAAI,CAAC,MAAM,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;;MAC/C,IAAI,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;EAC9B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,KAAK,EAAE,IAAU,EAAE,MAAe,EAAiB,EAAE,CACxF,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;EACrB,MAAM,GAAG,GAAG,qBAAqB,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC;KACjD,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,KAAK,OAAO,MAAM,CAAC,GAAG,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;KAC3E,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC;EACjB,MAAM,IAAI,GAAG,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;EACtD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;EAC9C,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;EACxB,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AAClD,CAAC,EAAE,MAAM,CAAC,CAAC","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

package/dist/components/MgInput.js.map

@@ -0,0 +1 @@
+{"file":"MgInput.js","mappings":"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","names":[],"sources":["src/components/molecules/inputs/MgInput.conf.ts","src/components/molecules/inputs/MgInput.tsx"],"sourcesContent":["/**\n * Possible input width\n */\nexport const widths = [2, 4, 16, 'full'] as const;\n\nexport type Width = (typeof widths)[number];\n\n/**\n * Possible Input types\n */\n\nexport type HTMLMgInputsElement =\n  | HTMLMgInputCheckboxElement\n  | HTMLMgInputDateElement\n  | HTMLMgInputNumericElement\n  | HTMLMgInputPasswordElement\n  | HTMLMgInputRadioElement\n  | HTMLMgInputSelectElement\n  | HTMLMgInputTextElement\n  | HTMLMgInputTextareaElement\n  | (HTMLMgInputToggleElement & { required: true; invalid: false; displayError: () => void });\n","import { FunctionalComponent, h, VNode, FunctionalUtilities } from '@stencil/core';\nimport { widths, Width } from './MgInput.conf';\nimport { ClassList } from '../../../utils/components.utils';\n\n/**\n * Apply in all input child node the aria-describedby attribute\n * @param children - Represent scoped elements\n * @param ariaDescribedbyIDs - List of IDs\n * @param utils - Stencil.js utils\n * @returns Children with aria-describedby attribute\n */\nconst applyAriadescribedBy = (children: VNode[], ariaDescribedbyIDs: Set<string>, utils: FunctionalUtilities): VNode[] =>\n  utils.map(children, child => {\n    if (['input', 'select', 'textarea'].includes(child.vtag as string)) {\n      return {\n        ...child,\n        vattrs: {\n          ...child.vattrs,\n          'aria-describedby': [...ariaDescribedbyIDs].join(' '),\n        },\n      };\n    }\n\n    // we recursively apply ariadescribedBy attributes to child input nodes if exists\n    if (child.vchildren === null) return { ...child };\n    return {\n      ...child,\n      vchildren: applyAriadescribedBy(child.vchildren, ariaDescribedbyIDs, utils),\n    };\n  });\n\n/**\n * Add classes based on props\n * @param props - MgInput Interface Props\n */\nconst manageClasses = (props: MgInputProps): void => {\n  props.classCollection.add('mg-input');\n\n  if (props.labelOnTop) props.classCollection.add('mg-input--label-on-top');\n  else props.classCollection.delete('mg-input--label-on-top');\n\n  if (props.readonly) props.classCollection.add('mg-input--readonly');\n  else props.classCollection.delete('mg-input--readonly');\n\n  widths.forEach(width => {\n    props.classCollection.delete(`mg-input--width-${width}`);\n  });\n  if (props.mgWidth !== undefined) props.classCollection.add(`mg-input--width-${props.mgWidth}`);\n};\n\n/**\n * Get tagname\n * @param isFieldset - is fieldset\n * @returns tag name\n */\nconst getTagName = (isFieldset: boolean): string => (isFieldset ? 'fieldset' : 'div');\n\n/**\n * MgInput Interface\n */\ninterface MgInputProps {\n  // Global\n  identifier: string;\n  classCollection: ClassList;\n  // Label\n  label: string;\n  labelOnTop: boolean;\n  labelHide: boolean;\n  isFieldset: boolean;\n  // Input\n  value: string;\n  readonlyValue: string;\n  required: boolean;\n  readonly: boolean;\n  mgWidth: Width;\n  disabled: boolean;\n  // Tooltip\n  tooltip: string;\n  // Help Text\n  helpText: string;\n  // Error Message\n  errorMessage: string;\n  // ariaDescribedbyIDs\n  ariaDescribedbyIDs: string[];\n}\n\n/**\n * Get input template\n * @param props - MgInput Interface Props\n * @param children - Represent scoped elements\n * @param utils - Stencil.js utils\n * @returns input template\n */\nexport const MgInput: FunctionalComponent<MgInputProps> = (props: MgInputProps, children: VNode[], utils: FunctionalUtilities): VNode[] => {\n  /**\n   * Check required properties\n   */\n  if (typeof props.identifier !== 'string' || props.identifier.trim() === '') {\n    throw new Error('<mg-input> prop \"identifier\" is required.');\n  }\n  if (typeof props.label !== 'string' || props.label.trim() === '') {\n    throw new Error('<mg-input> prop \"label\" is required.');\n  }\n  if (props.labelOnTop && props.labelHide) {\n    throw new Error('<mg-input> prop \"labelOnTop\" must not be paired with the prop \"labelHide\".');\n  }\n\n  /**\n   * Set readonly value\n   */\n  if (props.readonlyValue === undefined) props.readonlyValue = props.value;\n\n  /**\n   * Component classes\n   */\n  manageClasses(props);\n\n  /**\n   * a11y IDs\n   */\n  const ariaDescribedbyIDs: Set<string> = new Set(props.ariaDescribedbyIDs);\n\n  // Help text\n  const helpTextId = `${props.identifier}-help-text`;\n  if (typeof props.helpText === 'string' && props.helpText !== '') {\n    ariaDescribedbyIDs.add(helpTextId);\n  }\n\n  // Error Message\n  const helpTextErrorId = `${props.identifier}-error`;\n  if (typeof props.errorMessage === 'string' && props.errorMessage !== '') {\n    ariaDescribedbyIDs.add(helpTextErrorId);\n  }\n\n  /**\n   * Return template\n   *\n   * +--------+--------------+---------+\n   * |  label | input        | tooltip |\n   * |        +--------------+---------+\n   * |        | nb Char Left           |\n   * |        +------------------------+\n   * |        | Help Text              |\n   * |        +------------------------+\n   * |        | Error                  |\n   * +--------+------------------------+\n   *\n   * Error message is based on this aria method: https://www.w3.org/WAI/tutorials/forms/notifications/#on-focus-change\n   */\n\n  const TagName: string = getTagName(props.isFieldset);\n\n  /**\n   * Get tooltip node\n   * @returns mg-tooltip\n   */\n  const getTooltip = (): VNode[] => (\n    <mg-tooltip identifier={`${props.identifier}-tooltip`} message={props.tooltip}>\n      <mg-icon icon=\"info-circle\"></mg-icon>\n    </mg-tooltip>\n  );\n\n  /**\n   * Get input title (label) node\n   * Display asterisk only if not disabled and not readonly\n   * @returns mg-input-title\n   */\n  const getInputTitle = (): VNode[] => (\n    <mg-input-title\n      identifier={props.identifier}\n      class={props.labelHide ? 'sr-only' : undefined}\n      required={props.required && !props.disabled && !props.readonly}\n      is-legend={props.isFieldset}\n    >\n      {props.label}\n    </mg-input-title>\n  );\n\n  return (\n    <TagName class={props.classCollection.join()}>\n      {props.labelOnTop ? (\n        <div class=\"mg-input__title\">\n          {getInputTitle()}\n          {!props.readonly && props.tooltip && getTooltip()}\n        </div>\n      ) : (\n        getInputTitle()\n      )}\n      {props.readonly ? (\n        <div class=\"mg-input__input-container\">\n          <strong>{props.readonlyValue}</strong>\n          {children.filter(child => child.$name$ === 'append-input')}\n        </div>\n      ) : (\n        <div class=\"mg-input__input-container\">\n          <div class={{ 'mg-input__input': true, 'mg-input__input--has-error': props.errorMessage !== undefined }}>\n            {applyAriadescribedBy(children, ariaDescribedbyIDs, utils)}\n            {!props.labelOnTop && props.tooltip && getTooltip()}\n          </div>\n          {props.helpText && <div id={helpTextId} class=\"mg-input__help-text\" innerHTML={props.helpText}></div>}\n          {props.errorMessage && !props.readonly && !props.disabled && (\n            <div id={helpTextErrorId} class=\"mg-input__error\" innerHTML={props.errorMessage} aria-live=\"assertive\"></div>\n          )}\n        </div>\n      )}\n    </TagName>\n  );\n};\n"],"version":3}

package/dist/components/components.utils.js

@@ -126,5 +126,13 @@ const getChildWindows = (localWindow, windows = []) => {
   }
   return windows;
 };
+/**
+ * Validate string
+ * @param value - value to check
+ * @returns if string is valid
+ */
+const isValidString = (value) => typeof value === 'string' && value.trim() !== '';
+
+export { ClassList as C, allItemsAreString as a, isValidString as b, createID as c, focusableElements as f, getWindows as g, isTagName as i };
 
-export { ClassList as C, allItemsAreString as a, createID as c, focusableElements as f, getWindows as g, isTagName as i };
+//# sourceMappingURL=components.utils.js.map

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

@@ -0,0 +1 @@
+{"file":"components.utils.js","mappings":"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","names":[],"sources":["src/utils/components.utils.ts"],"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\n/**\n * Validate string\n * @param value - value to check\n * @returns if string is valid\n */\nexport const isValidString = (value: unknown): boolean => typeof value === 'string' && value.trim() !== '';\n"],"version":3}