@mgdis/mg-components 6.13.1 → 6.15.0

package/dist/components/mg-pagination.js

@@ -1,9 +1,238 @@
-import { M as MgPagination$1, d as defineCustomElement$1 } from './mg-pagination2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as createID, a as isValideID, t as toString, i as isValidString } from './index2.js';
+import { i as initLocales } from './index3.js';
+import { d as defineCustomElement$9 } from './mg-button2.js';
+import { d as defineCustomElement$8 } from './mg-details2.js';
+import { d as defineCustomElement$7 } from './mg-icon2.js';
+import { d as defineCustomElement$6 } from './mg-input2.js';
+import { d as defineCustomElement$5 } from './mg-input-select2.js';
+import { d as defineCustomElement$4 } from './mg-input-title2.js';
+import { d as defineCustomElement$3 } from './mg-tooltip2.js';
+import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
+
+const NavigationAction = {
+    NEXT: 'next',
+    PREVIOUS: 'previous',
+};
+
+const mgPaginationCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-pagination{display:flex;align-items:center;gap:var(--mg-b-spacing-actions)}.mg-c-pagination__page-count{display:flex;align-items:center;gap:var(--mg-b-size-4)}.mg-c-pagination.mg-c-pagination--hide-page-count{gap:0}";
+
+/**
+ * Range generator
+ *
+ * ```
+ * start by get the range length, add "+ 1" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3
+ * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]
+ * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values
+ * then with Array.from(Array(...)) we get the complete array with "index" values instead of "empty" values
+ * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()) => [0, 1, 2]
+ * finaly we map values from "start" range and apply the "step" coefficiant,
+ * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]
+ * ```
+ *
+ * range(1, 1) = [1]
+ * range(1, 5) = [1, 2, 3, 4, 5]
+ * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]
+ * @param start - start range
+ * @param end - start end
+ * @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 MgPagination$1 = /*@__PURE__*/ proxyCustomElement(class MgPagination extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.currentPageChange = createEvent(this, "current-page-change", 7);
+        /**
+         * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+         * If not set, it will be created.
+         */
+        this.identifier = createID('mg-pagination');
+        /**
+         * Hide navigation label
+         */
+        this.hideNavigationLabels = false;
+        /**
+         * Hide select input
+         */
+        this.hidePageCount = false;
+        /**
+         * Component total pages
+         */
+        this.totalPages = 1;
+        /**
+         * Component current page
+         */
+        this.currentPage = 1;
+        /**
+         * Change current page from target
+         * @param target - target page
+         */
+        this.goToPage = (target) => {
+            this.currentPage = target;
+        };
+        /************
+         * Handlers *
+         ************/
+        /**
+         * select handler
+         * @param event - value change event
+         */
+        this.handleSelect = (event) => {
+            const to = Number(event.target.value);
+            this.goToPage(to > 0 ? to : 1);
+        };
+        /**
+         * Go to 'previous/next' page button handler
+         * @param action - navigation action
+         * @param disabled - button disable state
+         */
+        this.handleGoToPage = (action, disabled) => {
+            !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
+        };
+    }
+    watchIdentifier(newValue) {
+        if (!isValideID(newValue)) {
+            console.error(`<mg-pagination> prop "identifier" value is invalid. Passed value: ${toString(newValue)}.`);
+        }
+    }
+    validateTotalPages(newValue) {
+        if (newValue < 1) {
+            throw new Error(`<mg-pagination> prop "totalPages" must be greater than 0. Passed value: ${toString(newValue)}.`);
+        }
+    }
+    validateCurrentPage(newValue) {
+        if (newValue < 1) {
+            throw new Error(`<mg-pagination> prop "currentPage" must be greater than 0. Passed value: ${toString(newValue)}.`);
+        }
+        else if (newValue > this.totalPages) {
+            throw new Error('<mg-pagination> prop "currentPage" can not be greater than total page.');
+        }
+        this.currentPageChange.emit(newValue);
+    }
+    watchPaginationMessages(newValue) {
+        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".');
+        }
+    }
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * Check if props are well configured on init
+     */
+    componentWillLoad() {
+        // Get locales
+        this.localesMessages = initLocales(this.element).messages;
+        // Validate
+        this.watchIdentifier(this.identifier);
+        this.validateTotalPages(this.totalPages);
+        this.validateCurrentPage(this.currentPage);
+        this.watchPaginationMessages(this.messages);
+        // Set default label
+        if (this.label === undefined || this.label === '') {
+            this.label = this.localesMessages.pagination.label;
+        }
+    }
+    /**
+     * Render
+     * @returns HTML Element
+     */
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const navigationMessages = {
+            next: (_b = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.next) !== null && _b !== void 0 ? _b : this.localesMessages.general.next,
+            previous: (_d = (_c = this.messages) === null || _c === void 0 ? void 0 : _c.previous) !== null && _d !== void 0 ? _d : this.localesMessages.general.previous,
+            nextLabel: (_f = (_e = this.messages) === null || _e === void 0 ? void 0 : _e.nextLabel) !== null && _f !== void 0 ? _f : this.localesMessages.pagination.nextLabel,
+            previousLabel: (_h = (_g = this.messages) === null || _g === void 0 ? void 0 : _g.previousLabel) !== null && _h !== void 0 ? _h : this.localesMessages.pagination.previousLabel,
+        };
+        const navigationActionButton = (disabled, action) => {
+            return (h("mg-button", { label: navigationMessages[`${action}Label`],
+                // 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))));
+    }
+    get element() { return this; }
+    static get watchers() { return {
+        "identifier": ["watchIdentifier"],
+        "totalPages": ["validateTotalPages"],
+        "currentPage": ["validateCurrentPage"],
+        "messages": ["watchPaginationMessages"]
+    }; }
+    static get style() { return mgPaginationCss; }
+}, [257, "mg-pagination", {
+        "identifier": [1],
+        "label": [1025],
+        "hideNavigationLabels": [4, "hide-navigation-labels"],
+        "hidePageCount": [4, "hide-page-count"],
+        "totalPages": [2, "total-pages"],
+        "currentPage": [1538, "current-page"],
+        "messages": [16]
+    }, undefined, {
+        "identifier": ["watchIdentifier"],
+        "totalPages": ["validateTotalPages"],
+        "currentPage": ["validateCurrentPage"],
+        "messages": ["watchPaginationMessages"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["mg-pagination", "mg-button", "mg-details", "mg-icon", "mg-input", "mg-input-select", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    components.forEach(tagName => { switch (tagName) {
+        case "mg-pagination":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, MgPagination$1);
+            }
+            break;
+        case "mg-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "mg-details":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "mg-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "mg-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "mg-input-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "mg-input-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "mg-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "mg-tooltip-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
 
 const MgPagination = MgPagination$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgPagination, defineCustomElement };
-//# sourceMappingURL=mg-pagination.js.map
-
-//# sourceMappingURL=mg-pagination.js.map

package/dist/components/mg-panel.js

@@ -1,9 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as createID, C as ClassList, a as isValideID, t as toString, i as isValidString } from './index2.js';
 import { i as initLocales } from './index3.js';
-import { d as defineCustomElement$a } from './mg-button2.js';
-import { d as defineCustomElement$9 } from './mg-card2.js';
-import { d as defineCustomElement$8 } from './mg-character-left2.js';
+import { d as defineCustomElement$b } from './mg-button2.js';
+import { d as defineCustomElement$a } from './mg-card2.js';
+import { d as defineCustomElement$9 } from './mg-character-left2.js';
+import { d as defineCustomElement$8 } from './mg-details2.js';
 import { d as defineCustomElement$7 } from './mg-icon2.js';
 import { d as defineCustomElement$6 } from './mg-input2.js';
 import { d as defineCustomElement$5 } from './mg-input-text2.js';
@@ -20,7 +21,7 @@ const expandToggleDisplays = ['text', 'icon'];
  */
 const titlePositions = ['left', 'right'];
 
-const mgPanelCss = "/*!\n * @prop --mg-c-panel-border-radius: Defines the border radius of the panel. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-panel-color-background: Defines the background of the panel. Default value: `color-mix(in srgb, var(--mg-b-color-info), white 97%)`.\n * @prop --mg-c-panel-box-shadow: Defines the box shadow of the panel. Default value: `--mg-b-box-shadow`.\n * @prop --mg-c-panel-content-spacing: Defines the padding of the panel content. Default value: `--mg-b-size-16`.\n */:host{--mg-c-card-border:none;--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-panel-border-radius);--mg-c-card-color-background:var(--mg-c-panel-color-background);--mg-c-card-box-shadow:var(--mg-c-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 var(--mg-b-size-4)}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:var(--mg-b-size-4) 0}.mg-c-panel__header-content{min-height:var(--mg-b-size-min-height);flex:1 auto;align-items:center;padding-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--mg-b-font-size:var(--mg-b-font-size-h5);--mg-c-button-font-weight:600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-c-panel-content-spacing)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:var(--mg-b-spacing-actions)}.mg-c-panel ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}";
+const mgPanelCss = "/*!\n * @prop --mg-c-panel-border-radius: Defines the border radius of the panel. Default value: `--mg-b-size-radius`.\n * @prop --mg-c-panel-color-background: Defines the background of the panel.\n * @prop --mg-c-panel-box-shadow: Defines the box shadow of the panel. Default value: `--mg-b-box-shadow`.\n * @prop --mg-c-panel-content-spacing: Defines the padding of the panel content. Default value: `--mg-b-size-16`.\n */:host{--mg-c-card-border:none;--mg-c-card-spacing:0;--mg-c-card-border-radius:var(--mg-c-panel-border-radius);--mg-c-card-color-background:var(--mg-c-panel-color-background);--mg-c-card-box-shadow:var(--mg-c-panel-box-shadow)}.mg-c-panel__header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;padding:0 var(--mg-b-size-4)}.mg-c-panel__header-title,.mg-c-panel__header-content{display:flex;margin:var(--mg-b-size-4) 0}.mg-c-panel__header-content{min-height:var(--mg-b-size-min-height);flex:1 auto;align-items:center;padding-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-input-text{flex-grow:1;margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title mg-button+mg-button:not([slot=append-input]){margin-left:var(--mg-b-size-4)}.mg-c-panel__header-title.mg-c-panel__header-title--full{flex:1 1 auto}.mg-c-panel__collapse-button-content{--mg-b-font-size:var(--mg-b-font-size-h5);--mg-c-button-font-weight:600}.mg-c-panel__collapse-button-icon.mg-c-panel__collapse-button-icon--reverse{transform:rotate(180deg)}.mg-c-panel__content{padding:var(--mg-c-panel-content-spacing)}.mg-c-panel ::slotted([slot=header-right]){display:flex;flex-wrap:wrap;margin-left:auto;gap:var(--mg-b-spacing-actions)}.mg-c-panel ::slotted(*:not(mg-panel,mg-message,mg-modal)){--mg-c-card-border:var(--mg-c-card-border-default);--mg-c-card-spacing:var(--mg-c-card-spacing-default);--mg-c-card-border-radius:var(--mg-c-card-border-radius-default);--mg-c-card-color-background:var(--mg-c-card-color-background-default);--mg-c-card-box-shadow:var(--mg-c-card-box-shadow-default);--mg-c-card-max-width:unset;--mg-c-card-min-width:unset}";
 
 const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLElement {
     constructor() {
@@ -54,6 +55,10 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
          * Disable possibility to toggle expand
          */
         this.expandToggleDisabled = false;
+        /**
+         * Add box-shadow style
+         */
+        this.shadow = false;
         /**
          * Component classes
          */
@@ -213,7 +218,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
      */
     render() {
         const headerId = `${this.identifier}-header`;
-        return (h("section", { key: '6aae78aba1165a5e84ea58168b545bd804615dc6', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '588fc4a2a0445bea2a60a05a5bfe58efbbf02670' }, h("header", { key: '42e75406706c913e5c33a192c49659d927fabea7', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '18f81805215284977a31e7320a260110b51b2e5a', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '789b4432247cc58a11df789cdf748f9e0e306565' })))));
+        return (h("section", { key: '6d9b0759cf8d6a8e94a1a6598f45fc00288ca22a', class: this.classCollection.join(), id: this.identifier }, h("mg-card", { key: '21b0d991daf053506097333df58d3b98ec2e5b0e', shadow: this.shadow }, h("header", { key: 'abd9dbeb13d85c9a66aac13e7b32e6a83e2ded57', class: { 'mg-c-panel__header': true, 'mg-c-panel__header--reverse': this.titlePosition === 'right' }, id: headerId }, this.renderHeaderChildren()), h("article", { key: '23c74b70bd275fb18c853a1b7a0a4b4ff5a4c605', class: "mg-c-panel__content", id: `${this.identifier}-content`, "aria-labelledby": headerId, hidden: !this.expanded }, h("slot", { key: '15561936437c960768c4954f45df4045ac3dee03' })))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -226,7 +231,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
         "expandToggleDisplay": ["validateExpandToggleDisplay"]
     }; }
     static get style() { return mgPanelCss; }
-}, [1, "mg-panel", {
+}, [257, "mg-panel", {
         "identifier": [1],
         "panelTitle": [1025, "panel-title"],
         "titlePattern": [1, "title-pattern"],
@@ -236,6 +241,7 @@ const MgPanel$1 = /*@__PURE__*/ proxyCustomElement(class MgPanel extends HTMLEle
         "expanded": [1028],
         "expandToggleDisplay": [1, "expand-toggle-display"],
         "expandToggleDisabled": [4, "expand-toggle-disabled"],
+        "shadow": [4],
         "classCollection": [32],
         "isEditing": [32],
         "updatedPanelTitle": [32]
@@ -252,7 +258,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["mg-panel", "mg-button", "mg-card", "mg-character-left", "mg-icon", "mg-input", "mg-input-text", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
+    const components = ["mg-panel", "mg-button", "mg-card", "mg-character-left", "mg-details", "mg-icon", "mg-input", "mg-input-text", "mg-input-title", "mg-tooltip", "mg-tooltip-content"];
     components.forEach(tagName => { switch (tagName) {
         case "mg-panel":
             if (!customElements.get(tagName)) {
@@ -261,15 +267,20 @@ function defineCustomElement$1() {
             break;
         case "mg-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "mg-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "mg-character-left":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "mg-details":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
@@ -312,6 +323,3 @@ const MgPanel = MgPanel$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgPanel, defineCustomElement };
-//# sourceMappingURL=mg-panel.js.map
-
-//# sourceMappingURL=mg-panel.js.map

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

@@ -4,6 +4,3 @@ const MgPopoverContent = MgPopoverContent$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgPopoverContent, defineCustomElement };
-//# sourceMappingURL=mg-popover-content.js.map
-
-//# sourceMappingURL=mg-popover-content.js.map

package/dist/components/mg-popover-content2.js

@@ -53,11 +53,11 @@ const MgPopoverContent = /*@__PURE__*/ proxyCustomElement(class MgPopoverContent
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: 'c87fe52d52b80954170963fd1378b3a05313f9c6' }, h("mg-card", { key: '814aeebb329016ba553c941d85397872b6a729aa', class: this.classCollection.join() }, this.closeButton && (h("mg-button", { key: '5b2598be40fe42fd135b2969193d44265ebe7970', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: 'e96557893047b803c212d89d859f312a9e467ba1', icon: "cross" }))), h("div", { key: 'ba71f91050872644e778e6f4a1659e2b446111ed', class: "mg-c-popover-content__title" }, h("slot", { key: '2200f5ee095635af0ac283a645a2f65e5139a7e0', name: "title" })), h("slot", { key: 'cc80f376937761c563fc73055aa4288e9b54eef4', name: "content" })), h("slot", { key: 'b4cbdb1e109eaade8053d34cf6840c7474675ba5', name: "arrow" })));
+        return (h(Host, { key: '2746e72f636c1a702d2b15836343ca8503f233e5' }, h("mg-card", { key: '84e28550627969d4e15ded5a5f8b6d19584eb891', class: this.classCollection.join(), shadow: true }, this.closeButton && (h("mg-button", { key: 'f25c773593441597e81330997df3175cd9a963e4', "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { key: '723f3d1e8a85356d7aa9be9c875b273d7c9c1f72', icon: "cross" }))), h("div", { key: '283316f2a66212d9afc128aaec3fb24e4a40c0eb', class: "mg-c-popover-content__title" }, h("slot", { key: 'a1839a9a3259ccb221b90e82f786eb0e7c3d2a19', name: "title" })), h("slot", { key: '708903013417e27f4a9ed9811fde886d6b697dec', name: "content" })), h("slot", { key: 'fad6024a2474ffd5f46925101baa0e6ab9f2e951', name: "arrow" })));
     }
     get element() { return this; }
     static get style() { return mgPopoverContentCss; }
-}, [1, "mg-popover-content", {
+}, [257, "mg-popover-content", {
         "closeButton": [4, "close-button"],
         "classCollection": [32]
     }]);
@@ -92,6 +92,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgPopoverContent as M, defineCustomElement as d };
-//# sourceMappingURL=mg-popover-content2.js.map
-
-//# sourceMappingURL=mg-popover-content2.js.map

package/dist/components/mg-popover.js

@@ -4,6 +4,3 @@ const MgPopover = MgPopover$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgPopover, defineCustomElement };
-//# sourceMappingURL=mg-popover.js.map
-
-//# sourceMappingURL=mg-popover.js.map

package/dist/components/mg-popover2.js

@@ -249,7 +249,7 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: 'c25d773831395cf154f85cda3be67af22d6d8767' }, h("slot", { key: 'c6fb5897222e527cc36c78e1f32aaadc4d3c4b01' }), h("slot", { key: 'd7f682fdf78caa8491b8e9a74e6d5e91dbf5ef84', name: "content" })));
+        return (h(Host, { key: '7ea28f19a5a61f6191c2aece439e85da8f067270' }, h("slot", { key: 'aa6a627b90246ca327e2971329ab58b02eeb1d04' }), h("slot", { key: '1851353a6b4de659d6027a0bf3ba5f2120f7137d', name: "content" })));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -259,7 +259,7 @@ const MgPopover = /*@__PURE__*/ proxyCustomElement(class MgPopover extends HTMLE
         "display": ["handleDisplay"]
     }; }
     static get style() { return mgPopoverCss; }
-}, [1, "mg-popover", {
+}, [257, "mg-popover", {
         "identifier": [1],
         "placement": [1],
         "arrowHide": [4, "arrow-hide"],
@@ -308,6 +308,3 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgPopover as M, defineCustomElement as d };
-//# sourceMappingURL=mg-popover2.js.map
-
-//# sourceMappingURL=mg-popover2.js.map

package/dist/components/mg-progress.js

@@ -75,7 +75,7 @@ const MgProgress$1 = /*@__PURE__*/ proxyCustomElement(class MgProgress extends H
      * @returns HTML Element
      */
     render() {
-        return (h(Host, { key: 'e6d254a68f35c5019158ab17fcb0e4dfd1943ef8', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: '5b427579ad97336076504a45013a0be00673f9a9', class: "mg-c-progress" }, h("div", { key: '76dbdf88550caf51890e10c45c034d73cd02db5d', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, h("div", { key: 'b0ab6f784cdb8cc25a40b83a0d97bcda5b5c1f9b', class: "mg-c-progress__fill", style: {
+        return (h(Host, { key: '62c66dbd93249bfde3eb8ff449b49884edfe49c3', role: this.ariaRole, "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("div", { key: 'b349c9d7358086ca4668705a1935fd8bbdb86afa', class: "mg-c-progress" }, h("div", { key: '57cc19d07c0f006f8ecf3a1f86ec12e37ffd8d6b', class: { 'mg-c-progress__bar': true, 'mg-c-progress__bar--active': this.value > this.min } }, h("div", { key: 'b4c49d94d9cfe2e1a6d8013aa4a39cde51b36d04', class: "mg-c-progress__fill", style: {
                 width: `${Math.round(((this.value - this.min) / (this.max - this.min)) * 100)}%`,
             } })))));
     }
@@ -87,7 +87,7 @@ const MgProgress$1 = /*@__PURE__*/ proxyCustomElement(class MgProgress extends H
         "max": ["watchMax"]
     }; }
     static get style() { return mgProgressCss; }
-}, [1, "mg-progress", {
+}, [257, "mg-progress", {
         "label": [1],
         "ariaRole": [1, "aria-role"],
         "value": [2],
@@ -119,6 +119,3 @@ const MgProgress = MgProgress$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgProgress, defineCustomElement };
-//# sourceMappingURL=mg-progress.js.map
-
-//# sourceMappingURL=mg-progress.js.map

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

@@ -18,8 +18,9 @@ const MgSkipLinks$1 = /*@__PURE__*/ proxyCustomElement(class MgSkipLinks extends
          * @param event - mouse event
          */
         this.handleLinkCLick = (event) => {
-            event.currentTarget.blur();
-            this.goToAnchor.emit(event.currentTarget.getAttribute('href'));
+            const element = event.currentTarget;
+            element.blur();
+            this.goToAnchor.emit(element.getAttribute('href'));
         };
     }
     validateLinks(links) {
@@ -42,14 +43,14 @@ const MgSkipLinks$1 = /*@__PURE__*/ proxyCustomElement(class MgSkipLinks extends
      * @returns HTML Element
      */
     render() {
-        return (h("nav", { key: '334bfc3fdd2749ad172b03168f2d00d6c5d26a2f', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: 'dc9e2202c955f0ff582ae3fe9cd0b48542eb3c10', 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: '66ea9a2abfd1db7a1c7c46e9cdcd15af013ea406', class: "mg-c-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { key: '07f404865c3ad0d815b87e32a46716136ed77d7d', 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)))))));
     }
     get element() { return this; }
     static get watchers() { return {
         "links": ["validateLinks"]
     }; }
     static get style() { return mgSkipLinksCss; }
-}, [1, "mg-skip-links", {
+}, [257, "mg-skip-links", {
         "links": [16]
     }, undefined, {
         "links": ["validateLinks"]
@@ -73,6 +74,3 @@ const MgSkipLinks = MgSkipLinks$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgSkipLinks, defineCustomElement };
-//# sourceMappingURL=mg-skip-links.js.map
-
-//# sourceMappingURL=mg-skip-links.js.map

package/dist/components/mg-table.js

@@ -16,7 +16,7 @@ const textAlignments = ['left', 'center', 'right'];
 // Define possible data types
 const dataTypes = ['string', 'numeric', 'date'];
 
-const mgTableCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}@font-face{font-family:\"Open Sans\";src:url(\"fonts/OpenSans-Regular.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:600;src:url(\"fonts/OpenSans-SemiBold.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:700;src:url(\"fonts/OpenSans-Bold.ttf\") format(\"truetype\")}p{margin:0}p+p{margin-top:var(--mg-b-size-8)}h1,.mg-u-h1{font-family:var(--mg-b-font-family-heading);font-weight:bold}h2,.mg-u-h2{font-family:var(--mg-b-font-family-heading);font-weight:bold}h3,.mg-u-h3{font-family:var(--mg-b-font-family-heading);font-weight:bold}h4,.mg-u-h4{font-family:var(--mg-b-font-family-heading);font-weight:bold}h5,.mg-u-h5{font-family:var(--mg-b-font-family-heading);font-weight:bold}h6,.mg-u-h6{font-family:var(--mg-b-font-family-heading);font-weight:bold}h1,.mg-u-h1{font-size:var(--mg-b-font-size-h1)}h2,.mg-u-h2{font-size:var(--mg-b-font-size-h2)}h3,.mg-u-h3{font-size:var(--mg-b-font-size-h3)}h4,.mg-u-h4{font-size:var(--mg-b-font-size-h4)}h5,.mg-u-h5{font-size:var(--mg-b-font-size-h5)}h6,.mg-u-h6{font-size:var(--mg-b-font-size-h6)}small{font-size:var(--mg-b-small-font-size)}.mg-u-text-left{text-align:left !important}.mg-u-text-center{text-align:center !important}.mg-u-text-right{text-align:right !important}.mg-c-table{--mg-c-table-cell-spacing:var(--mg-b-size-8) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-40);--mg-c-table-header-cell-height:calc(var(--mg-b-size-min-height) + 2 * var(--mg-b-size-8));overflow:hidden;border:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30);border-radius:var(--mg-b-size-12);background:var(--mg-b-color-light);border-spacing:0;color:var(--mg-b-color-dark)}.mg-c-table td,.mg-c-table th{height:var(--mg-c-table-cell-height);box-sizing:border-box;padding:var(--mg-c-table-cell-spacing);text-align:start}.mg-c-table thead{height:var(--mg-c-table-header-cell-height)}.mg-c-table thead,.mg-c-table tfoot{background-color:var(--mg-b-color-neutral-10)}.mg-c-table thead td,.mg-c-table tfoot td,.mg-c-table th{font-weight:600}.mg-c-table tr th,.mg-c-table tr td{border-block-end:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30)}.mg-c-table tfoot tr:last-of-type th,.mg-c-table tfoot tr:last-of-type td{border-block-end:none}.mg-c-table.mg-c-table--size-small{--mg-c-table-cell-spacing:var(--mg-b-size-4) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-32);--mg-c-table-header-cell-height:var(--mg-b-size-32)}.mg-c-table.mg-c-table--size-large{--mg-c-table-cell-height:var(--mg-c-table-header-cell-height)}.mg-c-table.mg-c-table--size-xlarge{--mg-c-table-cell-spacing:var(--mg-b-size-12) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-64);--mg-c-table-header-cell-height:var(--mg-b-size-64)}.mg-c-table.mg-c-table--full-width{width:100%}.mg-c-table-wrapper{overflow:auto}.mg-c-table thead td,.mg-c-table thead th{position:relative}.mg-c-table thead td .mg-c-table__sort-button,.mg-c-table thead th .mg-c-table__sort-button{display:inline-flex;align-items:center;padding:0;border:none;margin:0;background:none;color:inherit;font-size:inherit;font-weight:600;gap:var(--mg-b-size-4);text-align:left}.mg-c-table thead td .mg-c-table__sort-button::after,.mg-c-table thead th .mg-c-table__sort-button::after{position:absolute;content:\"\";inset:0}.mg-c-table thead td .mg-c-table__sort-button:hover,.mg-c-table thead th .mg-c-table__sort-button:hover{cursor:pointer}.mg-c-table thead td:has(.mg-c-table__sort-button):hover,.mg-c-table thead td[aria-sort=descending],.mg-c-table thead td[aria-sort=ascending],.mg-c-table thead th:has(.mg-c-table__sort-button):hover,.mg-c-table thead th[aria-sort=descending],.mg-c-table thead th[aria-sort=ascending]{background-color:var(--mg-b-color-neutral-20)}";
+const mgTableCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}a{color:inherit;text-decoration:underline}a:hover,a:focus,a:active{text-decoration:none}@font-face{font-family:\"Open Sans\";src:url(\"fonts/OpenSans-Regular.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:600;src:url(\"fonts/OpenSans-SemiBold.ttf\") format(\"truetype\")}@font-face{font-family:\"Open Sans\";font-weight:700;src:url(\"fonts/OpenSans-Bold.ttf\") format(\"truetype\")}p{margin:0}p+p{margin-top:var(--mg-b-size-8)}h1,.mg-u-h1{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h1);font-weight:bold}h2,.mg-u-h2{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h2);font-weight:bold}h3,.mg-u-h3{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h3);font-weight:bold}h4,.mg-u-h4{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h4);font-weight:bold}h5,.mg-u-h5{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h5);font-weight:bold}h6,.mg-u-h6{font-family:var(--mg-b-font-family-heading);font-size:var(--mg-b-font-size-h6);font-weight:bold}small{font-size:var(--mg-b-small-font-size)}.mg-u-text-left{text-align:left !important}.mg-u-text-center{text-align:center !important}.mg-u-text-right{text-align:right !important}.mg-c-table{--mg-c-table-cell-spacing:var(--mg-b-size-8) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-40);--mg-c-table-header-cell-height:calc(var(--mg-b-size-min-height) + 2 * var(--mg-b-size-8));overflow:hidden;border:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30);border-radius:var(--mg-b-size-12);background:var(--mg-b-color-light);border-spacing:0;color:var(--mg-b-color-dark)}.mg-c-table td,.mg-c-table th{height:var(--mg-c-table-cell-height);box-sizing:border-box;padding:var(--mg-c-table-cell-spacing);text-align:start}.mg-c-table thead{height:var(--mg-c-table-header-cell-height)}.mg-c-table thead,.mg-c-table tfoot{background-color:var(--mg-b-color-neutral-10)}.mg-c-table thead td,.mg-c-table tfoot td,.mg-c-table th{font-weight:600}.mg-c-table tr th,.mg-c-table tr td{border-block-end:var(--mg-b-size-border) solid var(--mg-b-color-neutral-30)}.mg-c-table tfoot tr:last-of-type th,.mg-c-table tfoot tr:last-of-type td{border-block-end:none}.mg-c-table.mg-c-table--size-small{--mg-c-table-cell-spacing:var(--mg-b-size-4) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-32);--mg-c-table-header-cell-height:var(--mg-b-size-32)}.mg-c-table.mg-c-table--size-large{--mg-c-table-cell-height:var(--mg-c-table-header-cell-height)}.mg-c-table.mg-c-table--size-xlarge{--mg-c-table-cell-spacing:var(--mg-b-size-12) var(--mg-b-size-16);--mg-c-table-cell-height:var(--mg-b-size-64);--mg-c-table-header-cell-height:var(--mg-b-size-64)}.mg-c-table.mg-c-table--full-width{width:100%}.mg-c-table-wrapper{overflow:auto}.mg-c-table thead td,.mg-c-table thead th{position:relative}.mg-c-table thead td .mg-c-table__sort-button,.mg-c-table thead th .mg-c-table__sort-button{display:inline-flex;align-items:center;padding:0;border:none;margin:0;background:none;color:inherit;font-size:inherit;font-weight:600;gap:var(--mg-b-size-4);text-align:left}.mg-c-table thead td .mg-c-table__sort-button::after,.mg-c-table thead th .mg-c-table__sort-button::after{position:absolute;content:\"\";inset:0}.mg-c-table thead td .mg-c-table__sort-button:hover,.mg-c-table thead th .mg-c-table__sort-button:hover{cursor:pointer}.mg-c-table thead td:has(.mg-c-table__sort-button):hover,.mg-c-table thead td[aria-sort=descending],.mg-c-table thead td[aria-sort=ascending],.mg-c-table thead th:has(.mg-c-table__sort-button):hover,.mg-c-table thead th[aria-sort=descending],.mg-c-table thead th[aria-sort=ascending]{background-color:var(--mg-b-color-neutral-20)}";
 
 /**
  * Check if value is a valid align object
@@ -127,11 +127,11 @@ const MgTable$1 = /*@__PURE__*/ proxyCustomElement(class MgTable extends HTMLEle
             Object.entries(this.columns).forEach(([key, value]) => {
                 // Add alignment to stylesheet
                 if (value.align !== undefined) {
-                    this.alignmentStylesheet.insertRule(`.${this.componentClass}{th:nth-child(${key}),td:nth-child(${key}){text-align:${value.align}}}`);
+                    this.alignmentStylesheet.insertRule(`.${this.componentClass} th:nth-child(${key}),td:nth-child(${key}){text-align:${value.align};&>*{display:inline-block;}}`);
                 }
                 // if align is not defined and datatype is number, align right
                 else if (value.datatype === 'numeric') {
-                    this.alignmentStylesheet.insertRule(`.${this.componentClass}{th:nth-child(${key}),td:nth-child(${key}){text-align:right}}`);
+                    this.alignmentStylesheet.insertRule(`.${this.componentClass} th:nth-child(${key}),td:nth-child(${key}){text-align:right;&>*{display:inline-block;}}`);
                 }
                 // Define if column is sortable
                 if (value.sortable) {
@@ -218,7 +218,7 @@ const MgTable$1 = /*@__PURE__*/ proxyCustomElement(class MgTable extends HTMLEle
             });
         }
         // Add alignment to columns
-        this.element.shadowRoot.adoptedStyleSheets = [...this.element.shadowRoot.adoptedStyleSheets, this.alignmentStylesheet];
+        this.element.shadowRoot.adoptedStyleSheets.push(this.alignmentStylesheet);
         // Create div wrapper for responsive behavior
         const divWrapper = document.createElement('div');
         divWrapper.setAttribute('class', this.componentWrapperClass);
@@ -315,6 +315,3 @@ const MgTable = MgTable$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgTable, defineCustomElement };
-//# sourceMappingURL=mg-table.js.map
-
-//# sourceMappingURL=mg-table.js.map