@mgdis/mg-components 5.4.0 → 5.6.0

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

@@ -7,17 +7,11 @@ export class MgTag {
      * Internal *
      ************/
     // Classes
-    this.classOutline = `mg-tag--outline`;
-    /**************
-     * Decorators *
-     **************/
-    /**
-     * Define button variant
-     */
-    this.variant = variants[0]; // primary
-    /**
-     * Component classes
-     */
+    this.classOutline = 'mg-tag--outline';
+    this.classSoft = 'mg-tag--soft';
+    this.variant = variants[0];
+    this.outline = undefined;
+    this.soft = undefined;
     this.classList = new ClassList(['mg-tag']);
   }
   validateVariant(newValue, oldValue) {
@@ -37,6 +31,29 @@ export class MgTag {
     else
       this.classList.delete(this.classOutline);
   }
+  validateSoft(newValue) {
+    // usage validation
+    if (newValue && this.outline)
+      throw new Error('<mg-tag> prop "soft" can NOT be used with prop "outline".');
+    // apply class
+    if (newValue)
+      this.classList.add(this.classSoft);
+    else
+      this.classList.delete(this.classSoft);
+  }
+  /*************
+   * Methods *
+   *************/
+  /**
+   * Validate the given textContent
+   *
+   * @param {string} textContent html element textContent property
+   * @returns {void}
+   */
+  validateTextContent(textContent) {
+    if (typeof textContent !== 'string' || textContent.trim() === '')
+      throw new Error('<mg-tag> slot must contain a text content.');
+  }
   /*************
    * Lifecycle *
    *************/
@@ -48,6 +65,8 @@ export class MgTag {
   componentWillLoad() {
     this.validateVariant(this.variant);
     this.validateOutline(this.outline);
+    this.validateSoft(this.soft);
+    this.validateTextContent(this.element.textContent);
   }
   /**
    * Render
@@ -75,15 +94,20 @@ export class MgTag {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "TagVariantType",
+          "resolved": "\"danger\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+          "references": {
+            "TagVariantType": {
+              "location": "import",
+              "path": "./mg-tag.conf"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define button variant"
+          "text": "Define tag variant"
         },
         "attribute": "variant",
         "reflect": false,
@@ -101,10 +125,27 @@ export class MgTag {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define if button is using outline style"
+          "text": "Define if tag is using outline style"
         },
         "attribute": "outline",
         "reflect": false
+      },
+      "soft": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define if tag is using soft style"
+        },
+        "attribute": "soft",
+        "reflect": false
       }
     };
   }
@@ -113,6 +154,7 @@ export class MgTag {
       "classList": {}
     };
   }
+  static get elementRef() { return "element"; }
   static get watchers() {
     return [{
         "propName": "variant",
@@ -120,6 +162,9 @@ export class MgTag {
       }, {
         "propName": "outline",
         "methodName": "validateOutline"
+      }, {
+        "propName": "soft",
+        "methodName": "validateSoft"
       }];
   }
 }

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

@@ -10,6 +10,8 @@
   background-color: hsl(var(--mg-tooltip-background-color));
   color: hsl(var(--mg-tooltip-font-color));
   text-align: start;
+  max-width: 40rem;
+  box-sizing: border-box;
 }
 .mg-tooltip[data-show] {
   display: block;

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

@@ -4,23 +4,6 @@ import { createPopper } from '@popperjs/core';
 import { Guard } from './mg-tooltip.conf';
 export class MgTooltip {
   constructor() {
-    /**
-     * Sets an `id` attribute.
-     * Needed by the input for accessibility `aria-decribedby`.
-     */
-    this.identifier = createID('mg-tooltip');
-    /**
-     * Tooltip placement
-     */
-    this.placement = 'bottom';
-    /**
-     * Display tooltip
-     */
-    this.display = false;
-    /**
-     * Disable tooltip
-     */
-    this.disabled = false;
     /**
      * Show tooltip
      *
@@ -74,7 +57,7 @@ export class MgTooltip {
             this.resetGuard();
           }, 100);
         }
-        else if (isMouseenter && elementGuard === Guard.HOVER_TOOLTIPED_ELEMENT) {
+        else if (this.guard === Guard.HOVER_TOOLTIPED_ELEMENT) {
           this.setDisplay(isMouseenter);
         }
       }
@@ -144,7 +127,7 @@ export class MgTooltip {
         this.setDisplay(true);
       });
       ['blur', 'keydown'].forEach(event => {
-        this.tooltipedElement.addEventListener(event, (e) => {
+        document.addEventListener(event, (e) => {
           // we continue to process ONLY for KeyboardEvents 'Escape'
           if (e.type === 'keydown' && e.code !== 'Escape') {
             return;
@@ -166,6 +149,11 @@ export class MgTooltip {
         });
       });
     };
+    this.identifier = createID('mg-tooltip');
+    this.message = undefined;
+    this.placement = 'bottom';
+    this.display = false;
+    this.disabled = false;
   }
   validateMessage(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
@@ -198,8 +186,7 @@ export class MgTooltip {
     const slotElement = this.element.firstElementChild;
     // Get interactive element
     const interactiveElements = ['a', 'button', 'input', 'textarea', 'select']; //! Might needs updates
-    const interactiveElement = this.element.shadowRoot.querySelector(interactiveElements.join(',')) ||
-      ((_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(interactiveElements.join(',')));
+    const interactiveElement = this.element.shadowRoot.querySelector(interactiveElements.join(',')) || ((_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(interactiveElements.join(',')));
     // define selected element to become tooltip selector
     this.tooltipedElement = interactiveElement || slotElement;
     // Check if slotted element is a disabled mg-button
@@ -224,7 +211,7 @@ 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" }, h("span", { innerHTML: this.message }), h("div", { class: "mg-tooltip__arrow", "data-popper-arrow": true }))));
   }
   static get is() { return "mg-tooltip"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js

@@ -18,39 +18,6 @@ export class MgInputCheckbox {
     this.inputs = [];
     // hasDisplayedError (triggered by blur event)
     this.hasDisplayedError = false;
-    /**
-     * Input name
-     * If not set the value equals the identifier
-     */
-    this.name = this.identifier;
-    /**
-     * Define if label is visible
-     */
-    this.labelHide = false;
-    /**
-     * Define if inputs are display verticaly
-     */
-    this.inputVerticalList = false;
-    /**
-     * Define if input is required
-     */
-    this.required = false;
-    /**
-     * Define if input is readonly
-     */
-    this.readonly = false;
-    /**
-     * Define if input is disabled
-     */
-    this.disabled = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-input--checkbox']);
-    /**
-     * Formated value for display
-     */
-    this.checkboxItems = [];
     /**
      * Handle input event
      *
@@ -100,6 +67,23 @@ export class MgInputCheckbox {
         this.errorMessage = this.messages.errors.required;
       }
     };
+    this.value = undefined;
+    this.identifier = undefined;
+    this.name = this.identifier;
+    this.label = undefined;
+    this.labelOnTop = undefined;
+    this.labelHide = false;
+    this.inputVerticalList = false;
+    this.required = false;
+    this.readonly = false;
+    this.disabled = false;
+    this.tooltip = undefined;
+    this.helpText = undefined;
+    this.valid = undefined;
+    this.invalid = undefined;
+    this.classList = new ClassList(['mg-input--checkbox']);
+    this.errorMessage = undefined;
+    this.checkboxItems = [];
   }
   validateValue(newValue) {
     if (newValue && newValue.every(item => isCheckboxItem(item))) {

package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.css

@@ -124,7 +124,7 @@
   font-style: italic;
 }
 .mg-input__box:focus {
-  box-shadow: 0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
+  box-shadow: 0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
 }
 .mg-input__box:disabled {
   opacity: 0.3;
@@ -145,8 +145,8 @@
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box {
   margin-right: -0.1rem;
-  border-top-right-radius: 0%;
-  border-bottom-right-radius: 0%;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible {
   outline-style: solid;

package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js

@@ -8,31 +8,6 @@ export class MgInputDate {
   constructor() {
     // hasDisplayedError (triggered by blur event)
     this.hasDisplayedError = false;
-    /**
-     * Input name
-     * If not set the value equals the identifier
-     */
-    this.name = this.identifier;
-    /**
-     * Define if label is visible
-     */
-    this.labelHide = false;
-    /**
-     * Define if input is required
-     */
-    this.required = false;
-    /**
-     * Define if input is readonly
-     */
-    this.readonly = false;
-    /**
-     * Define if input is disabled
-     */
-    this.disabled = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-input--date']);
     /**
      * Handle input event
      */
@@ -111,13 +86,33 @@ export class MgInputDate {
         }
       }
     };
