@mgdis/mg-components 5.19.2 → 5.20.0

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

@@ -1 +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\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"]}
+{"version":3,"file":"unit.test.utils.js","sourceRoot":"","sources":["../../src/utils/unit.test.utils.ts"],"names":[],"mappings":"AAAA,wCAAwC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,GAAY,EAAW,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;AAuBpF,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAmC,EAA2B,EAAE;IAC1I,MAAM,oBAAoB;QAKxB,YAAY,EAAE;YAJd,eAAU,GAAe,UAAU,CAAC;YACpC,YAAO,GAA2D,OAAO,CAAC;YAC1E,gBAAW,GAA2B,WAAW,CAAC;YAGhD,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACf,CAAC;KACF;IAED,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;QACjC,MAAM,CAAC,cAAc,CAAC,OAAO,EAAE,kBAAkB,EAAE;YACjD,QAAQ,EAAE,IAAI;YACd,YAAY,EAAE,IAAI;YAClB,KAAK,EAAE,oBAAoB;SAC5B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,OAAO,oBAAoB,CAAC;AAC9B,CAAC,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,UAAU,EAAE,OAAO,EAAiC,EAAyB,EAAE;IACvH,MAAM,kBAAkB;QAKtB,YAAY,EAAE;YAJd,eAAU,GAAe,UAAU,CAAC;YACpC,YAAO,GAA+D,OAAO,CAAC;YAI5E,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACf,CAAC;KACF;IAED,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;QACjC,MAAM,CAAC,cAAc,CAAC,OAAO,EAAE,gBAAgB,EAAE;YAC/C,QAAQ,EAAE,IAAI;YACd,YAAY,EAAE,IAAI;YAClB,KAAK,EAAE,kBAAkB;SAC1B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,OAAO,kBAAkB,CAAC;AAC5B,CAAC,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAA2B,EAAE;IAC/D,MAAM,WAAY,SAAQ,eAAe;KAAG;IAE5C,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;QACjC,MAAM,CAAC,cAAc,CAAC,OAAO,EAAE,aAAa,EAAE;YAC5C,QAAQ,EAAE,IAAI;YACd,YAAY,EAAE,IAAI;YAClB,KAAK,EAAE,WAAW;SACnB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,SAAkB,EAAE,EAAU,EAAE,kBAAkB,GAAG,QAAQ,EAAQ,EAAE;IACpG,MAAM,OAAO,GAAG,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IACjE,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACnE,SAAS,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;KAC1F;AACH,CAAC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAS,EAAE;IACzC,MAAM,aAAa,GAAG,OAAO,CAAC,KAAK,CAAC;IACpC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAC1C,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE;QAC9B,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC;YAAE,aAAa,CAAC,KAAK,CAAC,CAAC;IACtD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAS,EAAE;IACzC,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE,QAAQ,EAAE;QACtC,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;KACrB,CAAC,CAAC;AACL,CAAC,CAAC","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\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

@@ -5,6 +5,14 @@ import { i as isValidString } from './components.utils.js';
  * Possible input width
  */
 const widths = [2, 4, 16, 'full'];
+/**
+ * Available handlers
+ */
+var Handler;
+(function (Handler) {
+    Handler["BLUR"] = "blur";
+    Handler["FOCUS"] = "focus";
+})(Handler || (Handler = {}));
 
 /**
  * Apply in all input child node the aria-describedby attribute
@@ -14,33 +22,33 @@ const widths = [2, 4, 16, 'full'];
  * @returns Children with aria-describedby attribute
  */
 const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(children, child => {
-  if (['input', 'select', 'textarea'].includes(child.vtag)) {
-    return Object.assign(Object.assign({}, child), { vattrs: Object.assign(Object.assign({}, child.vattrs), { 'aria-describedby': [...ariaDescribedbyIDs].join(' ') }) });
-  }
-  // we recursively apply ariadescribedBy attributes to child input nodes if exists
-  if (child.vchildren === null)
-    return Object.assign({}, child);
-  return Object.assign(Object.assign({}, child), { vchildren: applyAriadescribedBy(child.vchildren, ariaDescribedbyIDs, utils) });
+    if (['input', 'select', 'textarea'].includes(child.vtag)) {
+        return Object.assign(Object.assign({}, child), { vattrs: Object.assign(Object.assign({}, child.vattrs), { 'aria-describedby': [...ariaDescribedbyIDs].join(' ') }) });
+    }
+    // we recursively apply ariadescribedBy attributes to child input nodes if exists
+    if (child.vchildren === null)
+        return Object.assign({}, child);
+    return Object.assign(Object.assign({}, child), { vchildren: applyAriadescribedBy(child.vchildren, ariaDescribedbyIDs, utils) });
 });
 /**
  * Add classes based on props
  * @param props - MgInput Interface Props
  */
 const manageClasses = (props) => {
-  props.classCollection.add('mg-c-input');
-  if (props.labelOnTop)
-    props.classCollection.add('mg-c-input--label-on-top');
-  else
-    props.classCollection.delete('mg-c-input--label-on-top');
-  if (props.readonly)
-    props.classCollection.add('mg-c-input--readonly');
-  else
-    props.classCollection.delete('mg-c-input--readonly');
-  widths.forEach(width => {
-    props.classCollection.delete(`mg-c-input--width-${width}`);
-  });
-  if (props.mgWidth !== undefined)
-    props.classCollection.add(`mg-c-input--width-${props.mgWidth}`);
+    props.classCollection.add('mg-c-input');
+    if (props.labelOnTop)
+        props.classCollection.add('mg-c-input--label-on-top');
+    else
+        props.classCollection.delete('mg-c-input--label-on-top');
+    if (props.readonly)
+        props.classCollection.add('mg-c-input--readonly');
+    else
+        props.classCollection.delete('mg-c-input--readonly');
+    widths.forEach(width => {
+        props.classCollection.delete(`mg-c-input--width-${width}`);
+    });
+    if (props.mgWidth !== undefined)
+        props.classCollection.add(`mg-c-input--width-${props.mgWidth}`);
 };
 /**
  * Get tagname
@@ -56,83 +64,83 @@ const getTagName = (isFieldset, readOnly) => (!isFieldset || readOnly ? 'div' :
  * @returns input template
  */
 const MgInput = (props, children, utils) => {
-  /**
-   * Check required properties
-   */
-  if (!isValidString(props.identifier)) {
-    throw new Error('<mg-input> prop "identifier" is required.');
-  }
-  if (!isValidString(props.label)) {
-    throw new Error('<mg-input> prop "label" is required.');
-  }
-  if (props.labelOnTop && props.labelHide) {
-    throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide".');
-  }
-  /**
-   * Set readonly value
-   */
-  if (props.readonlyValue === undefined)
-    props.readonlyValue = props.value;
-  /**
-   * Component classes
-   */
-  manageClasses(props);
-  /**
-   * a11y IDs
-   */
-  const ariaDescribedbyIDs = new Set(props.ariaDescribedbyIDs);
-  // Help text
-  const helpTextId = `${props.identifier}-help-text`;
-  if (typeof props.helpText === 'string' && props.helpText !== '') {
-    ariaDescribedbyIDs.add(helpTextId);
-  }
-  // Error Message
-  const helpTextErrorId = `${props.identifier}-error`;
-  if (typeof props.errorMessage === 'string' && props.errorMessage !== '') {
-    ariaDescribedbyIDs.add(helpTextErrorId);
-  }
-  /**
-   * Return template
-   *
-   * +--------+--------------+---------+
-   * |  label | input        | tooltip |
-   * |        +--------------+---------+
-   * |        | nb Char Left           |
-   * |        +------------------------+
-   * |        | Help Text              |
-   * |        +------------------------+
-   * |        | Error                  |
-   * +--------+------------------------+
-   *
-   * Error message is based on this aria method: https://www.w3.org/WAI/tutorials/forms/notifications/#on-focus-change
-   */
-  const TagName = getTagName(props.isFieldset, props.readonly);
-  /**
-   * Get tooltip node
-   * @returns mg-tooltip
-   */
-  const getTooltip = () => (h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip },
-    h("mg-icon", { icon: "info-circle" })));
-  /**
-   * Get input title (label) node
-   * Display asterisk only if not disabled and not readonly
-   * @returns mg-input-title
-   */
-  const getInputTitle = () => (h("mg-input-title", { identifier: props.identifier, readonly: props.readonly, class: props.labelHide ? 'mg-u-visually-hidden' : undefined, required: props.required && !props.disabled && !props.readonly, "is-legend": props.isFieldset }, props.label));
-  return (h(TagName, { class: props.classCollection.join() },
-    props.labelOnTop ? (h("div", { class: "mg-c-input__title" },
-      getInputTitle(),
-      !props.readonly && props.tooltip && getTooltip())) : (getInputTitle()),
-    props.readonly ? (h("div", { class: "mg-c-input__input-container" },
-      h("strong", null, props.readonlyValue),
-      children.filter(child => Object.values(child).includes('append-input')))) : (h("div", { class: "mg-c-input__input-container" },
-      h("div", { class: { 'mg-c-input__input': true, 'mg-c-input__input--has-error': props.errorMessage !== undefined } },
-        applyAriadescribedBy(children, ariaDescribedbyIDs, utils),
-        !props.labelOnTop && props.tooltip && getTooltip()),
-      props.helpText && h("div", { id: helpTextId, class: "mg-c-input__help-text", innerHTML: props.helpText }),
-      props.errorMessage && !props.readonly && !props.disabled && (h("div", { id: helpTextErrorId, class: "mg-c-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" }))))));
+    /**
+     * Check required properties
+     */
+    if (!isValidString(props.identifier)) {
+        throw new Error('<mg-input> prop "identifier" is required.');
+    }
+    if (!isValidString(props.label)) {
+        throw new Error('<mg-input> prop "label" is required.');
+    }
+    if (props.labelOnTop && props.labelHide) {
+        throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide".');
+    }
+    /**
+     * Set readonly value
+     */
+    if (props.readonlyValue === undefined)
+        props.readonlyValue = props.value;
+    /**
+     * Component classes
+     */
+    manageClasses(props);
+    /**
+     * a11y IDs
+     */
+    const ariaDescribedbyIDs = new Set(props.ariaDescribedbyIDs);
+    // Help text
+    const helpTextId = `${props.identifier}-help-text`;
+    if (typeof props.helpText === 'string' && props.helpText !== '') {
+        ariaDescribedbyIDs.add(helpTextId);
+    }
+    // Error Message
+    const helpTextErrorId = `${props.identifier}-error`;
+    if (typeof props.errorMessage === 'string' && props.errorMessage !== '') {
+        ariaDescribedbyIDs.add(helpTextErrorId);
+    }
+    /**
+     * Return template
+     *
+     * +--------+--------------+---------+
+     * |  label | input        | tooltip |
+     * |        +--------------+---------+
+     * |        | nb Char Left           |
+     * |        +------------------------+
+     * |        | Help Text              |
+     * |        +------------------------+
+     * |        | Error                  |
+     * +--------+------------------------+
+     *
+     * Error message is based on this aria method: https://www.w3.org/WAI/tutorials/forms/notifications/#on-focus-change
+     */
+    const TagName = getTagName(props.isFieldset, props.readonly);
+    /**
+     * Get tooltip node
+     * @returns mg-tooltip
+     */
+    const getTooltip = () => (h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip },
+        h("mg-icon", { icon: "info-circle" })));
+    /**
+     * Get input title (label) node
+     * Display asterisk only if not disabled and not readonly
+     * @returns mg-input-title
+     */
+    const getInputTitle = () => (h("mg-input-title", { identifier: props.identifier, readonly: props.readonly, class: props.labelHide ? 'mg-u-visually-hidden' : undefined, required: props.required && !props.disabled && !props.readonly, "is-legend": props.isFieldset }, props.label));
+    return (h(TagName, { class: props.classCollection.join() },
+        props.labelOnTop ? (h("div", { class: "mg-c-input__title" },
+            getInputTitle(),
+            !props.readonly && props.tooltip && getTooltip())) : (getInputTitle()),
+        props.readonly ? (h("div", { class: "mg-c-input__input-container" },
+            h("strong", null, props.readonlyValue),
+            children.filter(child => Object.values(child).includes('append-input')))) : (h("div", { class: "mg-c-input__input-container" },
+            h("div", { class: { 'mg-c-input__input': true, 'mg-c-input__input--has-error': props.errorMessage !== undefined } },
+                applyAriadescribedBy(children, ariaDescribedbyIDs, utils),
+                !props.labelOnTop && props.tooltip && getTooltip()),
+            props.helpText && h("div", { id: helpTextId, class: "mg-c-input__help-text", innerHTML: props.helpText }),
+            props.errorMessage && !props.readonly && !props.disabled && (h("div", { id: helpTextErrorId, class: "mg-c-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" }))))));
 };
 
