@mgdis/mg-components 5.19.3 → 5.21.0

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

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

package/dist/collection/locales/fr/messages.json

@@ -25,10 +25,10 @@
       "selectButton": "Sélectionner des valeurs",
       "showButton": "Voir",
       "label": "Saisissez une valeur",
-      "result": "resultat",
-      "results": "resultats",
-      "searchResults": "List de resultat(s) de la recherche.",
-      "noResult": "Aucun resultat.",
+      "result": "résultat",
+      "results": "résultats",
+      "searchResults": "List de résultat(s) de la recherche.",
+      "noResult": "Aucun résultat.",
       "sections": {
         "selected": {
           "title": "Sélectionné",

package/dist/collection/locales/index.spec.js

@@ -2,26 +2,26 @@ import { initLocales } from ".";
 import messagesEn from "./en/messages.json";
 import messagesFr from "./fr/messages.json";
 describe('locales', () => {
-  describe('initLocales', () => {
-    test('Should return default locale', () => {
-      const locales = initLocales(document.createElement('div'));
-      expect(locales.locale).toEqual('en');
-      expect(locales.messages).toMatchObject(messagesEn);
+    describe('initLocales', () => {
+        test('Should return default locale', () => {
+            const locales = initLocales(document.createElement('div'));
+            expect(locales.locale).toEqual('en');
+            expect(locales.messages).toMatchObject(messagesEn);
+        });
+        test('Should return matching locale', () => {
+            const div = document.createElement('div');
+            div.lang = 'fr-FR';
+            const locales = initLocales(div);
+            expect(locales.locale).toEqual(div.lang);
+            expect(locales.messages).toMatchObject(messagesFr);
+        });
+        test('Should return default locale messages when requested does not exist', () => {
+            const div = document.createElement('div');
+            div.lang = 'ca';
+            const locales = initLocales(div);
+            expect(locales.locale).toEqual(div.lang);
+            expect(locales.messages).toMatchObject(messagesEn);
+        });
     });
-    test('Should return matching locale', () => {
-      const div = document.createElement('div');
-      div.lang = 'fr-FR';
-      const locales = initLocales(div);
-      expect(locales.locale).toEqual(div.lang);
-      expect(locales.messages).toMatchObject(messagesFr);
-    });
-    test('Should return default locale messages when requested does not exist', () => {
-      const div = document.createElement('div');
-      div.lang = 'ca';
-      const locales = initLocales(div);
-      expect(locales.locale).toEqual(div.lang);
-      expect(locales.messages).toMatchObject(messagesEn);
-    });
-  });
 });
 //# sourceMappingURL=index.spec.js.map

package/dist/collection/locales/index.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../src/locales/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAChC,OAAO,UAAU,MAAM,oBAAoB,CAAC;AAC5C,OAAO,UAAU,MAAM,oBAAoB,CAAC;AAE5C,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;EACvB,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,IAAI,CAAC,8BAA8B,EAAE,GAAG,EAAE;MACxC,MAAM,OAAO,GAAG,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;MAC3D,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;MACrC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,+BAA+B,EAAE,GAAG,EAAE;MACzC,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;MAC1C,GAAG,CAAC,IAAI,GAAG,OAAO,CAAC;MACnB,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;MACjC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;MACzC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,qEAAqE,EAAE,GAAG,EAAE;MAC/E,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;MAC1C,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC;MAChB,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;MACjC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;MACzC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACrD,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { initLocales } from '.';\nimport messagesEn from './en/messages.json';\nimport messagesFr from './fr/messages.json';\n\ndescribe('locales', () => {\n  describe('initLocales', () => {\n    test('Should return default locale', () => {\n      const locales = initLocales(document.createElement('div'));\n      expect(locales.locale).toEqual('en');\n      expect(locales.messages).toMatchObject(messagesEn);\n    });\n\n    test('Should return matching locale', () => {\n      const div = document.createElement('div');\n      div.lang = 'fr-FR';\n      const locales = initLocales(div);\n      expect(locales.locale).toEqual(div.lang);\n      expect(locales.messages).toMatchObject(messagesFr);\n    });\n\n    test('Should return default locale messages when requested does not exist', () => {\n      const div = document.createElement('div');\n      div.lang = 'ca';\n      const locales = initLocales(div);\n      expect(locales.locale).toEqual(div.lang);\n      expect(locales.messages).toMatchObject(messagesEn);\n    });\n  });\n});\n"]}
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../src/locales/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAChC,OAAO,UAAU,MAAM,oBAAoB,CAAC;AAC5C,OAAO,UAAU,MAAM,oBAAoB,CAAC;AAE5C,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACvB,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;QAC3B,IAAI,CAAC,8BAA8B,EAAE,GAAG,EAAE;YACxC,MAAM,OAAO,GAAG,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;YAC3D,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YACrC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACrD,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,+BAA+B,EAAE,GAAG,EAAE;YACzC,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC1C,GAAG,CAAC,IAAI,GAAG,OAAO,CAAC;YACnB,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;YACjC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YACzC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACrD,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,qEAAqE,EAAE,GAAG,EAAE;YAC/E,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC1C,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC;YAChB,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;YACjC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YACzC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACrD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { initLocales } from '.';\nimport messagesEn from './en/messages.json';\nimport messagesFr from './fr/messages.json';\n\ndescribe('locales', () => {\n  describe('initLocales', () => {\n    test('Should return default locale', () => {\n      const locales = initLocales(document.createElement('div'));\n      expect(locales.locale).toEqual('en');\n      expect(locales.messages).toMatchObject(messagesEn);\n    });\n\n    test('Should return matching locale', () => {\n      const div = document.createElement('div');\n      div.lang = 'fr-FR';\n      const locales = initLocales(div);\n      expect(locales.locale).toEqual(div.lang);\n      expect(locales.messages).toMatchObject(messagesFr);\n    });\n\n    test('Should return default locale messages when requested does not exist', () => {\n      const div = document.createElement('div');\n      div.lang = 'ca';\n      const locales = initLocales(div);\n      expect(locales.locale).toEqual(div.lang);\n      expect(locales.messages).toMatchObject(messagesEn);\n    });\n  });\n});\n"]}

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

@@ -6,136 +6,136 @@
 const isMgItemMore = (element) => element.nodeName === 'MG-ITEM-MORE';
 export var OverflowBehaviorElements;
 (function (OverflowBehaviorElements) {
-  OverflowBehaviorElements["BASE_INDEX"] = "data-overflow-base-index";
-  OverflowBehaviorElements["PROXY_INDEX"] = "data-overflow-proxy-index";
+    OverflowBehaviorElements["BASE_INDEX"] = "data-overflow-base-index";
+    OverflowBehaviorElements["PROXY_INDEX"] = "data-overflow-proxy-index";
 })(OverflowBehaviorElements || (OverflowBehaviorElements = {}));
 export 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'));
+    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);
         }
-        // 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();
     }
-    this.run();
-  }
 }
 //# sourceMappingURL=behaviors.utils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"behaviors.utils.js","sourceRoot":"","sources":["../../src/utils/behaviors.utils.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * MgItemMore type guard\n * @param element - element to control type\n * @returns truthy if element is mg-item-more\n */\nconst isMgItemMore = (element: HTMLElement): element is HTMLMgItemMoreElement => element.nodeName === 'MG-ITEM-MORE';\n\nexport enum OverflowBehaviorElements {\n  BASE_INDEX = 'data-overflow-base-index',\n  PROXY_INDEX = 'data-overflow-proxy-index',\n}\n\nexport class OverflowBehavior {\n  // variables\n  private _resizeObserver: ResizeObserver;\n  private _moreElement: HTMLElement;\n  private _baseChildren: Element[];\n  private _proxyChildren: Element[];\n\n  constructor(\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"]}
