@mgdis/mg-components 3.1.0 → 3.2.0

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

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { Width } from '../MgInput.conf';
 import { ClassList } from '../../../../utils/components.utils';
@@ -15,19 +14,19 @@ export declare class MgInputPassword {
    * Component value
    */
   value: string;
+  handleValue(newValue: string): void;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    * If not set, it will be created.
    */
-  identifier?: string;
+  identifier: string;
   /**
    * Input name
    * If not set the value equals the identifier
    */
-  name?: string;
+  name: string;
   /**
    * Input label
-   * Required
    */
   label: string;
   /**
@@ -68,11 +67,11 @@ export declare class MgInputPassword {
    */
   helpText: string;
   /**
-   * Define input pattern to validate
+   * Define input valid state
    */
   valid: boolean;
   /**
-   * Define input pattern error message
+   * Define input invalid state
    */
   invalid: boolean;
   /**
@@ -84,9 +83,19 @@ export declare class MgInputPassword {
    */
   errorMessage: string;
   /**
-   * Emmited event when value change
+   * Emited event when value change
    */
   valueChange: EventEmitter<string>;
+  /**
+   * Emited event when checking validity
+   */
+  inputValid: EventEmitter<boolean>;
+  /**
+   * Public method to display errors
+   *
+   * @returns {Promise<void>}
+   */
+  displayError(): Promise<void>;
   /**
    * Handle input event
    */
@@ -106,6 +115,16 @@ export declare class MgInputPassword {
   /*************
    * Lifecycle *
    *************/
-  componentWillLoad(): NodeJS.Timeout;
-  render(): any;
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
+  componentWillLoad(): ReturnType<typeof setTimeout>;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
 }

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

@@ -1,6 +1,11 @@
 declare const _default: {
   component: string;
   title: string;
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
 };
 export default _default;
 /**

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

@@ -4,6 +4,6 @@
  */
 export declare type RadioOption = {
   title: string;
-  value: any;
+  value: unknown;
   disabled?: boolean;
 };

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

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '../../../../utils/components.utils';
 import { RadioOption } from './mg-input-radio.conf';
@@ -15,12 +14,13 @@ export declare class MgInputRadio {
    * Component value
    */
   value: any;
+  handleValue(newValue: any): void;
   /**
    * Items are the possible options to select
    * Required
    */
   items: string[] | RadioOption[];
-  validateItems(newValue: any): void;
+  validateItems(newValue: string[] | RadioOption[]): void;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    * If not set, it will be created.
@@ -33,7 +33,6 @@ export declare class MgInputRadio {
   name: string;
   /**
    * Input label
-   * Required
    */
   label: string;
   /**
@@ -69,11 +68,11 @@ export declare class MgInputRadio {
    */
   helpText: string;
   /**
-   * Force valid component
+   * Define input valid state
    */
   valid: boolean;
   /**
-   * Force invalid component
+   * Define input invalid state
    */
   invalid: boolean;
   /**
@@ -92,30 +91,60 @@ export declare class MgInputRadio {
    * Emitted event when value change
    */
   valueChange: EventEmitter<any>;
+  /**
+   * Emited event when checking validity
+   */
+  inputValid: EventEmitter<boolean>;
+  /**
+   * Public method to display errors
+   *
+   * @returns {Promise<void>}
+   */
+  displayError(): Promise<void>;
   /**
    * Handle input event
+   *
+   * @param {event} event input event
+   * @returns {void}
    */
   private handleInput;
   /**
    * Handle blur event
+   *
+   * @returns {void}
    */
   private handleBlur;
   /**
    * Check if input is valid
+   *
+   * @returns {void}
    */
   private checkValidity;
   /**
    * Check input errors
+   *
+   * @returns {void}
    */
   private checkError;
   /**
    * get invalid element
-   * @returns element: HTMLInputElement
+   *
+   * @returns {HTMLInputElement} element
    */
   private getInvalidElement;
   /*************
    * Lifecycle *
    *************/
-  componentWillLoad(): NodeJS.Timeout;
-  render(): any;
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
+  componentWillLoad(): ReturnType<typeof setTimeout>;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
 }

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

@@ -9,6 +9,11 @@ declare const _default: {
       };
     };
   };
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
 };
 export default _default;
 export declare const MgInputRadio: any;

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

@@ -4,7 +4,7 @@
  */
 export declare type SelectOption = {
   title: string;
-  value: any;
+  value: unknown;
   disabled?: boolean;
   group?: string;
 };

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

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { Width } from '../MgInput.conf';
 import { ClassList } from '../../../../utils/components.utils';
