@mgdis/mg-components 3.1.0 → 4.0.0

package/dist/types/components/molecules/inputs/mg-input-radio/{mg-input-radio.stories.d.ts → doc/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-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';
@@ -6,21 +5,26 @@ export declare class MgInputRadio {
   /************
    * Internal *
    ************/
-  private classError;
   private inputs;
+  private messages;
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgInputRadioElement;
   /**
    * 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 +37,6 @@ export declare class MgInputRadio {
   name: string;
   /**
    * Input label
-   * Required
    */
   label: string;
   /**
@@ -69,11 +72,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 +95,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-select/doc/mg-input-select.stories.d.ts

@@ -0,0 +1,34 @@
+declare const _default: {
+  component: string;
+  title: string;
+  argTypes: {
+    placeholder: {
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    mgWidth: {
+      options: (string | number)[];
+      control: {
+        type: string;
+      };
+    };
+  };
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
+};
+export default _default;
+export declare const MgInputSelect: any;
+/**
+ * Using object
+ */
+export declare const WithObjectItems: any;
+/**
+ * Using group object
+ */
+export declare const WithGroups: 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';
@@ -7,20 +6,26 @@ export declare class MgInputSelect {
   /************
    * Internal *
    ************/
-  private classError;
   private input;
+  private messages;
+  private hasError;
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgInputSelectElement;
   /**
    * 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 +38,6 @@ export declare class MgInputSelect {
   name: string;
   /**
    * Input label
-   * Required
    */
   label: string;
   /**
@@ -72,7 +76,7 @@ export declare class MgInputSelect {
   /**
    * Define input width
    */
-  width: Width;
+  mgWidth: Width;
   /**
    * Add a tooltip message next to the input
    */
@@ -106,9 +110,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<any>;
+  /**
+   * Emited event when checking validity
    */
-  valueChange: EventEmitter<string>;
+  inputValid: EventEmitter<boolean>;
+  /**
+   * Public method to display errors
+   *
+   * @returns {Promise<void>}
+   */
+  displayError(): Promise<void>;
   /**
    * Handle input event
    */
@@ -128,6 +146,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-text/{mg-input-text.stories.d.ts → doc/mg-input-text.stories.d.ts}

@@ -1,6 +1,19 @@
 declare const _default: {
   component: string;
   title: string;
+  argTypes: {
+    mgWidth: {
+      options: (string | number)[];
+      control: {
+        type: string;
+      };
+    };
+  };
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
 };
 export default _default;
 /**

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,8 +6,12 @@ export declare class MgInputText {
    * Internal *
    ************/
   private classFocus;
-  private classError;
+  private classIsInputGroupAppend;
+  private classHasIcon;
+  private characterLeftId;
   private input;
+  private messages;
+  private hasError;
   /**************
    * Decorators *
    **************/
@@ -20,19 +23,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;
   /**
@@ -43,6 +46,7 @@ export declare class MgInputText {
    * Input icon
    */
   icon: string;
+  validateIcon(newValue: string): void;
   /**
    * Define if label is displayed on top
    */
@@ -75,7 +79,7 @@ export declare class MgInputText {
   /**
    * Define input width
    */
-  width: Width;
+  mgWidth: Width;
   /**
    * Define input pattern to validate
    */
@@ -92,20 +96,16 @@ export declare class MgInputText {
    * Define if component should display character left
    */
   displayCharacterLeft: boolean;
-  /**
-   * Template to use for characters left sentence
-   */
-  characterLeftTemplate: string;
   /**
    * Add a help text under the input, usually expected data format and example
    */
   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-textarea/doc/mg-input-textarea.stories.d.ts

@@ -0,0 +1,19 @@
+declare const _default: {
+  component: string;
+  title: string;
+  argTypes: {
+    mgWidth: {
+      options: (string | number)[];
+      control: {
+        type: string;
+      };
+    };
+  };
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
+};
+export default _default;
+export declare const MgInputTextarea: any;

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';
@@ -7,28 +6,35 @@ export declare class MgInputTextarea {
    * Internal *
    ************/
   private classFocus;
-  private classError;
+  private classHasDisplayCharacterLeft;
+  private characterLeftId;
   private input;
+  private messages;
+  private hasError;
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgInputTextareaElement;
   /**
    * 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;
   /**
@@ -63,7 +69,7 @@ export declare class MgInputTextarea {
   /**
    * Define input width
    */
-  width: Width;
+  mgWidth: Width;
   /**
    * Define input pattern to validate
    */
@@ -73,7 +79,7 @@ export declare class MgInputTextarea {
    */
   patternErrorMessage: string;
   /**
-   * Define input pattern error message
+   * Define the number of visible text lines for the control
    */
   rows: number;
   /**
@@ -84,22 +90,23 @@ export declare class MgInputTextarea {
    * Define if component should display character left
    */
   displayCharacterLeft: boolean;
-  /**
-   * Template to use for characters left sentence
-   */
-  characterLeftTemplate: string;
+  validateDisplayCharacterLeft(newValue: boolean): void;
   /**
    * Add a help text under the input, usually expected data format and example
    */
   helpText: string;
   /**
-   * Define input pattern to validate
+   * Define input valid state
    */
   valid: boolean;
   /**
-   * Define input pattern error message
+   * Define input invalid state
    */
   invalid: boolean;
+  /**
+   * Define if input is resizable
+   */
+  resizable: 'none' | 'both' | 'horizontal' | 'vertical';
   /**
    * Component classes
    */
@@ -109,9 +116,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 +144,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 +163,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-toggle/{mg-input-toggle.stories.d.ts → doc/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;

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;
 };