@mgdis/mg-components 3.1.0 → 3.2.0

package/dist/types/components/atoms/mg-badge/mg-badge.stories.d.ts

@@ -7,6 +7,11 @@ declare const _default: {
       control: {
         type: string;
       };
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
     };
     value: {
       control: {

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

@@ -20,7 +20,7 @@ export declare class MgButton {
    * 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;
   /**
    * aria-label
    * In case button text is not explicit enough
@@ -41,6 +41,19 @@ export declare class MgButton {
    * Parent component have to remove the attribute 'disabled' when the process ends.
    */
   disableOnClick: boolean;
+  /**
+   * Prop to set aria-expanded on button element
+   */
+  expanded: boolean;
+  /**
+   * Prop to set aria-controls on button element
+   */
+  controls: string;
+  /**
+   * Option to set aria-haspopup
+   * The aria-haspopup state informs assistive technology users that there is a popup and the type of popup it is, but provides no interactivity.
+   */
+  haspopup: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
   /**
    * Define if button is loading, default to false.
    * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.
@@ -54,14 +67,21 @@ export declare class MgButton {
   classList: ClassList;
   /**
    * Trigger actions onClick event
+   *
+   * @param {MouseEvent} event click event
+   * @returns {void}
    */
   private handleClick;
   /**
    * Check if props are well configured on init
+   *
+   * @returns {void}
    */
   componentWillLoad(): void;
   /**
    * Render component
+   *
+   * @returns {HTMLElement} html element
    */
-  render(): any;
+  render(): HTMLElement;
 }

package/dist/types/components/atoms/mg-button/mg-button.stories.d.ts

@@ -7,6 +7,11 @@ declare const _default: {
       control: {
         type: string;
       };
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
     };
   };
 };

package/dist/types/components/atoms/mg-character-left/mg-character-left.d.ts

@@ -28,12 +28,23 @@ export declare class MgCharacterLeft {
   validateMaxlength(newValue: number): void;
   /**
    * Calculate number character left
-   * @returns {string}
+   *
+   * @returns {string} message
    */
   private getMessage;
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
   componentWillLoad(): void;
-  render(): any;
+  /**
+   * Render component
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
 }

package/dist/types/components/atoms/mg-character-left/mg-character-left.stories.d.ts

@@ -1,6 +1,15 @@
 declare const _default: {
   component: string;
   title: string;
+  argTypes: {
+    template: {
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+  };
 };
 export default _default;
 export declare const MgCharacterLeft: any;

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

@@ -1,7 +1,7 @@
 /**
  * Icon SVG paths
  */
-export declare const icons: Object;
+export declare const icons: unknown;
 /**
  * List of all possibles sizes
  */

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

@@ -25,12 +25,22 @@ export declare class MgIcon {
    * Component classes
    */
   classList: ClassList;
+  /**
+   * getIcon
+   *
+   * @returns {HTMLElement} icon html
+   */
+  private getIcon;
   /**
    * Check if props are well configured on init
+   *
+   * @returns {void}
    */
   componentWillLoad(): void;
   /**
    * Render component
+   *
+   * @returns {HTMLElement} HTML Element
    */
-  render(): any;
+  render(): HTMLElement;
 }

package/dist/types/components/atoms/mg-input-title/mg-input-title.d.ts

@@ -19,6 +19,16 @@ export declare class MgInputTitle {
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Init tag name
+   *
+   * @returns {void}
+   */
   componentWillLoad(): void;
-  render(): any;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
 }

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

@@ -3,23 +3,30 @@ export declare class MgTag {
   /**
    * Define button variant
    */
-  variant?: string;
+  variant: string;
   validateVariant(newValue: string): void;
   /**
    * Define if button is using outline style
    */
-  outline?: boolean;
+  outline: boolean;
   validateOutline(newValue: boolean): void;
   /**
    * Component classes
    */
   classList: ClassList;
+  /*************
+   * Lifecycle *
+   *************/
   /**
    * Check if props are well configured on init
+   *
+   * @returns {void}
    */
   componentWillLoad(): void;
   /**
    * Render
+   *
+   * @returns {HTMLElement} HTML Element
    */
-  render(): any;
+  render(): HTMLElement;
 }

package/dist/types/components/atoms/mg-tag/mg-tag.stories.d.ts

@@ -7,6 +7,11 @@ declare const _default: {
       control: {
         type: string;
       };
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
     };
   };
 };

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

@@ -28,18 +28,20 @@ export declare class MgTooltip {
    * 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 +52,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

@@ -8,3 +8,11 @@ export declare type Width = 2 | 4 | 16 | 'full';
 export declare enum InputClass {
   ERROR = "is-not-valid"
 }
+/**
+ * Possible Input types
+ */
+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

@@ -26,10 +26,11 @@ interface MgInputProps {
 }
 /**
  * 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.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';
@@ -17,20 +16,19 @@ export declare class MgInputCheckbox {
    * 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;
   /**
@@ -67,11 +65,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 +88,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 +118,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-checkbox/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-date/mg-input-date.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import { EventEmitter } from '../../../../stencil-public-runtime';
 import { ClassList } from '../../../../utils/components.utils';
 export declare class MgInputDate {
@@ -14,20 +13,19 @@ export declare class MgInputDate {
    * 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 +57,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 +69,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 +85,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 +108,9 @@ export declare class MgInputDate {
   private handleBlur;
   /**
    * Date format validation
-   * @param date
+   *
+   * @param {string} date date to validate
+   * @returns {void}
    */
   private validateDateFormat;
   /**
@@ -109,20 +119,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-date/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-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';
@@ -14,6 +13,9 @@ export declare class MgInputNumeric {
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
   element: HTMLMgInputNumericElement;
   /**
    * Component value
@@ -24,15 +26,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;
   /**
@@ -114,60 +115,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-numeric/mg-input-numeric.stories.d.ts

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