@mgdis/mg-components 3.3.0 → 4.1.0

package/dist/types/components/atoms/mg-button/{mg-button.stories.d.ts → doc/mg-button.stories.d.ts}

@@ -13,6 +13,12 @@ declare const _default: {
         };
       };
     };
+    type: {
+      options: ("button" | "submit" | "reset")[];
+      control: {
+        type: string;
+      };
+    };
   };
 };
 export default _default;

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

@@ -2,3 +2,11 @@
  * List of all possibles variants
  */
 export declare const variants: string[];
+/**
+ * List of all possibles button types
+ */
+export declare const buttonTypes: readonly ["button", "submit", "reset"];
+/**
+ * ButtonType type from buttonTypes
+ */
+export declare type ButtonType = typeof buttonTypes[number];

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

@@ -1,3 +1,4 @@
+import { ButtonType } from './mg-button.conf';
 import { ClassList } from '../../../utils/components.utils';
 export declare class MgButton {
   /************
@@ -15,7 +16,7 @@ export declare class MgButton {
    * Define button variant
    */
   variant: string;
-  validateVariant(newValue: string): void;
+  validateVariant(newValue: string, oldValue?: string): void;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    * If not set, it will be created.
@@ -26,6 +27,16 @@ export declare class MgButton {
    * In case button text is not explicit enough
    */
   label: string;
+  /**
+   * Define button type
+   * Default: 'submit', as HTMLButtonElement type is submit by default
+   */
+  type: ButtonType;
+  /**
+   * Define form id to attach button with.
+   * If this attribute is not set, the <button> is associated with its ancestor <form> element.
+   */
+  form: string;
   /**
    * Disable button
    */

package/dist/types/{stories/tags.stories.d.ts → components/atoms/mg-character-left/doc/mg-character-left.stories.d.ts}

@@ -1,5 +1,6 @@
 declare const _default: {
+  component: string;
   title: string;
 };
 export default _default;
-export declare const Tags: any;
+export declare const MgCharacterLeft: any;

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

@@ -2,21 +2,19 @@ export declare class MgCharacterLeft {
   /************
    * Internal *
    ************/
-  private mustacheCounter;
+  private messages;
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgCharacterLeftElement;
   /**
    * Sets an `id` attribute.
    * Needed by the input for accessibility `aria-decribedby`.
    */
   identifier: string;
-  /**
-   * Template to display remaining characters.
-   * Must have {counter} inside
-   */
-  template: string;
-  validateTemplate(newValue: string): void;
   /**
    * Sets the characters to count
    */
@@ -26,12 +24,6 @@ export declare class MgCharacterLeft {
    */
   maxlength: number;
   validateMaxlength(newValue: number): void;
-  /**
-   * Calculate number character left
-   *
-   * @returns {string} message
-   */
-  private getMessage;
   /*************
    * Lifecycle *
    *************/

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,24 @@
+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: 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,13 @@
+/**
+ * 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",
+  HOVER_TOOLTIPED_ELEMENT = "hoverTooltipedGuard"
+}

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

@@ -1,9 +1,11 @@
+import { Placement } from './mg-tooltip.conf';
 export declare class MgTooltip {
   /************
    * Internal *
    ************/
   private popper;
   private tooltip;
+  private guard;
   /**************
    * Decorators *
    **************/
@@ -23,12 +25,12 @@ 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: boolean): void;
+  handleDisplay(newValue: boolean): void;
   /**
    * Disable tooltip
    */
@@ -45,6 +47,29 @@ export declare class MgTooltip {
    * @returns {void}
    */
   private hide;
+  /**
+   * Method to set display prop
+   *
+   * @param {boolean} newValue display prop new value
+   * @param {boolean} condition additionnal condition to apply display prop newValue
+   * @returns {void}
+   */
+  private setDisplay;
+  /**
+   * Action for tooltip element and tooltiped element mouse listener
+   *
+   * @param {Guard} elementGuard tooltip element guard
+   * @param {boolean} isMouseenter mouseenter validation
+   * @param {Guard} conditionalGuard guard condition
+   * @returns {void}
+   */
+  private tooltipMouseListenerAction;
+  /**
+   * Method to reset guard value
+   *
+   * @returns {void}
+   */
+  private resetGuard;
   /*************
    * Lifecycle *
    *************/

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/{mg-input-textarea.stories.d.ts → doc/mg-input-textarea.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-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
    */
@@ -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-details/doc/mg-details.stories.d.ts

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