@mgdis/mg-components 5.9.1 → 5.10.1

package/dist/components/mg-input-text2.js

@@ -27,8 +27,6 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.hasDisplayedError = false;
     /**
      * Handle input event
-     *
-     * @returns {void}
      */
     this.handleInput = () => {
       this.checkValidity();
@@ -39,29 +37,23 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Handle focus event
-     *
-     * @returns {void}
      */
     this.handleFocus = () => {
-      this.classList.add(this.classFocus);
-      this.classList = new ClassList(this.classList.classes);
+      this.classCollection.add(this.classFocus);
+      this.classCollection = new ClassList(this.classCollection.classes);
     };
     /**
      * Handle blur event
-     *
-     * @returns {void}
      */
     this.handleBlur = () => {
       // Manage focus
-      this.classList.delete(this.classFocus);
-      this.classList = new ClassList(this.classList.classes);
+      this.classCollection.delete(this.classFocus);
+      this.classCollection = new ClassList(this.classCollection.classes);
       // Display Error
       this.displayError();
     };
     /**
      * Check if input is valid
-     *
-     * @returns {void}
      */
     this.checkValidity = () => {
       var _a;
@@ -72,8 +64,6 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Set input error message
-     *
-     * @returns {void}
      */
     this.setErrorMessage = () => {
       // Set error message
@@ -89,11 +79,9 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Validate pattern configuration
-     *
-     * @returns {void}
      */
     this.validatePattern = () => {
-      if (this.pattern &&
+      if (this.pattern !== undefined &&
         typeof this.pattern === 'string' &&
         this.pattern !== '' &&
         (this.patternErrorMessage === undefined || typeof this.patternErrorMessage !== 'string' || this.patternErrorMessage === '')) {
@@ -102,17 +90,15 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     };
     /**
      * Validate append slot
-     *
-     * @returns {void}
      */
     this.validateAppendSlot = () => {
       const slotAppendInput = Array.from(this.element.querySelectorAll('[slot="append-input"]'));
       if (slotAppendInput.length === 1) {
-        this.classList.add(slotAppendInput[0].nodeName === 'MG-BUTTON' ? this.classIsInputGroupAppend : 'mg-input--is-append-input-slot-content');
+        this.classCollection.add(slotAppendInput[0].nodeName === 'MG-BUTTON' ? this.classIsInputGroupAppend : 'mg-input--is-append-input-slot-content');
       }
       else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {
-        this.classList.add(this.classIsInputGroupAppend);
-        this.classList.add('mg-input--has-buttons-group-append');
+        this.classCollection.add(this.classIsInputGroupAppend);
+        this.classCollection.add('mg-input--has-buttons-group-append');
       }
     };
     this.value = undefined;
@@ -136,7 +122,7 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.helpText = undefined;
     this.valid = undefined;
     this.invalid = undefined;
-    this.classList = new ClassList(['mg-input--text']);
+    this.classCollection = new ClassList(['mg-input--text']);
     this.errorMessage = undefined;
   }
   handleValue(newValue) {
@@ -144,10 +130,10 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   validateIcon(newValue) {
     if (newValue !== undefined) {
-      this.classList.add(this.classHasIcon);
+      this.classCollection.add(this.classHasIcon);
     }
     else {
-      this.classList.delete(this.classHasIcon);
+      this.classCollection.delete(this.classHasIcon);
     }
   }
   handleValidityChange(newValue, _oldValue, prop) {
@@ -162,16 +148,12 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Public method to play input focus
-   *
-   * @returns {Promise<void>}
    */
   async setFocus() {
     this.input.focus();
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -183,8 +165,7 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -203,11 +184,10 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { class: "mg-input__with-character-left", style: {
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { class: "mg-input__with-character-left", style: {
         '--mg-character-left-message-length': (this.displayCharacterLeft
           ? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1
           : 0).toString(),
@@ -247,7 +227,7 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "helpText": [1, "help-text"],
     "valid": [1028],
     "invalid": [1028],
-    "classList": [32],
+    "classCollection": [32],
     "errorMessage": [32],
     "setFocus": [64],
     "displayError": [64]

package/dist/components/mg-input-textarea.js

@@ -38,24 +38,23 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
      * Handle focus event
      */
     this.handleFocus = () => {
-      this.classList.add(this.classFocus);
-      this.classList = new ClassList(this.classList.classes);
+      this.classCollection.add(this.classFocus);
+      this.classCollection = new ClassList(this.classCollection.classes);
     };
     /**
      * Handle blur event
      */
     this.handleBlur = () => {
       // Manage focus
-      this.classList.delete(this.classFocus);
-      this.classList = new ClassList(this.classList.classes);
+      this.classCollection.delete(this.classFocus);
+      this.classCollection = new ClassList(this.classCollection.classes);
       // Display Error
       this.displayError();
     };
     /**
      * Get pattern validity
      * Pattern is not defined on textarea field: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea
-     *
-     * @returns {boolean} is pattern valid
+     * @returns is pattern valid
      */
     this.getPatternValidity = () => this.pattern === undefined || new RegExp(`^${this.pattern}$`, 'u').test(this.value);
     /**
@@ -87,7 +86,7 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
      * Validate pattern configuration
      */
     this.validatePattern = () => {
-      if (this.pattern &&
+      if (this.pattern !== undefined &&
         typeof this.pattern === 'string' &&
         this.pattern !== '' &&
         (this.patternErrorMessage === undefined || typeof this.patternErrorMessage !== 'string' || this.patternErrorMessage === '')) {
@@ -115,7 +114,7 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.valid = undefined;
     this.invalid = undefined;
     this.resizable = 'none';
-    this.classList = new ClassList(['mg-input--textarea']);
+    this.classCollection = new ClassList(['mg-input--textarea']);
     this.errorMessage = undefined;
   }
   handleValue(newValue) {
@@ -134,16 +133,14 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   }
   validateDisplayCharacterLeft(newValue) {
     if (newValue) {
-      this.classList.add(this.classHasDisplayCharacterLeft);
+      this.classCollection.add(this.classHasDisplayCharacterLeft);
     }
     else {
-      this.classList.delete(this.classHasDisplayCharacterLeft);
+      this.classCollection.delete(this.classHasDisplayCharacterLeft);
     }
   }
   /**
    * Public method to display errors
-   *
-   * @returns {Promise<void>}
    */
   async displayError() {
     this.checkValidity();
@@ -155,8 +152,7 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
    *************/
   /**
    * Check if component props are well configured on init
-   *
-   * @returns {ReturnType<typeof setTimeout>} timeout
+   * @returns timeout
    */
   componentWillLoad() {
     // Get locales
@@ -174,11 +170,10 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { class: "mg-input__with-character-left" }, h("textarea", { class: {
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [this.characterLeftId], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: this.required, readonly: this.readonly, mgWidth: this.mgWidth, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: this.tooltip, helpText: this.helpText, errorMessage: this.errorMessage, isFieldset: false }, h("div", { class: "mg-input__with-character-left" }, h("textarea", { class: {
         'mg-input__box': true,
         'mg-input__box--resizable': this.resizable === 'both',
         'mg-input__box--resizable-horizontal': this.resizable === 'horizontal',
@@ -219,7 +214,7 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     "valid": [1028],
     "invalid": [1028],
     "resizable": [1],
-    "classList": [32],
+    "classCollection": [32],
     "errorMessage": [32],
     "displayError": [64]
   }]);

package/dist/components/mg-input-title2.js

@@ -24,8 +24,6 @@ const MgInputTitle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
    *************/
   /**
    * Init tag name
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     this.validateIdentifier(this.identifier);
@@ -33,8 +31,7 @@ const MgInputTitle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML element
    */
   render() {
     const TagName = this.tagName;

package/dist/components/mg-input-toggle.js

@@ -9,9 +9,8 @@ const mgInputToggleCss = ":host{display:block}.mg-input{display:flex;align-items
 
 /**
  * type Option validation function
- *
- * @param {ToggleValue} option radio option
- * @returns {boolean} toggle option type is valid
+ * @param option - radio option
+ * @returns toggle option type is valid
  */
 const isOption = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
 const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -32,16 +31,12 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.classIcon = 'mg-input--toggle-icon';
     /**
      * Change checked value
-     *
-     * @returns {void}
      */
     this.toggleChecked = () => {
       this.checked = !this.checked;
     };
     /**
      * Slots validation
-     *
-     * @returns {void}
      */
     this.validateSlots = () => {
       const slots = Array.from(this.element.children);
@@ -67,7 +62,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.disabled = false;
     this.tooltip = undefined;
     this.helpText = undefined;
-    this.classList = new ClassList(['mg-input--toggle']);
+    this.classCollection = new ClassList(['mg-input--toggle']);
     this.options = undefined;
     this.checked = false;
   }
@@ -95,41 +90,39 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   }
   handleIsOnOff(newValue) {
     if (newValue)
-      this.classList.add(this.classOnOff);
+      this.classCollection.add(this.classOnOff);
     else
-      this.classList.delete(this.classOnOff);
+      this.classCollection.delete(this.classOnOff);
   }
   handleIsIcon(newValue) {
     if (newValue)
-      this.classList.add(this.classIcon);
+      this.classCollection.add(this.classIcon);
     else
-      this.classList.delete(this.classIcon);
+      this.classCollection.delete(this.classIcon);
   }
   handleReadonly(newValue) {
     if (newValue)
-      this.classList.add(this.classReadonly);
+      this.classCollection.add(this.classReadonly);
     else
-      this.classList.delete(this.classReadonly);
+      this.classCollection.delete(this.classReadonly);
   }
   handleDisabled(newValue) {
     if (newValue)
-      this.classList.add(this.classDisabled);
+      this.classCollection.add(this.classDisabled);
     else
-      this.classList.delete(this.classDisabled);
+      this.classCollection.delete(this.classDisabled);
   }
   handleChecked(newValue) {
     // style
     if (newValue)
-      this.classList.add(this.classIsActive);
+      this.classCollection.add(this.classIsActive);
     else
-      this.classList.delete(this.classIsActive);
+      this.classCollection.delete(this.classIsActive);
     // update value
     this.value = this.options[newValue ? 1 : 0].value;
   }
   /**
    * set checked state
-   *
-   * @returns {void}
    */
   setChecked() {
     const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);
@@ -171,11 +164,10 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
-    return (h(MgInput, { identifier: this.identifier, classList: this.classList, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: undefined, isFieldset: false }, h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, h("slot", { name: "item-2" })))));
+    return (h(MgInput, { identifier: this.identifier, classCollection: this.classCollection, ariaDescribedbyIDs: [], label: this.label, labelOnTop: this.labelOnTop, labelHide: this.labelHide, required: undefined, readonly: undefined, mgWidth: undefined, disabled: this.disabled, value: this.value, readonlyValue: undefined, tooltip: !this.readonly && this.tooltip, helpText: this.helpText, errorMessage: undefined, isFieldset: false }, h("button", { type: "button", role: "switch", "aria-checked": this.checked.toString(), "aria-readonly": this.disabled || this.readonly, id: this.identifier, class: "mg-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-input__toggle-item-container" }, h("slot", { name: "item-2" })))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -202,7 +194,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "disabled": [4],
     "tooltip": [1],
     "helpText": [1, "help-text"],
-    "classList": [32],
+    "classCollection": [32],
     "options": [32],
     "checked": [32]
   }]);

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

@@ -11,9 +11,8 @@ import { d as defineCustomElement$2 } from './mg-popover2.js';
 
 /**
  * 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';
 var OverflowBehaviorElements;
@@ -30,8 +29,6 @@ class OverflowBehavior {
      **********/
     /**
      * Disconnect ResizeObserver
-     *
-     * @returns {void}
      */
     this.disconnect = () => {
       this._resizeObserver.disconnect();
@@ -41,9 +38,7 @@ 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) {
@@ -66,16 +61,13 @@ 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();
@@ -94,11 +86,10 @@ 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))
@@ -110,17 +101,14 @@ 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));
@@ -133,10 +121,8 @@ 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)
@@ -146,8 +132,6 @@ class OverflowBehavior {
     };
     /**
      * Remove hidden attributes on all items
-     *
-     * @returns {void}
      */
     this.restoreItems = () => {
       [...this._baseChildren, this._moreElement].forEach(item => item.removeAttribute('hidden'));
@@ -181,8 +165,7 @@ const MgItemMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
      ***********/
     /**
      * render mg-item-more overflow element
-     *
-     * @returns {HTMLMgItemMoreElement} mg-item-more element
+     * @returns mg-item-more element
      */
     this.renderMgMenuItemOverflowElement = () => {
       // create menu items proxy element from item clones
@@ -231,16 +214,12 @@ const MgItemMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
    *************/
   /**
    * Disconnect overflow ResizeObserver
-   *
-   * @returns {void} run overflow resize obeserver disconnexion
    */
   disconnectedCallback() {
     this.overflowBehavior.disconnect();
   }
   /**
    * Set variables and validate props
-   *
-   * @returns {void}
    */
   componentWillLoad() {
     // init variables
@@ -254,16 +233,13 @@ const MgItemMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   }
   /**
    * Add overflow behavior
-   *
-   * @returns {void}
    */
   componentDidLoad() {
     this.overflowBehavior = new OverflowBehavior(this.parentMenu, this.renderMgMenuItemOverflowElement);
   }
   /**
    * Render
-   *
-   * @returns {HTMLElement} HTML Element
+   * @returns HTML Element
    */
   render() {
     return (h(Host, { role: "menuitem", "aria-haspopup": "true" }, h("mg-menu-item", { "data-overflow-more": true, "data-size": this.parentMenu.size }, h("mg-icon", { icon: this.icon.icon, slot: "image" }), h("span", { class: { 'sr-only': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.moreLabel, size: this.size }))));