@mgdis/mg-components 6.24.0 → 6.26.0

package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { ClassList, isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
 import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
-import { widths, classReadonly, classDisabled, classDisplayCharacterLeft } from "../mg-input/mg-input.conf";
+import { widths, classReadonly, classDisabled, classDisplayCharacterLeft, } from "../mg-input/mg-input.conf";
 import { initLocales } from "../../../../locales";
 export class MgInputTextarea {
     constructor() {
@@ -145,7 +145,7 @@ export class MgInputTextarea {
     }
     watchMgWidth(newValue) {
         // reset width class
-        widths.forEach(width => {
+        widths.forEach((width) => {
             this.classCollection.delete(`mg-c-input--width-${width}`);
         });
         // apply new width
@@ -182,7 +182,7 @@ export class MgInputTextarea {
         // - Async operations are completed
         // - No timing issues with Stencil's render cycle
         // - Keep everything in sync both inside and outside the component
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
             requestAnimationFrame(() => {
                 this.checkValidity();
                 this.setErrorMessage();
@@ -229,7 +229,7 @@ export class MgInputTextarea {
             // - Async operations are completed
             // - No timing issues with Stencil's render cycle
             // - Keep everything in sync both inside and outside the component
-            return new Promise(resolve => {
+            return new Promise((resolve) => {
                 requestAnimationFrame(() => {
                     // unlock validity check by reseting customErrorMessage
                     this.customErrorMessage = { lock: false };
@@ -286,7 +286,7 @@ export class MgInputTextarea {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '5a6d89809f5e842cf5a0cda0e3c692cc4c0f667f', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__input-group-container" }, h("textarea", { class: {
+        return (h("mg-input", { key: '36575f026a23722bb6d224aaeacf0e80d3e1bbfd', label: this.label, identifier: this.identifier, class: this.classCollection.join(), ariaDescribedbyIDs: this.characterLeftId, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, tooltip: this.tooltip, tooltipPosition: this.readonly && this.value === undefined ? 'label' : this.tooltipPosition, helpText: this.helpText, errorMessage: this.errorMessage }, this.readonly ? (this.value && h("b", { class: "mg-c-input__readonly-value" }, this.value)) : (h("div", { class: "mg-c-input__input-group-container" }, h("textarea", { class: {
                 'mg-c-input__box': true,
                 'mg-c-input__box--width': true,
                 'mg-c-input__box--resizable': this.resizable === 'both',
@@ -772,7 +772,7 @@ export class MgInputTextarea {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when value change"
+                    "text": "Emitted event when value change"
                 },
                 "complexType": {
                     "original": "HTMLMgInputTextareaElement['value']",
@@ -792,7 +792,7 @@ export class MgInputTextarea {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when checking validity"
+                    "text": "Emitted event when checking validity"
                 },
                 "complexType": {
                     "original": "HTMLMgInputTextareaElement['valid']",

package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.js

@@ -97,10 +97,10 @@ export class MgInputToggle {
             if (!this.isIcon) {
                 // Due to text-overflow set to ellipsis
                 // we need to ensure that slot element have title to display value on mouse over
-                slots.forEach(slot => slot.setAttribute('title', slot.textContent));
+                slots.forEach((slot) => slot.setAttribute('title', slot.textContent));
             }
             else {
-                slots.forEach(slot => {
+                slots.forEach((slot) => {
                     if (slot.nodeName === 'MG-ICON') {
                         slot.size = 'small';
                     }
@@ -113,7 +113,7 @@ export class MgInputToggle {
          * @returns toggle value
          */
         this.getCurrentOptionIndex = (value) => {
-            return this.options.findIndex(option => toString(option.value) === toString(value)) === 1 ? 1 : 0;
+            return this.options.findIndex((option) => toString(option.value) === toString(value)) === 1 ? 1 : 0;
         };
         /**
          * Check if value is checked
@@ -137,7 +137,8 @@ export class MgInputToggle {
         // However, depending on the integration context (e.g., Vue.js), they may also be interpreted as string attributes.
         // To avoid incorrect type interpretation when a boolean is received as a string,
         // we normalize the value and convert it to a proper boolean before internal use.
-        else if (['true', 'false'].includes(newValue) && this.options.every(option => typeof option.value === 'boolean')) {
+        else if (['true', 'false'].includes(newValue) &&
+            this.options.every((option) => typeof option.value === 'boolean')) {
             this.value = newValue === 'true';
             // Return early to prevent infinite loop
             return;
@@ -162,7 +163,7 @@ export class MgInputToggle {
         }
         // String array
         else if (allItemsAreString(newValue)) {
-            this.options = newValue.map(item => ({ title: item, value: item }));
+            this.options = newValue.map((item) => ({ title: item, value: item }));
         }
         // Object array
         else if (Array.isArray(newValue) && newValue.every(isOption)) {
@@ -242,7 +243,7 @@ export class MgInputToggle {
             // - Async operations are completed
             // - No timing issues with Stencil's render cycle
             // - Keep everything in sync both inside and outside the component
-            return new Promise(resolve => {
+            return new Promise((resolve) => {
                 requestAnimationFrame(() => {
                     this.errorMessage = undefined;
                     resolve();
@@ -272,7 +273,7 @@ export class MgInputToggle {
      */
     render() {
         const currentOption = this.options[this.getCurrentOptionIndex(this.value)];
-        return (h("mg-input", { key: '09f0a48057d2c2a19b1f01e8e769592824afdd23', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (currentOption && h("b", { class: "mg-c-input__readonly-value" }, currentOption.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.isChecked(this.value).toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.handleSwitchButton, ref: el => {
+        return (h("mg-input", { key: '5402a263042d7c4265d0dae810df6be6ae8d3f2a', label: this.label, helpText: this.helpText, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, tooltip: this.tooltip, tooltipPosition: this.tooltipPosition, errorMessage: this.errorMessage }, this.readonly ? (currentOption && h("b", { class: "mg-c-input__readonly-value" }, currentOption.title)) : (h("button", { type: "button", role: "switch", "aria-checked": this.isChecked(this.value).toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.handleSwitchButton, ref: (el) => {
                 if (el !== null)
                     this.button = el;
             } }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" }))))));
@@ -601,7 +602,7 @@ export class MgInputToggle {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when value change"
+                    "text": "Emitted event when value change"
                 },
                 "complexType": {
                     "original": "HTMLMgInputToggleElement['value']",
@@ -621,7 +622,7 @@ export class MgInputToggle {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when checking validity"
+                    "text": "Emitted event when checking validity"
                 },
                 "complexType": {
                     "original": "boolean",

package/dist/collection/components/molecules/internals/mg-item-more/mg-item-more.js

@@ -75,7 +75,7 @@ export class MgItemMore {
      */
     render() {
         const menuItemIdentifier = 'mg-item-more';
-        return (h(Host, { key: '85f8bf18855610a31c4afc0051886c5020d9a1b6', role: "listitem", "data-mg-popover-guard": `${menuItemIdentifier}-popover` }, this.parentMenu && (h("mg-menu-item", { key: '10d8d6ca20df0cba51f601bdafe0260e48842fa3', "data-overflow-more": true, "data-style-direction": directions.HORIZONTAL, identifier: menuItemIdentifier, isIcon: !this.slotlabel.display }, h("mg-icon", { key: 'f957f3179d07df707e871e44e26eddcb911521e4', icon: this.icon.icon, slot: "image" }), h("span", { key: 'af9d0b934313b28983b650d58baa5b83b937836a', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: '181445f2ee43b78ce041225f2394618c8eacf5d1', direction: directions.VERTICAL, label: this.messages.menuLabel, ref: ref => {
+        return (h(Host, { key: '54d11a95e5edc3a45e98541ffc827264e40bc5ec', role: "listitem", "data-mg-popover-guard": `${menuItemIdentifier}-popover` }, this.parentMenu && (h("mg-menu-item", { key: '636e1c03e907071e72766b7ee359f3f93d3df6ae', "data-overflow-more": true, "data-style-direction": directions.HORIZONTAL, identifier: menuItemIdentifier, isIcon: !this.slotlabel.display }, h("mg-icon", { key: 'e751b58f50a3625f6e23b5993a50f8d0c2fb4660', icon: this.icon.icon, slot: "image" }), h("span", { key: 'bc429c525afced68fb5a7668cad3741699216b97', class: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { key: '05760816f84ef6b6c5d18d058a110b6ec2d182e3', direction: directions.VERTICAL, label: this.messages.menuLabel, ref: (ref) => {
                 if (ref !== null)
                     this.itemMoreContainer = ref;
             } })))));

package/dist/collection/components/molecules/menus/mg-menu/mg-menu.js

@@ -28,7 +28,7 @@ export class MgMenu {
          */
         this.getMenuItems = (menu = this.element) => {
             var _a, _b;
-            const menuItems = Array.from(menu.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
+            const menuItems = Array.from(menu.children).filter((child) => child.nodeName === 'MG-MENU-ITEM');
             const itemMoreMenuItem = (_b = (_a = menu.querySelector('mg-item-more')) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item');
             if (itemMoreMenuItem !== null && itemMoreMenuItem !== undefined) {
                 menuItems.push(itemMoreMenuItem);
@@ -39,7 +39,7 @@ export class MgMenu {
          * Update menu items
          */
         this.updateMenuItems = () => {
-            this.getMenuItems().forEach(item => {
+            this.getMenuItems().forEach((item) => {
                 item.dataset.styleDirection = this.direction;
             });
             // render mg-item-more to manage OverflowBehavior
@@ -49,7 +49,9 @@ export class MgMenu {
          * render mg-item-more
          */
         this.renderMgItemMore = () => {
-            if (this.direction === directions.VERTICAL || (this.direction === directions.HORIZONTAL && this.isChildMenu()) || this.element.children.length <= 1) {
+            if (this.direction === directions.VERTICAL ||
+                (this.direction === directions.HORIZONTAL && this.isChildMenu()) ||
+                this.element.children.length <= 1) {
                 return;
             }
             // Insert mg-item-more outside the mg-menu shadowdom
@@ -95,7 +97,7 @@ export class MgMenu {
             return;
         }
         const itemToWatch = event.target.nodeName === 'MG-ITEM-MORE' ? event.target.shadowRoot.querySelector('mg-menu-item') : event.target;
-        ['click', 'focus'].forEach(trigger => {
+        ['click', 'focus'].forEach((trigger) => {
             itemToWatch.addEventListener(trigger, () => {
                 const focusedItem = event.target.closest('mg-menu').querySelector('[data-has-focus]');
                 // exit process if new focused item in the current menu children
@@ -153,7 +155,7 @@ export class MgMenu {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: 'c16a69485fabb9a7a91efe032501fafa98862882', role: "list", "aria-label": this.label }, h("slot", { key: 'f5bca6fdb93d9273e5fcc753d2c58c0a0504c0d0' })));
+        return (h(Host, { key: '967fc6e01207c5831b7821ccb17db8406cabc262', role: "list", "aria-label": this.label }, h("slot", { key: '9699944cbe1b25434c3ddc6235dae7676b7acb6b' })));
     }
     static get is() { return "mg-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/menus/mg-menu-item/mg-menu-item.js

@@ -68,7 +68,9 @@ export class MgMenuItem {
          * @returns truthy if component display popover
          */
         this.hasPopover = () => this.isDirection(directions.HORIZONTAL) &&
-            ((this.isInMainMenu() && Array.from(this.element.children).some(element => element.querySelector('[slot]') === null)) || this.isItemMore) &&
+            ((this.isInMainMenu() &&
+                Array.from(this.element.children).some((element) => element.querySelector('[slot]') === null)) ||
+                this.isItemMore) &&
             this.href === undefined;
         /**
          * Method to control if one of component children have active status
@@ -102,7 +104,8 @@ export class MgMenuItem {
         this.updateDisplayNotificationBadge = () => {
             const childMenu = this.element.querySelector('mg-menu');
             this.displayNotificationBadge =
-                childMenu !== null && Array.from(childMenu.children).some((subItem) => subItem.querySelector('mg-badge') !== null && !subItem.hasAttribute('hidden'));
+                childMenu !== null &&
+                    Array.from(childMenu.children).some((subItem) => subItem.querySelector('mg-badge') !== null && !subItem.hasAttribute('hidden'));
         };
         /**
          * Update expanded prop
@@ -130,11 +133,11 @@ export class MgMenuItem {
         this.updateSlot = (guard = false) => {
             // slot title AND metadata validation
             // add title on label AND metada slots due to text-overflow on these element
-            if (Array.from(this.element.children).find(child => child.getAttribute('slot') === 'label') === undefined) {
+            if (Array.from(this.element.children).find((child) => child.getAttribute('slot') === 'label') === undefined) {
                 throw new Error(`<${this.name}> slot "label" is required.`);
             }
-            ['label', 'metadata'].forEach(slot => {
-                Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach(element => {
+            ['label', 'metadata'].forEach((slot) => {
+                Array.from(this.element.querySelectorAll(`[slot="${slot}"]`)).forEach((element) => {
                     if (!isValidString(element.textContent))
                         throw new Error(`<${this.name}> slot "${slot}" must have text content.`);
                     if ((guard && !element.hasAttribute('title')) || !guard)
@@ -232,7 +235,7 @@ export class MgMenuItem {
         else {
             this.updateExpanded(newValue);
             // when expanded all actives sub-items need to be expanded and non active closed
-            Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
+            Array.from(this.element.querySelectorAll('mg-menu-item')).forEach((item) => {
                 if (item !== this.element)
                     item.expanded = newValue ? this.hasStatus(item, Status.ACTIVE) : false;
             });
@@ -243,7 +246,7 @@ export class MgMenuItem {
             this.classNavigationButtonClassList.delete(`${this.classNavigationButton}--${oldValue}`);
         this.classNavigationButtonClassList.add(`${this.classNavigationButton}--${newValue}`);
         // manage all sub levels child menu-items level with data-level attribut
-        Array.from(this.element.querySelectorAll('mg-menu-item')).forEach(item => {
+        Array.from(this.element.querySelectorAll('mg-menu-item')).forEach((item) => {
             if (this.isDirection(directions.VERTICAL, newValue)) {
                 item.dataset.level = `${(Number(item.dataset.level) || 1) + 1}`;
             }
@@ -261,7 +264,6 @@ export class MgMenuItem {
      * direction value in dataset
      * @param newValue - new direction value
      */
-    // eslint-disable-next-line @stencil-community/no-unused-watch
     watchDataStyleDirection(newValue) {
         this.direction = newValue;
         this.watchIsIcon(this.isIcon);
@@ -270,7 +272,6 @@ export class MgMenuItem {
      * has focus value in dataset
      * @param newValue - new direction value
      */
-    // eslint-disable-next-line @stencil-community/no-unused-watch
     watchDataHasFocus(newValue) {
         if (!isValidString(newValue))
             this.updateExpanded(Boolean(newValue));
@@ -297,7 +298,7 @@ export class MgMenuItem {
         normalizeBooleanAttributes(this);
         // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element
         // we store only matching elements
-        this.hasChildren = Array.from(this.element.children).some(child => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));
+        this.hasChildren = Array.from(this.element.children).some((child) => !['image', 'information', 'label', 'metadata'].includes(child.getAttribute('slot')));
         this.messages = initLocales(this.element).messages.menuItem;
         this.isItemMore = this.element.dataset.overflowMore !== undefined;
         // watchers
@@ -322,12 +323,12 @@ export class MgMenuItem {
             this.updateItem([Status.ACTIVE]);
             // emit loaded event when component is fully loaded
             this.itemLoaded.emit();
-            new MutationObserver(mutationsList => {
-                if (mutationsList.some(mutation => ['hidden', 'status'].includes(mutation.attributeName)))
+            new MutationObserver((mutationsList) => {
+                if (mutationsList.some((mutation) => ['hidden', 'status'].includes(mutation.attributeName)))
                     this.updateStatus(this.hasChildren ? undefined : [Status.ACTIVE]);
-                if (mutationsList.some(mutation => mutation.type === 'characterData'))
+                if (mutationsList.some((mutation) => mutation.type === 'characterData'))
                     this.updateSlot();
-                if (mutationsList.some(mutation => mutation.type === 'childList'))
+                if (mutationsList.some((mutation) => mutation.type === 'childList'))
                     this.updateItem();
                 this.itemUpdated.emit();
             }).observe(this.element, { attributes: true, childList: true, characterData: true, subtree: true });
@@ -372,7 +373,7 @@ export class MgMenuItem {
             ['mg-c-menu-item__collapse-container']: true,
             ['mg-c-menu-item__collapse-container--first-level']: (this.isInMainMenu() || this.isItemMore) && this.isDirection(directions.HORIZONTAL),
         });
-        return (h(Host, { key: 'c96763db4eeaa4a70213f39f13600aacbbed02b4', role: this.isItemMore ? 'presentation' : 'listitem' }, this.hasPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", arrowHide: true, "onDisplay-change": this.handlePopoverDisplay, identifier: this.popoverIdentifier, "data-fallback-placement": "bottom-end" // use for the last element of the menu if it is placed on the right side
+        return (h(Host, { key: '68705299d83c64af9e915a6e4d471e78ed6d92ab', role: this.isItemMore ? 'presentation' : 'listitem' }, this.hasPopover() ? (h("mg-popover", { display: this.expanded, placement: "bottom-start", "onDisplay-change": this.handlePopoverDisplay, identifier: this.popoverIdentifier, "data-fallback-placement": "bottom-end" // use for the last element of the menu if it is placed on the right side
         }, this.renderInteractiveElement(), h("div", { class: getContainerClasses(), slot: "content" }, this.renderSlot()))) : ([
             this.renderInteractiveElement(),
             h("div", { key: "vertical-container", class: getContainerClasses(), hidden: !this.expanded }, this.renderSlot()),
@@ -544,7 +545,7 @@ export class MgMenuItem {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when item is loaded"
+                    "text": "Emitted event when item is loaded"
                 },
                 "complexType": {
                     "original": "void",
@@ -559,7 +560,7 @@ export class MgMenuItem {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when item is updated"
+                    "text": "Emitted event when item is updated"
                 },
                 "complexType": {
                     "original": "void",

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

@@ -11,7 +11,8 @@ import { initLocales } from "../../../locales";
 const isMgActionMoreItems = (prop) => {
     const items = prop;
     return (typeof items === 'object' &&
-        items.every(item => (typeof item === 'object' && typeof item.label === 'string' && typeof item.mouseEventHandler === 'function') || isMgActionMoreDivider(item)));
+        items.every((item) => (typeof item === 'object' && typeof item.label === 'string' && typeof item.mouseEventHandler === 'function') ||
+            isMgActionMoreDivider(item)));
 };
 /**
  * MgActionMoreDividerType type guard
@@ -93,7 +94,9 @@ export class MgActionMore {
         if (!isMgActionMoreItems(newValue)) {
             throw new Error(`<${this.name}> prop "items" is required and all values must be the same type, MgActionMoreItemType or MgActionMoreDividerType. Passed value: ${toString(newValue)}.`);
         }
-        else if (isMgActionMoreItems(newValue) && newValue.length > 0 && (isMgActionMoreDivider(newValue[0]) || isMgActionMoreDivider(newValue[newValue.length - 1]))) {
+        else if (isMgActionMoreItems(newValue) &&
+            newValue.length > 0 &&
+            (isMgActionMoreDivider(newValue[0]) || isMgActionMoreDivider(newValue[newValue.length - 1]))) {
             throw new Error(`<${this.name}> prop "items" can’t have a divider at the beginning or the end of the array. Passed value: ${toString(newValue)}.`);
         }
     }
@@ -141,11 +144,11 @@ export class MgActionMore {
                     [`${this.classBase}__chevron--rotate`]: this.expanded === true,
                 } }, h("mg-icon", { icon: "chevron-down" })));
         }
-        return (h(Host, { key: '184355435ec346d682c2df4aa8b33bf5f54e77e7', "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { key: '8176489e5dd7741311745d015b8ef7f2a4f63ea9', class: this.classBase }, h("mg-popover", { key: '3ee64b21556ee9e910939ad2fc9e3fbf8e4bd964', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { key: 'cf8f7f4f736d6a8338a4f6eebce04b4e2be49825', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({ key: 'ee8b4f13bac85ccdd5e9d72edbaa957054c304ec' }, this.icon)), !this.button.isIcon && buttonContent), h("div", { key: '1c78fb9a98d59fa5422c5105ecb13d2f2884c7d2', slot: "content" }, h("mg-menu", { key: '522d915d4a38529f7709640bb96eebb81ccc86af', direction: directions.VERTICAL, label: this.messages.label }, this.items.map(item => {
+        return (h(Host, { key: 'c72c7ee9bdb39f2361fdcb9f670cc679efdd3589', "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { key: 'dd88d690d4600868bc485770b657b46afeccc727', class: this.classBase }, h("mg-popover", { key: 'eaecf2ec0fca98c0233240711ff7fed17374cd81', identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange, "data-fallback-placement": "bottom-end" }, h("mg-button", { key: 'edb2e8556cbfe06aef62caea435205208722dd04', variant: this.button.variant, isIcon: this.button.isIcon, disabled: this.button.disabled, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({ key: 'a7a5c5bbc906da8dee937312fe373e97d9d74346' }, this.icon)), !this.button.isIcon && buttonContent), h("div", { key: '83cda3d619de43ab8a75605d20082b31230cd7e2', slot: "content" }, h("mg-menu", { key: '37d0fd99fcafb3eb6f2a56a7a805523348146419', direction: directions.VERTICAL, label: this.messages.label }, this.items.map((item) => {
             var _a, _b;
             return isMgActionMoreDivider(item) ? (h("mg-divider", { class: "mg-c-action-more__divider", key: "divider", "full-width": true })) : (h("mg-menu-item", { key: item.label, status: item.status || Status.VISIBLE, target: item.target, href: item.href,
                 // eslint-disable-next-line react/jsx-no-bind
-                onClick: e => this.handleItemClick(e, item.mouseEventHandler) }, ((_a = item.icon) === null || _a === void 0 ? void 0 : _a.icon) && h("mg-icon", { icon: item.icon.icon, variant: item.icon.variant, variantStyle: item.icon.variantStyle, slot: "image" }), h("span", { slot: "label" }, item.label), ((_b = item.badge) === null || _b === void 0 ? void 0 : _b.label) && h("mg-badge", { label: item.badge.label, value: item.badge.value, slot: "information", variant: "text-color" })));
+                onClick: (e) => this.handleItemClick(e, item.mouseEventHandler) }, ((_a = item.icon) === null || _a === void 0 ? void 0 : _a.icon) && (h("mg-icon", { icon: item.icon.icon, variant: item.icon.variant, variantStyle: item.icon.variantStyle, slot: "image" })), h("span", { slot: "label" }, item.label), ((_b = item.badge) === null || _b === void 0 ? void 0 : _b.label) && (h("mg-badge", { label: item.badge.label, value: item.badge.value, slot: "information", variant: "text-color" }))));
         })))))));
     }
     static get is() { return "mg-action-more"; }

package/dist/collection/components/molecules/mg-alert/mg-alert.js

@@ -60,7 +60,7 @@ export class MgAlert {
             // Needed to ensure we don't start the timer
             this[isMouseEvent ? 'isHovered' : 'isFocused'] = true;
             // Restart timer when loose focus AND mouse leave
-            this.element.addEventListener(isMouseEvent ? 'mouseleave' : 'focusout', eventOut => {
+            this.element.addEventListener(isMouseEvent ? 'mouseleave' : 'focusout', (eventOut) => {
                 this[eventOut.type === 'mouseleave' ? 'isHovered' : 'isFocused'] = false;
                 // Start timer if needed
                 if (!this.isFocused && !this.isHovered)
@@ -93,7 +93,6 @@ export class MgAlert {
     /**
      * Watch hidden prop
      */
-    // eslint-disable-next-line @stencil-community/no-unused-watch
     watchHidden(newValue) {
         if (typeof newValue === 'string' && newValue === '') {
             newValue = true;
@@ -101,7 +100,7 @@ export class MgAlert {
         if (newValue) {
             this.componentHide.emit();
             // Remove event Listener
-            ['focusin', 'mouseenter'].forEach(event => {
+            ['focusin', 'mouseenter'].forEach((event) => {
                 this.element.removeEventListener(event, this.timerEvents);
             });
             // Clear Timer
@@ -114,7 +113,7 @@ export class MgAlert {
                 // Start timer
                 this.setTimer();
                 // Stop timer when get focus or mouse enter
-                ['focusin', 'mouseenter'].forEach(event => {
+                ['focusin', 'mouseenter'].forEach((event) => {
                     this.element.addEventListener(event, this.timerEvents);
                 });
             }
@@ -146,7 +145,7 @@ export class MgAlert {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-message", { key: '8d10696cd86b00304d8ae409e36691a41a16702e', class: this.classCollection.join(), role: ['info', 'success'].includes(this.variant) ? 'status' : 'alert', variant: this.variant, variantStyle: this.variantStyle, fullWidth: this.fullWidth }, h("slot", { key: '598a86d657b77006f5a9e9dbf33e7969669be125' }), this.hasActions ? (h("span", { slot: "actions" }, h("slot", { name: "actions" }))) : (h("span", { class: "mg-c-alert__close-button" }, h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.alert.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
+        return (h("mg-message", { key: 'a691799e6151febf9a74c5a6a539f3bddb1795cf', class: this.classCollection.join(), role: ['info', 'success'].includes(this.variant) ? 'status' : 'alert', variant: this.variant, variantStyle: this.variantStyle, fullWidth: this.fullWidth }, h("slot", { key: '70780ccab7dc02b5e2e9f805df0d242252f5d383' }), this.hasActions ? (h("span", { slot: "actions" }, h("slot", { name: "actions" }))) : (h("span", { class: "mg-c-alert__close-button" }, h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.alert.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
     }
     static get is() { return "mg-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -272,7 +271,7 @@ export class MgAlert {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when alert is diplayed"
+                    "text": "Emitted event when alert is diplayed"
                 },
                 "complexType": {
                     "original": "void",
@@ -287,7 +286,7 @@ export class MgAlert {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when alert is hidden"
+                    "text": "Emitted event when alert is hidden"
                 },
                 "complexType": {
                     "original": "void",

package/dist/collection/components/molecules/mg-breadcrumb/mg-breadcrumb.js

@@ -8,16 +8,34 @@ import { isValidString, toString } from "@mgdis/core-ui-helpers/dist/utils";
  */
 const isBreadcrumbItems = (items) => Array.isArray(items) &&
     items.length > 0 &&
-    items.every((item, index) => typeof item === 'object' && item !== null && isValidString(item.label) && (index === items.length - 1 || isValidString(item.href)));
+    items.every((item, index) => typeof item === 'object' &&
+        item !== null &&
+        isValidString(item.label) &&
+        (index === items.length - 1 || isValidString(item.href)));
 export class MgBreadcrumb {
+    constructor() {
+        /***********
+         * Methods *
+         **********/
+        /**
+         * Handle item link click: emit item-click event and conditionally prevent native navigation
+         * @param event - mouse event
+         * @param item - the clicked breadcrumb item
+         */
+        this.handleItemClick = (event, item) => {
+            if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey || event.button === 1)
+                return;
+            const customEvent = this.itemClick.emit(item);
+            if (customEvent.defaultPrevented) {
+                event.preventDefault();
+            }
+        };
+    }
     validateItems(newValue) {
         if (newValue === undefined || !isBreadcrumbItems(newValue)) {
             throw new Error(`<mg-breadcrumb> prop "items" is required and all values must be the same type, BreadcrumbItemType. Passed value: ${toString(newValue)}.`);
         }
     }
-    /***********
-     * Methods *
-     **********/
     /**
      * Render a single breadcrumb item (link or current page)
      * @param item - The breadcrumb item
@@ -26,7 +44,7 @@ export class MgBreadcrumb {
      */
     renderItem(item, isLast) {
         if (isValidString(item.href)) {
-            return (h("a", { href: item.href, "aria-label": item.icon !== undefined ? item.label : undefined, "aria-current": isLast ? 'page' : undefined }, item.icon !== undefined ? h("mg-icon", { icon: item.icon }) : item.label));
+            return (h("a", { href: item.href, "aria-label": item.icon !== undefined ? item.label : undefined, "aria-current": isLast ? 'page' : undefined, onClick: (e) => this.handleItemClick(e, item) }, item.icon !== undefined ? h("mg-icon", { icon: item.icon }) : item.label));
         }
         return h("span", null, item.label);
     }
@@ -38,7 +56,7 @@ export class MgBreadcrumb {
         this.messages = initLocales(this.element).messages.breadcrumb;
     }
     render() {
-        return (h("nav", { key: 'af5c541e6a268af67762eb9d384269511fe0be17', "aria-label": this.messages.label, class: "mg-c-breadcrumb" }, h("ol", { key: 'b5fdfe61eb2c826b3462bdd65cacfb73d4f00484', class: "mg-c-breadcrumb__list" }, this.items.map((item, index) => {
+        return (h("nav", { key: '17a4a416bb3b1a0fa98846fdcb9f9e8183b15fc3', "aria-label": this.messages.label, class: "mg-c-breadcrumb" }, h("ol", { key: '674d5c7e6331bce5c8b7a0cf5581db2aad29a385', class: "mg-c-breadcrumb__list" }, this.items.map((item, index) => {
             var _a;
             return (h("li", { key: `${index}-${(_a = item.href) !== null && _a !== void 0 ? _a : item.label}`, class: "mg-c-breadcrumb__list-item" }, this.renderItem(item, index === this.items.length - 1)));
         }))));
@@ -83,6 +101,31 @@ export class MgBreadcrumb {
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "itemClick",
+                "name": "item-click",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted event when item link is clicked"
+                },
+                "complexType": {
+                    "original": "BreadcrumbItemType",
+                    "resolved": "{ label: string; href?: string; icon?: \"filter\" | \"address-card\" | \"address-card-outline\" | \"align-center\" | \"align-justify\" | \"align-left\" | \"align-right\" | \"api\" | \"archive\" | \"archive-outline\" | \"arrow-clock\" | \"arrow-down\" | \"arrow-down-a-z\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-right\" | \"arrow-rotate\" | \"arrow-rotate-backward\" | \"arrow-up\" | \"arrow-up-right\" | \"arrow-up-right-square\" | \"arrow-up-z-a\" | \"arrows-compare\" | \"arrows-right-down\" | \"arrows-right-left\" | \"arrows-rotate\" | \"arrows-rotate-backward\" | \"arrows-up-down\" | \"ban\" | \"bell\" | \"bell-outline\" | \"book\" | \"book-outline\" | \"briefcase\" | \"briefcase-outline\" | \"building\" | \"building-outline\" | \"calculator\" | \"calculator-outline\" | \"calendar\" | \"calendar-euro\" | \"calendar-euro-outline\" | \"calendar-outline\" | \"check\" | \"check-circle\" | \"check-circle-outline\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"clock\" | \"clock-outline\" | \"code-square-outline\" | \"cog\" | \"cog-outline\" | \"comment\" | \"comment-exclamation\" | \"comment-exclamation-outline\" | \"comment-outline\" | \"comment-question\" | \"comment-question-outline\" | \"comment-sms\" | \"comment-sms-outline\" | \"conversation\" | \"conversation-outline\" | \"copy\" | \"copy-file\" | \"copy-file-outline\" | \"copy-outline\" | \"credit-card\" | \"cross\" | \"cross-circle\" | \"cross-circle-outline\" | \"dashboard\" | \"dashboard-outline\" | \"download\" | \"earth\" | \"earth-outline\" | \"ellipsis\" | \"ellipsis-vertical\" | \"euro\" | \"euro-circle\" | \"exclamation-circle\" | \"exclamation-circle-outline\" | \"exclamation-stamp\" | \"exclamation-triangle\" | \"exclamation-triangle-outline\" | \"eye\" | \"eye-outline\" | \"eye-slash\" | \"eye-slash-outline\" | \"fax\" | \"fax-outline\" | \"file\" | \"file-cog\" | \"file-cog-outline\" | \"file-download\" | \"file-download-outline\" | \"file-excel\" | \"file-excel-outline\" | \"file-outline\" | \"file-pdf\" | \"file-pdf-outline\" | \"file-text\" | \"file-text-outline\" | \"file-upload\" | \"file-upload-outline\" | \"file-word\" | \"file-word-outline\" | \"filter-outline\" | \"floppy-disk\" | \"floppy-disk-checked\" | \"floppy-disk-checked-outline\" | \"floppy-disk-outline\" | \"folder\" | \"folder-check\" | \"folder-check-outline\" | \"folder-lines\" | \"folder-lines-outline\" | \"folder-link\" | \"folder-link-outline\" | \"folder-outline\" | \"folder-star\" | \"folder-star-outline\" | \"folders\" | \"folders-outline\" | \"gavel\" | \"gavel-outline\" | \"glitters\" | \"glitters-outline\" | \"graduation-cap\" | \"graduation-cap-outline\" | \"hand-euro\" | \"hand-euro-outline\" | \"hand-up\" | \"history\" | \"home\" | \"home-outline\" | \"info-circle\" | \"info-circle-outline\" | \"interrogation-circle\" | \"interrogation-circle-outline\" | \"key\" | \"laptop\" | \"layers\" | \"life-ring\" | \"lines-rectangle\" | \"lines-rectangle-outline\" | \"link\" | \"list\" | \"loader\" | \"location\" | \"location-outline\" | \"lock\" | \"lock-outline\" | \"log-in\" | \"log-out\" | \"magnifying-glass\" | \"mail\" | \"mail-open\" | \"mail-open-outline\" | \"mail-outline\" | \"messages-square\" | \"messages-square-outline\" | \"mobile\" | \"mobile-outline\" | \"notes\" | \"notes-outline\" | \"paper-plane\" | \"paper-plane-outline\" | \"paper-plane-slash\" | \"paper-plane-slash-outline\" | \"paperclip\" | \"pause\" | \"pause-outline\" | \"pen\" | \"pen-circle\" | \"pen-fancy\" | \"pen-fancy-files-outline\" | \"pen-fancy-outline\" | \"pen-outline\" | \"phone\" | \"phone-outline\" | \"picture\" | \"picture-outline\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-outline\" | \"share\" | \"share-outline\" | \"shuffle\" | \"sidebar-arrow-left\" | \"sidebar-arrow-right\" | \"sitemap\" | \"sliders\" | \"sliders-outline\" | \"squares\" | \"star\" | \"star-outline\" | \"table\" | \"tag\" | \"tag-outline\" | \"tags\" | \"tags-outline\" | \"thumb-down\" | \"thumb-down-outline\" | \"thumb-up\" | \"thumb-up-outline\" | \"thumbtack\" | \"thumbtack-outline\" | \"trash\" | \"trash-outline\" | \"universal-access\" | \"universal-access-outline\" | \"unlink\" | \"unlock\" | \"unlock-outline\" | \"upload\" | \"user\" | \"user-circle\" | \"user-group\" | \"user-group-outline\" | \"user-lock\" | \"user-outline\" | \"user-pen-fancy-outline\" | \"user-plus\" | \"user-question-outline\" | \"user-shield\" | \"user-shield-outline\" | \"users\" | \"users-outline\" | \"wallet\" | \"wallet-outline\"; }",
+                    "references": {
+                        "BreadcrumbItemType": {
+                            "location": "import",
+                            "path": "./mg-breadcrumb.conf",
+                            "id": "src/components/molecules/mg-breadcrumb/mg-breadcrumb.conf.ts::BreadcrumbItemType",
+                            "referenceLocation": "BreadcrumbItemType"
+                        }
+                    }
+                }
+            }];
+    }
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{

package/dist/collection/components/molecules/mg-details/mg-details.js

@@ -55,7 +55,7 @@ export class MgDetails {
      * @returns HTML Element
      */
     render() {
-        return (h("details", { key: 'b4a342010e903cfd2a670e46257e889fd74ddf1e', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '85fbd6f675e20881a8eb8df776d827e25859e0b7' }, h("slot", { key: '56491b2e4fa9f4772efd5ec66825e897b90cfde3', name: "summary" }), h("span", { key: '43f913504670d8f592479d5929e6901e9f9e9a9a', class: "mg-c-details__toggle" }, h("mg-icon", { key: '268cfc8d4b9e55d87303e6a85dead205ecdd7ce1', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: 'e3d7c794f7a8d83a31c02302a06bbe0db1e8b63d', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: 'e5230b49934c2b3e9a0c31821e53ea52084b2b26', class: "mg-c-details__details" }, h("slot", { key: '0355f1596c85ab869b3658276ee156a7aadc50d1', name: "details" }))));
+        return (h("details", { key: '78dbeab3b3e6c245bda8fad5900b70727fd47595', class: { 'mg-c-details': true, 'mg-c-details--empty-summary': this.isEmptySummary }, onToggle: this.handleToggle, open: this.expanded, ref: (el) => (this.details = el) }, h("summary", { key: '766e4756a66a1f8e6bc2159f30133a0702353f32' }, h("slot", { key: '3473dd0c0fc7de78c1d7ae6f9ee4a4d2fc7835ee', name: "summary" }), h("span", { key: '7c8d3da4df69d2802f104caaf568ac513f9f03b6', class: "mg-c-details__toggle" }, h("mg-icon", { key: '44da384780ab768bde20acb58885280e193de921', icon: "chevron-up", class: { 'mg-c-details__toggle-icon': true, 'mg-c-details__toggle-icon--reverse': !this.expanded } }), h("span", { key: '387de0caa5ae819c89449e5063e0b6e05b3df8fe', class: { 'mg-u-visually-hidden': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { key: '48c1fe8df990a250f098594d9b50df947613955c', class: "mg-c-details__details" }, h("slot", { key: '95554b4d890750cc3b3008965be3e5954d49d810', name: "details" }))));
     }
     static get is() { return "mg-details"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/mg-fieldset/mg-fieldset.js

@@ -34,7 +34,7 @@ export class MgFieldset {
          */
         this.checkValidity = () => {
             var _a;
-            this.valid = !(this.mgInputs.some(input => input.invalid) || ((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.length) > 0);
+            this.valid = !(this.mgInputs.some((input) => input.invalid) || ((_a = this.errorMessage) === null || _a === void 0 ? void 0 : _a.length) > 0);
         };
         /**
          * Set mgInputs
@@ -44,7 +44,7 @@ export class MgFieldset {
             this.mgInputs = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-INPUT'));
             // Set inputs readonly or disabled based on form configuration
             // Othewise listen to events
-            this.mgInputs.forEach(input => {
+            this.mgInputs.forEach((input) => {
                 // manage special display case for mg-input-file
                 if (input.nodeName === 'MG-INPUT-FILE') {
                     if (this.readonly) {
@@ -101,7 +101,7 @@ export class MgFieldset {
      */
     async displayError() {
         if (!this.readonly) {
-            this.mgInputs.forEach(input => {
+            this.mgInputs.forEach((input) => {
                 input.displayError();
             });
         }
@@ -124,8 +124,8 @@ export class MgFieldset {
     componentDidLoad() {
         // Update mgInputs when mgForm content change
         const observerOptions = { childList: true, subtree: true };
-        new MutationObserver(mutations => {
-            if (mutations.some(mutation => Object.keys(observerOptions).includes(mutation.type))) {
+        new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => Object.keys(observerOptions).includes(mutation.type))) {
                 this.setMgInputs();
             }
         }).observe(this.element, observerOptions);
@@ -135,7 +135,7 @@ export class MgFieldset {
      * @returns HTML Element
      */
     render() {
-        return (h("mg-input", { key: '547bdc6c4c35ae9949f185f110a24c5a6437cea7', label: this.legend, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: !this.legendHide, labelHeading: this.legendHeading, labelBorderDisplay: this.legendHeading && this.legendBorderDisplay, labelHide: this.legendHide, inputsOnBottom: this.legendHeading !== undefined, tooltip: this.tooltip, tooltipPosition: 'label', helpText: this.helpText, errorMessage: !this.valid && isValidString(this.errorMessage) ? this.errorMessage : undefined }, h("span", { key: '4fe4ec0d810cf46192e61b5052caf3694c3444be', class: "mg-c-input__input-group" }, h("slot", { key: '030481c1c7536b9d5e20975f77a86d3dda853582' }))));
+        return (h("mg-input", { key: '79ffc6a9c1fe3b06ef94952cf0e37fe50d9fb642', label: this.legend, identifier: this.identifier, class: this.classCollection.join(), labelOnTop: !this.legendHide, labelHeading: this.legendHeading, labelBorderDisplay: this.legendHeading && this.legendBorderDisplay, labelHide: this.legendHide, inputsOnBottom: this.legendHeading !== undefined, tooltip: this.tooltip, tooltipPosition: 'label', helpText: this.helpText, errorMessage: !this.valid && isValidString(this.errorMessage) ? this.errorMessage : undefined }, h("span", { key: '6888e7c1a04147ca09d13e869684292be51105c6', class: "mg-c-input__input-group" }, h("slot", { key: 'd7785630e0f9b640a27568e8ce054c2ab89e0c14' }))));
     }
     static get is() { return "mg-fieldset"; }
     static get encapsulation() { return "shadow"; }