npm - @mgdis/mg-components - Versions diffs - 5.19.0 → 5.19.2 - Mend

@mgdis/mg-components 5.19.0 → 5.19.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (157) hide show

package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-input-textarea.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-textarea/mg-input-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, h, Prop, EventEmitter, State, Method, Watch } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { Width } from '../MgInput.conf';\nimport { ClassList, isValidString } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n tag: 'mg-input-textarea',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-textarea.css',\n shadow: true,\n})\nexport class MgInputTextarea {\n /***********\n Internal \n *********/\n\n // Classes\n private classFocus = 'mg-u-is-focused';\n private classHasDisplayCharacterLeft = 'mg-c-input--has-display-character-left';\n\n // IDs\n private characterLeftId;\n\n // HTML selector\n private input: HTMLTextAreaElement;\n\n // Locales\n private messages;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputTextareaElement;\n\n /\n Component value\n /\n @Prop({ mutable: true, reflect: true }) value: string;\n @Watch('value')\n handleValue(newValue: string): void {\n this.checkValidity();\n this.valueChange.emit(newValue);\n }\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n /\n @Prop() identifier!: string;\n\n /\n Input name\n * If not set the value equals the identifier\n /\n @Prop() name: string = this.identifier;\n\n /\n Input label\n /\n @Prop() label!: string;\n\n /\n Define if label is displayed on top\n /\n @Prop() labelOnTop: boolean;\n\n /\n Define if label is visible\n /\n @Prop() labelHide = false;\n\n /\n Input placeholder.\n * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n /\n @Prop() placeholder: string;\n\n /\n Input max length\n /\n @Prop() maxlength = 4000;\n\n /\n Define if input is required\n /\n @Prop() required = false;\n\n /\n Define if input is readonly\n /\n @Prop() readonly = false;\n\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\n handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n if (this.input !== undefined) {\n this.input[prop] = newValue;\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n this.hasDisplayedError = false;\n }\n }\n }\n\n /\n Define input width\n /\n @Prop() mgWidth: Width = 'full';\n\n /\n Define input pattern to validate\n /\n @Prop() pattern: string;\n\n /\n Define input pattern error message\n /\n @Prop() patternErrorMessage: string;\n @Watch('pattern')\n @Watch('patternErrorMessage')\n validatePattern(newValue: string): void {\n if (newValue !== undefined && !(isValidString(this.pattern) && isValidString(this.patternErrorMessage))) {\n throw new Error('<mg-input-textarea> props \"pattern\" and \"patternErrorMessage\" must be non-empty string and paired.');\n }\n }\n\n /\n Define the number of visible text lines for the control\n /\n @Prop() rows = 3;\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip: string;\n\n /\n Define if component should display character left\n /\n @Prop() displayCharacterLeft = true;\n @Watch('displayCharacterLeft')\n validateDisplayCharacterLeft(newValue: boolean): void {\n if (newValue) {\n this.classCollection.add(this.classHasDisplayCharacterLeft);\n } else {\n this.classCollection.delete(this.classHasDisplayCharacterLeft);\n }\n }\n\n /\n Add a help text under the input, usually expected data format and example\n /\n @Prop() helpText: string;\n\n /\n Define input valid state\n /\n @Prop({ mutable: true }) valid: boolean;\n\n /\n Define input invalid state\n /\n @Prop({ mutable: true }) invalid: boolean;\n\n /\n Define if input is resizable\n /\n @Prop() resizable: 'none' \| 'both' \| 'horizontal' \| 'vertical' = 'none';\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-input--textarea']);\n\n /\n Error message to display\n /\n @State() errorMessage: string;\n\n /\n Emited event when value change\n /\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<string>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n /\n Display input error if it exists.\n /\n @Method()\n async displayError(): Promise<void> {\n this.checkValidity();\n this.setErrorMessage();\n this.hasDisplayedError = this.invalid;\n }\n\n /\n Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n /\n @Method()\n async setError(valid: MgInputTextarea['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-textarea> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-textarea> method \"setError()\" param \"errorMessage\" must be a string');\n } else {\n this.setValidity(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n this.hasDisplayedError = this.invalid;\n }\n }\n\n /\n Method to set validity values\n * @param newValue - valid new value\n /\n private setValidity(newValue: MgInputTextarea['valid']) {\n this.valid = newValue;\n this.invalid = !this.valid;\n // We need to send valid event even if it is the same value\n this.inputValid.emit(this.valid);\n }\n /\n Handle input event\n /\n private handleInput = (): void => {\n if (this.hasDisplayedError) {\n this.checkValidity();\n this.setErrorMessage();\n }\n this.value = this.input.value;\n };\n\n /\n Handle focus event\n /\n private handleFocus = (): void => {\n this.classCollection.add(this.classFocus);\n this.classCollection = new ClassList(this.classCollection.classes);\n };\n\n /\n Handle blur event\n /\n private handleBlur = (): void => {\n // Manage focus\n this.classCollection.delete(this.classFocus);\n this.classCollection = new ClassList(this.classCollection.classes);\n // Display Error\n this.displayError();\n };\n\n /\n Get pattern validity\n * Pattern is not defined on textarea field: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea\n * @returns is pattern valid\n /\n private getPatternValidity = (): boolean => this.pattern === undefined \|\| new RegExp(`^${this.pattern}$`, 'u').test(this.value);\n\n /\n Check if input is valid\n /\n private checkValidity = (): void => {\n this.setValidity(this.readonly \|\| this.disabled \|\| (this.input?.checkValidity !== undefined && this.input.checkValidity() && this.getPatternValidity()));\n };\n\n /\n Set input error message\n * @param errorMessage - errorMessage override\n /\n private setErrorMessage = (errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n // Does not match pattern\n if (!this.valid) {\n if (errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n } else if (!this.getPatternValidity()) {\n this.errorMessage = this.patternErrorMessage;\n }\n // required\n else if (this.input.validity.valueMissing) {\n this.errorMessage = this.messages.errors.required;\n }\n }\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n * @returns timeout\n /\n componentWillLoad(): ReturnType<typeof setTimeout> {\n // Get locales\n this.messages = initLocales(this.element).messages;\n this.characterLeftId = `${this.identifier}-character-left`;\n // Validate\n this.validateDisplayCharacterLeft(this.displayCharacterLeft);\n this.validatePattern(this.pattern);\n this.validatePattern(this.patternErrorMessage);\n // Check validity when component is ready\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n this.checkValidity();\n }, 0);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[this.characterLeftId]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonly={this.readonly}\n mgWidth={this.mgWidth}\n disabled={this.disabled}\n value={this.value}\n readonlyValue={undefined}\n tooltip={this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\n >\n <div class=\"mg-c-input__with-character-left\">\n <textarea\n class={{\n 'mg-c-input__box': true,\n 'mg-c-input__box--resizable': this.resizable === 'both',\n 'mg-c-input__box--resizable-horizontal': this.resizable === 'horizontal',\n 'mg-c-input__box--resizable-vertical': this.resizable === 'vertical',\n }}\n value={this.value}\n id={this.identifier}\n name={this.name}\n placeholder={this.placeholder}\n title={this.placeholder}\n rows={this.rows}\n maxlength={this.maxlength}\n disabled={this.disabled}\n required={this.required}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={(el: HTMLTextAreaElement) => {\n if (el !== null) this.input = el;\n }}\n ></textarea>\n {this.displayCharacterLeft && this.maxlength > 0 && (\n <mg-character-left identifier={this.characterLeftId} characters={this.value} maxlength={this.maxlength}></mg-character-left>\n )}\n </div>\n </MgInput>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"mg-input-textarea.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-textarea/mg-input-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, h, Prop, EventEmitter, State, Method, Watch } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { Width } from '../MgInput.conf';\nimport { ClassList, isValidString } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n tag: 'mg-input-textarea',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-textarea.css',\n shadow: true,\n})\nexport class MgInputTextarea {\n /***********\n Internal \n *********/\n\n // Classes\n private classFocus = 'mg-u-is-focused';\n private classHasDisplayCharacterLeft = 'mg-c-input--has-display-character-left';\n\n // IDs\n private characterLeftId;\n\n // HTML selector\n private input: HTMLTextAreaElement;\n\n // Locales\n private messages;\n\n // hasDisplayedError (triggered by blur event)\n private hasDisplayedError = false;\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputTextareaElement;\n\n /\n Component value\n /\n @Prop({ mutable: true, reflect: true }) value: string;\n @Watch('value')\n handleValue(newValue: string): void {\n this.checkValidity();\n this.valueChange.emit(newValue);\n }\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n /\n @Prop() identifier!: string;\n\n /\n Input name\n * If not set the value equals the identifier\n /\n @Prop() name: string = this.identifier;\n\n /\n Input label\n /\n @Prop() label!: string;\n\n /\n Define if label is displayed on top\n /\n @Prop() labelOnTop: boolean;\n\n /\n Define if label is visible\n /\n @Prop() labelHide = false;\n\n /\n Input placeholder.\n * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n /\n @Prop() placeholder: string;\n\n /\n Input max length\n /\n @Prop() maxlength = 4000;\n\n /\n Define if input is required\n /\n @Prop() required = false;\n\n /\n Define if input is readonly\n /\n @Prop() readonly = false;\n\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('required')\n @Watch('readonly')\n @Watch('disabled')\n handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n if (this.input !== undefined) {\n this.input[prop] = newValue;\n this.checkValidity();\n if (this.hasDisplayedError) {\n this.setErrorMessage();\n this.hasDisplayedError = false;\n }\n }\n }\n\n /\n Define input width\n /\n @Prop() mgWidth: Width = 'full';\n\n /\n Define input pattern to validate\n /\n @Prop() pattern: string;\n\n /\n Define input pattern error message\n /\n @Prop() patternErrorMessage: string;\n @Watch('pattern')\n @Watch('patternErrorMessage')\n validatePattern(newValue: string): void {\n if (newValue !== undefined && !(isValidString(this.pattern) && isValidString(this.patternErrorMessage))) {\n throw new Error('<mg-input-textarea> props \"pattern\" and \"patternErrorMessage\" must be non-empty string and paired.');\n }\n }\n\n /\n Define the number of visible text lines for the control\n /\n @Prop() rows = 3;\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip: string;\n\n /\n Define if component should display character left\n /\n @Prop() displayCharacterLeft = true;\n @Watch('displayCharacterLeft')\n validateDisplayCharacterLeft(newValue: boolean): void {\n if (newValue) {\n this.classCollection.add(this.classHasDisplayCharacterLeft);\n } else {\n this.classCollection.delete(this.classHasDisplayCharacterLeft);\n }\n }\n\n /\n Add a help text under the input, usually expected data format and example\n /\n @Prop() helpText: string;\n\n /\n Define input valid state\n /\n @Prop({ mutable: true }) valid: boolean;\n\n /\n Define input invalid state\n /\n @Prop({ mutable: true }) invalid: boolean;\n\n /\n Define if input is resizable\n /\n @Prop() resizable: 'none' \| 'both' \| 'horizontal' \| 'vertical' = 'none';\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-input--textarea']);\n\n /\n Error message to display\n /\n @State() errorMessage: string;\n\n /\n Emited event when value change\n /\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<string>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n /\n Display input error if it exists.\n /\n @Method()\n async displayError(): Promise<void> {\n this.checkValidity();\n this.setErrorMessage();\n this.hasDisplayedError = this.invalid;\n }\n\n /\n Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n /\n @Method()\n async setError(valid: MgInputTextarea['valid'], errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-textarea> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-textarea> method \"setError()\" param \"errorMessage\" must be a string');\n } else {\n this.setValidity(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n this.hasDisplayedError = this.invalid;\n }\n }\n\n /\n Method to set validity values\n * @param newValue - valid new value\n /\n private setValidity(newValue: MgInputTextarea['valid']) {\n this.valid = newValue;\n this.invalid = !this.valid;\n // We need to send valid event even if it is the same value\n this.inputValid.emit(this.valid);\n }\n /\n Handle input event\n /\n private handleInput = (): void => {\n if (this.hasDisplayedError) {\n this.checkValidity();\n this.setErrorMessage();\n }\n this.value = this.input.value;\n };\n\n /\n Handle focus event\n /\n private handleFocus = (): void => {\n this.classCollection.add(this.classFocus);\n this.classCollection = new ClassList(this.classCollection.classes);\n };\n\n /\n Handle blur event\n /\n private handleBlur = (): void => {\n // Manage focus\n this.classCollection.delete(this.classFocus);\n this.classCollection = new ClassList(this.classCollection.classes);\n // Display Error\n this.displayError();\n };\n\n /\n Get pattern validity\n * Pattern is not defined on textarea field: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea\n * @returns is pattern valid\n /\n private getPatternValidity = (): boolean => this.pattern === undefined \|\| new RegExp(`^${this.pattern}$`, 'u').test(this.value);\n\n /\n Check if input is valid\n /\n private checkValidity = (): void => {\n this.setValidity(this.readonly \|\| this.disabled \|\| (this.input?.checkValidity !== undefined && this.input.checkValidity() && this.getPatternValidity()));\n };\n\n /\n Set input error message\n * @param errorMessage - errorMessage override\n /\n private setErrorMessage = (errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n // Does not match pattern\n if (!this.valid) {\n if (errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n } else if (!this.getPatternValidity()) {\n this.errorMessage = this.patternErrorMessage;\n }\n // required\n else if (this.input.validity.valueMissing) {\n this.errorMessage = this.messages.errors.required;\n }\n }\n };\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n * @returns timeout\n /\n componentWillLoad(): ReturnType<typeof setTimeout> {\n // Get locales\n this.messages = initLocales(this.element).messages;\n this.characterLeftId = `${this.identifier}-character-left`;\n // Validate\n this.validateDisplayCharacterLeft(this.displayCharacterLeft);\n this.validatePattern(this.pattern);\n this.validatePattern(this.patternErrorMessage);\n // Check validity when component is ready\n // return a promise to process action only in the FIRST render().\n // https://stenciljs.com/docs/component-lifecycle#componentwillload\n return setTimeout(() => {\n this.checkValidity();\n }, 0);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[this.characterLeftId]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={this.required}\n readonly={this.readonly}\n mgWidth={this.mgWidth}\n disabled={this.disabled}\n value={this.value}\n readonlyValue={undefined}\n tooltip={this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\n >\n <div class=\"mg-c-input__with-character-left\">\n <textarea\n class={{\n 'mg-c-input__box': true,\n 'mg-c-input__box--resizable': this.resizable === 'both',\n 'mg-c-input__box--resizable-horizontal': this.resizable === 'horizontal',\n 'mg-c-input__box--resizable-vertical': this.resizable === 'vertical',\n }}\n value={this.value}\n id={this.identifier}\n name={this.name}\n placeholder={this.placeholder}\n title={this.placeholder}\n rows={this.rows}\n maxlength={this.maxlength}\n disabled={this.disabled}\n required={this.required}\n aria-invalid={(this.invalid === true).toString()}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n ref={(el: HTMLTextAreaElement) => {\n if (el !== null) this.input = el;\n }}\n ></textarea>\n {this.displayCharacterLeft && this.maxlength > 0 && (\n <mg-character-left identifier={this.characterLeftId} characters={this.value} maxlength={this.maxlength}></mg-character-left>\n )}\n </div>\n </MgInput>\n );\n }\n}\n"]}

