@mgdis/mg-components 6.23.0 → 6.25.0

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

@@ -54,17 +54,20 @@ export class MgForm {
             }
             // If the form is disabled or readonly none of them are required
             // Check if all fields are not editable (readonly or disabled)
-            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))) {
+            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
-                const requiredInputs = editableInputs.filter(input => !isMgInputToggle(input) && input.required);
+                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)) {
+                if ([requiredInputs.length, editableInputs.length].every((length) => length === 1) ||
+                    (requiredInputs.length > 1 &&
+                        requiredInputs.length === editableInputs.filter((input) => !isMgInputToggle(input)).length)) {
                     this.requiredMessageText = this.getRequiredMessageBasedOnCount(requiredInputs, 'allRequiredSingle', 'allRequired');
                     this.classCollection.add(this.classAllRequired);
                 }
@@ -88,7 +91,7 @@ export class MgForm {
         this.checkValidity = () => {
             // Update required on input event
             this.setRequiredMessage();
-            this.valid = !this.mgInputs.some(input => input.invalid);
+            this.valid = !this.mgInputs.some((input) => input.invalid);
             this.invalid = !this.valid;
             // We need to send valid event if it is the same value
             this.formValid.emit(this.valid);
@@ -109,7 +112,7 @@ export class MgForm {
             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) => {
                 if (this.labelOnTop) {
                     input.labelOnTop = true;
                 }
@@ -167,7 +170,7 @@ export class MgForm {
     async displayError() {
         if (!this.readonly) {
             const mgFieldsets = Array.from(this.element.querySelectorAll('*')).filter((node) => node.nodeName.startsWith('MG-FIELDSET'));
-            [...mgFieldsets, ...this.mgInputs].forEach(input => {
+            [...mgFieldsets, ...this.mgInputs].forEach((input) => {
                 var _a;
                 (_a = input.displayError) === null || _a === void 0 ? void 0 : _a.call(input);
             });
@@ -205,7 +208,7 @@ export class MgForm {
         // Get slotted mgButtons
         this.mgButtons = Array.from(this.element.querySelectorAll('mg-button'));
         // Set button form identifier
-        this.mgButtons.forEach(mgButton => {
+        this.mgButtons.forEach((mgButton) => {
             mgButton.setAttribute('form', this.identifier);
             if (mgButton.type === 'reset') {
                 mgButton.addEventListener('click', () => {
@@ -232,8 +235,8 @@ export class MgForm {
     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();
                 this.checkValidity();
             }
@@ -244,7 +247,7 @@ export class MgForm {
      * @returns HTML Element
      */
     render() {
-        return (h("form", { key: 'bb340dafd9e9d987b4de94f718f81a63749b183c', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '5cdfc883ecd9a1e9759f952beac2c17f4d9a3237', innerHTML: this.requiredMessageText }), h("slot", { key: 'd5879767bc1d23a7c31b119b2fa2a29b9f8bc76f' }), !this.readonly && !this.disabled && h("slot", { key: 'c47af6bccd71ee51e1725c5592001d09add966b8', name: "actions" })));
+        return (h("form", { key: '65d3e11931386af2dedd953f58505e2c71cd99ff', class: this.classCollection.join(), id: this.identifier, name: this.name, onSubmit: this.handleFormSubmit, role: this.ariaRole }, this.requiredMessageText && h("p", { key: '7546db3b8a4259fd7d092cc7b912b6593fab9d84', innerHTML: this.requiredMessageText }), h("slot", { key: '0023ed360230ea97395a249b230e02bb7a4bdbda' }), !this.readonly && !this.disabled && h("slot", { key: 'de84e088ff029eff487be1ed8b4766425c558c29', name: "actions" })));
     }
     static get is() { return "mg-form"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { ClassList, isTagName, toString } from "@mgdis/core-ui-helpers/dist/utils";
-import { directions, sizes } from "./mg-illustrated-message.conf";
+import { directions, sizes, } from "./mg-illustrated-message.conf";
 /**
  * @slot illustration - Illustration content
  * @slot title - Title content
@@ -81,7 +81,7 @@ export class MgIllustratedMessage {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'c9d8c8bfd2792b1cf5e78ab9d168d597b20e9a1e', class: this.classCollection.join() }, h("div", { key: 'cc8fa03147b9e59e6e8e015be9ed2b8dddd92ded', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: '83a4ec2223c4e74511beb7c0abfa10e77cee425d', name: "illustration" })), h("div", { key: 'dbb4d13ca5324cab889fa2acc9b9b22522d7a8ec', class: "mg-c-illustrated-message__slots" }, h("slot", { key: '9e74d84becf29539ec9c37e8ad1e317714f3c86c', name: "title" }), h("slot", { key: 'ae97d25c19b76ca092560d2555ebd6a87f542ffe', name: "details" }))));
+        return (h("div", { key: '87fb97f2eff23d0793e1829a2ac533be7c670f59', class: this.classCollection.join() }, h("div", { key: 'c3395aefc56c00f625a7510ce73204097abbfc06', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: '2505490d95166f2490e75cac403a90c693507502', name: "illustration" })), h("div", { key: '12b89745d353f0a31575f48c15d864459eb2d77e', class: "mg-c-illustrated-message__slots" }, h("slot", { key: 'c56b865f24c818ef40e3e0adb7efb698e509fba9', name: "title" }), h("slot", { key: '018faf36cfd88e1ac38b13636e7c7da7b44c9b40', name: "details" }))));
     }
     static get is() { return "mg-illustrated-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,7 +29,7 @@ export class MgLoader {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '739b4cbacd8a8da056dbb1445c40fac2cf26766a', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '95d3cbf26fcd6dbf0dad4853bf55aa66385f1aba', icon: "loader", spin: true }), h("span", { key: 'f6322cd3054d8976bd2ec24f86a2d6bb60ca7ae1', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgress)));
+        return (h("div", { key: 'a2e3880baccec9691a9fd6abbdb9e01d452136aa', class: "mg-c-loader", "aria-live": "polite" }, h("mg-icon", { key: '044153b87e799f1f51cb3c9c6236bf6b8b328cf5', icon: "loader", spin: true }), h("span", { key: '5e4293bd33bd2a51b7557ebf26037991e4fc853e', class: { 'mg-u-visually-hidden': this.messageHide } }, this.message || this.messages.loader.inProgress)));
     }
     static get is() { return "mg-loader"; }
     static get encapsulation() { return "shadow"; }

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

@@ -100,9 +100,9 @@ export class MgMessage {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: '7a91fbc1a334d006013cdc8dd8ce6bce52947b90', class: this.classCollection.join() }, h("mg-card", { key: '34117431721f271fa96ac729376c1af6178dcedf', shadow: true }, this.variantStyle === 'bar-left' && h("span", { key: 'b68b15e7bb5c48b53f3aafea30c50a1db42db87c', class: "mg-c-message__bar" }), h("span", { key: 'efb2fd983a68f252312c3266879cd37666c17707', class: "mg-c-message__icon" }, h("mg-icon", { key: 'de7df68e25a5c581407b2a88dd7c268c4e6977cd', icon: this.getIcon() })), h("div", { key: '10afb1b7e6b8bea33ed18cf17dfbdaf6b35b3b89', class: "mg-c-message__content" }, h("span", { key: '5f7c5d7429a143f44c992fe79f0c42649fb695a7', class: "mg-c-message__content-slot" }, h("slot", { key: 'c20cbe2a91eb487bdebd5c049c33b7d50148a7b0' })), this.hasActions && [
+        return (h("div", { key: 'a182451917bfe33de32c893d9eeedd52b11f8b15', class: this.classCollection.join() }, h("mg-card", { key: '9dd0da031d97f669e885a1681b72e5a086e79c0b', shadow: this.variantStyle !== 'background' }, h("span", { key: '158c2470a10ab9d677e2031c28ad0d43c09e4cf2', class: "mg-c-message__icon" }, h("mg-icon", { key: 'f7d0cb02781d2bf5a71fbd7f9498ebf4dca31edf', icon: this.getIcon() })), h("div", { key: '56a7299983c30ea4527bb19a46ac0677b6e8c40e', class: "mg-c-message__content" }, h("span", { key: '744ad763177f92bdbac37d43a5a58f221ff97e69', class: "mg-c-message__content-slot" }, h("slot", { key: '14b7f22e206bd074336287809574b2a5abfe5bf5' })), this.hasActions && [
             h("span", { class: "mg-c-message__content-separator", key: "content-separator" }),
-            h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: 'cdf59d5cb43793c7d8be40cf9d8d43b7d03d0a02', name: "actions" })),
+            h("span", { class: "mg-c-message__content-actions-slot", key: "content-actions-slot" }, h("slot", { key: '104be326f73ded002cba9a471491ca614227e3d5', name: "actions" })),
         ]))));
     }
     static get is() { return "mg-message"; }

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

@@ -106,11 +106,11 @@ export class MgModal {
      * @returns HTML Element
      */
     render() {
-        return (h("dialog", { key: '2d99322fd3c80b8cbfea70589cf579e0c1c6f06b', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
+        return (h("dialog", { key: '3b802b99d96be80d8071c89be6537269866e6fff', role: this.dialogRole, id: this.identifier, class: this.classCollection.join(), "aria-labelledby": this.titleId, ref: (el) => {
                 if (el !== null) {
                     this.dialog = el;
                 }
-            } }, h("mg-card", { key: '32692a6d41ef30b3d3e61ddcfea47350d374ed09', shadow: true }, h("div", { key: 'c87bb43bb069671b65a9759ee293e77975707597', class: "mg-c-modal__dialog" }, h("header", { key: '1272a946878efcf8c69f3b09852ba6938cbe31b0', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: '0704656c7c5ac4c8d405f2cd673e91f72763ee8f', class: "mg-c-modal__close-button" }, h("mg-button", { key: '4402971c763ee34145de5bd69d367fde68f9d1a2', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: '9e16add6a3e387971507a252671c895b6c94a586', icon: "cross" })))), h("h1", { key: '3e4fc2b4419398528565d382b728b8b752758ddd', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: '170ff6bd9592687baa4c561615f540ad1c7400e4', class: "mg-c-modal__content" }, h("slot", { key: 'cb710e2a57e4c997deac367169b56047af1200b1' })), this.hasActions && (h("footer", { key: '1e08d67caeaaaf75eb97faa11528719ea537c24c', class: "mg-c-modal__footer" }, h("slot", { key: '461ec8e4117477aef08dc6d346ad0bf6007ec12d', name: "actions" })))))));
+            } }, h("mg-card", { key: '4985b4af69968577ffd36a6a2b1f96274703d146', shadow: true }, h("div", { key: 'c4aed6d29dc5ee00f323dcbaecff9532f370ec98', class: "mg-c-modal__dialog" }, h("header", { key: '3bfeb66d59144c0cba3fd82c1fb4dee2ed62cea7', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: '55205da6c8991444ff53da7224b28c7475b0e173', class: "mg-c-modal__close-button" }, h("mg-button", { key: 'da7fdea3a124a559cb637beea9d5565c1f777eea', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: '77c2ab2bcacdda9fa179b480651507a1d6584686', icon: "cross" })))), h("h1", { key: 'cedb5efc709de2d18e81409139da790349a48bb8', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: '7f24e65244836c08dbf7465f8c80970080003bcd', class: "mg-c-modal__content" }, h("slot", { key: '36d7c2a0ef1bb1024887da08298391962285bbf8' })), this.hasActions && (h("footer", { key: '5967d650e4e58726641a3c960d82aa7ee588e38f', class: "mg-c-modal__footer" }, h("slot", { key: 'c275b8235acb658ded3db7c69b931000a5ff14d2', name: "actions" })))))));
     }
     static get is() { return "mg-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,7 +23,7 @@ import { initLocales } from "./../../../locales";
  * @param step - step size
  * @returns range numbers
  */
-const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);
+const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map((x) => start + x * step);
 export class MgPagination {
     constructor() {
         /**
@@ -71,7 +71,9 @@ export class MgPagination {
          * @param disabled - button disable state
          */
         this.handleGoToPage = (action, disabled) => {
-            !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
+            if (!disabled) {
+                this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
+            }
         };
     }
     watchIdentifier(newValue) {
@@ -94,7 +96,9 @@ export class MgPagination {
         this.currentPageChange.emit(newValue);
     }
     watchPaginationMessages(newValue) {
-        if (Boolean(newValue) && (typeof newValue !== 'object' || !['next', 'previous', 'nextLabel', 'previousLabel'].every(key => isValidString(newValue[key])))) {
+        if (Boolean(newValue) &&
+            (typeof newValue !== 'object' ||
+                !['next', 'previous', 'nextLabel', 'previousLabel'].every((key) => isValidString(newValue[key])))) {
             throw new Error('<mg-pagination> prop "messages" must be a valid "PaginationMessagesType".');
         }
     }
@@ -134,7 +138,7 @@ export class MgPagination {
                 // eslint-disable-next-line react/jsx-no-bind
                 onClick: () => this.handleGoToPage(action, disabled), disabled: disabled, variant: "flat", isIcon: this.hideNavigationLabels }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), !this.hideNavigationLabels && navigationMessages[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
         };
-        return (h(Host, { hidden: this.totalPages < 2 }, h("nav", { role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("div", { class: "mg-c-pagination__page-count" }, h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.localesMessages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), h("span", { class: "mg-u-visually-hidden" }, this.localesMessages.pagination.page, " ", this.currentPage), "/ ", this.totalPages, " ", this.totalPages > 1 ? this.localesMessages.pagination.pages : this.localesMessages.pagination.page)), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
+        return (h(Host, { hidden: this.totalPages < 2 }, h("nav", { role: "navigation", "aria-label": this.label, id: this.identifier, class: { 'mg-c-pagination': true, 'mg-c-pagination--hide-page-count': this.hidePageCount } }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), !this.hidePageCount && (h("div", { class: "mg-c-pagination__page-count" }, h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map((page) => page.toString()), label: this.localesMessages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), h("p", { class: "mg-c-pagination__page-count-text" }, h("span", { class: "mg-u-visually-hidden" }, this.localesMessages.pagination.page, " ", this.currentPage), "/ ", this.totalPages, ' ', this.totalPages > 1 ? this.localesMessages.pagination.pages : this.localesMessages.pagination.page))), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT))));
     }
     static get is() { return "mg-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { ClassList, createID, isValidString, isValideID, toString } from "@mgdis/core-ui-helpers/dist/utils";
 import { normalizeBooleanAttributes } from "@mgdis/core-ui-helpers/dist/stencil";
 import { initLocales } from "../../../locales";
-import { expandToggleDisplays, titlePositions } from "./mg-panel.conf";
+import { expandToggleDisplays, titlePositions, } from "./mg-panel.conf";
 /**
  * @slot - Panel content
  * @slot panel-title - Panel title content (replaces panel-title prop when used)
@@ -110,7 +110,12 @@ export class MgPanel {
          * Render collapse button
          * @returns collpase button
          */
-        this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", "aria-expanded": this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.expandToggleDisplay === 'icon' ? this.panelTitle : undefined }, h("span", { class: "mg-c-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: { 'mg-c-panel__collapse-button-icon': true, 'mg-c-panel__collapse-button-icon--reverse': !this.expanded } }), !this.isEditing && this.expandToggleDisplay !== 'icon' && (this.hasPanelTitleSlot() ? h("slot", { name: "panel-title" }) : this.panelTitle))));
+        this.renderCollapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", "aria-expanded": this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled, isIcon: this.expandToggleDisplay === 'icon', label: this.expandToggleDisplay === 'icon' ? this.panelTitle : undefined }, h("span", { class: "mg-c-panel__collapse-button-content" }, h("mg-icon", { icon: "chevron-up", class: {
+                'mg-c-panel__collapse-button-icon': true,
+                'mg-c-panel__collapse-button-icon--reverse': !this.expanded,
+            } }), !this.isEditing &&
+            this.expandToggleDisplay !== 'icon' &&
+            (this.hasPanelTitleSlot() ? h("slot", { name: "panel-title" }) : this.panelTitle))));
         /**
          * Render edit button
          * @returns edit Button
@@ -142,7 +147,11 @@ export class MgPanel {
          */
         this.renderHeaderChildren = () => {
             const children = [
-                h("div", { class: { 'mg-c-panel__header-title': true, 'mg-c-panel__header-title--full': this.isEditing, 'mg-c-panel__header-title--reverse': this.titlePosition === 'right' }, key: this.panelTitle }, this.renderTitle()),
+                h("div", { class: {
+                        'mg-c-panel__header-title': true,
+                        'mg-c-panel__header-title--full': this.isEditing,
+                        'mg-c-panel__header-title--reverse': this.titlePosition === 'right',
+                    }, key: this.panelTitle }, this.renderTitle()),
                 h("div", { class: "mg-c-panel__header-content", key: "slot-header" }, h("slot", { name: "header-right" })),
             ];
             return this.titlePosition === 'right' ? children.reverse() : children;
@@ -236,7 +245,7 @@ export class MgPanel {
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        return (h("section", { key: '62efd2c00306fef33b5aace98c7b226aac19663f', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '9958310f59b455d6a70d4948cb62daa0b27150ee', shadow: this.shadow }, h("header", { key: '593119bbcb5c1204928fe0ba640a04d3af97a13d', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: 'b71801233980b6a871be253061463a2148cf7f2c', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: 'efc3235a2a0600f55ac51eee7fd932f87ace2a47' })))));
+        return (h("section", { key: '33e6da36cbb92f19bcd957de7758c1a13ced5e83', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: 'df278e46b4604d8c5dce2abeffb2e979b02f34e9', shadow: this.shadow }, h("header", { key: 'b68012115af4bb5b62b6357fc07cbf50876ac08f', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '3dfec67e6531fc0dff866e102ac36bd6c6a48834', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '56c63dd0b0e98968594ff713c2c6ee2a3269b74b' })))));
     }
     static get is() { return "mg-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/mg-popover/mg-popover-content/mg-popover-content.js

@@ -46,7 +46,7 @@ export class MgPopoverContent {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '054fc82954b39a488f7fe5cb391d89b5fa4a61fe' }, h("mg-card", { key: 'bb89bada37069b50295bd93d988667c3b85eada3', class: this.classCollection.join(), shadow: true }, this.closeButton && (h("mg-button", { key: 'a59d6610574b964be1e2ce34ccd8e31c1395b6ff', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: '5bcc9e4eb21396f4fc66a6f1e4d6c5cdf68ec1f4', icon: "cross" }))), h("div", { key: '57be2022f3b61220e1249faeaf2acee9960027fe', class: "mg-c-popover-content__title" }, h("slot", { key: 'c7870e86a9f105cf6b9d4520c77874bce9235d72', name: "title" })), h("slot", { key: '5af8462232625d9c7d694bab46351d5e646f62ca', name: "content" })), h("slot", { key: '599863410dd7d751e82c440cd6c4fb7f2c48d9f3', name: "arrow" })));
+        return (h(Host, { key: '7035d8f560b811596c9c641abc7fe28ee9fdf3a2' }, h("mg-card", { key: 'badc81425100283dac69cad111514d8c3edfba45', class: this.classCollection.join(), shadow: true }, this.closeButton && (h("mg-button", { key: 'cb20d8c7db741051b532c3b1653d578df859f0d0', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: '389dc26f4cfdbb899b2b9eb4b27ceb6369209b2f', icon: "cross" }))), h("div", { key: '29b6721af3b6e06760affd6565e740bbc667f457', class: "mg-c-popover-content__title" }, h("slot", { key: '5834364d298a4e65a9170f003d0ec1f5e8868c4a', name: "title" })), h("slot", { key: '8398f497064fe097151ca263225349a9d84d4f36', name: "content" }))));
     }
     static get is() { return "mg-popover-content"; }
     static get encapsulation() { return "shadow"; }
