@mgdis/mg-components 5.17.0 → 5.18.0

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

@@ -21,6 +21,7 @@ export declare class MgTooltip {
    * Needed by the input for accessibility `aria-decribedby`.
    */
   identifier: string;
+  validateIdentifier(): void;
   /**
    * Displayed message in the 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.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.d.ts

@@ -88,6 +88,7 @@ export declare class MgInputText {
    * Define input pattern error message
    */
   patternErrorMessage: string;
+  validatePattern(newValue: string): void;
   /**
    * Add a tooltip message next to the input
    */
@@ -129,9 +130,23 @@ export declare class MgInputText {
    */
   setFocus(): Promise<void>;
   /**
-   * 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: MgInputText['valid'], errorMessage: string): Promise<void>;
+  /**
+   * Method to set validity values
+   * @param newValue - valid new value
+   */
+  private setValidity;
   /**
    * Handle input event
    */
@@ -150,12 +165,9 @@ export declare class MgInputText {
   private checkValidity;
   /**
    * Set input error message
+   * @param errorMessage - errorMessage override
    */
   private setErrorMessage;
-  /**
-   * Validate pattern configuration
-   */
-  private validatePattern;
   /**
    * Validate append slot
    */

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

@@ -78,6 +78,7 @@ export declare class MgInputTextarea {
    * Define input pattern error message
    */
   patternErrorMessage: string;
+  validatePattern(newValue: string): void;
   /**
    * Define the number of visible text lines for the control
    */
@@ -124,9 +125,23 @@ export declare class MgInputTextarea {
    */
   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: MgInputTextarea['valid'], errorMessage: string): Promise<void>;
+  /**
+   * Method to set validity values
+   * @param newValue - valid new value
+   */
+  private setValidity;
   /**
    * Handle input event
    */
@@ -151,12 +166,9 @@ export declare class MgInputTextarea {
   private checkValidity;
   /**
    * Set input error message
+   * @param errorMessage - errorMessage override
    */
   private setErrorMessage;
-  /**
-   * Validate pattern configuration
-   */
-  private validatePattern;
   /*************
    * Lifecycle *
    *************/

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

@@ -61,7 +61,7 @@ export declare class MgForm {
    */
   formSubmit: EventEmitter<boolean>;
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   displayError(): Promise<void>;
   /**

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

@@ -28,11 +28,11 @@ export declare class MgPanel {
    * Panel title pattern
    */
   titlePattern: string;
-  validatetitlePattern(newValue: string): void;
   /**
    * Panel title pattern error message
    */
   titlePatternErrorMessage: string;
+  validateTitlePattern(newValue: string): void;
   /**
    * Define if panel title is editable
    */

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

@@ -20,6 +20,7 @@ export declare class MgPopover {
    * Needed by the input for accessibility `aria-decribedby`.
    */
   identifier: string;
+  validateIdentifier(): void;
   /**
    * Popover placement
    */

package/dist/types/components.d.ts

@@ -174,7 +174,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Public method to display errors
+          * Display input error if it exists.
          */
         "displayError": () => Promise<void>;
         /**
@@ -236,7 +236,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Public method to display errors
+          * Display input error if it exists.
          */
         "displayError": () => Promise<void>;
         /**
@@ -283,12 +283,18 @@ export namespace Components {
           * Define if mg-input-checkbox is required
          */
         "required": boolean;
+        /**
+          * 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>;
         /**
           * Add a tooltip message next to the input
          */
         "tooltip": string;
         /**
-          * Define checkbox type
+          * 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;
         /**
@@ -335,7 +341,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Public method to display errors
+          * Display input error if it exists.
          */
         "displayError": () => Promise<void>;
         /**
@@ -382,6 +388,12 @@ export namespace Components {
           * Define if input is required
          */
         "required": boolean;
+        /**
+          * 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>;
         /**
           * Add a tooltip message next to the input
          */
@@ -409,7 +421,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Public method to display errors
+          * Display input error if it exists.
          */
         "displayError": () => Promise<void>;
         /**
@@ -468,6 +480,12 @@ export namespace Components {
           * Define if input is required
          */
         "required": boolean;
+        /**
+          * 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>;
         /**
           * Add a tooltip message next to the input
          */
@@ -491,7 +509,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Public method to display errors
+          * Display input error if it exists.
          */
         "displayError": () => Promise<void>;
         /**
@@ -538,6 +556,12 @@ export namespace Components {
           * Define if input is required
          */
         "required": boolean;
+        /**
+          * 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>;
         /**
           * Add a tooltip message next to the input
          */
@@ -557,7 +581,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Public method to display errors
+          * Display input error if it exists.
          */
         "displayError": () => Promise<void>;
         /**
@@ -604,6 +628,12 @@ export namespace Components {
           * Define if input is required
          */
         "required": boolean;
+        /**
+          * 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>;
         /**
           * Add a tooltip message next to the input
          */
@@ -623,7 +653,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Public method to display errors
+          * Display input error if it exists.
          */
         "displayError": () => Promise<void>;
         /**
@@ -682,6 +712,12 @@ export namespace Components {
           * Define if input is required
          */
         "required": boolean;
+        /**
+          * 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>;
         /**
           * Add a tooltip message next to the input
          */
@@ -705,7 +741,7 @@ export namespace Components {
          */
         "displayCharacterLeft": boolean;
         /**
-          * Public method to display errors
+          * Display input error if it exists.
          */
         "displayError": () => Promise<void>;
         /**
@@ -768,6 +804,12 @@ export namespace Components {
           * Define if input is required
          */
         "required": boolean;
+        /**
+          * 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: MgInputText['valid'], errorMessage: string) => Promise<void>;
         /**
           * Public method to play input focus
          */
@@ -799,7 +841,7 @@ export namespace Components {
          */
         "displayCharacterLeft": boolean;
         /**
-          * Public method to display errors
+          * Display input error if it exists.
          */
         "displayError": () => Promise<void>;
         /**
@@ -866,6 +908,12 @@ export namespace Components {
           * Define the number of visible text lines for the control
          */
         "rows": number;
+        /**
+          * 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: MgInputTextarea['valid'], errorMessage: string) => Promise<void>;
         /**
           * Add a tooltip message next to the input
          */
@@ -1807,7 +1855,7 @@ declare namespace LocalJSX {
          */
         "tooltip"?: string;
         /**
-          * Define checkbox type
+          * 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;
         /**

package/dist/types/utils/components.utils.d.ts

@@ -67,3 +67,9 @@ export declare const getWindows: (localWindow: Window) => Window[];
  * @returns The list of windows found
  */
 export declare const getParentWindows: (localWindow: Window, windows?: Window[]) => Window[];
+/**
+ * Validate string
+ * @param value - value to check
+ * @returns if string is valid
+ */
+export declare const isValidString: (value: unknown) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.17.0",
+  "version": "5.18.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",