@mgdis/mg-components 5.3.0 → 5.5.0

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

@@ -8,16 +8,10 @@ export class MgTag {
      ************/
     // Classes
     this.classOutline = `mg-tag--outline`;
-    /**************
-     * Decorators *
-     **************/
-    /**
-     * Define button variant
-     */
-    this.variant = variants[0]; // primary
-    /**
-     * Component classes
-     */
+    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 (!textContent || 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.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
      *
@@ -87,6 +70,90 @@ export class MgTooltip {
     this.resetGuard = () => {
       this.guard = undefined;
     };
+    /**
+     * Update slot content when it is a mg-button
+     *
+     * @param {HTMLMgButtonElement} mgButton slotted mg-button
+     * @returns {void}
+     */
+    this.setMgButtonWrapper = (mgButton) => {
+      if (mgButton.disabled) {
+        const div = document.createElement('div');
+        div.classList.add('mg-tooltip__mg-button-wrapper');
+        mgButton.parentNode.insertBefore(div, mgButton);
+        div.appendChild(mgButton);
+        this.tooltipedElement = div;
+      }
+      else if (mgButton.parentElement.classList.contains('mg-tooltip__mg-button-wrapper')) {
+        this.element.firstElementChild.replaceWith(mgButton);
+        this.tooltipedElement = mgButton;
+      }
+    };
+    /**
+     * Init tooltip
+     *
+     * @param {HTMLElement} slotElement slotted element
+     * @param {HTMLElement} interactiveElement interactive element
+     */
+    this.initTooltip = (slotElement, interactiveElement) => {
+      // Add tabindex to slotted element if we can't find any interactive element
+      if (interactiveElement === null || interactiveElement === undefined)
+        slotElement.tabIndex = 0;
+      // Set aria-describedby
+      const ariaDescribedby = slotElement.getAttribute('aria-describedby');
+      if (ariaDescribedby === null) {
+        this.tooltipedElement.setAttribute('aria-describedby', this.identifier);
+      }
+      else {
+        // We ensure to have uniq ids
+        slotElement.setAttribute('aria-describedby', `${[...new Set([...ariaDescribedby.split(' '), this.identifier])].join(' ')}`);
+      }
+      // Create popperjs tooltip
+      this.popper = createPopper(this.tooltipedElement, this.tooltip, {
+        placement: this.placement,
+        strategy: 'fixed',
+        modifiers: [
+          {
+            name: 'offset',
+            options: {
+              offset: [0, 8],
+            },
+          },
+        ],
+      });
+      // Manage tooltipedElement focus/blur events
+      this.tooltipedElement.addEventListener('focus', () => {
+        this.guard = Guard.FOCUS;
+        this.setDisplay(true);
+      });
+      ['blur', 'keydown'].forEach(event => {
+        this.tooltipedElement.addEventListener(event, (e) => {
+          // we continue to process ONLY for KeyboardEvents 'Escape'
+          if (e.type === 'keydown' && e.code !== 'Escape') {
+            return;
+          }
+          this.resetGuard();
+          this.setDisplay(false);
+        });
+      });
+      // manage tooltipElement & tooltipedElement mouseenter/mouseleave events
+      ['mouseenter', 'mouseleave'].forEach(event => {
+        const isMouseenter = event === 'mouseenter';
+        [
+          { element: this.tooltip, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIPED_ELEMENT) },
+          { element: this.tooltipedElement, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIP_ELEMENT) },
+        ].forEach(({ element, action }) => {
+          element.addEventListener(event, () => {
+            action();
+          });
+        });
+      });
+    };
+    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() === '') {
@@ -121,58 +188,20 @@ export class MgTooltip {
     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(',')));
     // define selected element to become tooltip selector
