@mgdis/mg-components 5.17.0 → 5.19.0

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { M as MgInput } from './MgInput.js';
-import { C as ClassList } from './components.utils.js';
+import { C as ClassList, i as isValidString } from './components.utils.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$6 } from './mg-character-left2.js';
 import { d as defineCustomElement$5 } from './mg-icon2.js';
@@ -8,7 +8,7 @@ import { d as defineCustomElement$4 } from './mg-input-title2.js';
 import { d as defineCustomElement$3 } from './mg-tooltip2.js';
 import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
 
-const mgInputTextareaCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle,.mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.mg-input__box{padding:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2) var(--mg-inputs-spacer);height:var(--default-size);box-sizing:border-box;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));font-family:inherit;color:hsl(var(--color-dark));font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-input__box:focus{box-shadow:0 0 0.6rem hsl(var(--mg-inputs-color-shadow-focus-hsl), 0.5)}.mg-input__box:disabled{opacity:0.3}.mg-input.mg-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0;}.mg-input.mg-input--is-input-group-append .mg-input__box{margin-right:-0.1rem;border-top-right-radius:0;border-bottom-right-radius:0}.mg-input.mg-input--is-input-group-append .mg-input__box:focus-visible{outline-style:solid;outline-offset:-0.2rem;outline-width:0.2rem}.mg-input.mg-input--is-input-group-append.mg-input--readonly slot[name=append-input]{display:none}.mg-input.mg-input--label-on-top .mg-input__box{width:auto;max-width:100%}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-input.mg-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-input.mg-input--is-append-input-slot-content:not(.mg-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input.mg-input--width-full:not(.mg-input--label-on-top){justify-content:space-between}.mg-input.mg-input--width-full.mg-input--label-on-top .mg-input__box{width:100%}.mg-input.mg-input--width-full .mg-input__input-container{flex:auto;width:100%}.mg-input.mg-input--width-full .mg-input__input-container .mg-input__box{max-width:100%}.mg-input:not(.mg-input--label-on-top) .mg-input__box{width:100%;max-width:calc(17.7rem + var(--mg-inputs-spacer) * 2);min-width:5rem}.mg-input.mg-input--width-16 .mg-input__input-container{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__input{width:100%;max-width:21rem}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__with-character-left{width:100%}.mg-input.mg-input--width-16 .mg-input__input-container .mg-input__box{max-width:21rem;min-width:100%}.mg-input.mg-input--width-4 .mg-input__input-container .mg-input__box{max-width:7rem}.mg-input.mg-input--width-2 .mg-input__input-container .mg-input__box{max-width:5rem}.mg-input mg-character-left{opacity:0.6;font-size:1.1rem}.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__help-text,.mg-input.mg-input--has-display-character-left .mg-input__input+.mg-input__error{margin-top:0}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-input .mg-input__box{display:block;height:auto;resize:none}.mg-input .mg-input__box.mg-input__box--resizable{resize:both}.mg-input .mg-input__box.mg-input__box--resizable-horizontal{resize:horizontal}.mg-input .mg-input__box.mg-input__box--resizable-vertical{resize:vertical}.mg-input__with-character-left{width:100%}.mg-input__with-character-left mg-character-left{display:block;visibility:hidden;margin-top:0.2rem;text-align:end}.mg-input.is-focused .mg-input__with-character-left mg-character-left{visibility:visible}@-moz-document url-prefix(){.mg-input__box{overflow-x:hidden}}";
+const mgInputTextareaCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)*var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto;max-width:100%}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left:0;--mg-button-border-radius-bottom-left:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--is-input-group-append.mg-c-input--readonly slot[name=append-input]{display:none}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right:0;--mg-button-border-radius-bottom-right:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width:0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right:var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right:var(--mg-inputs-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input:not(.mg-c-input--label-on-top) .mg-c-input__box{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:space-between}.mg-c-input.mg-c-input--width-full.mg-c-input--label-on-top .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container{width:100%;flex:auto}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container .mg-c-input__box{max-width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__input{width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__with-character-left{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__box{min-width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__input-container .mg-c-input__box{max-width:7rem}.mg-c-input.mg-c-input--width-2 .mg-c-input__input-container .mg-c-input__box{max-width:5rem}.mg-c-input mg-character-left{font-size:1.1rem;opacity:.6}.mg-c-input.mg-c-input--has-display-character-left .mg-c-input__input+.mg-c-input__help-text,.mg-c-input.mg-c-input--has-display-character-left .mg-c-input__input+.mg-c-input__error{margin-top:0}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__box{display:block;height:auto;resize:none}.mg-c-input__box.mg-c-input__box--resizable{resize:both}.mg-c-input__box.mg-c-input__box--resizable-horizontal{resize:horizontal}.mg-c-input__box.mg-c-input__box--resizable-vertical{resize:vertical}.mg-c-input__with-character-left{width:100%}.mg-c-input__with-character-left mg-character-left{display:block;margin-top:.2rem;text-align:end;visibility:hidden}.mg-c-input.mg-u-is-focused .mg-c-input__with-character-left mg-character-left{visibility:visible}@-moz-document url-prefix(){.mg-c-input__box{overflow-x:hidden}}";
 
 const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea extends HTMLElement {
   constructor() {
@@ -21,8 +21,8 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea
      * Internal *
      ************/
     // Classes
-    this.classFocus = 'is-focused';
-    this.classHasDisplayCharacterLeft = 'mg-input--has-display-character-left';
+    this.classFocus = 'mg-u-is-focused';
+    this.classHasDisplayCharacterLeft = 'mg-c-input--has-display-character-left';
     // hasDisplayedError (triggered by blur event)
     this.hasDisplayedError = false;
     /**
@@ -63,35 +63,27 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea
      */
     this.checkValidity = () => {
       var _a;
-      this.valid = this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined && this.input.checkValidity() && this.getPatternValidity());
-      this.invalid = !this.valid;
-      // We need to send valid event even if it is the same value
-      this.inputValid.emit(this.valid);
+      this.setValidity(this.readonly || this.disabled || (((_a = this.input) === null || _a === void 0 ? void 0 : _a.checkValidity) !== undefined && this.input.checkValidity() && this.getPatternValidity()));
     };
     /**
      * Set input error message
+     * @param errorMessage - errorMessage override
      */
-    this.setErrorMessage = () => {
+    this.setErrorMessage = (errorMessage) => {
       // Set error message
       this.errorMessage = undefined;
       // Does not match pattern
-      if (!this.valid && !this.getPatternValidity()) {
-        this.errorMessage = this.patternErrorMessage;
-      }
-      // required
-      else if (!this.valid && this.input.validity.valueMissing) {
-        this.errorMessage = this.messages.errors.required;
-      }
-    };
-    /**
-     * Validate pattern configuration
-     */
-    this.validatePattern = () => {
-      if (this.pattern !== undefined &&
-        typeof this.pattern === 'string' &&
-        this.pattern !== '' &&
-        (this.patternErrorMessage === undefined || typeof this.patternErrorMessage !== 'string' || this.patternErrorMessage === '')) {
-        throw new Error('<mg-input-textarea> prop "pattern" must be paired with the prop "patternErrorMessage"');
+      if (!this.valid) {
+        if (errorMessage !== undefined) {
+          this.errorMessage = errorMessage;
+        }
+        else if (!this.getPatternValidity()) {
+          this.errorMessage = this.patternErrorMessage;
+        }
+        // required
+        else if (this.input.validity.valueMissing) {
+          this.errorMessage = this.messages.errors.required;
+        }
       }
     };
     this.value = undefined;
@@ -115,7 +107,7 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea
     this.valid = undefined;
     this.invalid = undefined;
     this.resizable = 'none';
-    this.classCollection = new ClassList(['mg-input--textarea']);
+    this.classCollection = new ClassList(['mg-c-input--textarea']);
     this.errorMessage = undefined;
   }
   handleValue(newValue) {
@@ -132,6 +124,11 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea
       }
     }
   }
+  validatePattern(newValue) {
+    if (newValue !== undefined && !(isValidString(this.pattern) && isValidString(this.patternErrorMessage))) {
+      throw new Error('<mg-input-textarea> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
+    }
+  }
   validateDisplayCharacterLeft(newValue) {
     if (newValue) {
       this.classCollection.add(this.classHasDisplayCharacterLeft);
@@ -141,13 +138,44 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea
     }
   }
   /**
-   * Public method to display errors
+   * Display input error if it exists.
    */
   async displayError() {
     this.checkValidity();
     this.setErrorMessage();
     this.hasDisplayedError = this.invalid;
   }
+  /**
+   * Set an error and display a custom error message.
+   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.
+   * It must be paired with an error message to display for the given context.
+   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.
+   * @param valid - value indicating the validity
+   * @param errorMessage - the error message to display
+   */
+  async setError(valid, errorMessage) {
+    if (typeof valid !== 'boolean') {
+      throw new Error('<mg-input-textarea> method "setError()" param "valid" must be a boolean');
+    }
+    else if (!isValidString(errorMessage)) {
+      throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string');
+    }
+    else {
+      this.setValidity(valid);
+      this.setErrorMessage(valid ? undefined : errorMessage);
+      this.hasDisplayedError = this.invalid;
+    }
+  }
+  /**
+   * Method to set validity values
+   * @param newValue - valid new value
+   */
+  setValidity(newValue) {
+    this.valid = newValue;
+    this.invalid = !this.valid;
+    // We need to send valid event even if it is the same value
+    this.inputValid.emit(this.valid);
+  }
   /*************
    * Lifecycle *
    *************/
@@ -161,7 +189,8 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea
     this.characterLeftId = `${this.identifier}-character-left`;
     // Validate
     this.validateDisplayCharacterLeft(this.displayCharacterLeft);
-    this.validatePattern();
+    this.validatePattern(this.pattern);
+    this.validatePattern(this.patternErrorMessage);
     // Check validity when component is ready
     // return a promise to process action only in the FIRST render().
     // https://stenciljs.com/docs/component-lifecycle#componentwillload
@@ -174,11 +203,11 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea
    * @returns HTML Element
    */
   render() {
-    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',
-        'mg-input__box--resizable-vertical': this.resizable === 'vertical',
+    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-c-input__with-character-left" }, h("textarea", { class: {
+        'mg-c-input__box': true,
+        'mg-c-input__box--resizable': this.resizable === 'both',
+        'mg-c-input__box--resizable-horizontal': this.resizable === 'horizontal',
+        'mg-c-input__box--resizable-vertical': this.resizable === 'vertical',
       }, value: this.value, id: this.identifier, name: this.name, placeholder: this.placeholder, title: this.placeholder, rows: this.rows, maxlength: this.maxlength, disabled: this.disabled, required: this.required, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
         if (el !== null)
           this.input = el;
@@ -190,6 +219,8 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea
     "required": ["handleValidityChange"],
     "readonly": ["handleValidityChange"],
     "disabled": ["handleValidityChange"],
+    "pattern": ["validatePattern"],
+    "patternErrorMessage": ["validatePattern"],
     "displayCharacterLeft": ["validateDisplayCharacterLeft"]
   }; }
   static get style() { return mgInputTextareaCss; }
@@ -217,12 +248,15 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea
     "resizable": [1],
     "classCollection": [32],
     "errorMessage": [32],
-    "displayError": [64]
+    "displayError": [64],
+    "setError": [64]
   }, undefined, {
     "value": ["handleValue"],
     "required": ["handleValidityChange"],
     "readonly": ["handleValidityChange"],
     "disabled": ["handleValidityChange"],
+    "pattern": ["validatePattern"],
+    "patternErrorMessage": ["validatePattern"],
     "displayCharacterLeft": ["validateDisplayCharacterLeft"]
   }]);
 function defineCustomElement$1() {

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

@@ -1 +1 @@
-{"file":"mg-input-textarea.js","mappings":"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","names":["MgInputTextarea"],"sources":["src/components/molecules/inputs/mg-input-textarea/mg-input-textarea.scss?tag=mg-input-textarea&encapsulation=shadow","src/components/molecules/inputs/mg-input-textarea/mg-input-textarea.tsx"],"sourcesContent":["@use '../styles/mg-input.scss';\n@use '../styles/mg-input-box.scss';\n@use '../styles/mg-input-width.scss';\n@use '../styles/mg-input-character-left.scss';\n@use '../../../../styles/a11y.scss';\n\n/* Component Custom Style */\n.mg-input {\n  .mg-input__box {\n    display: block;\n    height: auto;\n    resize: none;\n    &.mg-input__box--resizable {\n      resize: both;\n    }\n    &.mg-input__box--resizable-horizontal {\n      resize: horizontal;\n    }\n    &.mg-input__box--resizable-vertical {\n      resize: vertical;\n    }\n  }\n}\n\n/**\n  * Character left\n  */\n\n.mg-input__with-character-left {\n  width: 100%;\n\n  mg-character-left {\n    display: block;\n    visibility: hidden;\n    margin-top: 0.2rem;\n    text-align: end;\n\n    .mg-input.is-focused & {\n      visibility: visible;\n    }\n  }\n}\n\n/* Firefox selector */\n@-moz-document url-prefix() {\n  .mg-input__box {\n    overflow-x: hidden; // remove Firefox bottom \"phantom scrollbar\" in textarea\n  }\n}\n","import { Component, Element, Event, h, Prop, EventEmitter, State, Method, Watch } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { Width } from '../MgInput.conf';\nimport { ClassList } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n  tag: 'mg-input-textarea',\n  styleUrl: 'mg-input-textarea.scss',\n  shadow: true,\n})\nexport class MgInputTextarea {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private classFocus = 'is-focused';\n  private classHasDisplayCharacterLeft = 'mg-input--has-display-character-left';\n\n  // IDs\n  private characterLeftId;\n\n  // HTML selector\n  private input: HTMLTextAreaElement;\n\n  // Locales\n  private messages;\n\n  // hasDisplayedError (triggered by blur event)\n  private hasDisplayedError = false;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputTextareaElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true, reflect: true }) value: string;\n  @Watch('value')\n  handleValue(newValue: string): void {\n    this.checkValidity();\n    this.valueChange.emit(newValue);\n  }\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier!: string;\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop: boolean;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Input placeholder.\n   * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Input max length\n   */\n  @Prop() maxlength = 4000;\n\n  /**\n   * Define if input is required\n   */\n  @Prop() required = false;\n\n  /**\n   * Define if input is readonly\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('required')\n  @Watch('readonly')\n  @Watch('disabled')\n  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n    if (this.input !== undefined) {\n      this.input[prop] = newValue;\n      this.checkValidity();\n      if (this.hasDisplayedError) {\n        this.setErrorMessage();\n        this.hasDisplayedError = false;\n      }\n    }\n  }\n\n  /**\n   * Define input width\n   */\n  @Prop() mgWidth: Width = 'full';\n\n  /**\n   * Define input pattern to validate\n   */\n  @Prop() pattern: string;\n\n  /**\n   * Define input pattern error message\n   */\n  @Prop() patternErrorMessage: string;\n\n  /**\n   * Define the number of visible text lines for the control\n   */\n  @Prop() rows = 3;\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip: string;\n\n  /**\n   * Define if component should display character left\n   */\n  @Prop() displayCharacterLeft = true;\n  @Watch('displayCharacterLeft')\n  validateDisplayCharacterLeft(newValue: boolean): void {\n    if (newValue) {\n      this.classCollection.add(this.classHasDisplayCharacterLeft);\n    } else {\n      this.classCollection.delete(this.classHasDisplayCharacterLeft);\n    }\n  }\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   */\n  @Prop() helpText: string;\n\n  /**\n   * Define input valid state\n   */\n  @Prop({ mutable: true }) valid: boolean;\n\n  /**\n   * Define input invalid state\n   */\n  @Prop({ mutable: true }) invalid: boolean;\n\n  /**\n   * Define if input is resizable\n   */\n  @Prop() resizable: 'none' | 'both' | 'horizontal' | 'vertical' = 'none';\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-input--textarea']);\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Emited event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<string>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n  /**\n   * Public method to display errors\n   */\n  @Method()\n  async displayError(): Promise<void> {\n    this.checkValidity();\n    this.setErrorMessage();\n    this.hasDisplayedError = this.invalid;\n  }\n\n  /**\n   * Handle input event\n   */\n  private handleInput = (): void => {\n    if (this.hasDisplayedError) {\n      this.checkValidity();\n      this.setErrorMessage();\n    }\n    this.value = this.input.value;\n  };\n\n  /**\n   * Handle focus event\n   */\n  private handleFocus = (): void => {\n    this.classCollection.add(this.classFocus);\n    this.classCollection = new ClassList(this.classCollection.classes);\n  };\n\n  /**\n   * Handle blur event\n   */\n  private handleBlur = (): void => {\n    // Manage focus\n    this.classCollection.delete(this.classFocus);\n    this.classCollection = new ClassList(this.classCollection.classes);\n    // Display Error\n    this.displayError();\n  };\n\n  /**\n   * Get pattern validity\n   * Pattern is not defined on textarea field: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea\n   * @returns is pattern valid\n   */\n  private getPatternValidity = (): boolean => this.pattern === undefined || new RegExp(`^${this.pattern}$`, 'u').test(this.value);\n\n  /**\n   * Check if input is valid\n   */\n  private checkValidity = (): void => {\n    this.valid = this.readonly || this.disabled || (this.input?.checkValidity !== undefined && this.input.checkValidity() && this.getPatternValidity());\n    this.invalid = !this.valid;\n    // We need to send valid event even if it is the same value\n    this.inputValid.emit(this.valid);\n  };\n\n  /**\n   * Set input error message\n   */\n  private setErrorMessage = (): void => {\n    // Set error message\n    this.errorMessage = undefined;\n    // Does not match pattern\n    if (!this.valid && !this.getPatternValidity()) {\n      this.errorMessage = this.patternErrorMessage;\n    }\n    // required\n    else if (!this.valid && this.input.validity.valueMissing) {\n      this.errorMessage = this.messages.errors.required;\n    }\n  };\n\n  /**\n   * Validate pattern configuration\n   */\n  private validatePattern = (): void => {\n    if (\n      this.pattern !== undefined &&\n      typeof this.pattern === 'string' &&\n      this.pattern !== '' &&\n      (this.patternErrorMessage === undefined || typeof this.patternErrorMessage !== 'string' || this.patternErrorMessage === '')\n    ) {\n      throw new Error('<mg-input-textarea> prop \"pattern\" must be paired with the prop \"patternErrorMessage\"');\n    }\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   * @returns timeout\n   */\n  componentWillLoad(): ReturnType<typeof setTimeout> {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    this.characterLeftId = `${this.identifier}-character-left`;\n    // Validate\n    this.validateDisplayCharacterLeft(this.displayCharacterLeft);\n    this.validatePattern();\n    // Check validity when component is ready\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      this.checkValidity();\n    }, 0);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <MgInput\n        identifier={this.identifier}\n        classCollection={this.classCollection}\n        ariaDescribedbyIDs={[this.characterLeftId]}\n        label={this.label}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={this.required}\n        readonly={this.readonly}\n        mgWidth={this.mgWidth}\n        disabled={this.disabled}\n        value={this.value}\n        readonlyValue={undefined}\n        tooltip={this.tooltip}\n        helpText={this.helpText}\n        errorMessage={this.errorMessage}\n        isFieldset={false}\n      >\n        <div class=\"mg-input__with-character-left\">\n          <textarea\n            class={{\n              'mg-input__box': true,\n              'mg-input__box--resizable': this.resizable === 'both',\n              'mg-input__box--resizable-horizontal': this.resizable === 'horizontal',\n              'mg-input__box--resizable-vertical': this.resizable === 'vertical',\n            }}\n            value={this.value}\n            id={this.identifier}\n            name={this.name}\n            placeholder={this.placeholder}\n            title={this.placeholder}\n            rows={this.rows}\n            maxlength={this.maxlength}\n            disabled={this.disabled}\n            required={this.required}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n            ref={(el: HTMLTextAreaElement) => {\n              if (el !== null) this.input = el;\n            }}\n          ></textarea>\n          {this.displayCharacterLeft && this.maxlength > 0 && (\n            <mg-character-left identifier={this.characterLeftId} characters={this.value} maxlength={this.maxlength}></mg-character-left>\n          )}\n        </div>\n      </MgInput>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-input-textarea.js","mappings":"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","names":["MgInputTextarea"],"sources":["../styles/dist/components/mg-input-textarea.css?tag=mg-input-textarea&encapsulation=shadow","src/components/molecules/inputs/mg-input-textarea/mg-input-textarea.tsx"],"sourcesContent":[":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-c-input__box{height:var(--default-size);box-sizing:border-box;padding:calc((var(--default-size) - var(--font-size)*var(--line-height))/2) var(--mg-inputs-spacer);border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:var(--mg-inputs-border-radius);background-color:hsl(var(--color-light));color:hsl(var(--color-dark));font-family:inherit;font-size:var(--font-size);text-align:var(--mg-inputs-text-align, left)}.mg-c-input__box::placeholder{color:var(--mg-inputs-color);font-style:italic}.mg-c-input__box:focus{box-shadow:0 0 .6rem hsl(var(--mg-inputs-color-shadow-focus-hsl)/50%)}.mg-c-input__box:disabled{opacity:.3}.mg-c-input.mg-c-input--label-on-top .mg-c-input__box{width:auto;max-width:100%}.mg-c-input.mg-c-input--is-input-group-append{--mg-button-border-radius-top-left: 0;--mg-button-border-radius-bottom-left: 0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box{margin-right:-0.1rem;border-bottom-right-radius:0;border-top-right-radius:0}.mg-c-input.mg-c-input--is-input-group-append .mg-c-input__box:focus-visible{outline-offset:-0.2rem;outline-style:solid;outline-width:.2rem}.mg-c-input.mg-c-input--is-input-group-append.mg-c-input--readonly slot[name=append-input]{display:none}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]){--mg-button-border-radius-top-right: 0;--mg-button-border-radius-bottom-right: 0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:not(:last-of-type)){--mg-button-border-right-width: 0}.mg-c-input.mg-c-input--has-buttons-group-append ::slotted([slot=append-input]:last-of-type){--mg-button-border-radius-top-right: var(--mg-inputs-border-radius);--mg-button-border-radius-bottom-right: var(--mg-inputs-border-radius)}.mg-c-input.mg-c-input--is-append-input-slot-content:not(.mg-c-input--readonly) ::slotted([slot=append-input]){padding-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input:not(.mg-c-input--label-on-top) .mg-c-input__box{width:100%;min-width:5rem;max-width:calc(17.7rem + var(--mg-inputs-spacer)*2)}.mg-c-input.mg-c-input--width-full:not(.mg-c-input--label-on-top){justify-content:space-between}.mg-c-input.mg-c-input--width-full.mg-c-input--label-on-top .mg-c-input__box{width:100%}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container{width:100%;flex:auto}.mg-c-input.mg-c-input--width-full .mg-c-input__input-container .mg-c-input__box{max-width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__input{width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__with-character-left{width:100%}.mg-c-input.mg-c-input--width-16 .mg-c-input__input-container .mg-c-input__box{min-width:100%;max-width:21rem}.mg-c-input.mg-c-input--width-4 .mg-c-input__input-container .mg-c-input__box{max-width:7rem}.mg-c-input.mg-c-input--width-2 .mg-c-input__input-container .mg-c-input__box{max-width:5rem}.mg-c-input mg-character-left{font-size:1.1rem;opacity:.6}.mg-c-input.mg-c-input--has-display-character-left .mg-c-input__input+.mg-c-input__help-text,.mg-c-input.mg-c-input--has-display-character-left .mg-c-input__input+.mg-c-input__error{margin-top:0}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__box{display:block;height:auto;resize:none}.mg-c-input__box.mg-c-input__box--resizable{resize:both}.mg-c-input__box.mg-c-input__box--resizable-horizontal{resize:horizontal}.mg-c-input__box.mg-c-input__box--resizable-vertical{resize:vertical}.mg-c-input__with-character-left{width:100%}.mg-c-input__with-character-left mg-character-left{display:block;margin-top:.2rem;text-align:end;visibility:hidden}.mg-c-input.mg-u-is-focused .mg-c-input__with-character-left mg-character-left{visibility:visible}@-moz-document url-prefix(){.mg-c-input__box{overflow-x:hidden}}/*# sourceMappingURL=mg-input-textarea.css.map */\n","import { Component, Element, Event, h, Prop, EventEmitter, State, Method, Watch } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { Width } from '../MgInput.conf';\nimport { ClassList, isValidString } from '../../../../utils/components.utils';\nimport { initLocales } from '../../../../locales';\n\n@Component({\n  tag: 'mg-input-textarea',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-textarea.css',\n  shadow: true,\n})\nexport class MgInputTextarea {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private classFocus = 'mg-u-is-focused';\n  private classHasDisplayCharacterLeft = 'mg-c-input--has-display-character-left';\n\n  // IDs\n  private characterLeftId;\n\n  // HTML selector\n  private input: HTMLTextAreaElement;\n\n  // Locales\n  private messages;\n\n  // hasDisplayedError (triggered by blur event)\n  private hasDisplayedError = false;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputTextareaElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true, reflect: true }) value: string;\n  @Watch('value')\n  handleValue(newValue: string): void {\n    this.checkValidity();\n    this.valueChange.emit(newValue);\n  }\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier!: string;\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop: boolean;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Input placeholder.\n   * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Input max length\n   */\n  @Prop() maxlength = 4000;\n\n  /**\n   * Define if input is required\n   */\n  @Prop() required = false;\n\n  /**\n   * Define if input is readonly\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('required')\n  @Watch('readonly')\n  @Watch('disabled')\n  handleValidityChange(newValue: boolean, _oldValue: boolean, prop: string): void {\n    if (this.input !== undefined) {\n      this.input[prop] = newValue;\n      this.checkValidity();\n      if (this.hasDisplayedError) {\n        this.setErrorMessage();\n        this.hasDisplayedError = false;\n      }\n    }\n  }\n\n  /**\n   * Define input width\n   */\n  @Prop() mgWidth: Width = 'full';\n\n  /**\n   * Define input pattern to validate\n   */\n  @Prop() pattern: string;\n\n  /**\n   * Define input pattern error message\n   */\n  @Prop() patternErrorMessage: string;\n  @Watch('pattern')\n  @Watch('patternErrorMessage')\n  validatePattern(newValue: string): void {\n    if (newValue !== undefined && !(isValidString(this.pattern) && isValidString(this.patternErrorMessage))) {\n      throw new Error('<mg-input-textarea> props \"pattern\" and \"patternErrorMessage\" must be non-empty string and paired.');\n    }\n  }\n\n  /**\n   * Define the number of visible text lines for the control\n   */\n  @Prop() rows = 3;\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip: string;\n\n  /**\n   * Define if component should display character left\n   */\n  @Prop() displayCharacterLeft = true;\n  @Watch('displayCharacterLeft')\n  validateDisplayCharacterLeft(newValue: boolean): void {\n    if (newValue) {\n      this.classCollection.add(this.classHasDisplayCharacterLeft);\n    } else {\n      this.classCollection.delete(this.classHasDisplayCharacterLeft);\n    }\n  }\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   */\n  @Prop() helpText: string;\n\n  /**\n   * Define input valid state\n   */\n  @Prop({ mutable: true }) valid: boolean;\n\n  /**\n   * Define input invalid state\n   */\n  @Prop({ mutable: true }) invalid: boolean;\n\n  /**\n   * Define if input is resizable\n   */\n  @Prop() resizable: 'none' | 'both' | 'horizontal' | 'vertical' = 'none';\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-input--textarea']);\n\n  /**\n   * Error message to display\n   */\n  @State() errorMessage: string;\n\n  /**\n   * Emited event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<string>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n  /**\n   * Display input error if it exists.\n   */\n  @Method()\n  async displayError(): Promise<void> {\n    this.checkValidity();\n    this.setErrorMessage();\n    this.hasDisplayedError = this.invalid;\n  }\n\n  /**\n   * Set an error and display a custom error message.\n   * This method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\n   * It must be paired with an error message to display for the given context.\n   * When used to set validity to `false`, you should use this method again to reset the validity to `true`.\n   * @param valid - value indicating the validity\n   * @param errorMessage - the error message to display\n   */\n  @Method()\n  async setError(valid: MgInputTextarea['valid'], errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-textarea> method \"setError()\" param \"valid\" must be a boolean');\n    } else if (!isValidString(errorMessage)) {\n      throw new Error('<mg-input-textarea> method \"setError()\" param \"errorMessage\" must be a string');\n    } else {\n      this.setValidity(valid);\n      this.setErrorMessage(valid ? undefined : errorMessage);\n      this.hasDisplayedError = this.invalid;\n    }\n  }\n\n  /**\n   * Method to set validity values\n   * @param newValue - valid new value\n   */\n  private setValidity(newValue: MgInputTextarea['valid']) {\n    this.valid = newValue;\n    this.invalid = !this.valid;\n    // We need to send valid event even if it is the same value\n    this.inputValid.emit(this.valid);\n  }\n  /**\n   * Handle input event\n   */\n  private handleInput = (): void => {\n    if (this.hasDisplayedError) {\n      this.checkValidity();\n      this.setErrorMessage();\n    }\n    this.value = this.input.value;\n  };\n\n  /**\n   * Handle focus event\n   */\n  private handleFocus = (): void => {\n    this.classCollection.add(this.classFocus);\n    this.classCollection = new ClassList(this.classCollection.classes);\n  };\n\n  /**\n   * Handle blur event\n   */\n  private handleBlur = (): void => {\n    // Manage focus\n    this.classCollection.delete(this.classFocus);\n    this.classCollection = new ClassList(this.classCollection.classes);\n    // Display Error\n    this.displayError();\n  };\n\n  /**\n   * Get pattern validity\n   * Pattern is not defined on textarea field: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Textarea\n   * @returns is pattern valid\n   */\n  private getPatternValidity = (): boolean => this.pattern === undefined || new RegExp(`^${this.pattern}$`, 'u').test(this.value);\n\n  /**\n   * Check if input is valid\n   */\n  private checkValidity = (): void => {\n    this.setValidity(this.readonly || this.disabled || (this.input?.checkValidity !== undefined && this.input.checkValidity() && this.getPatternValidity()));\n  };\n\n  /**\n   * Set input error message\n   * @param errorMessage - errorMessage override\n   */\n  private setErrorMessage = (errorMessage?: string): void => {\n    // Set error message\n    this.errorMessage = undefined;\n    // Does not match pattern\n    if (!this.valid) {\n      if (errorMessage !== undefined) {\n        this.errorMessage = errorMessage;\n      } else if (!this.getPatternValidity()) {\n        this.errorMessage = this.patternErrorMessage;\n      }\n      // required\n      else if (this.input.validity.valueMissing) {\n        this.errorMessage = this.messages.errors.required;\n      }\n    }\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   * @returns timeout\n   */\n  componentWillLoad(): ReturnType<typeof setTimeout> {\n    // Get locales\n    this.messages = initLocales(this.element).messages;\n    this.characterLeftId = `${this.identifier}-character-left`;\n    // Validate\n    this.validateDisplayCharacterLeft(this.displayCharacterLeft);\n    this.validatePattern(this.pattern);\n    this.validatePattern(this.patternErrorMessage);\n    // Check validity when component is ready\n    // return a promise to process action only in the FIRST render().\n    // https://stenciljs.com/docs/component-lifecycle#componentwillload\n    return setTimeout(() => {\n      this.checkValidity();\n    }, 0);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <MgInput\n        identifier={this.identifier}\n        classCollection={this.classCollection}\n        ariaDescribedbyIDs={[this.characterLeftId]}\n        label={this.label}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={this.required}\n        readonly={this.readonly}\n        mgWidth={this.mgWidth}\n        disabled={this.disabled}\n        value={this.value}\n        readonlyValue={undefined}\n        tooltip={this.tooltip}\n        helpText={this.helpText}\n        errorMessage={this.errorMessage}\n        isFieldset={false}\n      >\n        <div class=\"mg-c-input__with-character-left\">\n          <textarea\n            class={{\n              'mg-c-input__box': true,\n              'mg-c-input__box--resizable': this.resizable === 'both',\n              'mg-c-input__box--resizable-horizontal': this.resizable === 'horizontal',\n              'mg-c-input__box--resizable-vertical': this.resizable === 'vertical',\n            }}\n            value={this.value}\n            id={this.identifier}\n            name={this.name}\n            placeholder={this.placeholder}\n            title={this.placeholder}\n            rows={this.rows}\n            maxlength={this.maxlength}\n            disabled={this.disabled}\n            required={this.required}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n            ref={(el: HTMLTextAreaElement) => {\n              if (el !== null) this.input = el;\n            }}\n          ></textarea>\n          {this.displayCharacterLeft && this.maxlength > 0 && (\n            <mg-character-left identifier={this.characterLeftId} characters={this.value} maxlength={this.maxlength}></mg-character-left>\n          )}\n        </div>\n      </MgInput>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { i as isValidString } from './components.utils.js';
 
-const mgInputTitleCss = ".is-asterisk.sc-mg-input-title{color:hsl(var(--color-danger))}legend.mg-input-title.sc-mg-input-title{padding-left:0;padding-right:0}.mg-input-title__required.sc-mg-input-title{display:var(--mg-input-title-display, unset)}";
+const mgInputTitleCss = ".mg-u-is-asterisk.sc-mg-input-title{color:hsl(var(--color-danger))}legend.mg-c-input-title.sc-mg-input-title{padding-right:0;padding-left:0}.mg-c-input-title__required.sc-mg-input-title{display:var(--mg-input-title-display, unset)}";
 
 const MgInputTitle = /*@__PURE__*/ proxyCustomElement(class MgInputTitle extends HTMLElement {
   constructor() {
@@ -12,7 +13,7 @@ const MgInputTitle = /*@__PURE__*/ proxyCustomElement(class MgInputTitle extends
     this.tagName = 'label';
   }
   validateIdentifier(newValue) {
-    if (typeof newValue !== 'string' || newValue.trim() === '') {
+    if (!isValidString(newValue)) {
       throw new Error('<mg-input-title> prop "identifier" is required.');
     }
   }
@@ -36,7 +37,7 @@ const MgInputTitle = /*@__PURE__*/ proxyCustomElement(class MgInputTitle extends
   render() {
     const TagName = this.tagName;
     // \u00A0 represent a &nbsp;
-    return (h(TagName, { class: "mg-input-title", htmlFor: this.isLegend ? undefined : this.identifier }, h("slot", null), this.required && (h("span", { class: "mg-input-title__required" }, "\u00A0", h("span", { class: "is-asterisk" }, "*")))));
+    return (h(TagName, { class: "mg-c-input-title", htmlFor: this.isLegend ? undefined : this.identifier }, h("slot", null), this.required && (h("span", { class: "mg-c-input-title__required" }, "\u00A0", h("span", { class: "mg-u-is-asterisk" }, "*")))));
   }
   static get watchers() { return {
     "identifier": ["validateIdentifier"],

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

@@ -1 +1 @@
-{"file":"mg-input-title2.js","mappings":";;AAAA,MAAM,eAAe,GAAG,gOAAgO;;MCO3O,YAAY;;;;;;oBAoBJ,KAAK;mBASL,OAAO;;EAvB1B,kBAAkB,CAAC,QAAgB;IACjC,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;MAC1D,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;KACpE;GACF;EAYD,gBAAgB,CAAC,QAAkC;IACjD,IAAI,CAAC,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;GAC9C;;;;;;;EAcD,iBAAiB;IACf,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACzC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACtC;;;;;EAMD,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;;IAE7B,QACE,EAAC,OAAO,IAAC,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,UAAU,IAClF,eAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,YAAM,KAAK,EAAC,0BAA0B,cAC9B,YAAM,KAAK,EAAC,aAAa,QAAS,CACnC,CACR,CACO,EACV;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/atoms/mg-input-title/mg-input-title.scss?tag=mg-input-title&encapsulation=scoped","src/components/atoms/mg-input-title/mg-input-title.tsx"],"sourcesContent":["@use '../../../styles/form.scss';\n\nlegend.mg-input-title {\n  padding-left: 0;\n  padding-right: 0;\n}\n\n.mg-input-title__required {\n  display: var(--mg-input-title-display, unset);\n}\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'mg-input-title',\n  styleUrl: 'mg-input-title.scss',\n  scoped: true,\n})\nexport class MgInputTitle {\n  /**\n   * Label input id\n   */\n  @Prop() identifier!: string;\n  @Watch('identifier')\n  validateIdentifier(newValue: string): void {\n    if (typeof newValue !== 'string' || newValue.trim() === '') {\n      throw new Error('<mg-input-title> prop \"identifier\" is required.');\n    }\n  }\n\n  /**\n   * If input is required an asterisk is added at the end of the label\n   */\n  @Prop() required: boolean;\n\n  /**\n   * Switch from label to fieldset sementic\n   */\n  @Prop() isLegend = false;\n  @Watch('isLegend')\n  validateIsLegend(newValue: MgInputTitle['isLegend']) {\n    this.tagName = newValue ? 'legend' : 'label';\n  }\n\n  /**\n   * Component parent tagname\n   */\n  @State() tagName = 'label';\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Init tag name\n   */\n  componentWillLoad(): void {\n    this.validateIdentifier(this.identifier);\n    this.validateIsLegend(this.isLegend);\n  }\n\n  /**\n   * Render\n   * @returns HTML element\n   */\n  render(): HTMLElement {\n    const TagName = this.tagName;\n    // \\u00A0 represent a &nbsp;\n    return (\n      <TagName class=\"mg-input-title\" htmlFor={this.isLegend ? undefined : this.identifier}>\n        <slot></slot>\n        {this.required && (\n          <span class=\"mg-input-title__required\">\n            &nbsp;<span class=\"is-asterisk\">*</span>\n          </span>\n        )}\n      </TagName>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-input-title2.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,yOAAyO;;MCQpP,YAAY;;;;;;oBAoBJ,KAAK;mBASL,OAAO;;EAvB1B,kBAAkB,CAAC,QAAoC;IACrD,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;MAC5B,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;KACpE;GACF;EAYD,gBAAgB,CAAC,QAAkC;IACjD,IAAI,CAAC,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;GAC9C;;;;;;;EAcD,iBAAiB;IACf,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACzC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACtC;;;;;EAMD,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;;IAE7B,QACE,EAAC,OAAO,IAAC,KAAK,EAAC,kBAAkB,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,UAAU,IACpF,eAAa,EACZ,IAAI,CAAC,QAAQ,KACZ,YAAM,KAAK,EAAC,4BAA4B,cAChC,YAAM,KAAK,EAAC,kBAAkB,QAAS,CACxC,CACR,CACO,EACV;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../styles/dist/components/mg-input-title.css?tag=mg-input-title&encapsulation=scoped","src/components/atoms/mg-input-title/mg-input-title.tsx"],"sourcesContent":[".mg-u-is-asterisk{color:hsl(var(--color-danger))}legend.mg-c-input-title{padding-right:0;padding-left:0}.mg-c-input-title__required{display:var(--mg-input-title-display, unset)}/*# sourceMappingURL=mg-input-title.css.map */\n","import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { isValidString } from '../../../utils/components.utils';\n\n@Component({\n  tag: 'mg-input-title',\n  styleUrl: '../../../../node_modules/@mgdis/styles/dist/components/mg-input-title.css',\n  scoped: true,\n})\nexport class MgInputTitle {\n  /**\n   * Label input id\n   */\n  @Prop() identifier!: string;\n  @Watch('identifier')\n  validateIdentifier(newValue: MgInputTitle['identifier']): void {\n    if (!isValidString(newValue)) {\n      throw new Error('<mg-input-title> prop \"identifier\" is required.');\n    }\n  }\n\n  /**\n   * If input is required an asterisk is added at the end of the label\n   */\n  @Prop() required: boolean;\n\n  /**\n   * Switch from label to fieldset sementic\n   */\n  @Prop() isLegend = false;\n  @Watch('isLegend')\n  validateIsLegend(newValue: MgInputTitle['isLegend']) {\n    this.tagName = newValue ? 'legend' : 'label';\n  }\n\n  /**\n   * Component parent tagname\n   */\n  @State() tagName = 'label';\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Init tag name\n   */\n  componentWillLoad(): void {\n    this.validateIdentifier(this.identifier);\n    this.validateIsLegend(this.isLegend);\n  }\n\n  /**\n   * Render\n   * @returns HTML element\n   */\n  render(): HTMLElement {\n    const TagName = this.tagName;\n    // \\u00A0 represent a &nbsp;\n    return (\n      <TagName class=\"mg-c-input-title\" htmlFor={this.isLegend ? undefined : this.identifier}>\n        <slot></slot>\n        {this.required && (\n          <span class=\"mg-c-input-title__required\">\n            &nbsp;<span class=\"mg-u-is-asterisk\">*</span>\n          </span>\n        )}\n      </TagName>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,12 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { M as MgInput } from './MgInput.js';
-import { C as ClassList, a as allItemsAreString } from './components.utils.js';
+import { C as ClassList, d as allItemsAreString } from './components.utils.js';
 import { d as defineCustomElement$5 } from './mg-icon2.js';
 import { d as defineCustomElement$4 } from './mg-input-title2.js';
 import { d as defineCustomElement$3 } from './mg-tooltip2.js';
 import { d as defineCustomElement$2 } from './mg-tooltip-content2.js';
 
-const mgInputToggleCss = ":host{display:block}.mg-input{display:flex;align-items:flex-start;min-height:var(--default-size);max-width:100%;margin-bottom:var(--mg-inputs-margin-bottom, 0);}.mg-input mg-input-title{flex-shrink:var(--mg-inputs-shrink, 1);width:var(--mg-inputs-title-width, auto);margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-input.mg-input--label-on-top{flex-direction:column}.mg-input.mg-input--label-on-top .mg-input__input-container{width:100%}.mg-input__title{display:flex;align-items:baseline;margin-bottom:0.3rem}.mg-input__title mg-input-title{flex-shrink:1;width:auto;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-input__title mg-tooltip{margin-top:0}.mg-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-input__input-container{min-height:var(--default-size);}.mg-input__input-container>strong{display:inline-block;margin-top:calc((var(--default-size) - var(--font-size) * var(--line-height)) / 2);min-height:var(--font-size)}.mg-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-input__input-container .mg-input__help-text,.mg-input__input-container .mg-input__error{text-align:start;font-size:1.2rem}.mg-input__input{display:flex;}.mg-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size)) / 2)}.mg-input__input.mg-input__input--has-error .mg-input__box{border-color:hsl(var(--color-danger))}.mg-input__input+.mg-input__help-text,.mg-input__input+.mg-input__error{margin-top:0.5rem}.mg-input__input .mg-input__box:disabled,.mg-input__input-group--disabled label,.mg-input.mg-input--toggle-disabled .mg-input__input .mg-input__button-toggle,.mg-input.mg-input--checkbox-multi-disabled .mg-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-input__error{display:inline-block;margin-top:0.2rem;padding:0.3rem 0.8rem;border-radius:0.3rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-input__input mg-icon,.mg-input__error mg-icon{display:flex}.sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}.mg-input.mg-input.mg-input--toggle .mg-input__input-container{flex:auto;min-width:0}.mg-input__button-toggle{display:flex;padding:0.2rem;min-width:0;background-color:hsl(var(--color-light));border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:calc((var(--font-size) * var(--line-height) + 2 * (0.7rem + var(--mg-inputs-border-width))) / var(--mg-input-toggle-border-radius-ratio));font-family:var(--font-family);font-size:inherit;line-height:inherit;cursor:pointer}.mg-input__button-toggle:disabled{cursor:default}.mg-input__toggle-item-container{padding:0.5rem 0.9rem;border:0;box-sizing:border-box;border-radius:calc((var(--font-size) * var(--line-height) + 1rem) / var(--mg-input-toggle-border-radius-ratio));background-color:unset;font-weight:unset;color:hsl(var(--color-dark));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mg-input__toggle-item-container:first-of-type{font-weight:600;color:hsl(var(--color-info));background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%))}.mg-input.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{background-color:unset;font-weight:unset;color:hsl(var(--color-dark))}.mg-input.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type{font-weight:600;color:hsl(var(--color-info));background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%))}.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container{display:flex;justify-content:center;align-items:center;width:calc(var(--font-size) * var(--line-height) + 1rem);height:calc(var(--font-size) * var(--line-height) + 1rem);padding:0;visibility:hidden}.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container:first-of-type{visibility:visible}.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-input.mg-input--toggle-icon.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{visibility:hidden}.mg-input.mg-input--toggle-icon.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type{visibility:visible}.mg-input.mg-input--toggle-on-off .mg-input__toggle-item-container:first-of-type{font-weight:600;color:hsl(var(--color-dark));background-color:hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%))}.mg-input.mg-input--toggle-on-off.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{background-color:unset;font-weight:unset;color:hsl(var(--color-dark))}.mg-input.mg-input--toggle-readonly .mg-input__button-toggle{border-color:transparent;background-color:transparent;cursor:initial}.mg-input.mg-input--toggle-readonly .mg-input__toggle-item-container:last-of-type{display:none}.mg-input.mg-input--toggle-readonly.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type{display:none}.mg-input.mg-input--toggle-readonly.mg-input--toggle-is-active .mg-input__toggle-item-container:last-of-type{display:flex}";
+const mgInputToggleCss = ":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:.5rem .9rem;border:0;border-radius:calc((var(--font-size)*var(--line-height) + 1rem)/var(--mg-input-toggle-border-radius-ratio));background-color:unset;color:hsl(var(--color-dark));font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:.2rem;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:calc((var(--font-size)*var(--line-height) + 2*(.7rem + var(--mg-inputs-border-width)))/var(--mg-input-toggle-border-radius-ratio));background-color:hsl(var(--color-light));cursor:pointer;font-family:var(--font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:hsl(var(--color-dark));font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--font-size)*var(--line-height) + 1rem);height:calc(var(--font-size)*var(--line-height) + 1rem);align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-readonly .mg-c-input__button-toggle{border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0);cursor:initial}.mg-c-input.mg-c-input--toggle-readonly .mg-c-input__toggle-item-container:last-of-type{display:none}.mg-c-input.mg-c-input--toggle-readonly.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{display:none}.mg-c-input.mg-c-input--toggle-readonly.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{display:flex}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%));color:hsl(var(--color-dark));font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:hsl(var(--color-dark));font-weight:unset}";
 
 /**
  * type Option validation function
@@ -25,11 +25,11 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
      * Internal *
      ************/
     // Classes
-    this.classReadonly = 'mg-input--toggle-readonly';
-    this.classDisabled = 'mg-input--toggle-disabled';
-    this.classIsActive = 'mg-input--toggle-is-active';
-    this.classOnOff = 'mg-input--toggle-on-off';
-    this.classIcon = 'mg-input--toggle-icon';
+    this.classReadonly = 'mg-c-input--toggle-readonly';
+    this.classDisabled = 'mg-c-input--toggle-disabled';
+    this.classIsActive = 'mg-c-input--toggle-is-active';
+    this.classOnOff = 'mg-c-input--toggle-on-off';
+    this.classIcon = 'mg-c-input--toggle-icon';
     /**
      * Change checked value
      */
@@ -63,7 +63,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
     this.disabled = false;
     this.tooltip = undefined;
     this.helpText = undefined;
-    this.classCollection = new ClassList(['mg-input--toggle']);
+    this.classCollection = new ClassList(['mg-c-input--toggle']);
     this.options = undefined;
     this.checked = false;
   }
@@ -168,7 +168,7 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
    * @returns HTML Element
    */
   render() {
-    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" })))));
+    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-c-input__button-toggle", disabled: this.disabled || this.readonly, onClick: this.toggleChecked }, h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-1" })), h("span", { "aria-hidden": "true", class: "mg-c-input__toggle-item-container" }, h("slot", { name: "item-2" })))));
   }
   get element() { return this; }
   static get watchers() { return {

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

@@ -1 +1 @@
-{"file":"mg-input-toggle.js","mappings":"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","names":["MgInputToggle"],"sources":["src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.scss?tag=mg-input-toggle&encapsulation=shadow","src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.tsx"],"sourcesContent":["@use '../styles/mg-input.scss';\n@use '../../../../styles/a11y.scss';\n\n/**\n* Toogle\n*/\n\n// variables\n$color-light-blue: hsl(var(--color-info-h) calc(var(--color-info-s) - 64%) calc(var(--color-info-l) + 55%));\n$color-light-dark: hsl(var(--color-dark-h) calc(var(--color-dark-s) - 30%) calc(var(--color-dark-l) + 75%));\n$button-toggle-padding: 0.2rem;\n$toggle-item-container-padding-vertical: 0.5rem;\n\n.mg-input.mg-input.mg-input--toggle .mg-input__input-container {\n  flex: auto;\n  min-width: 0;\n}\n\n.mg-input__button-toggle {\n  // Display\n  display: flex;\n  padding: $button-toggle-padding;\n  min-width: 0;\n  // Decoration\n  background-color: hsl(var(--color-light));\n  border-width: var(--mg-inputs-border-width);\n  border-style: solid;\n  border-color: var(--mg-inputs-color);\n  border-radius: calc(\n    ((var(--font-size) * var(--line-height)) + (2 * ($button-toggle-padding + $toggle-item-container-padding-vertical + var(--mg-inputs-border-width)))) /\n      var(--mg-input-toggle-border-radius-ratio)\n  );\n  // Font\n  font-family: var(--font-family);\n  font-size: inherit;\n  line-height: inherit;\n\n  cursor: pointer;\n  &:disabled {\n    cursor: default;\n  }\n}\n\n.mg-input__toggle-item-container {\n  padding: $toggle-item-container-padding-vertical 0.9rem;\n  border: 0;\n  box-sizing: border-box;\n  border-radius: calc(((var(--font-size) * var(--line-height)) + (2 * $toggle-item-container-padding-vertical)) / var(--mg-input-toggle-border-radius-ratio));\n\n  background-color: unset;\n  font-weight: unset;\n  color: hsl(var(--color-dark));\n\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  &:first-of-type {\n    font-weight: 600;\n    color: hsl(var(--color-info));\n    background-color: $color-light-blue;\n  }\n}\n\n// toggle default active variation\n.mg-input.mg-input--toggle-is-active {\n  .mg-input__toggle-item-container {\n    &:first-of-type {\n      background-color: unset;\n      font-weight: unset;\n      color: hsl(var(--color-dark));\n    }\n    &:last-of-type {\n      font-weight: 600;\n      color: hsl(var(--color-info));\n      background-color: $color-light-blue;\n    }\n  }\n}\n\n// icon\n.mg-input.mg-input--toggle-icon .mg-input__toggle-item-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: calc(((var(--font-size) * var(--line-height)) + (2 * $toggle-item-container-padding-vertical)));\n  height: calc(((var(--font-size) * var(--line-height)) + (2 * $toggle-item-container-padding-vertical)));\n  padding: 0;\n  visibility: hidden;\n\n  &:first-of-type {\n    visibility: visible;\n  }\n\n  ::slotted(mg-icon) {\n    display: flex;\n  }\n}\n\n.mg-input.mg-input--toggle-icon.mg-input--toggle-is-active .mg-input__toggle-item-container {\n  &:first-of-type {\n    visibility: hidden;\n  }\n\n  &:last-of-type {\n    visibility: visible;\n  }\n}\n\n// on/off\n.mg-input.mg-input--toggle-on-off {\n  .mg-input__toggle-item-container:first-of-type {\n    font-weight: 600;\n    color: hsl(var(--color-dark));\n    background-color: $color-light-dark;\n  }\n\n  &.mg-input--toggle-is-active .mg-input__toggle-item-container:first-of-type {\n    background-color: unset;\n    font-weight: unset;\n    color: hsl(var(--color-dark));\n  }\n}\n\n// readonly\n.mg-input.mg-input--toggle-readonly {\n  .mg-input__button-toggle {\n    border-color: transparent;\n    background-color: transparent;\n    cursor: initial;\n  }\n\n  .mg-input__toggle-item-container:last-of-type {\n    display: none;\n  }\n\n  &.mg-input--toggle-is-active .mg-input__toggle-item-container {\n    &:first-of-type {\n      display: none;\n    }\n\n    &:last-of-type {\n      display: flex;\n    }\n  }\n}\n","/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Event, h, Prop, EventEmitter, State, Watch, Element } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { ClassList, allItemsAreString } from '../../../../utils/components.utils';\nimport { ToggleValue } from './mg-input-toggle.conf';\n\n/**\n * type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n */\nconst isOption = (option: ToggleValue): boolean => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;\n\n@Component({\n  tag: 'mg-input-toggle',\n  styleUrl: 'mg-input-toggle.scss',\n  shadow: true,\n})\nexport class MgInputToggle {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private classReadonly = 'mg-input--toggle-readonly';\n  private classDisabled = 'mg-input--toggle-disabled';\n  private classIsActive = 'mg-input--toggle-is-active';\n  private classOnOff = 'mg-input--toggle-on-off';\n  private classIcon = 'mg-input--toggle-icon';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputToggleElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true }) value: any;\n  @Watch('value')\n  handleValue(newValue: any): void {\n    // Swich to the right option\n    this.setChecked();\n    // Emit value-change event\n    this.valueChange.emit(newValue);\n  }\n\n  /**\n   * Items are the possible options to select\n   */\n  @Prop() items!: string[] | ToggleValue[];\n  @Watch('items')\n  validateItems(newValue: string[] | ToggleValue[]): void {\n    if (typeof newValue === 'object' && this.items.length !== 2) {\n      throw new Error('<mg-input-toggle> prop \"items\" require 2 items.');\n    }\n    // String array\n    else if (allItemsAreString(newValue as string[])) {\n      this.options = (newValue as string[]).map(item => ({ title: item, value: item }));\n    }\n    // Object array\n    else if (newValue && (newValue as ToggleValue[]).every(item => isOption(item))) {\n      this.options = newValue as ToggleValue[];\n    } else {\n      throw new Error('<mg-input-toggle> prop \"items\" is required and all items must be the same type: ToggleValue.');\n    }\n  }\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier!: string;\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop: boolean;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Define if toggle have on/off style\n   */\n  @Prop() isOnOff = false;\n  @Watch('isOnOff')\n  handleIsOnOff(newValue: boolean): void {\n    if (newValue) this.classCollection.add(this.classOnOff);\n    else this.classCollection.delete(this.classOnOff);\n  }\n\n  /**\n   * Define if toggle display icon\n   */\n  @Prop() isIcon = false;\n  @Watch('isIcon')\n  handleIsIcon(newValue: boolean): void {\n    if (newValue) this.classCollection.add(this.classIcon);\n    else this.classCollection.delete(this.classIcon);\n  }\n\n  /**\n   * Define if input is readonly\n   */\n  @Prop() readonly = false;\n  @Watch('readonly')\n  handleReadonly(newValue: boolean): void {\n    if (newValue) this.classCollection.add(this.classReadonly);\n    else this.classCollection.delete(this.classReadonly);\n  }\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  handleDisabled(newValue: boolean): void {\n    if (newValue) this.classCollection.add(this.classDisabled);\n    else this.classCollection.delete(this.classDisabled);\n  }\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip: string;\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   */\n  @Prop() helpText: string;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-input--toggle']);\n\n  /**\n   * Formated items for display\n   */\n  @State() options: ToggleValue[];\n\n  /**\n   * Checked internal value\n   */\n  @State() checked = false;\n  @Watch('checked')\n  handleChecked(newValue: boolean): void {\n    // style\n    if (newValue) this.classCollection.add(this.classIsActive);\n    else this.classCollection.delete(this.classIsActive);\n\n    // update value\n    this.value = this.options[newValue ? 1 : 0].value;\n  }\n\n  /**\n   * Emited event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<any>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n  /**\n   * Change checked value\n   */\n  private toggleChecked = (): void => {\n    this.checked = !this.checked;\n  };\n\n  /**\n   * Slots validation\n   */\n  private validateSlots = (): void => {\n    const slots = Array.from(this.element.children);\n    if (slots.length !== 2) {\n      throw new Error('<mg-input-toggle> 2 slots are required.');\n    } else if (!this.isIcon) {\n      // Due to text-overflow set to ellipsis\n      // we need to ensure that slot element have title to display value on mouse over\n      slots.forEach(slot => slot.setAttribute('title', slot.textContent));\n    }\n  };\n\n  /**\n   * set checked state\n   */\n  private setChecked(): void {\n    const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);\n\n    if ([0, 1].includes(optionTrueValueIndex)) {\n      // has \"value\" props type is not a boolean, it is bind/render as an attributes/props\n      // true props will be represent by \"true\" string so we convert it has boolean\n      // true attribute will be represent by \"\" string so we convert it has boolean\n      // https://stenciljs.com/docs/properties\n      if (['', 'true'].includes(this.value as string) && this.options.find(option => option.value) !== undefined) {\n        this.value = true;\n      }\n\n      // when options are boolean values and ordered as [true,false] instead [false,true]\n      // we need to reversed the checked value logic\n      const selectedValue = this.value === this.options[optionTrueValueIndex].value;\n      this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;\n    } else {\n      this.checked = this.value === this.options[1].value;\n    }\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Check items format\n    this.validateItems(this.items);\n    // Check slots\n    this.validateSlots();\n    // init checked value\n    this.setChecked();\n    // apply handler\n    this.handleIsOnOff(this.isOnOff);\n    this.handleIsIcon(this.isIcon);\n    this.handleReadonly(this.readonly);\n    this.handleDisabled(this.disabled);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <MgInput\n        identifier={this.identifier}\n        classCollection={this.classCollection}\n        ariaDescribedbyIDs={[]}\n        label={this.label}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={undefined}\n        readonly={undefined}\n        mgWidth={undefined}\n        disabled={this.disabled}\n        value={this.value as string}\n        readonlyValue={undefined}\n        tooltip={!this.readonly && this.tooltip}\n        helpText={this.helpText}\n        errorMessage={undefined}\n        isFieldset={false}\n      >\n        <button\n          type=\"button\"\n          role=\"switch\"\n          aria-checked={this.checked.toString()}\n          aria-readonly={this.disabled || this.readonly}\n          id={this.identifier}\n          class=\"mg-input__button-toggle\"\n          disabled={this.disabled || this.readonly}\n          onClick={this.toggleChecked}\n        >\n          <span aria-hidden=\"true\" class=\"mg-input__toggle-item-container\">\n            <slot name=\"item-1\"></slot>\n          </span>\n          <span aria-hidden=\"true\" class=\"mg-input__toggle-item-container\">\n            <slot name=\"item-2\"></slot>\n          </span>\n        </button>\n      </MgInput>\n    );\n  }\n}\n"],"version":3}
+{"file":"mg-input-toggle.js","mappings":"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","names":["MgInputToggle"],"sources":["../styles/dist/components/mg-input-toggle.css?tag=mg-input-toggle&encapsulation=shadow","src/components/molecules/inputs/mg-input-toggle/mg-input-toggle.tsx"],"sourcesContent":[":host{display:block}.mg-c-input__input mg-icon,.mg-c-input__error mg-icon{display:flex}.mg-c-input{display:flex;max-width:100%;min-height:var(--default-size);align-items:flex-start;margin-bottom:var(--mg-inputs-margin-bottom, 0)}.mg-c-input mg-input-title{width:var(--mg-inputs-title-width, auto);flex-shrink:var(--mg-inputs-shrink, 1);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2);margin-right:var(--mg-inputs-title-horizontal-space, var(--mg-inputs-spacer));text-align:right}.mg-c-input__error{display:inline-block;padding:.3rem .8rem;border-radius:.3rem;margin-top:.2rem;background:hsl(var(--mg-inputs-error-bg-color));color:hsl(var(--color-danger))}.mg-c-input__input-container{min-height:var(--default-size)}.mg-c-input__input-container>strong{display:inline-block;min-height:var(--font-size);margin-top:calc((var(--default-size) - var(--font-size)*var(--line-height))/2)}.mg-c-input__input-container mg-tooltip{display:inline-flex;width:var(--mg-icon-regular-size);height:var(--mg-icon-regular-size);margin-left:var(--mg-inputs-spacer)}.mg-c-input__input-container .mg-c-input__help-text,.mg-c-input__input-container .mg-c-input__error{font-size:1.2rem;text-align:start}.mg-c-input.mg-c-input--label-on-top{flex-direction:column}.mg-c-input.mg-c-input--label-on-top .mg-c-input__input-container{width:100%}.mg-c-input__title{display:flex;align-items:baseline;margin-bottom:.3rem}.mg-c-input__title mg-input-title{width:auto;flex-shrink:1;margin-top:0;margin-right:var(--mg-inputs-spacer);text-align:left}.mg-c-input__title mg-tooltip{margin-top:0}.mg-c-input__title mg-icon{display:inline-flex;vertical-align:text-bottom}.mg-c-input__input{display:flex}.mg-c-input__input mg-tooltip{margin-top:calc((var(--default-size) - var(--mg-icon-regular-size))/2)}.mg-c-input__input.mg-c-input__input--has-error .mg-c-input__box{border-color:hsl(var(--color-danger))}.mg-c-input__input+.mg-c-input__help-text,.mg-c-input__input+.mg-c-input__error{margin-top:.5rem}.mg-c-input__input .mg-c-input__box:disabled,.mg-c-input__input-group--disabled label,.mg-c-input.mg-c-input--toggle-disabled .mg-c-input__input .mg-c-input__button-toggle,.mg-c-input.mg-c-input--checkbox-multi-disabled .mg-c-input__input strong{opacity:var(--mg-disabled-opacity)}.mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion){*{animation:none !important;transition:none !important}}.mg-c-input__toggle-item-container{overflow:hidden;box-sizing:border-box;padding:.5rem .9rem;border:0;border-radius:calc((var(--font-size)*var(--line-height) + 1rem)/var(--mg-input-toggle-border-radius-ratio));background-color:unset;color:hsl(var(--color-dark));font-weight:unset;text-overflow:ellipsis;white-space:nowrap}.mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input__button-toggle{display:flex;min-width:0;padding:.2rem;border-width:var(--mg-inputs-border-width);border-style:solid;border-color:var(--mg-inputs-color);border-radius:calc((var(--font-size)*var(--line-height) + 2*(.7rem + var(--mg-inputs-border-width)))/var(--mg-input-toggle-border-radius-ratio));background-color:hsl(var(--color-light));cursor:pointer;font-family:var(--font-family);font-size:inherit;line-height:inherit}.mg-c-input__button-toggle:disabled{cursor:default}.mg-c-input.mg-c-input--toggle .mg-c-input__input-container{min-width:0;flex:auto}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:hsl(var(--color-dark));font-weight:unset}.mg-c-input.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{background-color:hsl(var(--color-info-h), calc(var(--color-info-s) - 64%), calc(var(--color-info-l) + 55%));color:hsl(var(--color-info));font-weight:600}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container{display:flex;width:calc(var(--font-size)*var(--line-height) + 1rem);height:calc(var(--font-size)*var(--line-height) + 1rem);align-items:center;justify-content:center;padding:0;visibility:hidden}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container:first-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-icon .mg-c-input__toggle-item-container ::slotted(mg-icon){display:flex}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{visibility:hidden}.mg-c-input.mg-c-input--toggle-icon.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{visibility:visible}.mg-c-input.mg-c-input--toggle-readonly .mg-c-input__button-toggle{border-color:rgba(0,0,0,0);background-color:rgba(0,0,0,0);cursor:initial}.mg-c-input.mg-c-input--toggle-readonly .mg-c-input__toggle-item-container:last-of-type{display:none}.mg-c-input.mg-c-input--toggle-readonly.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{display:none}.mg-c-input.mg-c-input--toggle-readonly.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:last-of-type{display:flex}.mg-c-input.mg-c-input--toggle-on-off .mg-c-input__toggle-item-container:first-of-type{background-color:hsl(var(--color-dark-h), calc(var(--color-dark-s) - 30%), calc(var(--color-dark-l) + 75%));color:hsl(var(--color-dark));font-weight:600}.mg-c-input.mg-c-input--toggle-on-off.mg-c-input--toggle-is-active .mg-c-input__toggle-item-container:first-of-type{background-color:unset;color:hsl(var(--color-dark));font-weight:unset}/*# sourceMappingURL=mg-input-toggle.css.map */\n","/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { Component, Event, h, Prop, EventEmitter, State, Watch, Element } from '@stencil/core';\nimport { MgInput } from '../MgInput';\nimport { ClassList, allItemsAreString } from '../../../../utils/components.utils';\nimport { ToggleValue } from './mg-input-toggle.conf';\n\n/**\n * type Option validation function\n * @param option - radio option\n * @returns toggle option type is valid\n */\nconst isOption = (option: ToggleValue): boolean => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;\n\n@Component({\n  tag: 'mg-input-toggle',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-toggle.css',\n  shadow: true,\n})\nexport class MgInputToggle {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private classReadonly = 'mg-c-input--toggle-readonly';\n  private classDisabled = 'mg-c-input--toggle-disabled';\n  private classIsActive = 'mg-c-input--toggle-is-active';\n  private classOnOff = 'mg-c-input--toggle-on-off';\n  private classIcon = 'mg-c-input--toggle-icon';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgInputToggleElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true }) value: any;\n  @Watch('value')\n  handleValue(newValue: any): void {\n    // Swich to the right option\n    this.setChecked();\n    // Emit value-change event\n    this.valueChange.emit(newValue);\n  }\n\n  /**\n   * Items are the possible options to select\n   */\n  @Prop() items!: string[] | ToggleValue[];\n  @Watch('items')\n  validateItems(newValue: string[] | ToggleValue[]): void {\n    if (typeof newValue === 'object' && this.items.length !== 2) {\n      throw new Error('<mg-input-toggle> prop \"items\" require 2 items.');\n    }\n    // String array\n    else if (allItemsAreString(newValue as string[])) {\n      this.options = (newValue as string[]).map(item => ({ title: item, value: item }));\n    }\n    // Object array\n    else if (newValue && (newValue as ToggleValue[]).every(item => isOption(item))) {\n      this.options = newValue as ToggleValue[];\n    } else {\n      throw new Error('<mg-input-toggle> prop \"items\" is required and all items must be the same type: ToggleValue.');\n    }\n  }\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier!: string;\n\n  /**\n   * Input name\n   * If not set the value equals the identifier\n   */\n  @Prop() name: string = this.identifier;\n\n  /**\n   * Input label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Define if label is displayed on top\n   */\n  @Prop() labelOnTop: boolean;\n\n  /**\n   * Define if label is visible\n   */\n  @Prop() labelHide = false;\n\n  /**\n   * Define if toggle have on/off style\n   */\n  @Prop() isOnOff = false;\n  @Watch('isOnOff')\n  handleIsOnOff(newValue: boolean): void {\n    if (newValue) this.classCollection.add(this.classOnOff);\n    else this.classCollection.delete(this.classOnOff);\n  }\n\n  /**\n   * Define if toggle display icon\n   */\n  @Prop() isIcon = false;\n  @Watch('isIcon')\n  handleIsIcon(newValue: boolean): void {\n    if (newValue) this.classCollection.add(this.classIcon);\n    else this.classCollection.delete(this.classIcon);\n  }\n\n  /**\n   * Define if input is readonly\n   */\n  @Prop() readonly = false;\n  @Watch('readonly')\n  handleReadonly(newValue: boolean): void {\n    if (newValue) this.classCollection.add(this.classReadonly);\n    else this.classCollection.delete(this.classReadonly);\n  }\n\n  /**\n   * Define if input is disabled\n   */\n  @Prop() disabled = false;\n  @Watch('disabled')\n  handleDisabled(newValue: boolean): void {\n    if (newValue) this.classCollection.add(this.classDisabled);\n    else this.classCollection.delete(this.classDisabled);\n  }\n\n  /**\n   * Add a tooltip message next to the input\n   */\n  @Prop() tooltip: string;\n\n  /**\n   * Add a help text under the input, usually expected data format and example\n   */\n  @Prop() helpText: string;\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-c-input--toggle']);\n\n  /**\n   * Formated items for display\n   */\n  @State() options: ToggleValue[];\n\n  /**\n   * Checked internal value\n   */\n  @State() checked = false;\n  @Watch('checked')\n  handleChecked(newValue: boolean): void {\n    // style\n    if (newValue) this.classCollection.add(this.classIsActive);\n    else this.classCollection.delete(this.classIsActive);\n\n    // update value\n    this.value = this.options[newValue ? 1 : 0].value;\n  }\n\n  /**\n   * Emited event when value change\n   */\n  @Event({ eventName: 'value-change' }) valueChange: EventEmitter<any>;\n\n  /**\n   * Emited event when checking validity\n   */\n  @Event({ eventName: 'input-valid' }) inputValid: EventEmitter<boolean>;\n\n  /**\n   * Change checked value\n   */\n  private toggleChecked = (): void => {\n    this.checked = !this.checked;\n  };\n\n  /**\n   * Slots validation\n   */\n  private validateSlots = (): void => {\n    const slots = Array.from(this.element.children);\n    if (slots.length !== 2) {\n      throw new Error('<mg-input-toggle> 2 slots are required.');\n    } else if (!this.isIcon) {\n      // Due to text-overflow set to ellipsis\n      // we need to ensure that slot element have title to display value on mouse over\n      slots.forEach(slot => slot.setAttribute('title', slot.textContent));\n    }\n  };\n\n  /**\n   * set checked state\n   */\n  private setChecked(): void {\n    const optionTrueValueIndex = this.options.map(option => option.value).findIndex(value => value === true);\n\n    if ([0, 1].includes(optionTrueValueIndex)) {\n      // has \"value\" props type is not a boolean, it is bind/render as an attributes/props\n      // true props will be represent by \"true\" string so we convert it has boolean\n      // true attribute will be represent by \"\" string so we convert it has boolean\n      // https://stenciljs.com/docs/properties\n      if (['', 'true'].includes(this.value as string) && this.options.find(option => option.value) !== undefined) {\n        this.value = true;\n      }\n\n      // when options are boolean values and ordered as [true,false] instead [false,true]\n      // we need to reversed the checked value logic\n      const selectedValue = this.value === this.options[optionTrueValueIndex].value;\n      this.checked = optionTrueValueIndex === 0 ? !selectedValue : selectedValue;\n    } else {\n      this.checked = this.value === this.options[1].value;\n    }\n  }\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    // Check items format\n    this.validateItems(this.items);\n    // Check slots\n    this.validateSlots();\n    // init checked value\n    this.setChecked();\n    // apply handler\n    this.handleIsOnOff(this.isOnOff);\n    this.handleIsIcon(this.isIcon);\n    this.handleReadonly(this.readonly);\n    this.handleDisabled(this.disabled);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <MgInput\n        identifier={this.identifier}\n        classCollection={this.classCollection}\n        ariaDescribedbyIDs={[]}\n        label={this.label}\n        labelOnTop={this.labelOnTop}\n        labelHide={this.labelHide}\n        required={undefined}\n        readonly={undefined}\n        mgWidth={undefined}\n        disabled={this.disabled}\n        value={this.value as string}\n        readonlyValue={undefined}\n        tooltip={!this.readonly && this.tooltip}\n        helpText={this.helpText}\n        errorMessage={undefined}\n        isFieldset={false}\n      >\n        <button\n          type=\"button\"\n          role=\"switch\"\n          aria-checked={this.checked.toString()}\n          aria-readonly={this.disabled || this.readonly}\n          id={this.identifier}\n          class=\"mg-c-input__button-toggle\"\n          disabled={this.disabled || this.readonly}\n          onClick={this.toggleChecked}\n        >\n          <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n            <slot name=\"item-1\"></slot>\n          </span>\n          <span aria-hidden=\"true\" class=\"mg-c-input__toggle-item-container\">\n            <slot name=\"item-2\"></slot>\n          </span>\n        </button>\n      </MgInput>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { i as initLocales } from './index2.js';
 import { D as Direction } from './mg-menu.conf.js';
+import { i as isValidString } from './components.utils.js';
 import { d as defineCustomElement$9 } from './mg-badge2.js';
 import { d as defineCustomElement$8 } from './mg-button2.js';
 import { d as defineCustomElement$7 } from './mg-card2.js';
@@ -150,7 +151,7 @@ class OverflowBehavior {
   }
 }
 
-const mgItemMoreCss = ".sr-only{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){.mg-a11y-animation{animation:none !important;transition:none !important}}:host{display:flex}";
+const mgItemMoreCss = ".mg-u-visually-hidden{position:absolute !important;overflow:hidden !important;width:.1rem !important;height:.1rem !important;padding:0 !important;border:0 !important;margin:-0.1rem !important;clip:rect(0.1rem, 0.1rem, 0.1rem, 0.1rem) !important;clip-path:inset(50%) !important;white-space:nowrap !important}*:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion){*{animation:none !important;transition:none !important}}:host:not([hidden]){display:flex}";
 
 const MgItemMore$1 = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends HTMLElement {
   constructor() {
@@ -184,7 +185,7 @@ const MgItemMore$1 = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends H
             navElement.click();
         });
         // add id suffix to prevent duplicate key. default html id is: '';
-        if (proxy.id.trim() !== '')
+        if (isValidString(proxy.id))
           proxy.id = `${proxy.id}-proxy`;
         // manage status change miror in proxy
         allMenuItem[index].addEventListener('status-change', (event) => {
@@ -245,7 +246,7 @@ const MgItemMore$1 = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends H
    * @returns HTML Element
    */
   render() {
-    return (h(Host, { role: "listitem" }, 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 }))));
+    return (h(Host, { role: "listitem" }, 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: { 'mg-u-visually-hidden': !this.slotlabel.display }, slot: "label" }, this.slotlabel.label), h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.moreLabel, size: this.size }))));
   }
   get element() { return this; }
   static get watchers() { return {