@mgdis/mg-components 4.1.1 → 4.2.0

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

@@ -1,4 +1,4 @@
-import { Component, h, Prop, State, Watch, Element, Event, Listen } from '@stencil/core';
+import { h } from '@stencil/core';
 import { createID, ClassList } from '../../../utils/components.utils';
 import { initLocales } from '../../../locales';
 export class MgModal {
@@ -48,6 +48,11 @@ export class MgModal {
       this.hide = true;
     };
   }
+  validateModalTitle(newValue) {
+    if (typeof newValue !== 'string' || newValue.trim() === '') {
+      throw new Error('<mg-modal> prop "modalTitle" is required.');
+    }
+  }
   validateHide(newValue) {
     if (newValue) {
       this.componentHide.emit();
@@ -88,6 +93,7 @@ export class MgModal {
       this.closeButtonId = `${this.identifier}-close-button`;
     }
     this.titleId = `${this.identifier}-title`;
+    this.validateModalTitle(this.modalTitle);
     this.validateHide(this.hide);
   }
   /**
@@ -96,145 +102,152 @@ export class MgModal {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("section", { role: "dialog", id: this.identifier, class: this.classList.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide },
-      h("article", { class: "mg-modal__dialog" },
-        h("header", { class: "mg-modal__header" },
-          this.closeButton && (h("span", { class: "mg-modal__close-button" },
-            h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose },
-              h("mg-icon", { icon: "cross" })))),
-          h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)),
-        this.hasContent && (h("article", { class: "mg-modal__content" },
-          h("slot", { name: "content" }))),
-        this.hasActions && (h("footer", { class: "mg-modal__footer" },
-          h("slot", { name: "actions" }))))));
+    return (h("section", { role: "dialog", id: this.identifier, class: this.classList.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("article", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" }))))));
   }
   static get is() { return "mg-modal"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["mg-modal.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["mg-modal.css"]
-  }; }
-  static get properties() { return {
-    "identifier": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created."
-      },
-      "attribute": "identifier",
-      "reflect": false,
-      "defaultValue": "createID('mg-modal')"
-    },
-    "modalTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Displayed modal title\nrequired"
-      },
-      "attribute": "modal-title",
-      "reflect": false
-    },
-    "closeButton": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define if modal has a cross button"
-      },
-      "attribute": "close-button",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "hide": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define if modal is hidden"
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-modal.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-modal.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "identifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created."
+        },
+        "attribute": "identifier",
+        "reflect": false,
+        "defaultValue": "createID('mg-modal')"
       },
-      "attribute": "hide",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "hasActions": {},
-    "hasContent": {},
-    "classList": {}
-  }; }
-  static get events() { return [{
-      "method": "componentShow",
-      "name": "component-show",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emmited event when modal is diplayed"
+      "modalTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Displayed modal title\nrequired"
+        },
+        "attribute": "modal-title",
+        "reflect": false
       },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }, {
-      "method": "componentHide",
-      "name": "component-hide",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emmited event when modal is hidden"
+      "closeButton": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define if modal has a cross button"
+        },
+        "attribute": "close-button",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "hide": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define if modal is hidden"
+        },
+        "attribute": "hide",
+        "reflect": false,
+        "defaultValue": "false"
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "hasActions": {},
+      "hasContent": {},
+      "classList": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "componentShow",
+        "name": "component-show",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emmited event when modal is diplayed"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "componentHide",
+        "name": "component-hide",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emmited event when modal is hidden"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "hide",
-      "methodName": "validateHide"
-    }]; }
-  static get listeners() { return [{
-      "name": "keydown",
-      "method": "handleKeyDown",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "modalTitle",
+        "methodName": "validateModalTitle"
+      }, {
+        "propName": "hide",
+        "methodName": "validateHide"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "handleKeyDown",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -19,21 +19,20 @@
   outline: none;
 }
 
-.mg-pagination__nav {
+.mg-pagination {
   display: flex;
   align-items: center;
   flex-direction: row;
 }
-.mg-pagination__nav mg-input-select {
+.mg-pagination mg-input-select {
   margin-right: 0.5rem;
 }
-
-.mg-pagination__button {
+.mg-pagination mg-button {
   display: flex;
 }
-.mg-pagination__button:first-of-type {
+.mg-pagination mg-button:first-of-type {
   margin-right: 1rem;
 }
-.mg-pagination__button:last-of-type {
+.mg-pagination mg-button:last-of-type {
   margin-left: 1rem;
 }

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

@@ -1,4 +1,4 @@
-import { Component, Element, h, Prop, Watch, Event } from '@stencil/core';
+import { h } from '@stencil/core';
 import { createID } from '../../../utils/components.utils';
 import { NavigationAction } from './mg-pagination.conf';
 import { initLocales } from './../../../locales';
@@ -109,129 +109,124 @@ export class MgPagination {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    const navigationActionButton = (disabled, action) => (h("mg-button", { identifier: `${this.identifier}-button-${action}`, class: "mg-pagination__button", label: this.messages.pagination[`${action}Page`], 
+    const navigationActionButton = (disabled, action) => (h("mg-button", { identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],
       // eslint-disable-next-line react/jsx-no-bind
-      onClick: () => this.handleGoToPage(action), disabled: disabled, variant: "flat" },
-      action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }),
-      this.messages.general[action],
-      action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
-    return (h("nav", { "aria-label": this.label, id: this.identifier, class: "mg-pagination__nav" },
-      navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS),
-      h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }),
-      h("span", { class: "sr-only" },
-        this.messages.pagination.page,
-        " ",
-        this.currentPage),
-      h("span", null,
-        "/ ",
-        this.totalPages,
-        " ",
-        this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page),
-      navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)));
+      onClick: () => this.handleGoToPage(action), disabled: disabled, variant: "flat" }, action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }), this.messages.general[action], action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
+    return (h("nav", { "aria-label": this.label, id: this.identifier, class: "mg-pagination" }, navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS), h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }), h("span", { class: "sr-only" }, this.messages.pagination.page, " ", this.currentPage), h("span", null, "/ ", this.totalPages, " ", this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page), navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)));
   }
   static get is() { return "mg-pagination"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["mg-pagination.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["mg-pagination.css"]
-  }; }
-  static get properties() { return {
-    "identifier": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created."
-      },
-      "attribute": "identifier",
-      "reflect": false,
-      "defaultValue": "createID('mg-pagination')"
-    },
-    "label": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Panignation label. Is a short description.\nCustomize default value can be usefull to improve accessibility"
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "totalPages": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Component total pages"
-      },
-      "attribute": "total-pages",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "currentPage": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-pagination.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-pagination.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "identifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created."
+        },
+        "attribute": "identifier",
+        "reflect": false,
+        "defaultValue": "createID('mg-pagination')"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Component current page"
+      "label": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Panignation label. Is a short description.\nCustomize default value can be usefull to improve accessibility"
+        },
+        "attribute": "label",
+        "reflect": false
       },
-      "attribute": "current-page",
-      "reflect": true,
-      "defaultValue": "1"
-    }
-  }; }
-  static get events() { return [{
-      "method": "currentPageChange",
-      "name": "current-page-change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emmited event when current page change"
+      "totalPages": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Component total pages"
+        },
+        "attribute": "total-pages",
+        "reflect": false,
+        "defaultValue": "1"
       },
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "currentPage": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Component current page"
+        },
+        "attribute": "current-page",
+        "reflect": true,
+        "defaultValue": "1"
       }
-    }]; }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "currentPageChange",
+        "name": "current-page-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emmited event when current page change"
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "totalPages",
-      "methodName": "validateTotalPages"
-    }, {
-      "propName": "currentPage",
-      "methodName": "validateCurrentPage"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "totalPages",
+        "methodName": "validateTotalPages"
+      }, {
+        "propName": "currentPage",
+        "methodName": "validateCurrentPage"
+      }];
+  }
 }

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

@@ -12,14 +12,7 @@ export default {
  * @returns {HTMLElement} HTMLElement
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => (h("mg-panel", Object.assign({}, filterArgs(args)),
-  h("div", null, "Content"),
-  h("div", { slot: "header-right" },
-    h("mg-button", { variant: "secondary" },
-      h("mg-icon", { icon: "file-upload" }),
-      " Upload"),
-    h("mg-button", Object.assign({}, filterArgs({ isIcon: true }), { variant: "secondary", label: "delete" }),
-      h("mg-icon", { icon: "trash" })))));
+const Template = (args) => (h("mg-panel", Object.assign({}, filterArgs(args)), h("div", null, "Content"), h("div", { slot: "header-right" }, h("mg-button", { variant: "secondary" }, h("mg-icon", { icon: "file-upload" }), " Upload"), h("mg-button", Object.assign({}, filterArgs({ isIcon: true }), { variant: "secondary", label: "delete" }), h("mg-icon", { icon: "trash" })))));
 export const MgPanel = Template.bind({});
 MgPanel.args = {
   panelTitle: 'title',

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

@@ -36,11 +36,11 @@
 .mg-panel__header-left mg-button:not([slot=append-input]) > *:first-of-type {
   font-family: var(--font-family-heading);
   font-size: 1.4rem;
-  font-weight: 500;
+  font-weight: 600;
 }
 
 .mg-panel__content {
-  padding: 1.5rem;
+  padding: var(--mg-panel-content-padding);
 }
 
 .mg-panel ::slotted([slot=header-right]) {