@mgdis/mg-components 5.16.0 → 5.17.0

package/dist/collection/components/molecules/mg-panel/mg-panel.conf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-panel.conf.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-panel/mg-panel.conf.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAU,CAAC;AAO9D;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,OAAO,CAAU,CAAC","sourcesContent":["/**\n * Available expand toggle display options\n */\nexport const expandToggleDisplays = ['text', 'icon'] as const;\n\n/**\n * Generated expand toggle display type from available expand toggle display options\n */\nexport type ExpandToggleDisplayType = (typeof expandToggleDisplays)[number];\n\n/**\n * Available title positions\n */\nexport const titlePositions = ['left', 'right'] as const;\n\n/**\n * Generated title positions type from available title positions\n */\nexport type TitlePositionType = (typeof titlePositions)[number];\n"]}

package/dist/collection/components/molecules/mg-panel/mg-panel.js

@@ -1,7 +1,7 @@
-import { h } from '@stencil/core';
-import { createID, ClassList } from '../../../utils/components.utils';
-import { initLocales } from '../../../locales';
-import { expandToggleDisplays, titlePositions } from './mg-panel.conf';
+import { h } from "@stencil/core";
+import { createID, ClassList } from "../../../utils/components.utils";
+import { initLocales } from "../../../locales";
+import { expandToggleDisplays, titlePositions } from "./mg-panel.conf";
 export class MgPanel {
   constructor() {
     /************
@@ -274,7 +274,8 @@ export class MgPanel {
           "references": {
             "TitlePositionType": {
               "location": "import",
-              "path": "./mg-panel.conf"
+              "path": "./mg-panel.conf",
+              "id": "src/components/molecules/mg-panel/mg-panel.conf.ts::TitlePositionType"
             }
           }
         },
@@ -315,7 +316,8 @@ export class MgPanel {
           "references": {
             "ExpandToggleDisplayType": {
               "location": "import",
-              "path": "./mg-panel.conf"
+              "path": "./mg-panel.conf",
+              "id": "src/components/molecules/mg-panel/mg-panel.conf.ts::ExpandToggleDisplayType"
             }
           }
         },
@@ -408,3 +410,4 @@ export class MgPanel {
       }];
   }
 }
+//# sourceMappingURL=mg-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-panel.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-panel/mg-panel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, EventEmitter, Watch, Event } from '@stencil/core';\nimport { createID, ClassList } from '../../../utils/components.utils';\nimport { initLocales } from '../../../locales';\nimport { type ExpandToggleDisplayType, type TitlePositionType, expandToggleDisplays, titlePositions } from './mg-panel.conf';\n\n@Component({\n  tag: 'mg-panel',\n  styleUrl: 'mg-panel.scss',\n  shadow: true,\n})\nexport class MgPanel {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private editInputElement: HTMLMgInputTextElement;\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPanelElement;\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-panel');\n\n  /**\n   * Panel title\n   */\n  @Prop({ mutable: true }) panelTitle!: string;\n  @Watch('panelTitle')\n  validatePanelTitle(newValue: string): void {\n    if (typeof newValue !== 'string' || newValue.trim() === '') throw new Error('<mg-panel> prop \"panelTitle\" is required.');\n    this.titleChange.emit(newValue);\n  }\n\n  /**\n   * Panel title pattern\n   */\n  @Prop() titlePattern: string;\n  @Watch('titlePattern')\n  validatetitlePattern(newValue: string): void {\n    if (newValue !== undefined && !this.titleEditable) throw new Error('<mg-panel> prop \"titleEditable\" must be set to `true`.');\n    if (newValue !== undefined && (this.titlePatternErrorMessage === undefined || this.titlePatternErrorMessage.trim() === ''))\n      throw new Error('<mg-panel> prop \"titlePattern\" must be paired with the prop \"titlePatternErrorMessage\".');\n  }\n\n  /**\n   * Panel title pattern error message\n   */\n  @Prop() titlePatternErrorMessage: string;\n\n  /**\n   * Define if panel title is editable\n   */\n  @Prop({ mutable: true }) titleEditable = false;\n\n  /**\n   * Define title position\n   */\n  @Prop() titlePosition: TitlePositionType = titlePositions[0];\n  @Watch('titlePosition')\n  validateTitlePosition(newValue: MgPanel['titlePosition']) {\n    if (!titlePositions.includes(newValue)) throw new Error(`<mg-panel> prop \"titlePosition\" must be one of: ${titlePositions.join(', ')}.`);\n  }\n\n  /**\n   * Panel is opened\n   */\n  @Prop({ mutable: true }) expanded = false;\n  @Watch('expanded')\n  handleExpanded(newValue: boolean): void {\n    this.expandedChange.emit(newValue);\n  }\n\n  /**\n   * Define expand toggle button display\n   */\n  @Prop() expandToggleDisplay: ExpandToggleDisplayType = expandToggleDisplays[0];\n  @Watch('expandToggleDisplay')\n  validateExpandToggleDisplay(newValue: MgPanel['expandToggleDisplay']) {\n    if (!expandToggleDisplays.includes(newValue)) throw new Error(`<mg-panel> prop \"expandToggleDisplay\" must be one of: ${expandToggleDisplays.join(', ')}.`);\n    if (newValue === 'icon' && this.titleEditable) this.titleEditable = false;\n  }\n\n  /**\n   * Disable possibility to toggle expand\n   */\n  @Prop() expandToggleDisabled: boolean;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-panel']);\n\n  /**\n   * Title is in edition mode\n   */\n  @State() isEditing = false;\n\n  /**\n   * Cache for updated panel title before validation\n   */\n  @State() updatedPanelTitle: string;\n\n  /**\n   * Emmited event when title change\n   */\n  @Event({ eventName: 'title-change' }) titleChange: EventEmitter<string>;\n\n  /**\n   * Emmited event when expanded change\n   */\n  @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<boolean>;\n\n  /************\n   * Methods *\n   ************/\n\n  /**\n   * Toggle is editing state\n   */\n  private toggleIsEditing = (): void => {\n    this.isEditing = !this.isEditing;\n  };\n\n  /************\n   * Handlers *\n   ************/\n\n  /**\n   * Collapse button click handler\n   */\n  private handleCollapseButton = (): void => {\n    if (!this.expandToggleDisabled) this.expanded = !this.expanded;\n  };\n\n  /**\n   * Edit button click handler\n   */\n  private handleEditButton = (): void => {\n    this.toggleIsEditing();\n  };\n\n  /**\n   * Update title handler\n   * @param event - input value change event\n   */\n  private handleUpdateTitle = (event: CustomEvent<string>): void => {\n    this.updatedPanelTitle = event.detail;\n  };\n\n  /**\n   * Cancel edition button handler\n   */\n  private handleCancelEditButton = (): void => {\n    this.updatedPanelTitle = undefined;\n    this.toggleIsEditing();\n  };\n\n  /**\n   * Validate edition button handler\n   */\n  private handleValidateEditButton = (): void => {\n    if (!this.editInputElement.valid) return;\n    if (this.updatedPanelTitle !== undefined) this.panelTitle = this.updatedPanelTitle;\n    this.toggleIsEditing();\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    // Validate\n    this.validatetitlePattern(this.titlePattern);\n    this.validatePanelTitle(this.panelTitle);\n    this.validateExpandToggleDisplay(this.expandToggleDisplay);\n    this.validateTitlePosition(this.titlePosition);\n  }\n\n  /**\n   * Edit DOM after render\n   */\n  componentDidRender(): void {\n    // when we are editing we get focus on edition input\n    if (this.isEditing) this.editInputElement.setFocus();\n  }\n\n  /*************\n   * Render *\n   *************/\n\n  /**\n   * Render collapse button\n   * @returns collpase button\n   */\n  private renderCollapseButton = (): HTMLMgButtonElement => (\n    <mg-button\n      onClick={this.handleCollapseButton}\n      variant=\"flat\"\n      identifier={`${this.identifier}-collapse-button`}\n      aria-expanded={this.expanded !== undefined && this.expanded.toString()}\n      aria-controls={`${this.identifier}-content`}\n      disabled={this.expandToggleDisabled}\n      isIcon={this.expandToggleDisplay === 'icon'}\n      label={this.panelTitle}\n    >\n      <span class=\"mg-panel__collapse-button-content\">\n        <mg-icon icon=\"chevron-up\" class={{ 'mg-panel__collapse-button-icon': true, 'mg-panel__collapse-button-icon--reverse': !this.expanded }}></mg-icon>\n        {!this.isEditing && this.expandToggleDisplay !== 'icon' && this.panelTitle}\n      </span>\n    </mg-button>\n  );\n\n  /**\n   * Render edit button\n   * @returns edit Button\n   */\n  private renderEditButton = (): HTMLMgButtonElement => (\n    <mg-button key=\"edit-button\" is-icon variant=\"flat\" label={this.messages.panel.editLabel} onClick={this.handleEditButton} identifier={`${this.identifier}-edit-button`}>\n      <mg-icon icon=\"pen\"></mg-icon>\n    </mg-button>\n  );\n\n  /**\n   * Render input button\n   * @returns edit title input\n   */\n  private renderEditInput = (): HTMLMgInputTextElement => (\n    <mg-input-text\n      key=\"edition-input\"\n      label={this.messages.panel.editLabel}\n      label-hide\n      value={this.panelTitle}\n      onValue-change={this.handleUpdateTitle}\n      displayCharacterLeft={false}\n      pattern={this.titlePattern}\n      pattern-error-message={this.titlePatternErrorMessage}\n      identifier={`${this.identifier}-edition-input`}\n      ref={(el: HTMLMgInputTextElement) => (this.editInputElement = el)}\n    >\n      <mg-button\n        slot=\"append-input\"\n        label={this.messages.general.cancel}\n        is-icon\n        variant=\"secondary\"\n        onClick={this.handleCancelEditButton}\n        identifier={`${this.identifier}-edition-button-cancel`}\n      >\n        <mg-icon icon=\"cross\"></mg-icon>\n      </mg-button>\n      <mg-button\n        slot=\"append-input\"\n        label={this.messages.general.confirm}\n        is-icon\n        variant=\"secondary\"\n        onClick={this.handleValidateEditButton}\n        identifier={`${this.identifier}-edition-button-validate`}\n      >\n        <mg-icon icon=\"check\"></mg-icon>\n      </mg-button>\n    </mg-input-text>\n  );\n\n  /**\n   * Render title\n   * @returns title element\n   */\n  private renderTitle = (): HTMLElement[] => {\n    const elementsToRender: HTMLElement[] = [this.renderCollapseButton()];\n    if (this.titleEditable) {\n      if (!this.isEditing) elementsToRender.push(this.renderEditButton());\n      else elementsToRender.push(this.renderEditInput());\n    }\n\n    return this.titlePosition === 'right' ? elementsToRender.reverse() : elementsToRender;\n  };\n\n  /**\n   * Render header children\n   * @returns header child\n   */\n  private renderHeaderChildren = (): HTMLElement[] => {\n    const children = [\n      <div\n        class={{ 'mg-panel__header-title': true, 'mg-panel__header-title--full': this.isEditing, 'mg-panel__header-title--reverse': this.titlePosition === 'right' }}\n        key={this.panelTitle}\n      >\n        {this.renderTitle()}\n      </div>,\n      <div class=\"mg-panel__header-content\" key=\"slot-header\">\n        <slot name=\"header-right\"></slot>\n      </div>,\n    ];\n    return this.titlePosition === 'right' ? children.reverse() : children;\n  };\n\n  /**\n   * Render component\n   * @returns rendered component\n   */\n  render(): HTMLElement {\n    const headerId = `${this.identifier}-header`;\n    return (\n      <section class={this.classCollection.join()} id={this.identifier}>\n        <mg-card>\n          <header class={{ 'mg-panel__header': true, 'mg-panel__header--reverse': this.titlePosition === 'right' }} id={headerId}>\n            {this.renderHeaderChildren()}\n          </header>\n          <article class=\"mg-panel__content\" id={`${this.identifier}-content`} aria-labelledby={headerId} hidden={!this.expanded}>\n            <slot></slot>\n          </article>\n        </mg-card>\n      </section>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/mg-panel/test/mg-panel.e2e.playwright.js

@@ -0,0 +1,106 @@
+import { setPageContent, expect, describe, testEach, updateScreenshotClass, test } from "../../../../utils/playwright.e2e.test.utils";
+import { createID } from "../../../../utils/components.utils";
+import { renderAttributes, renderProperties } from "../../../../utils/e2e.test.utils";
+const slots = ['default', 'flex'];
+const baseArgs = {
+  panelTitle: 'panel title',
+};
+const createHTML = (args) => {
+  const identifier = createID();
+  const slot = Boolean(args.slot) ? args.slot : slots[0];
+  delete args.slot;
+  const flexSlotContainer = (content) => '<mg-badge variant="primary" value="1" label="label"></mg-badge><div>' + content + '</div>';
+  const slotContent = `
+  <mg-button variant="secondary" style="margin-left: 200px;">
+    <mg-icon icon="file-upload"></mg-icon> Upload
+  </mg-button>
+  <mg-button is-icon variant="secondary" label="delete">
+    <mg-icon icon="trash"></mg-icon>
+  </mg-button>
+  `;
+  return `
+    <mg-panel ${renderAttributes(Object.assign(Object.assign({}, args), { identifier }))}>
+      ${slots.includes(slot)
+    ? `
+          <div>Content</div>
+          <div slot="header-right" ${slot === 'flex' ? 'style="display:flex; justify-content:space-between; align-items:center; width:100%;"' : ''}>
+            ${slot === 'flex' ? flexSlotContainer(slotContent) : slotContent}
+          </div>`
+    : slot}
+    </mg-panel>
+    <script>${renderProperties(args, `[identifier="${identifier}"]`)}</script>`;
+};
+describe('mg-panel', () => {
+  testEach([
+    Object.assign({}, baseArgs),
+    Object.assign(Object.assign({}, baseArgs), { titlePosition: 'left' }),
+    Object.assign(Object.assign({}, baseArgs), { titlePosition: 'right' }),
+    Object.assign(Object.assign({}, baseArgs), { titlePosition: 'right', titleEditable: true }),
+    Object.assign(Object.assign({}, baseArgs), { expandToggleDisplay: 'text' }),
+    Object.assign(Object.assign({}, baseArgs), { expandToggleDisplay: 'icon' }),
+    Object.assign(Object.assign({}, baseArgs), { expandToggleDisplay: 'icon', titleEditable: true }),
+    Object.assign(Object.assign({}, baseArgs), { expanded: true }),
+    Object.assign(Object.assign({}, baseArgs), { titleEditable: true }),
+    Object.assign(Object.assign({}, baseArgs), { panelTitle: 'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title' }),
+    Object.assign(Object.assign({}, baseArgs), { titleEditable: true, panelTitle: 'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title' }),
+    Object.assign(Object.assign({}, baseArgs), { slot: 'flex' }),
+    Object.assign(Object.assign({}, baseArgs), { slot: 'flex', panelTitle: 'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title' }),
+    Object.assign(Object.assign({}, baseArgs), { expanded: true, style: '--mg-panel-content-padding: 0', slot: '<div>Content without padding.</div>' }),
+    Object.assign(Object.assign({}, baseArgs), { expanded: true, style: '--mg-panel-background: none; --mg-panel-border-radius: 0; --mg-panel-box-shadow: none', slot: '<div>Transparent mg-panel</div>' }),
+    Object.assign(Object.assign({}, baseArgs), { expanded: true, slot: '<div>header right items should be vertically aligned</div><div slot="header-right"><mg-tag>Label</mg-tag><mg-icon size="small" icon="check-circle" variant="success"></mg-icon></div>' }),
+    Object.assign(Object.assign({}, baseArgs), { expanded: true, style: '--mg-panel-background: var(--color-danger)', slot: '<mg-card>Content whith child card.</mg-card>' }),
+  ])('Should render with template %s', async (page, args) => {
+    await setPageContent(page, createHTML(Object.assign({}, args)));
+    await updateScreenshotClass(page, { width: '500px', height: '100%' });
+    await expect(page.locator('mg-panel')).toHaveScreenshot();
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Enter');
+    await expect(page.locator('mg-panel')).toHaveScreenshot();
+  });
+  describe('navigation', () => {
+    testEach([
+      Object.assign(Object.assign({}, baseArgs), { titleEditable: true }),
+      Object.assign(Object.assign({}, baseArgs), { titleEditable: true, panelTitle: 'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title' }),
+    ])('Should navigate throw editabled panel %s', async (page, args) => {
+      await setPageContent(page, createHTML(Object.assign({}, args)));
+      await expect(page.locator('mg-panel')).toHaveScreenshot();
+      await page.locator('.mg-panel__header-title mg-button:last-of-type').click();
+      // Hide caret for screenshots
+      await page.locator('mg-panel input').evaluate(element => (element.style.caretColor = 'transparent'));
+      await expect(page.locator('mg-panel')).toHaveScreenshot();
+      const input = await page.locator('mg-panel mg-input-text input');
+      await input.press('Space');
+      await input.press('KeyU');
+      await input.press('KeyP');
+      await input.press('KeyD');
+      await input.press('KeyA');
+      await input.press('KeyT');
+      await input.press('KeyE');
+      await input.press('KeyD');
+      await page.locator('mg-panel mg-input-text mg-button:last-of-type').click();
+      await expect(page.locator('mg-panel')).toHaveScreenshot();
+    });
+    test('Should NOT update panel title, case input new value does NOT match pattern', async ({ page }) => {
+      const args = Object.assign(Object.assign({}, baseArgs), { titleEditable: true, titlePattern: /^(?!(joker)$)[a-z A-Z0-9s]+$/, titlePatternErrorMessage: "You can't enter a bad guy !" });
+      await setPageContent(page, createHTML(args));
+      await page.locator('.mg-panel__header-title mg-button:last-of-type').click();
+      // Hide caret for screenshots
+      await page.locator('mg-panel input').evaluate(element => (element.style.caretColor = 'transparent'));
+      await expect(page.locator('mg-panel')).toHaveScreenshot();
+      const input = await page.locator('mg-panel mg-input-text input');
+      await input.press('Backspace');
+      await input.press('Backspace');
+      await input.press('Backspace');
+      await input.press('Backspace');
+      await input.press('Backspace');
+      await input.press('KeyJ');
+      await input.press('KeyO');
+      await input.press('KeyK');
+      await input.press('KeyE');
+      await input.press('KeyR');
+      await page.locator('mg-panel mg-input-text mg-button:last-of-type').click();
+      await expect(page.locator('mg-panel')).toHaveScreenshot();
+    });
+  });
+});
+//# sourceMappingURL=mg-panel.e2e.playwright.js.map

package/dist/collection/components/molecules/mg-panel/test/mg-panel.e2e.playwright.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-panel.e2e.playwright.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-panel/test/mg-panel.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setPageContent, expect, describe, testEach, updateScreenshotClass, PageType, test } from '../../../../utils/playwright.e2e.test.utils';\nimport { createID } from '../../../../utils/components.utils';\nimport { renderAttributes, renderProperties } from '../../../../utils/e2e.test.utils';\nimport { type MgPanel } from '../mg-panel';\n\ntype ArgsType = Partial<MgPanel> & { slot?: SlotType };\nconst slots = ['default', 'flex'] as const;\ntype SlotType = (typeof slots)[number] | string;\n\nconst baseArgs = {\n  panelTitle: 'panel title',\n};\n\nconst createHTML = (args: ArgsType): string => {\n  const identifier = createID();\n  const slot: SlotType = Boolean(args.slot) ? args.slot : slots[0];\n  delete args.slot;\n\n  const flexSlotContainer = (content: string): string => '<mg-badge variant=\"primary\" value=\"1\" label=\"label\"></mg-badge><div>' + content + '</div>';\n  const slotContent = `\n  <mg-button variant=\"secondary\" style=\"margin-left: 200px;\">\n    <mg-icon icon=\"file-upload\"></mg-icon> Upload\n  </mg-button>\n  <mg-button is-icon variant=\"secondary\" label=\"delete\">\n    <mg-icon icon=\"trash\"></mg-icon>\n  </mg-button>\n  `;\n\n  return `\n    <mg-panel ${renderAttributes({ ...args, identifier })}>\n      ${\n        slots.includes(slot as (typeof slots)[number])\n          ? `\n          <div>Content</div>\n          <div slot=\"header-right\" ${slot === 'flex' ? 'style=\"display:flex; justify-content:space-between; align-items:center; width:100%;\"' : ''}>\n            ${slot === 'flex' ? flexSlotContainer(slotContent) : slotContent}\n          </div>`\n          : slot\n      }\n    </mg-panel>\n    <script>${renderProperties(args, `[identifier=\"${identifier}\"]`)}</script>`;\n};\n\ndescribe('mg-panel', () => {\n  testEach([\n    { ...baseArgs },\n    { ...baseArgs, titlePosition: 'left' },\n    { ...baseArgs, titlePosition: 'right' },\n    { ...baseArgs, titlePosition: 'right', titleEditable: true },\n    { ...baseArgs, expandToggleDisplay: 'text' },\n    { ...baseArgs, expandToggleDisplay: 'icon' },\n    { ...baseArgs, expandToggleDisplay: 'icon', titleEditable: true },\n    { ...baseArgs, expanded: true },\n    { ...baseArgs, titleEditable: true },\n    {\n      ...baseArgs,\n      panelTitle:\n        'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title',\n    },\n    {\n      ...baseArgs,\n      titleEditable: true,\n      panelTitle:\n        'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title',\n    },\n    { ...baseArgs, slot: 'flex' },\n    {\n      ...baseArgs,\n      slot: 'flex',\n      panelTitle:\n        'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title',\n    },\n    { ...baseArgs, expanded: true, style: '--mg-panel-content-padding: 0', slot: '<div>Content without padding.</div>' },\n    { ...baseArgs, expanded: true, style: '--mg-panel-background: none; --mg-panel-border-radius: 0; --mg-panel-box-shadow: none', slot: '<div>Transparent mg-panel</div>' },\n    {\n      ...baseArgs,\n      expanded: true,\n      slot: '<div>header right items should be vertically aligned</div><div slot=\"header-right\"><mg-tag>Label</mg-tag><mg-icon size=\"small\" icon=\"check-circle\" variant=\"success\"></mg-icon></div>',\n    },\n    { ...baseArgs, expanded: true, style: '--mg-panel-background: var(--color-danger)', slot: '<mg-card>Content whith child card.</mg-card>' },\n  ])('Should render with template %s', async (page: PageType, args: ArgsType) => {\n    await setPageContent(\n      page,\n      createHTML({\n        ...args,\n      }),\n    );\n\n    await updateScreenshotClass(page, { width: '500px', height: '100%' });\n\n    await expect(page.locator('mg-panel')).toHaveScreenshot();\n\n    await page.keyboard.press('Tab');\n    await page.keyboard.press('Enter');\n    await expect(page.locator('mg-panel')).toHaveScreenshot();\n  });\n\n  describe('navigation', () => {\n    testEach([\n      { ...baseArgs, titleEditable: true },\n      {\n        ...baseArgs,\n        titleEditable: true,\n        panelTitle:\n          'very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title very long panel title',\n      },\n    ])('Should navigate throw editabled panel %s', async (page: PageType, args: ArgsType) => {\n      await setPageContent(\n        page,\n        createHTML({\n          ...args,\n        }),\n      );\n\n      await expect(page.locator('mg-panel')).toHaveScreenshot();\n\n      await page.locator('.mg-panel__header-title mg-button:last-of-type').click();\n\n      // Hide caret for screenshots\n      await page.locator('mg-panel input').evaluate(element => (element.style.caretColor = 'transparent'));\n\n      await expect(page.locator('mg-panel')).toHaveScreenshot();\n\n      const input = await page.locator('mg-panel mg-input-text input');\n\n      await input.press('Space');\n      await input.press('KeyU');\n      await input.press('KeyP');\n      await input.press('KeyD');\n      await input.press('KeyA');\n      await input.press('KeyT');\n      await input.press('KeyE');\n      await input.press('KeyD');\n\n      await page.locator('mg-panel mg-input-text mg-button:last-of-type').click();\n\n      await expect(page.locator('mg-panel')).toHaveScreenshot();\n    });\n\n    test('Should NOT update panel title, case input new value does NOT match pattern', async ({ page }) => {\n      const args = {\n        ...baseArgs,\n        titleEditable: true,\n        titlePattern: /^(?!(joker)$)[a-z A-Z0-9s]+$/ as unknown as string,\n        titlePatternErrorMessage: \"You can't enter a bad guy !\",\n      };\n\n      await setPageContent(page, createHTML(args));\n\n      await page.locator('.mg-panel__header-title mg-button:last-of-type').click();\n\n      // Hide caret for screenshots\n      await page.locator('mg-panel input').evaluate(element => (element.style.caretColor = 'transparent'));\n\n      await expect(page.locator('mg-panel')).toHaveScreenshot();\n\n      const input = await page.locator('mg-panel mg-input-text input');\n\n      await input.press('Backspace');\n      await input.press('Backspace');\n      await input.press('Backspace');\n      await input.press('Backspace');\n      await input.press('Backspace');\n      await input.press('KeyJ');\n      await input.press('KeyO');\n      await input.press('KeyK');\n      await input.press('KeyE');\n      await input.press('KeyR');\n\n      await page.locator('mg-panel mg-input-text mg-button:last-of-type').click();\n\n      await expect(page.locator('mg-panel')).toHaveScreenshot();\n    });\n  });\n});\n"]}

