@mgdis/mg-components 5.8.2 → 5.10.0

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

@@ -30,37 +30,96 @@
   vertical-align: middle;
 }
 
+.mg-icon {
+  color: currentColor;
+}
 .mg-icon[size=small], .mg-icon.mg-icon--size-small {
   width: var(--mg-icon-small-size);
   height: var(--mg-icon-small-size);
 }
+.mg-icon[size=small][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon), .mg-icon.mg-icon--size-small[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon) {
+  padding: calc(var(--mg-icon-small-size) / 2);
+}
 .mg-icon[size=regular], .mg-icon.mg-icon--size-regular {
   width: var(--mg-icon-regular-size);
   height: var(--mg-icon-regular-size);
 }
+.mg-icon[size=regular][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon), .mg-icon.mg-icon--size-regular[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon) {
+  padding: calc(var(--mg-icon-regular-size) / 2);
+}
+.mg-icon[size=medium], .mg-icon.mg-icon--size-medium {
+  width: var(--mg-icon-medium-size);
+  height: var(--mg-icon-medium-size);
+}
+.mg-icon[size=medium][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon), .mg-icon.mg-icon--size-medium[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon) {
+  padding: calc(var(--mg-icon-medium-size) / 2);
+}
 .mg-icon[size=large], .mg-icon.mg-icon--size-large {
   width: var(--mg-icon-large-size);
   height: var(--mg-icon-large-size);
 }
+.mg-icon[size=large][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon), .mg-icon.mg-icon--size-large[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon) {
+  padding: calc(var(--mg-icon-large-size) / 2);
+}
 .mg-icon[size=extra-large], .mg-icon.mg-icon--size-extra-large {
   width: var(--mg-icon-extra-large-size);
   height: var(--mg-icon-extra-large-size);
 }
-.mg-icon[class*=mg-icon--variant-] {
-  border-radius: var(--mg-message-border-radius);
-  padding: 0.3rem;
+.mg-icon[size=extra-large][class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon), .mg-icon.mg-icon--size-extra-large[class*=mg-icon--variant-]:not(.mg-icon--variant-style-icon) {
+  padding: calc(var(--mg-icon-extra-large-size) / 2);
+}
+.mg-icon.mg-icon--variant-success.mg-icon--variant-style-icon {
+  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
+}
+.mg-icon.mg-icon--variant-warning.mg-icon--variant-style-icon {
+  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l));
+}
+.mg-icon.mg-icon--variant-danger.mg-icon--variant-style-icon {
+  color: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
 }
-.mg-icon.mg-icon--variant-success {
-  background-color: hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) + 20%));
+.mg-icon.mg-icon--variant-info.mg-icon--variant-style-icon {
+  color: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
 }
-.mg-icon.mg-icon--variant-warning {
-  background-color: hsl(var(--color-warning-h), var(--color-warning-s), calc(var(--color-warning-l) + 20%));
+.mg-icon.mg-icon--variant-app.mg-icon--variant-style-icon {
+  color: hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l));
 }
-.mg-icon.mg-icon--variant-danger {
-  background-color: hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) + 20%));
+.mg-icon.mg-icon--variant-success.mg-icon--variant-style-background {
+  background-color: hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));
 }
-.mg-icon.mg-icon--variant-info {
-  background-color: hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) + 20%));
+.mg-icon.mg-icon--variant-warning.mg-icon--variant-style-background {
+  background-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));
+}
+.mg-icon.mg-icon--variant-danger.mg-icon--variant-style-background {
+  background-color: hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));
+}
+.mg-icon.mg-icon--variant-info.mg-icon--variant-style-background {
+  background-color: hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));
+}
+.mg-icon.mg-icon--variant-app.mg-icon--variant-style-background {
+  background-color: hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l));
+}
+.mg-icon.mg-icon--variant-success.mg-icon--variant-style-full {
+  color: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
+  background-color: hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));
+}
+.mg-icon.mg-icon--variant-warning.mg-icon--variant-style-full {
+  color: hsl(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l));
+  background-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));
+}
+.mg-icon.mg-icon--variant-danger.mg-icon--variant-style-full {
+  color: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
+  background-color: hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));
+}
+.mg-icon.mg-icon--variant-info.mg-icon--variant-style-full {
+  color: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
+  background-color: hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));
+}
+.mg-icon.mg-icon--variant-app.mg-icon--variant-style-full {
+  color: hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-app-l));
+  background-color: hsl(var(--mg-color-app-h), var(--mg-color-app-s), var(--mg-color-soft-l));
+}
+.mg-icon[class*=mg-icon--variant-] {
+  border-radius: var(--mg-icon-border-radius);
 }
 
 /**

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

@@ -1,51 +1,68 @@
 import { h } from '@stencil/core';
-import { icons, sizes, variants } from './mg-icon.conf';
+import { icons, sizes, variants, variantStyles } from './mg-icon.conf';
 import { ClassList } from '../../../utils/components.utils';
 export class MgIcon {
   constructor() {
     /**
      * getIcon
-     *
      * @returns {HTMLElement} icon html
      */
     this.getIcon = () => icons[this.icon]();
