@mgdis/mg-components 5.9.1 → 5.10.1

package/dist/components/mg-menu-item2.js

@@ -46,33 +46,27 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      **********/
     /**
      * 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');
@@ -82,8 +76,7 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * 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;
@@ -91,9 +84,7 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * 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
@@ -111,9 +102,7 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * 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)) {
@@ -122,8 +111,6 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Init event-listeners
-     *
-     * @returns {void}
      */
     this.initListeners = () => {
       var _a;
@@ -139,14 +126,12 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * 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;
     /************
@@ -154,9 +139,7 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      ************/
     /**
      * 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) {
@@ -169,17 +152,14 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * 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');
@@ -245,8 +225,6 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render popover clickoutside guard for content slot
-   *
-   * @returns {void}
    */
   updatePopoverGuard() {
     if (this.displayPopover())
@@ -259,8 +237,6 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    *************/
   /**
    * Validate props
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // has children items that is NOT [slot='image' | 'information' | 'label' | 'metadata'] element
@@ -276,8 +252,7 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Check if component slots configuration
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentDidLoad() {
     // validation
@@ -316,8 +291,7 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render ineractive element
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   renderInteractiveElement() {
     const TagName = this.href !== undefined ? 'a' : 'button';
@@ -329,8 +303,7 @@ const MgMenuItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     const getContainerClasses = () => ({

package/dist/components/mg-menu2.js

@@ -19,10 +19,8 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      *************/
     /**
      * 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) {
@@ -31,22 +29,18 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * 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 => {
@@ -61,8 +55,6 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Store menu-items on component init and add listeners
-     *
-     * @returns {void}
      */
     this.initMenuItemsListeners = () => {
       // add listeners on menu item and edit index
@@ -72,16 +64,12 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * 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
@@ -123,8 +111,6 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    *************/
   /**
    * Validate props
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateDirection(this.direction);
@@ -134,8 +120,7 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Check if component slots configuration
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentDidLoad() {
     // update props and states after componentDidLoad hook
@@ -165,16 +150,13 @@ const MgMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * 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)));

package/dist/components/mg-message.js

@@ -33,25 +33,19 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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();
@@ -74,8 +68,7 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Get icon corresponding to variant
-     *
-     * @returns {string} icon
+     * @returns icon
      */
     this.getIcon = () => {
       switch (this.variant) {
@@ -94,11 +87,11 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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.`);
     }
   }
@@ -108,9 +101,9 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     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) {
@@ -122,7 +115,7 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   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);
@@ -132,7 +125,7 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     else {
       this.componentShow.emit();
-      this.classList.delete(this.classHide);
+      this.classCollection.delete(this.classHide);
       // If delay is set
       if (this.delay > 1) {
         // Start timer
@@ -159,7 +152,7 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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);
@@ -167,11 +160,10 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * 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" })))))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -187,7 +179,7 @@ const MgMessage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "variant": [1],
     "closeButton": [1028, "close-button"],
     "hide": [1028],
-    "classList": [32],
+    "classCollection": [32],
     "hasActions": [32]
   }]);
 function defineCustomElement$1() {

package/dist/components/mg-modal.js

@@ -55,8 +55,6 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      *************/
     /**
      * Handle close button
-     *
-     * @returns {void}
      */
     this.handleClose = () => {
       this.hide = true;
@@ -67,7 +65,7 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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() === '') {
@@ -77,20 +75,18 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   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.
@@ -103,8 +99,6 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // Store body overflow
@@ -123,8 +117,6 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Add observer on component to set focus when displayed
-   *
-   * @returns {void}
    */
   componentDidLoad() {
     new MutationObserver(mutationList => {
@@ -139,11 +131,10 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * 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" })))))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -154,11 +145,11 @@ const MgModal$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
 }, [1, "mg-modal", {
     "identifier": [1],
     "modalTitle": [1, "modal-title"],
-    "closeButton": [1028, "close-button"],
+    "closeButton": [4, "close-button"],
     "hide": [1028],
     "hasActions": [32],
     "hasContent": [32],
-    "classList": [32]
+    "classCollection": [32]
   }, [[8, "keydown", "handleKeyDown"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/mg-pagination.js

@@ -18,6 +18,7 @@ const mgPaginationCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1
 /**
  * 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
@@ -25,15 +26,15 @@ const mgPaginationCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1
  * 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);
 const MgPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -44,9 +45,7 @@ const MgPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.currentPageChange = createEvent(this, "current-page-change", 7);
     /**
      * Change current page from target
-     *
-     * @param {number} target target page
-     * @returns {void}
+     * @param target - target page
      */
     this.goToPage = (target) => {
       this.currentPage = target;
@@ -56,9 +55,7 @@ const MgPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
      ************/
     /**
      * select handler
-     *
-     * @param {InputEvent} event value change event
-     * @returns {void}
+     * @param event - value change event
      */
     this.handleSelect = (event) => {
       const to = Number(event.target.value);
@@ -66,10 +63,8 @@ const MgPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     };
     /**
      * 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);
@@ -99,8 +94,6 @@ const MgPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    *************/
   /**
    * Check if props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // Get locales
@@ -115,8 +108,7 @@ const MgPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   }
   /**
    * 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`],