@mgdis/mg-components 5.19.0 → 5.19.2

package/dist/types/components/atoms/mg-input-title/mg-input-title.d.ts

@@ -8,6 +8,10 @@ export declare class MgInputTitle {
    * If input is required an asterisk is added at the end of the label
    */
   required: boolean;
+  /**
+   * If input is required an asterisk is added at the end of the label
+   */
+  readonly: boolean;
   /**
    * Switch from label to fieldset sementic
    */

package/dist/types/components/atoms/mg-input-title/test/mg-input-title.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.d.ts

@@ -23,6 +23,10 @@ export declare class MgInputCheckboxPaginated implements IMgInputCheckboxBase {
    * Define mg-input-checkbox input name
    */
   name: string;
+  /**
+   * Define mg-input-checkbox input invalid
+   */
+  invalid: boolean;
   /**
    * Define checkboxes to paginate
    */

package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.d.ts

@@ -30,10 +30,6 @@ export declare const checkboxTypes: readonly ["checkbox", "multi"];
  * ChecboxType from checkbox types
  */
 export type CheckboxType = (typeof checkboxTypes)[number];
-/**
- * Search value type
- */
-export type SearchValueType = string;
 /**
  * mg-input-checkbox-paginated section kind
  */
@@ -55,6 +51,7 @@ export interface IMgInputCheckboxBase {
   readonly: boolean;
   disabled: boolean;
   name: string;
+  invalid: boolean;
 }
 /**
  * mg-input-checkbox-list interface

package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '../../../../utils/components.utils';
-import { CheckboxItem, CheckboxType, CheckboxValue, SearchValueType, MgInputCheckboxListProps } from './mg-input-checkbox.conf';
+import { CheckboxItem, CheckboxType, CheckboxValue, MgInputCheckboxListProps } from './mg-input-checkbox.conf';
 export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, 'id' | 'checkboxes' | 'messages'> {
   /************
    * Internal *
@@ -116,7 +116,7 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
   /**
    * Search value query
    */
-  searchValue: SearchValueType;
+  searchValue: string;
   validateSearchValue(): void;
   /**
    * Search current page

package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.conf.d.ts

@@ -1,12 +1,9 @@
 /**
- * List of all availables text type
+ * List of all available text types
  */
-export declare const textTypes: readonly ["text", "search"];
+declare const textTypes: readonly ["text", "search"];
 /**
  * TextType from text types
  */
 export type TextType = (typeof textTypes)[number];
-/**
- * Type for datalist option
- */
-export type DatalistOption = string;
+export {};

package/dist/types/components/molecules/inputs/mg-input-text/mg-input-text.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { Width } from '../MgInput.conf';
 import { ClassList } from '../../../../utils/components.utils';
-import { DatalistOption, TextType } from './mg-input-text.conf';
+import { TextType } from './mg-input-text.conf';
 export declare class MgInputText {
   /************
    * Internal *
@@ -64,7 +64,7 @@ export declare class MgInputText {
   /**
    * Define datalist options
    */
-  datalistoptions: DatalistOption[];
+  datalistoptions: string[];
   validateDatalistoptions(newValue: MgInputText['datalistoptions']): void;
   /**
    * Input max length

package/dist/types/components/molecules/inputs/mg-input-toggle/mg-input-toggle.d.ts

@@ -84,6 +84,14 @@ export declare class MgInputToggle {
    * Formated items for display
    */
   options: ToggleValue[];
+  /**
+   * Error message to display
+   */
+  errorMessage: string;
+  /**
+   * Define input valid state
+   */
+  valid: boolean;
   /**
    * Checked internal value
    */
@@ -97,6 +105,20 @@ export declare class MgInputToggle {
    * Emited event when checking validity
    */
   inputValid: EventEmitter<boolean>;
+  /**
+   * Set an error and display a custom error message.
+   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
+   * It must be paired with an error message to display for the given context.
+   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+   * @param valid - value indicating the validity
+   * @param errorMessage - the error message to display
+   */
+  setError(valid: boolean, errorMessage: string): Promise<void>;
+  /**
+   * Set input error message
+   * @param errorMessage - errorMessage override
+   */
+  private setErrorMessage;
   /**
    * Change checked value
    */

package/dist/types/components/molecules/inputs/mg-input-toggle/test/mg-input-toggle.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/molecules/menu/mg-menu/test/mg-menu.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/molecules/menu/mg-menu-item/test/mg-menu-item.e2e.playwright.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/molecules/mg-action-more/mg-action-more.conf.d.ts

@@ -36,7 +36,5 @@ export type MgActionMoreItemType = {
 /**
  * MouseEvent callback interface
  */
-interface IMouseEventHandler {
-  (event: MouseEvent): void;
-}
+type IMouseEventHandler = (event: MouseEvent) => void;
 export {};

package/dist/types/components.d.ts

@@ -14,7 +14,7 @@ import { CheckboxItem, CheckboxType, CheckboxValue, SectionKind } from "./compon
 import { Width } from "./components/molecules/inputs/MgInput.conf";
 import { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
 import { SelectOption } from "./components/molecules/inputs/mg-input-select/mg-input-select.conf";
-import { DatalistOption, TextType } from "./components/molecules/inputs/mg-input-text/mg-input-text.conf";
+import { TextType } from "./components/molecules/inputs/mg-input-text/mg-input-text.conf";
 import { ToggleValue } from "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf";
 import { IconType, SizeType, SlotLabelType } from "./components/molecules/mg-item-more/mg-item-more.conf";
 import { Direction, ItemMoreType, MenuSizeType } from "./components/molecules/menu/mg-menu/mg-menu.conf";
@@ -35,7 +35,7 @@ export { CheckboxItem, CheckboxType, CheckboxValue, SectionKind } from "./compon
 export { Width } from "./components/molecules/inputs/MgInput.conf";
 export { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
 export { SelectOption } from "./components/molecules/inputs/mg-input-select/mg-input-select.conf";
-export { DatalistOption, TextType } from "./components/molecules/inputs/mg-input-text/mg-input-text.conf";
+export { TextType } from "./components/molecules/inputs/mg-input-text/mg-input-text.conf";
 export { ToggleValue } from "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf";
 export { IconType, SizeType, SlotLabelType } from "./components/molecules/mg-item-more/mg-item-more.conf";
 export { Direction, ItemMoreType, MenuSizeType } from "./components/molecules/menu/mg-menu/mg-menu.conf";
@@ -320,6 +320,10 @@ export namespace Components {
           * Define if mg-input-checkbox-list is disabled
          */
         "disabled": boolean;
+        /**
+          * Define mg-input-checkbox input invalid
+         */
+        "invalid": boolean;
         /**
           * Define component message
          */
@@ -737,7 +741,7 @@ export namespace Components {
         /**
           * Define datalist options
          */
-        "datalistoptions": DatalistOption[];
+        "datalistoptions": string[];
         /**
           * Define if input is disabled
          */
@@ -942,6 +946,10 @@ export namespace Components {
           * Switch from label to fieldset sementic
          */
         "isLegend": boolean;
+        /**
+          * If input is required an asterisk is added at the end of the label
+         */
+        "readonly": boolean;
         /**
           * If input is required an asterisk is added at the end of the label
          */
@@ -992,6 +1000,12 @@ export namespace Components {
           * Define if input is readonly
          */
         "readonly": boolean;
+        /**
+          * Set an error and display a custom error message. This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter. It must be paired with an error message to display for the given context. When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+          * @param valid - value indicating the validity
+          * @param errorMessage - the error message to display
+         */
+        "setError": (valid: boolean, errorMessage: string) => Promise<void>;
         /**
           * Add a tooltip message next to the input
          */
@@ -1885,6 +1899,10 @@ declare namespace LocalJSX {
           * Define if mg-input-checkbox-list is disabled
          */
         "disabled"?: boolean;
+        /**
+          * Define mg-input-checkbox input invalid
+         */
+        "invalid"?: boolean;
         /**
           * Define component message
          */
@@ -2296,7 +2314,7 @@ declare namespace LocalJSX {
         /**
           * Define datalist options
          */
-        "datalistoptions"?: DatalistOption[];
+        "datalistoptions"?: string[];
         /**
           * Define if input is disabled
          */
@@ -2493,6 +2511,10 @@ declare namespace LocalJSX {
           * Switch from label to fieldset sementic
          */
         "isLegend"?: boolean;
+        /**
+          * If input is required an asterisk is added at the end of the label
+         */
+        "readonly"?: boolean;
         /**
           * If input is required an asterisk is added at the end of the label
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.19.0",
+  "version": "5.19.2",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -72,8 +72,8 @@
     "style-loader": "^2.0.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.0.0",
-    "eslint-config-stencil": "1.1.1",
     "@mgdis/linting-stencil": "1.1.0",
+    "eslint-config-stencil": "1.1.1",
     "playwright-config": "1.0.0",
     "tsconfig": "1.0.0"
   },
@@ -84,10 +84,10 @@
     "start": "pnpm prebuild && stencil build --dev --watch --serve",
     "lint": "pnpm lint:es && pnpm lint:prettier",
     "lint:fix": "pnpm lint:es:fix && pnpm lint:prettier:fix",
-    "lint:es": "eslint src/**/*.{ts,tsx}",
-    "lint:es:fix": "eslint src/**/*.{ts,tsx} --fix",
-    "lint:prettier": "prettier --check **/*.{ts,tsx,html,mdx,json}",
-    "lint:prettier:fix": "prettier --write **/*.{ts,tsx,html,mdx,json}",
+    "lint:es": "eslint 'src/**/*.{ts,tsx}'",
+    "lint:es:fix": "eslint 'src/**/*.{ts,tsx}' --fix",
+    "lint:prettier": "prettier --check '**/*.{ts,tsx,html,mdx,json}'",
+    "lint:prettier:fix": "prettier --write '**/*.{ts,tsx,html,mdx,json}'",
     "test": "TZ=UTC stencil test --spec --e2e",
     "test:unit": "TZ=UTC stencil test --spec --collectCoverage",
     "test:e2e": "pnpm prebuild && stencil test --e2e --collectCoverage --collectCoverageFrom=\"src/**/*.e2e.ts\" --reporters=\"default\" --reporters=\"jest-junit\"",

package/dist/collection/components/atoms/mg-input-title/test/mg-input-title.e2e.js

@@ -1,18 +0,0 @@
-import { createPage } from "../../../../utils/stencil.e2e.test.utils";
-describe('mg-input-title', () => {
-  test('Should render', async () => {
-    const props = [
-      { isLegend: false, required: false },
-      { isLegend: false, required: true },
-      { isLegend: true, required: false },
-      { isLegend: true, required: true },
-    ];
-    const html = props
-      .map(({ isLegend, required }) => `<div><mg-input-title identifier="identifier" is-legend="${isLegend}" required=${required}>Label</mg-input-title></div>`)
-      .join('');
-    const page = await createPage(html, { width: 50, height: 75 });
-    const screenshot = await page.screenshot();
-    expect(screenshot).toMatchImageSnapshot();
-  });
-});
-//# sourceMappingURL=mg-input-title.e2e.js.map

package/dist/collection/components/atoms/mg-input-title/test/mg-input-title.e2e.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mg-input-title.e2e.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-input-title/test/mg-input-title.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAEtE,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,IAAI,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC/B,MAAM,KAAK,GAAG;MACZ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE;MACpC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE;MACnC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;MACnC,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE;KACnC,CAAC;IACF,MAAM,IAAI,GAAG,KAAK;OACf,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,2DAA2D,QAAQ,cAAc,QAAQ,+BAA+B,CAAC;OACzJ,IAAI,CAAC,EAAE,CAAC,CAAC;IACZ,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAE/D,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;EAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { createPage } from '../../../../utils/stencil.e2e.test.utils';\n\ndescribe('mg-input-title', () => {\n  test('Should render', async () => {\n    const props = [\n      { isLegend: false, required: false },\n      { isLegend: false, required: true },\n      { isLegend: true, required: false },\n      { isLegend: true, required: true },\n    ];\n    const html = props\n      .map(({ isLegend, required }) => `<div><mg-input-title identifier=\"identifier\" is-legend=\"${isLegend}\" required=${required}>Label</mg-input-title></div>`)\n      .join('');\n    const page = await createPage(html, { width: 50, height: 75 });\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n});\n"]}

package/dist/collection/components/molecules/inputs/mg-input-toggle/test/mg-input-toggle.e2e.js

@@ -1,125 +0,0 @@
-import { createPage } from "../../../../../utils/stencil.e2e.test.utils";
-const defaultSlots = '<span slot="item-1">Choix A</span><span slot="item-2">Choix B</span>';
-describe('mg-input-toggle', () => {
-  test.each([
-    `<mg-input-toggle identifier="identifier" label="label">${defaultSlots}</mg-input-toggle>`,
-    `<mg-input-toggle identifier="identifier" label="label" is-on-off><span slot="item-1">Non</span><span slot="item-2">Oui</span></mg-input-toggle>`,
-    `<mg-input-toggle identifier="identifier" label="label" is-icon is-on-off><mg-icon icon="cross" slot="item-1"></mg-icon><mg-icon icon="check" slot="item-2"></mg-icon></mg-input-toggle>`,
-    `<mg-input-toggle identifier="identifier" label="label" identifier="toggle-long-text"><span slot="item-1">Choix A très long long long long long long long long long long long long long</span><span slot="item-2">Choix B très long long long long long long long long long long long long long</span></mg-input-toggle>`,
-  ])('Keyboard navigation', async (html) => {
-    const page = await createPage(`${html}
-    <script>
-    const mgInputToggle = document.querySelector('mg-input-toggle');
-    mgInputToggle.items = [{title: 'batman', value: false}, {title: 'joker', value: true}];
-    </script>`);
-    const element = await page.find('mg-input-toggle');
-    const toggle = await page.find('mg-input-toggle >>> button');
-    expect(element).toHaveClass('hydrated');
-    const screenshot = await page.screenshot();
-    expect(screenshot).toMatchImageSnapshot();
-    await page.keyboard.down('Tab');
-    await page.waitForChanges();
-    const screenshotFocus = await page.screenshot();
-    expect(screenshotFocus).toMatchImageSnapshot();
-    await toggle.press('Space');
-    await page.waitForChanges();
-    const screenshotSelection = await page.screenshot();
-    expect(screenshotSelection).toMatchImageSnapshot();
-    await page.keyboard.down('Tab');
-    await page.waitForChanges();
-    const screenshotUnSelect = await page.screenshot();
-    expect(screenshotUnSelect).toMatchImageSnapshot();
-  });
-  test.each([
-    `<mg-input-toggle identifier="identifier" label="label" label-on-top help-text="HelpText Message">${defaultSlots}</mg-input-toggle>`,
-    `<mg-input-toggle identifier="identifier" label="label" input-vertical-list help-text="HelpText Message">${defaultSlots}</mg-input-toggle>`,
-    `<mg-input-toggle identifier="identifier" label="label" label-on-top input-vertical-list help-text="HelpText Message">${defaultSlots}</mg-input-toggle>`,
-    `<mg-input-toggle identifier="identifier" label="label" identifier="toggle-long-text"><span slot="item-1">Choix A très long long long long long long long long long long long long long</span><span slot="item-2">Choix B très long long long long long long long long long long long long long</span></mg-input-toggle>`,
-    `<mg-input-toggle identifier="identifier" label="label" identifier="toggle-long-text-readonly" readonly><span slot="item-1">Choix A avec text long long</span><span slot="item-2">Choix B avec text long long</span></mg-input-toggle>`,
-    `<mg-input-toggle identifier="identifier" label="label" label-hide>${defaultSlots}</mg-input-toggle>`,
-    `<mg-input-toggle identifier="identifier" label="label" is-on-off readonly><span slot="item-1">Off</span><span slot="item-2">On</span></mg-input-toggle>`,
-    `<mg-input-toggle identifier="identifier" label="label" placeholder="placeholder" help-text="HelpText Message">${defaultSlots}</mg-input-toggle>`,
-    `<mg-input-toggle identifier="identifier" label="label" help-text='<mg-icon icon="user" size="small"></mg-icon> Welcome batman'>${defaultSlots}</mg-input-toggle>`,
-  ])('Render without tooltip', async (html) => {
-    const page = await createPage(`${html}
-      <script>
-      const mgInputToggle = document.querySelector('mg-input-toggle');
-      mgInputToggle.items = [{title: 'batman', value: false}, {title: 'joker', value: true}];
-      </script>`);
-    const element = await page.find('mg-input-toggle');
-    expect(element).toHaveClass('hydrated');
-    const screenshot = await page.screenshot();
-    expect(screenshot).toMatchImageSnapshot();
-  });
-  test.each([undefined, false, true])('Render and toggle value whith reverse checked logic', async (value) => {
-    const page = await createPage(`${`<mg-input-toggle identifier="identifier" label="label">${defaultSlots}</mg-input-toggle>`}
-      <script>
-      const mgInputToggle = document.querySelector('mg-input-toggle');
-      mgInputToggle.items = [{title: 'batman', value: true}, {title: 'joker', value: false}];
-      mgInputToggle.value = ${value};
-      </script>`);
-    const element = await page.find('mg-input-toggle');
-    const button = await page.find('mg-input-toggle >>> button');
-    expect(element).toHaveClass('hydrated');
-    const screenshot = await page.screenshot();
-    expect(screenshot).toMatchImageSnapshot();
-    await button.click();
-    const screenshot2 = await page.screenshot();
-    expect(screenshot2).toMatchImageSnapshot();
-  });
-  test.each([true, false])('render with tooltip, case label-on-top %s', async (labelOnTop) => {
-    const page = await createPage(`<mg-input-toggle identifier="identifier" label="label" tooltip="Tooltip message" label-on-top="${labelOnTop}">${defaultSlots}</mg-input-toggle>
-      <script>
-      const mgInputToggle = document.querySelector('mg-input-toggle');
-      mgInputToggle.items = [{title: 'batman', value: false}, {title: 'joker', value: true}];
-      </script>`);
-    const element = await page.find('mg-input-toggle');
-    expect(element).toHaveClass('hydrated');
-    const screenshot = await page.screenshot();
-    expect(screenshot).toMatchImageSnapshot();
-    await page.keyboard.down('Tab');
-    if (!labelOnTop) {
-      // Ensure to display tooltip
-      await page.setViewport({ width: 600, height: 65 });
-      // when label on top tooltip is on fist tab (next to label)
-      await page.keyboard.down('Tab');
-    }
-    const screenshotTooltip = await page.screenshot();
-    expect(screenshotTooltip).toMatchImageSnapshot();
-  });
-  test.each([
-    `<mg-input-toggle identifier="identifier" label="label" readonly>${defaultSlots}</mg-input-toggle>`,
-    `<mg-input-toggle identifier="identifier" label="label" value="true">${defaultSlots}</mg-input-toggle>`,
-    `<mg-input-toggle identifier="identifier" label="label" value="true" readonly>${defaultSlots}</mg-input-toggle>`,
-    `<mg-input-toggle identifier="identifier" label="label" value="true" readonly label-on-top>${defaultSlots}</mg-input-toggle>`,
-    `<mg-input-toggle identifier="identifier" label="label" disabled>${defaultSlots}</mg-input-toggle>`,
-    `<mg-input-toggle identifier="identifier" label="label" value="true" disabled>${defaultSlots}</mg-input-toggle>`,
-  ])('Should render with template', async (html) => {
-    const page = await createPage(`${html}
-      <script>
-      const mgInputToggle = document.querySelector('mg-input-toggle');
-      mgInputToggle.items = [{title: 'batman', value: false}, {title: 'joker', value: true}];
-      </script>`);
-    const element = await page.find('mg-input-toggle');
-    expect(element).toHaveClass('hydrated');
-    const screenshot = await page.screenshot();
-    expect(screenshot).toMatchImageSnapshot();
-  });
-  describe.each([
-    `<mg-input-toggle identifier="identifier" label="long label long label long label long label long label long label long label long label long label long label long label" tooltip="tooltip message">${defaultSlots}</mg-input-toggle>`,
-    `<mg-input-toggle identifier="identifier" label="long label long label long label long label long label long label long label long label long label long label long label" tooltip="tooltip message" label-on-top>${defaultSlots}</mg-input-toggle>`,
-  ])('inside a div.mg-form-group', html => {
-    test('render', async () => {
-      const page = await createPage(`<div class="mg-form-group">${html}</div>
-      <script>
-      const mgInputToggle = document.querySelector('mg-input-toggle');
-      mgInputToggle.items = [{title: 'batman', value: false}, {title: 'joker', value: true}];
-      </script>`);
-      const element = await page.find('mg-input-toggle');
-      expect(element).toHaveClass('hydrated');
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
-    });
-  });
-});
-//# sourceMappingURL=mg-input-toggle.e2e.js.map

package/dist/collection/components/molecules/inputs/mg-input-toggle/test/mg-input-toggle.e2e.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"mg-input-toggle.e2e.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/inputs/mg-input-toggle/test/mg-input-toggle.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { createPage } from '../../../../../utils/stencil.e2e.test.utils';\n\nconst defaultSlots = '<span slot=\"item-1\">Choix A</span><span slot=\"item-2\">Choix B</span>';\n\ndescribe('mg-input-toggle', () => {\n  test.each([\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\">${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" is-on-off><span slot=\"item-1\">Non</span><span slot=\"item-2\">Oui</span></mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" is-icon is-on-off><mg-icon icon=\"cross\" slot=\"item-1\"></mg-icon><mg-icon icon=\"check\" slot=\"item-2\"></mg-icon></mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" identifier=\"toggle-long-text\"><span slot=\"item-1\">Choix A très long long long long long long long long long long long long long</span><span slot=\"item-2\">Choix B très long long long long long long long long long long long long long</span></mg-input-toggle>`,\n  ])('Keyboard navigation', async html => {\n    const page = await createPage(`${html}\n    <script>\n    const mgInputToggle = document.querySelector('mg-input-toggle');\n    mgInputToggle.items = [{title: 'batman', value: false}, {title: 'joker', value: true}];\n    </script>`);\n\n    const element = await page.find('mg-input-toggle');\n    const toggle = await page.find('mg-input-toggle >>> button');\n\n    expect(element).toHaveClass('hydrated');\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n\n    await page.keyboard.down('Tab');\n\n    await page.waitForChanges();\n\n    const screenshotFocus = await page.screenshot();\n    expect(screenshotFocus).toMatchImageSnapshot();\n\n    await toggle.press('Space');\n\n    await page.waitForChanges();\n\n    const screenshotSelection = await page.screenshot();\n    expect(screenshotSelection).toMatchImageSnapshot();\n\n    await page.keyboard.down('Tab');\n\n    await page.waitForChanges();\n\n    const screenshotUnSelect = await page.screenshot();\n    expect(screenshotUnSelect).toMatchImageSnapshot();\n  });\n\n  test.each([\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" label-on-top help-text=\"HelpText Message\">${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" input-vertical-list help-text=\"HelpText Message\">${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" label-on-top input-vertical-list help-text=\"HelpText Message\">${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" identifier=\"toggle-long-text\"><span slot=\"item-1\">Choix A très long long long long long long long long long long long long long</span><span slot=\"item-2\">Choix B très long long long long long long long long long long long long long</span></mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" identifier=\"toggle-long-text-readonly\" readonly><span slot=\"item-1\">Choix A avec text long long</span><span slot=\"item-2\">Choix B avec text long long</span></mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" label-hide>${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" is-on-off readonly><span slot=\"item-1\">Off</span><span slot=\"item-2\">On</span></mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" placeholder=\"placeholder\" help-text=\"HelpText Message\">${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" help-text='<mg-icon icon=\"user\" size=\"small\"></mg-icon> Welcome batman'>${defaultSlots}</mg-input-toggle>`,\n  ])('Render without tooltip', async html => {\n    const page = await createPage(`${html}\n      <script>\n      const mgInputToggle = document.querySelector('mg-input-toggle');\n      mgInputToggle.items = [{title: 'batman', value: false}, {title: 'joker', value: true}];\n      </script>`);\n\n    const element = await page.find('mg-input-toggle');\n\n    expect(element).toHaveClass('hydrated');\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  test.each([undefined, false, true])('Render and toggle value whith reverse checked logic', async value => {\n    const page = await createPage(`${`<mg-input-toggle identifier=\"identifier\" label=\"label\">${defaultSlots}</mg-input-toggle>`}\n      <script>\n      const mgInputToggle = document.querySelector('mg-input-toggle');\n      mgInputToggle.items = [{title: 'batman', value: true}, {title: 'joker', value: false}];\n      mgInputToggle.value = ${value};\n      </script>`);\n\n    const element = await page.find('mg-input-toggle');\n    const button = await page.find('mg-input-toggle >>> button');\n\n    expect(element).toHaveClass('hydrated');\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n\n    await button.click();\n\n    const screenshot2 = await page.screenshot();\n    expect(screenshot2).toMatchImageSnapshot();\n  });\n\n  test.each([true, false])('render with tooltip, case label-on-top %s', async labelOnTop => {\n    const page = await createPage(`<mg-input-toggle identifier=\"identifier\" label=\"label\" tooltip=\"Tooltip message\" label-on-top=\"${labelOnTop}\">${defaultSlots}</mg-input-toggle>\n      <script>\n      const mgInputToggle = document.querySelector('mg-input-toggle');\n      mgInputToggle.items = [{title: 'batman', value: false}, {title: 'joker', value: true}];\n      </script>`);\n\n    const element = await page.find('mg-input-toggle');\n\n    expect(element).toHaveClass('hydrated');\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n\n    await page.keyboard.down('Tab');\n    if (!labelOnTop) {\n      // Ensure to display tooltip\n      await page.setViewport({ width: 600, height: 65 });\n      // when label on top tooltip is on fist tab (next to label)\n      await page.keyboard.down('Tab');\n    }\n\n    const screenshotTooltip = await page.screenshot();\n    expect(screenshotTooltip).toMatchImageSnapshot();\n  });\n\n  test.each([\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" readonly>${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" value=\"true\">${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" value=\"true\" readonly>${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" value=\"true\" readonly label-on-top>${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" disabled>${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"label\" value=\"true\" disabled>${defaultSlots}</mg-input-toggle>`,\n  ])('Should render with template', async html => {\n    const page = await createPage(`${html}\n      <script>\n      const mgInputToggle = document.querySelector('mg-input-toggle');\n      mgInputToggle.items = [{title: 'batman', value: false}, {title: 'joker', value: true}];\n      </script>`);\n\n    const element = await page.find('mg-input-toggle');\n\n    expect(element).toHaveClass('hydrated');\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  describe.each([\n    `<mg-input-toggle identifier=\"identifier\" label=\"long label long label long label long label long label long label long label long label long label long label long label\" tooltip=\"tooltip message\">${defaultSlots}</mg-input-toggle>`,\n    `<mg-input-toggle identifier=\"identifier\" label=\"long label long label long label long label long label long label long label long label long label long label long label\" tooltip=\"tooltip message\" label-on-top>${defaultSlots}</mg-input-toggle>`,\n  ])('inside a div.mg-form-group', html => {\n    test('render', async () => {\n      const page = await createPage(`<div class=\"mg-form-group\">${html}</div>\n      <script>\n      const mgInputToggle = document.querySelector('mg-input-toggle');\n      mgInputToggle.items = [{title: 'batman', value: false}, {title: 'joker', value: true}];\n      </script>`);\n\n      const element = await page.find('mg-input-toggle');\n\n      expect(element).toHaveClass('hydrated');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n    });\n  });\n});\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"mg-menu.e2e.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/menu/mg-menu/test/mg-menu.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { KeyInput } from 'puppeteer';\nimport { createPage, DesignSystemE2EPage } from '../../../../../utils/stencil.e2e.test.utils';\nimport { renderAttributes } from '../../../../../utils/e2e.test.utils';\nimport { Direction, MenuSizeType, sizes } from '../mg-menu.conf';\n\nenum Position {\n  PRESS = 'press',\n  DOWN = 'down',\n}\n\nenum Key {\n  TAB = 'Tab',\n  SHIFT = 'Shift',\n  ENTER = 'Enter',\n}\n\nconst expectImageSnapshot = async (page: DesignSystemE2EPage) => {\n  await page.waitForChanges();\n  await page.waitForTimeout(200);\n  const screenshot = await page.screenshot();\n  expect(screenshot).toMatchImageSnapshot();\n};\n\nconst getSubMenuSize = (size: MenuSizeType) => {\n  if (size === 'large') return 'medium';\n  else if (size === 'medium') return 'regular';\n  else return 'regular';\n};\n\nconst getFrameSize = (direction, size?) =>\n  direction === Direction.VERTICAL\n    ? { width: 400, height: ['medium', 'large'].includes(size) ? 400 : 250 }\n    : { width: ['medium', 'large'].includes(size) ? 1100 : 800, height: 200 };\n\nconst createHTML = (args, containerSize?) => `\n  <header class=\"menu-container menu-container--${containerSize}\">\n    <mg-menu ${renderAttributes({ label: 'menu', ...args })}>\n      <mg-menu-item status=\"active\">\n        <span slot=\"label\">1 - head-1</span>\n        <mg-menu ${renderAttributes({ label: 'sub-menu 1', direction: Direction.VERTICAL, size: getSubMenuSize(args?.size) })}>\n          <mg-menu-item><span slot=\"label\">Batman begins</span></mg-menu-item>\n        </mg-menu>\n      </mg-menu-item>\n      <mg-menu-item status=\"disabled\"><span slot=\"label\">1 - head-2 long</span></mg-menu-item>\n      <mg-menu-item href=\"#link\">\n        <span slot=\"label\">1 - head-3 very long</span>\n        <mg-icon icon='user' slot='image'></mg-icon>\n      </mg-menu-item>\n      <mg-menu-item>\n        <span slot=\"label\">1 - head-4</span>\n        <mg-icon icon='user' slot='image'></mg-icon>\n        ${args?.badge ? \"<mg-badge value='2' label='hello' slot='information'></mg-badge>\" : ''}  \n      </mg-menu-item>\n      <mg-menu-item>\n        <span slot=\"label\">1 - head-5</span>\n        <mg-icon icon='user' slot='image'></mg-icon>\n        ${args?.badge ? \"<mg-badge value='2' label='hello' slot='information'></mg-badge>\" : ''} \n        <mg-menu ${renderAttributes({ label: 'sub-menu 2', direction: Direction.VERTICAL, size: getSubMenuSize(args?.size) })}>\n          <mg-menu-item><span slot=\"label\">Batman begins with a longer title to go outide screen</span></mg-menu-item>\n        </mg-menu>\n      </mg-menu-item>\n    </mg-menu>\n  </header>\n  <style>\n    .menu-container.menu-container--vertical-small {\n      width: 180px;\n    }\n  </style>\n  `;\n\ndescribe('mg-menu', () => {\n  describe.each([Direction.HORIZONTAL, Direction.VERTICAL])('direction %s', direction => {\n    test.each(sizes)(`should renders, case direction ${direction} size %s with large screen`, async size => {\n      const page = await createPage(createHTML({ direction, size, badge: true }), getFrameSize(direction, size));\n\n      const element = await page.find('mg-menu');\n      expect(element).toHaveClass('hydrated');\n\n      await expectImageSnapshot(page);\n    });\n  });\n\n  describe('navigation horizontal', () => {\n    test(`should success mouse navigation, case direction ${Direction.HORIZONTAL}`, async () => {\n      const page = await createPage(createHTML({ direction: Direction.HORIZONTAL }), getFrameSize(Direction.HORIZONTAL));\n      await expectImageSnapshot(page);\n\n      const actions = [\n        { position: 1, expanded: true },\n        { position: 5, expanded: true },\n        { position: 5, expanded: false },\n        { position: 1, expanded: true },\n      ];\n      for await (const action of actions) {\n        let item = await page.find(`header > mg-menu > mg-menu-item:nth-of-type(${action.position}) >>> button`);\n        await item.click();\n        await page.waitForChanges();\n\n        expect(item.getAttribute('aria-expanded')).toBe(`${action.expanded}`);\n        item = await page.find(`header > mg-menu > mg-menu-item:not(:nth-of-type(${action.position})) >>> button[aria-expanded=\"true\"]`);\n        expect(item).toBe(null);\n      }\n\n      // menu-item close\n      await page.$eval('body', elm => {\n        elm.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n      });\n      await page.waitForChanges();\n      await expectImageSnapshot(page);\n    });\n\n    test(`should success keyboard navigation, case direction ${Direction.HORIZONTAL}`, async () => {\n      const page = await createPage(createHTML({ direction: Direction.HORIZONTAL }), getFrameSize(Direction.HORIZONTAL));\n      await expectImageSnapshot(page);\n\n      const actions = [\n        { position: Position.PRESS, key: Key.TAB, openeItem: null },\n        { position: Position.PRESS, key: Key.TAB, openeItem: null },\n        { position: Position.PRESS, key: Key.TAB, openeItem: null },\n        { position: Position.PRESS, key: Key.TAB, openeItem: null },\n        { position: Position.PRESS, key: Key.ENTER, openeItem: 5 },\n        { position: Position.PRESS, key: Key.TAB, openeItem: 5 },\n        { position: Position.PRESS, key: Key.SHIFT, openeItem: 5 },\n        { position: Position.PRESS, key: Key.ENTER, openeItem: null },\n        { position: Position.PRESS, key: Key.TAB, openeItem: null },\n      ];\n\n      for await (const action of actions) {\n        if (action.key === Key.SHIFT) {\n          await page.keyboard.down(Key.SHIFT);\n          await page.keyboard.press(Key.TAB);\n          await page.keyboard.up(Key.SHIFT);\n        } else {\n          await page.keyboard[action.position](action.key as unknown as KeyInput);\n        }\n        await page.waitForChanges();\n        let item;\n        if (action.openeItem > 0) {\n          item = await page.find(`header > mg-menu > mg-menu-item:nth-of-type(${action.openeItem}) >>> button[aria-expanded=\"true\"]`);\n          expect(item).not.toBe(null);\n          item = await page.find(`header > mg-menu > mg-menu-item:not(:nth-of-type(${action.openeItem})) >>> button[aria-expanded=\"true\"]`);\n        } else {\n          item = await page.find(`header > mg-menu > mg-menu-item >>> button[aria-expanded=\"true\"]`);\n        }\n        expect(item).toBe(null);\n      }\n    });\n  });\n\n  describe('navigation vertical', () => {\n    test(`should success mouse navigation, case direction ${Direction.VERTICAL}`, async () => {\n      const page = await createPage(createHTML({ direction: Direction.VERTICAL }), getFrameSize(Direction.VERTICAL));\n      await expectImageSnapshot(page);\n\n      const positions = [1, 5, 5, 1];\n      for await (const position of positions) {\n        const item = await page.find(`header > mg-menu > mg-menu-item:nth-of-type(${position}) >>> button`);\n        await item.click();\n        await page.waitForChanges();\n        await expectImageSnapshot(page);\n      }\n\n      await page.$eval('body', elm => {\n        elm.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n      });\n      await page.waitForChanges();\n      await expectImageSnapshot(page);\n    });\n    test(`should success keyboard navigation, case direction ${Direction.VERTICAL}`, async () => {\n      const page = await createPage(createHTML({ direction: Direction.VERTICAL }), getFrameSize(Direction.VERTICAL));\n      await expectImageSnapshot(page);\n\n      const actions = [\n        { position: Position.PRESS, key: Key.TAB },\n        { position: Position.PRESS, key: Key.TAB },\n        { position: Position.PRESS, key: Key.TAB },\n        { position: Position.PRESS, key: Key.TAB },\n        { position: Position.PRESS, key: Key.ENTER },\n        { position: Position.PRESS, key: Key.TAB },\n        { position: Position.PRESS, key: Key.SHIFT },\n        { position: Position.PRESS, key: Key.ENTER },\n        { position: Position.PRESS, key: Key.TAB },\n      ];\n\n      for await (const action of actions) {\n        if (action.key === Key.SHIFT) {\n          await page.keyboard.down(Key.SHIFT);\n          await page.keyboard.press(Key.TAB);\n          await page.keyboard.up(Key.SHIFT);\n        } else {\n          await page.keyboard[action.position](action.key as unknown as KeyInput);\n        }\n        await page.waitForChanges();\n        await expectImageSnapshot(page);\n      }\n    });\n  });\n});\n"]}

package/dist/collection/components/molecules/menu/mg-menu-item/test/mg-menu-item.e2e.js

@@ -1,119 +0,0 @@
-var __asyncValues = (this && this.__asyncValues) || function (o) {
-  if (!Symbol.asyncIterator)
-    throw new TypeError("Symbol.asyncIterator is not defined.");
-  var m = o[Symbol.asyncIterator], i;
-  return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-  function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-  function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
-};
-import { createPage } from "../../../../../utils/stencil.e2e.test.utils";
-import { renderAttributes } from "../../../../../utils/e2e.test.utils";
-import { Direction, sizes } from "../../mg-menu/mg-menu.conf";
-import { Status } from "../mg-menu-item.conf";
-const slotContent = '<div><h3>Demo title</h3><p>some content</p></div>';
-const slotMenuItem = '<mg-menu label="submenu"><mg-menu-item><span slot="label">Batman begins</span></mg-menu-item></mg-menu>';
-const slotImage = '<mg-icon icon="user" slot="image"></mg-icon>';
-const slotInformation = '<mg-badge value="2" label="hello" slot="information"></mg-badge>';
-const slotMetadata = '<span slot="metadata">is a hero</span>';
-const createHTML = (args, slot = '', direction = Direction.HORIZONTAL) => `
-<mg-menu ${renderAttributes(Object.assign({ label: 'batmenu', direction }, args))}">
-  <mg-menu-item ${renderAttributes(args)}>
-    <span slot="label">${args.href ? 'batman link' : 'batman'}</span>
-    ${slot}
-  </mg-menu-item>
-</mg-menu>
-`;
-describe('mg-menu-item', () => {
-  describe.each([Direction.HORIZONTAL, Direction.VERTICAL])('render', direction => {
-    test('should render whith status', async () => {
-      const html = [Status.ACTIVE, Status.VISIBLE, Status.HIDDEN, Status.DISABLED]
-        .map(status => {
-        const template = [undefined, '#link']
-          .map(href => [true, false].map(submenu => (submenu && href !== undefined ? '' : createHTML({ status, href }, submenu && slotMenuItem, direction))).join(''))
-          .join('');
-        return `<h2>${status}<h2/><div>${template}<div>`;
-      })
-        .join('');
-      const page = await createPage(`<h1>${direction} mg-menu - Status</h1>${html}`);
-      const element = await page.find('mg-menu-item');
-      expect(element).toHaveClass('hydrated');
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
-    });
-    test('should render whith slots', async () => {
-      const html = [
-        { label: 'submenu', slot: slotMenuItem },
-        { label: 'image', slot: slotImage },
-        { label: 'information', slot: slotInformation },
-        { label: 'information AND image', slot: slotInformation + slotImage },
-      ]
-        .map(({ label, slot }) => {
-        const template = [true, false]
-          .map(submenu => [true, false]
-          .map(metadata => sizes
-          .map(size => (submenu && label === 'submenu' ? '' : createHTML({ size }, `${metadata ? slotMetadata : ''} ${submenu ? slot + slotMenuItem : slot}`, direction)))
-          .join(''))
-          .join(''))
-          .join('');
-        return `<h2>${label}<h2/><div>${template}<div>`;
-      })
-        .join('');
-      const page = await createPage(`<h1>${direction} mg-menu - Slots</h1>${html}`);
-      const element = await page.find('mg-menu-item');
-      expect(element).toHaveClass('hydrated');
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
-    });
-    test.each([true, false])(`should renders direction=${direction}, props expanded=%s`, async (expanded) => {
-      const page = await createPage(createHTML({ expanded }, slotMenuItem, direction));
-      const element = await page.find('mg-menu-item');
-      expect(element).toHaveClass('hydrated');
-      await page.setViewport({ width: 300, height: 200 });
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
-    });
-    test('should render content slot', async () => {
-      const page = await createPage(createHTML({ expanded: true }, slotContent, direction));
-      const element = await page.find('mg-menu-item');
-      expect(element).toHaveClass('hydrated');
-      await page.setViewport({ width: 300, height: 200 });
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
-    });
-    test.each([[Status.ACTIVE, Status.VISIBLE, Status.HIDDEN, Status.DISABLED]])('shoud manage keyboard navigation', async (status) => {
-      var _a, e_1, _b, _c;
-      const page = await createPage(createHTML({ status }, slotMenuItem, direction));
-      let screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot();
-      const element = await page.find('mg-menu-item');
-      expect(element).toHaveClass('hydrated');
-      await page.setViewport({ width: 300, height: 200 });
-      try {
-        for (var _d = true, _e = __asyncValues(['Tab', 'Enter']), _f; _f = await _e.next(), _a = _f.done, !_a; _d = true) {
-          _c = _f.value;
-          _d = false;
-          const key = _c;
-          await page.keyboard.press(key);
-          await page.waitForChanges();
-          await page.waitForTimeout(200);
-          screenshot = await page.screenshot();
-          expect(screenshot).toMatchImageSnapshot();
-        }
-      }
-      catch (e_1_1) {
-        e_1 = { error: e_1_1 };
-      }
-      finally {
-        try {
-          if (!_d && !_a && (_b = _e.return))
-            await _b.call(_e);
-        }
-        finally {
-          if (e_1)
-            throw e_1.error;
-        }
-      }
-    });
-  });
-});
-//# sourceMappingURL=mg-menu-item.e2e.js.map