@mgdis/mg-components 5.1.0 → 5.3.0

package/dist/mg-components/variables.css

@@ -20,6 +20,13 @@
     https://jira.mgdis.fr/browse/PDA9-690
    */
 
+  /* App */
+  /* default color-info */
+  --mg-color-app-h: var(--color-info-h);
+  --mg-color-app-s: var(--color-info-s);
+  --mg-color-app-l: var(--color-info-l);
+  --mg-color-app-hsl: var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l);
+
   /* Neutral */
   /* #fefefe; */
   /* rgb(254, 254, 254); */
@@ -77,15 +84,15 @@
   --color-light: var(--color-light-h), var(--color-light-s), var(--color-light-l);
 
   /* Primary */
-  --color-primary-h: hsl(var(--color-dark-h));
-  --color-primary-s: hsl(var(--color-dark-s));
-  --color-primary-l: hsl(var(--color-dark-l));
+  --color-primary-h: var(--color-dark-h);
+  --color-primary-s: var(--color-dark-s);
+  --color-primary-l: var(--color-dark-l);
   --color-primary: hsl(var(--color-dark));
 
   /* Secondary */
-  --color-secondary-h: hsl(var(--color-neutral-h));
-  --color-secondary-s: hsl(var(--color-neutral-s));
-  --color-secondary-l: hsl(var(--color-neutral-l));
+  --color-secondary-h: var(--color-neutral-h);
+  --color-secondary-s: var(--color-neutral-s);
+  --color-secondary-l: var(--color-neutral-l);
   --color-secondary: hsl(var(--color-neutral));
 
   /* Shadow */
@@ -173,9 +180,10 @@
   --mg-panel-box-shadow: var(--box-shadow);
   --mg-panel-content-padding: 1.5rem;
 
-  /*
+   /*
     <mg-illustrated-message>
    */
+
   --mg-illustrated-message-padding-vertical: 4rem;
 
   /*
@@ -230,4 +238,18 @@
     <mg-input-radio>
    */
   --mg-input-check-size: 1.3rem;
+
+  /*
+    <mg-menu-item>
+   */
+  --mg-menu-item-focused-background-color-hsl: var(--mg-color-app-hsl);
+  --mg-menu-item-border-color-active-hsl: var(--mg-color-app-hsl);
+  --mg-menu-item-color-active-hsl: var(--mg-color-app-hsl);
+  
+  /*
+  <mg-tabs>
+  */
+  --mg-tabs-focused-background-color-hsl: var(--mg-color-app-hsl);
+  --mg-tabs-border-color-active-hsl: var(--mg-color-app-hsl);
+  --mg-tabs-color-active-hsl: var(--mg-color-app-hsl);
 }

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

