@mgdis/mg-components 6.13.1 → 6.15.0

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

@@ -152,6 +152,7 @@ export class MgPagination {
         return {
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -166,12 +167,12 @@ export class MgPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false,
                 "defaultValue": "createID('mg-pagination')"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -186,11 +187,11 @@ export class MgPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "hideNavigationLabels": {
                 "type": "boolean",
+                "attribute": "hide-navigation-labels",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -205,12 +206,12 @@ export class MgPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-navigation-labels",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "hidePageCount": {
                 "type": "boolean",
+                "attribute": "hide-page-count",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -225,12 +226,12 @@ export class MgPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-page-count",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "totalPages": {
                 "type": "number",
+                "attribute": "total-pages",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -245,12 +246,12 @@ export class MgPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "total-pages",
                 "reflect": false,
                 "defaultValue": "1"
             },
             "currentPage": {
                 "type": "number",
+                "attribute": "current-page",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -265,12 +266,12 @@ export class MgPagination {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "current-page",
                 "reflect": true,
                 "defaultValue": "1"
             },
             "messages": {
                 "type": "unknown",
+                "attribute": "messages",
                 "mutable": false,
                 "complexType": {
                     "original": "PaginationMessagesType",
@@ -329,4 +330,3 @@ export class MgPagination {
             }];
     }
 }
-//# sourceMappingURL=mg-pagination.js.map

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

@@ -6,4 +6,3 @@ export const expandToggleDisplays = ['text', 'icon'];
  * Available title positions
  */
 export const titlePositions = ['left', 'right'];
-//# sourceMappingURL=mg-panel.conf.js.map

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

@@ -33,6 +33,10 @@ export class MgPanel {
          * Disable possibility to toggle expand
          */
         this.expandToggleDisabled = false;
+        /**
+         * Add box-shadow style
+         */
+        this.shadow = false;
         /**
          * Component classes
          */
@@ -192,7 +196,7 @@ export class MgPanel {
      */
     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' })))));
     }
     static get is() { return "mg-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -210,6 +214,7 @@ export class MgPanel {
         return {
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -224,12 +229,12 @@ export class MgPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false,
                 "defaultValue": "createID('mg-panel')"
             },
             "panelTitle": {
                 "type": "string",
+                "attribute": "panel-title",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -244,11 +249,11 @@ export class MgPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "panel-title",
                 "reflect": false
             },
             "titlePattern": {
                 "type": "string",
+                "attribute": "title-pattern",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -263,11 +268,11 @@ export class MgPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "title-pattern",
                 "reflect": false
             },
             "titlePatternErrorMessage": {
                 "type": "string",
+                "attribute": "title-pattern-error-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -282,11 +287,11 @@ export class MgPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "title-pattern-error-message",
                 "reflect": false
             },
             "titleEditable": {
                 "type": "boolean",
+                "attribute": "title-editable",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -301,12 +306,12 @@ export class MgPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "title-editable",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "titlePosition": {
                 "type": "string",
+                "attribute": "title-position",
                 "mutable": false,
                 "complexType": {
                     "original": "TitlePositionType",
@@ -327,12 +332,12 @@ export class MgPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "title-position",
                 "reflect": false,
                 "defaultValue": "'left'"
             },
             "expanded": {
                 "type": "boolean",
+                "attribute": "expanded",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -347,12 +352,12 @@ export class MgPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expanded",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "expandToggleDisplay": {
                 "type": "string",
+                "attribute": "expand-toggle-display",
                 "mutable": false,
                 "complexType": {
                     "original": "ExpandToggleDisplayType",
@@ -373,12 +378,12 @@ export class MgPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expand-toggle-display",
                 "reflect": false,
                 "defaultValue": "'text'"
             },
             "expandToggleDisabled": {
                 "type": "boolean",
+                "attribute": "expand-toggle-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -393,7 +398,26 @@ export class MgPanel {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expand-toggle-disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "shadow": {
+                "type": "boolean",
+                "attribute": "shadow",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Add box-shadow style"
+                },
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -475,4 +499,3 @@ export class MgPanel {
             }];
     }
 }
-//# sourceMappingURL=mg-panel.js.map

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: '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" })));
     }
     static get is() { return "mg-popover-content"; }
     static get encapsulation() { return "shadow"; }
@@ -64,6 +64,7 @@ export class MgPopoverContent {
         return {
             "closeButton": {
                 "type": "boolean",
+                "attribute": "close-button",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -78,7 +79,6 @@ export class MgPopoverContent {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "close-button",
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -109,4 +109,3 @@ export class MgPopoverContent {
     }
     static get elementRef() { return "element"; }
 }
-//# sourceMappingURL=mg-popover-content.js.map

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

@@ -242,7 +242,7 @@ export class MgPopover {
      * @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" })));
     }
     static get is() { return "mg-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -260,6 +260,7 @@ export class MgPopover {
         return {
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -274,12 +275,12 @@ export class MgPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false,
                 "defaultValue": "createID('mg-popover')"
             },
             "placement": {
                 "type": "string",
+                "attribute": "placement",
                 "mutable": false,
                 "complexType": {
                     "original": "Placement",
@@ -300,12 +301,12 @@ export class MgPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placement",
                 "reflect": false,
                 "defaultValue": "'bottom'"
             },
             "arrowHide": {
                 "type": "boolean",
+                "attribute": "arrow-hide",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -320,12 +321,12 @@ export class MgPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "arrow-hide",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "closeButton": {
                 "type": "boolean",
+                "attribute": "close-button",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -340,12 +341,12 @@ export class MgPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "close-button",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "display": {
                 "type": "boolean",
+                "attribute": "display",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -360,12 +361,12 @@ export class MgPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "display",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -380,7 +381,6 @@ export class MgPopover {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             }
@@ -441,4 +441,3 @@ export class MgPopover {
             }];
     }
 }
-//# sourceMappingURL=mg-popover.js.map

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

@@ -2,4 +2,3 @@
  * List of all possibles roles
  */
 export const roles = ['progressbar', 'meter'];
-//# sourceMappingURL=mg-progress.conf.js.map

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: '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)}%`,
             } })))));
     }