+    /**
+     * Method to set default varianStyle props
+     * needeed has stencil doesn't know that props is mutated when updated in prop watcher
+     * @returns {void}
+     */
+    this.setDefaultVariantStyle = () => {
+      if (this.variantStyle === undefined)
+        this.variantStyle = 'background';
+    };
     this.icon = undefined;
     this.size = 'regular';
     this.variant = undefined;
+    this.variantStyle = undefined;
     this.spin = false;
     this.classList = new ClassList(['mg-icon']);
   }
   validateIcon(newValue, oldValue) {
-    if (!Object.keys(icons).includes(newValue)) {
+    if (!Object.keys(icons).includes(newValue))
       throw new Error(`<mg-icon> prop "icon" must be one of: ${Object.keys(icons).join(', ')}`);
-    }
     else {
-      if (oldValue !== undefined) {
+      if (oldValue !== undefined)
         this.classList.delete(`mg-icon--${oldValue}`);
-      }
       this.classList.add(`mg-icon--${newValue}`);
     }
   }
   validateSize(newValue, oldValue) {
-    if (!sizes.includes(newValue)) {
+    if (!sizes.includes(newValue))
       throw new Error(`<mg-icon> prop "size" must be one of: ${sizes.join(', ')}`);
-    }
     else {
-      if (oldValue !== undefined) {
+      if (oldValue !== undefined)
         this.classList.delete(`mg-icon--size-${oldValue}`);
-      }
       this.classList.add(`mg-icon--size-${newValue}`);
     }
   }
   validateVariant(newValue, oldValue) {
-    if (newValue !== undefined && !variants.includes(newValue)) {
-      throw new Error(`<mg-icon> prop "variant" must be one of: ${variants.join(', ')}`);
+    if (Boolean(newValue)) {
+      if (!variants.includes(newValue))
+        throw new Error(`<mg-icon> prop "variant" must be one of: ${variants.join(', ')}`);
+      else {
+        this.setDefaultVariantStyle();
+        if (oldValue !== undefined)
+          this.classList.delete(`mg-icon--variant-${oldValue}`);
+        this.classList.add(`mg-icon--variant-${newValue}`);
+      }
     }
-    else if (newValue !== undefined) {
-      if (oldValue !== undefined) {
-        this.classList.delete(`mg-icon--variant-${oldValue}`);
+  }
+  validateVariantStyle(newValue, oldValue) {
+    if (Boolean(newValue)) {
+      if (!variantStyles.includes(newValue))
+        throw new Error(`<mg-icon> prop "variantStyle" must be one of: ${variantStyles.join(', ')}`);
+      else {
+        if (oldValue !== undefined)
+          this.classList.delete(`mg-icon--variant-style-${oldValue}`);
+        this.classList.add(`mg-icon--variant-style-${newValue}`);
       }
-      this.classList.add(`mg-icon--variant-${newValue}`);
     }
   }
   handleSpin(newValue) {
@@ -60,18 +77,17 @@ export class MgIcon {
   }
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
     this.validateIcon(this.icon);
     this.validateSize(this.size);
     this.validateVariant(this.variant);
+    this.validateVariantStyle(this.variantStyle);
     this.handleSpin(this.spin);
   }
   /**
    * Render component
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -99,11 +115,11 @@ export class MgIcon {
           "resolved": "string",
           "references": {}
         },
-        "required": false,
+        "required": true,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Icon to display"
+          "text": "Icon to display."
         },
         "attribute": "icon",
         "reflect": false
@@ -113,7 +129,7 @@ export class MgIcon {
         "mutable": false,
         "complexType": {
           "original": "IconSizeType",
-          "resolved": "\"extra-large\" | \"large\" | \"regular\" | \"small\"",
+          "resolved": "\"extra-large\" | \"large\" | \"medium\" | \"regular\" | \"small\"",
           "references": {
             "IconSizeType": {
               "location": "import",
@@ -136,7 +152,7 @@ export class MgIcon {
         "mutable": false,
         "complexType": {
           "original": "IconVariantType",
-          "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
+          "resolved": "\"app\" | \"danger\" | \"info\" | \"success\" | \"warning\"",
           "references": {
             "IconVariantType": {
               "location": "import",
@@ -145,14 +161,36 @@ export class MgIcon {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define icon variant\nAdd a background to the icon based on variant color"
+          "text": "Define icon variant color"
         },
         "attribute": "variant",
         "reflect": false
       },
+      "variantStyle": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "IconVariantStyleType",
+          "resolved": "\"background\" | \"full\" | \"icon\"",
+          "references": {
+            "IconVariantStyleType": {
+              "location": "import",
+              "path": "./mg-icon.conf"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define icon color variant style\nAdd a color to the icon based on variant color with given style\n'full': Used to set a circular background with variant soft color and icon variant color\n'background': Used to set a circular background with variant soft color\n'icon': Used to set a color only to the icon"
+        },
+        "attribute": "variant-style",
+        "reflect": false
+      },
       "spin": {
         "type": "boolean",
         "mutable": false,
@@ -188,6 +226,9 @@ export class MgIcon {
       }, {
         "propName": "variant",
         "methodName": "validateVariant"
+      }, {
+        "propName": "variantStyle",
+        "methodName": "validateVariantStyle"
       }, {
         "propName": "spin",
         "methodName": "handleSpin"

package/dist/collection/components/atoms/mg-input-title/mg-input-title.js

@@ -19,7 +19,6 @@ export class MgInputTitle {
    *************/
   /**
    * Init tag name
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -28,7 +27,6 @@ export class MgInputTitle {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

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

@@ -22,8 +22,8 @@
 }
 .mg-tag.mg-tag--primary.mg-tag--soft {
   font-weight: 400;
-  background-color: hsl(var(--color-dark-h), var(--color-dark-s), 90%);
-  border-color: hsl(var(--color-dark-h), var(--color-dark-s), 90%);
+  background-color: hsl(var(--color-dark-h), var(--color-dark-s), var(--mg-color-soft-l));
+  border-color: hsl(var(--color-dark-h), var(--color-dark-s), var(--mg-color-soft-l));
   color: hsl(var(--color-dark));
 }
 .mg-tag.mg-tag--primary.mg-tag--soft ::slotted(mg-icon) {
@@ -40,8 +40,8 @@
 }
 .mg-tag.mg-tag--secondary.mg-tag--soft {
   font-weight: 400;
-  background-color: hsl(var(--color-light-h), var(--color-light-s), 90%);
-  border-color: hsl(var(--color-light-h), var(--color-light-s), 90%);
+  background-color: hsl(var(--color-light-h), var(--color-light-s), var(--mg-color-soft-l));
+  border-color: hsl(var(--color-light-h), var(--color-light-s), var(--mg-color-soft-l));
   color: hsl(var(--color-dark));
 }
 .mg-tag.mg-tag--secondary.mg-tag--soft ::slotted(mg-icon) {
@@ -58,8 +58,8 @@
 }
 .mg-tag.mg-tag--success.mg-tag--soft {
   font-weight: 400;
-  background-color: hsl(var(--color-success-h), var(--color-success-s), 90%);
-  border-color: hsl(var(--color-success-h), var(--color-success-s), 90%);
+  background-color: hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));
+  border-color: hsl(var(--color-success-h), var(--color-success-s), var(--mg-color-soft-l));
   color: hsl(var(--color-dark));
 }
 .mg-tag.mg-tag--success.mg-tag--soft ::slotted(mg-icon) {
@@ -76,8 +76,8 @@
 }
 .mg-tag.mg-tag--warning.mg-tag--soft {
   font-weight: 400;
-  background-color: hsl(var(--color-warning-h), var(--color-warning-s), 90%);
-  border-color: hsl(var(--color-warning-h), var(--color-warning-s), 90%);
+  background-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));
+  border-color: hsl(var(--color-warning-h), var(--color-warning-s), var(--mg-color-soft-l));
   color: hsl(var(--color-dark));
 }
 .mg-tag.mg-tag--warning.mg-tag--soft ::slotted(mg-icon) {
@@ -94,8 +94,8 @@
 }
 .mg-tag.mg-tag--danger.mg-tag--soft {
   font-weight: 400;
-  background-color: hsl(var(--color-danger-h), var(--color-danger-s), 90%);
-  border-color: hsl(var(--color-danger-h), var(--color-danger-s), 90%);
+  background-color: hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));
+  border-color: hsl(var(--color-danger-h), var(--color-danger-s), var(--mg-color-soft-l));
   color: hsl(var(--color-dark));
 }
 .mg-tag.mg-tag--danger.mg-tag--soft ::slotted(mg-icon) {
@@ -112,8 +112,8 @@
 }
 .mg-tag.mg-tag--info.mg-tag--soft {
   font-weight: 400;
-  background-color: hsl(var(--color-info-h), var(--color-info-s), 90%);
-  border-color: hsl(var(--color-info-h), var(--color-info-s), 90%);
+  background-color: hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));
+  border-color: hsl(var(--color-info-h), var(--color-info-s), var(--mg-color-soft-l));
   color: hsl(var(--color-dark));
 }
 .mg-tag.mg-tag--info.mg-tag--soft ::slotted(mg-icon) {

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

@@ -46,7 +46,6 @@ export class MgTag {
    *************/
   /**
    * Validate the given textContent
-   *
    * @param {string} textContent html element textContent property
    * @returns {void}
    */
@@ -59,7 +58,6 @@ export class MgTag {
    *************/
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -70,7 +68,6 @@ export class MgTag {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

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

@@ -1,12 +1,11 @@
 import { h, Host } from '@stencil/core';
-import { createID, focusableElements } from '../../../utils/components.utils';
+import { createID, focusableElements, getWindows } from '../../../utils/components.utils';
 import { createPopper } from '@popperjs/core';
 import { Guard } from './mg-tooltip.conf';
 export class MgTooltip {
   constructor() {
     /**
      * Show tooltip
-     *
      * @returns {void}
      */
     this.show = () => {
@@ -16,10 +15,17 @@ export class MgTooltip {
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
       // Update its position
       this.popper.update();
+      // hide when click outside
+      // setTimeout is used to prevent event to trigger after creation
+      setTimeout(() => {
+        this.windows.forEach((localWindow) => {
+          localWindow.addEventListener('click', this.clickOutside, false);
+          localWindow.addEventListener('keydown', this.pressEscape, false);
+        });
+      }, 0);
     };
     /**
      * Hide tooltip
-     *
      * @returns {void}
      */
     this.hide = () => {
@@ -27,10 +33,32 @@ export class MgTooltip {
       this.tooltip.removeAttribute('data-show');
       // Disable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
+      // Remove event listener
+      this.windows.forEach((localWindow) => {
+        localWindow.removeEventListener('click', this.clickOutside, false);
+        localWindow.removeEventListener('keyboard', this.pressEscape, false);
+      });
+    };
+    /**
+     * Check if clicked outside of component and hidde tooltip
+     * @param {MouseEvent} event mouse event
+     * @returns {void}
+     */
+    this.clickOutside = (event) => {
+      if (event.target.closest('mg-tooltip') !== this.element)
+        this.setDisplay(false);
+    };
+    /**
+     * Check if 'Escape' key is pressed of component and hidde tooltip
+     * @param {KeyboardEvent} event keyboard event
+     * @returns {void}
+     */
+    this.pressEscape = (event) => {
+      if (event.code === 'Escape')
+        this.setDisplay(false);
     };
     /**
      * Method to set display prop
-     *
      * @param {boolean} newValue display prop new value
      * @param {boolean} condition additionnal condition to apply display prop newValue
      * @returns {void}
@@ -41,7 +69,6 @@ export class MgTooltip {
     };
     /**
      * Action for tooltip element and tooltiped element mouse listener
-     *
      * @param {Guard} elementGuard tooltip element guard
      * @param {boolean} isMouseenter mouseenter validation
      * @param {Guard} conditionalGuard guard condition
@@ -64,7 +91,6 @@ export class MgTooltip {
     };
     /**
      * Method to reset guard value
-     *
      * @returns {void}
      */
     this.resetGuard = () => {
@@ -72,7 +98,6 @@ export class MgTooltip {
     };
     /**
      * Update slot content when it is a mg-button
-     *
      * @param {HTMLMgButtonElement} mgButton slotted mg-button
      * @returns {void}
      */
@@ -91,7 +116,6 @@ export class MgTooltip {
     };
     /**
      * Init tooltip
-     *
      * @param {HTMLElement} slotElement slotted element
      * @param {HTMLElement} interactiveElement interactive element
      */
@@ -130,10 +154,7 @@ export class MgTooltip {
         this.resetGuard();
         this.setDisplay(false);
       });
-      document.addEventListener('keydown', (event) => {
-        if (event.code === 'Escape')
-          this.setDisplay(false);
-      });
+      document.addEventListener('keydown', this.pressEscape);
       // manage tooltipElement & tooltipedElement mouseenter/mouseleave events
       ['mouseenter', 'mouseleave'].forEach(eventType => {
         const isMouseenter = eventType === 'mouseenter';
@@ -170,11 +191,18 @@ export class MgTooltip {
   /*************
    * Lifecycle *
    *************/
+  /**
+   * set variables
+   * @returns {void}
+   */
+  componentWillLoad() {
+    // Get windows to attach events
+    this.windows = getWindows(window);
+  }
   /**
    * Get slotted element
    * Check if it already contain an interactive element, if not we need to add a tabIndex attribute
    * We need to attach the focused element to the tooltip (aria-describedby)
-   *
    * @returns {void}
    */
   componentDidLoad() {
@@ -208,7 +236,6 @@ export class MgTooltip {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -306,7 +333,7 @@ export class MgTooltip {
       },
       "disabled": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",

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

@@ -1,7 +1,6 @@
 import { h } from '@stencil/core';
 /**
  * Apply in all input child node the aria-describedby attribute
- *
  * @param {VNode[]} children Represent scoped elements
  * @param {Set<string>} ariaDescribedbyIDs List of IDs
  * @param {FunctionalUtilities} utils Stencil.js utils
@@ -18,7 +17,6 @@ const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(
 });
 /**
  * Add classes based on props
- *
  * @param {MgInputProps} props MgInput Interface Props
  */
 const manageClasses = (props) => {
@@ -32,14 +30,12 @@ const manageClasses = (props) => {
 };
 /**
  * Get tagname
- *
  * @param {boolean} isFieldset is fieldset
  * @returns {string} tag name
  */
 const getTagName = (isFieldset) => (isFieldset ? 'fieldset' : 'div');
 /**
  * Get input template
- *
  * @param {MgInputProps} props MgInput Interface Props
  * @param {VNode[]} children Represent scoped elements
  * @param {FunctionalUtilities} utils Stencil.js utils
@@ -99,14 +95,12 @@ export const MgInput = (props, children, utils) => {
   const TagName = getTagName(props.isFieldset);
   /**
    * Get tooltip node
-   *
    * @returns {VNode[]} mg-tooltip
    */
   const getTooltip = () => (h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip }, h("mg-icon", { icon: "info-circle" })));
   /**
    * Get input title (label) node
    * Display asterisk only if not disabled and not readonly
-   *
    * @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 && !props.readonly, "is-legend": props.isFieldset }, props.label));

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

@@ -5,7 +5,6 @@ import { ClassList } from '../../../../utils/components.utils';
 import { initLocales } from '../../../../locales';
 /**
  * type CheckboxItem validation function
- *
  * @param {unknown} items Checkbox item
  * @returns {boolean} match item type
  */
@@ -22,7 +21,6 @@ export class MgInputCheckbox {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
      * @param {InputEvent} event input event
      */
     this.handleInput = (event) => {
@@ -45,7 +43,6 @@ export class MgInputCheckbox {
     };
     /**
      * get invalid element
-     *
      * @returns {HTMLInputElement} element
      */
     this.getInvalidElement = () => this.inputs.find((input) => input !== null && !input.disabled && !input.checkValidity());
@@ -113,7 +110,6 @@ export class MgInputCheckbox {
   }
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   async displayError() {
@@ -126,7 +122,6 @@ export class MgInputCheckbox {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
@@ -143,7 +138,6 @@ export class MgInputCheckbox {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

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

@@ -36,7 +36,6 @@ export class MgInputDate {
     };
     /**
      * get input error code
-     *
      * @returns {null | InputError} error code
      */
     this.getInputError = () => {
@@ -62,7 +61,6 @@ export class MgInputDate {
     };
     /**
      * Check input errors
-     *
      * @returns {void}
      */
     this.setErrorMessage = () => {
@@ -132,7 +130,6 @@ export class MgInputDate {
   }
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   async displayError() {
@@ -145,7 +142,6 @@ export class MgInputDate {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {ReturnType<typeof setTimeout>} timeout
    */
   componentWillLoad() {
@@ -166,7 +162,6 @@ export class MgInputDate {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {