@mgdis/mg-components 6.24.0 → 6.26.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.conf.js

@@ -6,3 +6,7 @@ export const sizes = ['small', 'medium', 'large'];
  * List of all possibles directions
  */
 export const directions = ['vertical', 'horizontal'];
+/**
+ * List of all possibles horizontal alignments
+ */
+export const aligns = ['left', 'center', 'right'];

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 { aligns, directions, sizes, } from "./mg-illustrated-message.conf";
 /**
  * @slot illustration - Illustration content
  * @slot title - Title content
@@ -16,6 +16,13 @@ export class MgIllustratedMessage {
          * Define component orientation
          */
         this.direction = 'vertical';
+        /**
+         * Define the horizontal alignment of the message inside its container.
+         * The message is sized to its content, so `align` positions it in both the vertical and
+         * horizontal directions. When the content is wide enough to fill the container there is
+         * no room left, so `align` has no visible effect.
+         */
+        this.align = 'center';
         /**
          * Component classes
          */
@@ -43,6 +50,17 @@ export class MgIllustratedMessage {
             this.classCollection.delete('mg-c-illustrated-message--direction-horizontal');
         }
     }
+    watchAlign(newValue, oldValue) {
+        if (!aligns.includes(newValue)) {
+            throw new Error(`<mg-illustrated-message> prop "align" must be one of: ${aligns.join(', ')}. Passed value: ${toString(newValue)}.`);
+        }
+        else {
+            if (oldValue !== undefined) {
+                this.classCollection.delete(`mg-c-illustrated-message--align-${oldValue}`);
+            }
+            this.classCollection.add(`mg-c-illustrated-message--align-${newValue}`);
+        }
+    }
     /***********
      * Methods *
      ***********/
@@ -74,6 +92,7 @@ export class MgIllustratedMessage {
     componentWillLoad() {
         this.watchDirection(this.direction);
         this.watchSize(this.size);
+        this.watchAlign(this.align);
         this.validateSlots();
     }
     /**
@@ -81,7 +100,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: 'daffbfe09d4ccae7b2380d2dcd0f6157acf7a849', class: this.classCollection.join() }, h("div", { key: '503631e106a43186d1031ebfd8bb5fa9e7aaa568', class: "mg-c-illustrated-message__illustration" }, h("slot", { key: '6291af5e6155e38e3cfb63acf3ca774e22d385f6', name: "illustration" })), h("div", { key: '7c7518be3413c7e9cadb149a255505d20525b6c7', class: "mg-c-illustrated-message__slots" }, h("slot", { key: '742dc8a06f3f7ab06e4e67b370a750100585c384', name: "title" }), h("slot", { key: '3da2b7d35d1076d4cb87337f9a21e149c72f9141', name: "details" }))));
     }
     static get is() { return "mg-illustrated-message"; }
     static get encapsulation() { return "shadow"; }
@@ -150,6 +169,33 @@ export class MgIllustratedMessage {
                 "reflect": false,
                 "attribute": "direction",
                 "defaultValue": "'vertical'"
+            },
+            "align": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IllustratedMessageAlignType",
+                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "references": {
+                        "IllustratedMessageAlignType": {
+                            "location": "import",
+                            "path": "./mg-illustrated-message.conf",
+                            "id": "src/components/molecules/mg-illustrated-message/mg-illustrated-message.conf.ts::IllustratedMessageAlignType",
+                            "referenceLocation": "IllustratedMessageAlignType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define the horizontal alignment of the message inside its container.\nThe message is sized to its content, so `align` positions it in both the vertical and\nhorizontal directions. When the content is wide enough to fill the container there is\nno room left, so `align` has no visible effect."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "align",
+                "defaultValue": "'center'"
             }
         };
     }
@@ -166,6 +212,9 @@ export class MgIllustratedMessage {
             }, {
                 "propName": "direction",
                 "methodName": "watchDirection"
+            }, {
+                "propName": "align",
+                "methodName": "watchAlign"
             }];
     }
 }

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: '8cffef0275a4c8e10f13974577fedc7857a41b7b', shadow: this.variantStyle !== 'background' }, h("span", { key: '7dea80369d39b5662a2257f7990b847115e7547f', class: "mg-c-message__icon" }, h("mg-icon", { key: '843d6ba95d234f7e0e7986fc904058bd8e7dca95', icon: this.getIcon() })), h("div", { key: '903125d7b30bbc386bd9f5c690b38cd3df67a661', class: "mg-c-message__content" }, h("span", { key: '3efffe2f4ebe5db86a4d42f156517caf4888e0c9', class: "mg-c-message__content-slot" }, h("slot", { key: 'f4dc15ab614ab7eb7a6d4c5ad11baba8037f6f18' })), 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: '4b3861414a1ca22792bb77d0d7bf38280d812aa1', 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: '7e07f2e52ec70012b98a8cf1097a9a3fde516e90', 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: '8c1465a6bb2ee834dfb5e56c847ed989de3e7f85', shadow: true }, h("div", { key: '5897cc498704d96f11e0c164f6ca9f466dd796e2', class: "mg-c-modal__dialog" }, h("header", { key: '362442dfe15aa7a1a0ee9c5d108eeb4d06267216', class: "mg-c-modal__header" }, this.closeButton && (h("span", { key: '3e67791bec888b3d79433ecdfc61f47d6b3be8ec', class: "mg-c-modal__close-button" }, h("mg-button", { key: '7d7c4b9947737392e178ce125f77bb6c7d376322', "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { key: '27d293b26e3b2e7b36cf92fc02ed7ffae90da736', icon: "cross" })))), h("h1", { key: 'fa0a8c9db3a3cd0e7facf944dd0e23786b59191d', class: "mg-c-modal__title", id: this.titleId }, this.modalTitle)), h("article", { key: '60079c102f0db39e5b05613ed0b03db167740d47', class: "mg-c-modal__content" }, h("slot", { key: '5c52b794b06d07c2206aa05e4ca809f369c06811' })), this.hasActions && (h("footer", { key: '793cf6f99e16b10f5af17691194fd2dd6101a3b7', class: "mg-c-modal__footer" }, h("slot", { key: '7d2b3b264a7bf167d5066b14db8fed880e985013', 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: '39d956a9b2c54b794c7ab9f2896dd1152834e8ef', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '13d0facc8eb2f4cf0c5cfc7580aafd49d3debf9a', shadow: this.shadow }, h("header", { key: 'e008bee0a091c655b41712f8f9dff3beadaf437d', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: 'a2efbe980ed634f9aeb296eb4c0f7a3f117a8e51', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '20849cd8295bed06e647e5befd3906e787dae698' })))));
+        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: 'e3de7dc2ddf9cba900f1980a6237e95f7a5daea1' }, h("mg-card", { key: '775c623b0cfd3f5cb08ce34281ac558a5dfd52df', class: this.classCollection.join(), shadow: true }, this.closeButton && (h("mg-button", { key: '48269416813e32ef03cc4f02dae4e42fb542b053', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: 'd947151a3751052261c3a1d67eca570b6f991d80', icon: "cross" }))), h("div", { key: '6c447184b41381b2563dcee874153a55521ff7aa', class: "mg-c-popover-content__title" }, h("slot", { key: '5b05e6c30fa020a8765f83d7008b4b9ecad63433', name: "title" })), h("slot", { key: '386dbb305a8862cb55f8b06aa35d08b65051a07d', name: "content" })), h("slot", { key: '16093d6e34d8558677222da720142b7afe443adf', 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
          */
@@ -45,7 +41,8 @@ export class MgPopover {
             // 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);
+            const isInside = path.includes(this.element) ||
+                path.some((node) => node instanceof HTMLElement && node.dataset.mgPopoverGuard === this.identifier);
             if (!this.disabled && !isInside) {
                 this.display = false;
             }
@@ -84,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
@@ -121,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);
                     });
                 });
