@mgdis/mg-components 5.10.0 → 5.10.1

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

@@ -26,23 +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);
     /**
@@ -102,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) {
@@ -121,15 +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();
@@ -141,7 +140,7 @@ export class MgInputTextarea {
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -159,10 +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',
@@ -562,7 +561,7 @@ export class MgInputTextarea {
   }
   static get states() {
     return {
-      "classList": {},
+      "classCollection": {},
       "errorMessage": {}
     };
   }
@@ -614,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,8 +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 {
@@ -22,14 +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);
@@ -55,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;
   }
@@ -83,40 +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);
@@ -158,10 +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"; }
@@ -210,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"
         }
       },
@@ -414,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,9 +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) {
@@ -24,19 +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 => {
@@ -51,7 +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
@@ -61,14 +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
@@ -110,7 +105,6 @@ export class MgMenu {
    *************/
   /**
    * Validate props
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateDirection(this.direction);
@@ -120,7 +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
@@ -150,14 +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)));
@@ -210,7 +203,7 @@ export class MgMenu {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Component display direction. Default: \"horizontal\""
+          "text": "Component display direction."
         },
         "attribute": "direction",
         "reflect": true,
@@ -253,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,

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

@@ -15,29 +15,27 @@ export class MgMenuItem {
      **********/
     /**
      * Toggle expanded prop value
-     * @returns {void}
      */
     this.toggleExpanded = () => {
       this.expanded = !this.expanded;
     };
     /**
      * Does an Element have given Status
-     * @param {HTMLMgMenuItemElement} mgMenuItemElement to parse
-     * @param {MgMenuItem['status']} status to check
-     * @returns {boolean} true if element with status is found
+     * @param mgMenuItemElement - to parse
+     * @param status - to check
+     * @returns true if element with status is found
      */
     this.hasStatus = (mgMenuItemElement, status) => mgMenuItemElement.status === status;
     /**
      * Is component contextual direction match the given direction
-     * @param {MgMenuItem['direction']} direction in parent menu
-     * @param {MgMenuItem['direction']} compareWith direction to compare with. Default: `this.direction`
-     * @returns {boolean} true is direction match the direction propertie
+     * @param direction - in parent menu
+     * @param compareWith - direction to compare with. Default: `this.direction`
+     * @returns true is direction match the direction propertie
      */
     this.isDirection = (direction, compareWith = this.direction) => direction === compareWith;
     /**
      * Update displayNotificationBadge
      * current component notification badge have priority over the slot badge when submenu contain badge
-     * @returns {void} update displayNotificationBadge value
      */
     this.updateDisplayNotificationBadge = () => {
       const childMenu = this.element.querySelector('mg-menu');
@@ -47,7 +45,7 @@ export class MgMenuItem {
     };
     /**
      * Method to control if one of component children have active status
-     * @returns {boolean} truthy if component has active child
+     * @returns truthy if component has active child
      */
     this.hasActiveChild = () => {
       var _a;
@@ -55,8 +53,7 @@ export class MgMenuItem {
     };
     /**
      * Validate slots
-     * @param {boolean} guard prevent action whith guard. Default: false.
-     * @returns {void}
+     * @param guard - prevent action whith guard. Default: false.
      */
     this.validateSlot = (guard = false) => {
       // slot title AND metadata validation
@@ -74,8 +71,7 @@ export class MgMenuItem {
     };
     /**
      * Update status
-     * @param {Status[]} guard status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].
-     * @returns {void}
+     * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].
      */
     this.updateStatus = (guard = []) => {
       if (![Status.HIDDEN, Status.DISABLED, ...guard].includes(this.status)) {
@@ -84,7 +80,6 @@ export class MgMenuItem {
     };
     /**
      * Init event-listeners
-     * @returns {void}
      */
     this.initListeners = () => {
       var _a;
@@ -100,12 +95,12 @@ export class MgMenuItem {
     };
     /**
      * Get mg-popover identifier
-     * @returns {MgPopover['identifier']} generated mg-popover identifier
+     * @returns generated mg-popover identifier
      */
     this.getPopoverIdentifier = () => `${this.identifier}-popover`;
     /**
      * Condition to know if component should display a mg-popover
-     * @returns {boolean} truthy if component display popover
+     * @returns truthy if component display popover
      */
     this.displayPopover = () => this.isDirection(Direction.HORIZONTAL) && this.hasChildren && this.href === undefined;
     /************
@@ -113,8 +108,7 @@ export class MgMenuItem {
      ************/
     /**
      * Handle interacrtive element click
-     * @param {MouseEvent} event click on element
-     * @returns {void}
+     * @param event - click on element
      */
     this.handleElementCLick = (event) => {
       if ((this.hasChildren && !this.isInMainMenu) || this.status === Status.DISABLED) {
@@ -127,15 +121,14 @@ export class MgMenuItem {
     };
     /**
      * Handle popover element display-change event
-     * @param {CustomEvent} event popover display event
-     * @returns {void}
+     * @param event - popover display event
      */
     this.handlePopoverDisplay = (event) => {
       this.expanded = event.detail;
     };
     /**
      * Render slot
-     * @returns {HTMLElement} HTML Element
+     * @returns HTML Element
      */
     this.renderSlot = () => h("slot", null);
     this.identifier = createID('mg-menu-item');
@@ -201,7 +194,6 @@ export class MgMenuItem {
   }
   /**
    * Render popover clickoutside guard for content slot
-   * @returns {void}
    */
   updatePopoverGuard() {
     if (this.displayPopover())
@@ -214,7 +206,6 @@ export class MgMenuItem {
    *************/
   /**
    * Validate props
-   * @returns {void}
    */
   componentWillLoad() {
     // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element
@@ -230,7 +221,7 @@ export class MgMenuItem {
   }
   /**
    * Check if component slots configuration
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentDidLoad() {
     // validation
@@ -269,7 +260,7 @@ export class MgMenuItem {
   }
   /**
    * Render ineractive element
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   renderInteractiveElement() {
     const TagName = this.href !== undefined ? 'a' : 'button';
@@ -281,7 +272,7 @@ export class MgMenuItem {
   }
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     const getContainerClasses = () => ({
@@ -319,7 +310,7 @@ export class MgMenuItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Identifier is used to control mg-popover\nDefault: createID('mg-menu-item');"
+          "text": "Identifier is used to control mg-popover"
         },
         "attribute": "identifier",
         "reflect": false,
@@ -359,7 +350,7 @@ export class MgMenuItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define menu-item status. Default: \"visible\""
+          "text": "Define menu-item status."
         },
         "attribute": "status",
         "reflect": true,
@@ -377,7 +368,7 @@ export class MgMenuItem {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define menu-item content expanded. Default: false."
+          "text": "Define menu-item content expanded."
         },
         "attribute": "expanded",
         "reflect": false,

package/dist/collection/components/molecules/mg-action-more/mg-action-more.js

@@ -5,8 +5,8 @@ import { Direction } from '../menu/mg-menu/mg-menu.conf';
 import { createID } from '../../../utils/components.utils';
 /**
  * MgActionMore['items'] type guard
- * @param {unknown} prop commponent items prop
- * @returns {boolean} return true if type is valid
+ * @param prop - commponent items prop
+ * @returns return true if type is valid
  */
 const isMgActionMoreItems = (prop) => {
   const items = prop;
@@ -14,8 +14,8 @@ const isMgActionMoreItems = (prop) => {
 };
 /**
  * MgActionMore['button'] type guard
- * @param {unknown} prop commponent button prop
- * @returns {boolean} return true if type is valid
+ * @param prop - commponent button prop
+ * @returns return true if type is valid
  */
 const isMgActionMoreButton = (prop) => {
   const button = prop;
@@ -23,8 +23,8 @@ const isMgActionMoreButton = (prop) => {
 };
 /**
  * MgActionMore['icon'] type guard
- * @param {unknown} prop commponent icon prop
- * @returns {boolean} return true if type is valid
+ * @param prop - commponent icon prop
+ * @returns return true if type is valid
  */
 const isMgActionMoreIcon = (prop) => {
   const icon = prop;
@@ -42,23 +42,20 @@ export class MgActionMore {
      ***********/
     /**
      * Toogle expanded props
-     * @returns {void}
      */
     this.toggleExpanded = () => {
       this.expanded = !this.expanded;
     };
     /**
      * Button click handler
-     * @returns {void}
      */
     this.handleButton = () => {
       this.toggleExpanded();
     };
     /**
      * Item click handler
-     * @param {MouseEvent} event click event
-     * @param {MgActionMoreItemType['mouseEventHandler']} customHandler item['mouseEventHandler']
-     * @returns {void}
+     * @param event - click event
+     * @param customHandler - item['mouseEventHandler']
      */
     this.handleItemClick = (event, customHandler) => {
       this.expanded = false;
@@ -95,7 +92,6 @@ export class MgActionMore {
    *************/
   /**
    * Validate props
-   * @returns {void}
    */
   componentWillLoad() {
     this.messages = initLocales(this.element).messages.actionMore;
@@ -106,7 +102,7 @@ export class MgActionMore {
   }
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     const buttonLabel = this.button.label || this.messages.label;
@@ -156,7 +152,7 @@ export class MgActionMore {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define displaied icon\nDefault: {icon: 'ellipsis'}"
+          "text": "Define displaied icon"
         },
         "defaultValue": "{ icon: 'ellipsis' }"
       },
@@ -177,7 +173,7 @@ export class MgActionMore {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define button properties\nDefault: {variant: 'flat', isIcon: true}."
+          "text": "Define button properties"
         },
         "defaultValue": "{ variant: 'flat', isIcon: true }"
       },

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

@@ -3,7 +3,6 @@ export class MgDetails {
   constructor() {
     /**
      * Handle details toggle
-     * @returns {void}
      */
     this.handleToggle = () => {
       this.expanded = this.details.open;
@@ -26,7 +25,6 @@ export class MgDetails {
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateTitles(this.toggleClosed);
@@ -34,7 +32,7 @@ export class MgDetails {
   }
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     return (h("details", { class: "mg-details", onToggle: this.handleToggle, open: this.expanded, ref: el => (this.details = el) }, h("summary", null, h("slot", { name: "summary" }), h("span", { class: "mg-details__toggle" }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down', size: "small" }), h("span", { class: { 'sr-only': this.hideSummary } }, this.expanded ? this.toggleOpened : this.toggleClosed))), h("div", { class: "mg-details__details" }, h("slot", { name: "details" }))));