@mgdis/mg-components 4.1.1 → 4.2.1

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

@@ -1,4 +1,4 @@
-import { Component, Element, h, Prop, State, Watch, Event } from '@stencil/core';
+import { h } from '@stencil/core';
 import { createID, ClassList } from '../../../utils/components.utils';
 import { initLocales } from '../../../locales';
 export class MgPanel {
@@ -93,37 +93,35 @@ export class MgPanel {
      * @returns {HTMLMgButtonElement | HTMLElement | HTMLElement[]} header left element
      */
     this.headerLeft = () => {
-      const collapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, expanded: this.expanded, controls: `${this.identifier}-content`, disabled: this.expandToggleDisabled },
-        h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }),
-        !this.isEditing && this.panelTitle));
+      const collapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, expanded: this.expanded, controls: `${this.identifier}-content`, disabled: this.expandToggleDisabled }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), !this.isEditing && this.panelTitle));
       if (this.titleEditable && !this.isEditing) {
         return [
           collapseButton(),
-          h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` },
-            h("mg-icon", { icon: "pen" })),
+          h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` }, h("mg-icon", { icon: "pen" })),
         ];
       }
       if (this.titleEditable && this.isEditing) {
         return [
           collapseButton(),
-          h("mg-input-text", { label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) },
-            h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` },
-              h("mg-icon", { icon: "cross" })),
-            h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` },
-              h("mg-icon", { icon: "check" }))),
+          h("mg-input-text", { label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) }, h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` }, h("mg-icon", { icon: "cross" })), h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` }, h("mg-icon", { icon: "check" }))),
         ];
       }
       return collapseButton();
     };
   }
-  handelTileChange(newValue) {
+  validatePanelTitle(newValue) {
+    if (typeof newValue !== 'string' || newValue.trim() === '') {
+      // TODO: throw new Error on next major (5.0.0)
+      // throw new Error('<mg-panel> prop "panelTitle" is required.');
+      console.error('<mg-panel> prop "panelTitle" is required.');
+    }
     this.titleChange.emit(newValue);
   }
   validatetitlePattern(newValue) {
     if (newValue && !this.titleEditable) {
       throw new Error('<mg-panel> prop "titleEditable" must be set to `true`.');
     }
-    if (newValue && this.titlePatternErrorMessage === undefined) {
+    if (newValue && (this.titlePatternErrorMessage === undefined || this.titlePatternErrorMessage.trim() === '')) {
       throw new Error('<mg-panel> prop "titlePattern" must be paired with the prop "titlePatternErrorMessage".');
     }
   }
@@ -143,6 +141,7 @@ export class MgPanel {
     this.messages = initLocales(this.element).messages;
     // Validate
     this.validatetitlePattern(this.titlePattern);
+    this.validatePanelTitle(this.panelTitle);
   }
   /**
    * Edit DOM after render
@@ -161,191 +160,197 @@ export class MgPanel {
    * @returns {HTMLElement} html element
    */
   render() {
-    return (h("section", { class: this.classList.join(), id: this.identifier },
-      h("header", { class: "mg-panel__header", id: `${this.identifier}-header` },
-        h("div", { class: `mg-panel__header-left ${this.isEditing ? 'mg-panel__header-left--full' : ''}` }, this.headerLeft()),
-        h("div", { class: "mg-panel__header-right" },
-          h("slot", { name: "header-right" }))),
-      h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded },
-        h("slot", null))));
+    return (h("section", { class: this.classList.join(), id: this.identifier }, h("header", { class: "mg-panel__header", id: `${this.identifier}-header` }, h("div", { class: `mg-panel__header-left ${this.isEditing ? 'mg-panel__header-left--full' : ''}` }, this.headerLeft()), h("div", { class: "mg-panel__header-right" }, h("slot", { name: "header-right" }))), h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded }, h("slot", null))));
   }
   static get is() { return "mg-panel"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["mg-panel.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["mg-panel.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-panel')"
-    },
-    "panelTitle": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Panel title"
-      },
-      "attribute": "panel-title",
-      "reflect": false
-    },
-    "titlePattern": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Panel title pattern"
-      },
-      "attribute": "title-pattern",
-      "reflect": false
-    },
-    "titlePatternErrorMessage": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Panel title pattern error message"
-      },
-      "attribute": "title-pattern-error-message",
-      "reflect": false
-    },
-    "expanded": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Panel is opened"
-      },
-      "attribute": "expanded",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "expandToggleDisabled": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-panel.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-panel.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-panel')"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Disable possibility to toggle expand"
+      "panelTitle": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Panel title"
+        },
+        "attribute": "panel-title",
+        "reflect": false
       },
