@mgdis/mg-components 5.18.0 → 5.19.1

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

@@ -1 +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}
+{"file":"mg-input-text2.js","mappings":";;;;;;;;;;AAAA,MAAM,cAAc,GAAG,ovNAAovN;;ACO3wN,MAAM,gBAAgB,GAAG,CAAC,OAAkB,KAA0B,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,MAAM,IAAI,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC;MAOvI,WAAW;;;;;;;;;;;IAMd,eAAU,GAAG,iBAAiB,CAAC;IAC/B,4BAAuB,GAAG,mCAAmC,CAAC;IAC9D,iBAAY,GAAG,sBAAsB,CAAC;;IAatC,sBAAiB,GAAG,KAAK,CAAC;;;;IA0O1B,gBAAW,GAAG;MACpB,IAAI,CAAC,aAAa,EAAE,CAAC;MACrB,IAAI,IAAI,CAAC,iBAAiB,EAAE;QAC1B,IAAI,CAAC,eAAe,EAAE,CAAC;OACxB;MACD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;KAC/B,CAAC;;;;IAKM,gBAAW,GAAG;MACpB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;MAC1C,IAAI,CAAC,eAAe,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;KACpE,CAAC;;;;IAKM,eAAU,GAAG;;MAEnB,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;MAC7C,IAAI,CAAC,eAAe,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;;MAEnE,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB,CAAC;;;;IAKM,kBAAa,GAAG;;MACtB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,aAAa,MAAK,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;KACnI,CAAC;;;;;IAMM,oBAAe,GAAG,CAAC,YAAqB;;MAE9C,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;;MAE9B,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,YAAY,KAAK,SAAS,EAAE;QAC7C,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;OAClC;;WAEI,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,eAAe,EAAE;QAC3D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,mBAAmB,CAAC;OAC9C;;WAEI,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,YAAY,EAAE;QACxD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC;OACnD;KACF,CAAC;;;;IAKM,uBAAkB,GAAG;MAC3B,MAAM,eAAe,GAAsB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC,CAAC;MAE9G,IAAI,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE;QAChC,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,WAAW,GAAG,IAAI,CAAC,uBAAuB,GAAG,0CAA0C,CAAC,CAAC;OACnJ;WAAM,IAAI,eAAe,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;QACnF,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACvD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,sCAAsC,CAAC,CAAC;OAClE;KACF,CAAC;;;;;IAMM,gBAAW,GAAG,MAAe,gBAAgB,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC;;;gBAtRxF,IAAI,CAAC,UAAU;;gBAUb,MAAM;;;qBAuBX,KAAK;;;qBAsBL,GAAG;oBAKJ,KAAK;oBAKL,KAAK;oBAKL,KAAK;mBAkBC,MAAM;;;;gCA2BA,IAAI;;;;2BAoBG,IAAI,SAAS,CAAC,CAAC,kBAAkB,CAAC,CAAC;;;EApJzE,WAAW,CAAC,QAAgB;IAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACjC;EA4BD,YAAY,CAAC,QAAgB;IAC3B,IAAI,QAAQ,KAAK,SAAS,EAAE;MAC1B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KAC7C;SAAM;MACL,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KAChD;GACF;EAuBD,uBAAuB,CAAC,QAAwC;IAC9D,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,EAAE;MACpD,MAAM,IAAI,KAAK,CAAC,8EAA8E,CAAC,CAAC;KACjG;GACF;EAwBD,oBAAoB,CAAC,QAAiB,EAAE,SAAkB,EAAE,IAAY;IACtE,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE;MAC5B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC;MAC5B,IAAI,CAAC,aAAa,EAAE,CAAC;MACrB,IAAI,IAAI,CAAC,iBAAiB,EAAE;QAC1B,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;OAChC;KACF;GACF;EAkBD,eAAe,CAAC,QAAgB;IAC9B,IAAI,QAAQ,KAAK,SAAS,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,aAAa,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE;MACvG,MAAM,IAAI,KAAK,CAAC,gGAAgG,CAAC,CAAC;KACnH;GACF;;;;EAmDD,MAAM,QAAQ;IACZ,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;GACpB;;;;EAMD,MAAM,YAAY;IAChB,IAAI,CAAC,aAAa,EAAE,CAAC;IACrB,IAAI,CAAC,eAAe,EAAE,CAAC;IACvB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC;GACvC;;;;;;;;;EAWD,MAAM,QAAQ,CAAC,KAA2B,EAAE,YAAoB;IAC9D,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE;MAC9B,MAAM,IAAI,KAAK,CAAC,qEAAqE,CAAC,CAAC;KACxF;SAAM,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,EAAE;MACvC,MAAM,IAAI,KAAK,CAAC,2EAA2E,CAAC,CAAC;KAC9F;SAAM;MACL,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;MACxB,IAAI,CAAC,eAAe,CAAC,KAAK,GAAG,SAAS,GAAG,YAAY,CAAC,CAAC;MACvD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC;KACvC;GACF;;;;;EAMO,WAAW,CAAC,QAA8B;IAChD,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;IACtB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;;IAE3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAClC;;;;;;;;EAwFD,iBAAiB;;IAEf,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;IACnD,IAAI,CAAC,eAAe,GAAG,GAAG,IAAI,CAAC,UAAU,iBAAiB,CAAC;IAC3D,IAAI,CAAC,UAAU,GAAG,GAAG,IAAI,CAAC,UAAU,WAAW,CAAC;;IAEhD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IACnD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC/C,IAAI,CAAC,kBAAkB,EAAE,CAAC;;;;IAI1B,OAAO,UAAU,CAAC;MAChB,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB,EAAE,CAAC,CAAC,CAAC;GACP;;;;;EAMD,MAAM;IACJ,QACE,EAAC,OAAO,IACN,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,kBAAkB,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,EAC1C,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,aAAa,EAAE,SAAS,EACxB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,UAAU,EAAE,KAAK,IAEjB,WACE,KAAK,EAAC,iCAAiC,EACvC,KAAK,EAAE;QACL,oCAAoC,EAAE,CAAC,IAAI,CAAC,oBAAoB;YAC5D,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,MAAM,GAAG,CAAC;YACrG,CAAC,EACH,QAAQ,EAAE;OACb,IAEA,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EAChE,aACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAC,iBAAiB,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,UAAU,GAAG,SAAS,EACtD,YAAY,EAAE,IAAI,CAAC,WAAW,EAAE,GAAG,KAAK,GAAG,SAAS,EACpD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,kBACT,CAAC,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE,QAAQ,EAAE,EAChD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,GAAG,EAAE,CAAC,EAAoB;QACxB,IAAI,EAAE,KAAK,IAAI;UAAE,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;OAClC,GACD,EACD,IAAI,CAAC,WAAW,EAAE,KACjB,gBAAU,EAAE,EAAE,IAAI,CAAC,UAAU,IAC1B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,KAC9B,cAAQ,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAW,CAC9C,CAAC,CACO,CACZ,EACA,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,KAC9C,yBAAmB,UAAU,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,GAAsB,CAC7H,CACG,EACN,YAAM,IAAI,EAAC,cAAc,GAAQ,CACzB,EACV;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../styles/dist/components/mg-input-text.css?tag=mg-input-text&encapsulation=shadow","src/components/molecules/inputs/mg-input-text/mg-input-text.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__with-character-left{position:relative;display:inline-flex}.mg-c-input--width-full .mg-c-input__with-character-left{width:100%}.mg-c-input.mg-u-is-focused .mg-c-input__with-character-left .mg-c-input__box{padding-right:calc(var(--mg-character-left-message-length)*1ch + .8rem)}.mg-c-input__with-character-left mg-character-left{position:absolute;top:50%;right:1rem;display:none;font-size:1.1rem;opacity:.6;transform:translateY(-50%)}.mg-c-input.mg-u-is-focused .mg-c-input__with-character-left mg-character-left{display:block}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left>mg-icon{position:absolute;top:50%;left:var(--mg-inputs-spacer);color:var(--mg-inputs-color);transform:translateY(-50%)}.mg-c-input.mg-c-input--has-icon .mg-c-input__with-character-left .mg-c-input__box{padding-left:calc(var(--mg-icon-regular-size) + var(--mg-inputs-spacer)*2)}/*# sourceMappingURL=mg-input-text.css.map */\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';\nimport { TextType } from './mg-input-text.conf';\n\nconst isDatalistOption = (options: unknown[]): options is string[] => Array.isArray(options) && options.every(option => typeof option === 'string');\n\n@Component({\n  tag: 'mg-input-text',\n  styleUrl: '../../../../../node_modules/@mgdis/styles/dist/components/mg-input-text.css',\n  shadow: true,\n})\nexport class MgInputText {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private classFocus = 'mg-u-is-focused';\n  private classIsInputGroupAppend = 'mg-c-input--is-input-group-append';\n  private classHasIcon = 'mg-c-input--has-icon';\n\n  // IDs\n  private characterLeftId;\n  private datalistId;\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: TextType = '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   * Define datalist options\n   */\n  @Prop() datalistoptions: string[];\n  @Watch('datalistoptions')\n  validateDatalistoptions(newValue: MgInputText['datalistoptions']) {\n    if (Boolean(newValue) && !isDatalistOption(newValue)) {\n      throw new Error('<mg-input-text> prop \"datalistoptions\" values must be the same type, string.');\n    }\n  }\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-c-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 (!isValidString(errorMessage)) {\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-c-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-c-input--has-buttons-group-append');\n    }\n  };\n\n  /**\n   * Methode to control datalist display condition\n   * @returns true if display condition success\n   */\n  private hasDatalist = (): boolean => isDatalistOption(this.datalistoptions) && this.datalistoptions.length > 0;\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    this.datalistId = `${this.identifier}-datalist`;\n    // Validate\n    this.validateIcon(this.icon);\n    this.validateDatalistoptions(this.datalistoptions);\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-c-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-c-input__box\"\n            value={this.value}\n            id={this.identifier}\n            list={this.hasDatalist() ? this.datalistId : undefined}\n            autocomplete={this.hasDatalist() ? 'off' : undefined}\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            aria-invalid={(this.invalid === true).toString()}\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.hasDatalist() && (\n            <datalist id={this.datalistId}>\n              {this.datalistoptions.map(option => (\n                <option value={option} key={option}></option>\n              ))}\n            </datalist>\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, b as isValidString } 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;
     /**
@@ -107,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) {
@@ -157,7 +157,7 @@ const MgInputTextarea$1 = /*@__PURE__*/ proxyCustomElement(class MgInputTextarea
     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() === '') {
+    else if (!isValidString(errorMessage)) {
       throw new Error('<mg-input-textarea> method "setError()" param "errorMessage" must be a string');
     }
     else {
@@ -203,12 +203,12 @@ 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',
-      }, 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) => {
+    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, "aria-invalid": (this.invalid === true).toString(), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, ref: (el) => {
         if (el !== null)
           this.input = el;
       } }), this.displayCharacterLeft && this.maxlength > 0 && (h("mg-character-left", { identifier: this.characterLeftId, characters: this.value, maxlength: this.maxlength })))));

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, 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}
+{"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            aria-invalid={(this.invalid === true).toString()}\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() {
@@ -8,11 +9,12 @@ const MgInputTitle = /*@__PURE__*/ proxyCustomElement(class MgInputTitle extends
     this.__registerHost();
     this.identifier = undefined;
     this.required = undefined;
+    this.readonly = undefined;
     this.isLegend = false;
     this.tagName = 'label';
   }
   validateIdentifier(newValue) {
-    if (typeof newValue !== 'string' || newValue.trim() === '') {
+    if (!isValidString(newValue)) {
       throw new Error('<mg-input-title> prop "identifier" is required.');
     }
   }
@@ -34,9 +36,9 @@ const MgInputTitle = /*@__PURE__*/ proxyCustomElement(class MgInputTitle extends
    * @returns HTML element
    */
   render() {
-    const TagName = this.tagName;
+    const TagName = this.readonly ? 'span' : 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"],
@@ -46,6 +48,7 @@ const MgInputTitle = /*@__PURE__*/ proxyCustomElement(class MgInputTitle extends
 }, [6, "mg-input-title", {
     "identifier": [1],
     "required": [4],
+    "readonly": [4],
     "isLegend": [4, "is-legend"],
     "tagName": [32]
   }, undefined, {

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;;;;;;;oBAyBJ,KAAK;mBASL,OAAO;;EA5B1B,kBAAkB,CAAC,QAAoC;IACrD,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;MAC5B,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;KACpE;GACF;EAiBD,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,QAAQ,GAAG,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;;IAEtD,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   * If input is required an asterisk is added at the end of the label\n   */\n  @Prop() readonly: 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.readonly ? 'span' : 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, i as isValidString } 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,23 @@ 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';
+    /**
+     * Set input error message
+     * @param errorMessage - errorMessage override
+     */
+    this.setErrorMessage = (errorMessage) => {
+      // Set error message
+      this.errorMessage = undefined;
+      // Does have a custom error message
+      if (!this.valid && errorMessage !== undefined) {
+        this.errorMessage = errorMessage;
+      }
+    };
     /**
      * Change checked value
      */
@@ -63,8 +75,10 @@ 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.errorMessage = undefined;
+    this.valid = undefined;
     this.checked = false;
   }
   handleValue(newValue) {
@@ -122,6 +136,27 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
     // update value
     this.value = this.options[newValue ? 1 : 0].value;
   }
+  /**
+   * 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-toggle> method "setError()" param "valid" must be a boolean');
+    }
+    else if (!isValidString(errorMessage)) {
+      throw new Error('<mg-input-toggle> method "setError()" param "errorMessage" must be a string');
+    }
+    else {
+      this.valid = valid;
+      this.inputValid.emit(valid);
+      this.setErrorMessage(valid ? undefined : errorMessage);
+    }
+  }
   /**
    * set checked state
    */
@@ -168,7 +203,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: this.errorMessage, 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 {
@@ -197,7 +232,10 @@ const MgInputToggle$1 = /*@__PURE__*/ proxyCustomElement(class MgInputToggle ext
     "helpText": [1, "help-text"],
     "classCollection": [32],
     "options": [32],
-    "checked": [32]
+    "errorMessage": [32],
+    "valid": [32],
+    "checked": [32],
+    "setError": [64]
   }, undefined, {
     "value": ["handleValue"],
     "items": ["validateItems"],