package/dist/collection/components/molecules/mg-panel/test/mg-panel.spec.js

@@ -0,0 +1,223 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgPanel } from "../mg-panel";
+import { MgButton } from "../../../atoms/mg-button/mg-button";
+import { MgInputText } from "../../inputs/mg-input-text/mg-input-text";
+import { expandToggleDisplays, titlePositions } from "../mg-panel.conf";
+const getPage = (args, slot) => {
+  const page = newSpecPage({
+    components: [MgPanel, MgButton, MgInputText],
+    template: () => h("mg-panel", Object.assign({}, args), slot),
+  });
+  jest.runAllTimers();
+  return page;
+};
+describe('mg-panel', () => {
+  beforeAll(() => (global.HTMLInputElement.prototype.focus = jest.fn()));
+  afterAll(() => delete global.HTMLInputElement.prototype.focus);
+  beforeEach(() => jest.useFakeTimers());
+  afterEach(() => jest.runOnlyPendingTimers());
+  test.each([
+    { identifier: 'identifier', panelTitle: 'panel title' },
+    { identifier: 'identifier', panelTitle: 'panel title', expanded: true },
+    { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true },
+    { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, titlePattern: /joker/, titlePatternErrorMessage: "You can't enter a bad guy !" },
+    { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, lang: 'fr' },
+    { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, lang: 'xx' },
+    ...titlePositions.map(titlePosition => ({ identifier: 'identifier', panelTitle: 'panel title', titlePosition })),
+    ...expandToggleDisplays.map(expandToggleDisplay => ({ identifier: 'identifier', panelTitle: 'panel title', expandToggleDisplay })),
+    ...expandToggleDisplays.map(expandToggleDisplay => ({ identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, expandToggleDisplay })),
+  ])('Should render with args %s:', async (args) => {
+    const { root } = await getPage(args);
+    expect(root).toMatchSnapshot();
+  });
+  describe('errors', () => {
+    test.each([
+      { props: { identifier: 'identifier', panelTitle: 'panel title', titlePattern: /joker/ }, error: '<mg-panel> prop "titleEditable" must be set to `true`.' },
+      {
+        props: { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, titlePattern: '^(?!(joker)$)[a-z A-Z0-9s]+$' },
+        error: '<mg-panel> prop "titlePattern" must be paired with the prop "titlePatternErrorMessage".',
+      },
+      {
+        props: { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, titlePattern: '^(?!(joker)$)[a-z A-Z0-9s]+$', titlePatternErrorMessage: '' },
+        error: '<mg-panel> prop "titlePattern" must be paired with the prop "titlePatternErrorMessage".',
+      },
+    ])('Should throw error when props association are unauthorized %s:', async ({ props, error }) => {
+      expect.assertions(1);
+      try {
+        await getPage(props);
+      }
+      catch (err) {
+        expect(err.message).toBe(error);
+      }
+    });
+    test.each(['', ' ', undefined])('Should not render with invalid panelTitle property: %s', async (panelTitle) => {
+      expect.assertions(1);
+      try {
+        await getPage({ panelTitle });
+      }
+      catch (err) {
+        expect(err.message).toMatch('<mg-panel> prop "panelTitle" is required.');
+      }
+    });
+    test.each(['', ' ', 'batman'].map(titlePosition => ({ panelTitle: 'panel title', titlePosition })))('Should throw an error when prop "titlePosition" is invalid', async (props) => {
+      try {
+        await getPage(props);
+      }
+      catch (err) {
+        expect(err.message).toMatch(`<mg-panel> prop "titlePosition" must be one of: ${titlePositions.join(', ')}.`);
+      }
+    });
+    test.each(['', ' ', 'batman'].map(expandToggleDisplay => ({ panelTitle: 'panel title', expandToggleDisplay })))('Should throw an error when prop "expandToggleDisplay" is invalid', async (props) => {
+      try {
+        await getPage(props);
+      }
+      catch (err) {
+        expect(err.message).toMatch(`<mg-panel> prop "expandToggleDisplay" must be one of: ${expandToggleDisplays.join(', ')}.`);
+      }
+    });
+  });
+  describe('navigation', () => {
+    test.each([true, false])('Should toggle collapse panel, expanded %s', async (expanded) => {
+      const page = await getPage({ identifier: 'identifier', panelTitle: 'panel title', expanded });
+      const mgPanel = page.doc.querySelector('mg-panel');
+      const collapseButton = mgPanel.shadowRoot.querySelector('mg-button:first-of-type');
+      const spy = jest.spyOn(page.rootInstance.expandedChange, 'emit');
+      expect(page.root).toMatchSnapshot();
+      collapseButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      collapseButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      expect(spy).toBeCalledTimes(2);
+    });
+    test.each([true, false])('Should NOT collapse panel, case expandToggleDisabled = true', async (expanded) => {
+      const page = await getPage({ identifier: 'identifier', panelTitle: 'panel title', expanded, expandToggleDisabled: true });
+      const mgPanel = page.doc.querySelector('mg-panel');
+      const collapseButton = mgPanel.shadowRoot.querySelector('mg-button:first-of-type');
+      expect(page.root).toMatchSnapshot();
+      collapseButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+    });
+    test.each([true, false])('Should toggle edit panel title', async (titleEditable) => {
+      const page = await getPage({ identifier: 'identifier', panelTitle: 'panel title', titleEditable });
+      const mgPanel = page.doc.querySelector('mg-panel');
+      const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');
+      expect(page.root).toMatchSnapshot();
+      if (titleEditable) {
+        editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+        editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+        jest.runOnlyPendingTimers();
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+      }
+    });
+    test.each(['first-of-type', 'last-of-type'])('should update panel title, case %s', async (lastAction) => {
+      const updatedPanelTitle = 'Updated panel title';
+      const args = { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true };
+      const page = await getPage(args);
+      const mgPanel = page.doc.querySelector('mg-panel');
+      const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');
+      expect(page.root).toMatchSnapshot();
+      jest.spyOn(page.rootInstance.titleChange, 'emit');
+      editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      const mgInputText = mgPanel.shadowRoot.querySelector('mg-input-text');
+      const input = mgInputText.shadowRoot.querySelector('input');
+      input.value = updatedPanelTitle;
+      input.dispatchEvent(new CustomEvent('input', { bubbles: true }));
+      await page.waitForChanges();
+      input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));
+      await page.waitForChanges();
+      const afterInputAction = mgPanel.shadowRoot.querySelector(`.mg-panel__header-title mg-input-text mg-button:${lastAction}`);
+      afterInputAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      jest.runOnlyPendingTimers();
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      if (lastAction === 'last-of-type') {
+        expect(mgPanel.panelTitle).toBe(updatedPanelTitle);
+        expect(page.rootInstance.titleChange.emit).toHaveBeenCalledWith(updatedPanelTitle);
+      }
+      else {
+        expect(mgPanel.panelTitle).toBe(args.panelTitle);
+        expect(page.rootInstance.titleChange.emit).not.toHaveBeenCalled();
+      }
+    });
+    test('should NOT update panel title, case no enter in input', async () => {
+      const updatedPanelTitle = 'Updated panel title';
+      const args = { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true };
+      const page = await getPage(args);
+      const mgPanel = page.doc.querySelector('mg-panel');
+      const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');
+      expect(page.root).toMatchSnapshot();
+      jest.spyOn(page.rootInstance.titleChange, 'emit');
+      editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      const mgInputText = mgPanel.shadowRoot.querySelector('mg-input-text');
+      const input = mgInputText.shadowRoot.querySelector('input');
+      input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));
+      await page.waitForChanges();
+      const afterInputAction = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-input-text mg-button:last-of-type');
+      afterInputAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      jest.runOnlyPendingTimers();
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      expect(mgPanel.panelTitle).toBe(args.panelTitle);
+      expect(page.rootInstance.titleChange.emit).not.toHaveBeenCalledWith(updatedPanelTitle);
+    });
+    test('Should NOT update panel title, case input new value does NOT match pattern', async () => {
+      const updatedPanelTitle = 'joker';
+      const args = {
+        identifier: 'identifier',
+        panelTitle: 'panel title',
+        titleEditable: true,
+        titlePattern: '^(?!(joker)$)[a-z A-Z0-9s]+$',
+        titlePatternErrorMessage: "You can't enter a bad guy !",
+      };
+      const page = await getPage(args);
+      const mgPanel = page.doc.querySelector('mg-panel');
+      const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');
+      expect(page.root).toMatchSnapshot();
+      jest.spyOn(page.rootInstance.titleChange, 'emit');
+      // first switch to title edition
+      editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      const mgInputText = mgPanel.shadowRoot.querySelector('mg-input-text');
+      const input = mgInputText.shadowRoot.querySelector('input');
+      input.checkValidity = jest.fn(() => false);
+      Object.defineProperty(input, 'validity', {
+        get: jest.fn(() => ({
+          patternMismatch: false,
+        })),
+      });
+      // second update title with a falsy update title
+      input.value = updatedPanelTitle;
+      input.dispatchEvent(new CustomEvent('input', { bubbles: true }));
+      await page.waitForChanges();
+      input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));
+      await page.waitForChanges();
+      // and click on validate button
+      const afterInputAction = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-input-text mg-button:last-of-type');
+      afterInputAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      jest.runOnlyPendingTimers();
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      expect(mgPanel.panelTitle).toBe(args.panelTitle);
+      expect(page.rootInstance.titleChange.emit).not.toHaveBeenCalledWith(updatedPanelTitle);
+      // finaly return to default view by clicking on cancel button
+      const cancelAction = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-input-text mg-button:last-of-type');
+      cancelAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      jest.runOnlyPendingTimers();
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+});
+//# sourceMappingURL=mg-panel.spec.js.map

