@mgdis/mg-components 4.1.1 → 4.2.0

package/dist/collection/components/atoms/mg-icon/mg-icon.js

@@ -1,4 +1,4 @@
-import { Component, h, Prop, Watch, State } from '@stencil/core';
+import { h } from '@stencil/core';
 import { icons, sizes, variants } from './mg-icon.conf';
 import { ClassList } from '../../../utils/components.utils';
 export class MgIcon {
@@ -84,98 +84,108 @@ export class MgIcon {
   }
   static get is() { return "mg-icon"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["mg-icon.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["mg-icon.css"]
-  }; }
-  static get properties() { return {
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Icon to display"
-      },
-      "attribute": "icon",
-      "reflect": false
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define icon size"
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'regular'"
-    },
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define icon variant\nAdd a background to the icon based on variant color"
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-icon.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-icon.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon to display"
+        },
+        "attribute": "icon",
+        "reflect": false
       },
-      "attribute": "variant",
-      "reflect": false
-    },
-    "spin": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define icon size"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'regular'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Make the icon spin"
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define icon variant\nAdd a background to the icon based on variant color"
+        },
+        "attribute": "variant",
+        "reflect": false
       },
-      "attribute": "spin",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "classList": {}
-  }; }
-  static get watchers() { return [{
-      "propName": "icon",
-      "methodName": "validateIcon"
-    }, {
-      "propName": "size",
-      "methodName": "validateSize"
-    }, {
-      "propName": "variant",
-      "methodName": "validateVariant"
-    }, {
-      "propName": "spin",
-      "methodName": "handleSpin"
-    }]; }
+      "spin": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Make the icon spin"
+        },
+        "attribute": "spin",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "classList": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "icon",
+        "methodName": "validateIcon"
+      }, {
+        "propName": "size",
+        "methodName": "validateSize"
+      }, {
+        "propName": "variant",
+        "methodName": "validateVariant"
+      }, {
+        "propName": "spin",
+        "methodName": "handleSpin"
+      }];
+  }
 }

package/dist/collection/components/atoms/mg-input-title/mg-input-title.js

