@mgdis/mg-components 5.16.0 → 5.18.0

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-1d40b052.js';
-import { i as initLocales, D as Direction, l as localeDate, d as dateRegExp, a as localeCurrency, b as localeNumber, s as sizes$2 } from './mg-menu.conf-2cc079ae.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-ce01e63b.js';
+import { i as initLocales, D as Direction, l as localeDate, d as dateRegExp, a as localeCurrency, b as localeNumber, s as sizes$2 } from './mg-menu.conf-012fc9b4.js';
 
 /**
  * Available menu-item positions
@@ -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)}";
 
@@ -217,7 +223,7 @@ const MgActionMore = class {
       this.expanded = false;
       customHandler(event);
     };
-    this.icon = { icon: 'ellipsis' };
+    this.icon = undefined;
     this.button = { variant: 'flat', isIcon: true };
     this.items = undefined;
     this.displayChevron = undefined;
@@ -227,6 +233,9 @@ const MgActionMore = class {
     if (newValue && !isMgActionMoreIcon(newValue)) {
       throw new Error(`<${this.name}> prop icon must match MgActionMoreIconType.`);
     }
+    else if (!Boolean(newValue === null || newValue === void 0 ? void 0 : newValue.icon) && Boolean(this.button.isIcon)) {
+      this.icon = { icon: 'ellipsis' };
+    }
   }
   validateButton(newValue) {
     if (newValue && !isMgActionMoreButton(newValue)) {
@@ -270,7 +279,7 @@ const MgActionMore = class {
           'mg-a11y-animation': true,
         } }, h("mg-icon", { icon: "chevron-down", size: "small" })));
     }
-    return (h(Host, { "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { class: "mg-action-more" }, h("mg-popover", { identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { variant: this.button.variant, isIcon: this.button.isIcon, type: "button", label: buttonLabel, onClick: this.handleButton }, h("mg-icon", Object.assign({}, this.icon)), !this.button.isIcon && buttonContent), h("div", { slot: "content" }, h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
+    return (h(Host, { "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { class: "mg-action-more" }, h("mg-popover", { identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { variant: this.button.variant, isIcon: this.button.isIcon, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({}, this.icon)), !this.button.isIcon && buttonContent), h("div", { slot: "content" }, h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
       var _a;
       return (
       // eslint-disable-next-line react/jsx-no-bind
@@ -788,7 +797,7 @@ const MgForm = class {
     this.setRequiredMessage();
   }
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   async displayError() {
     if (!this.readonly) {
@@ -996,6 +1005,7 @@ const iconList = [
 	"list",
 	"loader",
 	"location",
+	"location-outline",
 	"lock",
 	"log-in",
 	"log-out",
@@ -1004,10 +1014,13 @@ const iconList = [
 	"mail-outline",
 	"messages-square",
 	"messages-square-outline",
+	"mobile",
+	"mobile-outline",
 	"notes",
 	"notes-outline",
 	"paper-plane",
 	"paper-plane-slash",
+	"paperclip",
 	"pen",
 	"pen-circle",
 	"pen-fancy",
@@ -1015,6 +1028,7 @@ const iconList = [
 	"pen-fancy-outline",
 	"pen-outline",
 	"phone",
+	"phone-outline",
 	"picture",
 	"play-circle",
 	"plus",
@@ -1175,7 +1189,8 @@ const icons = {
 'link': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M9.75 6.25a3.748 3.748 0 0 1 0 5.31l-1.66 1.67a3.76 3.76 0 0 1-5.32 0 3.76 3.76 0 0 1 0-5.32l.92-.92c.15-.15.4-.16.56 0 .07.07.11.16.12.26.02.44.1.88.24 1.3.05.14.01.3-.09.41l-.32.32c-.72.67-.76 1.8-.09 2.52s1.8.76 2.52.09c.03-.02.05-.05.07-.07l1.66-1.66a1.775 1.775 0 0 0-.26-2.73.394.394 0 0 1-.17-.31.98.98 0 0 1 .29-.74l.52-.52c.14-.14.35-.15.51-.04.18.13.35.27.51.43Zm3.49-3.48a3.76 3.76 0 0 0-5.32 0L6.26 4.43a3.772 3.772 0 0 0 .52 5.75c.16.11.37.09.51-.04l.52-.52c.2-.19.3-.46.29-.74a.38.38 0 0 0-.17-.31 1.775 1.775 0 0 1-.26-2.73l1.66-1.66c.68-.71 1.81-.74 2.52-.06.71.68.74 1.81.06 2.52-.02.03-.05.05-.07.07l-.32.32c-.11.11-.14.27-.09.41.14.42.22.86.24 1.3 0 .22.19.39.41.38.1 0 .19-.05.26-.12l.92-.92a3.76 3.76 0 0 0 0-5.32Z"/></svg>',
 'list': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M1.9 2.68c-.67 0-1.22.56-1.21 1.23 0 .67.56 1.22 1.23 1.21.67 0 1.22-.56 1.21-1.23 0-.32-.13-.63-.36-.86-.23-.23-.54-.36-.87-.35Zm0 4.09a1.23 1.23 0 1 0 0 2.46 1.23 1.23 0 1 0 0-2.46Zm0 4.09a1.23 1.23 0 1 0 0 2.46 1.23 1.23 0 1 0 0-2.46Zm13 .41H5.18c-.23 0-.41.18-.41.41v.82c0 .23.18.41.41.41h9.75c.23 0 .41-.18.41-.41v-.82c0-.23-.18-.41-.41-.41h-.03Zm0-8.18H5.18c-.23 0-.41.18-.41.41v.81c0 .23.18.41.41.41h9.75c.23 0 .41-.18.41-.41V3.5c0-.23-.18-.41-.41-.41h-.03Zm0 4.09H5.18c-.23 0-.41.18-.41.41v.82c0 .23.18.41.41.41h9.75c.23 0 .41-.18.41-.41v-.82c0-.23-.18-.41-.41-.41h-.03Z"/></svg>',
 'loader': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 2.67A5.33 5.33 0 1 1 2.67 8 5.33 5.33 0 0 1 8 2.67m0-2A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67Z" opacity=".2"/><path fill="currentColor" d="M8 2.67v-2A7.33 7.33 0 0 0 .67 8h2A5.33 5.33 0 0 1 8 2.67Z"/></svg>',
-'location': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 .67A5.1 5.1 0 0 0 2.67 5.5c0 3.06 3.51 7.88 4.83 9.59a.64.64 0 0 0 1 0c1.32-1.71 4.83-6.53 4.83-9.59A5.1 5.1 0 0 0 8 .67Zm0 6.94a1.74 1.74 0 1 1 1.74-1.73A1.73 1.73 0 0 1 8 7.61Z"/></svg>',
+'location': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8 14.996c2.5-2.5 5-6.235 5-8.996A5 5 0 0 0 3 6c0 2.761 2.5 6.496 5 8.996Zm0-7.498a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/></svg>',
+'location-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M10 6.002a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm-1 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"/><path fill="currentColor" fill-rule="evenodd" d="M13 6.002c0 2.506-2.06 5.814-4.309 8.273-.229.25-.46.492-.691.723a22.477 22.477 0 0 1-.691-.723C5.059 11.816 3 8.508 3 6.002a5 5 0 0 1 10 0Zm-1 0c0 1.116-.52 2.554-1.424 4.088A21.484 21.484 0 0 1 8 13.55a21.483 21.483 0 0 1-2.576-3.459C4.52 8.556 4 7.118 4 6.002a4 4 0 1 1 8 0Z"/></svg>',
 'lock': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12 5.56h-.67v-1.4C11.37 2.28 9.88.71 8 .67 6.12.71 4.63 2.28 4.67 4.16v1.4H4c-.75.02-1.35.64-1.33 1.39V14c.02.73.6 1.31 1.33 1.33h8c.75-.02 1.35-.64 1.33-1.39V7a1.37 1.37 0 0 0-1.28-1.44H12Zm-4 6.28c-.77.04-1.43-.56-1.47-1.33-.04-.77.56-1.43 1.33-1.47.77-.04 1.43.56 1.47 1.33v.07c.02.75-.57 1.38-1.32 1.4H8Zm2.07-6.28H5.93v-1.4A2.12 2.12 0 0 1 8 2c1.17.03 2.1 1 2.07 2.17v1.39Z"/></svg>',
 'log-in': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m10.97 7.78-4-4a.29.29 0 0 0-.42 0c-.07.06-.12.15-.13.24v2.07c0 .17-.13.3-.3.32H1.97c-.16 0-.29.12-.3.28v2.58c0 .16.12.29.28.3h4.16c.17 0 .3.14.3.31v2.14c0 .16.12.29.28.3.11.01.21-.03.28-.11l4-4c.11-.12.11-.3 0-.42Zm3.37 5.26v1c0 .16-.13.28-.28.28H9.29a.28.28 0 0 1-.28-.28v-1c0-.16.13-.28.28-.28h3.43V3.3H9.3a.29.29 0 0 1-.29-.29V1.97c0-.16.13-.29.29-.29h4.76c.16 0 .29.13.29.29v11.07Z"/></svg>',
 'log-out': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m14.25 7.77-4-4a.31.31 0 0 0-.43 0A.34.34 0 0 0 9.7 4v2.07a.32.32 0 0 1-.3.32H5.23a.3.3 0 0 0-.3.3v2.56a.3.3 0 0 0 .3.3H9.4a.31.31 0 0 1 .3.31V12a.3.3 0 0 0 .3.3.33.33 0 0 0 .23-.09l4-4a.29.29 0 0 0 .02-.44Z"/><path fill="currentColor" d="M6.71 12.72H3.27V3.26h3.42A.31.31 0 0 0 7 3V2a.3.3 0 0 0-.31-.3H2a.29.29 0 0 0-.33.3v12a.27.27 0 0 0 .1.24.32.32 0 0 0 .14.08h4.8A.3.3 0 0 0 7 14v-1a.3.3 0 0 0-.29-.28Z"/></svg>',
@@ -1184,17 +1199,21 @@ const icons = {
 'mail-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M1 3.999V12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3.999A.999.999 0 0 0 14.001 3H2a.999.999 0 0 0-1 .999Zm13 .713-6 4.28-6-4.28V12h12V4.712ZM2.724 4 8 7.764 13.276 4H2.724Z" clip-rule="evenodd"/></svg>',
 'messages-square': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M12 10v1.017a1 1 0 0 1-1.006 1L8 12l-4 2v-1.978H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-1Zm1-6H5v1h6a1 1 0 0 1 1 1v3h1V4Zm-3 3H4v1h6V7ZM4 9h3v1H4V9Z" clip-rule="evenodd"/></svg>',
 'messages-square-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M4 7h6v1H4V7Zm0 2h3v1H4V9Z"/><path fill="currentColor" fill-rule="evenodd" d="M12 11.017V10h1a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v1H3a1 1 0 0 0-1 1v5.022a1 1 0 0 0 1 1h1V14l4-2 2.994.017a1 1 0 0 0 1.006-1ZM5 4h8v5h-1V6a1 1 0 0 0-1-1H5V4Zm0 8.382 2.767-1.383 3.233.018V6H3v5.022h2v1.36Z" clip-rule="evenodd"/></svg>',
+'mobile': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2Zm4 10a1 1 0 1 1 2 0 1 1 0 0 1-2 0ZM6 3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Z"/></svg>',
+'mobile-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M7 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0ZM6 3.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5Z"/><path fill="currentColor" fill-rule="evenodd" d="M4 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H4Zm8 1H4v12h8V2Z"/></svg>',
 'notes': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12.6 2.76v-.43c0-.75-.53-1.28-1.28-1.28H2.33c-.75 0-1.28.53-1.28 1.28v8.99c0 .75.53 1.28 1.28 1.28h.39V4.05c0-.75.53-1.28 1.28-1.28h8.6Z"/><path fill="currentColor" d="M13.67 3.4H4.68c-.75 0-1.28.53-1.28 1.28v8.99c0 .75.53 1.28 1.28 1.28h6.42V11.1h3.85V4.68c0-.75-.53-1.28-1.28-1.28Zm-4.49 7.06H5.97V9.18h3.21v1.28Zm3.21-2.57H5.97V6.61h6.42v1.28Z"/><path fill="currentColor" d="m11.74 14.42 2.68-2.68h-2.68v2.68z"/></svg>',
 'notes-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M13.11 4.74v5.38h-3v3H4.73V4.74h8.38m0-1.2H4.73a1.2 1.2 0 0 0-1.2 1.2v8.38a1.2 1.2 0 0 0 1.2 1.19h6l3.59-3.59v-6a1.2 1.2 0 0 0-1.21-1.18Zm-4.19 6.58h-3V8.93h3Zm3-2.39h-6v-1.2h6ZM3.8 11.19h-1V2.81h8.38v1h1.2v-1a1.2 1.2 0 0 0-1.2-1.2H2.81a1.2 1.2 0 0 0-1.2 1.2v8.38a1.2 1.2 0 0 0 1.2 1.2h1Z"/></svg>',
 'paper-plane': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M14 1.69 1.84 7a.28.28 0 0 0-.15.36.29.29 0 0 0 .16.15l3.27 1.82a.57.57 0 0 0 .61-.06l6.45-5.57c.05 0 .15-.1.19-.06s0 .14-.06.18l-5.59 6.29a.52.52 0 0 0 0 .63l2.09 3.44a.28.28 0 0 0 .37.12.3.3 0 0 0 .13-.12l5-12.11a.3.3 0 0 0-.14-.37.28.28 0 0 0-.17-.01Z"/></svg>',
 'paper-plane-slash': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m2.67 1.69 11.59 11.59-1 1-2.79-2.8-1.1 2.67a.3.3 0 0 1-.13.12.28.28 0 0 1-.37-.12l-2.12-3.41a.52.52 0 0 1 0-.63L7.82 8.9l-.76-.76-1.3 1.13a.57.57 0 0 1-.61.06L1.88 7.51a.29.29 0 0 1-.16-.15.28.28 0 0 1 .15-.36l2.81-1.24-3-3Zm11.53 0a.28.28 0 0 0-.22 0L7.53 4.51l1.73 1.73 3-2.54s.15-.1.19-.06 0 .14-.06.18L9.75 6.73l1.88 1.88 2.71-6.54a.3.3 0 0 0-.14-.37Z"/></svg>',
+'paperclip': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m6.57 12.358 6.09-6.09a1.035 1.035 0 1 0-1.465-1.463l-5.32 5.32-.733-.731 5.321-5.321A2.07 2.07 0 1 1 13.391 7l-5.339 5.34-.006.006-.744.744A3.106 3.106 0 0 1 2.91 8.698L9.608 2l.732.732L3.642 9.43a2.07 2.07 0 1 0 2.928 2.928Z"/></svg>',
 'pen': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12.295 2.293a1 1 0 0 0-1.414 0L9.467 3.707l2.828 2.829 1.414-1.415a1 1 0 0 0 0-1.414l-1.414-1.414ZM8.756 4.417l2.829 2.829-6.757 6.756L2.003 14 2 11.174l6.756-6.757Z"/></svg>',
 'pen-circle': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 .44C3.82.44.44 3.82.44 8S3.83 15.56 8 15.56s7.56-3.39 7.56-7.56C15.56 3.82 12.18.44 8 .44M5.47 12.19H3.62v-1.85l5.46-5.45 1.85 1.86-5.45 5.45Zm6.88-6.89-.9.9-1.86-1.85.9-.9c.19-.19.51-.19.7 0l1.16 1.15c.19.19.19.51 0 .7"/></svg>',
 'pen-fancy': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M3.63 8.65c-.24.07-.43.26-.5.5l-1.46 4.37.11.12 2.3-2.3v-.19c0-.44.35-.8.79-.81.44 0 .8.35.81.79 0 .44-.35.8-.79.81h-.21l-2.3 2.3.12.11 4.37-1.46c.24-.07.43-.26.5-.5l.82-2.08L5.7 7.83l-2.07.82Zm7.17-6.3L6.27 7.28 8.69 9.7l4.94-4.52c2.1-1.86-.99-4.92-2.83-2.83Z"/></svg>',
 'pen-fancy-files-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12 2H6v10h6V8.946l.023-.058.085-.078.892-.813V12a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v.112a2.298 2.298 0 0 0-.974.66L12 2.8V2Zm1 4.643-1 .913-.566.515-1.528-1.524L12 4.275l.767-.832c.075-.085.153-.156.233-.215 1.167-.857 2.796.9 1.555 1.997L13 6.643ZM4 3H3v11.5a.5.5 0 0 0 .5.5H11v-1H4V3Zm4.238 4.41a.466.466 0 0 0-.316.315L7 10.477l.07.076 1.452-1.449v-.12a.51.51 0 0 1 .5-.51.51.51 0 0 1 .511.498.51.51 0 0 1-.499.51h-.133L7.45 10.931l.075.069 2.76-.92a.466.466 0 0 0 .317-.314l.518-1.31-1.573-1.562-1.308.516Z"/></svg>',
 'pen-fancy-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12.24 1.67c-.49 0-1 .21-1.44.7L6.27 7.3l2.42 2.42 4.94-4.52c1.6-1.42.19-3.53-1.39-3.53ZM8.72 8.34 7.66 7.28l3.9-4.24c.22-.24.44-.36.69-.36.41 0 .87.34 1.03.78.14.37.04.7-.32 1.02L8.73 8.36ZM5.7 7.86l-2.08.82c-.24.08-.42.26-.5.5l-1.46 4.37.12.12.56.56.12.12 4.37-1.46c.24-.08.42-.26.5-.5l.81-2.08L5.7 7.87Zm-2.57 4.46L4 9.72c.03-.08.09-.15.17-.18l1.29-.51 1.52 1.52-.5 1.29c-.03.08-.1.15-.19.18l-2.6.87.95-.95c.06.02.12.04.19.04.44 0 .79-.35.79-.79s-.35-.79-.79-.79-.79.35-.79.79c0 .07.02.13.04.19l-.95.95Z"/></svg>',
 'pen-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12.295 2.293a1 1 0 0 0-1.414 0L9.467 3.707l2.828 2.829 1.414-1.415a1 1 0 0 0 0-1.414l-1.414-1.414Z"/><path fill="currentColor" fill-rule="evenodd" d="m2.003 13.999 2.825.003 6.757-6.756-2.829-2.829L2 11.174l.003 2.825ZM3 11.587l5.756-5.755 1.414 1.414-5.755 5.756L3.002 13 3 11.587Z" clip-rule="evenodd"/></svg>',
-'phone': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M13.97 10.62 11.2 9.43a.6.6 0 0 0-.69.17l-1.23 1.5A9.137 9.137 0 0 1 4.9 6.72l1.5-1.23c.21-.17.28-.45.17-.69L5.38 2.03a.589.589 0 0 0-.68-.34l-2.57.59a.59.59 0 0 0-.46.58c0 6.34 5.14 11.48 11.48 11.48.28 0 .52-.19.58-.46l.59-2.57a.595.595 0 0 0-.35-.68Z"/></svg>',
+'phone': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="m10 10.53 1.034-1.035a1.01 1.01 0 0 1 1.08-.221l1.259.503A1.006 1.006 0 0 1 14 10.7v2.308a1.002 1.002 0 0 1-1.052.992C4.124 13.45 2.343 5.974 2.006 3.112A1.002 1.002 0 0 1 3.007 2h2.228a.996.996 0 0 1 .923.628l.503 1.26a.997.997 0 0 1-.217 1.08L5.41 6.002s.595 4.029 4.59 4.527Z"/></svg>',
+'phone-outline': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M12.62 14h-.079C3.472 13.479 2.184 5.826 2.004 3.49A1.384 1.384 0 0 1 3.278 2h2.543a.923.923 0 0 1 .859.582l.701 1.726a.923.923 0 0 1-.203.997l-.983.992a4.325 4.325 0 0 0 3.499 3.508l1.001-.993a.923.923 0 0 1 1.002-.189l1.74.697a.923.923 0 0 1 .567.858v2.437A1.385 1.385 0 0 1 12.62 14ZM3.389 2.923a.462.462 0 0 0-.462.462v.037c.213 2.732 1.574 9.193 9.665 9.655a.46.46 0 0 0 .49-.434v-2.465l-1.74-.696-1.325 1.315-.222-.028c-4.015-.503-4.56-4.518-4.56-4.56l-.028-.221 1.311-1.325-.692-1.74H3.389Z"/></svg>',
 'picture': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M14.33 12.93V3.07a1.4 1.4 0 0 0-1.4-1.4H3.07a1.4 1.4 0 0 0-1.4 1.4v9.86a1.4 1.4 0 0 0 1.4 1.4h9.86a1.4 1.4 0 0 0 1.4-1.4ZM5.54 9.06l1.76 2.11L9.76 8l3.17 4.22H3.07Z"/></svg>',
 'play-circle': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M8 .67A7.33 7.33 0 1 0 15.33 8 7.33 7.33 0 0 0 8 .67Zm3.42 8-5.2 3a.72.72 0 0 1-1-.28.73.73 0 0 1-.09-.35V4.92a.71.71 0 0 1 .71-.71 1.06 1.06 0 0 1 .35.09l5.2 3.17a.71.71 0 0 1 .27 1 .64.64 0 0 1-.24.24Z"/></svg>',
 'plus': '<svg aria-hidden="true" viewBox="0 0 16 16"><path fill="currentColor" d="M9.41 6.59V1.92a.24.24 0 0 0-.24-.25H6.84a.24.24 0 0 0-.25.24v4.68H1.92a.24.24 0 0 0-.25.24v2.33a.24.24 0 0 0 .24.25h4.68v4.67a.24.24 0 0 0 .24.25h2.33a.24.24 0 0 0 .25-.24V9.41h4.67a.24.24 0 0 0 .25-.24V6.84a.24.24 0 0 0-.24-.25H9.41Z"/></svg>',
@@ -1573,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
@@ -1672,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
@@ -1693,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
@@ -1711,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;
@@ -1752,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') {
@@ -1786,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();
@@ -1799,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
@@ -2062,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
@@ -2094,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
@@ -2161,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 *
    *************/
