@mgdis/mg-components 5.17.0 → 5.19.0

package/dist/mg-components/variables.css

@@ -1,275 +1 @@
-:root {
-  /*
-    Fonts
-  */
-
-  --font-size: 1.3rem;
-  --line-height: 1.4;
-
-  /* Open Sans is used for the body (mostly all texts) */
-  --font-family: 'Open Sans', sans-serif;
-
-  /* Headings (h1 to h6) font can be customized */
-  --font-family-heading: var(--font-family);
-
-  /* Font colors */
-  --color-font-light: var(--color-light);
-  --color-font-dark: var(--color-dark);
-  /*
-    Colors
-    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); */
-  --color-neutral-h: 0;
-  --color-neutral-s: 0%;
-  --color-neutral-l: 99.6%;
-  --color-neutral: var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l);
-
-  /* Warning */
-  /* #ffc33e */
-  /* rgb(255, 195, 62); */
-  --color-warning-h: 41;
-  --color-warning-s: 100%;
-  --color-warning-l: 62.2%;
-  --color-warning: var(--color-warning-h), var(--color-warning-s), var(--color-warning-l);
-
-  /* Success */
-  /* #32d59c */
-  /* rgb(50, 213, 156); */
-  --color-success-h: 159;
-  --color-success-s: 66%;
-  --color-success-l: 51.6%;
-  --color-success: var(--color-success-h), var(--color-success-s), var(--color-success-l);
-
-  /* Info */
-  /* #005e9c; */
-  /* rgb(0, 94, 156); */
-  --color-info-h: 204;
-  --color-info-s: 100%;
-  --color-info-l: 30.6%;
-  --color-info: var(--color-info-h), var(--color-info-s), var(--color-info-l);
-
-  /* Danger */
-  /* #db1f29; */
-  /* rgb(219, 31, 41); */
-  --color-danger-h: 357;
-  --color-danger-s: 75%;
-  --color-danger-l: 49%;
-  --color-danger: var(--color-danger-h), var(--color-danger-s), var(--color-danger-l);
-
-  /* Dark */
-  /* #15282e; */
-  /* rgb(21, 40, 46); */
-  --color-dark-h: 194;
-  --color-dark-s: 37.3%;
-  --color-dark-l: 13.1%;
-  --color-dark: var(--color-dark-h), var(--color-dark-s), var(--color-dark-l);
-  
-  /* dark-40 */
-  --mg-color-dark-40-hsl: var(--color-dark-h), 7%, 43%;
-  /* dark-5 */
-  --mg-color-dark-5-hsl: var(--color-dark-h), 9%, 96%;
-  /* dark-soft */
-  --mg-color-dark-soft-hsl: var(--color-dark-h), var(--color-dark-s), 90%;
-
-  /* Light */
-  /* white; (#ffffff) */
-  /* rgb(255, 255, 255); */
-  --color-light-h: 0;
-  --color-light-s: 0%;
-  --color-light-l: 100%;
-  --color-light: var(--color-light-h), var(--color-light-s), var(--color-light-l);
-
-  /* Primary */
-  --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: 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 */
-  --box-shadow: 0 0.3rem 0.8rem 0 hsl(var(--color-dark), 0.15);
-
-  /* Soft style */
-  --mg-color-soft-l: 90%;
-
-  /*
-    Global
-   */
-  --default-size: 3.5rem;
-  --mg-disabled-opacity: 0.4;
-
-  /*
-    <mg-icon>
-   */
-  --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.2rem;
-  --mg-icon-border-radius: 50%;
-
-  /*
-    <mg-button>
-   */
-
-  --mg-button-border-radius: 0.3rem;
-  --mg-button-icon-border-radius: var(--default-size);
-  --mg-button-disabled-opacity: var(--mg-disabled-opacity);
-  --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);
-  --mg-button-primary-color-s: var(--color-dark-s);
-  --mg-button-primary-color-l: var(--color-dark-l);
-  --mg-button-primary-font-color: var(--color-neutral);
-
-  /* Secondary */
-  --mg-button-secondary-color-h: var(--color-neutral-h);
-  --mg-button-secondary-color-s: var(--color-neutral-s);
-  --mg-button-secondary-color-l: var(--color-neutral-l);
-  --mg-button-secondary-font-color: var(--color-dark);
-
-  /*
-    <mg-tag>
-   */
-  --mg-tag-height: 2.3rem;
-  --mg-tag-border-radius: 0.5rem;
-  --mg-tag-font-size: 1.2rem;
-
-  /*
-  <mg-badge>
-  */
-  --mg-badge-size: 1.6rem;
-  --mg-badge-font-size: 1.1rem;
-
-  /*
-    <mg-tooltip>
-   */
-  --mg-tooltip-border-radius: 0.5rem;
-  --mg-tooltip-background-color: var(--color-dark);
-  --mg-tooltip-font-color: var(--color-font-light);
-
-  /*
-    <mg-popover>
-   */
-  --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>
-   */
-  --mg-message-border-radius: 0.3rem;
-
-  /*
-    <mg-modal>
-   */
-  --mg-modal-border-radius: 0.5rem;
-  --mg-modal-title-font-size: 1.8rem;
-  --mg-modal-content-font-size: 1.2rem;
-
-  /*
-    <mg-panel>
-   */
-  --mg-panel-border-radius: 0.5rem;
-  --mg-panel-background: var(--color-info-h) var(--color-info-s) calc(var(--color-info-l) + 68%);
-  --mg-panel-box-shadow: var(--box-shadow);
-  --mg-panel-content-padding: 1.5rem;
-
-  /*
-    <mg-illustrated-message>
-   */
-
-  --mg-illustrated-message-padding-vertical: 4rem;
-
-  /*
-    <mg-card>
-   */
-  --mg-card-padding-default: 1.6rem;
-  --mg-card-border-radius-default: 0.5rem;
-  --mg-card-background-default: hsl(var(--color-light));
-  --mg-card-border-default: 0.1rem solid hsl(var(--color-dark), 0.05);
-  --mg-card-box-shadow-default: var(--box-shadow);
-
-  /*
-    <mg-divider>
-  */
-  --mg-divider-background-color: hsl(var(--color-dark), 0.15);
-  --mg-divider-thickness: 0.1rem;
-  --mg-divider-vertical-spacing: 4rem;
-
-  /*
-    Layout
-   */
-  --mg-grid-spacing: 1rem;
-
-  /*
-    Forms
-   */
-
-  /*
-    <mg-input-...>
-   */
-  --mg-inputs-border-width: 0.1rem;
-  --mg-inputs-border-radius: 0.3rem;
-  --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); */
-  /* hsl(188, 100%, 50%); */
-  --mg-inputs-color-shadow-focus-hsl: 188, 100%, 50%;
-
-  /*
-    <mg-input-toggle>
-  */
-  --mg-input-toggle-border-radius-ratio: 2;
-
-  /*
-    <mg-input-checkbox>
-    <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);
-  --mg-tabs-border-bottom: solid 0.1rem hsl(var(--mg-color-dark-soft-hsl));
-
-  /*
-    <mg-details>
-   */
-  --mg-details-spacing: 1.5rem;
-}
+:root{--font-size: 1.3rem;--line-height: 1.4;--font-family: "Open Sans", sans-serif;--font-family-heading: var(--font-family);--color-font-light: var(--color-light);--color-font-dark: var(--color-dark);--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);--color-neutral-h: 0;--color-neutral-s: 0%;--color-neutral-l: 99.6%;--color-neutral: var(--color-neutral-h) var(--color-neutral-s) var(--color-neutral-l);--color-warning-h: 41;--color-warning-s: 100%;--color-warning-l: 62.2%;--color-warning: var(--color-warning-h) var(--color-warning-s) var(--color-warning-l);--color-success-h: 159;--color-success-s: 66%;--color-success-l: 51.6%;--color-success: var(--color-success-h) var(--color-success-s) var(--color-success-l);--color-info-h: 204;--color-info-s: 100%;--color-info-l: 30.6%;--color-info: var(--color-info-h) var(--color-info-s) var(--color-info-l);--color-danger-h: 357;--color-danger-s: 75%;--color-danger-l: 49%;--color-danger: var(--color-danger-h) var(--color-danger-s) var(--color-danger-l);--color-dark-h: 194;--color-dark-s: 37.3%;--color-dark-l: 13.1%;--color-dark: var(--color-dark-h) var(--color-dark-s) var(--color-dark-l);--mg-color-dark-40-hsl: var(--color-dark-h) 7% 43%;--mg-color-dark-5-hsl: var(--color-dark-h) 9% 96%;--mg-color-dark-soft-hsl: var(--color-dark-h) var(--color-dark-s) 90%;--color-light-h: 0;--color-light-s: 0%;--color-light-l: 100%;--color-light: var(--color-light-h) var(--color-light-s) var(--color-light-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));--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));--box-shadow: 0 0.3rem 0.8rem 0 hsl(var(--color-dark) / 15%);--mg-color-soft-l: 90%;--default-size: 3.5rem;--mg-disabled-opacity: 0.4;--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.2rem;--mg-icon-border-radius: 50%;--mg-button-border-radius: 0.3rem;--mg-button-icon-border-radius: var(--default-size);--mg-button-disabled-opacity: var(--mg-disabled-opacity);--mg-button-gradient: 1;--mg-button-border-variation: 1;--mg-button-primary-color-h: var(--color-dark-h);--mg-button-primary-color-s: var(--color-dark-s);--mg-button-primary-color-l: var(--color-dark-l);--mg-button-primary-font-color: var(--color-neutral);--mg-button-secondary-color-h: var(--color-neutral-h);--mg-button-secondary-color-s: var(--color-neutral-s);--mg-button-secondary-color-l: var(--color-neutral-l);--mg-button-secondary-font-color: var(--color-dark);--mg-tag-height: 2.3rem;--mg-tag-border-radius: 0.5rem;--mg-tag-font-size: 1.2rem;--mg-badge-size: 1.6rem;--mg-badge-font-size: 1.1rem;--mg-tooltip-border-radius: 0.5rem;--mg-tooltip-background-color: var(--color-dark);--mg-tooltip-font-color: var(--color-font-light);--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-border-radius: 0.3rem;--mg-modal-border-radius: 0.5rem;--mg-modal-title-font-size: 1.8rem;--mg-modal-content-font-size: 1.2rem;--mg-panel-border-radius: 0.5rem;--mg-panel-background: var(--color-info-h) var(--color-info-s) calc(var(--color-info-l) + 68%);--mg-panel-box-shadow: var(--box-shadow);--mg-panel-content-padding: 1.5rem;--mg-illustrated-message-padding-vertical: 4rem;--mg-card-padding-default: 1.6rem;--mg-card-border-radius-default: 0.5rem;--mg-card-background-default: hsl(var(--color-light));--mg-card-border-default: 0.1rem solid hsl(var(--color-dark) / 5%);--mg-card-box-shadow-default: var(--box-shadow);--mg-divider-background-color: hsl(var(--color-dark) / 15%);--mg-divider-thickness: 0.1rem;--mg-divider-vertical-spacing: 4rem;--mg-grid-spacing: 1rem;--mg-inputs-border-width: 0.1rem;--mg-inputs-border-radius: 0.3rem;--mg-inputs-color: #b5c2c9;--mg-inputs-spacer: 1rem;--mg-inputs-error-bg-color: var(--color-danger-h) calc(var(--color-danger-s) + 5%) calc(var(--color-danger-l) + 49%);--mg-inputs-color-shadow-focus-hsl: 188 100% 50%;--mg-input-toggle-border-radius-ratio: 2;--mg-input-check-size: 1.3rem;--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-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);--mg-tabs-border-bottom: solid 0.1rem hsl(var(--mg-color-dark-soft-hsl));--mg-details-spacing: 1.5rem}/*# sourceMappingURL=variables.css.map */

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

