@mgdis/mg-components 5.10.0 → 5.11.0

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

@@ -13,7 +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
@@ -62,14 +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
@@ -83,14 +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 }))));
@@ -126,7 +123,7 @@ export class MgItemMore {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Define icon\nDefault: {icon: 'ellipsis-vertical'}"
+          "text": "Define icon"
         },
         "defaultValue": "{ icon: 'ellipsis-vertical' }"
       },
@@ -147,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.css

@@ -69,6 +69,7 @@
   --mg-card-background: var(--mg-card-background-default);
   --mg-card-box-shadow: var(--mg-card-box-shadow-default);
   --mg-card-max-width: unset;
+  --mg-card-min-width: unset;
 }
 
 .mg-message,

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

@@ -18,22 +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();
@@ -56,7 +53,7 @@ export class MgMessage {
     };
     /**
      * Get icon corresponding to variant
-     * @returns {MgIcon['icon'] | undefined} icon
+     * @returns icon
      */
     this.getIcon = () => {
       switch (this.variant) {
@@ -77,7 +74,7 @@ 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) {
@@ -91,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) {
@@ -105,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);
@@ -115,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
@@ -142,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);
@@ -150,10 +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"; }
@@ -267,7 +264,7 @@ export class MgMessage {
   }
   static get states() {
     return {
-      "classList": {},
+      "classCollection": {},
       "hasActions": {}
     };
   }

package/dist/collection/components/molecules/mg-modal/mg-modal.css

@@ -63,4 +63,5 @@
   --mg-card-background: var(--mg-card-background-default);
   --mg-card-box-shadow: var(--mg-card-box-shadow-default);
   --mg-card-max-width: unset;
+  --mg-card-min-width: unset;
 }

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

@@ -44,7 +44,6 @@ export class MgModal {
      *************/
     /**
      * Handle close button
-     * @returns {void}
      */
     this.handleClose = () => {
       this.hide = true;
@@ -55,7 +54,7 @@ export class MgModal {
     this.hide = false;
     this.hasActions = false;
     this.hasContent = false;
-    this.classList = new ClassList(['mg-modal']);
+    this.classCollection = new ClassList(['mg-modal']);
   }
   validateModalTitle(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
@@ -65,19 +64,18 @@ export class MgModal {
   validateHide(newValue) {
     if (newValue) {
       this.componentHide.emit();
-      this.classList.add(this.classHide);
+      this.classCollection.add(this.classHide);
       document.body.style.overflow = this.bodyOverflow;
     }
     else {
       this.componentShow.emit();
-      this.classList.delete(this.classHide);
+      this.classCollection.delete(this.classHide);
       document.body.style.overflow = 'hidden';
     }
   }
   /**
    * Handle 'escape' key down
-   * @param {KeyboardEvent} event keydown event
-   * @returns {void}
+   * @param event - keydown event
    */
   handleKeyDown(event) {
     // we can use 'Escape button" when this not a blocking modal, induced by closeButton value.
@@ -90,7 +88,6 @@ export class MgModal {
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {void}
    */
   componentWillLoad() {
     // Store body overflow
@@ -109,7 +106,6 @@ export class MgModal {
   }
   /**
    * Add observer on component to set focus when displayed
-   * @returns {void}
    */
   componentDidLoad() {
     new MutationObserver(mutationList => {
@@ -124,10 +120,10 @@ export class MgModal {
   }
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h("div", { role: "alertdialog", id: this.identifier, class: this.classList.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", null, h("div", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" })))))));
+    return (h("div", { role: "alertdialog", id: this.identifier, class: this.classCollection.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide }, h("mg-card", null, h("div", { class: "mg-modal__dialog" }, h("header", { class: "mg-modal__header" }, this.closeButton && (h("span", { class: "mg-modal__close-button" }, h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose }, h("mg-icon", { icon: "cross" })))), h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)), this.hasContent && (h("article", { class: "mg-modal__content" }, h("slot", { name: "content" }))), this.hasActions && (h("footer", { class: "mg-modal__footer" }, h("slot", { name: "actions" })))))));
   }
   static get is() { return "mg-modal"; }
   static get encapsulation() { return "shadow"; }
