@mgdis/mg-components 5.0.0 → 5.2.0

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

@@ -7,6 +7,7 @@ export declare class MgButton {
   private onClickElementFn;
   private classDisabled;
   private classLoading;
+  private classFullWidth;
   /**************
    * Decorators *
    **************/
@@ -32,6 +33,11 @@ export declare class MgButton {
    * Define button type
    */
   type: ButtonType;
+  /**
+   * Set button to full-width
+   */
+  fullWidth: boolean;
+  validateFullWidth(newValue: any): void;
   /**
    * Define form id to attach button with.
    * If this attribute is not set, the <button> is associated with its ancestor <form> element.
@@ -71,14 +77,14 @@ export declare class MgButton {
    */
   private handleClick;
   /**
-   * Handle onKeyDown event
+   * Handle onKeydown event
    *
    * @param {KeyboardEvent} event keyboard event
    * @returns {void}
    */
   private handleKeydown;
   /**
-   * Handle onKeyUp event
+   * Handle onKeyup event
    *
    * @param {KeyboardEvent} event keyboard event
    * @returns {void}

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

@@ -0,0 +1,6 @@
+declare const _default: {
+  component: string;
+  title: string;
+};
+export default _default;
+export declare const MgCard: any;

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

@@ -0,0 +1,11 @@
+export declare class MgCard {
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
+}

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

@@ -0,0 +1,6 @@
+declare const _default: {
+  component: string;
+  title: string;
+};
+export default _default;
+export declare const MgDivider: any;

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

@@ -0,0 +1,15 @@
+export declare class MgDivider {
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Define component size
+   */
+  size: 'regular' | 'full';
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
+}

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

@@ -6,15 +6,9 @@ declare const _default: {
   };
   argTypes: {
     placement: {
-      options: 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"];
       control: {
         type: string;
       };
-      table: {
-        defaultValue: {
-          summary: string;
-        };
-      };
     };
   };
 };

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

@@ -1,11 +1,3 @@
-/**
- * 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];
 export declare enum Guard {
   FOCUS = "focus",
   HOVER_TOOLTIP_ELEMENT = "hoverTooltipGuard",

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

@@ -1,4 +1,4 @@
-import { Placement } from './mg-tooltip.conf';
+import { Placement } from '@popperjs/core';
 export declare class MgTooltip {
   /************
    * Internal *

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-details/mg-details.d.ts

@@ -16,6 +16,10 @@ export declare class MgDetails {
    */
   toggleOpened: string;
   validateTitles(newValue: string): void;
+  /**
+   * Hide summary element
+   */
+  hideSummary: boolean;
   /**
    * Define if details are diplayed
    */

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

@@ -4,6 +4,7 @@ export declare class MgModal {
   /************
    * Internal *
    ************/
+  private modalFocusableElements;
   private classHide;
   private closeButtonId;
   private titleId;
@@ -12,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)
@@ -60,6 +64,7 @@ export declare class MgModal {
    * @returns {void}
    */
   handleKeyDown(event: KeyboardEvent): void;
+  private setFocus;
   /*************
    * Handlers *
    *************/
@@ -78,6 +83,12 @@ export declare class MgModal {
    * @returns {void}
    */
   componentWillLoad(): void;
+  /**
+   * Add observer on component to set focus when displayed
+   *
+   * @returns {void}
+   */
+  componentDidLoad(): void;
   /**
    * Render
    *

package/dist/types/components/molecules/mg-popover/doc/mg-popover.stories.d.ts

@@ -12,15 +12,9 @@ declare const _default: {
   };
   argTypes: {
     placement: {
-      options: 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"];
       control: {
         type: string;
       };
-      table: {
-        defaultValue: {
-          summary: string;
-        };
-      };
     };
   };
 };

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { Placement } from './mg-popover.conf';
+import { Placement } from '@popperjs/core';
 export declare class MgPopover {
   /************
    * Internal *