@mgdis/mg-components 4.1.0 → 4.2.0

package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js

@@ -1,4 +1,4 @@
-import { Component, Element, h, Prop } from '@stencil/core';
+import { h } from '@stencil/core';
 import { isTagName } from '../../../utils/components.utils';
 export class MgIllustratedMessage {
   constructor() {
@@ -31,44 +31,44 @@ export class MgIllustratedMessage {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("div", { class: "mg-illustrated-message" },
-      h("div", { class: {
-          'mg-illustrated-message__illustration': true,
-          'mg-illustrated-message__illustration--small': this.size === 'small',
-        } },
-        h("slot", { name: "illustration" })),
-      h("div", { class: "mg-illustrated-message__title" },
-        h("slot", { name: "title" })),
-      h("div", { class: "mg-illustrated-message__details" },
-        h("slot", { name: "details" }))));
+    return (h("div", { class: "mg-illustrated-message" }, h("div", { class: {
+        'mg-illustrated-message__illustration': true,
+        'mg-illustrated-message__illustration--small': this.size === 'small',
+      } }, h("slot", { name: "illustration" })), h("div", { class: "mg-illustrated-message__title" }, h("slot", { name: "title" })), h("div", { class: "mg-illustrated-message__details" }, h("slot", { name: "details" }))));
   }
   static get is() { return "mg-illustrated-message"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["mg-illustrated-message.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["mg-illustrated-message.css"]
-  }; }
-  static get properties() { return {
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'regular' | 'small'",
-        "resolved": "\"regular\" | \"small\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define illustration size"
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'regular'"
-    }
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-illustrated-message.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-illustrated-message.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'regular' | 'small'",
+          "resolved": "\"regular\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define illustration size"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'regular'"
+      }
+    };
+  }
   static get elementRef() { return "element"; }
 }

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

@@ -22,9 +22,7 @@ export default {
  * @returns {HTMLElement} HTMLElement
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => (h("mg-message", Object.assign({}, filterArgs(args, { variant: variants[0] })),
-  args.slotContent && h("span", { innerHTML: args.slotContent }),
-  args.slotActions && h("span", { slot: "actions", innerHTML: args.slotActions })));
+const Template = (args) => (h("mg-message", Object.assign({}, filterArgs(args, { variant: variants[0] })), args.slotContent && h("span", { innerHTML: args.slotContent }), args.slotActions && h("span", { slot: "actions", innerHTML: args.slotActions })));
 export const MgMessage = Template.bind({});
 MgMessage.args = {
   slotContent: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>`,

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

@@ -1,4 +1,4 @@
-import { Component, Element, Event, h, Prop, State, Watch } from '@stencil/core';
+import { h } from '@stencil/core';
 import { createID, ClassList } from '../../../utils/components.utils';
 import { variants } from './mg-message.conf';
 import { initLocales } from '../../../locales';
@@ -136,165 +136,166 @@ export class MgMessage {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' },
-      h("span", { class: "mg-message__icon" },
-        h("mg-icon", { icon: this.getIcon() })),
-      h("div", { class: "mg-message__content" },
-        h("span", { class: "mg-message__content-slot" },
-          h("slot", null)),
-        this.hasActions && h("span", { class: "mg-message__content-separator" }),
-        this.hasActions && (h("span", { class: "mg-message__content-actions-slot" },
-          h("slot", { name: "actions" })))),
-      this.closeButton && (h("span", { class: "mg-message__close-button" },
-        h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose },
-          h("mg-icon", { icon: "cross" }))))));
+    return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" }))))));
   }
   static get is() { return "mg-message"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["mg-message.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["mg-message.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-message')"
-    },
-    "delay": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Add a delay to hide/close message when it passed\nValue is defined in seconds and must greater than 2 seconds (PDA9-314 RG-06)"
-      },
-      "attribute": "delay",
-      "reflect": false
-    },
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Message variant"
-      },
-      "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "variants[0]"
-    },
-    "closeButton": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define if message has a cross button\nRG 01: https://jira.mgdis.fr/browse/PDA9-140"
-      },
-      "attribute": "close-button",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "hide": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-message.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-message.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-message')"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Define if message is hidden"
+      "delay": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Add a delay to hide/close message when it passed\nValue is defined in seconds and must greater than 2 seconds (PDA9-314 RG-06)"
+        },
+        "attribute": "delay",
+        "reflect": false
       },
-      "attribute": "hide",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "classList": {},
-    "hasActions": {}
-  }; }
-  static get events() { return [{
-      "method": "componentShow",
-      "name": "component-show",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emited event when message is diplayed"
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Message variant"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "variants[0]"
       },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }, {
-      "method": "componentHide",
-      "name": "component-hide",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emited event when message is hidden"
+      "closeButton": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define if message has a cross button\nRG 01: https://jira.mgdis.fr/browse/PDA9-140"
+        },
+        "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 message is hidden"
+        },
+        "attribute": "hide",
+        "reflect": false,
+        "defaultValue": "false"
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "classList": {},
+      "hasActions": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "componentShow",
+        "name": "component-show",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emited event when message is diplayed"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "componentHide",
+        "name": "component-hide",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emited event when message is hidden"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "delay",
-      "methodName": "validateDelay"
-    }, {
-      "propName": "variant",
-      "methodName": "validateVariant"
-    }, {
-      "propName": "closeButton",
-      "methodName": "validateCloseButton"
-    }, {
-      "propName": "hide",
-      "methodName": "validateHide"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "delay",
+        "methodName": "validateDelay"
+      }, {
+        "propName": "variant",
+        "methodName": "validateVariant"
+      }, {
+        "propName": "closeButton",
+        "methodName": "validateCloseButton"
+      }, {
+        "propName": "hide",
+        "methodName": "validateHide"
+      }];
+  }
 }

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

@@ -13,21 +13,17 @@ export default {
  * @returns {HTMLElement} HTMLElement
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => (h("div", null,
-  h("mg-button", { controls: "identifier", haspopup: "dialog", onClick: () => {
-      const mgModal = document.querySelector('mg-modal');
-      const isHide = mgModal.hide === true;
-      if (isHide) {
-        mgModal.removeAttribute('hide'); // storybook first render is an attribute then we use property
-        mgModal.hide = false;
-      }
-      else {
-        mgModal.hide = true;
-      }
-    } }, "Open modal"),
-  h("mg-modal", Object.assign({}, filterArgs(args)),
-    args.slotContent && h("div", { slot: "content", innerHTML: args.slotContent }),
-    args.slotActions && h("div", { slot: "actions", innerHTML: args.slotActions }))));
+const Template = (args) => (h("div", null, h("mg-button", { controls: "identifier", haspopup: "dialog", onClick: () => {
+    const mgModal = document.querySelector('mg-modal');
+    const isHide = mgModal.hide === true;
+    if (isHide) {
+      mgModal.removeAttribute('hide'); // storybook first render is an attribute then we use property
+      mgModal.hide = false;
+    }
+    else {
+      mgModal.hide = true;
+    }
+  } }, "Open modal"), h("mg-modal", Object.assign({}, filterArgs(args)), args.slotContent && h("div", { slot: "content", innerHTML: args.slotContent }), args.slotActions && h("div", { slot: "actions", innerHTML: args.slotActions }))));
 export const MgModal = Template.bind({});
 MgModal.args = {
   slotContent: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>`,