@@ -1,4 +1,4 @@
-import { Component, h, Prop, State } from '@stencil/core';
+import { h } from '@stencil/core';
 export class MgInputTitle {
   constructor() {
     /**
@@ -13,6 +13,11 @@ export class MgInputTitle {
       this.tagName = this.isLegend ? 'legend' : 'label';
     };
   }
+  validateIdentifier(newValue) {
+    if (typeof newValue !== 'string' || newValue.trim() === '') {
+      throw new Error('<mg-input-title> prop "identifier" is required.');
+    }
+  }
   /*************
    * Lifecycle *
    *************/
@@ -22,6 +27,7 @@ export class MgInputTitle {
    * @returns {void}
    */
   componentWillLoad() {
+    this.validateIdentifier(this.identifier);
     this.getTagName();
   }
   /**
@@ -32,75 +38,85 @@ export class MgInputTitle {
   render() {
     const TagName = this.tagName;
     // \u00A0 represent a &nbsp;
-    return (h(TagName, { class: "mg-input-title", htmlFor: this.isLegend ? undefined : this.identifier },
-      h("slot", null),
-      this.required && (h("span", { class: "mg-input-title__required" },
-        "\u00A0",
-        h("span", { class: "is-asterisk" }, "*")))));
+    return (h(TagName, { class: "mg-input-title", htmlFor: this.isLegend ? undefined : this.identifier }, h("slot", null), this.required && (h("span", { class: "mg-input-title__required" }, "\u00A0", h("span", { class: "is-asterisk" }, "*")))));
   }
   static get is() { return "mg-input-title"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["mg-input-title.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["mg-input-title.css"]
-  }; }
-  static get properties() { return {
-    "identifier": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Label input id"
-      },
-      "attribute": "identifier",
-      "reflect": false
-    },
-    "required": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "If input is required an asterisk is added at the end of the label"
-      },
-      "attribute": "required",
-      "reflect": false
-    },
-    "isLegend": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-input-title.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-input-title.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "identifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label input id"
+        },
+        "attribute": "identifier",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Switch from label to fieldset sementic"
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If input is required an asterisk is added at the end of the label"
+        },
+        "attribute": "required",
+        "reflect": false
       },
-      "attribute": "is-legend",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "tagName": {}
-  }; }
+      "isLegend": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Switch from label to fieldset sementic"
+        },
+        "attribute": "is-legend",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "tagName": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "identifier",
+        "methodName": "validateIdentifier"
+      }];
+  }
 }

package/dist/collection/components/atoms/mg-tag/mg-tag.js

@@ -1,4 +1,4 @@
-import { Component, h, Prop, State, Watch } from '@stencil/core';
+import { h } from '@stencil/core';
 import { variants } from './mg-tag.conf';
 import { ClassList } from '../../../utils/components.utils';
 export class MgTag {
@@ -55,62 +55,71 @@ export class MgTag {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("span", { class: this.classList.join() },
-      h("slot", null)));
+    return (h("span", { class: this.classList.join() }, h("slot", null)));
   }
   static get is() { return "mg-tag"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["mg-tag.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["mg-tag.css"]
-  }; }
-  static get properties() { return {
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define button variant"
-      },
-      "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "variants[0]"
-    },
-    "outline": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define if button is using outline style"
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-tag.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-tag.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define button variant"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "variants[0]"
       },
-      "attribute": "outline",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "classList": {}
-  }; }
-  static get watchers() { return [{
-      "propName": "variant",
-      "methodName": "validateVariant"
-    }, {
-      "propName": "outline",
-      "methodName": "validateOutline"
-    }]; }
+      "outline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define if button is using outline style"
+        },
+        "attribute": "outline",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "classList": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "variant",
+        "methodName": "validateVariant"
+      }, {
+        "propName": "outline",
+        "methodName": "validateOutline"
+      }];
+  }
 }

package/dist/collection/components/atoms/mg-tooltip/doc/mg-tooltip.stories.js

@@ -24,8 +24,7 @@ export default {
  * @returns {HTMLElement} HTMLElement
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => (h("mg-tooltip", Object.assign({}, filterArgs(args, { placement: 'bottom' })),
-  h("mg-icon", { icon: "info-circle" })));
+const Template = (args) => (h("mg-tooltip", Object.assign({}, filterArgs(args, { placement: 'bottom' })), h("mg-icon", { icon: "info-circle" })));
 export const MgTooltip = Template.bind({});
 MgTooltip.args = {
   identifier: 'identifier',
@@ -41,8 +40,7 @@ MgTooltip.args = {
  * @returns {HTMLElement} HTMLElement
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const TemplateButton = (args) => (h("mg-tooltip", Object.assign({}, filterArgs(args, { placement: 'bottom' })),
-  h("mg-button", null, "Action")));
+const TemplateButton = (args) => (h("mg-tooltip", Object.assign({}, filterArgs(args, { placement: 'bottom' })), h("mg-button", null, "Action")));
 export const MgTooltipOnButton = TemplateButton.bind({});
 MgTooltipOnButton.args = Object.assign({}, MgTooltip.args);
 /**
@@ -52,7 +50,6 @@ MgTooltipOnButton.args = Object.assign({}, MgTooltip.args);
  * @returns {HTMLElement} HTMLElement
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const TemplateSpan = (args) => (h("mg-tooltip", Object.assign({}, filterArgs(args, { placement: 'bottom' })),
-  h("span", null, "any text")));
+const TemplateSpan = (args) => (h("mg-tooltip", Object.assign({}, filterArgs(args, { placement: 'bottom' })), h("span", null, "any text")));
 export const MgTooltipOnSpan = TemplateSpan.bind({});
 MgTooltipOnSpan.args = Object.assign({}, MgTooltip.args);