@mgdis/mg-components 4.1.0 → 4.2.0

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

@@ -1,4 +1,4 @@
-import { Component, Element, Host, h, Prop, Watch, Event } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 import { createID, isTagName } from '../../../utils/components.utils';
 import { createPopper } from '@popperjs/core';
 import { initLocales } from '../../../locales';
@@ -151,140 +151,142 @@ export class MgPopover {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(Host, null,
-      h("slot", null),
-      h("div", { id: this.identifier, class: "mg-popover" },
-        !this.disabled && this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton },
-          h("mg-icon", { icon: "cross" }))),
-        h("div", { class: "mg-popover__title" },
-          h("slot", { name: "title" })),
-        h("slot", { name: "content" }),
-        h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
+    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: "mg-popover" }, !this.disabled && this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-popover__title" }, h("slot", { name: "title" })), h("slot", { name: "content" }), h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
   }
   static get is() { return "mg-popover"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["mg-popover.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["mg-popover.css"]
-  }; }
-  static get properties() { return {
-    "identifier": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Sets an `id` attribute.\nNeeded by the input for accessibility `aria-decribedby`."
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-popover.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-popover.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "identifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets an `id` attribute.\nNeeded by the input for accessibility `aria-decribedby`."
+        },
+        "attribute": "identifier",
+        "reflect": false,
+        "defaultValue": "createID('mg-popover')"
       },
-      "attribute": "identifier",
-      "reflect": false,
-      "defaultValue": "createID('mg-popover')"
-    },
-    "placement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Placement",
-        "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-        "references": {
-          "Placement": {
-            "location": "import",
-            "path": "./mg-popover.conf"
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Placement",
+          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "Placement": {
+              "location": "import",
+              "path": "./mg-popover.conf"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Popover placement"
-      },
-      "attribute": "placement",
-      "reflect": false,
-      "defaultValue": "'bottom'"
-    },
-    "closeButton": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define if popover has a cross button"
-      },
-      "attribute": "close-button",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "display": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Display popover"
-      },
-      "attribute": "display",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Popover placement"
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'bottom'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Disable popover"
+      "closeButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define if popover has a cross button"
+        },
+        "attribute": "close-button",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get events() { return [{
-      "method": "displayChange",
-      "name": "display-change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emited event when display value change"
+      "display": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Display popover"
+        },
+        "attribute": "display",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "disabled": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disable popover"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
       }
-    }]; }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "displayChange",
+        "name": "display-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emited event when display value change"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "display",
-      "methodName": "handleDisplay"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "display",
+        "methodName": "handleDisplay"
+      }];
+  }
 }

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

