@mgdis/mg-components 5.17.0 → 5.18.0

package/dist/esm/mg-action-more_34.entry.js

@@ -148,6 +148,12 @@ const getChildWindows = (localWindow, windows = []) => {
   }
   return windows;
 };
+/**
+ * Validate string
+ * @param value - value to check
+ * @returns if string is valid
+ */
+const isValidString = (value) => typeof value === 'string' && value.trim() !== '';
 
 const mgActionMoreCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}:host{--mg-popover-padding-vertical:1rem;--mg-popover-padding-horizontal:0;--mg-popover-max-width:unset}.mg-action-more__chevron{transition:200ms}.mg-action-more__chevron--rotate.mg-action-more__chevron{transform:rotate(180deg)}";
 
@@ -791,7 +797,7 @@ const MgForm = class {
     this.setRequiredMessage();
   }
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   async displayError() {
     if (!this.readonly) {
@@ -1586,6 +1592,7 @@ const MgInputCheckbox = class {
     this.inputValid = createEvent(this, "input-valid", 7);
     // hasDisplayedError (triggered by blur event)
     this.hasDisplayedError = false;
+    this.mode = 'custom';
     // style
     this.baseClassName = 'mg-input--checkbox';
     // "multi" setup
@@ -1685,10 +1692,7 @@ const MgInputCheckbox = class {
      * Check if input is valid
      */
     this.checkValidity = () => {
-      this.valid = this.readonly || this.disabled || (this.getInvalidElement() === undefined && this.validateRequired());
-      this.invalid = !this.valid;
-      // We need to send valid event even if it is the same value
-      this.inputValid.emit(this.valid);
+      this.setValidity(this.readonly || this.disabled || (this.getInvalidElement() === undefined && this.validateRequired()));
     };
     /**
      * Render button text
@@ -1706,12 +1710,17 @@ const MgInputCheckbox = class {
     /**
      * Set input error message
      * @param displayError - dispay error condition
+     * @param errorMessage - errorMessage override
      */
-    this.setErrorMessage = (displayError = true) => {
+    this.setErrorMessage = (displayError = true, errorMessage) => {
       // Set error message
       this.errorMessage = undefined;
-      if (displayError && !this.valid && !this.validateRequired())
-        this.errorMessage = this.messages.errors.required;
+      if (displayError && !this.valid) {
+        if (errorMessage !== undefined)
+          this.errorMessage = errorMessage;
+        else if (!this.validateRequired())
+          this.errorMessage = this.messages.errors.required;
+      }
     };
     /**
      * Method to get mg-popover identifier
@@ -1724,7 +1733,7 @@ const MgInputCheckbox = class {
      */
     this.getDisplayItems = () => (this.searchValue.length > 0 ? this.searchResults : this.checkboxItems);
     this.value = undefined;
-    this.type = checkboxTypes[0];
+    this.type = undefined;
     this.identifier = undefined;
     this.name = this.identifier;
     this.label = undefined;
@@ -1765,9 +1774,13 @@ const MgInputCheckbox = class {
     }
   }
   validateType(newValue) {
-    if (!checkboxTypes.includes(newValue)) {
+    if (newValue !== undefined && !checkboxTypes.includes(newValue)) {
       throw new Error('<mg-input-checkbox> prop "type" must be a CheckboxType.');
     }
+    else if (newValue === undefined) {
+      this.mode = 'auto';
+      this.type = checkboxTypes[0];
+    }
     else {
       const className = `${this.baseClassName}-multi`;
       if (newValue === 'multi') {
@@ -1799,9 +1812,9 @@ const MgInputCheckbox = class {
       this.classCollection.delete(className);
   }
   validateCheckboxItems(newValue) {
-    if (newValue.length > this.multiStart)
+    if (this.mode === 'auto' && newValue.length > this.multiStart)
       this.type = 'multi';
-    if (newValue.length > this.searchStart) {
+    if (this.mode === 'auto' || (this.type === 'multi' && newValue.length > this.searchStart)) {
       this.displaySearchInput = this.type === 'multi';
       // refresh search values
       this.updateSearchResults();
@@ -1812,13 +1825,44 @@ const MgInputCheckbox = class {
     this.updateSearchResults();
   }
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   async displayError() {
     this.checkValidity();
     this.setErrorMessage();
     this.hasDisplayedError = this.invalid;
   }
+  /**
+   * 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
+   */
+  async setError(valid, errorMessage) {
+    if (typeof valid !== 'boolean') {
+      throw new Error('<mg-input-checkbox> method "setError()" param "valid" must be a boolean');
+    }
+    else if (typeof errorMessage !== 'string' || errorMessage.trim() === '') {
+      throw new Error('<mg-input-checkbox> method "setError()" param "errorMessage" must be a string');
+    }
+    else {
+      this.setValidity(valid);
+      this.setErrorMessage(undefined, valid ? undefined : errorMessage);
+      this.hasDisplayedError = this.invalid;
+    }
+  }
+  /**
+   * Method to set validity values
+   * @param newValue - valid new value
+   */
+  setValidity(newValue) {
+    this.valid = newValue;
+    this.invalid = !this.valid;
+    // We need to send valid event even if it is the same value
+    this.inputValid.emit(this.valid);
+  }
   /**
    * Update ckecboxes item
    * @param key - property to update
@@ -2075,10 +2119,7 @@ const MgInputDate = class {
      */
     this.checkValidity = () => {
       var _a;
-      this.valid = this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true);
-      this.invalid = !this.valid;
-      // We need to send valid event even if it is the same value
-      this.inputValid.emit(this.valid);
+      this.setValidity(this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true));
     };
     /**
      * get input error code
@@ -2107,15 +2148,19 @@ const MgInputDate = class {
     };
     /**
      * Check input errors
+     * @param errorMessage - errorMessage override
      */
-    this.setErrorMessage = () => {
+    this.setErrorMessage = (errorMessage) => {
       var _a;
       // Set error message
       this.errorMessage = undefined;
       if (!this.valid) {
         const inputError = this.getInputError();
+        if (errorMessage !== undefined) {
+          this.errorMessage = errorMessage;
+        }
         // required
-        if (inputError === InputError$1.REQUIRED) {
+        else if (inputError === InputError$1.REQUIRED) {
           this.errorMessage = this.messages.errors[inputError];
         }
         // min, max & minMax
@@ -2174,13 +2219,44 @@ const MgInputDate = class {
     }
   }
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   async displayError() {
     this.checkValidity();
     this.setErrorMessage();
     this.hasDisplayedError = this.invalid;
   }
+  /**
+   * 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
+   */
+  async setError(valid, errorMessage) {
+    if (typeof valid !== 'boolean') {
+      throw new Error('<mg-input-date> method "setError()" param "valid" must be a boolean');
+    }
+    else if (typeof errorMessage !== 'string' || errorMessage.trim() === '') {
+      throw new Error('<mg-input-date> method "setError()" param "errorMessage" must be a string');
+    }
+    else {
+      this.setValidity(valid);
+      this.setErrorMessage(valid ? undefined : errorMessage);
+      this.hasDisplayedError = this.invalid;
+    }
+  }
+  /**
+   * Method to set validity values
+   * @param newValue - valid new value
+   */
+  setValidity(newValue) {
+    this.valid = newValue;
+    this.invalid = !this.valid;
+    // We need to send valid event even if it is the same value
+    this.inputValid.emit(this.valid);
+  }
   /*************
    * Lifecycle *
    *************/
@@ -2278,20 +2354,21 @@ const MgInputNumeric = class {
      * Check if input is valid
      */
     this.checkValidity = () => {
-      this.valid = this.readonly || this.disabled || this.getInputError() === null;
-      this.invalid = !this.valid;
-      // We need to send valid event even if it is the same value
-      this.inputValid.emit(this.valid);
+      this.setValidity(this.readonly || this.disabled || this.getInputError() === null);
     };
     /**
      * Set input error message
+     * @param errorMessage - errorMessage override
      */
-    this.setErrorMessage = () => {
+    this.setErrorMessage = (errorMessage) => {
       // Set error message
       this.errorMessage = undefined;
       if (!this.valid) {
         const inputError = this.getInputError();
-        if (inputError === InputError.REQUIRED) {
+        if (errorMessage !== undefined) {
+          this.errorMessage = errorMessage;
+        }
+        else if (inputError === InputError.REQUIRED) {
           this.errorMessage = this.messages.errors[inputError];
         }
         else {
@@ -2385,36 +2462,6 @@ const MgInputNumeric = class {
       this.updateValues(newValue);
     }
   }
-  /**
-   * 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.
-   */
-  isValidValue(value, regex, integer, decimal) {
-    return ['', '-'].includes(value) || (value.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength));
-  }
-  /**
-   * Handles invalid input values and returns a corrected value.
-   * @returns The corrected value.
-   */
-  handleInvalidValue() {
-    return this.storedValue !== undefined ? this.storedValue : null;
-  }
-  /**
-   * Updates the component values based on the validated input value.
-   * @param newValue - The validated input value.
-   */
-  updateValues(newValue) {
-    this.value = newValue;
-    if (this.input !== undefined)
-      this.input.value = this.value;
-    this.numericValue = !['', null].includes(this.value) ? parseFloat(this.value.replace(',', '.')) : null;
-    this.valueChange.emit(this.numericValue);
-    this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
-  }
   handleValidityChange(newValue, _oldValue, prop) {
     if (this.input !== undefined) {
       this.input[prop] = newValue;
@@ -2441,13 +2488,74 @@ const MgInputNumeric = class {
     }
   }
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   async displayError() {
     this.checkValidity();
     this.setErrorMessage();
     this.hasDisplayedError = this.invalid;
   }
+  /**
+   * 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
+   */
+  async setError(valid, errorMessage) {
+    if (typeof valid !== 'boolean') {
+      throw new Error('<mg-input-numeric> method "setError()" param "valid" must be a boolean');
+    }
+    else if (typeof errorMessage !== 'string' || errorMessage.trim() === '') {
+      throw new Error('<mg-input-numeric> method "setError()" param "errorMessage" must be a string');
+    }
+    else {
+      this.setValidity(valid);
+      this.setErrorMessage(valid ? undefined : errorMessage);
+      this.hasDisplayedError = this.invalid;
+    }
+  }
+  /**
+   * Method to set validity values
+   * @param newValue - valid new value
+   */
+  setValidity(newValue) {
+    this.valid = newValue;
+    this.invalid = !this.valid;
+    // We need to send valid event even if it is the same value
+    this.inputValid.emit(this.valid);
+  }
+  /**
+   * 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.
+   */
+  isValidValue(value, regex, integer, decimal) {
+    return ['', '-'].includes(value) || (value.match(regex) && integer.length <= this.integerLength && decimal.length <= (this.type === 'integer' ? 0 : this.decimalLength));
+  }
+  /**
+   * Handles invalid input values and returns a corrected value.
+   * @returns The corrected value.
+   */
+  handleInvalidValue() {
+    return this.storedValue !== undefined ? this.storedValue : null;
+  }
+  /**
+   * Updates the component values based on the validated input value.
+   * @param newValue - The validated input value.
+   */
+  updateValues(newValue) {
+    this.value = newValue;
+    if (this.input !== undefined)
+      this.input.value = this.value;
+    this.numericValue = !['', null].includes(this.value) ? parseFloat(this.value.replace(',', '.')) : null;
+    this.valueChange.emit(this.numericValue);
+    this.readonlyValue = this.numericValue !== null ? this.formatValue(this.numericValue) : '';
+  }
   /**
    * Displayed value in input
    * Change on focus/blur
@@ -2535,20 +2643,23 @@ const MgInputPassword = class {
      */
     this.checkValidity = () => {
       var _a;
-      this.valid = this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true);
-      this.invalid = !this.valid;
-      // We need to send valid event even if it is the same value
-      this.inputValid.emit(this.valid);
+      this.setValidity(this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true));
     };
     /**
      * Set input error message
+     * @param errorMessage - errorMessage override
      */
-    this.setErrorMessage = () => {
+    this.setErrorMessage = (errorMessage) => {
       // Set error message
       this.errorMessage = undefined;
-      // required
-      if (!this.valid && this.input.validity.valueMissing) {
-        this.errorMessage = this.messages.errors.required;
+      if (!this.valid) {
+        if (errorMessage !== undefined) {
+          this.errorMessage = errorMessage;
+        }
+        // required
+        else if (this.input.validity.valueMissing) {
+          this.errorMessage = this.messages.errors.required;
+        }
       }
     };
     this.value = undefined;
@@ -2583,13 +2694,44 @@ const MgInputPassword = class {
     }
   }
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   async displayError() {
     this.checkValidity();
     this.setErrorMessage();
     this.hasDisplayedError = this.invalid;
   }
+  /**
+   * 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
+   */
+  async setError(valid, errorMessage) {
+    if (typeof valid !== 'boolean') {
+      throw new Error('<mg-input-password> method "setError()" param "valid" must be a boolean');
+    }
+    else if (typeof errorMessage !== 'string' || errorMessage.trim() === '') {
+      throw new Error('<mg-input-password> method "setError()" param "errorMessage" must be a string');
+    }
+    else {
+      this.setValidity(valid);
+      this.setErrorMessage(valid ? undefined : errorMessage);
+      this.hasDisplayedError = this.invalid;
+    }
+  }
+  /**
+   * Method to set validity values
+   * @param newValue - valid new value
+   */
+  setValidity(newValue) {
+    this.valid = newValue;
+    this.invalid = !this.valid;
+    // We need to send valid event even if it is the same value
+    this.inputValid.emit(this.valid);
+  }
   /*************
    * Lifecycle *
    *************/
@@ -2666,20 +2808,23 @@ const MgInputRadio = class {
      * Check if input is valid
      */
     this.checkValidity = () => {
-      this.valid = this.readonly || this.disabled || this.getInvalidElement() === undefined;
-      this.invalid = !this.valid;
-      // We need to send valid event even if it is the same value
-      this.inputValid.emit(this.valid);
+      this.setValidity(this.readonly || this.disabled || this.getInvalidElement() === undefined);
     };
     /**
      * Set input error message
+     * @param errorMessage - errorMessage override
      */
-    this.setErrorMessage = () => {
+    this.setErrorMessage = (errorMessage) => {
       const invalidElement = this.getInvalidElement();
       // Set error message
       this.errorMessage = undefined;
-      if (!this.valid && invalidElement.validity.valueMissing) {
-        this.errorMessage = this.messages.errors.required;
+      if (!this.valid) {
+        if (errorMessage !== undefined) {
+          this.errorMessage = errorMessage;
+        }
+        else if (invalidElement.validity.valueMissing) {
+          this.errorMessage = this.messages.errors.required;
+        }
       }
     };
     /**
@@ -2737,13 +2882,44 @@ const MgInputRadio = class {
     }
   }
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   async displayError() {
     this.checkValidity();
     this.setErrorMessage();
     this.hasDisplayedError = this.invalid;
   }
+  /**
+   * 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
+   */
+  async setError(valid, errorMessage) {
+    if (typeof valid !== 'boolean') {
+      throw new Error('<mg-input-radio> method "setError()" param "valid" must be a boolean');
+    }
+    else if (typeof errorMessage !== 'string' || errorMessage.trim() === '') {
+      throw new Error('<mg-input-radio> method "setError()" param "errorMessage" must be a string');
+    }
+    else {
+      this.setValidity(valid);
+      this.setErrorMessage(valid ? undefined : errorMessage);
+      this.hasDisplayedError = this.invalid;
+    }
+  }
+  /**
+   * Method to set validity values
+   * @param newValue - valid new value
+   */
+  setValidity(newValue) {
+    this.valid = newValue;
+    this.invalid = !this.valid;
+    // We need to send valid event even if it is the same value
+    this.inputValid.emit(this.valid);
+  }
   /*************
    * Lifecycle *
    *************/
@@ -2892,19 +3068,22 @@ const MgInputSelect = class {
      */
     this.checkValidity = () => {
       var _a;
-      this.valid = !this.isDisabledValue() && (this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true));
-      this.invalid = !this.valid;
-      // We need to send valid event even if it is the same value
-      this.inputValid.emit(this.valid);
+      this.setValidity(!this.isDisabledValue() && (this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true)));
     };
     /**
      * Set input error message
+     * @param errorMessage - errorMessage override
      */
-    this.setErrorMessage = () => {
+    this.setErrorMessage = (errorMessage) => {
       // Set error message
       this.errorMessage = undefined;
-      if (!this.valid && this.input.validity.valueMissing) {
-        this.errorMessage = this.messages.errors.required;
+      if (!this.valid) {
+        if (errorMessage !== undefined) {
+          this.errorMessage = errorMessage;
+        }
+        else if (this.input.validity.valueMissing) {
+          this.errorMessage = this.messages.errors.required;
+        }
       }
     };
     /**
@@ -2988,13 +3167,44 @@ const MgInputSelect = class {
     }
   }
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   async displayError() {
     this.checkValidity();
     this.setErrorMessage();
     this.hasDisplayedError = this.invalid;
   }
+  /**
+   * 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
+   */
+  async setError(valid, errorMessage) {
+    if (typeof valid !== 'boolean') {
+      throw new Error('<mg-input-select> method "setError()" param "valid" must be a boolean');
+    }
+    else if (typeof errorMessage !== 'string' || errorMessage.trim() === '') {
+      throw new Error('<mg-input-select> method "setError()" param "errorMessage" must be a string');
+    }
+    else {
+      this.setValidity(valid);
+      this.setErrorMessage(valid ? undefined : errorMessage);
+      this.hasDisplayedError = this.invalid;
+    }
+  }
+  /**
+   * Method to set validity values
+   * @param newValue - valid new value
+   */
+  setValidity(newValue) {
+    this.valid = newValue;
+    this.invalid = !this.valid;
+    // We need to send valid event even if it is the same value
+    this.inputValid.emit(this.valid);
+  }
   /*************
    * Lifecycle *
    *************/
@@ -3089,19 +3299,21 @@ const MgInputText = class {
      */
     this.checkValidity = () => {
       var _a;
-      this.valid = this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true);
-      this.invalid = !this.valid;
-      // We need to send valid event even if it is the same value
-      this.inputValid.emit(this.valid);
+      this.setValidity(this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined ? this.input.checkValidity() : true));
     };
     /**
      * Set input error message
+     * @param errorMessage - errorMessage override
      */
-    this.setErrorMessage = () => {
+    this.setErrorMessage = (errorMessage) => {
       // Set error message
       this.errorMessage = undefined;
+      // Does have a custom error message
+      if (!this.valid && errorMessage !== undefined) {
+        this.errorMessage = errorMessage;
+      }
       // Does not match pattern
-      if (!this.valid && this.input.validity.patternMismatch) {
+      else if (!this.valid && this.input.validity.patternMismatch) {
         this.errorMessage = this.patternErrorMessage;
       }
       // required
@@ -3109,17 +3321,6 @@ const MgInputText = class {
         this.errorMessage = this.messages.errors.required;
       }
     };
-    /**
-     * Validate pattern configuration
-     */
-    this.validatePattern = () => {
-      if (this.pattern !== undefined &&
-        typeof this.pattern === 'string' &&
-        this.pattern !== '' &&
-        (this.patternErrorMessage === undefined || typeof this.patternErrorMessage !== 'string' || this.patternErrorMessage === '')) {
-        throw new Error('<mg-input-text> prop "pattern" must be paired with the prop "patternErrorMessage"');
-      }
-    };
     /**
      * Validate append slot
      */
@@ -3178,6 +3379,11 @@ const MgInputText = class {
       }
     }
   }
+  validatePattern(newValue) {
+    if (newValue !== undefined && !(isValidString(this.pattern) && isValidString(this.patternErrorMessage))) {
+      throw new Error('<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
+    }
+  }
   /**
    * Public method to play input focus
    */
@@ -3185,13 +3391,44 @@ const MgInputText = class {
     this.input.focus();
   }
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   async displayError() {
     this.checkValidity();
     this.setErrorMessage();
     this.hasDisplayedError = this.invalid;
   }
+  /**
+   * 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
+   */
+  async setError(valid, errorMessage) {
+    if (typeof valid !== 'boolean') {
+      throw new Error('<mg-input-text> method "setError()" param "valid" must be a boolean');
+    }
+    else if (typeof errorMessage !== 'string' || errorMessage.trim() === '') {
+      throw new Error('<mg-input-text> method "setError()" param "errorMessage" must be a string');
+    }
+    else {
+      this.setValidity(valid);
+      this.setErrorMessage(valid ? undefined : errorMessage);
+      this.hasDisplayedError = this.invalid;
+    }
+  }
+  /**
+   * Method to set validity values
+   * @param newValue - valid new value
+   */
+  setValidity(newValue) {
+    this.valid = newValue;
+    this.invalid = !this.valid;
+    // We need to send valid event even if it is the same value
+    this.inputValid.emit(this.valid);
+  }
   /*************
    * Lifecycle *
    *************/
@@ -3205,7 +3442,8 @@ const MgInputText = class {
     this.characterLeftId = `${this.identifier}-character-left`;
     // Validate
     this.validateIcon(this.icon);
-    this.validatePattern();
+    this.validatePattern(this.pattern);
+    this.validatePattern(this.patternErrorMessage);
     this.validateAppendSlot();
     // Check validity when component is ready
     // return a promise to process action only in the FIRST render().
@@ -3234,7 +3472,9 @@ const MgInputText = class {
     "icon": ["validateIcon"],
     "required": ["handleValidityChange"],
     "readonly": ["handleValidityChange"],
-    "disabled": ["handleValidityChange"]
+    "disabled": ["handleValidityChange"],
+    "pattern": ["validatePattern"],
+    "patternErrorMessage": ["validatePattern"]
   }; }
 };
 MgInputText.style = mgInputTextCss;
@@ -3292,35 +3532,27 @@ const MgInputTextarea = class {
      */
     this.checkValidity = () => {
       var _a;
-      this.valid = this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined && this.input.checkValidity() && this.getPatternValidity());
-      this.invalid = !this.valid;
-      // We need to send valid event even if it is the same value
-      this.inputValid.emit(this.valid);
+      this.setValidity(this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined && this.input.checkValidity() && this.getPatternValidity()));
     };
     /**
      * Set input error message
+     * @param errorMessage - errorMessage override
      */
-    this.setErrorMessage = () => {
+    this.setErrorMessage = (errorMessage) => {
       // Set error message
       this.errorMessage = undefined;
       // Does not match pattern
-      if (!this.valid && !this.getPatternValidity()) {
-        this.errorMessage = this.patternErrorMessage;
-      }
-      // required
-      else if (!this.valid && this.input.validity.valueMissing) {
-        this.errorMessage = this.messages.errors.required;
-      }
-    };
-    /**
-     * Validate pattern configuration
-     */
-    this.validatePattern = () => {
-      if (this.pattern !== undefined &&
-        typeof this.pattern === 'string' &&
-        this.pattern !== '' &&
-        (this.patternErrorMessage === undefined || typeof this.patternErrorMessage !== 'string' || this.patternErrorMessage === '')) {
-        throw new Error('<mg-input-textarea> prop "pattern" must be paired with the prop "patternErrorMessage"');
+      if (!this.valid) {
+        if (errorMessage !== undefined) {
+          this.errorMessage = errorMessage;
+        }
+        else if (!this.getPatternValidity()) {
+          this.errorMessage = this.patternErrorMessage;
+        }
+        // required
+        else if (this.input.validity.valueMissing) {
+          this.errorMessage = this.messages.errors.required;
+        }
       }
     };
     this.value = undefined;
@@ -3361,6 +3593,11 @@ const MgInputTextarea = class {
       }
     }
   }
+  validatePattern(newValue) {
+    if (newValue !== undefined && !(isValidString(this.pattern) && isValidString(this.patternErrorMessage))) {
+      throw new Error('<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
+    }
+  }
   validateDisplayCharacterLeft(newValue) {
     if (newValue) {
       this.classCollection.add(this.classHasDisplayCharacterLeft);
@@ -3370,13 +3607,44 @@ const MgInputTextarea = class {
     }
   }
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   async displayError() {
     this.checkValidity();
     this.setErrorMessage();
     this.hasDisplayedError = this.invalid;
   }
+  /**
+   * 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
+   */
+  async setError(valid, errorMessage) {
+    if (typeof valid !== 'boolean') {
+      throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean');
+    }
+    else if (typeof errorMessage !== 'string' || errorMessage.trim() === '') {
+      throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string');
+    }
+    else {
+      this.setValidity(valid);
+      this.setErrorMessage(valid ? undefined : errorMessage);
+      this.hasDisplayedError = this.invalid;
+    }
+  }
+  /**
+   * Method to set validity values
+   * @param newValue - valid new value
+   */
+  setValidity(newValue) {
+    this.valid = newValue;
+    this.invalid = !this.valid;
+    // We need to send valid event even if it is the same value
+    this.inputValid.emit(this.valid);
+  }
   /*************
    * Lifecycle *
    *************/
@@ -3390,7 +3658,8 @@ const MgInputTextarea = class {
     this.characterLeftId = `${this.identifier}-character-left`;
     // Validate
     this.validateDisplayCharacterLeft(this.displayCharacterLeft);
-    this.validatePattern();
+    this.validatePattern(this.pattern);
+    this.validatePattern(this.patternErrorMessage);
     // Check validity when component is ready
     // return a promise to process action only in the FIRST render().
     // https://stenciljs.com/docs/component-lifecycle#componentwillload
@@ -3419,6 +3688,8 @@ const MgInputTextarea = class {
     "required": ["handleValidityChange"],
     "readonly": ["handleValidityChange"],
     "disabled": ["handleValidityChange"],
+    "pattern": ["validatePattern"],
+    "patternErrorMessage": ["validatePattern"],
     "displayCharacterLeft": ["validateDisplayCharacterLeft"]
   }; }
 };
@@ -4695,11 +4966,9 @@ const MgPanel = class {
       throw new Error('<mg-panel> prop "panelTitle" is required.');
     this.titleChange.emit(newValue);
   }
-  validatetitlePattern(newValue) {
+  validateTitlePattern(newValue) {
     if (newValue !== undefined && !this.titleEditable)
-      throw new Error('<mg-panel> prop "titleEditable" must be set to `true`.');
-    if (newValue !== undefined && (this.titlePatternErrorMessage === undefined || this.titlePatternErrorMessage.trim() === ''))
-      throw new Error('<mg-panel> prop "titlePattern" must be paired with the prop "titlePatternErrorMessage".');
+      throw new Error(`<mg-panel> prop "titleEditable" must be set to "true".`);
   }
   validateTitlePosition(newValue) {
     if (!titlePositions.includes(newValue))
@@ -4724,7 +4993,8 @@ const MgPanel = class {
     // Get locales
     this.messages = initLocales(this.element).messages;
     // Validate
-    this.validatetitlePattern(this.titlePattern);
+    this.validateTitlePattern(this.titlePattern);
+    this.validateTitlePattern(this.titlePatternErrorMessage);
     this.validatePanelTitle(this.panelTitle);
     this.validateExpandToggleDisplay(this.expandToggleDisplay);
     this.validateTitlePosition(this.titlePosition);
@@ -4748,7 +5018,8 @@ const MgPanel = class {
   get element() { return getElement(this); }
   static get watchers() { return {
     "panelTitle": ["validatePanelTitle"],
-    "titlePattern": ["validatetitlePattern"],
+    "titlePattern": ["validateTitlePattern"],
+    "titlePatternErrorMessage": ["validateTitlePattern"],
     "titlePosition": ["validateTitlePosition"],
     "expanded": ["handleExpanded"],
     "expandToggleDisplay": ["validateExpandToggleDisplay"]
@@ -6608,21 +6879,27 @@ const MgPopover = class {
      * Render popover content element
      */
     this.renderPopoverContent = () => {
-      this.mgPopoverContent = document.createElement('mg-popover-content');
-      this.mgPopoverContent.setAttribute('slot', 'content');
-      this.mgPopoverContent.setAttribute('id', this.identifier);
-      this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);
-      const arrow = document.createElement('div');
-      arrow.setAttribute('slot', 'arrow');
-      arrow.dataset.popperArrow = '';
-      this.mgPopoverContent.appendChild(arrow);
-      // insert elements in DOM
-      ['[slot="title"]', '[slot="content"]:not(mg-popover-content)'].forEach(slotType => {
-        Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {
-          this.mgPopoverContent.appendChild(slot);
+      const mgPopoverContent = this.element.querySelector('mg-popover-content');
+      if (mgPopoverContent === null) {
+        this.mgPopoverContent = document.createElement('mg-popover-content');
+        this.mgPopoverContent.setAttribute('slot', 'content');
+        this.mgPopoverContent.setAttribute('id', this.identifier);
+        this.mgPopoverContent.addEventListener('hide-content', this.handleHideContent);
+        const arrow = document.createElement('div');
+        arrow.setAttribute('slot', 'arrow');
+        arrow.dataset.popperArrow = '';
+        this.mgPopoverContent.appendChild(arrow);
+        // insert elements in DOM
+        ['[slot="title"]', '[slot="content"]:not(mg-popover-content)'].forEach(slotType => {
+          Array.from(this.element.querySelectorAll(slotType)).forEach(slot => {
+            this.mgPopoverContent.appendChild(slot);
+          });
         });
-      });
-      this.element.appendChild(this.mgPopoverContent);
+        this.element.appendChild(this.mgPopoverContent);
+      }
+      else {
+        mgPopoverContent.setAttribute('id', this.identifier);
+      }
     };
     this.identifier = createID('mg-popover');
     this.placement = 'bottom';
@@ -6631,6 +6908,10 @@ const MgPopover = class {
     this.display = false;
     this.disabled = false;
   }
+  validateIdentifier() {
+    // use renderPopoverContent to update popover-content id
+    this.renderPopoverContent();
+  }
   validateArrowHide(newValue) {
     if (newValue)
       this.mgPopoverContent.dataset.arrowHide = '';
@@ -6667,6 +6948,7 @@ const MgPopover = class {
     // render mg-popover-content slot
     this.renderPopoverContent();
     this.validateCloseButton(this.closeButton);
+    this.validateIdentifier();
     this.validateArrowHide(this.arrowHide);
   }
   /**
@@ -6691,6 +6973,12 @@ const MgPopover = class {
             offset: [0, 0],
           },
         },
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: ['auto'],
+          },
+        },
       ],
     });
     // add resize observer
@@ -6720,6 +7008,7 @@ const MgPopover = class {
   }
   get element() { return getElement(this); }
   static get watchers() { return {
+    "identifier": ["validateIdentifier"],
     "arrowHide": ["validateArrowHide"],
     "closeButton": ["validateCloseButton"],
     "display": ["handleDisplay"]
@@ -7302,6 +7591,12 @@ const MgTooltip = class {
               offset: [0, 8],
             },
           },
+          {
+            name: 'flip',
+            options: {
+              fallbackPlacements: ['auto'],
+            },
+          },
         ],
       });
       // Manage tooltipedElement focus/blur events
@@ -7339,6 +7634,10 @@ const MgTooltip = class {
     this.display = false;
     this.disabled = false;
   }
+  validateIdentifier() {
+    // use renderTooltipContent to update tooltip-content id
+    this.renderTooltipContent();
+  }
   validateMessage(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
       throw new Error('<mg-tooltip> prop "message" is required.');
@@ -7364,16 +7663,22 @@ const MgTooltip = class {
   /**
    * Render tooltip content element
    */
-  renderTooltip() {
-    const mgTooltipContent = document.createElement('mg-tooltip-content');
-    mgTooltipContent.setAttribute('slot', 'content');
-    mgTooltipContent.setAttribute('id', this.identifier);
-    const arrow = document.createElement('div');
-    arrow.setAttribute('slot', 'arrow');
-    arrow.dataset.popperArrow = '';
-    mgTooltipContent.appendChild(arrow);
-    // append tooltip element to component
-    this.element.appendChild(mgTooltipContent);
+  renderTooltipContent() {
+    const mgTooltipContent = this.element.querySelector('mg-tooltip-content');
+    if (mgTooltipContent === null) {
+      const mgTooltipContent = document.createElement('mg-tooltip-content');
+      mgTooltipContent.setAttribute('slot', 'content');
+      mgTooltipContent.setAttribute('id', this.identifier);
+      const arrow = document.createElement('div');
+      arrow.setAttribute('slot', 'arrow');
+      arrow.dataset.popperArrow = '';
+      mgTooltipContent.appendChild(arrow);
+      // append tooltip element to component
+      this.element.appendChild(mgTooltipContent);
+    }
+    else {
+      mgTooltipContent.setAttribute('id', this.identifier);
+    }
   }
   /*************
    * Lifecycle *
@@ -7385,11 +7690,12 @@ const MgTooltip = class {
     // Get windows to attach events
     this.windows = getWindows(window);
     // Get tooltip element
-    this.renderTooltip();
+    this.renderTooltipContent();
     this.mgTooltipContent = this.element.querySelector(`#${this.identifier}`);
     //validate properties
     this.validateDisabled(this.disabled);
     this.validateMessage(this.message);
+    this.validateIdentifier();
   }
   /**
    * Get slotted element
@@ -7437,6 +7743,7 @@ const MgTooltip = class {
   }
   get element() { return getElement(this); }
   static get watchers() { return {
+    "identifier": ["validateIdentifier"],
     "message": ["validateMessage"],
     "display": ["handleDisplay"],
     "disabled": ["validateDisabled"]