@@ -98,7 +98,7 @@ export class MgPopoverContent {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when close button is clicked"
+                    "text": "Emitted event when close button is clicked"
                 },
                 "complexType": {
                     "original": "void",

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

@@ -16,11 +16,7 @@ export class MgPopover {
         /**
          * Popover placement
          */
-        this.placement = 'bottom';
-        /**
-         * Hide popover arrow
-         */
-        this.arrowHide = false;
+        this.placement = 'bottom-start';
         /**
          * Define if popover has a cross button
          */
@@ -38,7 +34,16 @@ export class MgPopover {
          * @param event - mouse event
          */
         this.clickOutside = (event) => {
-            if (!this.disabled && event.target.closest('mg-popover') !== this.element && event.target.closest(`[data-mg-popover-guard="${this.identifier}"]`) === null) {
+            // `click` is a composed event, so `composedPath()` lists every node it travels
+            // through, including across shadow boundaries. Relying on it instead of
+            // `event.target` keeps the popover open when it (or its guarded trigger) is
+            // nested inside another component's shadow DOM: there `event.target` is
+            // retargeted to the outer shadow host and `closest()` cannot reach the popover
+            // nor the `data-mg-popover-guard` element.
+            const path = event.composedPath();
+            const isInside = path.includes(this.element) ||
+                path.some((node) => node instanceof HTMLElement && node.dataset.mgPopoverGuard === this.identifier);
+            if (!this.disabled && !isInside) {
                 this.display = false;
             }
         };
@@ -76,7 +81,7 @@ export class MgPopover {
          * @param newValue - if true enable popper listners
          */
         this.setPopperListeners = (newValue) => {
-            this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: newValue }] })));
+            this.popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: newValue }] })));
         };
         /**
          * Manage all clickOustside listeners
@@ -113,13 +118,9 @@ export class MgPopover {
                 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 => {
+                ['[slot="title"]', '[slot="content"]:not(mg-popover-content)'].forEach((slotType) => {
+                    Array.from(this.element.querySelectorAll(slotType)).forEach((slot) => {
                         this.mgPopoverContent.appendChild(slot);
                     });
                 });
@@ -137,12 +138,6 @@ export class MgPopover {
         // use renderPopoverContent to update popover-content id
         this.renderPopoverContent();
     }
-    validateArrowHide(newValue) {
-        if (newValue)
-            this.mgPopoverContent.dataset.arrowHide = '';
-        else
-            delete this.mgPopoverContent.dataset.arrowHide;
-    }
     validateCloseButton(newValue) {
         this.mgPopoverContent.closeButton = newValue;
     }
@@ -174,7 +169,6 @@ export class MgPopover {
         this.renderPopoverContent();
         this.validateCloseButton(this.closeButton);
         this.validateIdentifier(this.identifier);
-        this.validateArrowHide(this.arrowHide);
     }
     /**
      * Check if component props are well configured on init
@@ -199,7 +193,8 @@ export class MgPopover {
                 {
                     name: 'offset',
                     options: {
-                        offset: [0, 0],
+                        // 2px gap with the trigger element, applied on the main axis only (no cross-axis shift so `-start`/`-end` stay aligned)
+                        offset: [0, 2],
                     },
                 },
                 {
@@ -211,7 +206,7 @@ export class MgPopover {
             ],
         });
         // add resize observer
-        [this.interactiveElement, this.element.querySelector('mg-popover-content')].forEach(element => {
+        [this.interactiveElement, this.element.querySelector('mg-popover-content')].forEach((element) => {
             new ResizeObserver(() => {
                 this.popper.update();
             }).observe(element);
@@ -228,7 +223,7 @@ export class MgPopover {
             }
         });
         // Add events to hide popover
-        this.element.addEventListener('keydown', e => {
+        this.element.addEventListener('keydown', (e) => {
             if (!this.disabled && e.code === 'Escape') {
                 this.display = false;
                 this.componentClose.emit();
@@ -242,7 +237,7 @@ export class MgPopover {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '2c1506b8e2da100519aeeae75fc5c378a81c473c' }, h("slot", { key: 'f9aea885e8cbc168614c05761829f0a0740eba9e' }), h("slot", { key: 'fa6106a660a73b3761d4783f8d46d401c47b4eb6', name: "content" })));
+        return (h(Host, { key: '9e62e60ba76045222b9c69b34245c3825004f8d6' }, h("slot", { key: '4be1a5c1221e1985cd0c0b4f7b19435d097bee4e' }), h("slot", { key: '07c2003dc3ad0bb7059e75e95e0de2862a64fd22', name: "content" })));
     }
     static get is() { return "mg-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -303,27 +298,27 @@ export class MgPopover {
                 "setter": false,
                 "reflect": false,
                 "attribute": "placement",
-                "defaultValue": "'bottom'"
+                "defaultValue": "'bottom-start'"
             },
             "arrowHide": {
-                "type": "boolean",
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "never",
+                    "resolved": "never",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "this prop is deprecated and will be removed in future releases. The popover arrow has been removed."
+                        }],
                     "text": "Hide popover arrow"
                 },
                 "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "arrow-hide",
-                "defaultValue": "false"
+                "setter": false
             },
             "closeButton": {
                 "type": "boolean",
@@ -396,7 +391,7 @@ export class MgPopover {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when display value change"
+                    "text": "Emitted event when display value change"
                 },
                 "complexType": {
                     "original": "HTMLMgPopoverElement['display']",
@@ -430,9 +425,6 @@ export class MgPopover {
         return [{
                 "propName": "identifier",
                 "methodName": "validateIdentifier"
-            }, {
-                "propName": "arrowHide",
-                "methodName": "validateArrowHide"
             }, {
                 "propName": "closeButton",
                 "methodName": "validateCloseButton"

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

@@ -65,7 +65,7 @@ export class MgProgress {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '8e6c727e9416fa777fd94b32d618a9137e8e08f7', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: 'ac42ee9c5dda55d70aad7391895e4a013aaa27f9', class: "mg-c-progress" }, h("div", { key: '34c77bc6c133bc59b9daa68d7d6c8534f13f7d37', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, h("div", { key: '7ea03a3f0c54ca0c81616c7c070d178a510dd7e1', class: "mg-c-progress__fill", style: {
+        return (h(Host, { key: '3682d5f1980678e39594dab8223805deb4b425d4', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: '001d511a866ec0526c4ffd01a8a90448b6f40819', class: "mg-c-progress" }, h("div", { key: '504fa583f5b8186236871f3f2cd886acb40614ef', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, h("div", { key: '044c9297d5a12c9d8c6d3b76d17dd2ba6a1a9719', class: "mg-c-progress__fill", style: {
                 width: `${Math.round(((this.value - this.min) / (this.max - this.min)) * 100)}%`,
             } })))));
     }

package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js

@@ -17,7 +17,9 @@ export class MgSkipLinks {
         };
     }
     validateLinks(links) {
-        if (links === undefined || links.length === 0 || links.some(link => !isValidString(link.href) || !link.href.startsWith('#') || !isValidString(link.label))) {
+        if (links === undefined ||
+            links.length === 0 ||
+            links.some((link) => !isValidString(link.href) || !link.href.startsWith('#') || !isValidString(link.label))) {
             throw new Error(`<mg-skip-links> prop "links": Cannot be empty and each link must contains an href starting with a "#" and a non empty label attributes.`);
         }
     }
@@ -36,7 +38,7 @@ export class MgSkipLinks {
      * @returns HTML Element
      */
     render() {
-        return (h("nav", { key: '5bf4427662bdca6512969bee91aa03f43a126743', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: '1d2b2a56b3960f70a3d37b333c77bf686643e0fd', class: "mg-c-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
+        return (h("nav", { key: '9208da538e001be23c8cc78e8a34498cd072cdc6', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: 'fcd69f398fad6964d5c017bb652ad7b8de34dee6', class: "mg-c-skip-links__list", role: "list" }, this.links.map((link) => (h("li", { key: link.href }, h("a", { class: "mg-c-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));
     }
     static get is() { return "mg-skip-links"; }
     static get encapsulation() { return "shadow"; }
@@ -87,7 +89,7 @@ export class MgSkipLinks {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when link is clicked"
+                    "text": "Emitted event when link is clicked"
                 },
                 "complexType": {
                     "original": "string",

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

@@ -1,5 +1,5 @@
 import { ClassList, toString, createID, isValidString } from "@mgdis/core-ui-helpers/dist/utils";
-import { textAlignments, dataTypes, sizes } from "./mg-table.conf";
+import { textAlignments, dataTypes, sizes, } from "./mg-table.conf";
 import { initLocales } from "../../../locales";
 /**
  * Check if value is a valid align object
@@ -22,7 +22,7 @@ typeof newValue === 'object' &&
             (value.sortable !== undefined && typeof value.sortable === 'boolean') ||
             (value.datatype !== undefined && dataTypes.includes(value.datatype))) &&
         // ensure no extra properties are present
-        Object.keys(value).every(key => ['align', 'sortable', 'datatype'].includes(key)));
+        Object.keys(value).every((key) => ['align', 'sortable', 'datatype'].includes(key)));
 /**
  * Compare values
  * @param firstValue - First value
@@ -150,12 +150,16 @@ export class MgTable {
                     // Add event listener
                     button.addEventListener('click', () => {
                         // Reset aria pressed
-                        table.querySelectorAll(`thead td:not(:nth-child(${key})) [aria-pressed],thead th:not(:nth-child(${key})) [aria-pressed]`).forEach(ariaPressed => {
+                        table
+                            .querySelectorAll(`thead td:not(:nth-child(${key})) [aria-pressed],thead th:not(:nth-child(${key})) [aria-pressed]`)
+                            .forEach((ariaPressed) => {
                             ariaPressed.removeAttribute('aria-pressed');
                             ariaPressed.querySelector('mg-icon').setAttribute('icon', 'arrows-up-down');
                         });
                         // Reset aria sort
-                        table.querySelectorAll(`thead td:not(:nth-child(${key}))[aria-sort],thead th:not(:nth-child(${key}))[aria-sort]`).forEach(ariaSort => {
+                        table
+                            .querySelectorAll(`thead td:not(:nth-child(${key}))[aria-sort],thead th:not(:nth-child(${key}))[aria-sort]`)
+                            .forEach((ariaSort) => {
                             ariaSort.removeAttribute('aria-sort');
                         });
                         // Set aria pressed
@@ -190,7 +194,7 @@ export class MgTable {
                         // If sort order is none, return to original order
                         if (sortOrder === 'none') {
                             // Append rows to table
-                            rowsDefault.forEach(row => table.querySelector('tbody').append(row));
+                            rowsDefault.forEach((row) => table.querySelector('tbody').append(row));
                             return;
                         }
                         // Set a copy of rows
@@ -208,7 +212,7 @@ export class MgTable {
                             return compareValues(cellValueA, cellValueB, sortOrder === 'descending', value.datatype);
                         });
                         // Append rows to table
-                        rows.forEach(row => table.querySelector('tbody').append(row));
+                        rows.forEach((row) => table.querySelector('tbody').append(row));
                     });
                 }
             });

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { createID, ClassList, allItemsAreString, isValidString, nextTick, toString, isValideID } from "@mgdis/core-ui-helpers/dist/utils";
+import { createID, ClassList, allItemsAreString, isValidString, nextTick, toString, isValideID, } from "@mgdis/core-ui-helpers/dist/utils";
 import { Status } from "./mg-tabs.conf";
 import { Keys } from "../../../utils/events.utils";
 /**
@@ -141,7 +141,7 @@ export class MgTabs {
          * Validate slots setting
          */
         this.validateSlots = () => {
-            const slots = Array.from(this.element.children).filter(slot => { var _a; return (_a = slot.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.includes('tab_content-'); });
+            const slots = Array.from(this.element.children).filter((slot) => { var _a; return (_a = slot.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.includes('tab_content-'); });
             if (slots.length !== this.tabs.length)
                 throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
         };
@@ -159,7 +159,7 @@ export class MgTabs {
     validateItems(newValue) {
         // String array
         if (allItemsAreString(newValue))
-            this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
+            this.tabs = newValue.map((item) => ({ label: item, status: Status.VISIBLE }));
         // Object array
         else if (Array.isArray(newValue) && newValue.length > 0 && newValue.every(isTabItem))
             this.tabs = newValue;
@@ -170,11 +170,14 @@ export class MgTabs {
         // when `active-tab` is undefined we set default value by searching an item with `Status.ACTIVE` or we use the `startIndex` has fallback value
         // after setting new value to `active-tab` the validate will be triggered again with the updated value and process the tab update
         if (newValue === undefined) {
-            this.activeTab = this.tabs.some(tab => this.tabHasStatus(tab, Status.ACTIVE))
-                ? this.getTabItemIndex(this.tabs.findIndex(tab => this.tabHasStatus(tab, Status.ACTIVE)))
+            this.activeTab = this.tabs.some((tab) => this.tabHasStatus(tab, Status.ACTIVE))
+                ? this.getTabItemIndex(this.tabs.findIndex((tab) => this.tabHasStatus(tab, Status.ACTIVE)))
                 : this.startIndex;
         }
-        else if (typeof newValue === 'number' && newValue >= this.startIndex && newValue <= this.tabs.length && this.isActivableTab(this.tabs[newValue - this.startIndex])) {
+        else if (typeof newValue === 'number' &&
+            newValue >= this.startIndex &&
+            newValue <= this.tabs.length &&
+            this.isActivableTab(this.tabs[newValue - this.startIndex])) {
             // if new 'active-tab' is activable we update tab status to ACTIVE and toggle past ACTIVE to VISIBLE
             this.tabs.forEach((tab, index) => {
                 const isNewActiveTab = index === newValue - this.startIndex;
@@ -223,13 +226,13 @@ export class MgTabs {
      * @returns HTML Element
      */
     render() {
-        return (h("div", { key: 'c58c255ddffc83ad6d911d37f626bcadaea61747', class: this.classCollection.join() }, h("header", { key: 'ba6d581a4a8bc4338d6341372c267a28df882113', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
+        return (h("div", { key: '37be8d325dfea3a7b828236f3cc21da57be28154', class: this.classCollection.join() }, h("header", { key: 'd88f10c0331984a759f8abc311f11d913fb25206', role: "tablist", "aria-label": this.label, class: "mg-c-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
                 [`${this.buttonTabBaseClass}`]: true,
                 [`${this.buttonTabBaseClass}--horizontal`]: true,
                 [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
                 [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasStatus(tab, Status.DISABLED),
                 [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasStatus(tab, Status.HIDDEN),
-            }, tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), "aria-disabled": this.tabHasStatus(tab, Status.DISABLED), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabItemIndex(index) }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon, size: "small" }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: "text-color", value: tab.badge.value, label: tab.badge.label, outline: tab.badge.role === 'information' }))))), this.tabs.map((tab, index) => (h("article", { key: tab.label, role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-c-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) }))))));
+            }, tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), "aria-disabled": this.tabHasStatus(tab, Status.DISABLED), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabItemIndex(index) }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon, size: "small" }), tab.label, tab.badge !== undefined && (h("mg-badge", { variant: "text-color", value: tab.badge.value, label: tab.badge.label, outline: tab.badge.role === 'information' })))))), this.tabs.map((tab, index) => (h("article", { key: tab.label, role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-c-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) }))))));
     }
     static get is() { return "mg-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -364,7 +367,7 @@ export class MgTabs {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emited event when active tab change"
+                    "text": "Emitted event when active tab change"
                 },
                 "complexType": {
                     "original": "HTMLMgTabsElement['activeTab']",

package/dist/collection/utils/behaviors.utils.js

@@ -60,13 +60,13 @@ export class OverflowBehavior {
             throw new Error('OverflowBehavior - all constructor params are required');
         }
         const items = Array.from(this.parentElement.children);
-        this._resizeObserver = new ResizeObserver(entries => {
+        this._resizeObserver = new ResizeObserver((entries) => {
             this._availableWidth = entries
-                .map(entry => entry.contentRect.width)
+                .map((entry) => entry.contentRect.width)
                 .sort((a, b) => a - b)
                 .shift();
             // reset items
-            items.forEach(item => this.toggleItem(item, false));
+            items.forEach((item) => this.toggleItem(item, false));
             let accWidth = 0;
             items.forEach((item, index) => {
                 accWidth += item.offsetWidth;