@@ -19,11 +19,7 @@ export default {
  * @returns {HTMLElement} HTMLElement
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => (h("mg-tabs", Object.assign({}, filterArgs(args, { size: sizes[0], activeTab: 1 })),
-  h("div", { slot: "tab_content-1" }, "Content 1"),
-  h("div", { slot: "tab_content-2" }, "Content 2"),
-  h("div", { slot: "tab_content-3" }, "Content 3"),
-  h("div", { slot: "tab_content-4" }, "Content 4")));
+const Template = (args) => (h("mg-tabs", Object.assign({}, filterArgs(args, { size: sizes[0], activeTab: 1 })), h("div", { slot: "tab_content-1" }, "Content 1"), h("div", { slot: "tab_content-2" }, "Content 2"), h("div", { slot: "tab_content-3" }, "Content 3"), h("div", { slot: "tab_content-4" }, "Content 4")));
 export const MgTabs = Template.bind({});
 MgTabs.args = {
   items: ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4'],

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

@@ -19,6 +19,7 @@
   background: none;
   border: none;
   border-bottom: 0.3rem solid transparent;
+  font-family: var(--font-family);
   color: hsl(var(--color-dark));
   line-height: var(--line-height);
   cursor: pointer;

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

@@ -1,4 +1,4 @@
-import { Component, Event, h, Prop, State, Element, Watch } from '@stencil/core';
+import { h } from '@stencil/core';
 import { createID, ClassList, allItemsAreString } from '../../../utils/components.utils';
 import { sizes, Status } from './mg-tabs.conf';
 /**
@@ -129,6 +129,11 @@ export class MgTabs {
       }
     };
   }
+  validateLabel(newValue) {
+    if (typeof newValue !== 'string' || newValue.trim() === '') {
+      throw new Error('<mg-tabs> prop "label" is required.');
+    }
+  }
   validateSize(newValue) {
     if (!sizes.includes(newValue)) {
       throw new Error(`<mg-tabs> prop "size" must be one of : ${sizes.join(', ')}`);
@@ -166,6 +171,7 @@ export class MgTabs {
    */
   componentWillLoad() {
     // Check tabs format
+    this.validateLabel(this.label);
     this.validateItems(this.items);
     this.validateActiveTab(this.activeTab);
     this.validateSize(this.size);
@@ -177,149 +183,158 @@ export class MgTabs {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("div", { class: this.classList.join() },
-      h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { role: "tab", id: this.getElementId(this.identifier, index), class: {
-          [`${this.buttonTabBaseClass}`]: true,
-          [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasGivenStatus(tab, Status.ACTIVE),
-          [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasGivenStatus(tab, Status.DISABLED),
-          [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasGivenStatus(tab, Status.HIDDEN),
-        }, tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasGivenStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabIndex(index), disabled: this.tabHasGivenStatus(tab, Status.DISABLED) },
-        tab.icon !== undefined && h("mg-icon", { icon: tab.icon }),
-        tab.label,
-        tab.badge !== undefined && h("mg-badge", { variant: "info", value: tab.badge.value, label: tab.badge.label }))))),
-      this.tabs.map((tab, index) => (h("article", { role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasGivenStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-tabs__content-container" },
-        h("slot", { name: this.getElementId('tab_content', index) }))))));
+    return (h("div", { class: this.classList.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { role: "tab", id: this.getElementId(this.identifier, index), class: {
+        [`${this.buttonTabBaseClass}`]: true,
+        [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasGivenStatus(tab, Status.ACTIVE),
+        [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasGivenStatus(tab, Status.DISABLED),
+        [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasGivenStatus(tab, Status.HIDDEN),
+      }, tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasGivenStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabIndex(index), disabled: this.tabHasGivenStatus(tab, Status.DISABLED) }, tab.icon !== undefined && h("mg-icon", { icon: tab.icon }), tab.label, tab.badge !== undefined && h("mg-badge", { variant: "info", value: tab.badge.value, label: tab.badge.label }))))), this.tabs.map((tab, index) => (h("article", { role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasGivenStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-tabs__content-container" }, h("slot", { name: this.getElementId('tab_content', index) }))))));
   }
   static get is() { return "mg-tabs"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["mg-tabs.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["mg-tabs.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-tabs')"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Tabs label. Include short tabs description.\nRequired for accessibility"
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-tabs.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-tabs.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-tabs')"
       },
-      "attribute": "label",
-      "reflect": false
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tabs label. Include short tabs description.\nRequired for accessibility"
+        },
+        "attribute": "label",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define tabs size"
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define tabs size"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'regular'"
       },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'regular'"
-    },
-    "items": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "string[] | TabItem[]",
-        "resolved": "TabItem[] | string[]",
-        "references": {
-          "TabItem": {
-            "location": "import",
-            "path": "./mg-tabs.conf"
+      "items": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[] | TabItem[]",
+          "resolved": "TabItem[] | string[]",
+          "references": {
+            "TabItem": {
+              "location": "import",
+              "path": "./mg-tabs.conf"
+            }
           }
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tabs items\nRequired"
         }
       },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Tabs items\nRequired"
+      "activeTab": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Active tab number\ndefault: first is 1"
+        },
+        "attribute": "active-tab",
+        "reflect": true,
+        "defaultValue": "1"
       }
-    },
-    "activeTab": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Active tab number\ndefault: first is 1"
-      },
-      "attribute": "active-tab",
-      "reflect": true,
-      "defaultValue": "1"
-    }
-  }; }
-  static get states() { return {
-    "tabs": {},
-    "classList": {}
-  }; }
-  static get events() { return [{
-      "method": "activeTabChange",
-      "name": "active-tab-change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emited event when active tab change"
-      },
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "tabs": {},
+      "classList": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "activeTabChange",
+        "name": "active-tab-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emited event when active tab change"
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "size",
-      "methodName": "validateSize"
-    }, {
-      "propName": "items",
-      "methodName": "validateItems"
-    }, {
-      "propName": "activeTab",
-      "methodName": "validateActiveTab"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "label",
+        "methodName": "validateLabel"
+      }, {
+        "propName": "size",
+        "methodName": "validateSize"
+      }, {
+        "propName": "items",
+        "methodName": "validateItems"
+      }, {
+        "propName": "activeTab",
+        "methodName": "validateActiveTab"
+      }];
+  }
 }