@@ -220,7 +216,7 @@ export class MgModal {
     return {
       "hasActions": {},
       "hasContent": {},
-      "classList": {}
+      "classCollection": {}
     };
   }
   static get events() {

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

@@ -5,6 +5,7 @@ import { initLocales } from './../../../locales';
 /**
  * Range generator
  *
+ * ```
  * start by get the range length, add "+ 1" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3
  * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]
  * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values
@@ -12,22 +13,22 @@ import { initLocales } from './../../../locales';
  * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()) => [0, 1, 2]
  * finaly we map values from "start" range and apply the "step" coefficiant,
  * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]
+ * ```
  *
  * range(1, 1) = [1]
  * range(1, 5) = [1, 2, 3, 4, 5]
  * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]
- * @param {number} start start range
- * @param {number} end start end
- * @param {number} step step size
- * @returns {number[]} range numbers
+ * @param start - start range
+ * @param end - start end
+ * @param step - step size
+ * @returns range numbers
  */
 const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);
 export class MgPagination {
   constructor() {
     /**
      * Change current page from target
-     * @param {number} target target page
-     * @returns {void}
+     * @param target - target page
      */
     this.goToPage = (target) => {
       this.currentPage = target;
@@ -37,8 +38,7 @@ export class MgPagination {
      ************/
     /**
      * select handler
-     * @param {InputEvent} event value change event
-     * @returns {void}
+     * @param event - value change event
      */
     this.handleSelect = (event) => {
       const to = Number(event.target.value);
@@ -46,9 +46,8 @@ export class MgPagination {
     };
     /**
      * Go to 'previous/next' page button handler
-     * @param {string} action navigation action
-     * @param {boolean} disabled button disable state
-     * @returns {void}
+     * @param action - navigation action
+     * @param disabled - button disable state
      */
     this.handleGoToPage = (action, disabled) => {
       !disabled && this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
@@ -78,7 +77,6 @@ export class MgPagination {
    *************/
   /**
    * Check if props are well configured on init
-   * @returns {void}
    */
   componentWillLoad() {
     // Get locales
@@ -93,7 +91,7 @@ export class MgPagination {
   }
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     const navigationActionButton = (disabled, action) => (h("mg-button", { identifier: `${this.identifier}-button-${action}`, label: this.messages.pagination[`${action}Page`],

package/dist/collection/components/molecules/mg-panel/mg-panel.css

@@ -53,4 +53,5 @@
   --mg-card-background: var(--mg-card-background-default);
   --mg-card-box-shadow: var(--mg-card-box-shadow-default);
   --mg-card-max-width: unset;
+  --mg-card-min-width: unset;
 }

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

@@ -8,7 +8,6 @@ export class MgPanel {
      ************/
     /**
      * Toggle is editing state
-     * @returns {void}
      */
     this.toggleIsEditing = () => {
       this.isEditing = !this.isEditing;
@@ -18,7 +17,6 @@ export class MgPanel {
      ************/
     /**
      * Collapse button click handler
-     * @returns {void}
      */
     this.handleCollapseButton = () => {
       if (!this.expandToggleDisabled) {
@@ -27,22 +25,19 @@ export class MgPanel {
     };
     /**
      * Edit button click handler
-     * @returns {void}
      */
     this.handleEditButton = () => {
       this.toggleIsEditing();
     };
     /**
      * Update title handler
-     * @param {CustomEvent<string>} event input value change event
-     * @returns {void}
+     * @param event - input value change event
      */
     this.handleUpdateTitle = (event) => {
       this.updatedPanelTitle = event.detail;
     };
     /**
      * Cancel edition button handler
-     * @returns {void}
      */
     this.handleCancelEditButton = () => {
       this.updatedPanelTitle = undefined;
@@ -50,7 +45,6 @@ export class MgPanel {
     };
     /**
      * Validate edition button handler
-     * @returns {void}
      */
     this.handleValidateEditButton = () => {
       if (this.editInputElement.valid) {
@@ -61,8 +55,7 @@ export class MgPanel {
     };
     /**
      * Header left conditional render
-     * @typedef {HTMLElement} HTMLMgButtonElement
-     * @returns {HTMLMgButtonElement | HTMLElement | HTMLElement[]} header left element
+     * @returns header left element
      */
     this.headerLeft = () => {
       const collapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, "aria-expanded": this.expanded !== undefined && this.expanded.toString(), "aria-controls": `${this.identifier}-content`, disabled: this.expandToggleDisabled }, h("span", { class: "mg-panel__collapse-button-content" }, h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }), !this.isEditing && this.panelTitle)));
@@ -87,7 +80,7 @@ export class MgPanel {
     this.expanded = false;
     this.expandToggleDisabled = undefined;
     this.titleEditable = false;
-    this.classList = new ClassList(['mg-panel']);
+    this.classCollection = new ClassList(['mg-panel']);
     this.isEditing = false;
     this.updatedPanelTitle = undefined;
   }
@@ -113,7 +106,6 @@ export class MgPanel {
    *************/
   /**
    * Check if props are well configured on init
-   * @returns {void}
    */
   componentWillLoad() {
     // Get locales
@@ -124,7 +116,6 @@ export class MgPanel {
   }
   /**
    * Edit DOM after render
-   * @returns {void}
    */
   componentDidRender() {
     // when we are editing we get focus on edition input
@@ -134,10 +125,10 @@ export class MgPanel {
   }
   /**
    * Render component
-   * @returns {HTMLElement} html element
+   * @returns html element
    */
   render() {
-    return (h("section", { class: this.classList.join(), id: this.identifier }, h("mg-card", null, h("header", { class: "mg-panel__header", id: `${this.identifier}-header` }, h("div", { class: `mg-panel__header-left ${this.isEditing ? 'mg-panel__header-left--full' : ''}` }, this.headerLeft()), h("div", { class: "mg-panel__header-right" }, h("slot", { name: "header-right" }))), h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded }, h("slot", null)))));
+    return (h("section", { class: this.classCollection.join(), id: this.identifier }, h("mg-card", null, h("header", { class: "mg-panel__header", id: `${this.identifier}-header` }, h("div", { class: `mg-panel__header-left ${this.isEditing ? 'mg-panel__header-left--full' : ''}` }, this.headerLeft()), h("div", { class: "mg-panel__header-right" }, h("slot", { name: "header-right" }))), h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded }, h("slot", null)))));
   }
   static get is() { return "mg-panel"; }
   static get encapsulation() { return "shadow"; }
@@ -279,7 +270,7 @@ export class MgPanel {
   }
   static get states() {
     return {
-      "classList": {},
+      "classCollection": {},
       "isEditing": {},
       "updatedPanelTitle": {}
     };

package/dist/collection/components/molecules/mg-popover/mg-popover.css

@@ -18,6 +18,7 @@
 }
 .mg-popover mg-card {
   --mg-card-max-width: var(--mg-popover-max-width);
+  --mg-card-min-width: var(--mg-popover-min-width);
   position: relative;
 }
 .mg-popover[data-show] {
@@ -117,4 +118,5 @@
   --mg-card-background: var(--mg-card-background-default);
   --mg-card-box-shadow: var(--mg-card-box-shadow-default);
   --mg-card-max-width: unset;
+  --mg-card-min-width: unset;
 }

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

@@ -9,8 +9,7 @@ export class MgPopover {
     this.classArrowHide = `mg-popover--arrow-hide`;
     /**
      * Check if clicked outside of component
-     * @param {MouseEvent} event mouse event
-     * @returns {void}
+     * @param event - mouse event
      */
     this.clickOutside = (event) => {
       var _a;
@@ -22,15 +21,12 @@ export class MgPopover {
     };
     /**
      * Show popover
-     * @returns {void}
      */
     this.show = () => {
       // Make the popover visible
       this.popover.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(() => {
@@ -41,7 +37,6 @@ export class MgPopover {
     };
     /**
      * Hide popover
-     * @returns {void}
      */
     this.hide = () => {
       // Hide the popover
@@ -55,7 +50,6 @@ export class MgPopover {
     };
     /**
      * Handle action for close button
-     * @returns {void}
      */
     this.handleCloseButton = () => {
       this.display = false;
@@ -66,13 +60,13 @@ export class MgPopover {
     this.closeButton = false;
     this.display = false;
     this.disabled = false;
-    this.classList = new ClassList(['mg-popover']);
+    this.classCollection = new ClassList(['mg-popover']);
   }
   validateArrowHide(newValue) {
     if (newValue)
-      this.classList.add(this.classArrowHide);
+      this.classCollection.add(this.classArrowHide);
     else
-      this.classList.delete(this.classArrowHide);
+      this.classCollection.delete(this.classArrowHide);
   }
   handleDisplay(newValue) {
     if (newValue) {
@@ -86,9 +80,14 @@ export class MgPopover {
   /*************
    * Lifecycle *
    *************/
+  /**
+   * update popper position after props change on component did update hook to benefit from render ended
+   */
+  componentDidUpdate() {
+    this.popper.update();
+  }
   /**
    * Check if component props are well configured on init
-   * @returns {void} timeout
    */
   componentWillLoad() {
     // Get windows to attach events
@@ -99,7 +98,6 @@ export class MgPopover {
   }
   /**
    * Check if component props are well configured on init
-   * @returns {void}
    */
   componentDidLoad() {
     const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
@@ -149,17 +147,19 @@ export class MgPopover {
     });
     // Add events to hide popover
     this.element.addEventListener('keydown', e => {
-      if (!this.disabled && e.code === 'Escape')
+      if (!this.disabled && e.code === 'Escape') {
         this.display = false;
+        interactiveElement.focus();
+      }
     });
     this.handleDisplay(this.display);
   }
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: this.classList.join() }, h("mg-card", null, this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-popover__title" }, h("slot", { name: "title" })), h("slot", { name: "content" })), !this.arrowHide && h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
+    return (h(Host, null, h("slot", null), h("div", { id: this.identifier, class: this.classCollection.join() }, h("mg-card", null, this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton }, h("mg-icon", { icon: "cross" }))), h("div", { class: "mg-popover__title" }, h("slot", { name: "title" })), h("slot", { name: "content" })), !this.arrowHide && h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
   }
   static get is() { return "mg-popover"; }
   static get encapsulation() { return "shadow"; }
@@ -292,7 +292,7 @@ export class MgPopover {
   }
   static get states() {
     return {
-      "classList": {}
+      "classCollection": {}
     };
   }
   static get events() {

package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js

@@ -8,8 +8,7 @@ export class MgSkipLinks {
      **********/
     /**
      * Handle link click and emit go-to-anchor event
-     * @param {MouseEvent} event mouse event
-     * @returns {void}
+     * @param event - mouse event
      */
     this.handleLinkCLick = (event) => {
       event.currentTarget.blur();
@@ -29,7 +28,6 @@ export class MgSkipLinks {
    *************/
   /**
    * Check if props are well configured on init
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateLinks(this.links);
@@ -37,7 +35,7 @@ export class MgSkipLinks {
   }
   /**
    * Render
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     return (h("nav", { class: "mg-skip-links", role: "navigation", "aria-label": this.messages.skipLinks.navLabel }, h("ul", { class: "mg-skip-links__list", role: "list" }, this.links.map(link => (h("li", { key: link.href }, h("a", { class: "mg-skip-links__link", href: link.href, onClick: this.handleLinkCLick }, link.label)))))));