package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js CHANGED Viewed

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { h } from "@stencil/core";
 import { MgInput } from "../MgInput";
-import { ClassList, allItemsAreString } from "../../../../utils/components.utils";
+import { ClassList, allItemsAreString, isValidString } from "../../../../utils/components.utils";
 /**
  * type Option validation function
  * @param option - radio option
@@ -20,6 +20,18 @@ export class MgInputToggle {
     this.classIsActive = 'mg-c-input--toggle-is-active';
     this.classOnOff = 'mg-c-input--toggle-on-off';
     this.classIcon = 'mg-c-input--toggle-icon';
+    /**
+     * Set input error message
+     * @param errorMessage - errorMessage override
+     */
+    this.setErrorMessage = (errorMessage) => {
+      // Set error message
+      this.errorMessage = undefined;
+      // Does have a custom error message
+      if (!this.valid && errorMessage !== undefined) {
+        this.errorMessage = errorMessage;
+      }
+    };
     /**
      * Change checked value
      */
@@ -55,6 +67,8 @@ export class MgInputToggle {
     this.helpText = undefined;
     this.classCollection = new ClassList(['mg-c-input--toggle']);
     this.options = undefined;
+    this.errorMessage = undefined;
+    this.valid = undefined;
     this.checked = false;
   }
   handleValue(newValue) {
@@ -112,6 +126,27 @@ export class MgInputToggle {
     // update value
     this.value = this.options[newValue ? 1 : 0].value;
   }
+  /**
+   * 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
+   */
+  async setError(valid, errorMessage) {
+    if (typeof valid !== 'boolean') {
+      throw new Error('<mg-input-toggle> method "setError()" param "valid" must be a boolean');
+    }
+    else if (!isValidString(errorMessage)) {
+      throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string');
+    }
+    else {
+      this.valid = valid;
+      this.inputValid.emit(valid);
+      this.setErrorMessage(valid ? undefined : errorMessage);
+    }
+  }
   /**
    * set checked state
    */
@@ -158,7 +193,7 @@ export class MgInputToggle {
    * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: undefined, isFieldset: false }, h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" })))));
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" })))));
   }
   static get is() { return "mg-input-toggle"; }
   static get encapsulation() { return "shadow"; }
