@mgdis/mg-components 5.9.1 → 5.10.1

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

@@ -15,33 +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');
@@ -51,8 +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;
@@ -60,9 +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
@@ -80,9 +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)) {
@@ -91,8 +80,6 @@ export class MgMenuItem {
     };
     /**
      * Init event-listeners
-     *
-     * @returns {void}
      */
     this.initListeners = () => {
       var _a;
@@ -108,14 +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;
     /************
@@ -123,9 +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) {
@@ -138,17 +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');
@@ -214,8 +194,6 @@ export class MgMenuItem {
   }
   /**
    * Render popover clickoutside guard for content slot
-   *
-   * @returns {void}
    */
   updatePopoverGuard() {
     if (this.displayPopover())
@@ -228,8 +206,6 @@ export class MgMenuItem {
    *************/
   /**
    * Validate props
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element
@@ -245,8 +221,7 @@ export class MgMenuItem {
   }
   /**
    * Check if component slots configuration
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentDidLoad() {
     // validation
@@ -285,8 +260,7 @@ export class MgMenuItem {
   }
   /**
    * Render ineractive element
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   renderInteractiveElement() {
     const TagName = this.href !== undefined ? 'a' : 'button';
@@ -298,8 +272,7 @@ export class MgMenuItem {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     const getContainerClasses = () => ({
@@ -337,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,
@@ -377,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,
@@ -395,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,9 +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;
@@ -15,9 +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;
@@ -25,9 +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;
@@ -45,26 +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;
@@ -101,8 +92,6 @@ export class MgActionMore {
    *************/
   /**
    * Validate props
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     this.messages = initLocales(this.element).messages.actionMore;
@@ -113,8 +102,7 @@ export class MgActionMore {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     const buttonLabel = this.button.label || this.messages.label;
@@ -164,7 +152,7 @@ export class MgActionMore {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define displaied icon\nDefault: {icon: 'ellipsis'}"
+          "text": "Define displaied icon"
         },
         "defaultValue": "{ icon: 'ellipsis' }"
       },
@@ -185,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,8 +3,6 @@ export class MgDetails {
   constructor() {
     /**
      * Handle details toggle
-     *
-     * @returns {void}
      */
     this.handleToggle = () => {
       this.expanded = this.details.open;
@@ -27,8 +25,6 @@ export class MgDetails {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateTitles(this.toggleClosed);
@@ -36,8 +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" }))));

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

@@ -7,14 +7,11 @@ export class MgForm {
     this.classAllRequired = 'mg-form--all-required';
     /**
      * Define required message based on mg-inputs required elements
-     * Also
-     *
-     * @returns {void}
      */
     this.setRequiredMessage = () => {
       // init required message
       this.requiredMessage = null;
-      this.classList.delete(this.classAllRequired);
+      this.classCollection.delete(this.classAllRequired);
       // If the form is disabled or readonly none of them are required
       // Check if all fields are not editable (readonly or disabled)
       if (!this.disabled && !this.readonly && !this.mgInputs.every(input => input.disabled || input.readonly)) {
@@ -24,7 +21,7 @@ export class MgForm {
         // mg-input-toggle can not be required
         if (requiredInputs.length > 0 && requiredInputs.length === this.mgInputs.filter(input => input.nodeName !== 'MG-INPUT-TOGGLE').length) {
           this.requiredMessage = requiredInputs.length === 1 ? this.messages.form.allRequiredSingle : this.messages.form.allRequired;
-          this.classList.add(this.classAllRequired);
+          this.classCollection.add(this.classAllRequired);
         }
         // Some fields are required
         else if (requiredInputs.length > 0) {
@@ -34,8 +31,6 @@ export class MgForm {
     };
     /**
      * Check if form is valid
-     *
-     * @returns {void}
      */
     this.checkValidity = () => {
       // Update required on input event
@@ -47,9 +42,7 @@ export class MgForm {
     };
     /**
      * Handle Form Submit
-     *
-     * @param {SubmitEvent} event submit event
-     * @returns {void}
+     * @param event - submit event
      */
     this.handleFormSubmit = (event) => {
       event.preventDefault();
@@ -57,8 +50,6 @@ export class MgForm {
     };
     /**
      * Set mgInputs
-     *
-     * @returns {void}
      */
     this.setMgInputs = () => {
       // Get slotted mgInputs
@@ -80,7 +71,7 @@ export class MgForm {
     this.disabled = false;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classList = new ClassList(['mg-form']);
+    this.classCollection = new ClassList(['mg-form']);
     this.requiredMessage = undefined;
   }
   handleAttributeChange() {
@@ -89,8 +80,6 @@ export class MgForm {
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     if (!this.readonly) {
@@ -105,8 +94,6 @@ export class MgForm {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // Get locales
@@ -133,8 +120,6 @@ export class MgForm {
   }
   /**
    * Add slot listeners
-   *
-   * @returns {void}
    */
   componentDidLoad() {
     this.mgButtons.forEach(mgButton => {
@@ -152,11 +137,10 @@ export class MgForm {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h("form", { class: this.classList.join(), id: this.identifier, name: this.name, ref: el => (this.form = el), onSubmit: this.handleFormSubmit }, this.requiredMessage && h("p", { innerHTML: this.requiredMessage }), h("slot", null), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
+    return (h("form", { class: this.classCollection.join(), id: this.identifier, name: this.name, ref: el => (this.form = el), onSubmit: this.handleFormSubmit }, this.requiredMessage && h("p", { innerHTML: this.requiredMessage }), h("slot", null), !this.readonly && !this.disabled && h("slot", { name: "actions" })));
   }
   static get is() { return "mg-form"; }
   static get encapsulation() { return "shadow"; }
@@ -282,7 +266,7 @@ export class MgForm {
   }
   static get states() {
     return {
-      "classList": {},
+      "classCollection": {},
       "requiredMessage": {}
     };
   }
@@ -334,10 +318,7 @@ export class MgForm {
         },
         "docs": {
           "text": "Public method to display errors",
-          "tags": [{
-              "name": "returns",
-              "text": undefined
-            }]
+          "tags": []
         }
       }
     };

package/dist/collection/components/molecules/mg-illustrated-message/mg-illustrated-message.js

@@ -10,8 +10,6 @@ export class MgIllustratedMessage {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void}
    */
   componentDidLoad() {
     const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
@@ -26,8 +24,7 @@ export class MgIllustratedMessage {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     return (h("div", { class: {

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

@@ -13,8 +13,7 @@ export class MgItemMore {
      ***********/
     /**
      * render mg-item-more overflow element
-     *
-     * @returns {HTMLMgItemMoreElement} mg-item-more element
+     * @returns mg-item-more element
      */
     this.renderMgMenuItemOverflowElement = () => {
       // create menu items proxy element from item clones
@@ -63,16 +62,12 @@ export class MgItemMore {
    *************/
   /**
    * Disconnect overflow ResizeObserver
-   *
-   * @returns {void} run overflow resize obeserver disconnexion
    */
   disconnectedCallback() {
     this.overflowBehavior.disconnect();
   }
   /**
    * Set variables and validate props
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // init variables
@@ -86,16 +81,13 @@ export class MgItemMore {
   }
   /**
    * Add overflow behavior
-   *
-   * @returns {void}
    */
   componentDidLoad() {
     this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     return (h(Host, { role: "menuitem", "aria-haspopup": "true" }, h("mg-menu-item", { "data-overflow-more": true, "data-size": this.parentMenu.size }, h("mg-icon", { icon: this.icon.icon, slot: "image" }), h("span", { class: { 'sr-only': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.moreLabel, size: this.size }))));
@@ -131,7 +123,7 @@ export class MgItemMore {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define icon\nDefault: {icon: 'ellipsis-vertical'}"
+          "text": "Define icon"
         },
         "defaultValue": "{ icon: 'ellipsis-vertical' }"
       },
@@ -152,7 +144,7 @@ export class MgItemMore {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define slot label element\nDefault: {display: false}"
+          "text": "Define slot label element"
         },
         "defaultValue": "{ display: false }"
       },

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

@@ -18,25 +18,19 @@ export class MgMessage {
     this.isHovered = false;
     /**
      * Set timer
-     *
-     * @returns {void}
      */
     this.setTimer = () => {
       this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);
     };
     /**
      * Clear timer
-     *
-     * @returns {void}
      */
     this.clearTimer = () => {
       clearTimeout(this.storedTimer);
     };
     /**
      * Event to add on element
-     *
-     * @param {MouseEvent | FocusEvent} event  event
-     * @returns {void}
+     * @param event - event
      */
     this.timerEvents = (event) => {
       this.clearTimer();
@@ -59,8 +53,7 @@ export class MgMessage {
     };
     /**
      * Get icon corresponding to variant
-     *
-     * @returns {string} icon
+     * @returns icon
      */
     this.getIcon = () => {
       switch (this.variant) {
@@ -81,11 +74,11 @@ export class MgMessage {
     this.variant = variants[0];
     this.closeButton = false;
     this.hide = false;
-    this.classList = new ClassList(['mg-message']);
+    this.classCollection = new ClassList(['mg-message']);
     this.hasActions = false;
   }
   validateDelay(newValue) {
-    if (newValue && newValue < 2) {
+    if (newValue !== undefined && newValue < 2) {
       throw new Error(`<mg-message> prop "delay" must be greater than 2 seconds.`);
     }
   }
@@ -95,9 +88,9 @@ export class MgMessage {
     }
     else {
       if (oldValue !== undefined) {
-        this.classList.delete(`mg-message--${oldValue}`);
+        this.classCollection.delete(`mg-message--${oldValue}`);
       }
-      this.classList.add(`mg-message--${newValue}`);
+      this.classCollection.add(`mg-message--${newValue}`);
     }
   }
   validateCloseButton(newValue) {
@@ -109,7 +102,7 @@ export class MgMessage {
   validateHide(newValue) {
     if (newValue) {
       this.componentHide.emit();
-      this.classList.add(this.classHide);
+      this.classCollection.add(this.classHide);
       // Remove event Listener
       ['focusin', 'mouseenter'].forEach(event => {
         this.element.removeEventListener(event, this.timerEvents);
@@ -119,7 +112,7 @@ export class MgMessage {
     }
     else {
       this.componentShow.emit();
-      this.classList.delete(this.classHide);
+      this.classCollection.delete(this.classHide);
       // If delay is set
       if (this.delay > 1) {
         // Start timer
@@ -146,7 +139,7 @@ export class MgMessage {
     this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
     this.validateCloseButton(this.closeButton);
     if (this.closeButton) {
-      this.classList.add('mg-message--close-button');
+      this.classCollection.add('mg-message--close-button');
       this.closeButtonId = `${this.identifier}-close-button`;
     }
     this.validateDelay(this.delay);
@@ -154,11 +147,10 @@ export class MgMessage {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("mg-card", { variant: this.variant, "variant-style": "bar-left" }, h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
+    return (h("div", { id: this.identifier, class: this.classCollection.join(), role: this.variant === 'info' ? 'status' : 'alert' }, h("mg-card", { variant: this.variant, "variant-style": "bar-left" }, h("span", { class: "mg-message__icon" }, h("mg-icon", { icon: this.getIcon() })), h("div", { class: "mg-message__content" }, h("span", { class: "mg-message__content-slot" }, h("slot", null)), this.hasActions && h("span", { class: "mg-message__content-separator" }), this.hasActions && (h("span", { class: "mg-message__content-actions-slot" }, h("slot", { name: "actions" })))), this.closeButton && (h("span", { class: "mg-message__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))))));
   }
   static get is() { return "mg-message"; }
   static get encapsulation() { return "shadow"; }
@@ -272,7 +264,7 @@ export class MgMessage {
   }
   static get states() {
     return {
-      "classList": {},
+      "classCollection": {},
       "hasActions": {}
     };
   }