@mgdis/mg-components 5.18.0 → 5.19.1

package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.css

@@ -1,303 +0,0 @@
-/**
- * Common style for MGDIS inputs
- */
-:host {
-  display: block;
-}
-
-.mg-input {
-  display: flex;
-  align-items: flex-start;
-  min-height: var(--default-size);
-  max-width: 100%;
-  margin-bottom: var(--mg-inputs-margin-bottom, 0);
-  /* Label */
-  /* Label-on-top */
-}
-.mg-input mg-input-title {
-  flex-shrink: var(--mg-inputs-shrink, 1);
-  width: var(--mg-inputs-title-width, auto);
-  margin-top: calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);
-  margin-right: var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));
-  text-align: right;
-}
-.mg-input.mg-input--label-on-top {
-  flex-direction: column;
-}
-.mg-input.mg-input--label-on-top .mg-input__input-container {
-  width: 100%;
-}
-
-/* Label-on-top */
-.mg-input__title {
-  display: flex;
-  align-items: baseline;
-  margin-bottom: 0.3rem;
-}
-.mg-input__title mg-input-title {
-  flex-shrink: 1;
-  width: auto;
-  margin-top: 0;
-  margin-right: var(--mg-inputs-spacer);
-  text-align: left;
-}
-.mg-input__title mg-tooltip {
-  margin-top: 0;
-}
-.mg-input__title mg-icon {
-  display: inline-flex;
-  vertical-align: text-bottom;
-}
-
-.mg-input__input-container {
-  min-height: var(--default-size);
-  /* Readonly */
-}
-.mg-input__input-container > strong {
-  display: inline-block;
-  margin-top: calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);
-  min-height: var(--font-size);
-}
-.mg-input__input-container mg-tooltip {
-  display: inline-flex;
-  width: var(--mg-icon-regular-size);
-  height: var(--mg-icon-regular-size);
-  margin-left: var(--mg-inputs-spacer);
-}
-.mg-input__input-container .mg-input__help-text,
-.mg-input__input-container .mg-input__error {
-  text-align: start;
-  font-size: 1.2rem;
-}
-
-.mg-input__input {
-  display: flex;
-  /* Manage space between input and first message */
-  /* Set custom opacity on disabled input */
-}
-.mg-input__input mg-tooltip {
-  margin-top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
-}
-.mg-input__input.mg-input__input--has-error .mg-input__box {
-  border-color: hsl(var(--color-danger));
-}
-.mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
-  margin-top: 0.5rem;
-}
-.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle, .mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong {
-  opacity: var(--mg-disabled-opacity);
-}
-
-.mg-input__error {
-  display: inline-block;
-  margin-top: 0.2rem;
-  padding: 0.3rem 0.8rem;
-  border-radius: 0.3rem;
-  background: hsl(var(--mg-inputs-error-bg-color));
-  color: hsl(var(--color-danger));
-}
-
-.mg-input__input mg-icon, .mg-input__error mg-icon {
-  display: flex;
-}
-
-/**
- * Style for input "box":
- * - input[type="text"]
- * - input[type="date"]
- * - input[type="password"]
- * - textarea
- * - select
- */
-.mg-input__box {
-  padding: calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);
-  height: var(--default-size);
-  box-sizing: border-box;
-  border-width: var(--mg-inputs-border-width);
-  border-style: solid;
-  border-color: var(--mg-inputs-color);
-  border-radius: var(--mg-inputs-border-radius);
-  background-color: hsl(var(--color-light));
-  font-family: inherit;
-  color: hsl(var(--color-dark));
-  font-size: var(--font-size);
-  text-align: var(--mg-inputs-text-align, left);
-}
-.mg-input__box::placeholder {
-  color: var(--mg-inputs-color);
-  font-style: italic;
-}
-.mg-input__box:focus {
-  box-shadow: 0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
-}
-.mg-input__box:disabled {
-  opacity: 0.3;
-}
-
-/**
-* Variations
-*/
-.mg-input.mg-input--is-input-group-append {
-  --mg-button-border-radius-top-left: 0;
-  --mg-button-border-radius-bottom-left: 0;
-  /**
-  * Append input slot
-  */
-  /**
-  * Readonly variation
-  */
-}
-.mg-input.mg-input--is-input-group-append .mg-input__box {
-  margin-right: -0.1rem;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible {
-  outline-style: solid;
-  outline-offset: -0.2rem;
-  outline-width: 0.2rem;
-}
-.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input] {
-  display: none;
-}
-
-.mg-input.mg-input--label-on-top .mg-input__box {
-  width: auto;
-  max-width: 100%;
-}
-
-.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]) {
-  --mg-button-border-radius-top-right: 0;
-  --mg-button-border-radius-bottom-right: 0;
-}
-.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)) {
-  --mg-button-border-right-width: 0;
-}
-.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type) {
-  --mg-button-border-radius-top-right: var(--mg-inputs-border-radius);
-  --mg-button-border-radius-bottom-right: var(--mg-inputs-border-radius);
-}
-
-.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]) {
-  padding-top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
-}
-
-/**
- * Used to define width input
- * Kept it nested for coming widths
- */
-.mg-input.mg-input--width-full:not(.mg-input--label-on-top) {
-  justify-content: space-between;
-}
-.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box {
-  width: 100%;
-}
-.mg-input.mg-input--width-full .mg-input__input-container {
-  flex: auto;
-  width: 100%;
-}
-.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box {
-  max-width: 100%;
-}
-.mg-input:not(.mg-input--label-on-top) .mg-input__box {
-  width: 100%;
-  max-width: calc(17.7rem + var(--mg-inputs-spacer) * 2);
-  min-width: 5rem;
-}
-.mg-input.mg-input--width-16 .mg-input__input-container {
-  width: 100%;
-}
-.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input {
-  width: 100%;
-  max-width: 21rem;
-}
-.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left {
-  width: 100%;
-}
-.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box {
-  max-width: 21rem;
-  min-width: 100%;
-}
-.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box {
-  max-width: 7rem;
-}
-.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box {
-  max-width: 5rem;
-}
-
-/**
- * Set mg-character-left with inputs
- */
-.mg-input mg-character-left {
-  opacity: 0.6;
-  font-size: 1.1rem;
-}
-.mg-input.mg-input--has-display-character-left .mg-input__input + .mg-input__help-text, .mg-input.mg-input--has-display-character-left .mg-input__input + .mg-input__error {
-  margin-top: 0;
-}
-
-/**
- * A11Y
- */
-.sr-only {
-  border: 0 !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  -webkit-clip-path: inset(50%) !important;
-  clip-path: inset(50%) !important;
-  height: 1px !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  width: 1px !important;
-  white-space: nowrap !important;
-}
-
-*:focus:not(:focus-visible) {
-  outline: none;
-}
-
-@media (prefers-reduced-motion) {
-  .mg-a11y-animation {
-    animation: none !important;
-    transition: none !important;
-  }
-}
-/* Component Custom Style */
-.mg-input .mg-input__box {
-  display: block;
-  height: auto;
-  resize: none;
-}
-.mg-input .mg-input__box.mg-input__box--resizable {
-  resize: both;
-}
-.mg-input .mg-input__box.mg-input__box--resizable-horizontal {
-  resize: horizontal;
-}
-.mg-input .mg-input__box.mg-input__box--resizable-vertical {
-  resize: vertical;
-}
-
-/**
-  * Character left
-  */
-.mg-input__with-character-left {
-  width: 100%;
-}
-.mg-input__with-character-left mg-character-left {
-  display: block;
-  visibility: hidden;
-  margin-top: 0.2rem;
-  text-align: end;
-}
-.mg-input.is-focused .mg-input__with-character-left mg-character-left {
-  visibility: visible;
-}
-
-/* Firefox selector */
-@-moz-document url-prefix() {
-  .mg-input__box {
-    overflow-x: hidden;
-  }
-}

