@mgdis/mg-components 5.16.0 → 5.18.0

package/dist/components/mg-input-text2.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, b as isValidString } from './components.utils.js';
 import { i as initLocales } from './index2.js';
 import { d as defineCustomElement$5 } from './mg-character-left2.js';
 import { d as defineCustomElement$4 } from './mg-icon2.js';
@@ -10,7 +10,7 @@ import { d as defineCustomElement$1 } from './mg-tooltip-content2.js';
 
 const mgInputTextCss = ":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--has-icon .mg-input__with-character-left>mg-icon{position:absolute;top:50%;left:var(--mg-inputs-spacer);color:var(--mg-inputs-color);transform:translateY(-50%)}.mg-input.mg-input--has-icon .mg-input__with-character-left .mg-input__box{padding-left:calc(var(--mg-icon-regular-size) + var(--mg-inputs-spacer) * 2)}.mg-input__with-character-left{position:relative;display:inline-flex}.mg-input--width-full .mg-input__with-character-left{width:100%}.mg-input.is-focused .mg-input__with-character-left .mg-input__box{padding-right:calc(var(--mg-character-left-message-length) * 1ch + 0.8rem)}.mg-input__with-character-left mg-character-left{position:absolute;display:none;top:50%;right:1rem;opacity:0.6;transform:translateY(-50%);font-size:1.1rem}.mg-input.is-focused .mg-input__with-character-left mg-character-left{display:block}";
 
-const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgInputText = /*@__PURE__*/ proxyCustomElement(class MgInputText extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -58,19 +58,21 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      */
     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() : true);
-      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() : true));
     };
     /**
      * Set input error message
+     * @param errorMessage - errorMessage override
      */
-    this.setErrorMessage = () => {
+    this.setErrorMessage = (errorMessage) => {
       // Set error message
       this.errorMessage = undefined;
+      // Does have a custom error message
+      if (!this.valid && errorMessage !== undefined) {
+        this.errorMessage = errorMessage;
+      }
       // Does not match pattern
-      if (!this.valid && this.input.validity.patternMismatch) {
+      else if (!this.valid && this.input.validity.patternMismatch) {
         this.errorMessage = this.patternErrorMessage;
       }
       // required
@@ -78,17 +80,6 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         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-text> prop "pattern" must be paired with the prop "patternErrorMessage"');
-      }
-    };
     /**
      * Validate append slot
      */
@@ -147,6 +138,11 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }
     }
   }
+  validatePattern(newValue) {
+    if (newValue !== undefined && !(isValidString(this.pattern) && isValidString(this.patternErrorMessage))) {
+      throw new Error('<mg-input-text> props "pattern" and "patternErrorMessage" must be non-empty string and paired.');
+    }
+  }
   /**
    * Public method to play input focus
    */
@@ -154,13 +150,44 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.input.focus();
   }
   /**
-   * 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-text> method "setError()" param "valid" must be a boolean');
+    }
+    else if (typeof errorMessage !== 'string' || errorMessage.trim() === '') {
+      throw new Error('<mg-input-text> 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 *
    *************/
@@ -174,7 +201,8 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.characterLeftId = `${this.identifier}-character-left`;
     // Validate
     this.validateIcon(this.icon);
-    this.validatePattern();
+    this.validatePattern(this.pattern);
+    this.validatePattern(this.patternErrorMessage);
     this.validateAppendSlot();
     // Check validity when component is ready
     // return a promise to process action only in the FIRST render().
@@ -203,7 +231,9 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "icon": ["validateIcon"],
     "required": ["handleValidityChange"],
     "readonly": ["handleValidityChange"],
