@mgdis/mg-components 3.3.0 → 4.0.0

package/dist/mg-components/variables.scss

@@ -53,11 +53,11 @@
   --color-info: var(--color-info-h), var(--color-info-s), var(--color-info-l);
 
   /* Danger */
-  /* #df242c; */
-  /* rgb(223, 36, 44); */
+  /* #db1f29; */
+  /* rgb(219, 31, 41); */
   --color-danger-h: 357;
-  --color-danger-s: 74.5%;
-  --color-danger-l: 50.8%;
+  --color-danger-s: 75%;
+  --color-danger-l: 49%;
   --color-danger: var(--color-danger-h), var(--color-danger-s), var(--color-danger-l);
 
   /* Dark */
@@ -99,6 +99,7 @@
   /*
     <mg-icon>
    */
+  --mg-icon-small-size: 1.2rem;
   --mg-icon-regular-size: 1.6rem;
   --mg-icon-large-size: 2.4rem;
   --mg-icon-extra-large-size: 3.6rem;
@@ -111,6 +112,7 @@
   --mg-button-icon-border-radius: var(--default-size);
   --mg-button-disabled-opacity: 0.6;
   --mg-button-gradient: 1; /* Can only be 1 or 0 to enable disable gradient */
+  --mg-button-border-variation: 1; /* Can only be 1 or 0 to enable disable border variation */
 
   /* Primary */
   --mg-button-primary-color-h: var(--color-dark-h);
@@ -161,7 +163,7 @@
    */
   --mg-modal-border-radius: 0.5rem;
   --mg-modal-title-font-size: 1.8rem;
-  --mg-modal-content-font-size: 1.3rem;
+  --mg-modal-content-font-size: 1.2rem;
 
   /*
     <mg-panel>
@@ -187,6 +189,9 @@
   --mg-inputs-color: #b5c2c9;
   --mg-inputs-spacer: 1rem;
 
+  /* Error message background */
+  --mg-inputs-error-bg-color: var(--color-danger-h), calc(var(--color-danger-s) + 5%), calc(var(--color-danger-l) + 49%);
+
   /* Input focus shadow */
   /* #b5c2c9 */
   /* rgb(0, 221, 255); */

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

@@ -1,6 +1,13 @@
 import { BadgeType } from './mg-badge.conf';
 import { ClassList } from '../../../utils/components.utils';
 export declare class MgBadge {
+  /************
+   * Internal *
+   ************/
+  private classOutline;
+  /**************
+   * Decorators *
+   **************/
   /**
    * Badge value
    */
@@ -15,7 +22,7 @@ export declare class MgBadge {
    * 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-button/mg-button.d.ts

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

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,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/{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-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 *
    **************/