package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.css

@@ -1,233 +0,0 @@
-/**
- * Common style for MGDIS inputs
- */
-:host {
-  display: block;
-}
-
-.mg-input {
-  display: flex;
-  align-items: flex-start;
-  min-height: var(--default-size);
-  max-width: 100%;
-  margin-bottom: var(--mg-inputs-margin-bottom, 0);
-  /* Label */
-  /* Label-on-top */
-}
-.mg-input mg-input-title {
-  flex-shrink: var(--mg-inputs-shrink, 1);
-  width: var(--mg-inputs-title-width, auto);
-  margin-top: calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);
-  margin-right: var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));
-  text-align: right;
-}
-.mg-input.mg-input--label-on-top {
-  flex-direction: column;
-}
-.mg-input.mg-input--label-on-top .mg-input__input-container {
-  width: 100%;
-}
-
-/* Label-on-top */
-.mg-input__title {
-  display: flex;
-  align-items: baseline;
-  margin-bottom: 0.3rem;
-}
-.mg-input__title mg-input-title {
-  flex-shrink: 1;
-  width: auto;
-  margin-top: 0;
-  margin-right: var(--mg-inputs-spacer);
-  text-align: left;
-}
-.mg-input__title mg-tooltip {
-  margin-top: 0;
-}
-.mg-input__title mg-icon {
-  display: inline-flex;
-  vertical-align: text-bottom;
-}
-
-.mg-input__input-container {
-  min-height: var(--default-size);
-  /* Readonly */
-}
-.mg-input__input-container > strong {
-  display: inline-block;
-  margin-top: calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);
-  min-height: var(--font-size);
-}
-.mg-input__input-container mg-tooltip {
-  display: inline-flex;
-  width: var(--mg-icon-regular-size);
-  height: var(--mg-icon-regular-size);
-  margin-left: var(--mg-inputs-spacer);
-}
-.mg-input__input-container .mg-input__help-text,
-.mg-input__input-container .mg-input__error {
-  text-align: start;
-  font-size: 1.2rem;
-}
-
-.mg-input__input {
-  display: flex;
-  /* Manage space between input and first message */
-  /* Set custom opacity on disabled input */
-}
-.mg-input__input mg-tooltip {
-  margin-top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
-}
-.mg-input__input.mg-input__input--has-error .mg-input__box {
-  border-color: hsl(var(--color-danger));
-}
-.mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
-  margin-top: 0.5rem;
-}
-.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle, .mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong {
-  opacity: var(--mg-disabled-opacity);
-}
-
-.mg-input__error {
-  display: inline-block;
-  margin-top: 0.2rem;
-  padding: 0.3rem 0.8rem;
-  border-radius: 0.3rem;
-  background: hsl(var(--mg-inputs-error-bg-color));
-  color: hsl(var(--color-danger));
-}
-
-.mg-input__input mg-icon, .mg-input__error mg-icon {
-  display: flex;
-}
-
-/**
- * A11Y
- */
-.sr-only {
-  border: 0 !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  -webkit-clip-path: inset(50%) !important;
-  clip-path: inset(50%) !important;
-  height: 1px !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  width: 1px !important;
-  white-space: nowrap !important;
-}
-
-*:focus:not(:focus-visible) {
-  outline: none;
-}
-
-@media (prefers-reduced-motion) {
-  .mg-a11y-animation {
-    animation: none !important;
-    transition: none !important;
-  }
-}
-/**
-* Toogle
-*/
-.mg-input.mg-input.mg-input--toggle .mg-input__input-container {
-  flex: auto;
-  min-width: 0;
-}
-
-.mg-input__button-toggle {
-  display: flex;
-  padding: 0.2rem;
-  min-width: 0;
-  background-color: hsl(var(--color-light));
-  border-width: var(--mg-inputs-border-width);
-  border-style: solid;
-  border-color: var(--mg-inputs-color);
-  border-radius: calc((var(--font-size) * var(--line-height) + 2 * (0.7rem + var(--mg-inputs-border-width))) / var(--mg-input-toggle-border-radius-ratio));
-  font-family: var(--font-family);
-  font-size: inherit;
-  line-height: inherit;
-  cursor: pointer;
-}
-.mg-input__button-toggle:disabled {
-  cursor: default;
-}
-
-.mg-input__toggle-item-container {
-  padding: 0.5rem 0.9rem;
-  border: 0;
-  box-sizing: border-box;
-  border-radius: calc((var(--font-size) * var(--line-height) + 1rem) / var(--mg-input-toggle-border-radius-ratio));
-  background-color: unset;
-  font-weight: unset;
-  color: hsl(var(--color-dark));
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.mg-input__toggle-item-container:first-of-type {
-  font-weight: 600;
-  color: hsl(var(--color-info));
-  background-color: hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));
-}
-
-.mg-input.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type {
-  background-color: unset;
-  font-weight: unset;
-  color: hsl(var(--color-dark));
-}
-.mg-input.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type {
-  font-weight: 600;
-  color: hsl(var(--color-info));
-  background-color: hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));
-}
-
-.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: calc(var(--font-size) * var(--line-height) + 1rem);
-  height: calc(var(--font-size) * var(--line-height) + 1rem);
-  padding: 0;
-  visibility: hidden;
-}
-.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container:first-of-type {
-  visibility: visible;
-}
-.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container ::slotted(mg-icon) {
-  display: flex;
-}
-
-.mg-input.mg-input--toggle-icon.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type {
-  visibility: hidden;
-}
-.mg-input.mg-input--toggle-icon.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type {
-  visibility: visible;
-}
-
-.mg-input.mg-input--toggle-on-off .mg-input__toggle-item-container:first-of-type {
-  font-weight: 600;
-  color: hsl(var(--color-dark));
-  background-color: hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%));
-}
-.mg-input.mg-input--toggle-on-off.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type {
-  background-color: unset;
-  font-weight: unset;
-  color: hsl(var(--color-dark));
-}
-
-.mg-input.mg-input--toggle-readonly .mg-input__button-toggle {
-  border-color: transparent;
-  background-color: transparent;
-  cursor: initial;
-}
-.mg-input.mg-input--toggle-readonly .mg-input__toggle-item-container:last-of-type {
-  display: none;
-}
-.mg-input.mg-input--toggle-readonly.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type {
-  display: none;
-}
-.mg-input.mg-input--toggle-readonly.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type {
-  display: flex;
-}

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"]}