@mgdis/mg-components 5.14.0 → 5.16.0

package/dist/components/mg-action-more.js

@@ -1,14 +1,15 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { i as initLocales } from './index2.js';
-import { S as Status, d as defineCustomElement$3 } from './mg-menu-item2.js';
+import { S as Status, d as defineCustomElement$4 } from './mg-menu-item2.js';
 import { D as Direction } from './mg-menu.conf.js';
 import { c as createID } from './components.utils.js';
-import { d as defineCustomElement$8 } from './mg-badge2.js';
-import { d as defineCustomElement$7 } from './mg-button2.js';
-import { d as defineCustomElement$6 } from './mg-card2.js';
-import { d as defineCustomElement$5 } from './mg-icon2.js';
-import { d as defineCustomElement$4 } from './mg-menu2.js';
-import { d as defineCustomElement$2 } from './mg-popover2.js';
+import { d as defineCustomElement$9 } from './mg-badge2.js';
+import { d as defineCustomElement$8 } from './mg-button2.js';
+import { d as defineCustomElement$7 } from './mg-card2.js';
+import { d as defineCustomElement$6 } from './mg-icon2.js';
+import { d as defineCustomElement$5 } from './mg-menu2.js';
+import { d as defineCustomElement$3 } from './mg-popover2.js';
+import { d as defineCustomElement$2 } from './mg-popover-content2.js';
 
 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)}";
 
@@ -50,7 +51,7 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.name = 'mg-action-more';
     this.mgPopoverIdentifier = createID(this.name);
     /************
-     * Merthods *
+     * Methods *
      ***********/
     /**
      * Toogle expanded props
@@ -58,6 +59,13 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.toggleExpanded = () => {
       this.expanded = !this.expanded;
     };
+    /**
+     * Handle popover display change value
+     * @param event - display change updated value
+     */
+    this.handleDisplayChange = (event) => {
+      this.expanded = event.detail;
+    };
     /**
      * Button click handler
      */
@@ -126,7 +134,7 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
           '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 }, 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 }, 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
@@ -152,7 +160,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["mg-action-more", "mg-badge", "mg-button", "mg-card", "mg-icon", "mg-menu", "mg-menu-item", "mg-popover"];
+  const components = ["mg-action-more", "mg-badge", "mg-button", "mg-card", "mg-icon", "mg-menu", "mg-menu-item", "mg-popover", "mg-popover-content"];
   components.forEach(tagName => { switch (tagName) {
     case "mg-action-more":
       if (!customElements.get(tagName)) {
@@ -161,35 +169,40 @@ function defineCustomElement$1() {
       break;
     case "mg-badge":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "mg-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "mg-card":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "mg-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "mg-menu":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "mg-menu-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "mg-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "mg-popover-content":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }

package/dist/components/mg-details.js

@@ -43,7 +43,7 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns HTML Element
    */
   render() {
-    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: "chevron-up", size: "small", class: { 'mg-details__toggle-icon': true, 'mg-details__toggle-icon--reverse': !this.expanded } }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
+    return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: "chevron-up", size: "small", class: { 'mg-details__toggle-icon': true, 'mg-details__toggle-icon--reverse': !this.expanded } }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));
   }
   static get watchers() { return {
     "toggleClosed": ["validateTitles"],

package/dist/components/mg-form.js

@@ -22,21 +22,34 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.classCollection.delete(this.classAllRequired);
       // If the form is disabled or readonly none of them are required
       // Check if all fields are not editable (readonly or disabled)
-      if (!this.disabled && !this.readonly && !this.mgInputs.every(input => input.disabled || input.readonly)) {
-        // Get required fields
-        const requiredInputs = this.mgInputs.filter(input => input.required && !input.disabled && !input.readonly);
-        // All fields are required
+      const isEditable = input => !(input.disabled || input.readonly);
+      const isMgInputToggle = input => input.nodeName === 'MG-INPUT-TOGGLE';
+      if (!this.disabled && !this.readonly && this.mgInputs.some(input => isEditable(input) && !isMgInputToggle(input))) {
+        // Get editable inputs
+        const editableInputs = this.mgInputs.filter(isEditable);
+        // Get required inputs
         // mg-input-toggle can not be required
-        if (requiredInputs.length > 0 && requiredInputs.length === this.mgInputs.filter(input => input.nodeName !== 'MG-INPUT-TOGGLE').length) {
-          this.requiredMessage = requiredInputs.length === 1 ? this.messages.form.allRequiredSingle : this.messages.form.allRequired;
+        const requiredInputs = editableInputs.filter(input => !isMgInputToggle(input) && input.required);
+        // All inputs are required
+        if ([requiredInputs.length, editableInputs.length].every(length => length === 1) ||
+          (requiredInputs.length > 1 && requiredInputs.length === editableInputs.filter(input => !isMgInputToggle(input)).length)) {
+          this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');
           this.classCollection.add(this.classAllRequired);
         }
         // Some fields are required
         else if (requiredInputs.length > 0) {
-          this.requiredMessage = requiredInputs.length === 1 ? this.messages.form.requiredSingle : this.messages.form.required;
+          this.requiredMessage = this.getRequiredMessageBasedOnCount(requiredInputs, 'requiredSingle', 'required');
         }
       }
     };
+    /**
+     * Returns a required message based on the count of required inputs.
+     * @param requiredInputs - An array of required input elements.
+     * @param keySingle - The key for the singular message format.
+     * @param keyPlural - The key for the plural message format.
+     * @returns The appropriate required message based on the count of required inputs.
+     */
+    this.getRequiredMessageBasedOnCount = (requiredInputs, keySingle, keyPlural) => this.messages.form[requiredInputs.length === 1 ? keySingle : keyPlural];
     /**
      * Check if form is valid
      */
@@ -148,7 +161,7 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns HTML Element
    */
   render() {
-    return (h("form", { class: this.classCollection.join(), id: this.identifier, name: this.name, ref: el => (this.form = el), onSubmit: this.handleFormSubmit }, this.requiredMessage && h("p", { innerHTML: this.requiredMessage }), h("slot", null), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
+    return (h("form", { class: this.classCollection.join(), id: this.identifier, name: this.name, ref: (el) => (this.form = el), onSubmit: this.handleFormSubmit }, this.requiredMessage && h("p", { innerHTML: this.requiredMessage }), h("slot", null), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
   }
   get element() { return this; }
   static get watchers() { return {