@@ -2265,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 {
@@ -2372,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;
@@ -2428,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
@@ -2522,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;
@@ -2570,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 *
    *************/
@@ -2653,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;
+        }
       }
     };
     /**
@@ -2724,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 *
    *************/
@@ -2879,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;
+        }
       }
     };
     /**
@@ -2975,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 *
    *************/
@@ -3076,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
@@ -3096,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
      */
@@ -3165,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
    */
@@ -3172,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 *
    *************/
@@ -3192,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().
@@ -3221,7 +3472,9 @@ const MgInputText = class {
     "icon": ["validateIcon"],
     "required": ["handleValidityChange"],
     "readonly": ["handleValidityChange"],
-    "disabled": ["handleValidityChange"]
+    "disabled": ["handleValidityChange"],
+    "pattern": ["validatePattern"],
+    "patternErrorMessage": ["validatePattern"]
   }; }
 };
 MgInputText.style = mgInputTextCss;
@@ -3279,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;
@@ -3348,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);
@@ -3357,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 *
    *************/
@@ -3377,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
@@ -3406,6 +3688,8 @@ const MgInputTextarea = class {
     "required": ["handleValidityChange"],
     "readonly": ["handleValidityChange"],
     "disabled": ["handleValidityChange"],
+    "pattern": ["validatePattern"],
+    "patternErrorMessage": ["validatePattern"],
     "displayCharacterLeft": ["validateDisplayCharacterLeft"]
   }; }
 };