-      "attribute": "expand-toggle-disabled",
-      "reflect": false
-    },
-    "titleEditable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "titlePattern": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Panel title pattern"
+        },
+        "attribute": "title-pattern",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Panel title is editabled"
+      "titlePatternErrorMessage": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Panel title pattern error message"
+        },
+        "attribute": "title-pattern-error-message",
+        "reflect": false
       },
-      "attribute": "title-editable",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "classList": {},
-    "isEditing": {},
-    "updatedPanelTitle": {}
-  }; }
-  static get events() { return [{
-      "method": "titleChange",
-      "name": "title-change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emmited event when title change"
+      "expanded": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Panel is opened"
+        },
+        "attribute": "expanded",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      }
-    }, {
-      "method": "expandedChange",
-      "name": "expanded-change",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emmited event when expanded change"
+      "expandToggleDisabled": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disable possibility to toggle expand"
+        },
+        "attribute": "expand-toggle-disabled",
+        "reflect": false
       },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "titleEditable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Panel title is editabled"
+        },
+        "attribute": "title-editable",
+        "reflect": false,
+        "defaultValue": "false"
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "classList": {},
+      "isEditing": {},
+      "updatedPanelTitle": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "titleChange",
+        "name": "title-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emmited event when title change"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "expandedChange",
+        "name": "expanded-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emmited event when expanded change"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "panelTitle",
-      "methodName": "handelTileChange"
-    }, {
-      "propName": "titlePattern",
-      "methodName": "validatetitlePattern"
-    }, {
-      "propName": "expanded",
-      "methodName": "handleExpanded"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "panelTitle",
+        "methodName": "validatePanelTitle"
+      }, {
+        "propName": "titlePattern",
+        "methodName": "validatetitlePattern"
+      }, {
+        "propName": "expanded",
+        "methodName": "handleExpanded"
+      }];
+  }
 }

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

@@ -26,10 +26,7 @@ export default {
  * @returns {HTMLElement} HTMLElement
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => (h("mg-popover", Object.assign({}, filterArgs(args, { placement: 'bottom' })),
-  h("mg-button", null, "Button"),
-  args.slotTitle && h("h2", { slot: "title" }, args.slotTitle),
-  args.slotContent && h("p", { slot: "content" }, args.slotContent)));
+const Template = (args) => (h("mg-popover", Object.assign({}, filterArgs(args, { placement: 'bottom' })), h("mg-button", null, "Button"), args.slotTitle && h("h2", { slot: "title" }, args.slotTitle), args.slotContent && h("p", { slot: "content" }, args.slotContent)));
 export const MgPopover = Template.bind({});
 MgPopover.args = {
   slotTitle: `Blu bli blo bla`,

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

@@ -23,18 +23,17 @@ mg-popover::slotted(*) {
   margin-top: calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);
   margin-left: 3rem;
 }
-.mg-popover .mg-popover__arrow,
-.mg-popover .mg-popover__arrow::before {
+.mg-popover__arrow, .mg-popover__arrow::before {
   position: absolute;
   width: 2rem;
   height: 2rem;
   z-index: -1;
   background: inherit;
 }
-.mg-popover .mg-popover__arrow {
+.mg-popover__arrow {
   visibility: hidden;
 }
-.mg-popover .mg-popover__arrow::before {
+.mg-popover__arrow::before {
   visibility: visible;
   content: "";
   transform: rotate(45deg);
@@ -51,7 +50,6 @@ mg-popover::slotted(*) {
 .mg-popover[data-popper-placement^=right] > .mg-popover__arrow {
   left: -6px;
 }
-
 .mg-popover__title ::slotted([slot=title]) {
   margin: 0 0 1rem;
   font-size: var(--mg-popover-title-font-size);