@@ -145,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;
     }
@@ -182,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
@@ -195,6 +181,9 @@ export class MgPopover {
         // Add aria attributes
         this.interactiveElement.setAttribute('aria-controls', this.identifier);
         this.interactiveElement.setAttribute('aria-expanded', `${this.display}`);
+        // Mark the trigger so the button stays visually active while the popover is open,
+        // without styling every generic aria-expanded (e.g. mg-panel disclosure toggle)
+        this.interactiveElement.setAttribute('data-mg-popover-trigger', '');
         const fallbackPlacements = [];
         if (this.element.dataset.fallbackPlacement !== undefined) {
             fallbackPlacements.push(this.element.dataset.fallbackPlacement);
@@ -207,7 +196,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],
                     },
                 },
                 {
@@ -219,7 +209,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);
@@ -236,7 +226,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();
@@ -250,7 +240,7 @@ export class MgPopover {
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: '422ac3fe8b6d3784bd667074096996ffe6f52cb6' }, h("slot", { key: 'c8a2b51b1ca454f823d73ed2e72fff9aa1162b3f' }), h("slot", { key: '3f7c21389b13c497204de5415613c90aeabe3c86', name: "content" })));
+        return (h(Host, { key: '431539cd450da49af5587372a12cbe33956ec5b1' }, h("slot", { key: '30e66567cc00667665b70306b3c9ba2fa541fa1e' }), h("slot", { key: '7fcfcd55904128ef4f7a66e16a31a957e5b7af75', name: "content" })));
     }
     static get is() { return "mg-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -311,27 +301,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",
@@ -404,7 +394,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']",
@@ -438,9 +428,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: 'd5027418b3a6fe08cd7e6800fd1cb01a268750f6', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: '963659f80b05db089d564095a6eaa5558ece4ffd', class: "mg-c-progress" }, h("div", { key: 'ad019298b3d3ecf3df00946af3e7b897910bbaf7', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, h("div", { key: '921f637985dc611a606ebc4c62da4ba188b3d407', 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: 'ddae15101123757391d8dced8c88854c852563c1', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: 'df27b144dbf68f3e2fceeeb8575a81c51b74c4d4', 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));
                     });
                 }
             });