-export { MgInput as M };
+export { Handler as H, MgInput as M };
 
 //# sourceMappingURL=MgInput.js.map

package/dist/components/MgInput.js.map

@@ -1 +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, isValidString } 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-c-input');\n\n  if (props.labelOnTop) props.classCollection.add('mg-c-input--label-on-top');\n  else props.classCollection.delete('mg-c-input--label-on-top');\n\n  if (props.readonly) props.classCollection.add('mg-c-input--readonly');\n  else props.classCollection.delete('mg-c-input--readonly');\n\n  widths.forEach(width => {\n    props.classCollection.delete(`mg-c-input--width-${width}`);\n  });\n  if (props.mgWidth !== undefined) props.classCollection.add(`mg-c-input--width-${props.mgWidth}`);\n};\n\n/**\n * Get tagname\n * @param isFieldset - is fieldset\n * @returns tag name\n */\nconst getTagName = (isFieldset: MgInputProps['isFieldset'], readOnly: MgInputProps['readonly']): string => (!isFieldset || readOnly ? 'div' : 'fieldset');\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 (!isValidString(props.identifier)) {\n    throw new Error('<mg-input> prop \"identifier\" is required.');\n  }\n  if (!isValidString(props.label)) {\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 = getTagName(props.isFieldset, props.readonly);\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      readonly={props.readonly}\n      class={props.labelHide ? 'mg-u-visually-hidden' : 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-c-input__title\">\n          {getInputTitle()}\n          {!props.readonly && props.tooltip && getTooltip()}\n        </div>\n      ) : (\n        getInputTitle()\n      )}\n      {props.readonly ? (\n        <div class=\"mg-c-input__input-container\">\n          <strong>{props.readonlyValue}</strong>\n          {children.filter(child => Object.values(child).includes('append-input'))}\n        </div>\n      ) : (\n        <div class=\"mg-c-input__input-container\">\n          <div class={{ 'mg-c-input__input': true, 'mg-c-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-c-input__help-text\" innerHTML={props.helpText}></div>}\n          {props.errorMessage && !props.readonly && !props.disabled && (\n            <div id={helpTextErrorId} class=\"mg-c-input__error\" innerHTML={props.errorMessage} aria-live=\"assertive\"></div>\n          )}\n        </div>\n      )}\n    </TagName>\n  );\n};\n"],"version":3}
+{"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\n/**\n * Available handlers\n */\nexport enum Handler {\n  BLUR = 'blur',\n  FOCUS = 'focus',\n}\n","import { FunctionalComponent, h, VNode, FunctionalUtilities } from '@stencil/core';\nimport { widths, Width } from './MgInput.conf';\nimport { ClassList, isValidString } from '../../../utils/components.utils';\nimport { MgInputTitle } from '../../atoms/mg-input-title/mg-input-title';\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-c-input');\n\n  if (props.labelOnTop) props.classCollection.add('mg-c-input--label-on-top');\n  else props.classCollection.delete('mg-c-input--label-on-top');\n\n  if (props.readonly) props.classCollection.add('mg-c-input--readonly');\n  else props.classCollection.delete('mg-c-input--readonly');\n\n  widths.forEach(width => {\n    props.classCollection.delete(`mg-c-input--width-${width}`);\n  });\n  if (props.mgWidth !== undefined) props.classCollection.add(`mg-c-input--width-${props.mgWidth}`);\n};\n\n/**\n * Get tagname\n * @param isFieldset - is fieldset\n * @returns tag name\n */\nconst getTagName = (isFieldset: MgInputProps['isFieldset'], readOnly: MgInputProps['readonly']): string => (!isFieldset || readOnly ? 'div' : 'fieldset');\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: MgInputTitle['isLegend'];\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 (!isValidString(props.identifier)) {\n    throw new Error('<mg-input> prop \"identifier\" is required.');\n  }\n  if (!isValidString(props.label)) {\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 = getTagName(props.isFieldset, props.readonly);\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      readonly={props.readonly}\n      class={props.labelHide ? 'mg-u-visually-hidden' : 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-c-input__title\">\n          {getInputTitle()}\n          {!props.readonly && props.tooltip && getTooltip()}\n        </div>\n      ) : (\n        getInputTitle()\n      )}\n      {props.readonly ? (\n        <div class=\"mg-c-input__input-container\">\n          <strong>{props.readonlyValue}</strong>\n          {children.filter(child => Object.values(child).includes('append-input'))}\n        </div>\n      ) : (\n        <div class=\"mg-c-input__input-container\">\n          <div class={{ 'mg-c-input__input': true, 'mg-c-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-c-input__help-text\" innerHTML={props.helpText}></div>}\n          {props.errorMessage && !props.readonly && !props.disabled && (\n            <div id={helpTextErrorId} class=\"mg-c-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

@@ -5,60 +5,56 @@
  * @returns ID
  */
 const createID = (prefix = '', length = 10) => {
-  const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
-  const charsLength = chars.length;
-  let ID = '';
-  let now = Date.now();
-  while (length > 0) {
-    now += Math.pow(10, 6); // Add 1 millisecond to the timestamp
-    const index = now % charsLength;
-    ID += chars.charAt(index);
-    length--;
-  }
-  return (prefix !== '' ? `${prefix}-` : '') + ID;
+    const randomBytes = new Uint8Array(length);
+    crypto.getRandomValues(randomBytes);
+    const hexString = Array.from(randomBytes)
+        .map(byte => byte.toString(16).padStart(2, '0'))
+        .join('')
+        .slice(0, length);
+    return prefix !== '' ? `${prefix}-${hexString}` : hexString;
 };
 /**
  * Class to manage component classlist
  * Set() are not working when imported in project
  */
 class ClassList {
-  constructor(classlist = []) {
-    /**
-     * Add class
-     * @param className - class name to add
-     */
-    this.add = (className) => {
-      if (!this.has(className)) {
-        this.classes.push(className);
-      }
-    };
-    /**
-     * Delete class
-     * @param className - class name to delete
-     */
-    this.delete = (className) => {
-      const index = this.classes.indexOf(className);
-      if (index > -1) {
-        this.classes.splice(index, 1);
-      }
-    };
-    /**
-     * Check if class exist in list
-     * @param className - class name to check
-     * @returns class name is in the list
-     */
-    this.has = (className) => {
-      return this.classes.includes(className);
-    };
-    /**
-     * Join classes seperated by spaces
-     * @returns joined values
-     */
-    this.join = () => {
-      return this.classes.join(' ');
-    };
-    this.classes = classlist;
-  }
+    constructor(classlist = []) {
+        /**
+         * Add class
+         * @param className - class name to add
+         */
+        this.add = (className) => {
+            if (!this.has(className)) {
+                this.classes.push(className);
+            }
+        };
+        /**
+         * Delete class
+         * @param className - class name to delete
+         */
+        this.delete = (className) => {
+            const index = this.classes.indexOf(className);
+            if (index > -1) {
+                this.classes.splice(index, 1);
+            }
+        };
+        /**
+         * Check if class exist in list
+         * @param className - class name to check
+         * @returns class name is in the list
+         */
+        this.has = (className) => {
+            return this.classes.includes(className);
+        };
+        /**
+         * Join classes seperated by spaces
+         * @returns joined values
+         */
+        this.join = () => {
+            return this.classes.join(' ');
+        };
+        this.classes = classlist;
+    }
 }
 /**
  * Check if all items are string
@@ -73,7 +69,7 @@ const allItemsAreString = (items) => Array.isArray(items) && items.every(item =>
  * @returns element is a heading
  */
 const isTagName = (element, tagNames) => {
-  return tagNames.includes(element === null || element === void 0 ? void 0 : element.tagName.toLowerCase());
+    return tagNames.includes(element === null || element === void 0 ? void 0 : element.tagName.toLowerCase());
 };
 /**
  * Focusable elements query selector
@@ -85,9 +81,9 @@ const focusableElements = 'a[href], button, input, textarea, select, details, [t
  * @returns The list of windows found
  */
 const getWindows = (localWindow) => {
-  const parentWindows = getParentWindows(localWindow);
-  const childWindows = getChildWindows(localWindow);
-  return [localWindow, ...parentWindows, ...childWindows];
+    const parentWindows = getParentWindows(localWindow);
+    const childWindows = getChildWindows(localWindow);
+    return [localWindow, ...parentWindows, ...childWindows];
 };
 /**
  * Get parent windows
@@ -96,20 +92,20 @@ const getWindows = (localWindow) => {
  * @returns The list of windows found
  */
 const getParentWindows = (localWindow, windows = []) => {
-  // Check if is in iframe
-  if (localWindow.self !== localWindow.top) {
-    // Check if we have permission to access parent
-    try {
-      const parentWindow = localWindow.parent;
-      windows.push(parentWindow);
-      return getParentWindows(parentWindow, windows);
-    }
-    catch (err) {
-      console.error('Different hosts between iframes:', err);
-      return windows;
+    // Check if is in iframe
+    if (localWindow.self !== localWindow.top) {
+        // Check if we have permission to access parent
+        try {
+            const parentWindow = localWindow.parent;
+            windows.push(parentWindow);
+            return getParentWindows(parentWindow, windows);
+        }
+        catch (err) {
+            console.error('Different hosts between iframes:', err);
+            return windows;
+        }
     }
-  }
-  return windows;
+    return windows;
 };
 /**
  * Get child windows
@@ -118,13 +114,13 @@ const getParentWindows = (localWindow, windows = []) => {
  * @returns The list of windows found
  */
 const getChildWindows = (localWindow, windows = []) => {
-  if (localWindow.frames.length > 0) {
-    for (const childWindow of Array.from(localWindow.frames)) {
-      windows.push(childWindow);
-      getChildWindows(childWindow, windows);
+    if (localWindow.frames.length > 0) {
+        for (const childWindow of Array.from(localWindow.frames)) {
+            windows.push(childWindow);
+            getChildWindows(childWindow, windows);
+        }
     }
-  }
-  return windows;
+    return windows;
 };
 /**
  * Validate string
@@ -138,11 +134,17 @@ const isValidString = (value) => typeof value === 'string' && value.trim() !== '
  * @returns cleanded string
  */
 const cleanString = (text) => typeof text === 'string' &&
-  text
-    .toLocaleLowerCase()
-    .normalize('NFD')
-    .replaceAll(/[\u0300-\u036f]/g, '');
+    text
+        .toLocaleLowerCase()
+        .normalize('NFD')
+        .replaceAll(/[\u0300-\u036f]/g, '');
+/**
+ * Use to process code next tick in the event loop
+ * @param callback - code to excute on next tick
+ * @returns differed code excution
+ */
+const nextTick = async (callback) => callback();
 
-export { ClassList as C, isTagName as a, cleanString as b, createID as c, allItemsAreString as d, focusableElements as f, getWindows as g, isValidString as i };
+export { ClassList as C, isTagName as a, cleanString as b, createID as c, allItemsAreString as d, focusableElements as f, getWindows as g, isValidString as i, nextTick as n };
 
 //# sourceMappingURL=components.utils.js.map

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

@@ -1 +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\n/**\n * Clean string caraters\n * @param text - text to cliean\n * @returns cleanded string\n */\nexport const cleanString = (text: string): string =>\n  typeof text === 'string' &&\n  text\n    .toLocaleLowerCase()\n    .normalize('NFD')\n    .replaceAll(/[\\u0300-\\u036f]/g, '');\n"],"version":3}
+{"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 randomBytes = new Uint8Array(length);\n\n  crypto.getRandomValues(randomBytes);\n\n  const hexString = Array.from(randomBytes)\n    .map(byte => byte.toString(16).padStart(2, '0'))\n    .join('')\n    .slice(0, length);\n\n  return prefix !== '' ? `${prefix}-${hexString}` : hexString;\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\n/**\n * Clean string caraters\n * @param text - text to cliean\n * @returns cleanded string\n */\nexport const cleanString = (text: string): string =>\n  typeof text === 'string' &&\n  text\n    .toLocaleLowerCase()\n    .normalize('NFD')\n    .replaceAll(/[\\u0300-\\u036f]/g, '');\n\n/**\n * Use to process code next tick in the event loop\n * @param callback - code to excute on next tick\n * @returns differed code excution\n */\nexport const nextTick = async (callback: () => void): Promise<void> => callback();\n"],"version":3}