@mgdis/mg-components 5.10.0 → 5.11.0

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

@@ -5,13 +5,12 @@ export class MgIcon {
   constructor() {
     /**
      * getIcon
-     * @returns {HTMLElement} icon html
+     * @returns 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)
@@ -22,15 +21,15 @@ export class MgIcon {
     this.variant = undefined;
     this.variantStyle = undefined;
     this.spin = false;
-    this.classList = new ClassList(['mg-icon']);
+    this.classCollection = new ClassList(['mg-icon']);
   }
   validateIcon(newValue, oldValue) {
     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)
-        this.classList.delete(`mg-icon--${oldValue}`);
-      this.classList.add(`mg-icon--${newValue}`);
+        this.classCollection.delete(`mg-icon--${oldValue}`);
+      this.classCollection.add(`mg-icon--${newValue}`);
     }
   }
   validateSize(newValue, oldValue) {
@@ -38,8 +37,8 @@ export class MgIcon {
       throw new Error(`<mg-icon> prop "size" must be one of: ${sizes.join(', ')}`);
     else {
       if (oldValue !== undefined)
-        this.classList.delete(`mg-icon--size-${oldValue}`);
-      this.classList.add(`mg-icon--size-${newValue}`);
+        this.classCollection.delete(`mg-icon--size-${oldValue}`);
+      this.classCollection.add(`mg-icon--size-${newValue}`);
     }
   }
   validateVariant(newValue, oldValue) {
@@ -49,8 +48,8 @@ export class MgIcon {
       else {
         this.setDefaultVariantStyle();
         if (oldValue !== undefined)
-          this.classList.delete(`mg-icon--variant-${oldValue}`);
-        this.classList.add(`mg-icon--variant-${newValue}`);
+          this.classCollection.delete(`mg-icon--variant-${oldValue}`);
+        this.classCollection.add(`mg-icon--variant-${newValue}`);
       }
     }
   }
@@ -60,24 +59,23 @@ export class MgIcon {
         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.classCollection.delete(`mg-icon--variant-style-${oldValue}`);
+        this.classCollection.add(`mg-icon--variant-style-${newValue}`);
       }
     }
   }
   handleSpin(newValue) {
     if (newValue) {
-      this.classList.add('mg-icon--spin');
-      this.classList.add('mg-a11y-animation');
+      this.classCollection.add('mg-icon--spin');
+      this.classCollection.add('mg-a11y-animation');
     }
     else {
-      this.classList.delete('mg-icon--spin');
-      this.classList.delete('mg-a11y-animation');
+      this.classCollection.delete('mg-icon--spin');
+      this.classCollection.delete('mg-a11y-animation');
     }
   }
   /**
    * Check if props are well configured on init
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateIcon(this.icon);
@@ -88,10 +86,10 @@ export class MgIcon {
   }
   /**
    * Render component
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h("svg", { class: this.classList.join(), "aria-hidden": "true", focusable: "false", viewBox: "0 0 16 16" }, this.getIcon()));
+    return (h("svg", { class: this.classCollection.join(), "aria-hidden": "true", focusable: "false", viewBox: "0 0 16 16" }, this.getIcon()));
   }
   static get is() { return "mg-icon"; }
   static get encapsulation() { return "shadow"; }
@@ -213,7 +211,7 @@ export class MgIcon {
   }
   static get states() {
     return {
-      "classList": {}
+      "classCollection": {}
     };
   }
   static get watchers() {

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() {
     this.validateIdentifier(this.identifier);
@@ -27,7 +26,7 @@ export class MgInputTitle {
   }
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML element
    */
   render() {
     const TagName = this.tagName;

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

@@ -12,7 +12,7 @@ export class MgTag {
     this.variant = variants[0];
     this.outline = undefined;
     this.soft = undefined;
-    this.classList = new ClassList(['mg-tag']);
+    this.classCollection = new ClassList(['mg-tag']);
   }
   validateVariant(newValue, oldValue) {
     if (!variants.includes(newValue)) {
@@ -20,16 +20,16 @@ export class MgTag {
     }
     else {
       if (oldValue !== undefined) {
-        this.classList.delete(`mg-tag--${oldValue}`);
+        this.classCollection.delete(`mg-tag--${oldValue}`);
       }
-      this.classList.add(`mg-tag--${newValue}`);
+      this.classCollection.add(`mg-tag--${newValue}`);
     }
   }
   validateOutline(newValue) {
     if (newValue)
-      this.classList.add(this.classOutline);
+      this.classCollection.add(this.classOutline);
     else
-      this.classList.delete(this.classOutline);
+      this.classCollection.delete(this.classOutline);
   }
   validateSoft(newValue) {
     // usage validation
@@ -37,17 +37,16 @@ export class MgTag {
       throw new Error('<mg-tag> prop "soft" can NOT be used with prop "outline".');
     // apply class
     if (newValue)
-      this.classList.add(this.classSoft);
+      this.classCollection.add(this.classSoft);
     else
-      this.classList.delete(this.classSoft);
+      this.classCollection.delete(this.classSoft);
   }
   /*************
    * Methods *
    *************/
   /**
    * Validate the given textContent
-   * @param {string} textContent html element textContent property
-   * @returns {void}
+   * @param textContent - html element textContent property
    */
   validateTextContent(textContent) {
     if (typeof textContent !== 'string' || textContent.trim() === '')
@@ -58,7 +57,6 @@ export class MgTag {
    *************/
   /**
    * Check if props are well configured on init
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateVariant(this.variant);
@@ -68,10 +66,10 @@ export class MgTag {
   }
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h("span", { class: this.classList.join() }, h("slot", null)));
+    return (h("span", { class: this.classCollection.join() }, h("slot", null)));
   }
   static get is() { return "mg-tag"; }
   static get encapsulation() { return "shadow"; }
@@ -148,7 +146,7 @@ export class MgTag {
   }
   static get states() {
     return {
-      "classList": {}
+      "classCollection": {}
     };
   }
   static get elementRef() { return "element"; }

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

@@ -6,15 +6,12 @@ export class MgTooltip {
   constructor() {
     /**
      * Show tooltip
-     * @returns {void}
      */
     this.show = () => {
       // Make the tooltip visible
       this.tooltip.dataset.show = '';
       // Enable the event listeners
       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(() => {
@@ -26,7 +23,6 @@ export class MgTooltip {
     };
     /**
      * Hide tooltip
-     * @returns {void}
      */
     this.hide = () => {
       // Hide the tooltip
@@ -41,8 +37,7 @@ export class MgTooltip {
     };
     /**
      * Check if clicked outside of component and hidde tooltip
-     * @param {MouseEvent} event mouse event
-     * @returns {void}
+     * @param event - mouse event
      */
     this.clickOutside = (event) => {
       if (event.target.closest('mg-tooltip') !== this.element)
@@ -50,18 +45,18 @@ export class MgTooltip {
     };
     /**
      * Check if 'Escape' key is pressed of component and hidde tooltip
-     * @param {KeyboardEvent} event keyboard event
-     * @returns {void}
+     * @param event - keyboard event
      */
     this.pressEscape = (event) => {
-      if (event.code === 'Escape')
+      if (event.code === 'Escape') {
         this.setDisplay(false);
+        this.resetGuard();
+      }
     };
     /**
      * Method to set display prop
-     * @param {boolean} newValue display prop new value
-     * @param {boolean} condition additionnal condition to apply display prop newValue
-     * @returns {void}
+     * @param newValue - display prop new value
+     * @param condition - additionnal condition to apply display prop newValue
      */
     this.setDisplay = (newValue, condition = true) => {
       if (!this.disabled && condition)
@@ -69,10 +64,9 @@ 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
-     * @returns {void}
+     * @param elementGuard -  tooltip element guard
+     * @param isMouseenter - mouseenter validation
+     * @param conditionalGuard - guard condition
      */
     this.tooltipMouseListenerAction = (elementGuard, isMouseenter, conditionalGuard) => {
       // we mutate elementGuard
@@ -91,15 +85,13 @@ export class MgTooltip {
     };
     /**
      * Method to reset guard value
-     * @returns {void}
      */
     this.resetGuard = () => {
       this.guard = undefined;
     };
     /**
      * Update slot content when it is a mg-button
-     * @param {HTMLMgButtonElement} mgButton slotted mg-button
-     * @returns {void}
+     * @param mgButton - slotted mg-button
      */
     this.setMgButtonWrapper = (mgButton) => {
       if (mgButton.disabled) {
@@ -116,8 +108,8 @@ export class MgTooltip {
     };
     /**
      * Init tooltip
-     * @param {HTMLElement} slotElement slotted element
-     * @param {HTMLElement} interactiveElement interactive element
+     * @param slotElement - slotted element
+     * @param interactiveElement - interactive element
      */
     this.initTooltip = (slotElement, interactiveElement) => {
       // Add tabindex to slotted element if we can't find any interactive element
@@ -178,7 +170,6 @@ export class MgTooltip {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
       throw new Error('<mg-tooltip> prop "message" is required.');
     }
-    this.popper.update();
   }
   handleDisplay(newValue) {
     if (newValue) {
@@ -193,7 +184,6 @@ export class MgTooltip {
    *************/
   /**
    * set variables
-   * @returns {void}
    */
   componentWillLoad() {
     // Get windows to attach events
@@ -203,7 +193,6 @@ export class MgTooltip {
    * 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() {
     var _a;
@@ -234,9 +223,15 @@ export class MgTooltip {
     this.handleDisplay(this.display);
     this.validateMessage(this.message);
   }
+  /**
+   * update popper position after props change on component did update hook to benefit from render ended
+   */
+  componentDidUpdate() {
+    this.popper.update();
+  }
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     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 }))));

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

@@ -1 +1,4 @@
-export {};
+/**
+ * Possible input width
+ */
+export const widths = [2, 4, 16, 'full'];

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

@@ -1,10 +1,11 @@
 import { h } from '@stencil/core';
+import { widths } from './MgInput.conf';
 /**
  * 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
- * @returns {VNode[]} Children with aria-describedby attribute
+ * @param children - Represent scoped elements
+ * @param ariaDescribedbyIDs - List of IDs
+ * @param utils - Stencil.js utils
+ * @returns Children with aria-describedby attribute
  */
 const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(children, child => {
   if (['input', 'select', 'textarea'].includes(child.vtag)) {
@@ -17,29 +18,36 @@ const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(
 });
 /**
  * Add classes based on props
- * @param {MgInputProps} props MgInput Interface Props
+ * @param props - MgInput Interface Props
  */
 const manageClasses = (props) => {
-  props.classList.add('mg-input');
+  props.classCollection.add('mg-input');
   if (props.labelOnTop)
-    props.classList.add('mg-input--label-on-top');
+    props.classCollection.add('mg-input--label-on-top');
+  else
+    props.classCollection.delete('mg-input--label-on-top');
   if (props.readonly)
-    props.classList.add('mg-input--readonly');
+    props.classCollection.add('mg-input--readonly');
+  else
+    props.classCollection.delete('mg-input--readonly');
+  widths.forEach(width => {
+    props.classCollection.delete(`mg-input--width-${width}`);
+  });
   if (props.mgWidth !== undefined)
-    props.classList.add(`mg-input--width-${props.mgWidth}`);
+    props.classCollection.add(`mg-input--width-${props.mgWidth}`);
 };
 /**
  * Get tagname
- * @param {boolean} isFieldset is fieldset
- * @returns {string} tag name
+ * @param isFieldset - is fieldset
+ * @returns 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
- * @returns {VNode[]} input template
+ * @param props - MgInput Interface Props
+ * @param children - Represent scoped elements
+ * @param utils - Stencil.js utils
+ * @returns input template
  */
 export const MgInput = (props, children, utils) => {
   /**
@@ -95,14 +103,14 @@ export const MgInput = (props, children, utils) => {
   const TagName = getTagName(props.isFieldset);
   /**
    * Get tooltip node
-   * @returns {VNode[]} mg-tooltip
+   * @returns 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
+   * @returns 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));
-  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), children.filter(child => child.$name$ === 'append-input'))) : (h("div", { class: "mg-input__input-container" }, h("div", { class: { 'mg-input__input': true, 'mg-input__input--has-error': props.errorMessage !== undefined } }, applyAriadescribedBy(children, ariaDescribedbyIDs, utils), !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.classCollection.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), children.filter(child => child.$name$ === 'append-input'))) : (h("div", { class: "mg-input__input-container" }, h("div", { class: { 'mg-input__input': true, 'mg-input__input--has-error': props.errorMessage !== undefined } }, applyAriadescribedBy(children, ariaDescribedbyIDs, utils), !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" }))))));
 };

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

@@ -1 +1,4 @@
-export {};
+/**
+ * List of all availables checkbox type
+ */
+export const checkboxTypes = ['checkbox', 'multi'];

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

@@ -84,7 +84,7 @@
 .mg-input__input + .mg-input__help-text, .mg-input__input + .mg-input__error {
   margin-top: 0.5rem;
 }
-.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle {
+.mg-input__input .mg-input__box:disabled, .mg-input__input-group--disabled label, .mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle, .mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong {
   opacity: var(--mg-disabled-opacity);
 }
 
@@ -176,4 +176,21 @@ fieldset.mg-input.mg-input--label-on-top .mg-input__input-group-container {
     animation: none !important;
     transition: none !important;
   }
+}
+/**
+* checkbox multi
+*/
+.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--mg-inputs-spacer) * 1.2);
+}
+.mg-input.mg-input--checkbox-multi .mg-input__input-checkbox-multi-inputs {
+  margin: 0;
+}
+.mg-input.mg-input--checkbox-multi:not(.mg-input--label-on-top) mg-tooltip {
+  margin-left: var(--mg-inputs-spacer);
+}
+.mg-input.mg-input--checkbox-multi mg-popover {
+  --mg-popover-min-width: 7rem;
 }