-    "disabled": ["handleValidityChange"]
+    "disabled": ["handleValidityChange"],
+    "pattern": ["validatePattern"],
+    "patternErrorMessage": ["validatePattern"]
   }; }
   static get style() { return mgInputTextCss; }
 }, [1, "mg-input-text", {
@@ -231,7 +261,16 @@ const MgInputText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "classCollection": [32],
     "errorMessage": [32],
     "setFocus": [64],
-    "displayError": [64]
+    "displayError": [64],
+    "setError": [64]
+  }, undefined, {
+    "value": ["handleValue"],
+    "icon": ["validateIcon"],
+    "required": ["handleValidityChange"],
+    "readonly": ["handleValidityChange"],
+    "disabled": ["handleValidityChange"],
+    "pattern": ["validatePattern"],
+    "patternErrorMessage": ["validatePattern"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
@@ -274,3 +313,5 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgInputText as M, defineCustomElement as d };
+
+//# sourceMappingURL=mg-input-text2.js.map

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

@@ -0,0 +1 @@
+{"file":"mg-input-text2.js","mappings":"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","names":[],"sources":["src/components/molecules/inputs/mg-input-text/mg-input-text.scss?tag=mg-input-text&encapsulation=shadow","src/components/molecules/inputs/mg-input-text/mg-input-text.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/**\n* Icon in input\n*/\n.mg-input.mg-input--has-icon .mg-input__with-character-left {\n  & > mg-icon {\n    // layout\n    position: absolute;\n    top: 50%;\n    left: var(--mg-inputs-spacer);\n    // text\n    color: var(--mg-inputs-color);\n    // other\n    transform: translateY(-50%);\n  }\n\n  .mg-input__box {\n    padding-left: calc(var(--mg-icon-regular-size) + var(--mg-inputs-spacer) * 2);\n  }\n}\n\n/**\n* Character left\n*/\n.mg-input__with-character-left {\n  position: relative;\n  display: inline-flex;\n\n  .mg-input--width-full & {\n    width: 100%;\n  }\n\n  .mg-input.is-focused & .mg-input__box {\n    padding-right: calc(var(--mg-character-left-message-length) * 1ch + 0.8rem);\n  }\n\n  mg-character-left {\n    position: absolute;\n    display: none;\n    top: 50%;\n    right: 1rem;\n    opacity: 0.6;\n    transform: translateY(-50%);\n    font-size: 1.1rem;\n\n    .mg-input.is-focused & {\n      display: block;\n    }\n  }\n}\n","import { Component, Event, h, Prop, EventEmitter, State, Element, 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-text',\n  styleUrl: 'mg-input-text.scss',\n  shadow: true,\n})\nexport class MgInputText {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private classFocus = 'is-focused';\n  private classIsInputGroupAppend = 'mg-input--is-input-group-append';\n  private classHasIcon = 'mg-input--has-icon';\n\n  // IDs\n  private characterLeftId;\n\n  // HTML selector\n  private input: HTMLInputElement;\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: HTMLMgInputTextElement;\n\n  /**\n   * Component value\n   */\n  @Prop({ mutable: true, reflect: true }) value: string;\n  @Watch('value')\n  handleValue(newValue: string): void {\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   * Input type\n   */\n  @Prop() type: 'text' | 'search' = 'text';\n\n  /**\n   * Input icon\n   */\n  @Prop() icon: string;\n  @Watch('icon')\n  validateIcon(newValue: string): void {\n    if (newValue !== undefined) {\n      this.classCollection.add(this.classHasIcon);\n    } else {\n      this.classCollection.delete(this.classHasIcon);\n    }\n  }\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 = 400;\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-text> props \"pattern\" and \"patternErrorMessage\" must be non-empty string and paired.');\n    }\n  }\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\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   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-input--text']);\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 play input focus\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.input.focus();\n  }\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: MgInputText['valid'], errorMessage: string): Promise<void> {\n    if (typeof valid !== 'boolean') {\n      throw new Error('<mg-input-text> method \"setError()\" param \"valid\" must be a boolean');\n    } else if (typeof errorMessage !== 'string' || errorMessage.trim() === '') {\n      throw new Error('<mg-input-text> 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: MgInputText['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  /**\n   * Handle input event\n   */\n  private handleInput = (): void => {\n    this.checkValidity();\n    if (this.hasDisplayedError) {\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   * Check if input is valid\n   */\n  private checkValidity = (): void => {\n    this.setValidity(this.readonly || this.disabled || (this.input?.checkValidity !== undefined ? this.input.checkValidity() : true));\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 have a custom error message\n    if (!this.valid && errorMessage !== undefined) {\n      this.errorMessage = errorMessage;\n    }\n    // Does not match pattern\n    else if (!this.valid && this.input.validity.patternMismatch) {\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 append slot\n   */\n  private validateAppendSlot = (): void => {\n    const slotAppendInput: HTMLSlotElement[] = Array.from(this.element.querySelectorAll('[slot=\"append-input\"]'));\n\n    if (slotAppendInput.length === 1) {\n      this.classCollection.add(slotAppendInput[0].nodeName === 'MG-BUTTON' ? this.classIsInputGroupAppend : 'mg-input--is-append-input-slot-content');\n    } else if (slotAppendInput.filter(slot => slot.nodeName === 'MG-BUTTON').length > 1) {\n      this.classCollection.add(this.classIsInputGroupAppend);\n      this.classCollection.add('mg-input--has-buttons-group-append');\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.validateIcon(this.icon);\n    this.validatePattern(this.pattern);\n    this.validatePattern(this.patternErrorMessage);\n    this.validateAppendSlot();\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\n          class=\"mg-input__with-character-left\"\n          style={{\n            '--mg-character-left-message-length': (this.displayCharacterLeft\n              ? (this.maxlength - (this.value || '').length).toString().length + this.maxlength.toString().length + 1\n              : 0\n            ).toString(),\n          }}\n        >\n          {this.icon !== undefined && <mg-icon icon={this.icon}></mg-icon>}\n          <input\n            type={this.type}\n            class=\"mg-input__box\"\n            value={this.value}\n            id={this.identifier}\n            name={this.name}\n            placeholder={this.placeholder}\n            title={this.placeholder}\n            maxlength={this.maxlength}\n            disabled={this.disabled}\n            required={this.required}\n            pattern={this.pattern}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n            ref={(el: HTMLInputElement) => {\n              if (el !== null) this.input = el;\n            }}\n          />\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        <slot name=\"append-input\"></slot>\n      </MgInput>\n    );\n  }\n}\n"],"version":3}

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, b 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';
@@ -10,7 +10,7 @@ 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 MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -63,35 +63,27 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
      */
     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;
@@ -132,6 +124,11 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       }
     }
   }
