@mgdis/mg-components 5.9.1 → 5.10.1

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

@@ -15,8 +15,6 @@ export class MgInputText {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
-     * @returns {void}
      */
     this.handleInput = () => {
       this.checkValidity();
@@ -27,29 +25,23 @@ export class MgInputText {
     };
     /**
      * Handle focus event
-     *
-     * @returns {void}
      */
     this.handleFocus = () => {
-      this.classList.add(this.classFocus);
-      this.classList = new ClassList(this.classList.classes);
+      this.classCollection.add(this.classFocus);
+      this.classCollection = new ClassList(this.classCollection.classes);
     };
     /**
      * Handle blur event
-     *
-     * @returns {void}
      */
     this.handleBlur = () => {
       // Manage focus
-      this.classList.delete(this.classFocus);
-      this.classList = new ClassList(this.classList.classes);
+      this.classCollection.delete(this.classFocus);
+      this.classCollection = new ClassList(this.classCollection.classes);
       // Display Error
       this.displayError();
     };
     /**
      * Check if input is valid
-     *
-     * @returns {void}
      */
     this.checkValidity = () => {
       var _a;
@@ -60,8 +52,6 @@ export class MgInputText {
     };
     /**
      * Set input error message
-     *
-     * @returns {void}
      */
     this.setErrorMessage = () => {
       // Set error message
@@ -77,11 +67,9 @@ export class MgInputText {
     };
     /**
      * Validate pattern configuration
-     *
-     * @returns {void}
      */
     this.validatePattern = () => {
-      if (this.pattern &&
+      if (this.pattern !== undefined &&
         typeof this.pattern === 'string' &&
         this.pattern !== '' &&
         (this.patternErrorMessage === undefined || typeof this.patternErrorMessage !== 'string' || this.patternErrorMessage === '')) {
@@ -90,17 +78,15 @@ export class MgInputText {
     };
     /**
      * Validate append slot
-     *
-     * @returns {void}
      */
     this.validateAppendSlot = () => {
       const slotAppendInput = Array.from(this.element.querySelectorAll('[slot="append-input"]'));
       if (slotAppendInput.length === 1) {
-        this.classList.add(slotAppendInput[0].nodeName === 'MG-BUTTON' ? this.classIsInputGroupAppend : 'mg-input--is-append-input-slot-content');
+        this.classCollection.add(slotAppendInput[0].nodeName === 'MG-BUTTON' ? this.classIsInputGroupAppend : 'mg-input--is-append-input-slot-content');
       }
       else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {
-        this.classList.add(this.classIsInputGroupAppend);
-        this.classList.add('mg-input--has-buttons-group-append');
+        this.classCollection.add(this.classIsInputGroupAppend);
+        this.classCollection.add('mg-input--has-buttons-group-append');
       }
     };
     this.value = undefined;
@@ -124,7 +110,7 @@ export class MgInputText {
     this.helpText = undefined;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classList = new ClassList(['mg-input--text']);
+    this.classCollection = new ClassList(['mg-input--text']);
     this.errorMessage = undefined;
   }
   handleValue(newValue) {
@@ -132,10 +118,10 @@ export class MgInputText {
   }
   validateIcon(newValue) {
     if (newValue !== undefined) {
-      this.classList.add(this.classHasIcon);
+      this.classCollection.add(this.classHasIcon);
     }
     else {
-      this.classList.delete(this.classHasIcon);
+      this.classCollection.delete(this.classHasIcon);
     }
   }
   handleValidityChange(newValue, _oldValue, prop) {
@@ -150,16 +136,12 @@ export class MgInputText {
   }
   /**
    * Public method to play input focus
-   *
-   * @returns {Promise<void>}
    */
   async setFocus() {
     this.input.focus();
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -171,8 +153,7 @@ export class MgInputText {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -191,11 +172,10 @@ export class MgInputText {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { class: "mg-input__with-character-left", style: {
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { class: "mg-input__with-character-left", style: {
         '--mg-character-left-message-length': (this.displayCharacterLeft
           ? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1
           : 0).toString(),
@@ -593,7 +573,7 @@ export class MgInputText {
   }
   static get states() {
     return {
-      "classList": {},
+      "classCollection": {},
       "errorMessage": {}
     };
   }
@@ -645,10 +625,7 @@ export class MgInputText {
         },
         "docs": {
           "text": "Public method to play input focus",
-          "tags": [{
-              "name": "returns",
-              "text": undefined
-            }]
+          "tags": []
         }
       },
       "displayError": {
@@ -664,10 +641,7 @@ export class MgInputText {
         },
         "docs": {
           "text": "Public method to display errors",
-          "tags": [{
-              "name": "returns",
-              "text": undefined
-            }]
+          "tags": []
         }
       }
     };

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

@@ -26,24 +26,23 @@ export class MgInputTextarea {
      * Handle focus event
      */
     this.handleFocus = () => {
-      this.classList.add(this.classFocus);
-      this.classList = new ClassList(this.classList.classes);
+      this.classCollection.add(this.classFocus);
+      this.classCollection = new ClassList(this.classCollection.classes);
     };
     /**
      * Handle blur event
      */
     this.handleBlur = () => {
       // Manage focus
-      this.classList.delete(this.classFocus);
-      this.classList = new ClassList(this.classList.classes);
+      this.classCollection.delete(this.classFocus);
+      this.classCollection = new ClassList(this.classCollection.classes);
       // Display Error
       this.displayError();
     };
     /**
      * Get pattern validity
      * Pattern is not defined on textarea field: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea
-     *
-     * @returns {boolean} is pattern valid
+     * @returns is pattern valid
      */
     this.getPatternValidity = () => this.pattern === undefined || new RegExp(`^${this.pattern}$`, 'u').test(this.value);
     /**
@@ -75,7 +74,7 @@ export class MgInputTextarea {
      * Validate pattern configuration
      */
     this.validatePattern = () => {
-      if (this.pattern &&
+      if (this.pattern !== undefined &&
         typeof this.pattern === 'string' &&
         this.pattern !== '' &&
         (this.patternErrorMessage === undefined || typeof this.patternErrorMessage !== 'string' || this.patternErrorMessage === '')) {
@@ -103,7 +102,7 @@ export class MgInputTextarea {
     this.valid = undefined;
     this.invalid = undefined;
     this.resizable = 'none';
-    this.classList = new ClassList(['mg-input--textarea']);
+    this.classCollection = new ClassList(['mg-input--textarea']);
     this.errorMessage = undefined;
   }
   handleValue(newValue) {
@@ -122,16 +121,14 @@ export class MgInputTextarea {
   }
   validateDisplayCharacterLeft(newValue) {
     if (newValue) {
-      this.classList.add(this.classHasDisplayCharacterLeft);
+      this.classCollection.add(this.classHasDisplayCharacterLeft);
     }
     else {
-      this.classList.delete(this.classHasDisplayCharacterLeft);
+      this.classCollection.delete(this.classHasDisplayCharacterLeft);
     }
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -143,8 +140,7 @@ export class MgInputTextarea {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -162,11 +158,10 @@ export class MgInputTextarea {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { class: "mg-input__with-character-left" }, h("textarea", { class: {
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { class: "mg-input__with-character-left" }, h("textarea", { class: {
         'mg-input__box': true,
         'mg-input__box--resizable': this.resizable === 'both',
         'mg-input__box--resizable-horizontal': this.resizable === 'horizontal',
@@ -566,7 +561,7 @@ export class MgInputTextarea {
   }
   static get states() {
     return {
-      "classList": {},
+      "classCollection": {},
       "errorMessage": {}
     };
   }
@@ -618,10 +613,7 @@ export class MgInputTextarea {
         },
         "docs": {
           "text": "Public method to display errors",
-          "tags": [{
-              "name": "returns",
-              "text": undefined
-            }]
+          "tags": []
         }
       }
     };

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

@@ -5,9 +5,8 @@ import { MgInput } from '../MgInput';
 import { ClassList, allItemsAreString } from '../../../../utils/components.utils';
 /**
  * type Option validation function
- *
- * @param {ToggleValue} option radio option
- * @returns {boolean} toggle option type is valid
+ * @param option - radio option
+ * @returns toggle option type is valid
  */
 const isOption = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
 export class MgInputToggle {
@@ -23,16 +22,12 @@ export class MgInputToggle {
     this.classIcon = 'mg-input--toggle-icon';
     /**
      * Change checked value
-     *
-     * @returns {void}
      */
     this.toggleChecked = () => {
       this.checked = !this.checked;
     };
     /**
      * Slots validation
-     *
-     * @returns {void}
      */
     this.validateSlots = () => {
       const slots = Array.from(this.element.children);
@@ -58,7 +53,7 @@ export class MgInputToggle {
     this.disabled = false;
     this.tooltip = undefined;
     this.helpText = undefined;
-    this.classList = new ClassList(['mg-input--toggle']);
+    this.classCollection = new ClassList(['mg-input--toggle']);
     this.options = undefined;
     this.checked = false;
   }
@@ -86,41 +81,39 @@ export class MgInputToggle {
   }
   handleIsOnOff(newValue) {
     if (newValue)
-      this.classList.add(this.classOnOff);
+      this.classCollection.add(this.classOnOff);
     else
-      this.classList.delete(this.classOnOff);
+      this.classCollection.delete(this.classOnOff);
   }
   handleIsIcon(newValue) {
     if (newValue)
-      this.classList.add(this.classIcon);
+      this.classCollection.add(this.classIcon);
     else
-      this.classList.delete(this.classIcon);
+      this.classCollection.delete(this.classIcon);
   }
   handleReadonly(newValue) {
     if (newValue)
-      this.classList.add(this.classReadonly);
+      this.classCollection.add(this.classReadonly);
     else
-      this.classList.delete(this.classReadonly);
+      this.classCollection.delete(this.classReadonly);
   }
   handleDisabled(newValue) {
     if (newValue)
-      this.classList.add(this.classDisabled);
+      this.classCollection.add(this.classDisabled);
     else
-      this.classList.delete(this.classDisabled);
+      this.classCollection.delete(this.classDisabled);
   }
   handleChecked(newValue) {
     // style
     if (newValue)
-      this.classList.add(this.classIsActive);
+      this.classCollection.add(this.classIsActive);
     else
-      this.classList.delete(this.classIsActive);
+      this.classCollection.delete(this.classIsActive);
     // update value
     this.value = this.options[newValue ? 1 : 0].value;
   }
   /**
    * set checked state
-   *
-   * @returns {void}
    */
   setChecked() {
     const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);
@@ -162,11 +155,10 @@ export class MgInputToggle {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: undefined, isFieldset: false }, h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, h("slot", { name: "item-2" })))));
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: undefined, isFieldset: false }, h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, h("slot", { name: "item-2" })))));
   }
   static get is() { return "mg-input-toggle"; }
   static get encapsulation() { return "shadow"; }
@@ -215,10 +207,7 @@ export class MgInputToggle {
         "required": true,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "returns",
-              "text": undefined
-            }],
+          "tags": [],
           "text": "Items are the possible options to select"
         }
       },
@@ -419,7 +408,7 @@ export class MgInputToggle {
   }
   static get states() {
     return {
-      "classList": {},
+      "classCollection": {},
       "options": {},
       "checked": {}
     };

package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js

@@ -13,10 +13,8 @@ export class MgMenu {
      *************/
     /**
      * Close matching menu-item
-     *
-     * @param {HTMLElement} item menu-item to close
-     * @param {boolean} condition addionnal condition
-     * @returns {void}
+     * @param item - menu-item to close
+     * @param condition - addionnal condition
      */
     this.closeMenuItem = (item, condition) => {
       if (!this.isChildMenu && condition) {
@@ -25,22 +23,18 @@ export class MgMenu {
     };
     /**
      * get mg-item-more element
-     *
-     * @returns {HTMLMgItemMoreElement} mg-item-more element
+     * @returns mg-item-more element
      */
     this.getItemMore = () => this.element.querySelector('mg-item-more');
     /**
-     * get mg-item-more >>> mg-menu-item element
-     *
-     * @returns {HTMLMgMenuItemElement} mg-item-more >>> mg-menu-item element
+     * get mg-item-more child mg-menu-item element
+     * @returns mg-menu-item element
      */
     this.getItemMoreMenuItem = () => { var _a, _b; return (_b = (_a = this.getItemMore()) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('mg-menu-item'); };
     /**
      * Set item listend
-     *
-     * @param {HTMLMgMenuItemElement} item mg-menu-item element
-     * @param {MgMenu['focusedMenuItem']} index number
-     * @returns {void}
+     * @param item - mg-menu-item element
+     * @param index - number
      */
     this.setItemListener = (item, index) => {
       ['click', 'focus'].forEach(trigger => {
@@ -55,8 +49,6 @@ export class MgMenu {
     };
     /**
      * Store menu-items on component init and add listeners
-     *
-     * @returns {void}
      */
     this.initMenuItemsListeners = () => {
       // add listeners on menu item and edit index
@@ -66,16 +58,12 @@ export class MgMenu {
     };
     /**
      * Handle item-loaded event on mg-item-more element
-     *
-     * @returns {void}
      */
     this.handleItemLoaded = () => {
       this.setItemListener(this.getItemMoreMenuItem(), this.menuItems.length);
     };
     /**
      * render mg-item-more
-     *
-     * @returns {void}
      */
     this.renderMgItemMore = () => {
       // /!\ externalise item tag name to get a string type and bypass type checking when value is used in next createElement
@@ -117,8 +105,6 @@ export class MgMenu {
    *************/
   /**
    * Validate props
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateDirection(this.direction);
@@ -128,8 +114,7 @@ export class MgMenu {
   }
   /**
    * Check if component slots configuration
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentDidLoad() {
     // update props and states after componentDidLoad hook
@@ -159,16 +144,13 @@ export class MgMenu {
   }
   /**
    * Add listeners to items
-   *
-   * @returns {void}
    */
   componentDidRender() {
     this.initMenuItemsListeners();
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     return (h(Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label }, h("slot", null)));
@@ -221,7 +203,7 @@ export class MgMenu {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Component display direction. Default: \"horizontal\""
+          "text": "Component display direction."
         },
         "attribute": "direction",
         "reflect": true,
@@ -264,7 +246,7 @@ export class MgMenu {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define mg-menu size\nDefault: 'regular'"
+          "text": "Define mg-menu size"
         },
         "attribute": "size",
         "reflect": false,