package/dist/collection/components/molecules/mg-panel/test/mg-panel.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-panel.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-panel/test/mg-panel.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgPanel } from '../mg-panel';\n\nimport { MgButton } from '../../../atoms/mg-button/mg-button';\nimport { MgInputText } from '../../inputs/mg-input-text/mg-input-text';\nimport { expandToggleDisplays, titlePositions } from '../mg-panel.conf';\n\nconst getPage = (args, slot?) => {\n  const page = newSpecPage({\n    components: [MgPanel, MgButton, MgInputText],\n    template: () => <mg-panel {...args}>{slot}</mg-panel>,\n  });\n  jest.runAllTimers();\n\n  return page;\n};\n\ndescribe('mg-panel', () => {\n  beforeAll(() => (global.HTMLInputElement.prototype.focus = jest.fn()));\n  afterAll(() => delete global.HTMLInputElement.prototype.focus);\n\n  beforeEach(() => jest.useFakeTimers());\n  afterEach(() => jest.runOnlyPendingTimers());\n\n  test.each([\n    { identifier: 'identifier', panelTitle: 'panel title' },\n    { identifier: 'identifier', panelTitle: 'panel title', expanded: true },\n    { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true },\n    { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, titlePattern: /joker/, titlePatternErrorMessage: \"You can't enter a bad guy !\" },\n    { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, lang: 'fr' },\n    { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, lang: 'xx' },\n    ...titlePositions.map(titlePosition => ({ identifier: 'identifier', panelTitle: 'panel title', titlePosition })),\n    ...expandToggleDisplays.map(expandToggleDisplay => ({ identifier: 'identifier', panelTitle: 'panel title', expandToggleDisplay })),\n    ...expandToggleDisplays.map(expandToggleDisplay => ({ identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, expandToggleDisplay })),\n  ])('Should render with args %s:', async args => {\n    const { root } = await getPage(args);\n    expect(root).toMatchSnapshot();\n  });\n\n  describe('errors', () => {\n    test.each([\n      { props: { identifier: 'identifier', panelTitle: 'panel title', titlePattern: /joker/ }, error: '<mg-panel> prop \"titleEditable\" must be set to `true`.' },\n      {\n        props: { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, titlePattern: '^(?!(joker)$)[a-z A-Z0-9s]+$' },\n        error: '<mg-panel> prop \"titlePattern\" must be paired with the prop \"titlePatternErrorMessage\".',\n      },\n      {\n        props: { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true, titlePattern: '^(?!(joker)$)[a-z A-Z0-9s]+$', titlePatternErrorMessage: '' },\n        error: '<mg-panel> prop \"titlePattern\" must be paired with the prop \"titlePatternErrorMessage\".',\n      },\n    ])('Should throw error when props association are unauthorized %s:', async ({ props, error }) => {\n      expect.assertions(1);\n      try {\n        await getPage(props);\n      } catch (err) {\n        expect(err.message).toBe(error);\n      }\n    });\n\n    test.each(['', ' ', undefined])('Should not render with invalid panelTitle property: %s', async panelTitle => {\n      expect.assertions(1);\n      try {\n        await getPage({ panelTitle });\n      } catch (err) {\n        expect(err.message).toMatch('<mg-panel> prop \"panelTitle\" is required.');\n      }\n    });\n\n    test.each(['', ' ', 'batman'].map(titlePosition => ({ panelTitle: 'panel title', titlePosition })))(\n      'Should throw an error when prop \"titlePosition\" is invalid',\n      async props => {\n        try {\n          await getPage(props);\n        } catch (err) {\n          expect(err.message).toMatch(`<mg-panel> prop \"titlePosition\" must be one of: ${titlePositions.join(', ')}.`);\n        }\n      },\n    );\n\n    test.each(['', ' ', 'batman'].map(expandToggleDisplay => ({ panelTitle: 'panel title', expandToggleDisplay })))(\n      'Should throw an error when prop \"expandToggleDisplay\" is invalid',\n      async props => {\n        try {\n          await getPage(props);\n        } catch (err) {\n          expect(err.message).toMatch(`<mg-panel> prop \"expandToggleDisplay\" must be one of: ${expandToggleDisplays.join(', ')}.`);\n        }\n      },\n    );\n  });\n\n  describe('navigation', () => {\n    test.each([true, false])('Should toggle collapse panel, expanded %s', async expanded => {\n      const page = await getPage({ identifier: 'identifier', panelTitle: 'panel title', expanded });\n      const mgPanel = page.doc.querySelector('mg-panel');\n      const collapseButton = mgPanel.shadowRoot.querySelector('mg-button:first-of-type');\n\n      const spy = jest.spyOn(page.rootInstance.expandedChange, 'emit');\n\n      expect(page.root).toMatchSnapshot();\n\n      collapseButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n\n      collapseButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n\n      expect(spy).toBeCalledTimes(2);\n    });\n\n    test.each([true, false])('Should NOT collapse panel, case expandToggleDisabled = true', async expanded => {\n      const page = await getPage({ identifier: 'identifier', panelTitle: 'panel title', expanded, expandToggleDisabled: true });\n      const mgPanel = page.doc.querySelector('mg-panel');\n      const collapseButton = mgPanel.shadowRoot.querySelector('mg-button:first-of-type');\n\n      expect(page.root).toMatchSnapshot();\n\n      collapseButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n\n    test.each([true, false])('Should toggle edit panel title', async titleEditable => {\n      const page = await getPage({ identifier: 'identifier', panelTitle: 'panel title', titleEditable });\n      const mgPanel = page.doc.querySelector('mg-panel');\n      const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');\n\n      expect(page.root).toMatchSnapshot();\n\n      if (titleEditable) {\n        editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n        await page.waitForChanges();\n\n        expect(page.root).toMatchSnapshot();\n\n        editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n        jest.runOnlyPendingTimers();\n        await page.waitForChanges();\n\n        expect(page.root).toMatchSnapshot();\n      }\n    });\n\n    test.each(['first-of-type', 'last-of-type'])('should update panel title, case %s', async lastAction => {\n      const updatedPanelTitle = 'Updated panel title';\n      const args = { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true };\n      const page = await getPage(args);\n      const mgPanel = page.doc.querySelector('mg-panel');\n      const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');\n\n      expect(page.root).toMatchSnapshot();\n\n      jest.spyOn(page.rootInstance.titleChange, 'emit');\n\n      editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n\n      const mgInputText = mgPanel.shadowRoot.querySelector('mg-input-text');\n      const input = mgInputText.shadowRoot.querySelector('input');\n\n      input.value = updatedPanelTitle;\n      input.dispatchEvent(new CustomEvent('input', { bubbles: true }));\n      await page.waitForChanges();\n\n      input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));\n      await page.waitForChanges();\n\n      const afterInputAction = mgPanel.shadowRoot.querySelector(`.mg-panel__header-title mg-input-text mg-button:${lastAction}`);\n\n      afterInputAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      jest.runOnlyPendingTimers();\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n\n      if (lastAction === 'last-of-type') {\n        expect(mgPanel.panelTitle).toBe(updatedPanelTitle);\n        expect(page.rootInstance.titleChange.emit).toHaveBeenCalledWith(updatedPanelTitle);\n      } else {\n        expect(mgPanel.panelTitle).toBe(args.panelTitle);\n        expect(page.rootInstance.titleChange.emit).not.toHaveBeenCalled();\n      }\n    });\n\n    test('should NOT update panel title, case no enter in input', async () => {\n      const updatedPanelTitle = 'Updated panel title';\n      const args = { identifier: 'identifier', panelTitle: 'panel title', titleEditable: true };\n      const page = await getPage(args);\n      const mgPanel = page.doc.querySelector('mg-panel');\n      const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');\n\n      expect(page.root).toMatchSnapshot();\n\n      jest.spyOn(page.rootInstance.titleChange, 'emit');\n\n      editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n\n      const mgInputText = mgPanel.shadowRoot.querySelector('mg-input-text');\n      const input = mgInputText.shadowRoot.querySelector('input');\n\n      input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));\n      await page.waitForChanges();\n\n      const afterInputAction = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-input-text mg-button:last-of-type');\n\n      afterInputAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      jest.runOnlyPendingTimers();\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n\n      expect(mgPanel.panelTitle).toBe(args.panelTitle);\n      expect(page.rootInstance.titleChange.emit).not.toHaveBeenCalledWith(updatedPanelTitle);\n    });\n\n    test('Should NOT update panel title, case input new value does NOT match pattern', async () => {\n      const updatedPanelTitle = 'joker';\n      const args = {\n        identifier: 'identifier',\n        panelTitle: 'panel title',\n        titleEditable: true,\n        titlePattern: '^(?!(joker)$)[a-z A-Z0-9s]+$',\n        titlePatternErrorMessage: \"You can't enter a bad guy !\",\n      };\n      const page = await getPage(args);\n      const mgPanel = page.doc.querySelector('mg-panel');\n      const editButton = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-button[is-icon]');\n\n      expect(page.root).toMatchSnapshot();\n\n      jest.spyOn(page.rootInstance.titleChange, 'emit');\n\n      // first switch to title edition\n      editButton.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n\n      const mgInputText = mgPanel.shadowRoot.querySelector('mg-input-text');\n      const input = mgInputText.shadowRoot.querySelector('input');\n      input.checkValidity = jest.fn(() => false);\n      Object.defineProperty(input, 'validity', {\n        get: jest.fn(() => ({\n          patternMismatch: false,\n        })),\n      });\n\n      // second update title with a falsy update title\n      input.value = updatedPanelTitle;\n      input.dispatchEvent(new CustomEvent('input', { bubbles: true }));\n      await page.waitForChanges();\n\n      input.dispatchEvent(new CustomEvent('blur', { bubbles: true }));\n      await page.waitForChanges();\n\n      // and click on validate button\n      const afterInputAction = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-input-text mg-button:last-of-type');\n\n      afterInputAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      jest.runOnlyPendingTimers();\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n\n      expect(mgPanel.panelTitle).toBe(args.panelTitle);\n      expect(page.rootInstance.titleChange.emit).not.toHaveBeenCalledWith(updatedPanelTitle);\n\n      // finaly return to default view by clicking on cancel button\n      const cancelAction = mgPanel.shadowRoot.querySelector('.mg-panel__header-title mg-input-text mg-button:last-of-type');\n\n      cancelAction.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n      jest.runOnlyPendingTimers();\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n  });\n});\n"]}

package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js

@@ -1,6 +1,6 @@
-import { Host, h } from '@stencil/core';
-import { isTagName, ClassList } from '../../../../utils/components.utils';
-import { initLocales } from '../../../../locales';
+import { Host, h } from "@stencil/core";
+import { isTagName, ClassList } from "../../../../utils/components.utils";
+import { initLocales } from "../../../../locales";
 export class MgPopoverContent {
   constructor() {
     /**
@@ -98,3 +98,4 @@ export class MgPopoverContent {
   }
   static get elementRef() { return "element"; }
 }
+//# sourceMappingURL=mg-popover-content.js.map

package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-popover-content.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-popover/mg-popover-content/mg-popover-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAOlD,MAAM,OAAO,gBAAgB;;IAgC3B;;OAEG;IACK,sBAAiB,GAAG,GAAS,EAAE;MACrC,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;IAC1B,CAAC,CAAC;uBAjBoB,KAAK;2BAKW,IAAI,SAAS,CAAC,CAAC,oBAAoB,CAAC,CAAC;;EAc3E;;iBAEe;EAEf;;KAEG;EACH,iBAAiB;IACf,cAAc;IACd,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;EACrD,CAAC;EAED;;KAEG;EACH,gBAAgB;IACd,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAEzD,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACzE,IAAI,mBAAmB,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE,WAAW,CAAC,EAAE;MACvE,MAAM,IAAI,KAAK,CAAC,iDAAiD,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC5F;EACH,CAAC;EAED;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAS,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;QACxC,IAAI,CAAC,WAAW,IAAI,CACnB,kCAAmB,OAAO,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,iBAAiB;UACnG,eAAS,IAAI,EAAC,OAAO,GAAW,CACtB,CACb;QACD,WAAK,KAAK,EAAC,2BAA2B;UACpC,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB;QACN,YAAM,IAAI,EAAC,SAAS,GAAQ,CACpB;MACV,YAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop, EventEmitter, Event, State } from '@stencil/core';\nimport { isTagName, ClassList } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n  tag: 'mg-popover-content',\n  styleUrl: 'mg-popover-content.scss',\n  shadow: true,\n})\nexport class MgPopoverContent {\n  /************\n   * Internal *\n   ************/\n\n  // Locales\n  private messages;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPopoverContentElement;\n\n  /**\n   * Define if popover has a cross button\n   */\n  @Prop() closeButton = false;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-popover-content']);\n\n  /**\n   * Emited event when close button is clicked\n   */\n  @Event({ eventName: 'hide-content' }) hideContent: EventEmitter<string>;\n\n  /**\n   * Handle action for close button\n   */\n  private handleCloseButton = (): void => {\n    this.hideContent.emit();\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are valide\n   */\n  componentWillLoad(): void {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n  }\n\n  /**\n   * Check if component slots are valide\n   */\n  componentDidLoad(): void {\n    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\n\n    const slottedTitleElement = this.element.querySelector('[slot=\"title\"]');\n    if (slottedTitleElement && !isTagName(slottedTitleElement, headingTags)) {\n      throw new Error(`<mg-popover> Slotted title must be a heading: ${headingTags.join(', ')}`);\n    }\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <mg-card class={this.classCollection.join()}>\n          {this.closeButton && (\n            <mg-button is-icon variant=\"flat\" label={this.messages.general.close} onClick={this.handleCloseButton}>\n              <mg-icon icon=\"cross\"></mg-icon>\n            </mg-button>\n          )}\n          <div class=\"mg-popover-content__title\">\n            <slot name=\"title\"></slot>\n          </div>\n          <slot name=\"content\"></slot>\n        </mg-card>\n        <slot name=\"arrow\"></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/mg-popover/mg-popover.js

@@ -1,6 +1,6 @@
-import { Host, h } from '@stencil/core';
-import { createID, getWindows } from '../../../utils/components.utils';
-import { createPopper } from '@popperjs/core';
+import { Host, h } from "@stencil/core";
+import { createID, getWindows } from "../../../utils/components.utils";
+import { createPopper } from "@popperjs/core";
 export class MgPopover {
   constructor() {
     /**
@@ -203,7 +203,8 @@ export class MgPopover {
           "references": {
             "Placement": {
               "location": "import",
-              "path": "@popperjs/core"
+              "path": "@popperjs/core",
+              "id": "../../node_modules/.pnpm/@popperjs+core@2.11.7/node_modules/@popperjs/core/index.d.ts::Placement"
             }
           }
         },
@@ -323,3 +324,4 @@ export class MgPopover {
       }];
   }
 }
+//# sourceMappingURL=mg-popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mg-popover.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-popover/mg-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, Watch, EventEmitter, Event } from '@stencil/core';\nimport { createID, getWindows } from '../../../utils/components.utils';\nimport { Instance as PopperInstance, createPopper, Placement } from '@popperjs/core';\n\n@Component({\n  tag: 'mg-popover',\n  styleUrl: 'mg-popover.scss',\n  shadow: true,\n})\nexport class MgPopover {\n  /************\n   * Internal *\n   ************/\n\n  private popper: PopperInstance;\n  private mgPopover: HTMLElement;\n  private mgPopoverContent: HTMLMgPopoverContentElement;\n  private windows: Window[];\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgPopoverElement;\n\n  /**\n   * Sets an `id` attribute.\n   * Needed by the input for accessibility `aria-decribedby`.\n   */\n  @Prop() identifier: string = createID('mg-popover');\n\n  /**\n   * Popover placement\n   */\n  @Prop() placement: Placement = 'bottom';\n\n  /**\n   * Hide popover arrow\n   */\n  @Prop() arrowHide = false;\n  @Watch('arrowHide')\n  validateArrowHide(newValue: MgPopover['arrowHide']): void {\n    if (newValue) this.mgPopoverContent.dataset.arrowHide = '';\n    else delete this.mgPopoverContent.dataset.arrowHide;\n  }\n\n  /**\n   * Define if popover has a cross button\n   */\n  @Prop() closeButton = false;\n  @Watch('closeButton')\n  validateCloseButton(newValue: MgPopover['arrowHide']): void {\n    this.mgPopoverContent.closeButton = newValue;\n  }\n\n  /**\n   * Display popover\n   */\n  @Prop({ mutable: true }) display = false;\n  @Watch('display')\n  handleDisplay(newValue: boolean): void {\n    if (newValue) {\n      this.show();\n    } else {\n      this.hide();\n    }\n    this.displayChange.emit(newValue);\n  }\n\n  /**\n   * Disable popover\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Emited event when display value change\n   */\n  @Event({ eventName: 'display-change' }) displayChange: EventEmitter<boolean>;\n\n  /**\n   * Check if clicked outside of component\n   * @param event - mouse event\n   */\n  private clickOutside = (event: MouseEvent & { target: HTMLElement }): void => {\n    const closestElement: HTMLElement = event.target.closest(`[data-mg-popover-guard]`);\n    if (!this.disabled && event.target.closest('mg-popover') !== this.element && closestElement?.dataset.mgPopoverGuard !== this.identifier) {\n      this.display = false;\n    }\n  };\n\n  /**\n   * Show popover\n   */\n  private show = (): void => {\n    // Make the popover visible\n    this.mgPopover.dataset.show = '';\n    // Enable the event listeners\n    this.popper.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }],\n    }));\n    // hide when click outside\n    // setTimeout is used to prevent event to trigger after creation\n    setTimeout(() => {\n      this.windows.forEach((localWindow: Window) => {\n        localWindow.addEventListener('click', this.clickOutside, false);\n      });\n    }, 0);\n  };\n\n  /**\n   * Hide popover\n   */\n  private hide = (): void => {\n    // Hide the popover\n    this.mgPopover.removeAttribute('data-show');\n    // Disable the event listeners\n    this.popper.setOptions(options => ({\n      ...options,\n      modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }],\n    }));\n    // Remove event listener\n    this.windows.forEach((localWindow: Window) => {\n      localWindow.removeEventListener('click', this.clickOutside, false);\n    });\n  };\n\n  /**\n   * Handle content hide event\n   */\n  private handleHideContent = (): void => {\n    this.display = false;\n  };\n\n  /**\n   * Render popover content element\n   */\n  private renderPopoverContent = (): void => {\n    this.mgPopoverContent = document.createElement('mg-popover-content');\n    this.mgPopoverContent.setAttribute('slot', 'content');\n    this.mgPopoverContent.setAttribute('id', this.identifier);\n    this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);\n\n    const arrow = document.createElement('div');\n    arrow.setAttribute('slot', 'arrow');\n    arrow.dataset.popperArrow = '';\n    this.mgPopoverContent.appendChild(arrow);\n\n    // insert elements in DOM\n    ['[slot=\"title\"]', '[slot=\"content\"]:not(mg-popover-content)'].forEach(slotType => {\n      Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {\n        this.mgPopoverContent.appendChild(slot);\n      });\n    });\n    this.element.appendChild(this.mgPopoverContent);\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * update popper position after props change on component did update hook to benefit from render ended\n   */\n  componentDidUpdate(): void {\n    this.popper.update();\n  }\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Get windows to attach events\n    this.windows = getWindows(window);\n    // render mg-popover-content slot\n    this.renderPopoverContent();\n    this.validateCloseButton(this.closeButton);\n    this.validateArrowHide(this.arrowHide);\n  }\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentDidLoad(): void {\n    // Get popover content\n    this.mgPopover = this.element.querySelector(`#${this.identifier}`);\n\n    //Get interactive element (first element without slot attribute)\n    const interactiveElement: HTMLElement = this.element.querySelector(':not([slot])');\n    // Add aria attributes\n    interactiveElement.setAttribute('aria-controls', this.identifier);\n    interactiveElement.setAttribute('aria-expanded', `${this.display}`);\n\n    // Create popperjs popover\n    this.popper = createPopper(interactiveElement, this.mgPopover, {\n      placement: this.placement,\n      strategy: 'fixed',\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [0, 0],\n          },\n        },\n      ],\n    });\n\n    // add resize observer\n    new ResizeObserver(() => {\n      this.popper.update();\n    }).observe(this.element.querySelector('mg-popover-content'));\n\n    // Add events to toggle display\n    interactiveElement.addEventListener('click', () => {\n      if (!this.disabled) this.display = !this.display;\n    });\n\n    // Add events to hide popover\n    this.element.addEventListener('keydown', e => {\n      if (!this.disabled && e.code === 'Escape') {\n        this.display = false;\n        interactiveElement.focus();\n      }\n    });\n\n    this.handleDisplay(this.display);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <Host>\n        <slot></slot>\n        <slot name=\"content\"></slot>\n      </Host>\n    );\n  }\n}\n"]}