@@ -3,13 +3,13 @@ declare const _default: {
   title: string;
   argTypes: {
     variant: {
-      options: string[];
+      options: readonly ["info", "primary", "secondary", "success", "warning", "danger"];
       control: {
         type: string;
       };
       table: {
         defaultValue: {
-          summary: string;
+          summary: "info";
         };
       };
     };

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

@@ -1,8 +1,8 @@
 /**
  * List of all possibles variants
  */
-export declare const variants: string[];
-export declare type BadgeType = {
-  value: string | number;
-  label: string;
-};
+export declare const variants: readonly ["info", "primary", "secondary", "success", "warning", "danger"];
+/**
+ * Variant type from variants
+ */
+export declare type BadgeVariantType = typeof variants[number];

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

@@ -1,4 +1,4 @@
-import { BadgeType } from './mg-badge.conf';
+import { BadgeVariantType } from './mg-badge.conf';
 import { ClassList } from '../../../utils/components.utils';
 export declare class MgBadge {
   /************
@@ -11,24 +11,24 @@ export declare class MgBadge {
   /**
    * Badge value
    */
-  value: BadgeType['value'];
-  validateValue(newValue: BadgeType['value']): void;
+  value: string | number;
+  validateValue(newValue: MgBadge['value']): void;
   /**
    * Badge label. Include short description.
    * Required for accessibility
    */
-  label: BadgeType['label'];
-  validateLabel(newValue: BadgeType['label']): void;
+  label: string;
+  validateLabel(newValue: MgBadge['label']): void;
   /**
    * Define button variant
    */
-  variant: string;
-  validateVariant(newValue: string, oldValue?: string): void;
+  variant?: BadgeVariantType;
+  validateVariant(newValue: MgBadge['variant'], oldValue?: MgBadge['variant']): void;
   /**
    * Define if button is using outline style
    */
   outline: boolean;
-  validateOutline(newValue: boolean): void;
+  validateOutline(newValue: MgBadge['outline']): void;
   /**
    * Component classes
    */

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

@@ -77,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-icon/doc/mg-icon.stories.d.ts

@@ -9,13 +9,13 @@ declare const _default: {
       };
     };
     size: {
-      options: string[];
+      options: readonly ["small", "regular", "large", "extra-large"];
       control: {
         type: string;
       };
     };
     variant: {
-      options: string[];
+      options: ("info" | "success" | "warning" | "danger")[];
       control: {
         type: string;
       };

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

@@ -5,8 +5,16 @@ export declare const icons: unknown;
 /**
  * List of all possibles sizes
  */
-export declare const sizes: string[];
+export declare const sizes: readonly ["small", "regular", "large", "extra-large"];
+/**
+ * Icon Size from sizes
+ */
+export declare type IconSizeType = typeof sizes[number];
 /**
  * List of all possibles variants
  */
-export declare const variants: string[];
+export declare const variants: readonly ["success", "warning", "danger", "info"];
+/**
+ * Variant type from variants
+ */
+export declare type IconVariantType = typeof variants[number];

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

@@ -1,26 +1,27 @@
+import { IconVariantType, IconSizeType } from './mg-icon.conf';
 import { ClassList } from '../../../utils/components.utils';
 export declare class MgIcon {
   /**
    * Icon to display
    */
   icon: string;
-  validateIcon(newValue: string, oldValue?: string): void;
+  validateIcon(newValue: MgIcon['icon'], oldValue?: MgIcon['icon']): void;
   /**
    * Define icon size
    */
-  size: string;
-  validateSize(newValue: string, oldValue?: string): void;
+  size: IconSizeType;
+  validateSize(newValue: MgIcon['size'], oldValue?: MgIcon['size']): void;
   /**
    * Define icon variant
    * Add a background to the icon based on variant color
    */
-  variant: string;
-  validateVariant(newValue: string, oldValue?: string): void;
+  variant?: IconVariantType;
+  validateVariant(newValue: MgIcon['variant'], oldValue?: MgIcon['variant']): void;
   /**
    * Make the icon spin
    */
   spin: boolean;
-  handleSpin(newValue: boolean): void;
+  handleSpin(newValue: MgIcon['spin']): void;
   /**
    * Component classes
    */

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/menu/mg-menu/doc/mg-menu.stories.d.ts

@@ -0,0 +1,17 @@
+import { Direction } from '../mg-menu.conf';
+declare const _default: {
+  component: string;
+  title: string;
+  argTypes: {
+    direction: {
+      options: Direction[];
+      control: {
+        type: string;
+      };
+    };
+  };
+};
+export default _default;
+export declare const MgMenuHorizontal: any;
+export declare const MgMenuVertical: any;
+export declare const MgMenuVerticalSmallContainer: any;

package/dist/types/components/molecules/menu/mg-menu/mg-menu.conf.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Menu direction type
+ */
+export declare enum Direction {
+  VERTICAL = "vertical",
+  HORIZONTAL = "horizontal"
+}

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

@@ -0,0 +1,69 @@
+import { ClassList } from '../../../../utils/components.utils';
+import { Direction } from './mg-menu.conf';
+export declare class MgMenu {
+  /************
+   * Internal *
+   ************/
+  private readonly name;
+  private menuItems;
+  private focusedMenuItem;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgMenuElement;
+  /**
+   * Menu label. Include short menu description.
+   * Required for accessibility
+   */
+  label: string;
+  validateLabel(newValue: MgMenu['label']): void;
+  /**
+   * Component display direction. Default: "horizontal"
+   */
+  direction: Direction;
+  validateDirection(newValue: MgMenu['direction']): void;
+  /**
+   * is this menu a child menu. Used for conditional render.
+   */
+  isChildMenu: boolean;
+  /**
+   * Component classes
+   */
+  classList: ClassList;
+  /**
+   * Close matching menu-item
+   *
+   * @param {HTMLMgMenuItemElement} item menu-item to close
+   * @param {boolean} condition addionnal condition
+   * @returns {void}
+   */
+  private closeMenuItem;
+  /**
+   * Store menu-items on component init and add listeners
+   */
+  private initMenuItems;
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Validate props
+   *
+   * @returns {void}
+   */
+  componentWillLoad(): void;
+  /**
+   * Check if component slots configuration
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
+  componentDidLoad(): ReturnType<typeof setTimeout>;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
+}

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

@@ -0,0 +1,11 @@
+declare const _default: {
+  component: string;
+  title: string;
+};
+export default _default;
+export declare const MgMenuItem: any;
+export declare const MgMenuItemWhitIcon: any;
+export declare const MgMenuItemWhitBadge: any;
+export declare const MgMenuItemWhitBadgeAndIcon: any;
+export declare const MgMenuItemWhitMetadata: any;
+export declare const MgMenuItemWhithSubmenu: any;

package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.conf.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Available menu-item positions
+ */
+export declare enum ElementPosition {
+  FIRST = "first",
+  LAST = "last"
+}
+/**
+ * Available menu item status
+ */
+export declare enum Status {
+  VISIBLE = "visible",
+  HIDDEN = "hidden",
+  DISABLED = "disabled",
+  ACTIVE = "active"
+}
+/**
+ * List of all possibles sizes
+ */
+export declare const sizes: readonly ["regular", "medium", "large"];
+/**
+ * item Size from sizes
+ */
+export declare type MenuItemSizeType = typeof sizes[number];