@mgdis/mg-components 5.9.1 → 5.10.0

package/dist/collection/utils/behaviors.utils.js

@@ -1,6 +1,5 @@
 /**
  * MgItemMore type guard
- *
  * @param {HTMLElement} element element to control type
  * @returns {boolean} truthy if element is mg-item-more
  */
@@ -19,7 +18,6 @@ export class OverflowBehavior {
      **********/
     /**
      * Disconnect ResizeObserver
-     *
      * @returns {void}
      */
     this.disconnect = () => {
@@ -30,7 +28,6 @@ export class OverflowBehavior {
      ************/
     /**
      * run overflow behavior
-     *
      * @param {number} width width of the container. Optional.
      * @returns {void}
      */
@@ -55,14 +52,12 @@ export class OverflowBehavior {
     };
     /**
      * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']
-     *
      * @param {Element} element element to parse
      * @returns {Element[]} 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}
      */
@@ -83,7 +78,6 @@ 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
@@ -99,14 +93,12 @@ 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
      */
     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}
@@ -122,7 +114,6 @@ export class OverflowBehavior {
     };
     /**
      * Toggle element's hidde attribute
-     *
      * @param {Element} element element to toggle
      * @param {boolean} isHidden element is hidden
      * @returns {void}
@@ -135,7 +126,6 @@ export class OverflowBehavior {
     };
     /**
      * Remove hidden attributes on all items
-     *
      * @returns {void}
      */
     this.restoreItems = () => {

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

@@ -1,6 +1,5 @@
 /**
  * Create random ID
- *
  * @param {string} prefix  add prefix to created ID
  * @param {number} length ID length
  * @returns {string} ID
@@ -22,7 +21,6 @@ export class ClassList {
   constructor(classlist = []) {
     /**
      * Add class
-     *
      * @param {string} className class name to add
      * @returns {void}
      */
@@ -33,7 +31,6 @@ export class ClassList {
     };
     /**
      * Delete class
-     *
      * @param {string} className class name to delete
      * @returns {void}
      */
@@ -45,7 +42,6 @@ export class ClassList {
     };
     /**
      * Check if class exist in list
-     *
      * @param {string} className class name to check
      * @returns {boolean} class name is in the list
      */
@@ -54,7 +50,6 @@ export class ClassList {
     };
     /**
      * Join classes seperated by spaces
-     *
      * @returns {string} joined values
      */
     this.join = () => {
@@ -65,14 +60,12 @@ export class ClassList {
 }
 /**
  * Check if all items are string
- *
  * @param {unknown} items items to check
  * @returns {boolean} 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
@@ -85,7 +78,7 @@ 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
  */
@@ -96,7 +89,6 @@ 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
@@ -119,7 +111,6 @@ 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

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

@@ -1,6 +1,5 @@
 /**
  * Format number to the locale currency
- *
  * @param {number} number number to format
  * @param {string} locale locale to apply
  * @param {string} currency currency to apply
@@ -11,7 +10,6 @@ export const localeCurrency = (number, locale, currency) => {
 };
 /**
  * Format number to locale
- *
  * @param {number} number number to format
  * @param {string} locale locale to apply
  * @returns {string} formatted number
@@ -25,7 +23,6 @@ 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
@@ -39,7 +36,6 @@ 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

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

@@ -1,7 +1,6 @@
 import { MockCustomEvent } from '@stencil/core/mock-doc';
 /**
  * Clone Deep function
- *
  * @param {unknown} obj object to clone
  * @returns {unknown} cloned json
  */
@@ -43,7 +42,6 @@ export const setupResizeObserverMock = ({ disconnect, observe }) => {
 };
 /**
  * Utility function that mocks the `SubmitEvent` API. Recommended to execute inside `beforeEach`.
- *
  * @returns {void}
  * @example
  * ```
@@ -67,7 +65,6 @@ 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
@@ -86,7 +83,6 @@ export const forcePopoverId = (component, id, interactiveElement = 'button') =>
  * 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 = () => {
@@ -99,7 +95,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 = () => {

package/dist/components/MgInput.js

@@ -2,7 +2,6 @@ import { h } from '@stencil/core/internal/client';
 
 /**
  * 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
@@ -19,7 +18,6 @@ const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(
 });
 /**
  * Add classes based on props
- *
  * @param {MgInputProps} props MgInput Interface Props
  */
 const manageClasses = (props) => {
@@ -33,14 +31,12 @@ const manageClasses = (props) => {
 };
 /**
  * Get tagname
- *
  * @param {boolean} isFieldset is fieldset
  * @returns {string} 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
@@ -100,7 +96,6 @@ const MgInput = (props, children, utils) => {
   const TagName = getTagName(props.isFieldset);
   /**
    * Get tooltip node
-   *
    * @returns {VNode[]} mg-tooltip
    */
   const getTooltip = () => (h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip },
@@ -108,7 +103,6 @@ const MgInput = (props, children, utils) => {
   /**
    * Get input title (label) node
    * Display asterisk only if not disabled and not readonly
-   *
    * @returns {VNode[]} 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));

package/dist/components/components.utils.js

@@ -1,6 +1,5 @@
 /**
  * Create random ID
- *
  * @param {string} prefix  add prefix to created ID
  * @param {number} length ID length
  * @returns {string} ID
@@ -22,7 +21,6 @@ class ClassList {
   constructor(classlist = []) {
     /**
      * Add class
-     *
      * @param {string} className class name to add
      * @returns {void}
      */
@@ -33,7 +31,6 @@ class ClassList {
     };
     /**
      * Delete class
-     *
      * @param {string} className class name to delete
      * @returns {void}
      */
@@ -45,7 +42,6 @@ class ClassList {
     };
     /**
      * Check if class exist in list
-     *
      * @param {string} className class name to check
      * @returns {boolean} class name is in the list
      */
@@ -54,7 +50,6 @@ class ClassList {
     };
     /**
      * Join classes seperated by spaces
-     *
      * @returns {string} joined values
      */
     this.join = () => {
@@ -65,14 +60,12 @@ class ClassList {
 }
 /**
  * Check if all items are string
- *
  * @param {unknown} items items to check
  * @returns {boolean} all items are string
  */
 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
@@ -85,7 +78,7 @@ const isTagName = (element, tagNames) => {
  */
 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
  */
@@ -96,7 +89,6 @@ 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
@@ -119,7 +111,6 @@ 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

package/dist/components/index2.js

@@ -150,7 +150,6 @@ const fr = {
 
 /**
  * Format number to the locale currency
- *
  * @param {number} number number to format
  * @param {string} locale locale to apply
  * @param {string} currency currency to apply
@@ -161,7 +160,6 @@ const localeCurrency = (number, locale, currency) => {
 };
 /**
  * Format number to locale
- *
  * @param {number} number number to format
  * @param {string} locale locale to apply
  * @returns {string} formatted number
@@ -175,7 +173,6 @@ const localeNumber = (number, locale) => {
 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
@@ -189,7 +186,6 @@ 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
@@ -213,7 +209,6 @@ 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
  */

package/dist/components/mg-action-more.js

@@ -14,7 +14,6 @@ const mgActionMoreCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1
 
 /**
  * MgActionMore['items'] type guard
- *
  * @param {unknown} prop commponent items prop
  * @returns {boolean} return true if type is valid
  */
@@ -24,7 +23,6 @@ const isMgActionMoreItems = (prop) => {
 };
 /**
  * MgActionMore['button'] type guard
- *
  * @param {unknown} prop commponent button prop
  * @returns {boolean} return true if type is valid
  */
@@ -34,7 +32,6 @@ const isMgActionMoreButton = (prop) => {
 };
 /**
  * MgActionMore['icon'] type guard
- *
  * @param {unknown} prop commponent icon prop
  * @returns {boolean} return true if type is valid
  */
@@ -57,7 +54,6 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
      ***********/
     /**
      * Toogle expanded props
-     *
      * @returns {void}
      */
     this.toggleExpanded = () => {
@@ -65,7 +61,6 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     };
     /**
      * Button click handler
-     *
      * @returns {void}
      */
     this.handleButton = () => {
@@ -73,7 +68,6 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     };
     /**
      * Item click handler
-     *
      * @param {MouseEvent} event click event
      * @param {MgActionMoreItemType['mouseEventHandler']} customHandler item['mouseEventHandler']
      * @returns {void}
@@ -113,7 +107,6 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    *************/
   /**
    * Validate props
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -125,7 +118,6 @@ const MgActionMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

package/dist/components/mg-badge2.js

@@ -53,7 +53,6 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -64,7 +63,6 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {
@@ -78,7 +76,7 @@ const MgBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }; }
   static get style() { return mgBadgeCss; }
 }, [1, "mg-badge", {
-    "value": [1032],
+    "value": [8],
     "label": [1],
     "variant": [1],
     "outline": [4],

package/dist/components/mg-button2.js

@@ -24,7 +24,6 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.classFullWidth = 'mg-button--full-width';
     /**
      * Trigger actions onClick event
-     *
      * @param {MouseEvent} event click event
      * @returns {void}
      */
@@ -39,7 +38,6 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Handle onKeydown event
-     *
      * @param {KeyboardEvent} event keyboard event
      * @returns {void}
      */
@@ -54,7 +52,6 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Handle onKeyup event
-     *
      * @param {KeyboardEvent} event keyboard event
      * @returns {void}
      */
@@ -127,7 +124,6 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -145,7 +141,6 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render component
-   *
    * @returns {HTMLElement} html element
    */
   render() {
@@ -164,8 +159,8 @@ const MgButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "identifier": [1],
     "label": [1],
     "type": [1],
-    "fullWidth": [1028, "full-width"],
-    "form": [1025],
+    "fullWidth": [4, "full-width"],
+    "form": [1],
     "disabled": [1028],
     "isIcon": [4, "is-icon"],
     "disableOnClick": [4, "disable-on-click"],

package/dist/components/mg-card2.js

@@ -22,6 +22,15 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      *************/
     this.name = 'mg-card';
     this.baseClass = this.name;
+    /**
+     * Methode to set default varianStyle props
+     * needeed has stencil doesn't know that props is mutated when updated in prop watcher
+     * @returns {void}
+     */
+    this.setDefaultVariantStyle = () => {
+      if (this.variantStyle === undefined)
+        this.variantStyle = 'bar-left';
+    };
     this.variant = undefined;
     this.variantStyle = undefined;
     this.classList = new ClassList([this.baseClass]);
@@ -30,8 +39,7 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (newValue && !variants.includes(newValue))
       throw new Error(`<${this.name}> prop "variant" must match VariantType type.`);
     if (Boolean(newValue)) {
-      if (this.variantStyle === undefined)
-        this.variantStyle = 'bar-left';
+      this.setDefaultVariantStyle();
       this.classList.add(`${this.baseClass}--${newValue}`);
     }
     if (Boolean(oldValue))
@@ -47,9 +55,11 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (Boolean(oldValue))
       this.classList.delete(`${this.baseClass}--${oldValue}`);
   }
+  /*************
+   * Lifecycle *
+   *************/
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -58,7 +68,6 @@ const MgCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

package/dist/components/mg-character-left2.js

@@ -21,7 +21,6 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
    *************/
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -30,7 +29,6 @@ const MgCharacterLeft = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   }
   /**
    * Render component
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

package/dist/components/mg-details.js

@@ -11,7 +11,6 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.expandedChange = createEvent(this, "expanded-change", 7);
     /**
      * Handle details toggle
-     *
      * @returns {void}
      */
     this.handleToggle = () => {
@@ -35,7 +34,6 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -44,7 +42,6 @@ const MgDetails$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

package/dist/components/mg-divider.js

@@ -11,7 +11,6 @@ const MgDivider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {

package/dist/components/mg-form.js

@@ -16,7 +16,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     /**
      * Define required message based on mg-inputs required elements
      * Also
-     *
      * @returns {void}
      */
     this.setRequiredMessage = () => {
@@ -42,7 +41,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Check if form is valid
-     *
      * @returns {void}
      */
     this.checkValidity = () => {
@@ -55,7 +53,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Handle Form Submit
-     *
      * @param {SubmitEvent} event submit event
      * @returns {void}
      */
@@ -65,7 +62,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Set mgInputs
-     *
      * @returns {void}
      */
     this.setMgInputs = () => {
@@ -97,7 +93,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Public method to display errors
-   *
    * @returns {Promise<void>}
    */
   async displayError() {
@@ -113,7 +108,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad() {
@@ -141,7 +135,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Add slot listeners
-   *
    * @returns {void}
    */
   componentDidLoad() {
@@ -160,7 +153,6 @@ const MgForm$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render() {