@mgdis/mg-components 4.1.0 → 4.2.0

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

@@ -1,6 +1,6 @@
-import { Component, Element, h, Prop, State, Watch } from '@stencil/core';
+import { h } from '@stencil/core';
 import { variants } from './mg-button.conf';
-import { ClassList, createID } from '../../../utils/components.utils';
+import { ClassList } from '../../../utils/components.utils';
 export class MgButton {
   constructor() {
     /************
@@ -11,11 +11,6 @@ export class MgButton {
      * Define button variant
      */
     this.variant = variants[0]; // Primary
-    /**
-     * 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-button');
     /**
      * Define if button is round.
      * Used for icon button.
@@ -90,7 +85,7 @@ export class MgButton {
     this.validateVariant(this.variant);
     if (this.isIcon) {
       this.classList.add(`mg-button--icon`);
-      if (typeof this.label !== 'string' || this.label === '') {
+      if (typeof this.label !== 'string' || this.label.trim() === '') {
         throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
       }
     }
@@ -104,233 +99,239 @@ export class MgButton {
    * @returns {HTMLElement} html element
    */
   render() {
-    return (h("button", { id: this.identifier, class: this.classList.join(), type: this.type, "aria-label": this.label, "aria-disabled": this.disabled !== undefined && this.disabled.toString(), "aria-expanded": this.expanded !== undefined && this.expanded.toString(), "aria-controls": this.controls, "aria-haspopup": this.haspopup !== undefined && this.haspopup.toString(), onClick: this.handleClick, 
+    return (h("button", { id: this.identifier, class: this.classList.join(), type: this.type, "aria-label": this.label, "aria-disabled": this.disabled !== undefined && this.disabled.toString(), "aria-expanded": this.expanded !== undefined && this.expanded.toString(), "aria-controls": this.controls, "aria-haspopup": this.haspopup !== undefined && this.haspopup.toString(), onClick: this.handleClick,
       // has stencil does not support form attribute on button, we set the attribute from the ref
       // https://github.com/ionic-team/stencil/issues/2703#issuecomment-1050943715
-      ref: btn => this.form && btn.setAttribute('form', this.form) },
-      this.loading && h("mg-icon", { icon: "loader", spin: true }),
-      h("div", { class: "mg-button__content" },
-        h("slot", null))));
+      ref: btn => this.form && btn.setAttribute('form', this.form) }, this.loading && h("mg-icon", { icon: "loader", spin: true }), h("div", { class: "mg-button__content" }, h("slot", null))));
   }
   static get is() { return "mg-button"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["mg-button.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["mg-button.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]"
-    },
-    "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."
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-button.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": "identifier",
-      "reflect": false,
-      "defaultValue": "createID('mg-button')"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "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)"
+        },
+        "attribute": "identifier",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "aria-label\nIn case button text is not explicit enough"
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "aria-label\nIn case button text is not explicit enough"
+        },
+        "attribute": "label",
+        "reflect": false
       },
-      "attribute": "label",
-      "reflect": false
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ButtonType",
-        "resolved": "\"button\" | \"reset\" | \"submit\"",
-        "references": {
-          "ButtonType": {
-            "location": "import",
-            "path": "./mg-button.conf"
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ButtonType",
+          "resolved": "\"button\" | \"reset\" | \"submit\"",
+          "references": {
+            "ButtonType": {
+              "location": "import",
+              "path": "./mg-button.conf"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define button type\nDefault: 'submit', as HTMLButtonElement type is submit by default"
-      },
-      "attribute": "type",
-      "reflect": false
-    },
-    "form": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define form id to attach button with.\nIf this attribute is not set, the <button> is associated with its ancestor <form> element."
-      },
-      "attribute": "form",
-      "reflect": false
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define button type\nDefault: 'submit', as HTMLButtonElement type is submit by default"
+        },
+        "attribute": "type",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Disable button"
+      "form": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define form id to attach button with.\nIf this attribute is not set, the <button> is associated with its ancestor <form> element."
+        },
+        "attribute": "form",
+        "reflect": false
       },