+    this.value = undefined;
+    this.identifier = undefined;
+    this.name = this.identifier;
+    this.label = undefined;
+    this.labelOnTop = undefined;
+    this.labelHide = false;
+    this.required = false;
+    this.readonly = false;
+    this.disabled = false;
+    this.tooltip = undefined;
+    this.helpText = undefined;
+    this.valid = undefined;
+    this.invalid = undefined;
+    this.min = undefined;
+    this.max = undefined;
+    this.classList = new ClassList(['mg-input--date']);
+    this.errorMessage = undefined;
   }
   validateValue(newValue) {
+    // When the input is not fully completed or has been cleared, the value becomes an empty string.
+    if (newValue === '')
+      newValue = null;
     if (newValue !== undefined && newValue !== null && (typeof newValue !== 'string' || !dateRegExp.test(newValue))) {
       throw new Error("<mg-input-date> props 'value' doesn't match pattern: yyyy-mm-dd");
     }
     else {
-      this.valueChange.emit(this.value);
+      this.valueChange.emit(newValue);
     }
   }
   handleValidityChange(newValue, _oldValue, prop) {

package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.css

@@ -124,7 +124,7 @@
   font-style: italic;
 }
 .mg-input__box:focus {
-  box-shadow: 0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
+  box-shadow: 0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
 }
 .mg-input__box:disabled {
   opacity: 0.3;
@@ -145,8 +145,8 @@
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box {
   margin-right: -0.1rem;
-  border-top-right-radius: 0%;
-  border-bottom-right-radius: 0%;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible {
   outline-style: solid;

package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js

@@ -8,53 +8,6 @@ export class MgInputNumeric {
   constructor() {
     // hasDisplayedError (triggered by blur event)
     this.hasDisplayedError = false;
-    /**
-     * Input name
-     * If not set the value equals the identifier
-     */
-    this.name = this.identifier;
-    /**
-     * Define if label is visible
-     */
-    this.labelHide = false;
-    /**
-     * Define if input is required
-     */
-    this.required = false;
-    /**
-     * Define if input is readonly
-     */
-    this.readonly = false;
-    /**
-     * Define if input is disabled
-     */
-    this.disabled = false;
-    /**
-     * Define numeric type
-     */
-    this.type = types[0];
-    /**
-     * Define currency
-     */
-    this.currency = 'USD';
-    /**
-     * Override integer length
-     * integer is the number before the decimal point
-     */
-    this.integerLength = 13;
-    /**
-     * Override decimal length
-     * decimal is the number after the decimal point
-     */
-    this.decimalLength = 2;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-input--numeric']);
-    /**
-     * Define if input has focus
-     */
-    this.hasFocus = false;
     /**
      * Handle input event
      *
@@ -161,6 +114,30 @@ export class MgInputNumeric {
         this.classList.add(slotAppendInput.nodeName === 'MG-BUTTON' ? 'mg-input--is-input-group-append' : 'mg-input--is-append-input-slot-content');
       }
     };
+    this.value = undefined;
+    this.identifier = undefined;
+    this.name = this.identifier;
+    this.label = undefined;
+    this.labelOnTop = undefined;
+    this.labelHide = false;
+    this.placeholder = undefined;
+    this.required = false;
+    this.readonly = false;
+    this.disabled = false;
+    this.mgWidth = undefined;
+    this.tooltip = undefined;
+    this.helpText = undefined;
+    this.type = types[0];
+    this.currency = 'USD';
+    this.max = undefined;
+    this.min = undefined;
+    this.integerLength = 13;
+    this.decimalLength = 2;
+    this.valid = undefined;
+    this.invalid = undefined;
+    this.classList = new ClassList(['mg-input--numeric']);
+    this.errorMessage = undefined;
+    this.hasFocus = false;
   }
   validateValue(newValue) {
     if (newValue !== undefined && newValue !== null) {

package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.css

@@ -124,7 +124,7 @@
   font-style: italic;
 }
 .mg-input__box:focus {
-  box-shadow: 0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
+  box-shadow: 0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
 }
 .mg-input__box:disabled {
   opacity: 0.3;
@@ -145,8 +145,8 @@
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box {
   margin-right: -0.1rem;
-  border-top-right-radius: 0%;
-  border-bottom-right-radius: 0%;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible {
   outline-style: solid;

package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.js

@@ -6,35 +6,6 @@ export class MgInputPassword {
   constructor() {
     // hasDisplayedError (triggered by blur event)
     this.hasDisplayedError = false;
-    /**
-     * Input name
-     * If not set the value equals the identifier
-     */
-    this.name = this.identifier;
-    /**
-     * Define if label is visible
-     */
-    this.labelHide = false;
-    /**
-     * Define if input is required
-     */
-    this.required = false;
-    /**
-     * Define if input is readonly
-     */
-    this.readonly = false;
-    /**
-     * Define if input is disabled
-     */
-    this.disabled = false;
-    /**
-     * Define input width
-     */
-    this.mgWidth = 'full';
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-input--password']);
     /**
      * Handle input event
      */
@@ -72,6 +43,23 @@ export class MgInputPassword {
         this.errorMessage = this.messages.errors.required;
       }
     };
+    this.value = undefined;
+    this.identifier = undefined;
+    this.name = this.identifier;
+    this.label = undefined;
+    this.labelOnTop = undefined;
+    this.labelHide = false;
+    this.placeholder = undefined;
+    this.required = false;
+    this.readonly = false;
+    this.disabled = false;
+    this.mgWidth = 'full';
+    this.tooltip = undefined;
+    this.helpText = undefined;
+    this.valid = undefined;
+    this.invalid = undefined;
+    this.classList = new ClassList(['mg-input--password']);
+    this.errorMessage = undefined;
   }
   handleValue(newValue) {
     this.valueChange.emit(newValue);

package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js

@@ -20,39 +20,6 @@ export class MgInputRadio {
     this.inputs = [];
     // hasDisplayedError (triggered by blur event)
     this.hasDisplayedError = false;
-    /**
-     * Input name
-     * If not set the value equals the identifier
-     */
-    this.name = this.identifier;
-    /**
-     * Define if label is displayed on top
-     */
-    this.labelOnTop = false;
-    /**
-     * Define if label is visible
-     */
-    this.labelHide = false;
-    /**
-     * Define if inputs are display verticaly
-     */
-    this.inputVerticalList = false;
-    /**
-     * Define if input is required
-     */
-    this.required = false;
-    /**
-     * Define if input is readonly
-     */
-    this.readonly = false;
-    /**
-     * Define if input is disabled
-     */
-    this.disabled = false;
-    /**
-     * Component classes
-     */
-    this.classList = new ClassList(['mg-input--radio']);
     /**
      * Handle input event
      *
@@ -102,6 +69,24 @@ export class MgInputRadio {
      * @returns {HTMLInputElement} element
      */
     this.getInvalidElement = () => this.inputs.find((input) => !input.disabled && !input.readOnly && !input.checkValidity());
+    this.value = undefined;
+    this.items = undefined;
+    this.identifier = undefined;
+    this.name = this.identifier;
+    this.label = undefined;
+    this.labelOnTop = false;
+    this.labelHide = false;
+    this.inputVerticalList = false;
+    this.required = false;
+    this.readonly = false;
+    this.disabled = false;
+    this.tooltip = undefined;
+    this.helpText = undefined;
+    this.valid = undefined;
+    this.invalid = undefined;
+    this.classList = new ClassList(['mg-input--radio']);
+    this.errorMessage = undefined;
+    this.options = undefined;
   }
   handleValue(newValue) {
     this.valueChange.emit(newValue);

package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.css

@@ -124,7 +124,7 @@
   font-style: italic;
 }
 .mg-input__box:focus {
-  box-shadow: 0 0 0.6rem hsla(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
+  box-shadow: 0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5);
 }
 .mg-input__box:disabled {
   opacity: 0.3;
@@ -145,8 +145,8 @@
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box {
   margin-right: -0.1rem;
-  border-top-right-radius: 0%;
-  border-bottom-right-radius: 0%;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 .mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible {
   outline-style: solid;