@mgdis/mg-components 5.26.0 → 5.27.1

package/dist/cjs/mg-item-more.cjs.entry.js

@@ -1,272 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-0a2783ee.js');
-const index$1 = require('./index-c585c382.js');
-const mgMenu_conf = require('./mg-menu.conf-c291eee6.js');
-
-/**
- * MgItemMore type guard
- * @param element - element to control type
- * @returns truthy if element is mg-item-more
- */
-const isMgItemMore = (element) => element.nodeName === 'MG-ITEM-MORE';
-var OverflowBehaviorElements;
-(function (OverflowBehaviorElements) {
-    OverflowBehaviorElements["BASE_INDEX"] = "data-overflow-base-index";
-    OverflowBehaviorElements["PROXY_INDEX"] = "data-overflow-proxy-index";
-})(OverflowBehaviorElements || (OverflowBehaviorElements = {}));
-class OverflowBehavior {
-    constructor(element, render) {
-        this.element = element;
-        this.render = render;
-        /**********
-         * Public *
-         **********/
-        /**
-         * Disconnect ResizeObserver
-         */
-        this.disconnect = () => {
-            this._resizeObserver.disconnect();
-        };
-        /************
-         * Internal *
-         ************/
-        /**
-         * run overflow behavior
-         * @param width - width of the container. Optional.
-         */
-        this.run = (width) => {
-            if (this._moreElement === undefined) {
-                // set moreElement
-                this._moreElement = this.render();
-                // set children
-                this._baseChildren = this.getInteractiveItems(this.element);
-                if (isMgItemMore(this._moreElement)) {
-                    this._proxyChildren = this.getInteractiveItems(this._moreElement.shadowRoot.querySelector('mg-menu'));
-                }
-                // update children
-                this._baseChildren.forEach((child, index) => {
-                    child.setAttribute(OverflowBehaviorElements.BASE_INDEX, `${index}`);
-                    // set moreElement children
-                    this._proxyChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);
-                });
-            }
-            if (width !== undefined)
-                this.updateDisplayedItems(width);
-        };
-        /**
-         * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']
-         * @param element - element to parse
-         * @returns children
-         */
-        this.getInteractiveItems = (element) => { var _a; return (((_a = element.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName)); };
-        /**
-         * Update displayed items in container from a given available space
-         * @param availableWidth - available width in container to display child items
-         */
-        this.updateDisplayedItems = (availableWidth) => {
-            this.restoreItems();
-            const acc = { accWidth: 0, previousItem: null };
-            [...this._baseChildren, this._moreElement].forEach((child) => {
-                acc.accWidth += child.offsetWidth;
-                const hasPreviuosItem = acc.previousItem !== null;
-                const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.getAttribute('hidden') !== null;
-                // if previous item is hidden AND is NOT more element we hidde current
-                // OR if item has an overflow we hidde current
-                // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item
-                // ELSE current is a display item
-                this.toggleItem(child, (isPreviousItemHidden && !this.isMoreElement(child)) || this.isOverflowElement(acc.accWidth, child, availableWidth) || (this.isMoreElement(child) && !isPreviousItemHidden));
-                // update previous item with current item
-                acc.previousItem = child;
-            });
-        };
-        /**
-         * Utility method to know if item overflow partialy or totaly in the container
-         * @param cumulateWidth - previous sibling elements cumulate width + item width
-         * @param item - item HTML element
-         * @param availableWidth - container available width
-         * @returns truthy if element is overflow
-         */
-        this.isOverflowElement = (cumulateWidth, item, availableWidth) => {
-            if (item.previousElementSibling === null || this.isMoreElement(item))
-                return false;
-            else if (!this.isMoreElement(item.nextElementSibling))
-                return cumulateWidth + this._moreElement.offsetWidth > availableWidth;
-            else
-                return cumulateWidth > availableWidth;
-        };
-        /**
-         * Utility method to know if a given element is the 'MORE' element
-         * @param element - element to match with 'MORE' element
-         * @returns truthy if element is the 'MORE' element
-         */
-        this.isMoreElement = (element) => element.nodeName === 'MG-ITEM-MORE';
-        /**
-         * Toggle display item element
-         * @param item - item to control
-         * @param isHidden - is item hidden
-         */
-        this.toggleItem = (item, isHidden) => {
-            const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));
-            if (this.isMoreElement(item))
-                this.toggleElement(this._moreElement, isHidden);
-            else if (mgActionMenuindex >= 0) {
-                this.toggleElement(item, isHidden);
-                this.toggleElement(this._proxyChildren[mgActionMenuindex], !isHidden);
-            }
-        };
-        /**
-         * Toggle element's hidde attribute
-         * @param element - element to toggle
-         * @param isHidden - element is hidden
-         */
-        this.toggleElement = (element, isHidden) => {
-            if (isHidden)
-                element.setAttribute('hidden', '');
-            else
-                element.removeAttribute('hidden');
-        };
-        /**
-         * Remove hidden attributes on all items
-         */
-        this.restoreItems = () => {
-            [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));
-        };
-        if (this._resizeObserver === undefined) {
-            // add resize observer
-            this._resizeObserver = new ResizeObserver(entries => {
-                entries.forEach(entry => {
-                    this.run(entry.contentRect.width);
-                });
-            });
-            this._resizeObserver.observe(this.element);
-        }
-        this.run();
-    }
-}
-
-const mgItemMoreCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host:not([hidden]){display:flex}";
-const MgItemMoreStyle0 = mgItemMoreCss;
-
-const MgItemMore = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /************
-         * Internal *
-         ************/
-        this.name = 'mg-item-more';
-        this.canRenderMgMenuItemOverflowElement = true;
-        /***********
-         * Methods *
-         ***********/
-        /**
-         * render mg-item-more overflow element
-         * @returns mg-item-more element
-         */
-        this.renderMgMenuItemOverflowElement = () => {
-            // create menu items proxy element from item clones
-            this.parentMenuItems.forEach((child) => {
-                this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));
-            });
-            const allMenuItem = Array.from(this.parentMenu.querySelectorAll('mg-menu-item:not([data-overflow-more])'));
-            Array.from(this.moreElementMenuItem.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {
-                // manage click on proxy to mirror it on initial element
-                proxy.addEventListener('click', () => {
-                    // be carefull to use element.click() method instead of dispatchEvent to ensure bubbles outside shadowDom
-                    const navElement = allMenuItem[index].shadowRoot.querySelector('a, button');
-                    if (navElement instanceof HTMLButtonElement || navElement instanceof HTMLAnchorElement)
-                        navElement.click();
-                });
-                // add id suffix to prevent duplicate key. default html id is: '';
-                if (index$1.Be(proxy.id))
-                    proxy.id = `${proxy.id}-proxy`;
-                // manage status change miror in proxy
-                allMenuItem[index].addEventListener('status-change', (event) => {
-                    proxy.setAttribute('status', event.detail);
-                });
-            });
-            return this.element;
-        };
-        this.icon = { icon: 'ellipsis-vertical' };
-        this.slotlabel = { display: false };
-        this.size = undefined;
-        this.parentMenu = undefined;
-    }
-    validateIcon(newValue) {
-        if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))
-            throw new Error(`<${this.name}> prop "icon" must match MgItemMore['icon'] type.`);
-    }
-    validateSlotLabel(newValue) {
-        if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))
-            throw new Error(`<${this.name}> prop "slotlabel" must match MgItemMore['slotlabel'] type.`);
-        else if (typeof newValue.label !== 'string')
-            this.slotlabel.label = this.messages.moreLabel;
-    }
-    validateSize(newValue) {
-        if (newValue && typeof newValue !== 'string')
-            throw new Error(`<${this.name}> prop "size" must match MgItemMore['size'] type.`);
-    }
-    /*************
-     * Lifecycle *
-     *************/
-    /**
-     * Set variables and validate props
-     */
-    componentWillLoad() {
-        // init variables
-        this.messages = index$1.initLocales(this.element).messages.plusMenu;
-        // validate props
-        this.validateIcon(this.icon);
-        this.validateSlotLabel(this.slotlabel);
-        this.validateSize(this.size);
-    }
-    /**
-     * Ensure parent DOM is fully rendered with timeout method before parse elements
-     */
-    componentDidLoad() {
-        // ensure parent menu is fully rendered
-        return setTimeout(() => {
-            this.parentMenu = this.element.closest('mg-menu');
-        });
-    }
-    /**
-     * Set OverflowBehavior when parentMenu state is upate AND defined
-     */
-    componentDidUpdate() {
-        if (this.parentMenu && this.canRenderMgMenuItemOverflowElement) {
-            this.parentMenuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM');
-            this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);
-            this.canRenderMgMenuItemOverflowElement = false;
-        }
-    }
-    /**
-     * Disconnect overflow ResizeObserver
-     */
-    disconnectedCallback() {
-        var _a;
-        (_a = this.overflowBehavior) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    /**
-     * Render
-     * @returns HTML Element
-     */
-    render() {
-        return (index.h(index.Host, { key: '2dfe9d844f42403de5120e0db85f3617d9d580a8', role: "listitem" }, this.parentMenu && (index.h("mg-menu-item", { "data-overflow-more": true, "data-size": this.parentMenu.size, ref: el => {
-                if (el)
-                    this.moreElementMenuItem = el;
-            } }, index.h("mg-icon", { icon: this.icon.icon, slot: "image" }), index.h("span", { class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), index.h("mg-menu", { direction: mgMenu_conf.Direction.VERTICAL, label: this.messages.moreLabel, size: this.size })))));
-    }
-    get element() { return index.getElement(this); }
-    static get watchers() { return {
-        "icon": ["validateIcon"],
-        "slotlabel": ["validateSlotLabel"],
-        "size": ["validateSize"]
-    }; }
-};
-MgItemMore.style = MgItemMoreStyle0;
-
-exports.mg_item_more = MgItemMore;
-
-//# sourceMappingURL=mg-item-more.cjs.entry.js.map

package/dist/cjs/mg-item-more.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"mg-item-more.entry.cjs.js","mappings":"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","names":["isValidString","initLocales","h","Host","Direction"],"sources":["src/utils/behaviors.utils.ts","../styles/dist/components/mg-item-more.css?tag=mg-item-more&encapsulation=shadow","src/components/molecules/mg-item-more/mg-item-more.tsx"],"sourcesContent":["/**\n * MgItemMore type guard\n * @param element - element to control type\n * @returns truthy if element is mg-item-more\n */\nconst isMgItemMore = (element: HTMLElement): element is HTMLMgItemMoreElement => element.nodeName === 'MG-ITEM-MORE';\n\nexport enum OverflowBehaviorElements {\n  BASE_INDEX = 'data-overflow-base-index',\n  PROXY_INDEX = 'data-overflow-proxy-index',\n}\n\nexport class OverflowBehavior {\n  // variables\n  private _resizeObserver: ResizeObserver;\n  private _moreElement: HTMLElement;\n  private _baseChildren: Element[];\n  private _proxyChildren: Element[];\n\n  constructor(\n    private element: Element,\n    private render: () => HTMLElement,\n  ) {\n    if (this._resizeObserver === undefined) {\n      // add resize observer\n      this._resizeObserver = new ResizeObserver(entries => {\n        entries.forEach(entry => {\n          this.run(entry.contentRect.width);\n        });\n      });\n      this._resizeObserver.observe(this.element);\n    }\n    this.run();\n  }\n\n  /**********\n   * Public *\n   **********/\n\n  /**\n   * Disconnect ResizeObserver\n   */\n  public disconnect = (): void => {\n    this._resizeObserver.disconnect();\n  };\n\n  /************\n   * Internal *\n   ************/\n\n  /**\n   * run overflow behavior\n   * @param width - width of the container. Optional.\n   */\n  private run = (width?: number): void => {\n    if (this._moreElement === undefined) {\n      // set moreElement\n      this._moreElement = this.render();\n\n      // set children\n      this._baseChildren = this.getInteractiveItems(this.element);\n      if (isMgItemMore(this._moreElement)) {\n        this._proxyChildren = this.getInteractiveItems(this._moreElement.shadowRoot.querySelector('mg-menu'));\n      }\n\n      // update children\n      this._baseChildren.forEach((child, index) => {\n        child.setAttribute(OverflowBehaviorElements.BASE_INDEX, `${index}`);\n        // set moreElement children\n        this._proxyChildren[index].setAttribute(OverflowBehaviorElements.PROXY_INDEX, `${index}`);\n      });\n    }\n\n    if (width !== undefined) this.updateDisplayedItems(width);\n  };\n\n  /**\n   * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']\n   * @param element - element to parse\n   * @returns children\n   */\n  private getInteractiveItems = (element: Element) =>\n    (element.children?.length > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName));\n\n  /**\n   * Update displayed items in container from a given available space\n   * @param availableWidth - available width in container to display child items\n   */\n  private updateDisplayedItems = (availableWidth: number): void => {\n    this.restoreItems();\n    const acc = { accWidth: 0, previousItem: null };\n    [...this._baseChildren, this._moreElement].forEach((child: HTMLMgMenuItemElement | HTMLMgItemMoreElement) => {\n      acc.accWidth += child.offsetWidth;\n      const hasPreviuosItem = acc.previousItem !== null;\n      const isPreviousItemHidden = hasPreviuosItem && acc.previousItem.getAttribute('hidden') !== null;\n      // if previous item is hidden AND is NOT more element we hidde current\n      // OR if item has an overflow we hidde current\n      // OR if current item is more element AND have NOT previous hidden items, current more element item is an hidden item\n      // ELSE current is a display item\n      this.toggleItem(\n        child,\n        (isPreviousItemHidden && !this.isMoreElement(child)) || this.isOverflowElement(acc.accWidth, child, availableWidth) || (this.isMoreElement(child) && !isPreviousItemHidden),\n      );\n\n      // update previous item with current item\n      acc.previousItem = child;\n    });\n  };\n\n  /**\n   * Utility method to know if item overflow partialy or totaly in the container\n   * @param cumulateWidth - previous sibling elements cumulate width + item width\n   * @param item - item HTML element\n   * @param availableWidth - container available width\n   * @returns truthy if element is overflow\n   */\n  private isOverflowElement = (cumulateWidth: number, item: HTMLElement, availableWidth: number): boolean => {\n    if (item.previousElementSibling === null || this.isMoreElement(item)) return false;\n    else if (!this.isMoreElement(item.nextElementSibling)) return cumulateWidth + this._moreElement.offsetWidth > availableWidth;\n    else return cumulateWidth > availableWidth;\n  };\n\n  /**\n   * Utility method to know if a given element is the 'MORE' element\n   * @param element - element to match with 'MORE' element\n   * @returns truthy if element is the 'MORE' element\n   */\n  private isMoreElement = (element: Element): boolean => element.nodeName === 'MG-ITEM-MORE';\n\n  /**\n   * Toggle display item element\n   * @param item - item to control\n   * @param isHidden - is item hidden\n   */\n  private toggleItem = (item: HTMLElement, isHidden: boolean): void => {\n    const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));\n    if (this.isMoreElement(item)) this.toggleElement(this._moreElement, isHidden);\n    else if (mgActionMenuindex >= 0) {\n      this.toggleElement(item, isHidden);\n      this.toggleElement(this._proxyChildren[mgActionMenuindex], !isHidden);\n    }\n  };\n\n  /**\n   * Toggle element's hidde attribute\n   * @param element - element to toggle\n   * @param isHidden - element is hidden\n   */\n  private toggleElement = (element: Element, isHidden: boolean): void => {\n    if (isHidden) element.setAttribute('hidden', '');\n    else element.removeAttribute('hidden');\n  };\n\n  /**\n   * Remove hidden attributes on all items\n   */\n  private restoreItems = (): void => {\n    [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));\n  };\n}\n",".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host:not([hidden]){display:flex}/*# sourceMappingURL=mg-item-more.css.map */\n","import { Component, h, Prop, Element, Host, Watch, State } from '@stencil/core';\nimport { initLocales } from '../../../locales';\nimport { OverflowBehavior } from '../../../utils/behaviors.utils';\nimport { Direction } from '../menu/mg-menu/mg-menu.conf';\nimport type { IconType, MessageType, SizeType, SlotLabelType } from './mg-item-more.conf';\nimport { isValidString } from '@mgdis/stencil-helpers';\n\n@Component({\n  tag: 'mg-item-more',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-item-more.css',\n  shadow: true,\n})\nexport class MgItemMore {\n  /************\n   * Internal *\n   ************/\n  private readonly name = 'mg-item-more';\n  private messages: MessageType;\n  private parentMenuItems: HTMLMgMenuItemElement[];\n  private moreElementMenuItem: HTMLMgMenuItemElement;\n  private overflowBehavior: OverflowBehavior;\n  private canRenderMgMenuItemOverflowElement = true;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgItemMoreElement;\n\n  /**\n   * Define icon\n   */\n  @Prop() icon: IconType = { icon: 'ellipsis-vertical' };\n  @Watch('icon')\n  validateIcon(newValue: MgItemMore['icon']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.icon !== 'string'))\n      throw new Error(`<${this.name}> prop \"icon\" must match MgItemMore['icon'] type.`);\n  }\n\n  /**\n   * Define slot label element\n   */\n  @Prop() slotlabel: SlotLabelType = { display: false };\n  @Watch('slotlabel')\n  validateSlotLabel(newValue: MgItemMore['slotlabel']): void {\n    if (typeof newValue !== 'object' || (typeof newValue === 'object' && typeof newValue.display !== 'boolean'))\n      throw new Error(`<${this.name}> prop \"slotlabel\" must match MgItemMore['slotlabel'] type.`);\n    else if (typeof newValue.label !== 'string') this.slotlabel.label = this.messages.moreLabel;\n  }\n\n  /**\n   * Define component child menu size.\n   */\n  @Prop() size: SizeType;\n  @Watch('size')\n  validateSize(newValue: MgItemMore['size']): void {\n    if (newValue && typeof newValue !== 'string') throw new Error(`<${this.name}> prop \"size\" must match MgItemMore['size'] type.`);\n  }\n\n  /**\n   * Define component parent menu.\n   */\n  @State() parentMenu: HTMLMgMenuElement;\n\n  /***********\n   * Methods *\n   ***********/\n\n  /**\n   * render mg-item-more overflow element\n   * @returns mg-item-more element\n   */\n  private renderMgMenuItemOverflowElement = (): HTMLMgItemMoreElement => {\n    // create menu items proxy element from item clones\n    this.parentMenuItems.forEach((child: HTMLMgMenuItemElement) => {\n      this.moreElementMenuItem.querySelector('mg-menu').appendChild(child.cloneNode(true));\n    });\n\n    const allMenuItem = Array.from(this.parentMenu.querySelectorAll('mg-menu-item:not([data-overflow-more])'));\n\n    Array.from(this.moreElementMenuItem.querySelectorAll('mg-menu-item:not([data-overflow-more])')).forEach((proxy, index) => {\n      // manage click on proxy to mirror it on initial element\n      proxy.addEventListener('click', () => {\n        // be carefull to use element.click() method instead of dispatchEvent to ensure bubbles outside shadowDom\n        const navElement = allMenuItem[index].shadowRoot.querySelector('a, button');\n        if (navElement instanceof HTMLButtonElement || navElement instanceof HTMLAnchorElement) navElement.click();\n      });\n\n      // add id suffix to prevent duplicate key. default html id is: '';\n      if (isValidString(proxy.id)) proxy.id = `${proxy.id}-proxy`;\n\n      // manage status change miror in proxy\n      allMenuItem[index].addEventListener('status-change', (event: CustomEvent) => {\n        proxy.setAttribute('status', event.detail);\n      });\n    });\n\n    return this.element;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Set variables and validate props\n   */\n  componentWillLoad(): void {\n    // init variables\n    this.messages = (initLocales(this.element).messages as { plusMenu: MessageType }).plusMenu;\n\n    // validate props\n    this.validateIcon(this.icon);\n    this.validateSlotLabel(this.slotlabel);\n    this.validateSize(this.size);\n  }\n\n  /**\n   * Ensure parent DOM is fully rendered with timeout method before parse elements\n   */\n  componentDidLoad(): ReturnType<typeof setTimeout> {\n    // ensure parent menu is fully rendered\n    return setTimeout(() => {\n      this.parentMenu = this.element.closest('mg-menu');\n    });\n  }\n\n  /**\n   * Set OverflowBehavior when parentMenu state is upate AND defined\n   */\n  componentDidUpdate(): void {\n    if (this.parentMenu && this.canRenderMgMenuItemOverflowElement) {\n      this.parentMenuItems = Array.from(this.parentMenu.children).filter(item => item.nodeName === 'MG-MENU-ITEM') as HTMLMgMenuItemElement[];\n      this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);\n      this.canRenderMgMenuItemOverflowElement = false;\n    }\n  }\n\n  /**\n   * Disconnect overflow ResizeObserver\n   */\n  disconnectedCallback(): void {\n    this.overflowBehavior?.disconnect();\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host role=\"listitem\">\n        {this.parentMenu && (\n          <mg-menu-item\n            data-overflow-more\n            data-size={this.parentMenu.size}\n            ref={el => {\n              if (el) this.moreElementMenuItem = el;\n            }}\n          >\n            <mg-icon icon={this.icon.icon} slot=\"image\"></mg-icon>\n            <span class={{ 'mg-u-visually-hidden': !this.slotlabel.display }} slot=\"label\">\n              {this.slotlabel.label}\n            </span>\n            <mg-menu direction={Direction.VERTICAL} label={this.messages.moreLabel} size={this.size}></mg-menu>\n          </mg-menu-item>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/mg-menu.conf-c291eee6.js

@@ -1,18 +0,0 @@
-'use strict';
-
-/**
- * Menu direction type
- */
-exports.Direction = void 0;
-(function (Direction) {
-    Direction["VERTICAL"] = "vertical";
-    Direction["HORIZONTAL"] = "horizontal";
-})(exports.Direction || (exports.Direction = {}));
-/**
- * List of all possibles sizes
- */
-const sizes = ['regular', 'medium', 'large'];
-
-exports.sizes = sizes;
-
-//# sourceMappingURL=mg-menu.conf-c291eee6.js.map

package/dist/cjs/mg-menu.conf-c291eee6.js.map

@@ -1 +0,0 @@
-{"file":"mg-menu.conf-c291eee6.js","mappings":";;AAEA;;;AAGYA;AAAZ,WAAY,SAAS;IACnB,kCAAqB,CAAA;IACrB,sCAAyB,CAAA;AAC3B,CAAC,EAHWA,iBAAS,KAATA,iBAAS,QAGpB;AAOD;;;MAGa,KAAK,GAAG,CAAC,SAAS,EAAE,QAAQ,EAAE,OAAO;;;;","names":["Direction"],"sources":["src/components/molecules/menu/mg-menu/mg-menu.conf.ts"],"sourcesContent":["import { MgItemMore } from '../../mg-item-more/mg-item-more';\n\n/**\n * Menu direction type\n */\nexport enum Direction {\n  VERTICAL = 'vertical',\n  HORIZONTAL = 'horizontal',\n}\n\n/**\n * ItemMore prop type\n */\nexport type ItemMoreType = Pick<MgItemMore, 'icon' | 'slotlabel' | 'size'>;\n\n/**\n * List of all possibles sizes\n */\nexport const sizes = ['regular', 'medium', 'large'] as const;\n\n/**\n * item Size from sizes\n */\nexport type MenuSizeType = (typeof sizes)[number];\n"],"version":3}

package/dist/collection/components/molecules/inputs/MgInput.conf.js

@@ -1,14 +0,0 @@
-/**
- * Possible input width
- */
-export const widths = [2, 4, 16, 'full'];
-/**
- * Available handlers
- */
-export var Handler;
-(function (Handler) {
-    Handler["BLUR"] = "blur";
-    Handler["FOCUS"] = "focus";
-})(Handler || (Handler = {}));
-export const tooltipPositions = ['input', 'label'];
-//# sourceMappingURL=MgInput.conf.js.map

package/dist/collection/components/molecules/inputs/MgInput.conf.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MgInput.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/inputs/MgInput.conf.ts"],"names":[],"mappings":"AAgCA;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,CAAU,CAAC;AAkBlD;;GAEG;AACH,MAAM,CAAN,IAAY,OAGX;AAHD,WAAY,OAAO;IACjB,wBAAa,CAAA;IACb,0BAAe,CAAA;AACjB,CAAC,EAHW,OAAO,KAAP,OAAO,QAGlB;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,OAAO,EAAE,OAAO,CAAU,CAAC","sourcesContent":["import type { MgInputTitle } from '../../atoms/mg-input-title/mg-input-title';\nimport type { ClassList } from '@mgdis/stencil-helpers';\n\n/**\n * MgInput component props\n */\nexport interface 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 | string[];\n  required: boolean;\n  readonly: boolean;\n  mgWidth: Width;\n  disabled: boolean;\n  // Tooltip\n  tooltip: string;\n  tooltipPosition: TooltipPosition;\n  // Help Text\n  helpText: string;\n  // Error Message\n  errorMessage: string;\n  // ariaDescribedbyIDs\n  ariaDescribedbyIDs: string[];\n}\n/**\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 */\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\nexport const tooltipPositions = ['input', 'label'] as const;\n\nexport type TooltipPosition = (typeof tooltipPositions)[number];\n"]}

package/dist/collection/components/molecules/inputs/MgInput.js

@@ -1,125 +0,0 @@
-import { h } from "@stencil/core";
-import { widths, tooltipPositions } from "./MgInput.conf";
-import { isValidString } from "@mgdis/stencil-helpers";
-/**
- * Apply in all input child node the aria-describedby attribute
- * @param children - Represent scoped elements
- * @param ariaDescribedbyIDs - List of IDs
- * @param utils - Stencil.js utils
- * @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) });
-});
-/**
- * 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}`);
-};
-/**
- * Check props configuration
- * @param props - MgInput Interface Props
- */
-const checkPropsConfig = (props) => {
-    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".');
-    }
-    if (!tooltipPositions.includes(props.tooltipPosition)) {
-        throw new Error(`<mg-input> prop "tooltipPosition" must be one of: ${tooltipPositions.join(', ')}`);
-    }
-};
-/**
- * Get tagname
- * @param isFieldset - is fieldset
- * @returns tag name
- */
-const getTagName = (isFieldset, readOnly) => (!isFieldset || readOnly ? 'div' : 'fieldset');
-/**
- * MgInput Interface
- */
-/**
- * Get input template
- * @param props - MgInput Interface Props
- * @param children - Represent scoped elements
- * @param utils - Stencil.js utils
- * @returns input template
- */
-export const MgInput = (props, children, utils) => {
-    /**
-     * Check props config
-     */
-    checkPropsConfig(props);
-    /**
-     * 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 | tooltip | 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" })));
-    return (h(TagName, { class: props.classCollection.join() }, h("div", { class: { 'mg-c-input__title': true, 'mg-u-visually-hidden': props.labelHide } }, h("mg-input-title", { identifier: props.identifier, readonly: props.readonly, required: props.required && !props.disabled && !props.readonly, "is-legend": props.isFieldset }, props.label), props.tooltip && !props.readonly && (props.tooltipPosition === 'label' || props.labelOnTop) && !props.labelHide && getTooltip()), props.readonly ? (h("div", { class: "mg-c-input__input-container" }, Array.isArray(props.readonlyValue) ? (h("ul", null, props.readonlyValue.map(value => (h("li", { key: value }, h("strong", null, value)))))) : (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.tooltip && !props.readonly && !props.labelOnTop && (props.tooltipPosition === 'input' || props.labelHide) && 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" }))))));
-};
-//# sourceMappingURL=MgInput.js.map

package/dist/collection/components/molecules/inputs/MgInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MgInput.js","sourceRoot":"","sources":["../../../../src/components/molecules/inputs/MgInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionalComponent, h, VNode, FunctionalUtilities } from '@stencil/core';\nimport { widths, tooltipPositions, type MgInputProps } from './MgInput.conf';\nimport { isValidString } from '@mgdis/stencil-helpers';\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 * Check props configuration\n * @param props - MgInput Interface Props\n */\nconst checkPropsConfig = (props: MgInputProps): void => {\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  if (!tooltipPositions.includes(props.tooltipPosition)) {\n    throw new Error(`<mg-input> prop \"tooltipPosition\" must be one of: ${tooltipPositions.join(', ')}`);\n  }\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 */\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 props config\n   */\n  checkPropsConfig(props);\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 | tooltip | 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  return (\n    <TagName class={props.classCollection.join()}>\n      <div class={{ 'mg-c-input__title': true, 'mg-u-visually-hidden': props.labelHide }}>\n        <mg-input-title identifier={props.identifier} readonly={props.readonly} required={props.required && !props.disabled && !props.readonly} is-legend={props.isFieldset}>\n          {props.label}\n        </mg-input-title>\n        {props.tooltip && !props.readonly && (props.tooltipPosition === 'label' || props.labelOnTop) && !props.labelHide && getTooltip()}\n      </div>\n      {props.readonly ? (\n        <div class=\"mg-c-input__input-container\">\n          {Array.isArray(props.readonlyValue) ? (\n            <ul>\n              {props.readonlyValue.map(value => (\n                <li key={value}>\n                  <strong>{value}</strong>\n                </li>\n              ))}\n            </ul>\n          ) : (\n            <strong>{props.readonlyValue}</strong>\n          )}\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.tooltip && !props.readonly && !props.labelOnTop && (props.tooltipPosition === 'input' || props.labelHide) && 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"]}

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

@@ -1,100 +0,0 @@
-/* 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 size before style setting to prevent "resize" event to be triggered
-    if (viewportSize !== undefined)
-        await page.setViewportSize(viewportSize);
-    // 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>`);
-    // 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

@@ -1 +0,0 @@
-{"version":3,"file":"playwright.e2e.test.utils.js","sourceRoot":"","sources":["../../src/utils/playwright.e2e.test.utils.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { type Page, ViewportSize, test as playwrightTest, expect as playwrightExpect, devices as playwrightDevices } from '@playwright/test';\nimport { readFile } from 'fs/promises';\nimport { join } from 'path';\n\n/**\n * Add mg-components to browser page\n *\n * @param page - browser page\n * @param html - html to load in page\n */\nexport const setPageContent = async (page: Page, html: string, viewportSize?: ViewportSize): Promise<void> => {\n  // We need to add mg-components to the e2e page\n  // Those solutions wasn't working to add the CSS\n  // await page.addStyleTag({ url: 'http://localhost:3333/build/mg-components.css' });\n\n  // CSS\n  const css = await readFile(join(__dirname, '../../www/build/mg-components.css'), { encoding: 'utf8' });\n  await page.addStyleTag({ content: css });\n\n  // JS\n  await page.addScriptTag({ url: 'http://localhost:3333/build/mg-components.esm.js', type: 'module' });\n\n  // Set page size before style setting to prevent \"resize\" event to be triggered\n  if (viewportSize !== undefined) await page.setViewportSize(viewportSize);\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  // 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"]}