@@ -85,6 +85,7 @@ export class MgProgress {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -99,11 +100,11 @@ export class MgProgress {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false
             },
             "ariaRole": {
                 "type": "string",
+                "attribute": "aria-role",
                 "mutable": false,
                 "complexType": {
                     "original": "AriaRoleType",
@@ -124,12 +125,12 @@ export class MgProgress {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria-role",
                 "reflect": false,
                 "defaultValue": "'progressbar'"
             },
             "value": {
                 "type": "number",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -144,12 +145,12 @@ export class MgProgress {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "min": {
                 "type": "number",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -164,12 +165,12 @@ export class MgProgress {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "max": {
                 "type": "number",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -184,7 +185,6 @@ export class MgProgress {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": false,
                 "defaultValue": "100"
             }
@@ -209,4 +209,3 @@ export class MgProgress {
             }];
     }
 }
-//# sourceMappingURL=mg-progress.js.map

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

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=mg-skip-links.conf.js.map

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

@@ -11,8 +11,9 @@ export class MgSkipLinks {
          * @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) {
@@ -35,7 +36,7 @@ export class MgSkipLinks {
      * @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)))))));
     }
     static get is() { return "mg-skip-links"; }
     static get encapsulation() { return "shadow"; }
@@ -53,6 +54,7 @@ export class MgSkipLinks {
         return {
             "links": {
                 "type": "unknown",
+                "attribute": "links",
                 "mutable": false,
                 "complexType": {
                     "original": "SkipLink[]",
@@ -102,4 +104,3 @@ export class MgSkipLinks {
             }];
     }
 }
-//# sourceMappingURL=mg-skip-links.js.map

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

@@ -10,4 +10,3 @@ export const sizes = ['small', 'medium', 'large', 'xlarge'];
 export const textAlignments = ['left', 'center', 'right'];
 // Define possible data types
 export const dataTypes = ['string', 'numeric', 'date'];
-//# sourceMappingURL=mg-table.conf.js.map

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

@@ -110,11 +110,11 @@ export class MgTable {
             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) {
@@ -201,7 +201,7 @@ export class MgTable {
             });
         }
         // 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);
@@ -273,6 +273,7 @@ export class MgTable {
         return {
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "TableSizeType",
@@ -293,12 +294,12 @@ export class MgTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'medium'"
             },
             "fullWidth": {
                 "type": "boolean",
+                "attribute": "full-width",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -313,12 +314,12 @@ export class MgTable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "full-width",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "columns": {
                 "type": "unknown",
+                "attribute": "columns",
                 "mutable": false,
                 "complexType": {
                     "original": "ColumnsType",
@@ -361,4 +362,3 @@ export class MgTable {
             }];
     }
 }
-//# sourceMappingURL=mg-table.js.map

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

@@ -11,4 +11,3 @@ export const Status = {
  * List of all possibles sizes
  */
 export const sizes = ['medium', 'large'];
-//# sourceMappingURL=mg-tabs.conf.js.map