@mgdis/mg-components 5.8.2 → 5.10.0

package/dist/mg-components/styles/reset-mg-card-slotted-variables.scss

@@ -5,5 +5,6 @@
     --mg-card-border-radius: var(--mg-card-border-radius-default);
     --mg-card-background: var(--mg-card-background-default);
     --mg-card-box-shadow: var(--mg-card-box-shadow-default);
+    --mg-card-max-width: unset;
   }
 }

package/dist/mg-components/variables.css

@@ -98,6 +98,9 @@
   /* Shadow */
   --box-shadow: 0 0.3rem 0.8rem 0 hsl(var(--color-dark), 0.15);
 
+  /* Soft style */
+  --mg-color-soft-l: 90%;
+
   /*
     Global
    */
@@ -109,8 +112,10 @@
    */
   --mg-icon-small-size: 1.2rem;
   --mg-icon-regular-size: 1.6rem;
+  --mg-icon-medium-size: 2rem;
   --mg-icon-large-size: 2.4rem;
-  --mg-icon-extra-large-size: 3.6rem;
+  --mg-icon-extra-large-size: 3.2rem;
+  --mg-icon-border-radius: 50%;
 
   /*
     <mg-button>
@@ -160,6 +165,7 @@
   --mg-popover-background-color: var(--color-light);
   --mg-popover-font-color: var(--color-font-dark);
   --mg-popover-title-font-size: 1.4rem;
+  --mg-popover-max-width: 40rem;
 
   /*
     <mg-message>

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

@@ -35,13 +35,11 @@ export declare class MgBadge {
   classList: ClassList;
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad(): void;
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render(): HTMLElement;

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

@@ -76,34 +76,29 @@ export declare class MgButton {
   disabledChange: EventEmitter<MgButton['disabled']>;
   /**
    * Trigger actions onClick event
-   *
    * @param {MouseEvent} event click event
    * @returns {void}
    */
   private handleClick;
   /**
    * Handle onKeydown event
-   *
    * @param {KeyboardEvent} event keyboard event
    * @returns {void}
    */
   private handleKeydown;
   /**
    * Handle onKeyup event
-   *
    * @param {KeyboardEvent} event keyboard event
    * @returns {void}
    */
   private handleKeyup;
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad(): void;
   /**
    * Render component
-   *
    * @returns {HTMLElement} html element
    */
   render(): HTMLElement;

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

@@ -0,0 +1,16 @@
+/**
+ * List available variants
+ */
+export declare const variants: readonly ["info", "warning", "success", "danger", "app"];
+/**
+ * Variant type
+ */
+export type VariantType = (typeof variants)[number];
+/**
+ * List available variant styles
+ */
+export declare const variantStyles: readonly ["bar-left", "fill"];
+/**
+ * VariantStyle type
+ */
+export type VariantStyleType = (typeof variantStyles)[number];

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

@@ -1,10 +1,46 @@
+import { ClassList } from '../../../utils/components.utils';
+import { type VariantStyleType, type VariantType } from './mg-card.conf';
 export declare class MgCard {
+  /*************
+   * Private *
+   *************/
+  private readonly name;
+  private readonly baseClass;
+  /*************
+   * Decorators *
+   *************/
+  /**
+   * Define variant prop
+   * Default: undefined
+   */
+  variant: undefined | VariantType;
+  validateVariant(newValue: MgCard['variant'], oldValue?: MgCard['variant']): void;
+  /**
+   * Define variantStyle prop
+   * Default: undefined
+   */
+  variantStyle: undefined | VariantStyleType;
+  validateVariantStyle(newValue: MgCard['variantStyle'], oldValue?: MgCard['variantStyle']): void;
+  /**
+   * Component classes
+   */
+  classList: ClassList;
+  /**
+   * Methode to set default varianStyle props
+   * needeed has stencil doesn't know that props is mutated when updated in prop watcher
+   * @returns {void}
+   */
+  private setDefaultVariantStyle;
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Check if props are well configured on init
+   * @returns {void}
+   */
+  componentWillLoad(): void;
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render(): HTMLElement;

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

@@ -29,13 +29,11 @@ export declare class MgCharacterLeft {
    *************/
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad(): void;
   /**
    * Render component
-   *
    * @returns {HTMLElement} HTML Element
    */
   render(): HTMLElement;

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

@@ -8,7 +8,6 @@ export declare class MgDivider {
   size: 'regular' | 'full';
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render(): HTMLElement;

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

@@ -5,7 +5,7 @@ export declare const icons: unknown;
 /**
  * List of all possibles sizes
  */
-export declare const sizes: readonly ["small", "regular", "large", "extra-large"];
+export declare const sizes: readonly ["small", "regular", "medium", "large", "extra-large"];
 /**
  * Icon Size from sizes
  */
@@ -13,8 +13,16 @@ export type IconSizeType = (typeof sizes)[number];
 /**
  * List of all possibles variants
  */
-export declare const variants: readonly ["success", "warning", "danger", "info"];
+export declare const variants: readonly ["success", "warning", "danger", "info", "app"];
 /**
  * Variant type from variants
  */
 export type IconVariantType = (typeof variants)[number];
+/**
+ * List of all possibles variants styles
+ */
+export declare const variantStyles: readonly ["icon", "background", "full"];
+/**
+ * Variant style type from variant style
+ */
+export type IconVariantStyleType = (typeof variantStyles)[number];

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

@@ -1,8 +1,8 @@
-import { IconVariantType, IconSizeType } from './mg-icon.conf';
+import { IconVariantType, IconSizeType, IconVariantStyleType } from './mg-icon.conf';
 import { ClassList } from '../../../utils/components.utils';
 export declare class MgIcon {
   /**
-   * Icon to display
+   * Icon to display.
    */
   icon: string;
   validateIcon(newValue: MgIcon['icon'], oldValue?: MgIcon['icon']): void;
@@ -12,11 +12,19 @@ export declare class MgIcon {
   size: IconSizeType;
   validateSize(newValue: MgIcon['size'], oldValue?: MgIcon['size']): void;
   /**
-   * Define icon variant
-   * Add a background to the icon based on variant color
+   * Define icon variant color
    */
-  variant?: IconVariantType;
+  variant: IconVariantType;
   validateVariant(newValue: MgIcon['variant'], oldValue?: MgIcon['variant']): void;
+  /**
+   * Define icon color variant style
+   * Add a color to the icon based on variant color with given style
+   * 'full': Used to set a circular background with variant soft color and icon variant color
+   * 'background': Used to set a circular background with variant soft color
+   * 'icon': Used to set a color only to the icon
+   */
+  variantStyle: IconVariantStyleType;
+  validateVariantStyle(newValue: MgIcon['variantStyle'], oldValue?: MgIcon['variantStyle']): void;
   /**
    * Make the icon spin
    */
@@ -28,19 +36,22 @@ export declare class MgIcon {
   classList: ClassList;
   /**
    * getIcon
-   *
    * @returns {HTMLElement} icon html
    */
   private getIcon;
+  /**
+   * Method to set default varianStyle props
+   * needeed has stencil doesn't know that props is mutated when updated in prop watcher
+   * @returns {void}
+   */
+  private setDefaultVariantStyle;
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad(): void;
   /**
    * Render component
-   *
    * @returns {HTMLElement} HTML Element
    */
   render(): HTMLElement;

package/dist/types/components/atoms/mg-input-title/mg-input-title.d.ts

@@ -22,13 +22,11 @@ export declare class MgInputTitle {
    *************/
   /**
    * Init tag name
-   *
    * @returns {void}
    */
   componentWillLoad(): void;
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render(): HTMLElement;

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

@@ -37,7 +37,6 @@ export declare class MgTag {
    *************/
   /**
    * Validate the given textContent
-   *
    * @param {string} textContent html element textContent property
    * @returns {void}
    */
@@ -47,13 +46,11 @@ export declare class MgTag {
    *************/
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad(): void;
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render(): HTMLElement;

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

@@ -6,6 +6,7 @@ export declare class MgTooltip {
   private popper;
   private tooltip;
   private tooltipedElement;
+  private windows;
   private guard;
   /**************
    * Decorators *
@@ -39,19 +40,28 @@ export declare class MgTooltip {
   disabled: boolean;
   /**
    * Show tooltip
-   *
    * @returns {void}
    */
   private show;
   /**
    * Hide tooltip
-   *
    * @returns {void}
    */
   private hide;
+  /**
+   * Check if clicked outside of component and hidde tooltip
+   * @param {MouseEvent} event mouse event
+   * @returns {void}
+   */
+  private clickOutside;
+  /**
+   * Check if 'Escape' key is pressed of component and hidde tooltip
+   * @param {KeyboardEvent} event keyboard event
+   * @returns {void}
+   */
+  private pressEscape;
   /**
    * Method to set display prop
-   *
    * @param {boolean} newValue display prop new value
    * @param {boolean} condition additionnal condition to apply display prop newValue
    * @returns {void}
@@ -59,7 +69,6 @@ export declare class MgTooltip {
   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
@@ -68,20 +77,17 @@ export declare class MgTooltip {
   private tooltipMouseListenerAction;
   /**
    * Method to reset guard value
-   *
    * @returns {void}
    */
   private resetGuard;
   /**
    * Update slot content when it is a mg-button
-   *
    * @param {HTMLMgButtonElement} mgButton slotted mg-button
    * @returns {void}
    */
   private setMgButtonWrapper;
   /**
    * Init tooltip
-   *
    * @param {HTMLElement} slotElement slotted element
    * @param {HTMLElement} interactiveElement interactive element
    */
@@ -89,17 +95,20 @@ export declare class MgTooltip {
   /*************
    * Lifecycle *
    *************/
+  /**
+   * set variables
+   * @returns {void}
+   */
+  componentWillLoad(): void;
   /**
    * Get slotted element
    * Check if it already contain an interactive element, if not we need to add a tabIndex attribute
    * We need to attach the focused element to the tooltip (aria-describedby)
-   *
    * @returns {void}
    */
   componentDidLoad(): void;
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render(): HTMLElement;

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

@@ -24,7 +24,6 @@ interface MgInputProps {
 }
 /**
  * Get input template
- *
  * @param {MgInputProps} props MgInput Interface Props
  * @param {VNode[]} children Represent scoped elements
  * @param {FunctionalUtilities} utils Stencil.js utils

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

@@ -98,13 +98,11 @@ export declare class MgInputCheckbox {
   inputValid: EventEmitter<MgInputCheckbox['valid']>;
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   displayError(): Promise<void>;
   /**
    * Handle input event
-   *
    * @param {InputEvent} event input event
    */
   private handleInput;
@@ -114,7 +112,6 @@ export declare class MgInputCheckbox {
   private handleBlur;
   /**
    * get invalid element
-   *
    * @returns {HTMLInputElement} element
    */
   private getInvalidElement;
@@ -131,13 +128,11 @@ export declare class MgInputCheckbox {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad(): ReturnType<typeof setTimeout>;
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render(): HTMLElement;

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

@@ -99,7 +99,6 @@ export declare class MgInputDate {
   inputValid: EventEmitter<boolean>;
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   displayError(): Promise<void>;
@@ -117,13 +116,11 @@ export declare class MgInputDate {
   private checkValidity;
   /**
    * get input error code
-   *
    * @returns {null | InputError} error code
    */
   private getInputError;
   /**
    * Check input errors
-   *
    * @returns {void}
    */
   private setErrorMessage;
@@ -132,13 +129,11 @@ export declare class MgInputDate {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad(): ReturnType<typeof setTimeout>;
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render(): HTMLElement;

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

@@ -23,7 +23,7 @@ export declare class MgInputNumeric {
    * Component value
    */
   value: string;
-  validateValue(newValue: string): void;
+  validateValue(newValue: MgInputNumeric['value']): void;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    */
@@ -79,7 +79,7 @@ export declare class MgInputNumeric {
    * Define numeric type
    */
   type: string;
-  validateType(newValue: string): void;
+  validateType(newValue: MgInputNumeric['type']): void;
   /**
    * Define currency
    */
@@ -97,13 +97,13 @@ export declare class MgInputNumeric {
    * integer is the number before the decimal point
    */
   integerLength: number;
-  validateIntegerLength(newValue: number): void;
+  validateIntegerLength(newValue: MgInputNumeric['integerLength']): void;
   /**
    * Override decimal length
    * decimal is the number after the decimal point
    */
   decimalLength: number;
-  validateDecimalLength(newValue: number): void;
+  validateDecimalLength(newValue: MgInputNumeric['decimalLength']): void;
   /**
    * Define input pattern to validate
    */
@@ -134,63 +134,53 @@ export declare class MgInputNumeric {
   inputValid: EventEmitter<boolean>;
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   displayError(): Promise<void>;
   /**
    * Displayed value in input
    * Change on focus/blur
-   *
-   * @returns {string} display value
+   * @returns {MgInputNumeric['value'] | MgInputNumeric['readonlyValue']} display value
    */
   private displayValue;
   /**
    * Handle input event
-   *
    * @returns {void}
    */
   private handleInput;
   /**
    * Handle focus event
-   *
    * @returns {void}
    */
   private handleFocus;
   /**
    * Handle blur event
-   *
    * @returns {void}
    */
   private handleBlur;
   /**
    * Check if input is valid
-   *
    * @returns {void}
    */
   private checkValidity;
   /**
    * Set input error message
-   *
    * @returns {void}
    */
   private setErrorMessage;
   /**
    * Get input error code
-   *
    * @returns {null | InputError} error code
    */
   private getInputError;
   /**
    * Format value based on type
-   *
    * @param {number} value value to format
    * @returns {string} formated local value
    */
   private formatValue;
   /**
    * Validate append slot
-   *
    * @returns {void}
    */
   private validateAppendSlot;
@@ -199,13 +189,11 @@ export declare class MgInputNumeric {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad(): ReturnType<typeof setTimeout>;
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render(): HTMLElement;

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

@@ -97,7 +97,6 @@ export declare class MgInputPassword {
   inputValid: EventEmitter<boolean>;
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   displayError(): Promise<void>;
@@ -122,13 +121,11 @@ export declare class MgInputPassword {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad(): ReturnType<typeof setTimeout>;
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render(): HTMLElement;

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

@@ -102,38 +102,32 @@ export declare class MgInputRadio {
   inputValid: EventEmitter<boolean>;
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   displayError(): Promise<void>;
   /**
    * Handle input event
-   *
    * @param {event} event input event
    * @returns {void}
    */
   private handleInput;
   /**
    * Handle blur event
-   *
    * @returns {void}
    */
   private handleBlur;
   /**
    * Check if input is valid
-   *
    * @returns {void}
    */
   private checkValidity;
   /**
    * Set input error message
-   *
    * @returns {void}
    */
   private setErrorMessage;
   /**
    * get invalid element
-   *
    * @returns {HTMLInputElement} element
    */
   private getInvalidElement;
@@ -142,13 +136,11 @@ export declare class MgInputRadio {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad(): ReturnType<typeof setTimeout>;
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render(): HTMLElement;