-    const tooltipedElement = interactiveElement || slotElement;
-    // Add tabindex to slotted element if we can't find any interactive element
-    if (interactiveElement === null || interactiveElement === undefined)
-      slotElement.tabIndex = 0;
-    // Set aria-describedby
-    const ariaDescribedby = slotElement.getAttribute('aria-describedby');
-    if (ariaDescribedby === null) {
-      tooltipedElement.setAttribute('aria-describedby', this.identifier);
-    }
-    else {
-      slotElement.setAttribute('aria-describedby', `${ariaDescribedby} ${this.identifier}`);
-    }
-    // Create popperjs tooltip
-    this.popper = createPopper(tooltipedElement, this.tooltip, {
-      placement: this.placement,
-      strategy: 'fixed',
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [0, 8],
-          },
-        },
-      ],
-    });
-    // Manage tooltipedElement focus/blur events
-    tooltipedElement.addEventListener('focus', () => {
-      this.guard = Guard.FOCUS;
-      this.setDisplay(true);
-    });
-    ['blur', 'keydown'].forEach(event => {
-      tooltipedElement.addEventListener(event, (e) => {
-        // we continue to process ONLY for KeyboardEvents 'Escape'
-        if (e.type === 'keydown' && e.code !== 'Escape') {
-          return;
+    this.tooltipedElement = interactiveElement || slotElement;
+    // Check if slotted element is a disabled mg-button
+    // In this case we wrap the mg-button into a div to enable the tooltip
+    if (slotElement.tagName === 'MG-BUTTON') {
+      new MutationObserver(mutationList => {
+        if (mutationList.some(mutation => mutation.attributeName === 'aria-disabled')) {
+          this.setMgButtonWrapper(slotElement);
+          this.initTooltip(slotElement, interactiveElement);
         }
-        this.resetGuard();
-        this.setDisplay(false);
-      });
-    });
-    // manage tooltipElement & tooltipedElement mouseenter/mouseleave events
-    ['mouseenter', 'mouseleave'].forEach(event => {
-      const isMouseenter = event === 'mouseenter';
-      [
-        { element: this.tooltip, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIP_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIPED_ELEMENT) },
-        { element: tooltipedElement, action: () => this.tooltipMouseListenerAction(Guard.HOVER_TOOLTIPED_ELEMENT, isMouseenter, Guard.HOVER_TOOLTIP_ELEMENT) },
-      ].forEach(({ element, action }) => {
-        element.addEventListener(event, () => {
-          action();
-        });
-      });
-    });
+      }).observe(slotElement, { attributes: true });
+      this.setMgButtonWrapper(slotElement);
+    }
+    // Init Tooltip
+    this.initTooltip(slotElement, interactiveElement);
     this.handleDisplay(this.display);
     this.validateMessage(this.message);
   }

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

@@ -168,4 +168,11 @@ fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container {
 
 *:focus:not(:focus-visible) {
   outline: none;
+}
+
+@media (prefers-reduced-motion) {
+  .mg-a11y-animation {
+    animation: none !important;
+    transition: none !important;
+  }
 }

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

@@ -197,4 +197,11 @@
 
 *:focus:not(:focus-visible) {
   outline: none;
+}
+
+@media (prefers-reduced-motion) {
+  .mg-a11y-animation {
+    animation: none !important;
+    transition: none !important;
+  }
 }

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,6 +86,23 @@ 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) {
     if (newValue !== undefined && newValue !== null && (typeof newValue !== 'string' || !dateRegExp.test(newValue))) {

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

@@ -242,6 +242,12 @@
   outline: none;
 }
 
+@media (prefers-reduced-motion) {
+  .mg-a11y-animation {
+    animation: none !important;
+    transition: none !important;
+  }
+}
 .mg-input .mg-input__box {
   text-align: var(--mg-inputs-text-align, right);
 }

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

@@ -240,4 +240,11 @@
 
 *:focus:not(:focus-visible) {
   outline: none;
+}
+
+@media (prefers-reduced-motion) {
+  .mg-a11y-animation {
+    animation: none !important;
+    transition: none !important;
+  }
 }

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.css

@@ -168,4 +168,11 @@ fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container {
 
 *:focus:not(:focus-visible) {
   outline: none;
+}
+
+@media (prefers-reduced-motion) {
+  .mg-a11y-animation {
+    animation: none !important;
+    transition: none !important;
+  }
 }