@mgdis/mg-components 3.1.0 → 4.0.0

package/dist/types/components/atoms/mg-tooltip/mg-tooltip.conf.d.ts

@@ -0,0 +1,8 @@
+/**
+ * List of all possibles placements
+ */
+export declare const placements: readonly ["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"];
+/**
+ * Placement type from placements
+ */
+export declare type Placement = typeof placements[number];

package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts

@@ -1,3 +1,4 @@
+import { Placement } from './mg-tooltip.conf';
 export declare class MgTooltip {
   /************
    * Internal *
@@ -23,23 +24,25 @@ export declare class MgTooltip {
   /**
    * Tooltip placement
    */
-  placement: 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+  placement: Placement;
   /**
    * Display tooltip
    */
   display: boolean;
-  handleDisplay(newVal: any): void;
+  handleDisplay(newVal: boolean): void;
   /**
    * Disable tooltip
    */
   disabled: boolean;
   /**
    * Show tooltip
+   *
    * @returns {void}
    */
   private show;
   /**
    * Hide tooltip
+   *
    * @returns {void}
    */
   private hide;
@@ -50,7 +53,14 @@ export declare class MgTooltip {
    * Get slotted element
    * Check if it already contain an interactive element, if not we need to add a tabIndex attribute
    * We need to attach the focused element to the tooltip (aria-describedby)
+   *
+   * @returns {void}
    */
   componentDidLoad(): void;
-  render(): any;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
 }

package/dist/types/components/molecules/inputs/MgInput.conf.d.ts

@@ -3,8 +3,10 @@
  */
 export declare type Width = 2 | 4 | 16 | 'full';
 /**
- * Possible input classes
+ * Possible Input types
  */
-export declare enum InputClass {
-  ERROR = "is-not-valid"
-}
+export declare type HTMLMgInputsElement = HTMLMgInputCheckboxElement | HTMLMgInputDateElement | HTMLMgInputNumericElement | HTMLMgInputPasswordElement | HTMLMgInputRadioElement | HTMLMgInputSelectElement | HTMLMgInputTextElement | HTMLMgInputTextareaElement | (HTMLMgInputToggleElement & {
+  required: true;
+  invalid: false;
+  displayError: () => void;
+});

package/dist/types/components/molecules/inputs/MgInput.d.ts

@@ -15,21 +15,20 @@ interface MgInputProps {
   readonlyValue: string;
   required: boolean;
   readonly: boolean;
-  width: Width;
+  mgWidth: Width;
   disabled: boolean;
   tooltip: string;
-  displayCharacterLeft: boolean;
-  characterLeftTemplate: string;
-  maxlength: number;
   helpText: string;
   errorMessage: string;
+  ariaDescribedbyIDs: string[];
 }
 /**
  * Get input template
- * @param props MgInput Interface Props
- * @param children Represent scoped elements
- * @param utils Stencil.js utils
- * @returns JSX template
+ *
+ * @param {MgInputProps} props MgInput Interface Props
+ * @param {VNode[]} children Represent scoped elements
+ * @param {FunctionalUtilities} utils Stencil.js utils
+ * @returns {VNode[]} input template
  */
 export declare const MgInput: FunctionalComponent<MgInputProps>;
 export {};

package/dist/types/components/molecules/inputs/mg-input-checkbox/{mg-input-checkbox.stories.d.ts → doc/mg-input-checkbox.stories.d.ts}

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

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

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '../../../../utils/components.utils';
 import { CheckboxItem, CheckboxValue } from './mg-input-checkbox.conf';
@@ -6,31 +5,34 @@ export declare class MgInputCheckbox {
   /************
    * Internal *
    ************/
-  private classError;
   private inputs;
+  private messages;
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgInputCheckboxElement;
   /**
    * Component value
    * If item.value is `null`, checkbox will be indeterminate by default
    * Required
    */
   value: CheckboxValue[];
-  validateValue(newValue: any): void;
+  validateValue(newValue: CheckboxValue[]): 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;
   /**
@@ -53,7 +55,6 @@ export declare class MgInputCheckbox {
    * Define if input is readonly
    */
   readonly: boolean;
-  handleReadOnly(): void;
   /**
    * Define if input is disabled
    */
@@ -67,11 +68,11 @@ export declare class MgInputCheckbox {
    */
   helpText: string;
   /**
-   * Force valid component
+   * Define input valid state
    */
   valid: boolean;
   /**
-   * Force invalid component
+   * Define input invalid state
    */
   invalid: boolean;
   /**
@@ -90,9 +91,20 @@ export declare class MgInputCheckbox {
    * Emitted event when value change
    */
   valueChange: EventEmitter<CheckboxValue[]>;
+  /**
+   * Emited event when checking validity
+   */
+  inputValid: EventEmitter<boolean>;
+  /**
+   * Public method to display errors
+   *
+   * @returns {Promise<void>}
+   */
+  displayError(): Promise<void>;
   /**
    * Handle input event
-   * @param event
+   *
+   * @param {InputEvent} event input event
    */
   private handleInput;
   /**
@@ -109,12 +121,23 @@ export declare class MgInputCheckbox {
   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-date/{mg-input-date.stories.d.ts → doc/mg-input-date.stories.d.ts}

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

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

@@ -1,33 +1,37 @@
-/// <reference types="node" />
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '../../../../utils/components.utils';
 export declare class MgInputDate {
   /************
    * Internal *
    ************/
-  private classError;
   private input;
+  private messages;
+  private locale;
+  private hasError;
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgInputDateElement;
   /**
    * Component value
    */
   value: string;
-  validateValue(newValue: any): void;
+  validateValue(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;
   /**
@@ -59,11 +63,11 @@ export declare class MgInputDate {
    */
   helpText: string;
   /**
-   * Define input pattern to validate
+   * Define input valid state
    */
   valid: boolean;
   /**
-   * Define input pattern error message
+   * Define input invalid state
    */
   invalid: boolean;
   /**
@@ -71,13 +75,13 @@ export declare class MgInputDate {
    * format: yyyy-mm-dd
    */
   min: string;
-  validateMin(newValue: any): void;
+  validateMin(newValue: string): void;
   /**
    * Define input maximum date
    * format: yyyy-mm-dd
    */
   max: string;
-  validateMax(newValue: any): void;
+  validateMax(newValue: string): void;
   /**
    * Component classes
    */
@@ -87,9 +91,19 @@ export declare class MgInputDate {
    */
   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
    */
@@ -100,7 +114,9 @@ export declare class MgInputDate {
   private handleBlur;
   /**
    * Date format validation
-   * @param date
+   *
+   * @param {string} date date to validate
+   * @returns {void}
    */
   private validateDateFormat;
   /**
@@ -109,20 +125,35 @@ export declare class MgInputDate {
   private checkValidity;
   /**
    * get input error code
-   * @returns {null | InputError}
+   *
+   * @returns {null | InputError} error code
    */
   private getInputError;
   /**
    * Set error message
+   *
+   * @returns {void}
    */
   private setErrorMessage;
   /**
    * Check input errors
+   *
+   * @returns {void}
    */
   private checkError;
   /*************
    * 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-numeric/{mg-input-numeric.stories.d.ts → doc/mg-input-numeric.stories.d.ts}

@@ -8,6 +8,17 @@ declare const _default: {
         type: string;
       };
     };
+    mgWidth: {
+      options: (string | number)[];
+      control: {
+        type: string;
+      };
+    };
+  };
+  parameters: {
+    actions: {
+      handles: string[];
+    };
   };
 };
 export default _default;

package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.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';
@@ -9,11 +8,16 @@ export declare class MgInputNumeric {
   private storedValue;
   private numericValue;
   private readonlyValue;
-  private classError;
   private input;
+  private locale;
+  private messages;
+  private hasError;
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
   element: HTMLMgInputNumericElement;
   /**
    * Component value
@@ -24,15 +28,14 @@ export declare class MgInputNumeric {
    * 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 +66,7 @@ export declare class MgInputNumeric {
   /**
    * Define input width
    */
-  width: Width;
+  mgWidth: Width;
   /**
    * Add a tooltip message next to the input
    */
@@ -77,6 +80,10 @@ export declare class MgInputNumeric {
    */
   type: string;
   validateType(newValue: string): void;
+  /**
+   * Define currency
+   */
+  currency: string;
   /**
    * Maximum value
    */
@@ -114,60 +121,98 @@ export declare class MgInputNumeric {
    */
   errorMessage: string;
   /**
-   * Displayed value in input
-   * Change on focus/blur
+   * Define if input has focus
    */
-  displayValue: string;
+  hasFocus: boolean;
   /**
-   * Emmited event when value change
+   * Emited event when value change
    */
   valueChange: EventEmitter<number>;
+  /**
+   * Emited event when checking validity
+   */
+  inputValid: EventEmitter<boolean>;
+  /**
+   * Public method to display errors
+   *
+   * @returns {Promise<void>}
+   */
+  displayError(): Promise<void>;
+  /**
+   * Displayed value in input
+   * Change on focus/blur
+   *
+   * @returns {string} display value
+   */
+  private displayValue;
   /**
    * 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;
   /**
    * Set error message
+   *
+   * @returns {void}
    */
   private setErrorMessage;
   /**
    * Check input errors
+   *
+   * @returns {void}
    */
   private checkError;
   /**
-   * get input error code
-   * @returns {null | InputError}
+   * Get input error code
+   *
+   * @returns {null | InputError} error code
    */
   private getInputError;
   /**
    * Format value based on type
-   * @param value {number}
+   *
+   * @param {number} value value to format
    * @returns {string} formated local value
    */
   private formatValue;
   /**
    * Validate append slot
+   *
+   * @returns {void}
    */
   private validateAppendSlot;
   /*************
    * Lifecycle *
    *************/
-  componentWillLoad(): NodeJS.Timeout;
-  componentDidLoad(): void;
   /**
    * Check if component props are well configured on init
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
+  componentWillLoad(): ReturnType<typeof setTimeout>;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
    */
-  render(): any;
+  render(): HTMLElement;
 }

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

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

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';
@@ -6,28 +5,33 @@ export declare class MgInputPassword {
   /************
    * Internal *
    ************/
-  private classError;
   private input;
+  private messages;
+  private hasError;
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgInputPasswordElement;
   /**
    * 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;
   /**
@@ -58,7 +62,7 @@ export declare class MgInputPassword {
   /**
    * Define input width
    */
-  width: Width;
+  mgWidth: Width;
   /**
    * Add a tooltip message next to the input
    */
@@ -68,11 +72,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 +88,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 +120,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;
 }