@mgdis/mg-components 5.9.1 → 5.10.1

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

@@ -44,8 +44,6 @@ export class MgModal {
      *************/
     /**
      * Handle close button
-     *
-     * @returns {void}
      */
     this.handleClose = () => {
       this.hide = true;
@@ -56,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() === '') {
@@ -66,20 +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.
@@ -92,8 +88,6 @@ export class MgModal {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // Store body overflow
@@ -112,8 +106,6 @@ export class MgModal {
   }
   /**
    * Add observer on component to set focus when displayed
-   *
-   * @returns {void}
    */
   componentDidLoad() {
     new MutationObserver(mutationList => {
@@ -128,11 +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"; }
@@ -185,7 +176,7 @@ export class MgModal {
       },
       "closeButton": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -225,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,24 +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;
@@ -39,9 +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);
@@ -49,10 +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);
@@ -82,8 +77,6 @@ export class MgPagination {
    *************/
   /**
    * Check if props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // Get locales
@@ -98,8 +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.js

@@ -8,8 +8,6 @@ export class MgPanel {
      ************/
     /**
      * Toggle is editing state
-     *
-     * @returns {void}
      */
     this.toggleIsEditing = () => {
       this.isEditing = !this.isEditing;
@@ -19,8 +17,6 @@ export class MgPanel {
      ************/
     /**
      * Collapse button click handler
-     *
-     * @returns {void}
      */
     this.handleCollapseButton = () => {
       if (!this.expandToggleDisabled) {
@@ -29,25 +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;
@@ -55,8 +45,6 @@ export class MgPanel {
     };
     /**
      * Validate edition button handler
-     *
-     * @returns {void}
      */
     this.handleValidateEditButton = () => {
       if (this.editInputElement.valid) {
@@ -67,9 +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)));
@@ -94,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;
   }
@@ -105,10 +91,10 @@ export class MgPanel {
     this.titleChange.emit(newValue);
   }
   validatetitlePattern(newValue) {
-    if (newValue && !this.titleEditable) {
+    if (newValue !== undefined && !this.titleEditable) {
       throw new Error('<mg-panel> prop "titleEditable" must be set to `true`.');
     }
-    if (newValue && (this.titlePatternErrorMessage === undefined || this.titlePatternErrorMessage.trim() === '')) {
+    if (newValue !== undefined && (this.titlePatternErrorMessage === undefined || this.titlePatternErrorMessage.trim() === '')) {
       throw new Error('<mg-panel> prop "titlePattern" must be paired with the prop "titlePatternErrorMessage".');
     }
   }
@@ -120,8 +106,6 @@ export class MgPanel {
    *************/
   /**
    * Check if props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // Get locales
@@ -132,8 +116,6 @@ export class MgPanel {
   }
   /**
    * Edit DOM after render
-   *
-   * @returns {void}
    */
   componentDidRender() {
     // when we are editing we get focus on edition input
@@ -143,11 +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"; }
@@ -200,7 +181,7 @@ export class MgPanel {
       },
       "titlePattern": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -217,7 +198,7 @@ export class MgPanel {
       },
       "titlePatternErrorMessage": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -252,7 +233,7 @@ export class MgPanel {
       },
       "expandToggleDisabled": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -289,7 +270,7 @@ export class MgPanel {
   }
   static get states() {
     return {
-      "classList": {},
+      "classCollection": {},
       "isEditing": {},
       "updatedPanelTitle": {}
     };

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

@@ -9,9 +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;
@@ -23,8 +21,6 @@ export class MgPopover {
     };
     /**
      * Show popover
-     *
-     * @returns {void}
      */
     this.show = () => {
       // Make the popover visible
@@ -43,8 +39,6 @@ export class MgPopover {
     };
     /**
      * Hide popover
-     *
-     * @returns {void}
      */
     this.hide = () => {
       // Hide the popover
@@ -58,8 +52,6 @@ export class MgPopover {
     };
     /**
      * Handle action for close button
-     *
-     * @returns {void}
      */
     this.handleCloseButton = () => {
       this.display = false;
@@ -70,13 +62,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) {
@@ -92,8 +84,6 @@ export class MgPopover {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void} timeout
    */
   componentWillLoad() {
     // Get windows to attach events
@@ -104,8 +94,6 @@ export class MgPopover {
   }
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void}
    */
   componentDidLoad() {
     const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
@@ -162,11 +150,10 @@ export class MgPopover {
   }
   /**
    * 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"; }
@@ -279,7 +266,7 @@ export class MgPopover {
       },
       "disabled": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -299,7 +286,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,9 +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();
@@ -30,8 +28,6 @@ export class MgSkipLinks {
    *************/
   /**
    * Check if props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateLinks(this.links);
@@ -39,8 +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)))))));
@@ -61,7 +56,7 @@ export class MgSkipLinks {
     return {
       "links": {
         "type": "unknown",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "SkipLink[]",
           "resolved": "SkipLink[]",

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

@@ -3,9 +3,8 @@ import { createID, ClassList, allItemsAreString } from '../../../utils/component
 import { sizes, Status } from './mg-tabs.conf';
 /**
  * type TabItem validation function
- *
- * @param {TabItem} tab tab item
- * @returns {boolean} tab item type is valid
+ * @param tab - tab item
+ * @returns tab item type is valid
  */
 const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'string';
 export class MgTabs {
@@ -19,37 +18,32 @@ export class MgTabs {
     this.startIndex = 1;
     /**
      * Method to know if given tab has the given status
-     *
-     * @param {TabItem} tab item tab key to set to ACTIVE status
-     * @param {Status} status status to valide
-     * @returns {boolean} status comparaison
+     * @param tab - item tab key to set to ACTIVE status
+     * @param status - status to valide
+     * @returns status comparaison
      */
     this.tabHasStatus = (tab, status) => tab.status === status;
     /**
      * Method to get element id from index
-     *
-     * @param {string} element to get id
-     * @param {number} index to generate id
-     * @returns {string} generated element id
+     * @param element - to get id
+     * @param index - to generate id
+     * @returns generated element id
      */
     this.getElementId = (element, index) => `${element}-${this.getTabItemIndex(index)}`;
     /**
      * Method to get tab item index
-     *
-     * @param {number} index to get
-     * @returns {number} index
+     * @param index - to get
+     * @returns index
      */
     this.getTabItemIndex = (index) => index + this.startIndex;
     /**
      * Method to get the active-tab value
-     *
-     * @returns {number} of the active-tab
+     * @returns of the active-tab
      */
     this.getActiveTab = () => this.activeTab || this.getTabItemIndex(this.tabs.map((tab, index) => (Object.assign(Object.assign({}, tab), { index }))).find(tab => this.tabHasStatus(tab, Status.ACTIVE)).index);
     /**
      * Handle click events on tabs
-     *
-     * @param {MouseEvent} event mouse event
+     * @param event - mouse event
      */
     this.handleClick = (event) => {
       const tabId = event.currentTarget.dataset.index;
@@ -64,16 +58,13 @@ export class MgTabs {
     };
     /**
      * get navigation button class from given status
-     *
-     * @param {Status} status button tab status
-     * @returns {string} button class/selector variant
+     * @param status - button tab status
+     * @returns button class/selector variant
      */
     this.getNavigationButtonClass = (status) => `${this.buttonTabBaseClass}--${status}`;
     /**
      * Handle keyboard event on tabs
-     *
-     * @param {MouseEvent} event mouse event
-     * @returns {void}
+     * @param event - mouse event
      */
     this.handleKeydown = (event) => {
       const parent = event.target.parentElement;
@@ -111,8 +102,6 @@ export class MgTabs {
     };
     /**
      * Method to reset focus behavior
-     *
-     * @returns {void}
      */
     this.resetFocus = () => {
       // update asynchronously tabindex to prevent get focus on new tabindex at then end of event process
@@ -137,7 +126,7 @@ export class MgTabs {
     this.items = undefined;
     this.activeTab = undefined;
     this.tabs = [];
-    this.classList = new ClassList(['mg-tabs']);
+    this.classCollection = new ClassList(['mg-tabs']);
   }
   validateLabel(newValue) {
     if (typeof newValue !== 'string' || newValue.trim() === '') {
@@ -148,7 +137,7 @@ export class MgTabs {
     if (!sizes.includes(newValue)) {
       throw new Error(`<mg-tabs> prop "size" must be one of: ${sizes.join(', ')}`);
     }
-    this.classList.add(`mg-tabs--size-${this.size}`);
+    this.classCollection.add(`mg-tabs--size-${this.size}`);
   }
   validateItems(newValue) {
     // String array
@@ -191,8 +180,6 @@ export class MgTabs {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // Check tabs format
@@ -204,8 +191,6 @@ export class MgTabs {
   }
   /**
    * add listners
-   *
-   * @returns {void}
    */
   componentDidLoad() {
     document.addEventListener('click', (event) => {
@@ -215,11 +200,10 @@ export class MgTabs {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h("div", { class: this.classList.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
+    return (h("div", { class: this.classCollection.join() }, h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { key: tab.label, role: "tab", id: this.getElementId(this.identifier, index), class: {
         [`${this.buttonTabBaseClass}`]: true,
         [`${this.buttonTabBaseClass}--horizontal`]: true,
         [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasStatus(tab, Status.ACTIVE),
@@ -341,7 +325,7 @@ export class MgTabs {
   static get states() {
     return {
       "tabs": {},
-      "classList": {}
+      "classCollection": {}
     };
   }
   static get events() {

package/dist/collection/locales/index.js

@@ -5,8 +5,7 @@ const defaultLocale = 'en';
 const messages = { en, fr };
 /**
  * Get Intl object
- *
- * @param {HTMLElement} element element we need to get the language
- * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
+ * @param element - element we need to get the language
+ * @returns messages object
  */
 export const initLocales = (element) => getLocaleMessages(element, messages, defaultLocale);