@mgdis/mg-components 5.10.0 → 5.11.0

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

@@ -3,8 +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 {
@@ -18,32 +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;
@@ -58,14 +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;
@@ -103,7 +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
@@ -128,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() === '') {
@@ -139,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
@@ -182,7 +180,6 @@ export class MgTabs {
    *************/
   /**
    * Check if component props are well configured on init
-   * @returns {void}
    */
   componentWillLoad() {
     // Check tabs format
@@ -194,7 +191,6 @@ export class MgTabs {
   }
   /**
    * add listners
-   * @returns {void}
    */
   componentDidLoad() {
     document.addEventListener('click', (event) => {
@@ -204,10 +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),
@@ -329,7 +325,7 @@ export class MgTabs {
   static get states() {
     return {
       "tabs": {},
-      "classList": {}
+      "classCollection": {}
     };
   }
   static get events() {

package/dist/collection/locales/en/messages.json

@@ -17,6 +17,13 @@
   "input": {
     "select": {
       "placeholder": "Select a value"
+    },
+    "checkbox": {
+      "selectedValues": "{nb} selected values",
+      "selectedValue": "{nb} selected value",
+      "editButton": "Edit",
+      "selectButton": "Select values",
+      "showButton": "Show"
     }
   },
   "form": {

package/dist/collection/locales/fr/messages.json

@@ -17,6 +17,13 @@
   "input": {
     "select": {
       "placeholder": "Sélectionnez une valeur"
+    },
+    "checkbox": {
+      "selectedValues": "{nb} valeurs selectionnées",
+      "selectedValue": "{nb} valeur selectionnée",
+      "editButton": "Modifier",
+      "selectButton": "Sélectionner des valeurs",
+      "showButton": "Voir"
     }
   },
   "form": {

package/dist/collection/locales/index.js

@@ -5,7 +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);

package/dist/collection/styles/reset-mg-card-slotted-variables.scss

@@ -6,5 +6,6 @@
     --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/utils/behaviors.utils.js

@@ -1,7 +1,7 @@
 /**
  * MgItemMore type guard
- * @param {HTMLElement} element element to control type
- * @returns {boolean} truthy if element is mg-item-more
+ * @param element - element to control type
+ * @returns truthy if element is mg-item-more
  */
 const isMgItemMore = (element) => element.nodeName === 'MG-ITEM-MORE';
 export var OverflowBehaviorElements;
@@ -18,7 +18,6 @@ export class OverflowBehavior {
      **********/
     /**
      * Disconnect ResizeObserver
-     * @returns {void}
      */
     this.disconnect = () => {
       this._resizeObserver.disconnect();
@@ -28,8 +27,7 @@ export class OverflowBehavior {
      ************/
     /**
      * run overflow behavior
-     * @param {number} width width of the container. Optional.
-     * @returns {void}
+     * @param width - width of the container. Optional.
      */
     this.run = (width) => {
       if (this._moreElement === undefined) {
@@ -52,14 +50,13 @@ export class OverflowBehavior {
     };
     /**
      * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']
-     * @param {Element} element element to parse
-     * @returns {Element[]} children
+     * @param element - element to parse
+     * @returns children
      */
     this.getInteractiveItems = (element) => { var _a; return (((_a = element.children) === null || _a === void 0 ? void 0 : _a.length) > 0 ? Array.from(element.children) : []).filter(element => ['MG-MENU-ITEM', 'MG-BUTTON'].includes(element.nodeName)); };
     /**
      * Update displayed items in container from a given available space
-     * @param {number} availableWidth available width in container to display child items
-     * @returns {void}
+     * @param availableWidth - available width in container to display child items
      */
     this.updateDisplayedItems = (availableWidth) => {
       this.restoreItems();
@@ -78,10 +75,10 @@ export class OverflowBehavior {
     };
     /**
      * Utility method to know if item overflow partialy or totaly in the container
-     * @param {number} cumulateWidth previous sibling elements cumulate width + item width
-     * @param {HTMLElement} item item HTML element
-     * @param {number} availableWidth container available width
-     * @returns {boolean} truthy if element is overflow
+     * @param cumulateWidth - previous sibling elements cumulate width + item width
+     * @param item - item HTML element
+     * @param availableWidth - container available width
+     * @returns truthy if element is overflow
      */
     this.isOverflowElement = (cumulateWidth, item, availableWidth) => {
       if (item.previousElementSibling === null || this.isMoreElement(item))
@@ -93,15 +90,14 @@ export class OverflowBehavior {
     };
     /**
      * Utility method to know if a given element is the 'MORE' element
-     * @param {Element} element element to match with 'MORE' element
-     * @returns {boolean} truthy if element is the 'MORE' element
+     * @param element - element to match with 'MORE' element
+     * @returns truthy if element is the 'MORE' element
      */
     this.isMoreElement = (element) => element.nodeName === 'MG-ITEM-MORE';
     /**
      * Toggle display item element
-     * @param {HTMLElement} item item to control
-     * @param {boolean} isHidden is item hidden
-     * @returns {void}
+     * @param item - item to control
+     * @param isHidden - is item hidden
      */
     this.toggleItem = (item, isHidden) => {
       const mgActionMenuindex = Number(item.getAttribute(OverflowBehaviorElements.BASE_INDEX));
@@ -114,9 +110,8 @@ export class OverflowBehavior {
     };
     /**
      * Toggle element's hidde attribute
-     * @param {Element} element element to toggle
-     * @param {boolean} isHidden element is hidden
-     * @returns {void}
+     * @param element - element to toggle
+     * @param isHidden - element is hidden
      */
     this.toggleElement = (element, isHidden) => {
       if (isHidden)
@@ -126,7 +121,6 @@ export class OverflowBehavior {
     };
     /**
      * Remove hidden attributes on all items
-     * @returns {void}
      */
     this.restoreItems = () => {
       [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));

package/dist/collection/utils/components.utils.js

@@ -1,8 +1,8 @@
 /**
  * Create random ID
- * @param {string} prefix  add prefix to created ID
- * @param {number} length ID length
- * @returns {string} ID
+ * @param prefix - add prefix to created ID
+ * @param length - ID length
+ * @returns ID
  */
 export const createID = (prefix = '', length = 10) => {
   let ID = '';
@@ -21,8 +21,7 @@ export class ClassList {
   constructor(classlist = []) {
     /**
      * Add class
-     * @param {string} className class name to add
-     * @returns {void}
+     * @param className - class name to add
      */
     this.add = (className) => {
       if (!this.has(className)) {
@@ -31,8 +30,7 @@ export class ClassList {
     };
     /**
      * Delete class
-     * @param {string} className class name to delete
-     * @returns {void}
+     * @param className - class name to delete
      */
     this.delete = (className) => {
       const index = this.classes.indexOf(className);
@@ -42,15 +40,15 @@ export class ClassList {
     };
     /**
      * Check if class exist in list
-     * @param {string} className class name to check
-     * @returns {boolean} class name is in the list
+     * @param className - class name to check
+     * @returns class name is in the list
      */
     this.has = (className) => {
       return this.classes.includes(className);
     };
     /**
      * Join classes seperated by spaces
-     * @returns {string} joined values
+     * @returns joined values
      */
     this.join = () => {
       return this.classes.join(' ');
@@ -60,15 +58,15 @@ export class ClassList {
 }
 /**
  * Check if all items are string
- * @param {unknown} items items to check
- * @returns {boolean} all items are string
+ * @param items - items to check
+ * @returns all items are string
  */
 export const allItemsAreString = (items) => Array.isArray(items) && items.every(item => typeof item === 'string');
 /**
  * Check if element is a heading
- * @param {Element} element slotted element
- * @param {string[]} tagNames allowed tag names list
- * @returns {boolean} element is a heading
+ * @param element - slotted element
+ * @param tagNames - allowed tag names list
+ * @returns element is a heading
  */
 export const isTagName = (element, tagNames) => {
   return tagNames.includes(element === null || element === void 0 ? void 0 : element.tagName.toLowerCase());
@@ -79,8 +77,8 @@ export const isTagName = (element, tagNames) => {
 export const focusableElements = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), [identifier]';
 /**
  * Get windows
- * @param {Window} localWindow the window we are lookink for other windows
- * @returns {Window[]} The list of windows found
+ * @param localWindow - the window we are lookink for other windows
+ * @returns The list of windows found
  */
 export const getWindows = (localWindow) => {
   const parentWindows = getParentWindows(localWindow);
@@ -89,9 +87,9 @@ export const getWindows = (localWindow) => {
 };
 /**
  * Get parent windows
- * @param {Window} localWindow the window we are lookink for parents
- * @param {Window[]} windows The list of allready found windows
- * @returns {Window[]} The list of windows found
+ * @param localWindow - the window we are lookink for parents
+ * @param windows - The list of allready found windows
+ * @returns The list of windows found
  */
 export const getParentWindows = (localWindow, windows = []) => {
   // Check if is in iframe
@@ -111,9 +109,9 @@ export const getParentWindows = (localWindow, windows = []) => {
 };
 /**
  * Get child windows
- * @param {Window} localWindow the window we are lookink for children
- * @param {Window[]} windows The list of allready found windows
- * @returns {Window[]} The list of windows found
+ * @param localWindow - the window we are lookink for children
+ * @param windows - The list of allready found windows
+ * @returns The list of windows found
  */
 const getChildWindows = (localWindow, windows = []) => {
   if (localWindow.frames.length > 0) {

package/dist/collection/utils/locale.utils.js

@@ -1,18 +1,18 @@
 /**
  * Format number to the locale currency
- * @param {number} number number to format
- * @param {string} locale locale to apply
- * @param {string} currency currency to apply
- * @returns {string} formatted currency
+ * @param number - number to format
+ * @param locale - locale to apply
+ * @param currency - currency to apply
+ * @returns formatted currency
  */
 export const localeCurrency = (number, locale, currency) => {
   return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);
 };
 /**
  * Format number to locale
- * @param {number} number number to format
- * @param {string} locale locale to apply
- * @returns {string} formatted number
+ * @param number - number to format
+ * @param locale - locale to apply
+ * @returns formatted number
  */
 export const localeNumber = (number, locale) => {
   return new Intl.NumberFormat(locale).format(number);
@@ -23,9 +23,9 @@ export const localeNumber = (number, locale) => {
 export const dateRegExp = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
 /**
  * Locale date format
- * @param {string} date date to format
- * @param {string} locale locale to apply
- * @returns {string} formatted date
+ * @param date - date to format
+ * @param locale - locale to apply
+ * @returns formatted date
  */
 export const localeDate = (date, locale) => {
   if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {
@@ -36,10 +36,10 @@ export const localeDate = (date, locale) => {
 /**
  * Get locale and messages
  * We load the defined locale but for now we only support the first subtag for messages
- * @param {HTMLElement} element element we need to get the language
- * @param {unknown} messages messages to use
- * @param {string} defaultLocale default messages locale
- * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
+ * @param element - element we need to get the language
+ * @param messages - messages to use
+ * @param defaultLocale - default messages locale
+ * @returns messages object
  */
 export const getLocaleMessages = (element, messages, defaultLocale) => {
   // Get local

package/dist/collection/utils/unit.test.utils.js

@@ -1,8 +1,8 @@
 import { MockCustomEvent } from '@stencil/core/mock-doc';
 /**
  * Clone Deep function
- * @param {unknown} obj object to clone
- * @returns {unknown} cloned json
+ * @param obj - object to clone
+ * @returns cloned json
  */
 export const cloneDeep = (obj) => JSON.parse(JSON.stringify(obj));
 export const setupMutationObserverMock = ({ disconnect, observe, takeRecords }) => {
@@ -42,11 +42,11 @@ export const setupResizeObserverMock = ({ disconnect, observe }) => {
 };
 /**
  * Utility function that mocks the `SubmitEvent` API. Recommended to execute inside `beforeEach`.
- * @returns {void}
  * @example
  * ```
  * setupSubmitEventMock();
  * ```
+ * @returns custom event mock
  */
 export const setupSubmitEventMock = () => {
   class SubmitEvent extends MockCustomEvent {
@@ -65,10 +65,9 @@ export const setupSubmitEventMock = () => {
 };
 /**
  * force popover id when component use randomed identifier
- * @param {Element} component element wich include mg-popover
- * @param {string} id new fixed id
- * @param {string} interactiveElement element where attribute 'aria-controls' is set
- * @returns {void}
+ * @param component - element wich include mg-popover
+ * @param id - new fixed id
+ * @param interactiveElement - element where attribute 'aria-controls' is set
  */
 export const forcePopoverId = (component, id, interactiveElement = 'button') => {
   const popover = component.shadowRoot.querySelector('mg-popover');
@@ -79,11 +78,10 @@ export const forcePopoverId = (component, id, interactiveElement = 'button') =>
 };
 /**
  * fix popper console.error in test
- * it is generated in @popperjs/core/dist/cjs/popper.js l.1859
+ * it is generated in `@popperjs/core/dist/cjs/popper.js l.1859`
  * this is due to internal function isHTMLElement(), so we can not mock it directly.
  * this function check if test DOM element mockHTMLElement instance is 'instanceof HTMLElement'
  * so we only override the console.error side effect for this error
- * @returns {void}
  */
 export const mockConsoleError = () => {
   jest.spyOn(console, 'error').mockImplementation(error => {
@@ -95,7 +93,6 @@ export const mockConsoleError = () => {
 /**
  * Add missing window.frames property to test context
  * usefull for component with iframe listeners, ex: mg-popover
- * @returns {void}
  */
 export const mockWindowFrames = () => {
   Object.defineProperty(window, 'frames', {

package/dist/components/MgInput.js

@@ -1,11 +1,16 @@
 import { h } from '@stencil/core/internal/client';
 
+/**
+ * Possible input width
+ */
+const widths = [2, 4, 16, 'full'];
+
 /**
  * Apply in all input child node the aria-describedby attribute
- * @param {VNode[]} children Represent scoped elements
- * @param {Set<string>} ariaDescribedbyIDs List of IDs
- * @param {FunctionalUtilities} utils Stencil.js utils
- * @returns {VNode[]} Children with aria-describedby attribute
+ * @param children - Represent scoped elements
+ * @param ariaDescribedbyIDs - List of IDs
+ * @param utils - Stencil.js utils
+ * @returns Children with aria-describedby attribute
  */
 const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(children, child => {
   if (['input', 'select', 'textarea'].includes(child.vtag)) {
@@ -18,29 +23,36 @@ const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(
 });
 /**
  * Add classes based on props
- * @param {MgInputProps} props MgInput Interface Props
+ * @param props - MgInput Interface Props
  */
 const manageClasses = (props) => {
-  props.classList.add('mg-input');
+  props.classCollection.add('mg-input');
   if (props.labelOnTop)
-    props.classList.add('mg-input--label-on-top');
+    props.classCollection.add('mg-input--label-on-top');
+  else
+    props.classCollection.delete('mg-input--label-on-top');
   if (props.readonly)
-    props.classList.add('mg-input--readonly');
+    props.classCollection.add('mg-input--readonly');
+  else
+    props.classCollection.delete('mg-input--readonly');
+  widths.forEach(width => {
+    props.classCollection.delete(`mg-input--width-${width}`);
+  });
   if (props.mgWidth !== undefined)
-    props.classList.add(`mg-input--width-${props.mgWidth}`);
+    props.classCollection.add(`mg-input--width-${props.mgWidth}`);
 };
 /**
  * Get tagname
- * @param {boolean} isFieldset is fieldset
- * @returns {string} tag name
+ * @param isFieldset - is fieldset
+ * @returns tag name
  */
 const getTagName = (isFieldset) => (isFieldset ? 'fieldset' : 'div');
 /**
  * Get input template
- * @param {MgInputProps} props MgInput Interface Props
- * @param {VNode[]} children Represent scoped elements
- * @param {FunctionalUtilities} utils Stencil.js utils
- * @returns {VNode[]} input template
+ * @param props - MgInput Interface Props
+ * @param children - Represent scoped elements
+ * @param utils - Stencil.js utils
+ * @returns input template
  */
 const MgInput = (props, children, utils) => {
   /**
@@ -96,17 +108,17 @@ const MgInput = (props, children, utils) => {
   const TagName = getTagName(props.isFieldset);
   /**
    * Get tooltip node
-   * @returns {VNode[]} mg-tooltip
+   * @returns mg-tooltip
    */
   const getTooltip = () => (h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip },
     h("mg-icon", { icon: "info-circle" })));
   /**
    * Get input title (label) node
    * Display asterisk only if not disabled and not readonly
-   * @returns {VNode[]} mg-input-title
+   * @returns mg-input-title
    */
   const getInputTitle = () => (h("mg-input-title", { identifier: props.identifier, class: props.labelHide ? 'sr-only' : undefined, required: props.required && !props.disabled && !props.readonly, "is-legend": props.isFieldset }, props.label));
-  return (h(TagName, { class: props.classList.join() },
+  return (h(TagName, { class: props.classCollection.join() },
     props.labelOnTop ? (h("div", { class: "mg-input__title" },
       getInputTitle(),
       !props.readonly && props.tooltip && getTooltip())) : (getInputTitle()),