@mgdis/mg-components 3.2.0 → 4.0.1

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

@@ -4,18 +4,18 @@ export declare class MgIcon {
    * Icon to display
    */
   icon: string;
-  validateIcon(newValue: string): void;
+  validateIcon(newValue: string, oldValue?: string): void;
   /**
    * Define icon size
    */
   size: string;
-  validateSize(newValue: string): void;
+  validateSize(newValue: string, oldValue?: string): void;
   /**
    * Define icon variant
    * Add a background to the icon based on variant color
    */
   variant: string;
-  validateVariant(newValue: string): void;
+  validateVariant(newValue: string, oldValue?: string): void;
   /**
    * Make the icon spin
    */

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

@@ -1,10 +1,17 @@
 import { ClassList } from '../../../utils/components.utils';
 export declare class MgTag {
+  /************
+   * Internal *
+   ************/
+  private classOutline;
+  /**************
+   * Decorators *
+   **************/
   /**
    * Define button variant
    */
   variant: string;
-  validateVariant(newValue: string): void;
+  validateVariant(newValue: string, oldValue?: string): void;
   /**
    * Define if button is using outline style
    */

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

@@ -0,0 +1,29 @@
+declare const _default: {
+  component: string;
+  title: string;
+  parameters: {
+    layout: string;
+  };
+  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: "auto";
+        };
+      };
+    };
+    value: {
+      control: {
+        type: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const MgTooltip: any;
+export declare const MgTooltipOnButton: any;
+export declare const MgTooltipOnSpan: any;

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,7 +24,7 @@ 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
    */

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

@@ -2,12 +2,6 @@
  * Possible input width
  */
 export declare type Width = 2 | 4 | 16 | 'full';
-/**
- * Possible input classes
- */
-export declare enum InputClass {
-  ERROR = "is-not-valid"
-}
 /**
  * Possible Input types
  */

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

@@ -15,14 +15,12 @@ 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

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

@@ -5,11 +5,15 @@ 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
@@ -51,7 +55,6 @@ export declare class MgInputCheckbox {
    * Define if input is readonly
    */
   readonly: boolean;
-  handleReadOnly(): void;
   /**
    * Define if input is disabled
    */

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

@@ -4,11 +4,17 @@ export declare class MgInputDate {
   /************
    * Internal *
    ************/
-  private classError;
   private input;
+  private messages;
+  private locale;
+  private hasError;
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgInputDateElement;
   /**
    * Component value
    */

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,12 @@ declare const _default: {
         type: string;
       };
     };
+    mgWidth: {
+      options: (string | number)[];
+      control: {
+        type: string;
+      };
+    };
   };
   parameters: {
     actions: {

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

@@ -8,8 +8,10 @@ export declare class MgInputNumeric {
   private storedValue;
   private numericValue;
   private readonlyValue;
-  private classError;
   private input;
+  private locale;
+  private messages;
+  private hasError;
   /**************
    * Decorators *
    **************/
@@ -64,7 +66,7 @@ export declare class MgInputNumeric {
   /**
    * Define input width
    */
-  width: Width;
+  mgWidth: Width;
   /**
    * Add a tooltip message next to the input
    */
@@ -78,6 +80,10 @@ export declare class MgInputNumeric {
    */
   type: string;
   validateType(newValue: string): void;
+  /**
+   * Define currency
+   */
+  currency: string;
   /**
    * Maximum value
    */

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

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

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

@@ -5,11 +5,16 @@ export declare class MgInputPassword {
   /************
    * Internal *
    ************/
-  private classError;
   private input;
+  private messages;
+  private hasError;
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgInputPasswordElement;
   /**
    * Component value
    */
@@ -57,7 +62,7 @@ export declare class MgInputPassword {
   /**
    * Define input width
    */
-  width: Width;
+  mgWidth: Width;
   /**
    * Add a tooltip message next to the input
    */

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

@@ -5,11 +5,15 @@ export declare class MgInputRadio {
   /************
    * Internal *
    ************/
-  private classError;
   private inputs;
+  private messages;
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgInputRadioElement;
   /**
    * Component value
    */

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

@@ -1,11 +1,6 @@
 declare const _default: {
   component: string;
   title: string;
-  parameters: {
-    actions: {
-      handles: string[];
-    };
-  };
   argTypes: {
     placeholder: {
       table: {
@@ -14,6 +9,17 @@ declare const _default: {
         };
       };
     };
+    mgWidth: {
+      options: (string | number)[];
+      control: {
+        type: string;
+      };
+    };
+  };
+  parameters: {
+    actions: {
+      handles: string[];
+    };
   };
 };
 export default _default;

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

@@ -6,11 +6,16 @@ export declare class MgInputSelect {
   /************
    * Internal *
    ************/
-  private classError;
   private input;
+  private messages;
+  private hasError;
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgInputSelectElement;
   /**
    * Component value
    */
@@ -71,7 +76,7 @@ export declare class MgInputSelect {
   /**
    * Define input width
    */
-  width: Width;
+  mgWidth: Width;
   /**
    * Add a tooltip message next to the input
    */

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,14 @@
 declare const _default: {
   component: string;
   title: string;
+  argTypes: {
+    mgWidth: {
+      options: (string | number)[];
+      control: {
+        type: string;
+      };
+    };
+  };
   parameters: {
     actions: {
       handles: string[];

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

@@ -6,9 +6,12 @@ export declare class MgInputText {
    * Internal *
    ************/
   private classFocus;
-  private isInputGroupAppend;
-  private classError;
+  private classIsInputGroupAppend;
+  private classHasIcon;
+  private characterLeftId;
   private input;
+  private messages;
+  private hasError;
   /**************
    * Decorators *
    **************/
@@ -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,10 +96,6 @@ 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
    */

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

@@ -6,11 +6,18 @@ 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
    */
@@ -62,7 +69,7 @@ export declare class MgInputTextarea {
   /**
    * Define input width
    */
-  width: Width;
+  mgWidth: Width;
   /**
    * Define input pattern to validate
    */
@@ -72,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;
   /**
@@ -83,10 +90,7 @@ 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
    */
@@ -99,6 +103,10 @@ export declare class MgInputTextarea {
    * Define input invalid state
    */
   invalid: boolean;
+  /**
+   * Define if input is resizable
+   */
+  resizable: 'none' | 'both' | 'horizontal' | 'vertical';
   /**
    * Component classes
    */

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

@@ -8,6 +8,8 @@ export declare class MgInputToggle {
   private classReadonly;
   private classDisabled;
   private classIsActive;
+  private classOnOff;
+  private classIcon;
   /**************
    * Decorators *
    **************/

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

@@ -6,6 +6,7 @@ export declare class MgForm {
    ************/
   private mgInputs;
   private requiredMessage;
+  private messages;
   /**************
    * Decorators *
    **************/

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

@@ -4,8 +4,10 @@ export declare class MgMessage {
   /************
    * Internal *
    ************/
+  private classHide;
   private closeButtonId;
   private storedTimer;
+  private messages;
   /**************
    * Decorators *
    **************/

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

@@ -4,8 +4,10 @@ export declare class MgModal {
   /************
    * Internal *
    ************/
+  private classHide;
   private closeButtonId;
   private titleId;
+  private messages;
   /**************
    * Decorators *
    **************/

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

@@ -1,8 +1,16 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class MgPagination {
+  /************
+   * Internal *
+   ************/
+  private messages;
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgPaginationElement;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    * If not set, it will be created.

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

@@ -8,4 +8,4 @@ declare const _default: {
   };
 };
 export default _default;
-export declare const MgInputTextarea: any;
+export declare const MgPanel: any;

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

@@ -5,9 +5,14 @@ export declare class MgPanel {
    * Internal *
    ************/
   private editInputElement;
+  private messages;
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgPanelElement;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    * If not set, it will be created.
@@ -18,10 +23,24 @@ export declare class MgPanel {
    */
   panelTitle: string;
   handelTileChange(newValue: string): void;
+  /**
+   * Panel title pattern
+   */
+  titlePattern: string;
+  validatetitlePattern(newValue: string): void;
+  /**
+   * Panel title pattern error message
+   */
+  titlePatternErrorMessage: string;
   /**
    * Panel is opened
    */
   expanded: boolean;
+  handleExpanded(newValue: boolean): void;
+  /**
+   * Disable possibility to toggle expand
+   */
+  expandToggleDisabled: boolean;
   /**
    * Panel title is editabled
    */
@@ -42,6 +61,10 @@ export declare class MgPanel {
    * Emmited event when title change
    */
   titleChange: EventEmitter<string>;
+  /**
+   * Emmited event when expanded change
+   */
+  expandedChange: EventEmitter<boolean>;
   /************
    * Methods *
    ************/
@@ -88,6 +111,12 @@ export declare class MgPanel {
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad(): void;
   /**
    * Header left conditional render
    *

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

@@ -0,0 +1,25 @@
+declare const _default: {
+  component: string;
+  title: string;
+  parameters: {
+    layout: string;
+    docs: {
+      iframeHeight: number;
+    };
+  };
+  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: "auto";
+        };
+      };
+    };
+  };
+};
+export default _default;
+export declare const MgPopover: any;

package/dist/types/components/molecules/mg-popover/mg-popover.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];