@@ -411,6 +446,8 @@ export class MgInputToggle {
     return {
       "classCollection": {},
       "options": {},
+      "errorMessage": {},
+      "valid": {},
       "checked": {}
     };
   }
@@ -447,6 +484,45 @@ export class MgInputToggle {
         }
       }];
   }
+  static get methods() {
+    return {
+      "setError": {
+        "complexType": {
+          "signature": "(valid: boolean, errorMessage: string) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "valid - value indicating the validity"
+                }],
+              "text": "- value indicating the validity"
+            }, {
+              "tags": [{
+                  "name": "param",
+                  "text": "errorMessage - the error message to display"
+                }],
+              "text": "- the error message to display"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.",
+          "tags": [{
+              "name": "param",
+              "text": "valid - value indicating the validity"
+            }, {
+              "name": "param",
+              "text": "errorMessage - the error message to display"
+            }]
+        }
+      }
+    };
+  }
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{

package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-input-toggle.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types /\n/ eslint-disable @typescript-eslint/no-explicit-any /\nimport { Component, Event, h, Prop, EventEmitter, State, Watch, Element } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { ClassList, allItemsAreString } from '../../../../utils/components.utils';\nimport { ToggleValue } from './mg-input-toggle.conf';\n\n/\n type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n /\nconst isOption = (option: ToggleValue): boolean => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;\n\n@Component({\n tag: 'mg-input-toggle',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-toggle.css',\n shadow: true,\n})\nexport class MgInputToggle {\n /**********\n Internal \n *********/\n\n // Classes\n private classReadonly = 'mg-c-input--toggle-readonly';\n private classDisabled = 'mg-c-input--toggle-disabled';\n private classIsActive = 'mg-c-input--toggle-is-active';\n private classOnOff = 'mg-c-input--toggle-on-off';\n private classIcon = 'mg-c-input--toggle-icon';\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputToggleElement;\n\n /\n Component value\n /\n @Prop({ mutable: true }) value: any;\n @Watch('value')\n handleValue(newValue: any): void {\n // Swich to the right option\n this.setChecked();\n // Emit value-change event\n this.valueChange.emit(newValue);\n }\n\n /\n Items are the possible options to select\n /\n @Prop() items!: string[] \| ToggleValue[];\n @Watch('items')\n validateItems(newValue: string[] \| ToggleValue[]): void {\n if (typeof newValue === 'object' && this.items.length !== 2) {\n throw new Error('<mg-input-toggle> prop \"items\" require 2 items.');\n }\n // String array\n else if (allItemsAreString(newValue as string[])) {\n this.options = (newValue as string[]).map(item => ({ title: item, value: item }));\n }\n // Object array\n else if (newValue && (newValue as ToggleValue[]).every(item => isOption(item))) {\n this.options = newValue as ToggleValue[];\n } else {\n throw new Error('<mg-input-toggle> prop \"items\" is required and all items must be the same type: ToggleValue.');\n }\n }\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n /\n @Prop() identifier!: string;\n\n /\n Input name\n * If not set the value equals the identifier\n /\n @Prop() name: string = this.identifier;\n\n /\n Input label\n /\n @Prop() label!: string;\n\n /\n Define if label is displayed on top\n /\n @Prop() labelOnTop: boolean;\n\n /\n Define if label is visible\n /\n @Prop() labelHide = false;\n\n /\n Define if toggle have on/off style\n /\n @Prop() isOnOff = false;\n @Watch('isOnOff')\n handleIsOnOff(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classOnOff);\n else this.classCollection.delete(this.classOnOff);\n }\n\n /\n Define if toggle display icon\n /\n @Prop() isIcon = false;\n @Watch('isIcon')\n handleIsIcon(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classIcon);\n else this.classCollection.delete(this.classIcon);\n }\n\n /\n Define if input is readonly\n /\n @Prop() readonly = false;\n @Watch('readonly')\n handleReadonly(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classReadonly);\n else this.classCollection.delete(this.classReadonly);\n }\n\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('disabled')\n handleDisabled(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classDisabled);\n else this.classCollection.delete(this.classDisabled);\n }\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip: string;\n\n /\n Add a help text under the input, usually expected data format and example\n /\n @Prop() helpText: string;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-input--toggle']);\n\n /\n Formated items for display\n /\n @State() options: ToggleValue[];\n\n /\n Checked internal value\n /\n @State() checked = false;\n @Watch('checked')\n handleChecked(newValue: boolean): void {\n // style\n if (newValue) this.classCollection.add(this.classIsActive);\n else this.classCollection.delete(this.classIsActive);\n\n // update value\n this.value = this.options[newValue ? 1 : 0].value;\n }\n\n /\n Emited event when value change\n /\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<any>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n /\n Change checked value\n /\n private toggleChecked = (): void => {\n this.checked = !this.checked;\n };\n\n /\n Slots validation\n /\n private validateSlots = (): void => {\n const slots = Array.from(this.element.children);\n if (slots.length !== 2) {\n throw new Error('<mg-input-toggle> 2 slots are required.');\n } else if (!this.isIcon) {\n // Due to text-overflow set to ellipsis\n // we need to ensure that slot element have title to display value on mouse over\n slots.forEach(slot => slot.setAttribute('title', slot.textContent));\n }\n };\n\n /\n set checked state\n /\n private setChecked(): void {\n const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);\n\n if ([0, 1].includes(optionTrueValueIndex)) {\n // has \"value\" props type is not a boolean, it is bind/render as an attributes/props\n // true props will be represent by \"true\" string so we convert it has boolean\n // true attribute will be represent by \"\" string so we convert it has boolean\n // https://stenciljs.com/docs/properties\n if (['', 'true'].includes(this.value as string) && this.options.find(option => option.value) !== undefined) {\n this.value = true;\n }\n\n // when options are boolean values and ordered as [true,false] instead [false,true]\n // we need to reversed the checked value logic\n const selectedValue = this.value === this.options[optionTrueValueIndex].value;\n this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;\n } else {\n this.checked = this.value === this.options[1].value;\n }\n }\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n // Check items format\n this.validateItems(this.items);\n // Check slots\n this.validateSlots();\n // init checked value\n this.setChecked();\n // apply handler\n this.handleIsOnOff(this.isOnOff);\n this.handleIsIcon(this.isIcon);\n this.handleReadonly(this.readonly);\n this.handleDisabled(this.disabled);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={undefined}\n readonly={undefined}\n mgWidth={undefined}\n disabled={this.disabled}\n value={this.value as string}\n readonlyValue={undefined}\n tooltip={!this.readonly && this.tooltip}\n helpText={this.helpText}\n errorMessage={undefined}\n isFieldset={false}\n >\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={this.checked.toString()}\n aria-readonly={this.disabled \|\| this.readonly}\n id={this.identifier}\n class=\"mg-c-input__button-toggle\"\n disabled={this.disabled \|\| this.readonly}\n onClick={this.toggleChecked}\n >\n <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n <slot name=\"item-1\"></slot>\n </span>\n <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n <slot name=\"item-2\"></slot>\n </span>\n </button>\n </MgInput>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"mg-input-toggle.js","sourceRoot":"","sources":["../../../../../src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types /\n/ eslint-disable @typescript-eslint/no-explicit-any /\nimport { Component, Event, h, Prop, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { ClassList, allItemsAreString, isValidString } from '../../../../utils/components.utils';\nimport { ToggleValue } from './mg-input-toggle.conf';\n\n/\n type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n /\nconst isOption = (option: ToggleValue): boolean => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;\n\n@Component({\n tag: 'mg-input-toggle',\n styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-toggle.css',\n shadow: true,\n})\nexport class MgInputToggle {\n /**********\n Internal \n *********/\n\n // Classes\n private classReadonly = 'mg-c-input--toggle-readonly';\n private classDisabled = 'mg-c-input--toggle-disabled';\n private classIsActive = 'mg-c-input--toggle-is-active';\n private classOnOff = 'mg-c-input--toggle-on-off';\n private classIcon = 'mg-c-input--toggle-icon';\n\n /***********\n Decorators \n ***********/\n\n /\n * Get component DOM element\n /\n @Element() element: HTMLMgInputToggleElement;\n\n /\n Component value\n /\n @Prop({ mutable: true }) value: any;\n @Watch('value')\n handleValue(newValue: any): void {\n // Swich to the right option\n this.setChecked();\n // Emit value-change event\n this.valueChange.emit(newValue);\n }\n\n /\n Items are the possible options to select\n /\n @Prop() items!: string[] \| ToggleValue[];\n @Watch('items')\n validateItems(newValue: string[] \| ToggleValue[]): void {\n if (typeof newValue === 'object' && this.items.length !== 2) {\n throw new Error('<mg-input-toggle> prop \"items\" require 2 items.');\n }\n // String array\n else if (allItemsAreString(newValue as string[])) {\n this.options = (newValue as string[]).map(item => ({ title: item, value: item }));\n }\n // Object array\n else if (newValue && (newValue as ToggleValue[]).every(item => isOption(item))) {\n this.options = newValue as ToggleValue[];\n } else {\n throw new Error('<mg-input-toggle> prop \"items\" is required and all items must be the same type: ToggleValue.');\n }\n }\n\n /\n Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n /\n @Prop() identifier!: string;\n\n /\n Input name\n * If not set the value equals the identifier\n /\n @Prop() name: string = this.identifier;\n\n /\n Input label\n /\n @Prop() label!: string;\n\n /\n Define if label is displayed on top\n /\n @Prop() labelOnTop: boolean;\n\n /\n Define if label is visible\n /\n @Prop() labelHide = false;\n\n /\n Define if toggle have on/off style\n /\n @Prop() isOnOff = false;\n @Watch('isOnOff')\n handleIsOnOff(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classOnOff);\n else this.classCollection.delete(this.classOnOff);\n }\n\n /\n Define if toggle display icon\n /\n @Prop() isIcon = false;\n @Watch('isIcon')\n handleIsIcon(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classIcon);\n else this.classCollection.delete(this.classIcon);\n }\n\n /\n Define if input is readonly\n /\n @Prop() readonly = false;\n @Watch('readonly')\n handleReadonly(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classReadonly);\n else this.classCollection.delete(this.classReadonly);\n }\n\n /\n Define if input is disabled\n /\n @Prop() disabled = false;\n @Watch('disabled')\n handleDisabled(newValue: boolean): void {\n if (newValue) this.classCollection.add(this.classDisabled);\n else this.classCollection.delete(this.classDisabled);\n }\n\n /\n Add a tooltip message next to the input\n /\n @Prop() tooltip: string;\n\n /\n Add a help text under the input, usually expected data format and example\n /\n @Prop() helpText: string;\n\n /\n Component classes\n /\n @State() classCollection: ClassList = new ClassList(['mg-c-input--toggle']);\n\n /\n Formated items for display\n /\n @State() options: ToggleValue[];\n\n /\n Error message to display\n /\n @State() errorMessage: string;\n\n /\n Define input valid state\n /\n @State() valid: boolean;\n\n /\n Checked internal value\n /\n @State() checked = false;\n @Watch('checked')\n handleChecked(newValue: boolean): void {\n // style\n if (newValue) this.classCollection.add(this.classIsActive);\n else this.classCollection.delete(this.classIsActive);\n\n // update value\n this.value = this.options[newValue ? 1 : 0].value;\n }\n\n /\n Emited event when value change\n /\n @Event({ eventName: 'value-change' }) valueChange: EventEmitter<any>;\n\n /\n Emited event when checking validity\n /\n @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n /\n Set an error and display a custom error message.\n * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n * It must be paired with an error message to display for the given context.\n * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n * @param valid - value indicating the validity\n * @param errorMessage - the error message to display\n /\n @Method()\n async setError(valid: boolean, errorMessage: string): Promise<void> {\n if (typeof valid !== 'boolean') {\n throw new Error('<mg-input-toggle> method \"setError()\" param \"valid\" must be a boolean');\n } else if (!isValidString(errorMessage)) {\n throw new Error('<mg-input-toggle> method \"setError()\" param \"errorMessage\" must be a string');\n } else {\n this.valid = valid;\n this.inputValid.emit(valid);\n this.setErrorMessage(valid ? undefined : errorMessage);\n }\n }\n\n /\n Set input error message\n * @param errorMessage - errorMessage override\n /\n private setErrorMessage = (errorMessage?: string): void => {\n // Set error message\n this.errorMessage = undefined;\n // Does have a custom error message\n if (!this.valid && errorMessage !== undefined) {\n this.errorMessage = errorMessage;\n }\n };\n\n /\n Change checked value\n /\n private toggleChecked = (): void => {\n this.checked = !this.checked;\n };\n\n /\n Slots validation\n /\n private validateSlots = (): void => {\n const slots = Array.from(this.element.children);\n if (slots.length !== 2) {\n throw new Error('<mg-input-toggle> 2 slots are required.');\n } else if (!this.isIcon) {\n // Due to text-overflow set to ellipsis\n // we need to ensure that slot element have title to display value on mouse over\n slots.forEach(slot => slot.setAttribute('title', slot.textContent));\n }\n };\n\n /\n set checked state\n /\n private setChecked(): void {\n const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);\n\n if ([0, 1].includes(optionTrueValueIndex)) {\n // has \"value\" props type is not a boolean, it is bind/render as an attributes/props\n // true props will be represent by \"true\" string so we convert it has boolean\n // true attribute will be represent by \"\" string so we convert it has boolean\n // https://stenciljs.com/docs/properties\n if (['', 'true'].includes(this.value as string) && this.options.find(option => option.value) !== undefined) {\n this.value = true;\n }\n\n // when options are boolean values and ordered as [true,false] instead [false,true]\n // we need to reversed the checked value logic\n const selectedValue = this.value === this.options[optionTrueValueIndex].value;\n this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;\n } else {\n this.checked = this.value === this.options[1].value;\n }\n }\n\n /***********\n Lifecycle \n **********/\n\n /\n * Check if component props are well configured on init\n /\n componentWillLoad(): void {\n // Check items format\n this.validateItems(this.items);\n // Check slots\n this.validateSlots();\n // init checked value\n this.setChecked();\n // apply handler\n this.handleIsOnOff(this.isOnOff);\n this.handleIsIcon(this.isIcon);\n this.handleReadonly(this.readonly);\n this.handleDisabled(this.disabled);\n }\n\n /\n Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <MgInput\n identifier={this.identifier}\n classCollection={this.classCollection}\n ariaDescribedbyIDs={[]}\n label={this.label}\n labelOnTop={this.labelOnTop}\n labelHide={this.labelHide}\n required={undefined}\n readonly={undefined}\n mgWidth={undefined}\n disabled={this.disabled}\n value={this.value as string}\n readonlyValue={undefined}\n tooltip={!this.readonly && this.tooltip}\n helpText={this.helpText}\n errorMessage={this.errorMessage}\n isFieldset={false}\n >\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={this.checked.toString()}\n aria-readonly={this.disabled \|\| this.readonly}\n id={this.identifier}\n class=\"mg-c-input__button-toggle\"\n disabled={this.disabled \|\| this.readonly}\n onClick={this.toggleChecked}\n >\n <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n <slot name=\"item-1\"></slot>\n </span>\n <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n <slot name=\"item-2\"></slot>\n </span>\n </button>\n </MgInput>\n );\n }\n}\n"]}

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

@@ -0,0 +1,108 @@
+import { createID } from "../../../../../utils/components.utils";
+import { renderAttributes, renderProperties } from "../../../../../utils/e2e.test.utils";
+import { setPageContent, describe, testEach, expect, test } from "../../../../../utils/playwright.e2e.test.utils";
+const TIMEOUT = 1000;
+const defaultSlots = '<span slot="item-1">Choix A</span><span slot="item-2">Choix B</span>';
+const defaultProps = {
+  identifier: createID(),
+  label: 'label',
+  items: [
+    { title: 'batman', value: false },
+    { title: 'joker', value: true },
+  ],
+};
+const createHTML = (args = {}, slots = defaultSlots) => {
+  const props = Object.assign(Object.assign({}, defaultProps), args);
+  return `<mg-input-toggle ${renderAttributes(props)}>${slots}</mg-input-toggle><script>${renderProperties(props, `[identifier="${props.identifier}"]`)}</script>`;
+};
+describe('mg-input-toggle', () => {
+  testEach([
+    {},
+    { args: { isOnOff: true }, slots: '<span slot="item-1">Non</span><span slot="item-2">Oui</span>' },
+    { args: { isIcon: true, isOnOff: true }, slots: '<mg-icon icon="cross" slot="item-1"></mg-icon><mg-icon icon="check" slot="item-2"></mg-icon>' },
+    {
+      slots: '<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>',
+    },
+  ])('Keyboard navigation %s', async (page, { args, slots }) => {
+    await setPageContent(page, createHTML(args, slots));
+    await page.locator('mg-input-toggle.hydrated').waitFor({ timeout: TIMEOUT });
+    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    for (const key of ['Tab', 'Space', 'Tab']) {
+      if (key === 'Space')
+        await page.locator('mg-input-toggle button').press('Space');
+      else
+        await page.keyboard.down(key);
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    }
+  });
+  testEach([
+    { args: { labelOnTop: true, helpText: 'HelpText Message' } },
+    { args: { inputVerticalList: true, helpText: 'HelpText Message' } },
+    { args: { labelOnTop: true, inputVerticalList: true, helpText: 'HelpText Message' } },
+    {
+      slots: '<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>',
+    },
+    { args: { readonly: true }, slots: '<span slot="item-1">Choix A avec text long long</span><span slot="item-2">Choix B avec text long long</span>' },
+    { args: { labelHide: true } },
+    { args: { isOnOff: true, readonly: true }, slots: '<span slot="item-1">Off</span><span slot="item-2">On</span>' },
+    { args: { placeholder: 'placeholder', helpText: 'HelpText Message' } },
+    { args: { helpText: '<mg-icon icon="user" size="small"></mg-icon> Welcome batman' } },
+  ])('Render without tooltip %s', async (page, { args, slots }) => {
+    await setPageContent(page, createHTML(args, slots));
+    await page.locator('mg-input-toggle.hydrated').waitFor({ timeout: TIMEOUT });
+    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+  });
+  testEach([undefined, false, true])('Render and toggle value whith reverse checked logic %s', async (page, value) => {
+    await setPageContent(page, createHTML({
+      items: [
+        { title: 'batman', value: true },
+        { title: 'joker', value: false },
+      ],
+      value,
+    }));
+    await page.locator('mg-input-toggle.hydrated').waitFor({ timeout: TIMEOUT });
+    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    await page.locator('mg-input-toggle button').click();
+    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+  });
+  testEach([true, false])('render with tooltip, case label-on-top %s', async (page, labelOnTop) => {
+    await setPageContent(page, createHTML({ tooltip: 'Tooltip message', labelOnTop }), { width: 250, height: 65 });
+    await page.locator('mg-input-toggle.hydrated').waitFor({ timeout: TIMEOUT });
+    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    await page.keyboard.down('Tab');
+    if (!labelOnTop) {
+      // when label on top tooltip is on fist tab (next to label)
+      await page.keyboard.down('Tab');
+      await page.locator('mg-tooltip-content.hydrated').waitFor({ timeout: TIMEOUT });
+      await expect(page.locator('body')).toHaveScreenshot();
+    }
+    else {
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    }
+  });
+  testEach([true, false].flatMap(value => [true, false].flatMap(readonly => [true, false].flatMap(labelOnTop => [true, false].map(disabled => ({ value, labelOnTop, readonly, disabled }))))))('Should render with template %s', async (page, args) => {
+    await setPageContent(page, createHTML(args));
+    await page.locator('mg-input-toggle.hydrated').waitFor({ timeout: TIMEOUT });
+    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+  });
+  testEach([true, false].map(labelOnTop => ({
+    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',
+    labelOnTop,
+  })))('render inside a div.mg-form-group %s', async (page, args) => {
+    await setPageContent(page, `<div class="mg-form-group">${createHTML(args)}</div>`);
+    await page.locator('mg-input-toggle.hydrated').waitFor({ timeout: TIMEOUT });
+    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+  });
+  test('render with error', async ({ page }) => {
+    await setPageContent(page, createHTML({}));
+    await page.locator('mg-input-toggle.hydrated').waitFor({ timeout: TIMEOUT });
+    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    await page.$eval('mg-input-toggle', async (el) => {
+      await el.setError(false, 'This is an error Batman');
+    });
+    await page.locator('.mg-c-input__input--has-error');
+    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+  });
+});
+//# sourceMappingURL=mg-input-toggle.e2e.playwright.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-input-toggle.e2e.playwright.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/inputs/mg-input-toggle/test/mg-input-toggle.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { createID } from '../../../../../utils/components.utils';\nimport { renderAttributes, renderProperties } from '../../../../../utils/e2e.test.utils';\nimport { setPageContent, describe, testEach, expect, PageType, test } from '../../../../../utils/playwright.e2e.test.utils';\nimport { MgInputToggle } from '../mg-input-toggle';\n\ntype PropsType = Partial<MgInputToggle>;\n\nconst TIMEOUT = 1000;\n\nconst defaultSlots = 'Choix AChoix B';\n\nconst defaultProps = {\n identifier: createID(),\n label: 'label',\n items: [\n { title: 'batman', value: false },\n { title: 'joker', value: true },\n ],\n};\n\nconst createHTML = (args: PropsType = {}, slots = defaultSlots) => {\n const props = { ...defaultProps, ...args };\n return `<mg-input-toggle ${renderAttributes(props)}>${slots}</mg-input-toggle><script>${renderProperties(props, `[identifier=\"${props.identifier}\"]`)}</script>`;\n};\n\ndescribe('mg-input-toggle', () => {\n testEach([\n {},\n { args: { isOnOff: true }, slots: 'NonOui' },\n { args: { isIcon: true, isOnOff: true }, slots: '<mg-icon icon=\"cross\" slot=\"item-1\"></mg-icon><mg-icon icon=\"check\" slot=\"item-2\"></mg-icon>' },\n {\n slots:\n 'Choix A très long long long long long long long long long long long long longChoix B très long long long long long long long long long long long long long',\n },\n ])('Keyboard navigation %s', async (page: PageType, { args, slots }: { args: PropsType; slots: string }) => {\n await setPageContent(page, createHTML(args, slots));\n\n await page.locator('mg-input-toggle.hydrated').waitFor({ timeout: TIMEOUT });\n\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n for (const key of ['Tab', 'Space', 'Tab']) {\n if (key === 'Space') await page.locator('mg-input-toggle button').press('Space');\n else await page.keyboard.down(key);\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n }\n });\n\n testEach([\n { args: { labelOnTop: true, helpText: 'HelpText Message' } },\n { args: { inputVerticalList: true, helpText: 'HelpText Message' } },\n { args: { labelOnTop: true, inputVerticalList: true, helpText: 'HelpText Message' } },\n {\n slots:\n 'Choix A très long long long long long long long long long long long long longChoix B très long long long long long long long long long long long long long',\n },\n { args: { readonly: true }, slots: 'Choix A avec text long longChoix B avec text long long' },\n { args: { labelHide: true } },\n { args: { isOnOff: true, readonly: true }, slots: 'OffOn' },\n { args: { placeholder: 'placeholder', helpText: 'HelpText Message' } },\n { args: { helpText: '<mg-icon icon=\"user\" size=\"small\"></mg-icon> Welcome batman' } },\n ])('Render without tooltip %s', async (page: PageType, { args, slots }: { args: PropsType; slots: string }) => {\n await setPageContent(page, createHTML(args, slots));\n\n await page.locator('mg-input-toggle.hydrated').waitFor({ timeout: TIMEOUT });\n\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n });\n\n testEach([undefined, false, true])('Render and toggle value whith reverse checked logic %s', async (page: PageType, value) => {\n await setPageContent(\n page,\n createHTML({\n items: [\n { title: 'batman', value: true },\n { title: 'joker', value: false },\n ],\n value,\n }),\n );\n\n await page.locator('mg-input-toggle.hydrated').waitFor({ timeout: TIMEOUT });\n\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n await page.locator('mg-input-toggle button').click();\n\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n });\n\n testEach([true, false])('render with tooltip, case label-on-top %s', async (page: PageType, labelOnTop: boolean) => {\n await setPageContent(page, createHTML({ tooltip: 'Tooltip message', labelOnTop }), { width: 250, height: 65 });\n\n await page.locator('mg-input-toggle.hydrated').waitFor({ timeout: TIMEOUT });\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n await page.keyboard.down('Tab');\n if (!labelOnTop) {\n // when label on top tooltip is on fist tab (next to label)\n await page.keyboard.down('Tab');\n await page.locator('mg-tooltip-content.hydrated').waitFor({ timeout: TIMEOUT });\n await expect(page.locator('body')).toHaveScreenshot();\n } else {\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n }\n });\n\n testEach(\n [true, false].flatMap(value =>\n [true, false].flatMap(readonly => [true, false].flatMap(labelOnTop => [true, false].map(disabled => ({ value, labelOnTop, readonly, disabled })))),\n ),\n )('Should render with template %s', async (page: PageType, args) => {\n await setPageContent(page, createHTML(args));\n\n await page.locator('mg-input-toggle.hydrated').waitFor({ timeout: TIMEOUT });\n\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n });\n\n testEach(\n [true, false].map(labelOnTop => ({\n label: 'long label long label long label long label long label long label long label long label long label long label long label',\n tooltip: 'tooltip message',\n labelOnTop,\n })),\n )('render inside a div.mg-form-group %s', async (page: PageType, args) => {\n await setPageContent(page, `<div class=\"mg-form-group\">${createHTML(args)}</div>`);\n\n await page.locator('mg-input-toggle.hydrated').waitFor({ timeout: TIMEOUT });\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n });\n\n test('render with error', async ({ page }) => {\n await setPageContent(page, createHTML({}));\n\n await page.locator('mg-input-toggle.hydrated').waitFor({ timeout: TIMEOUT });\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n await page.$eval('mg-input-toggle', async el => {\n await el.setError(false, 'This is an error Batman');\n });\n\n await page.locator('.mg-c-input__input--has-error');\n await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n });\n});\n"]}

package/dist/collection/components/molecules/inputs/mg-input-toggle/test/mg-input-toggle.spec.js CHANGED Viewed

@@ -199,5 +199,49 @@ describe('mg-input-toggle', () => {
     expect(page.rootInstance.valueChange.emit).toHaveBeenCalledWith(expected);
     expect(page.rootInstance.valueChange.emit).toHaveBeenCalledTimes(1);
   });
+  describe('setError', () => {
+    test.each([true, false])("should display override error with setError component's public method", async (valid) => {
+      const page = await getPage(Object.assign({}, defaultProps), defaultSlots);
+      const mgInputToggle = page.doc.querySelector('mg-input-toggle');
+      const spyInputValid = jest.spyOn(page.rootInstance.inputValid, 'emit');
+      await mgInputToggle.setError(valid, 'error batman');
+      await page.waitForChanges();
+      expect(spyInputValid).toHaveBeenCalledTimes(1);
+      expect(page.root).toMatchSnapshot();
+    });
+    test.each([
+      {
+        valid: '',
+        errorMessage: 'Override error',
+        error: '<mg-input-toggle> method "setError()" param "valid" must be a boolean',
+      },
+      {
+        valid: undefined,
+        errorMessage: 'Override error',
+        error: '<mg-input-toggle> method "setError()" param "valid" must be a boolean',
+      },
+      {
+        valid: true,
+        errorMessage: ' ',
+        error: '<mg-input-toggle> method "setError()" param "errorMessage" must be a string',
+      },
+      {
+        valid: true,
+        errorMessage: true,
+        error: '<mg-input-toggle> method "setError()" param "errorMessage" must be a string',
+      },
+    ])("shloud throw error with setError component's public method invalid params", async (params) => {
+      expect.assertions(1);
+      try {
+        const page = await getPage(Object.assign({}, defaultProps), defaultSlots);
+        const mgInputToggle = page.doc.querySelector('mg-input-toggle');
+        await mgInputToggle.setError(params.valid, params.errorMessage);
+        await page.waitForChanges();
+      }
+      catch (err) {
+        expect(err.message).toMatch(params.error);
+      }
+    });
+  });
 });
 //# sourceMappingURL=mg-input-toggle.spec.js.map

package/dist/collection/components/molecules/inputs/mg-input-toggle/test/mg-input-toggle.spec.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mg-input-toggle.spec.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/inputs/mg-input-toggle/test/mg-input-toggle.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgInputToggle } from '../mg-input-toggle';\nimport { MgIcon } from '../../../../atoms/mg-icon/mg-icon';\n\nconst getPage = (args, slots?) =>\n newSpecPage({\n components: [MgInputToggle, MgIcon],\n template: () => <mg-input-toggle {...args}>{slots && slots.map(slot => slot())}</mg-input-toggle>,\n });\n\nconst defaultSlots = [() => <span slot=\"item-1\">Batman</span>, () => <span slot=\"item-2\">Joker</span>];\nconst onOffSlots = [() => <span slot=\"item-1\">Non</span>, () => <span slot=\"item-2\">Oui</span>];\nconst iconSlots = [\n () => (\n <span slot=\"item-1\">\n <mg-icon icon=\"cross\"></mg-icon>\n </span>\n ),\n () => (\n <span slot=\"item-2\">\n <mg-icon icon=\"check\"></mg-icon>\n </span>\n ),\n];\n\nconst defaultProps = {\n label: 'label',\n identifier: 'identifier',\n items: [\n { title: 'batman', value: false },\n { title: 'joker', value: true },\n ],\n};\n\ndescribe('mg-input-toggle', () => {\n describe.each([\n {\n props: {\n ...defaultProps,\n },\n slots: defaultSlots,\n },\n {\n props: {\n ...defaultProps,\n value: '',\n },\n slots: defaultSlots,\n },\n {\n props: {\n ...defaultProps,\n value: true,\n },\n slots: defaultSlots,\n },\n {\n props: {\n ...defaultProps,\n value: 'true',\n },\n slots: defaultSlots,\n },\n {\n props: {\n ...defaultProps,\n isOnOff: false,\n },\n slots: onOffSlots,\n },\n {\n props: {\n ...defaultProps,\n isIcon: true,\n isOnOff: true,\n },\n slots: iconSlots,\n },\n ])('template', ({ props, slots }) => {\n test.each([\n {\n ...props,\n },\n {\n ...props,\n labelOnTop: true,\n },\n {\n ...props,\n labelHide: true,\n },\n {\n ...props,\n readonly: true,\n },\n {\n ...props,\n disabled: true,\n },\n {\n ...props,\n helpText: 'Hello joker',\n },\n {\n ...props,\n tooltip: 'My Tooltip Message',\n },\n {\n ...props,\n tooltip: 'My Tooltip Message',\n labelOnTop: true,\n },\n ])('Should render with args %s:', async args => {\n const { root } = await getPage(args, slots);\n expect(root).toMatchSnapshot();\n });\n });\n\n describe('errors', () => {\n test.each(['', ' ', undefined])('Should not render with invalid identifier property: %s', async identifier => {\n expect.assertions(1);\n try {\n await getPage(\n {\n identifier,\n label: 'label',\n items: [\n { title: 'batman', value: false },\n { title: 'joker', value: true },\n ],\n },\n defaultSlots,\n );\n } catch (err) {\n expect(err.message).toMatch('<mg-input> prop \"identifier\" is required.');\n }\n });\n\n test.each(['', ' ', undefined])('Should throw error with invalid label property: %s', async label => {\n expect.assertions(1);\n try {\n await getPage(\n {\n identifier: 'identifier',\n label,\n items: [\n { title: 'batman', value: false },\n { title: 'joker', value: true },\n ],\n },\n defaultSlots,\n );\n } catch (err) {\n expect(err.message).toMatch('<mg-input> prop \"label\" is required.');\n }\n });\n\n test('Should throw an error with labelOnTop & labelHide set to true', async () => {\n expect.assertions(1);\n try {\n await getPage({ identifier: 'identifier', label: 'batman', labelOnTop: true, labelHide: true, items: ['batman', 'joker'] }, defaultSlots);\n } catch (err) {\n expect(err.message).toMatch('<mg-input> prop \"labelOnTop\" must not be paired with the prop \"labelHide\"');\n }\n });\n\n test('Should throw an error with less than 2 items, case %s', async () => {\n expect.assertions(1);\n try {\n await getPage({ label: 'batman', items: [{ title: 'batman' }] }, defaultSlots);\n } catch (err) {\n expect(err.message).toMatch('<mg-input-toggle> prop \"items\" require 2 items.');\n }\n });\n\n test.each([undefined, [defaultSlots[0]], [...defaultSlots, ...defaultSlots]])('Should throw an error with blank slots', async () => {\n expect.assertions(1);\n try {\n await getPage({ label: 'batman', items: ['batman', 'joker'] });\n } catch (err) {\n expect(err.message).toMatch('<mg-input-toggle> 2 slots are required.');\n }\n });\n\n test.each([\n [['batman', { title: 'batman', value: 'batman' }]],\n [['batman', { batman: 'batman' }]],\n [[true, false]],\n [[1, 2]],\n [[true, 'batman']],\n [[{ title: 'batman', value: 'batman' }, { batman: 'batman' }]],\n [\n [\n { title: 'batman', value: undefined },\n { title: 'batman', value: 'test' },\n ],\n ],\n ])('Should throw error with invalid items property: %s', async items => {\n expect.assertions(1);\n try {\n await getPage({ label: 'Label', items }, defaultSlots);\n } catch (err) {\n expect(err.message).toMatch('<mg-input-toggle> prop \"items\" is required and all items must be the same type: ToggleValue.');\n }\n });\n });\n\n test.each([\n {\n items: [\n { title: 'batman', value: 'a' },\n { title: 'joker', value: 'b' },\n ],\n expected: 'b',\n value: undefined,\n },\n {\n items: [\n { title: 'batman', value: 'a' },\n { title: 'joker', value: 'b' },\n ],\n expected: 'a',\n value: 'b',\n },\n {\n items: [\n { title: 'batman', value: 1 },\n { title: 'joker', value: 2 },\n ],\n expected: 2,\n value: 1,\n },\n {\n items: [\n { title: 'batman', value: false },\n { title: 'robin', value: true },\n ],\n expected: false,\n value: true,\n },\n {\n items: [\n { title: 'batman', value: true },\n { title: 'robin', value: false },\n ],\n expected: true,\n value: false,\n },\n ])('Should trigger events for items with inputValue: %s', async ({ items, expected, value }) => {\n const args = { label: 'label', items, identifier: 'identifier', helpText: 'My help text', value };\n const page = await getPage(args, defaultSlots);\n\n const mgInputToggle = page.doc.querySelector('mg-input-toggle');\n const button = mgInputToggle.shadowRoot.querySelector('button');\n\n jest.spyOn(page.rootInstance.valueChange, 'emit');\n\n button.dispatchEvent(new CustomEvent('focus', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot(); //Snapshot on focus\n\n button.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.rootInstance.valueChange.emit).toHaveBeenCalledWith(expected);\n expect(page.rootInstance.valueChange.emit).toHaveBeenCalledTimes(1);\n });\n});\n"]}
1	+ {"version":3,"file":"mg-input-toggle.spec.js","sourceRoot":"","sources":["../../../../../../src/components/molecules/inputs/mg-input-toggle/test/mg-input-toggle.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgInputToggle } from '../mg-input-toggle';\nimport { MgIcon } from '../../../../atoms/mg-icon/mg-icon';\n\nconst getPage = (args, slots?) =>\n newSpecPage({\n components: [MgInputToggle, MgIcon],\n template: () => <mg-input-toggle {...args}>{slots && slots.map(slot => slot())}</mg-input-toggle>,\n });\n\nconst defaultSlots = [() => <span slot=\"item-1\">Batman</span>, () => <span slot=\"item-2\">Joker</span>];\nconst onOffSlots = [() => <span slot=\"item-1\">Non</span>, () => <span slot=\"item-2\">Oui</span>];\nconst iconSlots = [\n () => (\n <span slot=\"item-1\">\n <mg-icon icon=\"cross\"></mg-icon>\n </span>\n ),\n () => (\n <span slot=\"item-2\">\n <mg-icon icon=\"check\"></mg-icon>\n </span>\n ),\n];\n\nconst defaultProps = {\n label: 'label',\n identifier: 'identifier',\n items: [\n { title: 'batman', value: false },\n { title: 'joker', value: true },\n ],\n};\n\ndescribe('mg-input-toggle', () => {\n describe.each([\n {\n props: {\n ...defaultProps,\n },\n slots: defaultSlots,\n },\n {\n props: {\n ...defaultProps,\n value: '',\n },\n slots: defaultSlots,\n },\n {\n props: {\n ...defaultProps,\n value: true,\n },\n slots: defaultSlots,\n },\n {\n props: {\n ...defaultProps,\n value: 'true',\n },\n slots: defaultSlots,\n },\n {\n props: {\n ...defaultProps,\n isOnOff: false,\n },\n slots: onOffSlots,\n },\n {\n props: {\n ...defaultProps,\n isIcon: true,\n isOnOff: true,\n },\n slots: iconSlots,\n },\n ])('template', ({ props, slots }) => {\n test.each([\n {\n ...props,\n },\n {\n ...props,\n labelOnTop: true,\n },\n {\n ...props,\n labelHide: true,\n },\n {\n ...props,\n readonly: true,\n },\n {\n ...props,\n disabled: true,\n },\n {\n ...props,\n helpText: 'Hello joker',\n },\n {\n ...props,\n tooltip: 'My Tooltip Message',\n },\n {\n ...props,\n tooltip: 'My Tooltip Message',\n labelOnTop: true,\n },\n ])('Should render with args %s:', async args => {\n const { root } = await getPage(args, slots);\n expect(root).toMatchSnapshot();\n });\n });\n\n describe('errors', () => {\n test.each(['', ' ', undefined])('Should not render with invalid identifier property: %s', async identifier => {\n expect.assertions(1);\n try {\n await getPage(\n {\n identifier,\n label: 'label',\n items: [\n { title: 'batman', value: false },\n { title: 'joker', value: true },\n ],\n },\n defaultSlots,\n );\n } catch (err) {\n expect(err.message).toMatch('<mg-input> prop \"identifier\" is required.');\n }\n });\n\n test.each(['', ' ', undefined])('Should throw error with invalid label property: %s', async label => {\n expect.assertions(1);\n try {\n await getPage(\n {\n identifier: 'identifier',\n label,\n items: [\n { title: 'batman', value: false },\n { title: 'joker', value: true },\n ],\n },\n defaultSlots,\n );\n } catch (err) {\n expect(err.message).toMatch('<mg-input> prop \"label\" is required.');\n }\n });\n\n test('Should throw an error with labelOnTop & labelHide set to true', async () => {\n expect.assertions(1);\n try {\n await getPage({ identifier: 'identifier', label: 'batman', labelOnTop: true, labelHide: true, items: ['batman', 'joker'] }, defaultSlots);\n } catch (err) {\n expect(err.message).toMatch('<mg-input> prop \"labelOnTop\" must not be paired with the prop \"labelHide\"');\n }\n });\n\n test('Should throw an error with less than 2 items, case %s', async () => {\n expect.assertions(1);\n try {\n await getPage({ label: 'batman', items: [{ title: 'batman' }] }, defaultSlots);\n } catch (err) {\n expect(err.message).toMatch('<mg-input-toggle> prop \"items\" require 2 items.');\n }\n });\n\n test.each([undefined, [defaultSlots[0]], [...defaultSlots, ...defaultSlots]])('Should throw an error with blank slots', async () => {\n expect.assertions(1);\n try {\n await getPage({ label: 'batman', items: ['batman', 'joker'] });\n } catch (err) {\n expect(err.message).toMatch('<mg-input-toggle> 2 slots are required.');\n }\n });\n\n test.each([\n [['batman', { title: 'batman', value: 'batman' }]],\n [['batman', { batman: 'batman' }]],\n [[true, false]],\n [[1, 2]],\n [[true, 'batman']],\n [[{ title: 'batman', value: 'batman' }, { batman: 'batman' }]],\n [\n [\n { title: 'batman', value: undefined },\n { title: 'batman', value: 'test' },\n ],\n ],\n ])('Should throw error with invalid items property: %s', async items => {\n expect.assertions(1);\n try {\n await getPage({ label: 'Label', items }, defaultSlots);\n } catch (err) {\n expect(err.message).toMatch('<mg-input-toggle> prop \"items\" is required and all items must be the same type: ToggleValue.');\n }\n });\n });\n\n test.each([\n {\n items: [\n { title: 'batman', value: 'a' },\n { title: 'joker', value: 'b' },\n ],\n expected: 'b',\n value: undefined,\n },\n {\n items: [\n { title: 'batman', value: 'a' },\n { title: 'joker', value: 'b' },\n ],\n expected: 'a',\n value: 'b',\n },\n {\n items: [\n { title: 'batman', value: 1 },\n { title: 'joker', value: 2 },\n ],\n expected: 2,\n value: 1,\n },\n {\n items: [\n { title: 'batman', value: false },\n { title: 'robin', value: true },\n ],\n expected: false,\n value: true,\n },\n {\n items: [\n { title: 'batman', value: true },\n { title: 'robin', value: false },\n ],\n expected: true,\n value: false,\n },\n ])('Should trigger events for items with inputValue: %s', async ({ items, expected, value }) => {\n const args = { label: 'label', items, identifier: 'identifier', helpText: 'My help text', value };\n const page = await getPage(args, defaultSlots);\n\n const mgInputToggle = page.doc.querySelector('mg-input-toggle');\n const button = mgInputToggle.shadowRoot.querySelector('button');\n\n jest.spyOn(page.rootInstance.valueChange, 'emit');\n\n button.dispatchEvent(new CustomEvent('focus', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot(); //Snapshot on focus\n\n button.dispatchEvent(new CustomEvent('click', { bubbles: true }));\n await page.waitForChanges();\n\n expect(page.rootInstance.valueChange.emit).toHaveBeenCalledWith(expected);\n expect(page.rootInstance.valueChange.emit).toHaveBeenCalledTimes(1);\n });\n\n describe('setError', () => {\n test.each([true, false])(\"should display override error with setError component's public method\", async valid => {\n const page = await getPage({ ...defaultProps }, defaultSlots);\n\n const mgInputToggle = page.doc.querySelector('mg-input-toggle');\n\n const spyInputValid = jest.spyOn(page.rootInstance.inputValid, 'emit');\n\n await mgInputToggle.setError(valid, 'error batman');\n\n await page.waitForChanges();\n\n expect(spyInputValid).toHaveBeenCalledTimes(1);\n\n expect(page.root).toMatchSnapshot();\n });\n\n test.each([\n {\n valid: '',\n errorMessage: 'Override error',\n error: '<mg-input-toggle> method \"setError()\" param \"valid\" must be a boolean',\n },\n {\n valid: undefined,\n errorMessage: 'Override error',\n error: '<mg-input-toggle> method \"setError()\" param \"valid\" must be a boolean',\n },\n {\n valid: true,\n errorMessage: ' ',\n error: '<mg-input-toggle> method \"setError()\" param \"errorMessage\" must be a string',\n },\n {\n valid: true,\n errorMessage: true,\n error: '<mg-input-toggle> method \"setError()\" param \"errorMessage\" must be a string',\n },\n ])(\"shloud throw error with setError component's public method invalid params\", async params => {\n expect.assertions(1);\n try {\n const page = await getPage({ ...defaultProps }, defaultSlots);\n\n const mgInputToggle = page.doc.querySelector('mg-input-toggle');\n await mgInputToggle.setError(params.valid as unknown as boolean, params.errorMessage as unknown as string);\n\n await page.waitForChanges();\n } catch (err) {\n expect(err.message).toMatch(params.error);\n }\n });\n });\n});\n"]}

package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js CHANGED Viewed

@@ -41,7 +41,7 @@ export class MgMenu {
         (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, () => {
           this.focusedMenuItem = index;
           // reset expanded on previous active menu item
-          (Boolean(this.getItemMoreMenuItem()) ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {
+          (this.getItemMoreMenuItem() ? [...this.menuItems, this.getItemMoreMenuItem()] : this.menuItems).forEach((item, index) => {
             this.closeMenuItem(item, index !== this.focusedMenuItem);
           });
         });