+  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 extends HTMLEle
     }
   }
   /**
-   * 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 (typeof errorMessage !== 'string' || errorMessage.trim() === '') {
+      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 extends HTMLEle
     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
@@ -190,6 +219,8 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     "required": ["handleValidityChange"],
     "readonly": ["handleValidityChange"],
     "disabled": ["handleValidityChange"],
+    "pattern": ["validatePattern"],
+    "patternErrorMessage": ["validatePattern"],
     "displayCharacterLeft": ["validateDisplayCharacterLeft"]
   }; }
   static get style() { return mgInputTextareaCss; }
@@ -217,7 +248,16 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     "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() {
   if (typeof customElements === "undefined") {
@@ -263,3 +303,5 @@ const MgInputTextarea = MgInputTextarea$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgInputTextarea, defineCustomElement };
+
+//# sourceMappingURL=mg-input-textarea.js.map

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

@@ -0,0 +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, isValidString } 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  @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-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 (typeof errorMessage !== 'string' || errorMessage.trim() === '') {\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-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}

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

@@ -4,3 +4,5 @@ const MgInputTitle = MgInputTitle$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgInputTitle, defineCustomElement };
+
+//# sourceMappingURL=mg-input-title.js.map

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

@@ -0,0 +1 @@
+{"file":"mg-input-title.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 
 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 MgInputTitle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgInputTitle = /*@__PURE__*/ proxyCustomElement(class MgInputTitle extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -48,6 +48,9 @@ const MgInputTitle = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "required": [4],
     "isLegend": [4, "is-legend"],
     "tagName": [32]
+  }, undefined, {
+    "identifier": ["validateIdentifier"],
+    "isLegend": ["validateIsLegend"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
@@ -65,3 +68,5 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { MgInputTitle as M, defineCustomElement as d };
+
+//# sourceMappingURL=mg-input-title2.js.map

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

@@ -0,0 +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}

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

@@ -14,7 +14,7 @@ const mgInputToggleCss = ":host{display:block}.mg-input{display:flex;align-items
  * @returns toggle option type is valid
  */
 const isOption = (option) => typeof option === 'object' && typeof option.title === 'string' && option.value !== undefined;
-const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -198,6 +198,14 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "classCollection": [32],
     "options": [32],
     "checked": [32]
+  }, undefined, {
+    "value": ["handleValue"],
+    "items": ["validateItems"],
+    "isOnOff": ["handleIsOnOff"],
+    "isIcon": ["handleIsIcon"],
+    "readonly": ["handleReadonly"],
+    "disabled": ["handleDisabled"],
+    "checked": ["handleChecked"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -238,3 +246,5 @@ const MgInputToggle = MgInputToggle$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgInputToggle, defineCustomElement };
+
+//# sourceMappingURL=mg-input-toggle.js.map

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

@@ -0,0 +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}

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

@@ -152,7 +152,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 MgItemMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const MgItemMore$1 = /*@__PURE__*/ proxyCustomElement(class MgItemMore extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -259,6 +259,10 @@ const MgItemMore$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "slotlabel": [16],
     "size": [1],
     "parentMenu": [32]
+  }, undefined, {
+    "icon": ["validateIcon"],
+    "slotlabel": ["validateSlotLabel"],
+    "size": ["validateSize"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
@@ -319,3 +323,5 @@ const MgItemMore = MgItemMore$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { MgItemMore, defineCustomElement };
+
+//# sourceMappingURL=mg-item-more.js.map