@@ -4682,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))
@@ -4711,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);
@@ -4735,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"]
@@ -6595,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';
@@ -6618,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 = '';
@@ -6654,6 +6948,7 @@ const MgPopover = class {
     // render mg-popover-content slot
     this.renderPopoverContent();
     this.validateCloseButton(this.closeButton);
+    this.validateIdentifier();
     this.validateArrowHide(this.arrowHide);
   }
   /**
@@ -6678,6 +6973,12 @@ const MgPopover = class {
             offset: [0, 0],
           },
         },
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: ['auto'],
+          },
+        },
       ],
     });
     // add resize observer
@@ -6707,6 +7008,7 @@ const MgPopover = class {
   }
   get element() { return getElement(this); }
   static get watchers() { return {
+    "identifier": ["validateIdentifier"],
     "arrowHide": ["validateArrowHide"],
     "closeButton": ["validateCloseButton"],
     "display": ["handleDisplay"]
@@ -7289,6 +7591,12 @@ const MgTooltip = class {
               offset: [0, 8],
             },
           },
+          {
+            name: 'flip',
+            options: {
+              fallbackPlacements: ['auto'],
+            },
+          },
         ],
       });
       // Manage tooltipedElement focus/blur events
@@ -7326,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.');
@@ -7351,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 *
@@ -7372,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
@@ -7424,6 +7743,7 @@ const MgTooltip = class {
   }
   get element() { return getElement(this); }
   static get watchers() { return {
+    "identifier": ["validateIdentifier"],
     "message": ["validateMessage"],
     "display": ["handleDisplay"],
     "disabled": ["validateDisabled"]
@@ -7452,3 +7772,5 @@ const MgTooltipContent = class {
 MgTooltipContent.style = mgTooltipContentCss;
 
 export { MgActionMore as mg_action_more, MgBadge as mg_badge, MgButton as mg_button, MgCard as mg_card, MgCharacterLeft as mg_character_left, MgDetails as mg_details, MgDivider as mg_divider, MgForm as mg_form, MgIcon as mg_icon, MgIllustratedMessage as mg_illustrated_message, MgInputCheckbox as mg_input_checkbox, MgInputCheckboxPaginated as mg_input_checkbox_paginated, MgInputDate as mg_input_date, MgInputNumeric as mg_input_numeric, MgInputPassword as mg_input_password, MgInputRadio as mg_input_radio, MgInputSelect as mg_input_select, MgInputText as mg_input_text, MgInputTextarea as mg_input_textarea, MgInputTitle as mg_input_title, MgInputToggle as mg_input_toggle, MgMenu as mg_menu, MgMenuItem as mg_menu_item, MgMessage as mg_message, MgModal as mg_modal, MgPagination as mg_pagination, MgPanel as mg_panel, MgPopover as mg_popover, MgPopoverContent as mg_popover_content, MgSkipLinks as mg_skip_links, MgTabs as mg_tabs, MgTag as mg_tag, MgTooltip as mg_tooltip, MgTooltipContent as mg_tooltip_content };
+
+//# sourceMappingURL=mg-action-more_34.entry.js.map