-      "attribute": "disabled",
-      "reflect": false
-    },
-    "isIcon": {
-      "type": "boolean",
-      "mutable": 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 button"
+        },
+        "attribute": "disabled",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define if button is round.\nUsed for icon button."
+      "isIcon": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define if button is round.\nUsed for icon button."
+        },
+        "attribute": "is-icon",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "is-icon",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "disableOnClick": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "disableOnClick": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Option to set input disable on click, in order to prevent multi-click.\nParent component have to remove the attribute 'disabled' when the process ends."
+        },
+        "attribute": "disable-on-click",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Option to set input disable on click, in order to prevent multi-click.\nParent component have to remove the attribute 'disabled' when the process ends."
+      "expanded": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Prop to set aria-expanded on button element"
+        },
+        "attribute": "expanded",
+        "reflect": false
       },
-      "attribute": "disable-on-click",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "expanded": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "controls": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Prop to set aria-controls on button element"
+        },
+        "attribute": "controls",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Prop to set aria-expanded on button element"
-      },
-      "attribute": "expanded",
-      "reflect": false
-    },
-    "controls": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Prop to set aria-controls on button element"
-      },
-      "attribute": "controls",
-      "reflect": false
-    },
-    "haspopup": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'",
-        "resolved": "\"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\" | boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Option to set aria-haspopup\nThe aria-haspopup state informs assistive technology users that there is a popup and the type of popup it is, but provides no interactivity."
-      },
-      "attribute": "haspopup",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "loading": {},
-    "classList": {}
-  }; }
+      "haspopup": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'",
+          "resolved": "\"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\" | boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Option to set aria-haspopup\nThe aria-haspopup state informs assistive technology users that there is a popup and the type of popup it is, but provides no interactivity."
+        },
+        "attribute": "haspopup",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "loading": {},
+      "classList": {}
+    };
+  }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "variant",
-      "methodName": "validateVariant"
-    }, {
-      "propName": "disabled",
-      "methodName": "disabledHandler"
-    }, {
-      "propName": "loading",
-      "methodName": "loadingHandler"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "variant",
+        "methodName": "validateVariant"
+      }, {
+        "propName": "disabled",
+        "methodName": "disabledHandler"
+      }, {
+        "propName": "loading",
+        "methodName": "loadingHandler"
+      }];
+  }
 }

package/dist/collection/components/atoms/mg-character-left/mg-character-left.js

@@ -1,4 +1,4 @@
-import { Component, Element, h, Prop, Watch } from '@stencil/core';
+import { h } from '@stencil/core';
 import { initLocales } from '../../../locales';
 export class MgCharacterLeft {
   constructor() {
@@ -30,78 +30,81 @@ export class MgCharacterLeft {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("span", { id: this.identifier, "aria-live": "polite" },
-      h("span", { "aria-hidden": "true" },
-        this.maxlength - this.characters.length,
-        "/",
-        this.maxlength),
-      h("span", { class: "sr-only" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
+    return (h("span", { id: this.identifier, "aria-live": "polite" }, h("span", { "aria-hidden": "true" }, this.maxlength - this.characters.length, "/", this.maxlength), h("span", { class: "sr-only" }, this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length))));
   }
   static get is() { return "mg-character-left"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["mg-character-left.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["mg-character-left.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
-    },
-    "characters": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Sets the characters to count"
-      },
-      "attribute": "characters",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "maxlength": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-character-left.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-character-left.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
       },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Add maximum length"
+      "characters": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the characters to count"
+        },
+        "attribute": "characters",
+        "reflect": false,
+        "defaultValue": "''"
       },
-      "attribute": "maxlength",
-      "reflect": false
-    }
-  }; }
+      "maxlength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Add maximum length"
+        },
+        "attribute": "maxlength",
+        "reflect": false
+      }
+    };
+  }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "maxlength",
-      "methodName": "validateMaxlength"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "maxlength",
+        "methodName": "validateMaxlength"
+      }];
+  }
 }

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

@@ -30,8 +30,7 @@ const Template = (args) => {
   const color = args.color;
   delete args.color;
   // return element
-  return (h("div", { style: { color } },
-    h("mg-icon", Object.assign({}, filterArgs(args, { size: sizes[1] })))));
+  return (h("div", { style: { color } }, h("mg-icon", Object.assign({}, filterArgs(args, { size: sizes[1] })))));
 };
 export const MgIcon = Template.bind({});
 MgIcon.args = {