@mgdis/mg-components 5.1.0 → 5.2.0

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

@@ -7,6 +7,7 @@ export declare class MgInputCheckbox {
    ************/
   private inputs;
   private messages;
+  private hasDisplayedError;
   /**************
    * Decorators *
    **************/
@@ -58,6 +59,7 @@ export declare class MgInputCheckbox {
    * Define if input is disabled
    */
   disabled: boolean;
+  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void;
   /**
    * Add a tooltip message next to the input
    */
@@ -110,20 +112,20 @@ export declare class MgInputCheckbox {
    * Handle blur event
    */
   private handleBlur;
-  /**
-   * Check if input is valid
-   */
-  private checkValidity;
-  /**
-   * Check input errors
-   */
-  private checkError;
   /**
    * get invalid element
    *
    * @returns {HTMLInputElement} element
    */
   private getInvalidElement;
+  /**
+   * Check if input is valid
+   */
+  private checkValidity;
+  /**
+   * Set input error message
+   */
+  private setErrorMessage;
   /*************
    * Lifecycle *
    *************/

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

@@ -7,7 +7,7 @@ export declare class MgInputDate {
   private input;
   private messages;
   private locale;
-  private hasError;
+  private hasDisplayedError;
   /**************
    * Decorators *
    **************/
@@ -53,6 +53,7 @@ export declare class MgInputDate {
    * Define if input is disabled
    */
   disabled: boolean;
+  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void;
   /**
    * Add a tooltip message next to the input
    */
@@ -120,18 +121,12 @@ export declare class MgInputDate {
    * @returns {null | InputError} error code
    */
   private getInputError;
-  /**
-   * Set error message
-   *
-   * @returns {void}
-   */
-  private setErrorMessage;
   /**
    * Check input errors
    *
    * @returns {void}
    */
-  private checkError;
+  private setErrorMessage;
   /*************
    * Lifecycle *
    *************/

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

@@ -11,7 +11,7 @@ export declare class MgInputNumeric {
   private input;
   private locale;
   private messages;
-  private hasError;
+  private hasDisplayedError;
   /**************
    * Decorators *
    **************/
@@ -62,6 +62,7 @@ export declare class MgInputNumeric {
    * Define if input is disabled
    */
   disabled: boolean;
+  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void;
   /**
    * Define input width
    */
@@ -169,17 +170,11 @@ export declare class MgInputNumeric {
    */
   private checkValidity;
   /**
-   * Set error message
+   * Set input error message
    *
    * @returns {void}
    */
   private setErrorMessage;
-  /**
-   * Check input errors
-   *
-   * @returns {void}
-   */
-  private checkError;
   /**
    * Get input error code
    *

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

@@ -7,7 +7,7 @@ export declare class MgInputPassword {
    ************/
   private input;
   private messages;
-  private hasError;
+  private hasDisplayedError;
   /**************
    * Decorators *
    **************/
@@ -58,6 +58,7 @@ export declare class MgInputPassword {
    * Define if input is disabled
    */
   disabled: boolean;
+  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void;
   /**
    * Define input width
    */
@@ -113,9 +114,9 @@ export declare class MgInputPassword {
    */
   private checkValidity;
   /**
-   * Check input errors
+   * Set input error message
    */
-  private checkError;
+  private setErrorMessage;
   /*************
    * Lifecycle *
    *************/

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

@@ -7,6 +7,7 @@ export declare class MgInputRadio {
    ************/
   private inputs;
   private messages;
+  private hasDisplayedError;
   /**************
    * Decorators *
    **************/
@@ -62,6 +63,7 @@ export declare class MgInputRadio {
    * Define if input is disabled
    */
   disabled: boolean;
+  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void;
   /**
    * Add a tooltip message next to the input
    */
@@ -124,11 +126,11 @@ export declare class MgInputRadio {
    */
   private checkValidity;
   /**
-   * Check input errors
+   * Set input error message
    *
    * @returns {void}
    */
-  private checkError;
+  private setErrorMessage;
   /**
    * get invalid element
    *

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

@@ -8,7 +8,7 @@ export declare class MgInputSelect {
    ************/
   private input;
   private messages;
-  private hasError;
+  private hasDisplayedError;
   /**************
    * Decorators *
    **************/
@@ -72,6 +72,7 @@ export declare class MgInputSelect {
    * Define if input is disabled
    */
   disabled: boolean;
+  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void;
   /**
    * Define input width
    */
@@ -139,9 +140,9 @@ export declare class MgInputSelect {
    */
   private checkValidity;
   /**
-   * Check input errors
+   * Set input error message
    */
-  private checkError;
+  private setErrorMessage;
   /*************
    * Lifecycle *
    *************/

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

@@ -11,7 +11,7 @@ export declare class MgInputText {
   private characterLeftId;
   private input;
   private messages;
-  private hasError;
+  private hasDisplayedError;
   /**************
    * Decorators *
    **************/
@@ -75,6 +75,7 @@ export declare class MgInputText {
    * Define if input is disabled
    */
   disabled: boolean;
+  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void;
   /**
    * Define input width
    */
@@ -160,13 +161,13 @@ export declare class MgInputText {
    */
   private checkValidity;
   /**
-   * Check input errors
+   * Set input error message
    *
    * @returns {void}
    */
-  private checkError;
+  private setErrorMessage;
   /**
-   * Validate patern configuration
+   * Validate pattern configuration
    *
    * @returns {void}
    */

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

@@ -10,7 +10,7 @@ export declare class MgInputTextarea {
   private characterLeftId;
   private input;
   private messages;
-  private hasError;
+  private hasDisplayedError;
   /**************
    * Decorators *
    **************/
@@ -65,6 +65,7 @@ export declare class MgInputTextarea {
    * Define if input is disabled
    */
   disabled: boolean;
+  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void;
   /**
    * Define input width
    */
@@ -152,9 +153,9 @@ export declare class MgInputTextarea {
    */
   private checkValidity;
   /**
-   * Check input errors
+   * Set input error message
    */
-  private checkError;
+  private setErrorMessage;
   /**
    * Validate pattern configuration
    */

package/dist/types/components/molecules/mg-form/mg-form.d.ts

@@ -6,12 +6,15 @@ export declare class MgForm {
    ************/
   private mgInputs;
   private mgButtons;
-  private requiredMessage;
+  private classAllRequired;
   private form;
   private messages;
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
   element: HTMLMgFormElement;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
@@ -31,6 +34,7 @@ export declare class MgForm {
    * Define if form is disabled
    */
   disabled: boolean;
+  handleAttributeChange(): void;
   /**
    * Define form valid state
    */
@@ -43,6 +47,10 @@ export declare class MgForm {
    * Component classes
    */
   classList: ClassList;
+  /**
+   * Required message
+   */
+  requiredMessage: string;
   /**
    * Emitted event on form validity check
    * Tells if form is valid or not
@@ -71,7 +79,19 @@ export declare class MgForm {
    * @returns {void}
    */
   private checkValidity;
+  /**
+   * Handle Form Submit
+   *
+   * @param {SubmitEvent} event submit event
+   * @returns {void}
+   */
   private handleFormSubmit;
+  /**
+   * Set mgInputs
+   *
+   * @returns {void}
+   */
+  private setMgInputs;
   /*************
    * Lifecycle *
    *************/

package/dist/types/components/molecules/mg-message/mg-message.d.ts

@@ -11,6 +11,9 @@ export declare class MgMessage {
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
   element: HTMLMgMessageElement;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)

package/dist/types/components/molecules/mg-modal/mg-modal.d.ts

@@ -13,6 +13,9 @@ export declare class MgModal {
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
   element: HTMLMgModalElement;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -51,12 +51,12 @@
     "@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
     "@stencil/eslint-plugin": "^0.4.0",
     "@stencil/sass": "^1.5.2",
-    "@storybook/addon-a11y": "^6.5.12",
-    "@storybook/addon-actions": "^6.5.12",
-    "@storybook/addon-docs": "^6.5.12",
-    "@storybook/addon-essentials": "^6.5.12",
-    "@storybook/addon-links": "^6.5.12",
-    "@storybook/html": "^6.5.12",
+    "@storybook/addon-a11y": "^6.5.13",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-docs": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/html": "^6.5.13",
     "@storybook/preset-scss": "^1.0.3",
     "@types/jest": "^26.0.24",
     "@types/jest-image-snapshot": "^4.3.1",
@@ -77,7 +77,6 @@
     "jest-image-snapshot": "^4.5.1",
     "jest-junit": "^13.0.0",
     "jsx-dom": "^8.0.1-beta.1",
-    "mutation-observer": "^1.0.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.5.1",
     "puppeteer": "^13.3.2",

package/dist/collection/utils/test.utils.js

@@ -1,38 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-/**
- * Create E2E page
- *
- * @param {string} htmlString html to render
- * @returns {Promise<DesignSystemE2EPage>} page
- */
-export async function createPage(htmlString) {
-  const defaultSize = 600;
-  const page = (await newE2EPage());
-  await page.setViewport({ width: defaultSize, height: defaultSize });
-  await page.setContent(`<link rel="stylesheet" href="http://localhost:3333/build/variables.css" /><meta charset="UTF-8">${htmlString}`, { waitUntil: 'networkidle0' });
-  await page.evaluateHandle('document.fonts.ready');
-  // monkey patch screenshot function to add some extra features
-  const screenshot = page.screenshot;
-  page.screenshot = async () => {
-    let width = page.viewport().width;
-    let height = page.viewport().height;
-    // if viewport has not been redefined
-    if (page.viewport().width === defaultSize && page.viewport().height === defaultSize) {
-      const htmlElement = await page.$('html');
-      const boundingBox = await htmlElement.boundingBox();
-      width = Math.round(boundingBox.width);
-      height = Math.round(boundingBox.height);
-    }
-    return screenshot.call(page, {
-      clip: { x: 0, y: 0, width, height },
-    });
-  };
-  return page;
-}
-/**
- * Clone Deep function
- *
- * @param {unknown} obj object to clone
- * @returns {unknown} cloned json
- */
-export const cloneDeep = (obj) => JSON.parse(JSON.stringify(obj));