@@ -5,7 +5,7 @@ export declare class MgCard {
    * Private *
    *************/
   private readonly name;
-  private readonly baseClass;
+  private readonly classBase;
   /*************
    * Decorators *
    *************/

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

@@ -3,7 +3,7 @@ export declare class MgInputTitle {
    * Label input id
    */
   identifier: string;
-  validateIdentifier(newValue: string): void;
+  validateIdentifier(newValue: MgInputTitle['identifier']): void;
   /**
    * If input is required an asterisk is added at the end of the label
    */

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

@@ -21,11 +21,12 @@ export declare class MgTooltip {
    * Needed by the input for accessibility `aria-decribedby`.
    */
   identifier: string;
+  validateIdentifier(): void;
   /**
    * Displayed message in the tooltip
    */
   message: string;
-  validateMessage(newValue: string): void;
+  validateMessage(newValue: MgTooltip['message']): void;
   /**
    * Tooltip placement
    */
@@ -34,7 +35,7 @@ export declare class MgTooltip {
    * Display tooltip
    */
   display: boolean;
-  handleDisplay(newValue: boolean): void;
+  handleDisplay(newValue: MgTooltip['display']): void;
   /**
    * Disable tooltip
    */
@@ -89,7 +90,7 @@ export declare class MgTooltip {
   /**
    * Render tooltip content element
    */
-  private renderTooltip;
+  private renderTooltipContent;
   /*************
    * Lifecycle *
    *************/

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

@@ -62,7 +62,7 @@ export declare class MgInputCheckboxPaginated implements IMgInputCheckboxBase {
    */
   private massActionHandler;
   /**
-   * Toogle items button handler
+   * Toggle items button handler
    */
   private handleToggleClick;
   /**

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

@@ -13,12 +13,12 @@ export interface CheckboxValue {
  * use to match checkbox attributes
  */
 export interface CheckboxItem extends CheckboxValue {
-  id: string;
-  handleInput: (event: InputEvent & {
+  _id: string;
+  _handleInput: (event: InputEvent & {
     target: HTMLInputElement;
   }) => void;
-  handleBlur: () => void;
-  handleKeydown: (event: KeyboardEvent & {
+  _handleBlur: () => void;
+  _handleKeydown: (event: KeyboardEvent & {
     target: HTMLElement;
   }) => void;
 }

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

@@ -9,6 +9,7 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
   private searchInput;
   private messages;
   private hasDisplayedError;
+  private mode;
   private readonly baseClassName;
   private readonly multiStart;
   private readonly searchStart;
@@ -27,6 +28,11 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
   validateValue(newValue: MgInputCheckbox['value']): void;
   /**
    * Define checkbox type
+   * When it's undefined the type is dynamic:
+   * - With 0-5 items type is 'checkbox'
+   * - With 5-10 items type is 'multi'
+   * When it set the type is locked to the defined value.
+   * When type is dynamic OR with 'multi' type AND Over 10 items "search" feature is enabled
    */
   type: CheckboxType;
   validateType(newValue: MgInputCheckbox['type']): void;
@@ -125,9 +131,23 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
    */
   inputValid: EventEmitter<MgInputCheckbox['valid']>;
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   displayError(): Promise<void>;
+  /**
+   * Set an error and display a custom error message.
+   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
+   * It must be paired with an error message to display for the given context.
+   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+   * @param valid - value indicating the validity
+   * @param errorMessage - the error message to display
+   */
+  setError(valid: MgInputCheckbox['valid'], errorMessage: string): Promise<void>;
+  /**
+   * Method to set validity values
+   * @param newValue - valid new value
+   */
+  private setValidity;
   /**
    * Handle input event
    * @param event - input event
@@ -195,6 +215,7 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
   /**
    * Set input error message
    * @param displayError - dispay error condition
+   * @param errorMessage - errorMessage override
    */
   private setErrorMessage;
   /**

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

@@ -19,7 +19,7 @@ export declare class MgInputDate {
    * Component value
    */
   value: string;
-  validateValue(newValue: string): void;
+  validateValue(newValue: MgInputDate['value']): void;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    */
@@ -98,9 +98,23 @@ export declare class MgInputDate {
    */
   inputValid: EventEmitter<boolean>;
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   displayError(): Promise<void>;
+  /**
+   * Set an error and display a custom error message.
+   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
+   * It must be paired with an error message to display for the given context.
+   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+   * @param valid - value indicating the validity
+   * @param errorMessage - the error message to display
+   */
+  setError(valid: MgInputDate['valid'], errorMessage: string): Promise<void>;
+  /**
+   * Method to set validity values
+   * @param newValue - valid new value
+   */
+  private setValidity;
   /**
    * Handle input event
    */
@@ -120,6 +134,7 @@ export declare class MgInputDate {
   private getInputError;
   /**
    * Check input errors
+   * @param errorMessage - errorMessage override
    */
   private setErrorMessage;
   /*************

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

@@ -24,25 +24,6 @@ export declare class MgInputNumeric {
    */
   value: string;
   validateValue(newValue: MgInputNumeric['value']): void;
-  /**
-   * Checks if the given value is valid according to the defined rules.
-   * @param value - The input value to validate.
-   * @param regex - The regular expression for validation.
-   * @param integer - The integer part of the value.
-   * @param decimal - The decimal part of the value.
-   * @returns Returns true if the value is valid, otherwise false.
-   */
-  private isValidValue;
-  /**
-   * Handles invalid input values and returns a corrected value.
-   * @returns The corrected value.
-   */
-  private handleInvalidValue;
-  /**
-   * Updates the component values based on the validated input value.
-   * @param newValue - The validated input value.
-   */
-  private updateValues;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    */
@@ -152,9 +133,42 @@ export declare class MgInputNumeric {
    */
   inputValid: EventEmitter<boolean>;
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   displayError(): Promise<void>;
+  /**
+   * Set an error and display a custom error message.
+   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
+   * It must be paired with an error message to display for the given context.
+   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+   * @param valid - value indicating the validity
+   * @param errorMessage - the error message to display
+   */
+  setError(valid: MgInputNumeric['valid'], errorMessage: string): Promise<void>;
+  /**
+   * Method to set validity values
+   * @param newValue - valid new value
+   */
+  private setValidity;
+  /**
+   * Checks if the given value is valid according to the defined rules.
+   * @param value - The input value to validate.
+   * @param regex - The regular expression for validation.
+   * @param integer - The integer part of the value.
+   * @param decimal - The decimal part of the value.
+   * @returns Returns true if the value is valid, otherwise false.
+   */
+  private isValidValue;
+  /**
+   * Handles invalid input values and returns a corrected value.
+   * @returns The corrected value.
+   */
+  private handleInvalidValue;
+  /**
+   * Updates the component values based on the validated input value.
+   * @param newValue - The validated input value.
+   */
+  private updateValues;
   /**
    * Displayed value in input
    * Change on focus/blur
@@ -179,6 +193,7 @@ export declare class MgInputNumeric {
   private checkValidity;
   /**
    * Set input error message
+   * @param errorMessage - errorMessage override
    */
   private setErrorMessage;
   /**

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

@@ -96,9 +96,23 @@ export declare class MgInputPassword {
    */
   inputValid: EventEmitter<boolean>;
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   displayError(): Promise<void>;
+  /**
+   * Set an error and display a custom error message.
+   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
+   * It must be paired with an error message to display for the given context.
+   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+   * @param valid - value indicating the validity
+   * @param errorMessage - the error message to display
+   */
+  setError(valid: MgInputPassword['valid'], errorMessage: string): Promise<void>;
+  /**
+   * Method to set validity values
+   * @param newValue - valid new value
+   */
+  private setValidity;
   /**
    * Handle input event
    */
@@ -113,6 +127,7 @@ export declare class MgInputPassword {
   private checkValidity;
   /**
    * Set input error message
+   * @param errorMessage - errorMessage override
    */
   private setErrorMessage;
   /*************

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

@@ -100,9 +100,23 @@ export declare class MgInputRadio {
    */
   inputValid: EventEmitter<boolean>;
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   displayError(): Promise<void>;
+  /**
+   * Set an error and display a custom error message.
+   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
+   * It must be paired with an error message to display for the given context.
+   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+   * @param valid - value indicating the validity
+   * @param errorMessage - the error message to display
+   */
+  setError(valid: MgInputRadio['valid'], errorMessage: string): Promise<void>;
+  /**
+   * Method to set validity values
+   * @param newValue - valid new value
+   */
+  private setValidity;
   /**
    * Handle input event
    * @param event - input event
@@ -118,6 +132,7 @@ export declare class MgInputRadio {
   private checkValidity;
   /**
    * Set input error message
+   * @param errorMessage - errorMessage override
    */
   private setErrorMessage;
   /**

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

@@ -122,9 +122,23 @@ export declare class MgInputSelect {
    */
   inputValid: EventEmitter<boolean>;
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   displayError(): Promise<void>;
+  /**
+   * Set an error and display a custom error message.
+   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
+   * It must be paired with an error message to display for the given context.
+   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+   * @param valid - value indicating the validity
+   * @param errorMessage - the error message to display
+   */
+  setError(valid: MgInputSelect['valid'], errorMessage: string): Promise<void>;
+  /**
+   * Method to set validity values
+   * @param newValue - valid new value
+   */
+  private setValidity;
   /**
    * Handle input event
    */
@@ -159,6 +173,7 @@ export declare class MgInputSelect {
   private checkValidity;
   /**
    * Set input error message
+   * @param errorMessage - errorMessage override
    */
   private setErrorMessage;
   /*************

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

@@ -0,0 +1,12 @@
+/**
+ * List of all availables text type
+ */
+export declare const textTypes: readonly ["text", "search"];
+/**
+ * TextType from text types
+ */
+export type TextType = (typeof textTypes)[number];
+/**
+ * Type for datalist option
+ */
+export type DatalistOption = string;