+{"version":3,"file":"behaviors.utils.js","sourceRoot":"","sources":["../../src/utils/behaviors.utils.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * MgItemMore type guard\n * @param element - element to control type\n * @returns truthy if element is mg-item-more\n */\nconst isMgItemMore = (element: HTMLElement): element is HTMLMgItemMoreElement => element.nodeName === 'MG-ITEM-MORE';\n\nexport enum OverflowBehaviorElements {\n  BASE_INDEX = 'data-overflow-base-index',\n  PROXY_INDEX = 'data-overflow-proxy-index',\n}\n\nexport class OverflowBehavior {\n  // variables\n  private _resizeObserver: ResizeObserver;\n  private _moreElement: HTMLElement;\n  private _baseChildren: Element[];\n  private _proxyChildren: Element[];\n\n  constructor(\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"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"behaviors.utils.spec.js","sourceRoot":"","sources":["../../src/utils/behaviors.utils.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core/internal';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgItemMore } from '../components/molecules/mg-item-more/mg-item-more';\nimport { MgMenuItem } from '../components/molecules/menu/mg-menu-item/mg-menu-item';\nimport { MgMenu } from '../components/molecules/menu/mg-menu/mg-menu';\nimport { OverflowBehavior } from './behaviors.utils';\nimport { setupMutationObserverMock, setupResizeObserverMock } from './unit.test.utils';\n\nconst getPage = render =>\n  newSpecPage({\n    components: [MgMenu, MgMenuItem, MgItemMore],\n    template: () => render,\n  });\n\ndescribe('behavior.utils', () => {\n  describe('OverflowBehavior', () => {\n    let fireRo;\n    beforeEach(() => {\n      jest.useFakeTimers();\n      setupResizeObserverMock({\n        observe: function () {\n          fireRo = this.cb;\n        },\n        disconnect: () => null,\n      });\n      setupMutationObserverMock({\n        disconnect: () => null,\n        observe: () => null,\n        takeRecords: () => null,\n      });\n    });\n    afterEach(() => jest.runOnlyPendingTimers());\n\n    describe('render menu', () => {\n      test.each([50, 80, 100, 250])('should manage resize with observer, case %s', async width => {\n        const args = { label: 'batman' };\n        const page = await getPage(\n          <mg-menu {...args}>\n            <mg-menu-item>\n              <span slot=\"label\">Batman</span>\n            </mg-menu-item>\n            <mg-menu-item>\n              <span slot=\"label\">Joker</span>\n            </mg-menu-item>\n            <mg-menu-item>\n              <span slot=\"label\">Bane</span>\n            </mg-menu-item>\n          </mg-menu>,\n        );\n\n        jest.runAllTimers();\n\n        await page.waitForChanges();\n\n        const items = Array.from(page.doc.querySelectorAll('mg-menu-item'));\n        items.forEach(item => {\n          Object.defineProperty(item, 'offsetWidth', {\n            get: jest.fn(() => 80),\n          });\n        });\n\n        Object.defineProperty(page.doc.querySelector('mg-item-more'), 'offsetWidth', {\n          get: jest.fn(() => 50),\n        });\n\n        fireRo([{ contentRect: { width } }]);\n\n        expect(page.root).toMatchSnapshot();\n      });\n    });\n\n    test('should fire disconnect callback', () => {\n      const behavior = new OverflowBehavior(<div></div>, () => <span></span>);\n      const spy = jest.spyOn((behavior as unknown as { _resizeObserver: string })._resizeObserver, 'disconnect');\n      behavior.disconnect();\n\n      expect(spy).toHaveBeenCalled();\n    });\n  });\n});\n"]}
+{"version":3,"file":"behaviors.utils.spec.js","sourceRoot":"","sources":["../../src/utils/behaviors.utils.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,wBAAwB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,mDAAmD,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,MAAM,wDAAwD,CAAC;AACpF,OAAO,EAAE,MAAM,EAAE,MAAM,8CAA8C,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,EAAE,yBAAyB,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAEvF,MAAM,OAAO,GAAG,MAAM,CAAC,EAAE,CACvB,WAAW,CAAC;IACV,UAAU,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,UAAU,CAAC;IAC5C,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM;CACvB,CAAC,CAAC;AAEL,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;QAChC,IAAI,MAAM,CAAC;QACX,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,aAAa,CAAC,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC,CAAC;YAC/C,uBAAuB,CAAC;gBACtB,OAAO,EAAE;oBACP,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;gBACnB,CAAC;gBACD,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI;aACvB,CAAC,CAAC;YACH,yBAAyB,CAAC;gBACxB,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI;gBACtB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI;gBACnB,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI;aACxB,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACH,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;QAE7C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;YAC3B,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,6CAA6C,EAAE,KAAK,EAAC,KAAK,EAAC,EAAE;gBACzF,MAAM,IAAI,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;gBACjC,MAAM,IAAI,GAAG,MAAM,OAAO,CACxB,+BAAa,IAAI;oBACf;wBACE,YAAM,IAAI,EAAC,OAAO,aAAc,CACnB;oBACf;wBACE,YAAM,IAAI,EAAC,OAAO,YAAa,CAClB;oBACf;wBACE,YAAM,IAAI,EAAC,OAAO,WAAY,CACjB,CACP,CACX,CAAC;gBAEF,sBAAsB;gBACtB,IAAI,CAAC,YAAY,EAAE,CAAC;gBACpB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;gBAE5B,mBAAmB;gBACnB,IAAI,CAAC,YAAY,EAAE,CAAC;gBACpB,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;gBAE5B,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC,CAAC;gBACpE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oBACnB,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,aAAa,EAAE;wBACzC,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC;qBACvB,CAAC,CAAC;gBACL,CAAC,CAAC,CAAC;gBAEH,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,aAAa,EAAE;oBAC3E,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC;iBACvB,CAAC,CAAC;gBAEH,MAAM,CAAC,CAAC,EAAE,WAAW,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;gBAErC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;YACtC,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,iCAAiC,EAAE,GAAG,EAAE;YAC3C,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,cAAW,EAAE,GAAG,EAAE,CAAC,eAAa,CAAC,CAAC;YACxE,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAE,QAAkD,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC;YAC1G,QAAQ,CAAC,UAAU,EAAE,CAAC;YAEtB,MAAM,CAAC,GAAG,CAAC,CAAC,gBAAgB,EAAE,CAAC;QACjC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core/internal';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgItemMore } from '../components/molecules/mg-item-more/mg-item-more';\nimport { MgMenuItem } from '../components/molecules/menu/mg-menu-item/mg-menu-item';\nimport { MgMenu } from '../components/molecules/menu/mg-menu/mg-menu';\nimport { OverflowBehavior } from './behaviors.utils';\nimport { setupMutationObserverMock, setupResizeObserverMock } from './unit.test.utils';\n\nconst getPage = render =>\n  newSpecPage({\n    components: [MgMenu, MgMenuItem, MgItemMore],\n    template: () => render,\n  });\n\ndescribe('behavior.utils', () => {\n  describe('OverflowBehavior', () => {\n    let fireRo;\n    beforeEach(() => {\n      jest.useFakeTimers({ legacyFakeTimers: true });\n      setupResizeObserverMock({\n        observe: function () {\n          fireRo = this.cb;\n        },\n        disconnect: () => null,\n      });\n      setupMutationObserverMock({\n        disconnect: () => null,\n        observe: () => null,\n        takeRecords: () => null,\n      });\n    });\n    afterEach(() => jest.runOnlyPendingTimers());\n\n    describe('render menu', () => {\n      test.each([50, 80, 100, 250])('should manage resize with observer, case %s', async width => {\n        const args = { label: 'batman' };\n        const page = await getPage(\n          <mg-menu {...args}>\n            <mg-menu-item>\n              <span slot=\"label\">Batman</span>\n            </mg-menu-item>\n            <mg-menu-item>\n              <span slot=\"label\">Joker</span>\n            </mg-menu-item>\n            <mg-menu-item>\n              <span slot=\"label\">Bane</span>\n            </mg-menu-item>\n          </mg-menu>,\n        );\n\n        // initial menu render\n        jest.runAllTimers();\n        await page.waitForChanges();\n\n        // more-item render\n        jest.runAllTimers();\n        await page.waitForChanges();\n\n        const items = Array.from(page.doc.querySelectorAll('mg-menu-item'));\n        items.forEach(item => {\n          Object.defineProperty(item, 'offsetWidth', {\n            get: jest.fn(() => 80),\n          });\n        });\n\n        Object.defineProperty(page.doc.querySelector('mg-item-more'), 'offsetWidth', {\n          get: jest.fn(() => 50),\n        });\n\n        fireRo([{ contentRect: { width } }]);\n\n        expect(page.root).toMatchSnapshot();\n      });\n    });\n\n    test('should fire disconnect callback', () => {\n      const behavior = new OverflowBehavior(<div></div>, () => <span></span>);\n      const spy = jest.spyOn((behavior as unknown as { _resizeObserver: never })._resizeObserver, 'disconnect');\n      behavior.disconnect();\n\n      expect(spy).toHaveBeenCalled();\n    });\n  });\n});\n"]}