@mgdis/mg-components 4.1.1 → 4.2.1

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

@@ -1,4 +1,4 @@
-import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { createID } from '../../../utils/components.utils';
 import { createPopper } from '@popperjs/core';
 import { Guard } from './mg-tooltip.conf';
@@ -88,6 +88,13 @@ export class MgTooltip {
       this.guard = undefined;
     };
   }
+  validateMessage(newValue) {
+    if (typeof newValue !== 'string' || newValue.trim() === '') {
+      // TODO: throw new Error on next major (5.0.0)
+      // throw new Error('<mg-tooltip> prop "message" is required.');
+      console.error('<mg-tooltip> prop "message" is required.');
+    }
+  }
   handleDisplay(newValue) {
     if (newValue) {
       this.show();
@@ -168,6 +175,7 @@ export class MgTooltip {
       });
     });
     this.handleDisplay(this.display);
+    this.validateMessage(this.message);
   }
   /**
    * Render
@@ -175,118 +183,126 @@ export class MgTooltip {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    return (h(Host, null,
-      h("slot", null),
-      h("div", { role: "tooltip", id: this.identifier, class: "mg-tooltip", innerHTML: this.message },
-        h("div", { class: "mg-tooltip__arrow", "data-popper-arrow": true }))));
+    return (h(Host, null, h("slot", null), h("div", { role: "tooltip", id: this.identifier, class: "mg-tooltip", innerHTML: this.message }, h("div", { class: "mg-tooltip__arrow", "data-popper-arrow": true }))));
   }
   static get is() { return "mg-tooltip"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["mg-tooltip.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["mg-tooltip.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-tooltip')"
-    },
-    "message": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-tooltip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-tooltip.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-tooltip')"
       },
-      "required": true,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Displayed message in the tooltip"
+      "message": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Displayed message in the tooltip"
+        },
+        "attribute": "message",
+        "reflect": false
       },
-      "attribute": "message",
-      "reflect": false
-    },
-    "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-tooltip.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-tooltip.conf"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Tooltip placement"
-      },
-      "attribute": "placement",
-      "reflect": false,
-      "defaultValue": "'bottom'"
-    },
-    "display": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Display tooltip"
-      },
-      "attribute": "display",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip placement"
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'bottom'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Disable tooltip"
+      "display": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Display tooltip"
+        },
+        "attribute": "display",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "disabled",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
+      "disabled": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disable tooltip"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
   static get elementRef() { return "element"; }
-  static get watchers() { return [{
-      "propName": "display",
-      "methodName": "handleDisplay"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "message",
+        "methodName": "validateMessage"
+      }, {
+        "propName": "display",
+        "methodName": "handleDisplay"
+      }];
+  }
 }

package/dist/collection/components/molecules/inputs/MgInput.js

@@ -49,11 +49,16 @@ export const MgInput = (props, children, utils) => {
   /**
    * Check required properties
    */
-  if (typeof props.label !== 'string' || props.label === '') {
-    throw new Error('<mg-input> prop "label" is required');
+  if (typeof props.identifier !== 'string' || props.identifier.trim() === '') {
+    // TODO: throw new Error on next major (5.0.0)
+    // throw new Error('<mg-input> prop "identifier" is required.');
+    console.error('<mg-input> prop "identifier" is required.');
+  }
+  if (typeof props.label !== 'string' || props.label.trim() === '') {
+    throw new Error('<mg-input> prop "label" is required.');
   }
   if (props.labelOnTop && props.labelHide) {
-    throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide"');
+    throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide".');
   }
   /**
    * Component classes
@@ -103,24 +108,12 @@ export const MgInput = (props, children, utils) => {
    *
    * @returns {VNode[]} mg-tooltip
    */
-  const getTooltip = () => (h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip },
-    h("mg-icon", { icon: "info-circle" })));
+  const getTooltip = () => (h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip }, h("mg-icon", { icon: "info-circle" })));
   /**
    * Get input title (label) node
    *
    * @returns {VNode[]} mg-input-title
    */
   const getInputTitle = () => (h("mg-input-title", { identifier: props.identifier, class: props.labelHide ? 'sr-only' : undefined, required: props.required && !props.disabled, "is-legend": props.isFieldset }, props.label));
-  return (h(TagName, { class: props.classList.join() },
-    props.labelOnTop ? (h("div", { class: "mg-input__title" },
-      getInputTitle(),
-      !props.readonly && props.tooltip && getTooltip())) : (getInputTitle()),
-    props.readonly ? (h("div", { class: "mg-input__input-container" },
-      h("strong", null, props.readonlyValue || props.value),
-      children)) : (h("div", { class: "mg-input__input-container" },
-      h("div", { class: { 'mg-input__input': true, 'mg-input__input--has-error': props.errorMessage !== undefined } },
-        children,
-        !props.labelOnTop && props.tooltip && getTooltip()),
-      props.helpText && h("div", { id: helpTextId, class: "mg-input__help-text", innerHTML: props.helpText }),
-      props.errorMessage && !props.readonly && !props.disabled && (h("div", { id: helpTextErrorId, class: "mg-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" }))))));
+  return (h(TagName, { class: props.classList.join() }, props.labelOnTop ? (h("div", { class: "mg-input__title" }, getInputTitle(), !props.readonly && props.tooltip && getTooltip())) : (getInputTitle()), props.readonly ? (h("div", { class: "mg-input__input-container" }, h("strong", null, props.readonlyValue || props.value), children)) : (h("div", { class: "mg-input__input-container" }, h("div", { class: { 'mg-input__input': true, 'mg-input__input--has-error': props.errorMessage !== undefined } }, children, !props.labelOnTop && props.tooltip && getTooltip()), props.helpText && h("div", { id: helpTextId, class: "mg-input__help-text", innerHTML: props.helpText }), props.errorMessage && !props.readonly && !props.disabled && (h("div", { id: helpTextErrorId, class: "mg-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" }))))));
 };