@@ -16,11 +15,12 @@ export declare class MgInputSelect {
    * Component value
    */
   value: any;
+  handleValue(newValue: any): void;
   /**
    * Items are the possible options to select
    */
   items: string[] | SelectOption[];
-  validateItems(newValue: any): void;
+  validateItems(newValue: string[] | SelectOption[]): void;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    * If not set, it will be created.
@@ -33,7 +33,6 @@ export declare class MgInputSelect {
   name: string;
   /**
    * Input label
-   * Required
    */
   label: string;
   /**
@@ -106,9 +105,23 @@ export declare class MgInputSelect {
    */
   valueExist: boolean;
   /**
-   * Emmited event when value change
+   * Does value match any item option
+   */
+  readonlyValue: string;
+  /**
+   * Emited event when value change
    */
-  valueChange: EventEmitter<string>;
+  valueChange: EventEmitter<any>;
+  /**
+   * Emited event when checking validity
+   */
+  inputValid: EventEmitter<boolean>;
+  /**
+   * Public method to display errors
+   *
+   * @returns {Promise<void>}
+   */
+  displayError(): Promise<void>;
   /**
    * Handle input event
    */
@@ -128,6 +141,16 @@ export declare class MgInputSelect {
   /*************
    * Lifecycle *
    *************/
-  componentWillLoad(): NodeJS.Timeout;
-  render(): any;
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
+  componentWillLoad(): ReturnType<typeof setTimeout>;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
 }

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

@@ -1,6 +1,20 @@
 declare const _default: {
   component: string;
   title: string;
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
+  argTypes: {
+    placeholder: {
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+  };
 };
 export default _default;
 export declare const MgInputSelect: any;

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

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { Width } from '../MgInput.conf';
 import { ClassList } from '../../../../utils/components.utils';
@@ -7,6 +6,7 @@ export declare class MgInputText {
    * Internal *
    ************/
   private classFocus;
+  private isInputGroupAppend;
   private classError;
   private input;
   /**************
@@ -20,19 +20,19 @@ export declare class MgInputText {
    * Component value
    */
   value: string;
+  handleValue(newValue: string): void;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    * If not set, it will be created.
    */
-  identifier?: string;
+  identifier: string;
   /**
    * Input name
    * If not set the value equals the identifier
    */
-  name?: string;
+  name: string;
   /**
    * Input label
-   * Required
    */
   label: string;
   /**
@@ -101,11 +101,11 @@ export declare class MgInputText {
    */
   helpText: string;
   /**
-   * Define input pattern to validate
+   * Define input valid state
    */
   valid: boolean;
   /**
-   * Define input pattern error message
+   * Define input invalid state
    */
   invalid: boolean;
   /**
@@ -117,35 +117,65 @@ export declare class MgInputText {
    */
   errorMessage: string;
   /**
-   * Emmited event when value change
+   * Emited event when value change
    */
   valueChange: EventEmitter<string>;
+  /**
+   * Emited event when checking validity
+   */
+  inputValid: EventEmitter<boolean>;
+  /**
+   * Public method to play input focus
+   *
+   * @returns {Promise<void>}
+   */
+  setFocus(): Promise<void>;
+  /**
+   * Public method to display errors
+   *
+   * @returns {Promise<void>}
+   */
+  displayError(): Promise<void>;
   /**
    * Handle input event
+   *
+   * @returns {void}
    */
   private handleInput;
   /**
    * Handle focus event
+   *
+   * @returns {void}
    */
   private handleFocus;
   /**
    * Handle blur event
+   *
+   * @returns {void}
    */
   private handleBlur;
   /**
    * Check if input is valid
+   *
+   * @returns {void}
    */
   private checkValidity;
   /**
    * Check input errors
+   *
+   * @returns {void}
    */
   private checkError;
   /**
    * Validate patern configuration
+   *
+   * @returns {void}
    */
   private validatePattern;
   /**
    * Validate append slot
+   *
+   * @returns {void}
    */
   private validateAppendSlot;
   /*************
@@ -153,8 +183,14 @@ export declare class MgInputText {
    *************/
   /**
    * Check if component props are well configured on init
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
+  componentWillLoad(): ReturnType<typeof setTimeout>;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
    */
-  componentWillLoad(): NodeJS.Timeout;
-  componentDidLoad(): void;
-  render(): any;
+  render(): HTMLElement;
 }

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

@@ -1,6 +1,11 @@
 declare const _default: {
   component: string;
   title: string;
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
 };
 export default _default;
 /**

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

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { Width } from '../MgInput.conf';
 import { ClassList } from '../../../../utils/components.utils';
@@ -16,19 +15,19 @@ export declare class MgInputTextarea {
    * Component value
    */
   value: string;
+  handleValue(newValue: string): void;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    * If not set, it will be created.
    */
-  identifier?: string;
+  identifier: string;
   /**
    * Input name
    * If not set the value equals the identifier
    */
-  name?: string;
+  name: string;
   /**
    * Input label
-   * Required
    */
   label: string;
   /**
@@ -93,11 +92,11 @@ export declare class MgInputTextarea {
    */
   helpText: string;
   /**
-   * Define input pattern to validate
+   * Define input valid state
    */
   valid: boolean;
   /**
-   * Define input pattern error message
+   * Define input invalid state
    */
   invalid: boolean;
   /**
@@ -109,9 +108,19 @@ export declare class MgInputTextarea {
    */
   errorMessage: string;
   /**
-   * Emmited event when value change
+   * Emited event when value change
    */
   valueChange: EventEmitter<string>;
+  /**
+   * Emited event when checking validity
+   */
+  inputValid: EventEmitter<boolean>;
+  /**
+   * Public method to display errors
+   *
+   * @returns {Promise<void>}
+   */
+  displayError(): Promise<void>;
   /**
    * Handle input event
    */
@@ -127,7 +136,8 @@ export declare class MgInputTextarea {
   /**
    * Get pattern validity
    * Pattern is not defined on textarea field : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea
-   * @returns {boolean}
+   *
+   * @returns {boolean} is pattern valid
    */
   private getPatternValidity;
   /**
@@ -145,6 +155,16 @@ export declare class MgInputTextarea {
   /*************
    * Lifecycle *
    *************/
-  componentWillLoad(): NodeJS.Timeout;
-  render(): any;
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
+  componentWillLoad(): ReturnType<typeof setTimeout>;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
 }

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

@@ -1,6 +1,11 @@
 declare const _default: {
   component: string;
   title: string;
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
 };
 export default _default;
 export declare const MgInputTextarea: any;

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

@@ -4,5 +4,5 @@
  */
 export declare type ToggleValue = {
   title: string;
-  value: any;
+  value: unknown;
 };

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

@@ -18,26 +18,27 @@ export declare class MgInputToggle {
   /**
    * Component value
    */
-  value?: any;
+  value: any;
+  handleValue(newValue: any): void;
   /**
    * Items are the possible options to select
-   * Required
+   *
+   * @returns {void}
    */
   items: string[] | ToggleValue[];
-  validateItems(newValue: any): void;
+  validateItems(newValue: string[] | ToggleValue[]): void;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    * If not set, it will be created.
    */
-  identifier?: string;
+  identifier: string;
   /**
    * Input name
    * If not set the value equals the identifier
    */
-  name?: string;
+  name: string;
   /**
    * Input label
-   * Required
    */
   label: string;
   /**
@@ -51,12 +52,12 @@ export declare class MgInputToggle {
   /**
    * Define if toggle have on/off style
    */
-  isOnOff?: boolean;
+  isOnOff: boolean;
   handleIsOnOff(newValue: boolean): void;
   /**
    * Define if toggle display icon
    */
-  isIcon?: boolean;
+  isIcon: boolean;
   handleIsIcon(newValue: boolean): void;
   /**
    * Define if input is readonly
@@ -88,22 +89,31 @@ export declare class MgInputToggle {
    * Checked internal value
    */
   checked: boolean;
-  handleChecked(newValue: any): void;
+  handleChecked(newValue: boolean): void;
   /**
-   * Emmited event when value change
+   * Emited event when value change
    */
   valueChange: EventEmitter<any>;
+  /**
+   * Emited event when checking validity
+   */
+  inputValid: EventEmitter<boolean>;
   /**
    * Change checked value
+   *
+   * @returns {void}
    */
   private toggleChecked;
   /**
    * Slots validation
+   *
+   * @returns {void}
    */
   private validateSlots;
   /**
    * set checked state
-   * @param newValue?
+   *
+   * @returns {void}
    */
   private setChecked;
   /*************
@@ -113,5 +123,10 @@ export declare class MgInputToggle {
    * Check if component props are well configured on init
    */
   componentWillLoad(): void;
-  render(): any;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
 }

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

@@ -1,6 +1,11 @@
 declare const _default: {
   component: string;
   title: string;
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
 };
 export default _default;
 export declare const MgInputToggle: any;