@govtechsg/sgds-web-component 3.30.1-rc.5 → 3.30.1-rc.7

package/react/components/Radio/sgds-radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-radio-group.js","names":["radioGroupStyles"],"sources":["../../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\nimport type { ISgdsRadioGroupChangeEventDetail } from \"./types\";\nexport type { ISgdsRadioGroupChangeEventDetail };\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n * @eventDetail {ISgdsRadioGroupChangeEventDetail} sgds-change\n * @event sgds-invalid - Emitted when the radio group's invalid state is set to true.\n * @event sgds-valid - Emitted when the radio group's invalid state is set to false.\n *\n */\nexport class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, radioGroupStyles];\n\n  /**@internal */\n  @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n\n  /**@internal */\n  @state() defaultValue = \"\";\n\n  /** The selected value of the control. */\n  @property({ reflect: true }) value = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Makes the input as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the radio group. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** Automatically focuses the selected radio input in the group when it becomes checked. */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this._updateCheckedRadio();\n  }\n  @watch(\"invalid\", { waitUntilFirstUpdate: true })\n  _handleInvalidChange() {\n    this._radios.forEach(r => (r.invalid = this.invalid));\n  }\n\n  @state() private _isTouched = false;\n  /**\n   * radio requries a custom _mixinResetFormControl as the update of input value\n   * requires to fire a reset event manually\n   * */\n  private _mixinResetFormControl() {\n    this.value = this.input.value = this.defaultValue;\n    this._updateInputValue(\"reset\");\n    this._mixinResetValidity(this.input);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.defaultValue = this.value;\n    this.addEventListener(\"sgds-blur\", () => {\n      this._isTouched = true;\n    });\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    const radios = this._radios;\n    radios.forEach((item, index) => {\n      if (radios.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case radios.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n    if (this.value) {\n      this._updateInputValue(\"change\");\n    }\n  }\n\n  @queryAssignedElements()\n  private _radios!: Array<SgdsRadio>;\n\n  private _handleRadioClick(event: MouseEvent) {\n    event.preventDefault();\n    const target = event.target as SgdsRadio;\n\n    if (target.disabled) {\n      return;\n    }\n\n    this.value = target.value;\n    this.emit<ISgdsRadioGroupChangeEventDetail>(\"sgds-change\", { detail: { value: this.value } });\n\n    this._updateInputValue();\n\n    const radios = this._radios;\n\n    radios.forEach(radio => {\n      return (radio.checked = radio === target);\n    });\n  }\n  /**\n   * when input value is set programatically, need to manually dispatch a change event\n   * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n   */\n  private _updateInputValue(eventName = \"change\") {\n    this.input.value = this.value;\n    this.input.dispatchEvent(new InputEvent(eventName));\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n      return;\n    }\n\n    const radios = this._radios.filter(radio => !radio.disabled);\n    const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n    //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n    const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n    let index = radios.indexOf(checkedRadio) + incr;\n    if (index < 0) {\n      index = radios.length - 1;\n    }\n    if (index > radios.length - 1) {\n      index = 0;\n    }\n\n    this._radios.forEach(radio => {\n      radio.checked = false;\n      radio.tabIndex = -1;\n    });\n\n    this.value = radios[index].value;\n    this.emit<ISgdsRadioGroupChangeEventDetail>(\"sgds-change\", { detail: { value: this.value } });\n    this._updateInputValue();\n    radios[index].checked = true;\n    radios[index].tabIndex = 0;\n    // preventDefault at the end to allow Tab\n    event.preventDefault();\n  }\n\n  private _handleSlotChange() {\n    const radios = this._radios;\n\n    radios.forEach(radio => {\n      radio.autofocus = this.autofocus;\n      radio.checked = radio.value === this.value;\n\n      return radio;\n    });\n    this._disabledChildRadios();\n    if (!radios.some(radio => radio.checked)) {\n      if (radios[0]) radios[0].tabIndex = 0;\n    }\n  }\n\n  private _updateCheckedRadio() {\n    const radios = this._radios;\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n    this._disabledChildRadios();\n  }\n\n  private _disabledChildRadios() {\n    if (this.disabled) {\n      const radios = this._radios;\n      radios.forEach(radio => (radio.disabled = this.disabled));\n    }\n  }\n\n  render() {\n    const defaultSlot = html`\n      <slot\n        class=\"radio-container\"\n        @click=${this._handleRadioClick}\n        @keydown=${this._handleKeyDown}\n        @slotchange=${this._handleSlotChange}\n        role=\"presentation\"\n      ></slot>\n    `;\n    return html`\n      <fieldset name=${this.name}>\n        <div class=\"label-hint-container\">\n          <label\n            class=${classMap({\n              \"form-label\": true,\n              required: this.required\n            })}\n          >\n            ${this.label}\n          </label>\n          ${this._renderHintText()}\n        </div>\n        ${defaultSlot}\n        <input\n          type=\"text\"\n          class=\"radio-group-validation-input ${classMap({\n            \"is-invalid\": this.hasFeedback && this.invalid\n          })}\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @change=${(e: Event) => super._mixinHandleChange(e)}\n          .value=${live(this.value)}\n          aria-describedby=${this.invalid && this.hasFeedback ? \"radio-group-feedback\" : `${this._controlId}Help`}\n        />\n        ${this.invalid && this.hasFeedback\n          ? html`\n              <div class=\"invalid-feedback-container\">\n                <slot name=\"invalidIcon\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path\n                      d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </slot>\n                <div id=\"radio-group-feedback\" class=\"invalid-feedback\">\n                  ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                </div>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsRadioGroup;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-radio-group.js","names":["radioGroupStyles"],"sources":["../../../../src/components/Radio/sgds-radio-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport radioGroupStyles from \"./radio-group.css\";\nimport SgdsRadio from \"./sgds-radio\";\nimport type { ISgdsRadioGroupChangeEventDetail } from \"./types\";\nexport type { ISgdsRadioGroupChangeEventDetail };\n\n/**\n * @summary RadioGroup group multiple radios so they function as a single form control.\n *\n * @slot default - The default slot where sgds-radio are placed.\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when the radio group's selected value changes.\n * @eventDetail {ISgdsRadioGroupChangeEventDetail} sgds-change\n * @event sgds-invalid - Emitted when the radio group's invalid state is set to true.\n * @event sgds-valid - Emitted when the radio group's invalid state is set to false.\n *\n */\nexport class SgdsRadioGroup extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, radioGroupStyles];\n\n  /**@internal */\n  @query(\"slot:not([name])\") defaultSlot: HTMLSlotElement;\n\n  /**@internal */\n  @state() defaultValue = \"\";\n\n  /** The selected value of the control. */\n  @property({ reflect: true }) value = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Makes the input as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the radio group. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** Automatically focuses the selected radio input in the group when it becomes checked. */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    this._updateCheckedRadio();\n    this._mixinSetFormValue();\n    await this.updateComplete;\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    this._mixinValidate(this.input);\n  }\n  @watch(\"invalid\", { waitUntilFirstUpdate: true })\n  _handleInvalidChange() {\n    this._radios.forEach(r => (r.invalid = this.invalid));\n  }\n\n  @state() private _isTouched = false;\n  /**\n   * radio requries a custom _mixinResetFormControl as the update of input value\n   * requires to fire a reset event manually\n   * */\n  private _mixinResetFormControl() {\n    this.value = this.input.value = this.defaultValue;\n    this._updateInputValue(\"reset\");\n    this._mixinResetValidity(this.input);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.defaultValue = this.value;\n    this.addEventListener(\"sgds-blur\", () => {\n      this._isTouched = true;\n    });\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    const radios = this._radios;\n    radios.forEach((item, index) => {\n      if (radios.length > 1) {\n        switch (index) {\n          case 0:\n            item.setAttribute(\"first-of-type\", \"\");\n            break;\n\n          case radios.length - 1:\n            item.setAttribute(\"last-of-type\", \"\");\n            break;\n\n          default:\n            item.setAttribute(\"nth-of-type\", \"\");\n        }\n      }\n    });\n    if (this.value) {\n      this._updateInputValue(\"change\");\n    }\n  }\n\n  @queryAssignedElements()\n  private _radios!: Array<SgdsRadio>;\n\n  private _handleRadioClick(event: MouseEvent) {\n    event.preventDefault();\n    const target = event.target as SgdsRadio;\n\n    if (target.disabled) {\n      return;\n    }\n\n    this.value = target.value;\n    this.emit<ISgdsRadioGroupChangeEventDetail>(\"sgds-change\", { detail: { value: this.value } });\n\n    this._updateInputValue();\n\n    const radios = this._radios;\n\n    radios.forEach(radio => {\n      return (radio.checked = radio === target);\n    });\n  }\n  /**\n   * when input value is set programatically, need to manually dispatch a change event\n   * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n   */\n  private _updateInputValue(eventName = \"change\") {\n    this.input.value = this.value;\n    this.input.dispatchEvent(new InputEvent(eventName));\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    if (![\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \" \"].includes(event.key)) {\n      return;\n    }\n\n    const radios = this._radios.filter(radio => !radio.disabled);\n    const checkedRadio = radios.find(radio => radio.checked) ?? radios[0];\n    //if eventkey is space, index increment is 0, if eventkey arrowup/arrowleft, index is -1, arrowright/arrowdown, index incr is 1\n    const incr = event.key === \" \" ? 0 : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key) ? -1 : 1;\n    let index = radios.indexOf(checkedRadio) + incr;\n    if (index < 0) {\n      index = radios.length - 1;\n    }\n    if (index > radios.length - 1) {\n      index = 0;\n    }\n\n    this._radios.forEach(radio => {\n      radio.checked = false;\n      radio.tabIndex = -1;\n    });\n\n    this.value = radios[index].value;\n    this.emit<ISgdsRadioGroupChangeEventDetail>(\"sgds-change\", { detail: { value: this.value } });\n    this._updateInputValue();\n    radios[index].checked = true;\n    radios[index].tabIndex = 0;\n    // preventDefault at the end to allow Tab\n    event.preventDefault();\n  }\n\n  private _handleSlotChange() {\n    const radios = this._radios;\n\n    radios.forEach(radio => {\n      radio.autofocus = this.autofocus;\n      radio.checked = radio.value === this.value;\n\n      return radio;\n    });\n    this._disabledChildRadios();\n    if (!radios.some(radio => radio.checked)) {\n      if (radios[0]) radios[0].tabIndex = 0;\n    }\n  }\n\n  private _updateCheckedRadio() {\n    const radios = this._radios;\n    radios.forEach(radio => (radio.checked = radio.value === this.value));\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n    this._disabledChildRadios();\n  }\n\n  private _disabledChildRadios() {\n    if (this.disabled) {\n      const radios = this._radios;\n      radios.forEach(radio => (radio.disabled = this.disabled));\n    }\n  }\n\n  render() {\n    const defaultSlot = html`\n      <slot\n        class=\"radio-container\"\n        @click=${this._handleRadioClick}\n        @keydown=${this._handleKeyDown}\n        @slotchange=${this._handleSlotChange}\n        role=\"presentation\"\n      ></slot>\n    `;\n    return html`\n      <fieldset name=${this.name}>\n        <div class=\"label-hint-container\">\n          <label\n            class=${classMap({\n              \"form-label\": true,\n              required: this.required\n            })}\n          >\n            ${this.label}\n          </label>\n          ${this._renderHintText()}\n        </div>\n        ${defaultSlot}\n        <input\n          type=\"text\"\n          class=\"radio-group-validation-input ${classMap({\n            \"is-invalid\": this.hasFeedback && this.invalid\n          })}\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @change=${(e: Event) => super._mixinHandleChange(e)}\n          .value=${live(this.value)}\n          aria-describedby=${this.invalid && this.hasFeedback ? \"radio-group-feedback\" : `${this._controlId}Help`}\n        />\n        ${this.invalid && this.hasFeedback\n          ? html`\n              <div class=\"invalid-feedback-container\">\n                <slot name=\"invalidIcon\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path\n                      d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </slot>\n                <div id=\"radio-group-feedback\" class=\"invalid-feedback\">\n                  ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                </div>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsRadioGroup;\n"],"mappings":"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"}

package/react/components/Textarea/sgds-textarea.cjs.js

@@ -131,8 +131,12 @@ var SgdsTextarea = class extends require_validatorMixin.SgdsFormValidatorMixin(r
 		this.setInvalid(false);
 	}
 	/** @internal */
-	_handleValueChange() {
-		this.updateComplete.then(() => this._setTextareaHeight());
+	async _handleValueChange() {
+		this._mixinSetFormValue();
+		await this.updateComplete;
+		this._setTextareaHeight();
+		if (this._mixinShouldSkipSgdsValidation()) return;
+		this._mixinValidate(this.input);
 	}
 	_renderHintText() {
 		const hintTextTemplate = lit_static_html_js.html` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;

package/react/components/Textarea/sgds-textarea.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-textarea.cjs.js","names":["SgdsFormValidatorMixin","FormControlElement","formTextControlStyles","textareaStyle","classMap","ifDefined","live","nothing","query","property","defaultValue","state","watch"],"sources":["../../../../src/components/Textarea/sgds-textarea.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport textareaStyle from \"./textarea.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\n\n/**\n * @summary Text areas allow for the collection of input longer than a single line.\n *\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when textarea is in focus.\n * @event sgds-blur - Emitted when textarea loses focus.\n * @event sgds-invalid - Emitted when the textarea's invalid state is set to true.\n * @event sgds-valid - Emitted when the textarea's invalid state is set to false.\n */\nexport class SgdsTextarea extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formTextControlStyles, textareaStyle];\n  /**@internal */\n  @query(\"textarea.form-control-group\") textarea: HTMLTextAreaElement;\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**The textarea's name attribute */\n  @property({ type: String, reflect: true }) name: string;\n  /**The textarea's value attribute. */\n  @property({ type: String, reflect: true }) value = \"\";\n  /**Sets the minimum length of the textarea */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the textarea. When maxlength is defined, a word count appears on bottom right of the input*/\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**Enables spell checking on the textarea */\n  @property({ type: Boolean, reflect: true }) spellcheck = false;\n  /** The number of rows to display by default. */\n  @property({ type: Number }) rows = 4;\n  /**The textarea's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"Placeholder\";\n  /** Custom feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n  /**Autofocus the textarea */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /** Makes the textarea readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n  /** Controls how the textarea can be resized. */\n  @property({ type: String, reflect: true }) resize: \"none\" | \"vertical\" | \"auto\" = \"vertical\";\n  /** The native textarea's inputmode attribute. It hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. */\n  @property({ type: String, reflect: true }) inputmode:\n    | \"none\"\n    | \"text\"\n    | \"decimal\"\n    | \"numeric\"\n    | \"tel\"\n    | \"search\"\n    | \"email\"\n    | \"url\";\n  /** The native textarea's autocorrect attribute. */\n  @property({ type: Boolean, reflect: true }) autocorrect: boolean;\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Makes the textarea as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the textarea. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** The textarea's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Sets focus on the textarea. */\n  public focus(options?: FocusOptions) {\n    this.textarea.focus(options);\n  }\n  /** Sets blur on the textarea. */\n  public blur() {\n    this.textarea.blur();\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  /** Selects all the text in the textarea. */\n  public select() {\n    this.textarea.select();\n  }\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-change\");\n    super._mixinHandleChange(e);\n  }\n  private _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-input\");\n    super._mixinHandleInputChange(e);\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleBlur() {\n    const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (sgdsBlur.defaultPrevented) return;\n\n    this.setInvalid(!this._mixinCheckValidity());\n    this._isTouched = true;\n  }\n\n  /** @internal */\n  @watch(\"rows\", { waitUntilFirstUpdate: true })\n  _handleRowsChange() {\n    this._setTextareaHeight();\n  }\n\n  private _setTextareaHeight() {\n    if (this.resize === \"auto\") {\n      this.textarea.style.height = \"auto\";\n      this.textarea.style.height = `${this.textarea.scrollHeight}px`;\n    } else {\n      (this.textarea.style.height as string | undefined) = undefined;\n    }\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  /** @internal */\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.updateComplete.then(() => this._setTextareaHeight());\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  private _wordCount() {\n    return html`\n      <div\n        class=\"form-text word-count ${classMap({\n          \"invalid-feedback\": this.invalid && this.hasFeedback\n        })}\"\n      >\n        ${this.value.length}/${this.maxlength}\n      </div>\n    `;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container m-width-256 ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        <label for=${this._controlId} class=\"form-label\">${this.label}</label>\n        <textarea\n          class=${classMap({\n            \"form-control-group\": true,\n            // \"form-control\": true,\n            \"is-invalid\": this.hasFeedback && this.invalid,\n            \"textarea-resize-none\": this.resize === \"none\",\n            \"textarea-resize-vertical\": this.resize === \"vertical\",\n            \"textarea-resize-auto\": this.resize === \"auto\",\n            readonly: this.readonly,\n            disabled: this.disabled\n          })}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          rows=${ifDefined(this.rows)}\n          placeholder=${ifDefined(this.placeholder)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          .value=${live(this.value)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          spellcheck=${ifDefined(this.spellcheck)}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          ?autofocus=${this.autofocus}\n          autocorrect=${ifDefined(this.autocorrect)}\n          inputmode=${ifDefined(this.inputmode)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n        ></textarea>\n        <div class=\"textarea-info-container\">\n          ${this.invalid && this.hasFeedback\n            ? html`\n                <div class=\"invalid-feedback-container\">\n                  <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n                  <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n                    ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                  </div>\n                </div>\n              `\n            : html`${this._renderHintText()}`}\n          ${this.maxlength > 0 ? this._wordCount() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTextarea;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-textarea.cjs.js","names":["SgdsFormValidatorMixin","FormControlElement","formTextControlStyles","textareaStyle","classMap","ifDefined","live","nothing","query","property","defaultValue","state","watch"],"sources":["../../../../src/components/Textarea/sgds-textarea.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport textareaStyle from \"./textarea.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\n\n/**\n * @summary Text areas allow for the collection of input longer than a single line.\n *\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when textarea is in focus.\n * @event sgds-blur - Emitted when textarea loses focus.\n * @event sgds-invalid - Emitted when the textarea's invalid state is set to true.\n * @event sgds-valid - Emitted when the textarea's invalid state is set to false.\n */\nexport class SgdsTextarea extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formTextControlStyles, textareaStyle];\n  /**@internal */\n  @query(\"textarea.form-control-group\") textarea: HTMLTextAreaElement;\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**The textarea's name attribute */\n  @property({ type: String, reflect: true }) name: string;\n  /**The textarea's value attribute. */\n  @property({ type: String, reflect: true }) value = \"\";\n  /**Sets the minimum length of the textarea */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the textarea. When maxlength is defined, a word count appears on bottom right of the input*/\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**Enables spell checking on the textarea */\n  @property({ type: Boolean, reflect: true }) spellcheck = false;\n  /** The number of rows to display by default. */\n  @property({ type: Number }) rows = 4;\n  /**The textarea's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"Placeholder\";\n  /** Custom feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n  /**Autofocus the textarea */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /** Makes the textarea readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n  /** Controls how the textarea can be resized. */\n  @property({ type: String, reflect: true }) resize: \"none\" | \"vertical\" | \"auto\" = \"vertical\";\n  /** The native textarea's inputmode attribute. It hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. */\n  @property({ type: String, reflect: true }) inputmode:\n    | \"none\"\n    | \"text\"\n    | \"decimal\"\n    | \"numeric\"\n    | \"tel\"\n    | \"search\"\n    | \"email\"\n    | \"url\";\n  /** The native textarea's autocorrect attribute. */\n  @property({ type: Boolean, reflect: true }) autocorrect: boolean;\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Makes the textarea as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the textarea. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** The textarea's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Sets focus on the textarea. */\n  public focus(options?: FocusOptions) {\n    this.textarea.focus(options);\n  }\n  /** Sets blur on the textarea. */\n  public blur() {\n    this.textarea.blur();\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  /** Selects all the text in the textarea. */\n  public select() {\n    this.textarea.select();\n  }\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-change\");\n    super._mixinHandleChange(e);\n  }\n  private _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-input\");\n    super._mixinHandleInputChange(e);\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleBlur() {\n    const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (sgdsBlur.defaultPrevented) return;\n\n    this.setInvalid(!this._mixinCheckValidity());\n    this._isTouched = true;\n  }\n\n  /** @internal */\n  @watch(\"rows\", { waitUntilFirstUpdate: true })\n  _handleRowsChange() {\n    this._setTextareaHeight();\n  }\n\n  private _setTextareaHeight() {\n    if (this.resize === \"auto\") {\n      this.textarea.style.height = \"auto\";\n      this.textarea.style.height = `${this.textarea.scrollHeight}px`;\n    } else {\n      (this.textarea.style.height as string | undefined) = undefined;\n    }\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  /** @internal */\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    this._mixinSetFormValue();\n    await this.updateComplete;\n    this._setTextareaHeight();\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    this._mixinValidate(this.input);\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  private _wordCount() {\n    return html`\n      <div\n        class=\"form-text word-count ${classMap({\n          \"invalid-feedback\": this.invalid && this.hasFeedback\n        })}\"\n      >\n        ${this.value.length}/${this.maxlength}\n      </div>\n    `;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container m-width-256 ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        <label for=${this._controlId} class=\"form-label\">${this.label}</label>\n        <textarea\n          class=${classMap({\n            \"form-control-group\": true,\n            // \"form-control\": true,\n            \"is-invalid\": this.hasFeedback && this.invalid,\n            \"textarea-resize-none\": this.resize === \"none\",\n            \"textarea-resize-vertical\": this.resize === \"vertical\",\n            \"textarea-resize-auto\": this.resize === \"auto\",\n            readonly: this.readonly,\n            disabled: this.disabled\n          })}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          rows=${ifDefined(this.rows)}\n          placeholder=${ifDefined(this.placeholder)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          .value=${live(this.value)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          spellcheck=${ifDefined(this.spellcheck)}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          ?autofocus=${this.autofocus}\n          autocorrect=${ifDefined(this.autocorrect)}\n          inputmode=${ifDefined(this.inputmode)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n        ></textarea>\n        <div class=\"textarea-info-container\">\n          ${this.invalid && this.hasFeedback\n            ? html`\n                <div class=\"invalid-feedback-container\">\n                  <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n                  <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n                    ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                  </div>\n                </div>\n              `\n            : html`${this._renderHintText()}`}\n          ${this.maxlength > 0 ? this._wordCount() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTextarea;\n"],"mappings":"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"}

package/react/components/Textarea/sgds-textarea.js

@@ -131,8 +131,12 @@ var SgdsTextarea = class extends SgdsFormValidatorMixin(FormControlElement) {
 		this.setInvalid(false);
 	}
 	/** @internal */
-	_handleValueChange() {
-		this.updateComplete.then(() => this._setTextareaHeight());
+	async _handleValueChange() {
+		this._mixinSetFormValue();
+		await this.updateComplete;
+		this._setTextareaHeight();
+		if (this._mixinShouldSkipSgdsValidation()) return;
+		this._mixinValidate(this.input);
 	}
 	_renderHintText() {
 		const hintTextTemplate = html$1` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;

package/react/components/Textarea/sgds-textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-textarea.js","names":["formTextControlStyles","textareaStyle"],"sources":["../../../../src/components/Textarea/sgds-textarea.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport textareaStyle from \"./textarea.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\n\n/**\n * @summary Text areas allow for the collection of input longer than a single line.\n *\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when textarea is in focus.\n * @event sgds-blur - Emitted when textarea loses focus.\n * @event sgds-invalid - Emitted when the textarea's invalid state is set to true.\n * @event sgds-valid - Emitted when the textarea's invalid state is set to false.\n */\nexport class SgdsTextarea extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formTextControlStyles, textareaStyle];\n  /**@internal */\n  @query(\"textarea.form-control-group\") textarea: HTMLTextAreaElement;\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**The textarea's name attribute */\n  @property({ type: String, reflect: true }) name: string;\n  /**The textarea's value attribute. */\n  @property({ type: String, reflect: true }) value = \"\";\n  /**Sets the minimum length of the textarea */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the textarea. When maxlength is defined, a word count appears on bottom right of the input*/\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**Enables spell checking on the textarea */\n  @property({ type: Boolean, reflect: true }) spellcheck = false;\n  /** The number of rows to display by default. */\n  @property({ type: Number }) rows = 4;\n  /**The textarea's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"Placeholder\";\n  /** Custom feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n  /**Autofocus the textarea */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /** Makes the textarea readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n  /** Controls how the textarea can be resized. */\n  @property({ type: String, reflect: true }) resize: \"none\" | \"vertical\" | \"auto\" = \"vertical\";\n  /** The native textarea's inputmode attribute. It hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. */\n  @property({ type: String, reflect: true }) inputmode:\n    | \"none\"\n    | \"text\"\n    | \"decimal\"\n    | \"numeric\"\n    | \"tel\"\n    | \"search\"\n    | \"email\"\n    | \"url\";\n  /** The native textarea's autocorrect attribute. */\n  @property({ type: Boolean, reflect: true }) autocorrect: boolean;\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Makes the textarea as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the textarea. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** The textarea's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Sets focus on the textarea. */\n  public focus(options?: FocusOptions) {\n    this.textarea.focus(options);\n  }\n  /** Sets blur on the textarea. */\n  public blur() {\n    this.textarea.blur();\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  /** Selects all the text in the textarea. */\n  public select() {\n    this.textarea.select();\n  }\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-change\");\n    super._mixinHandleChange(e);\n  }\n  private _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-input\");\n    super._mixinHandleInputChange(e);\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleBlur() {\n    const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (sgdsBlur.defaultPrevented) return;\n\n    this.setInvalid(!this._mixinCheckValidity());\n    this._isTouched = true;\n  }\n\n  /** @internal */\n  @watch(\"rows\", { waitUntilFirstUpdate: true })\n  _handleRowsChange() {\n    this._setTextareaHeight();\n  }\n\n  private _setTextareaHeight() {\n    if (this.resize === \"auto\") {\n      this.textarea.style.height = \"auto\";\n      this.textarea.style.height = `${this.textarea.scrollHeight}px`;\n    } else {\n      (this.textarea.style.height as string | undefined) = undefined;\n    }\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  /** @internal */\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.updateComplete.then(() => this._setTextareaHeight());\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  private _wordCount() {\n    return html`\n      <div\n        class=\"form-text word-count ${classMap({\n          \"invalid-feedback\": this.invalid && this.hasFeedback\n        })}\"\n      >\n        ${this.value.length}/${this.maxlength}\n      </div>\n    `;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container m-width-256 ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        <label for=${this._controlId} class=\"form-label\">${this.label}</label>\n        <textarea\n          class=${classMap({\n            \"form-control-group\": true,\n            // \"form-control\": true,\n            \"is-invalid\": this.hasFeedback && this.invalid,\n            \"textarea-resize-none\": this.resize === \"none\",\n            \"textarea-resize-vertical\": this.resize === \"vertical\",\n            \"textarea-resize-auto\": this.resize === \"auto\",\n            readonly: this.readonly,\n            disabled: this.disabled\n          })}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          rows=${ifDefined(this.rows)}\n          placeholder=${ifDefined(this.placeholder)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          .value=${live(this.value)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          spellcheck=${ifDefined(this.spellcheck)}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          ?autofocus=${this.autofocus}\n          autocorrect=${ifDefined(this.autocorrect)}\n          inputmode=${ifDefined(this.inputmode)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n        ></textarea>\n        <div class=\"textarea-info-container\">\n          ${this.invalid && this.hasFeedback\n            ? html`\n                <div class=\"invalid-feedback-container\">\n                  <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n                  <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n                    ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                  </div>\n                </div>\n              `\n            : html`${this._renderHintText()}`}\n          ${this.maxlength > 0 ? this._wordCount() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTextarea;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-textarea.js","names":["formTextControlStyles","textareaStyle"],"sources":["../../../../src/components/Textarea/sgds-textarea.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport textareaStyle from \"./textarea.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\n\n/**\n * @summary Text areas allow for the collection of input longer than a single line.\n *\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when textarea is in focus.\n * @event sgds-blur - Emitted when textarea loses focus.\n * @event sgds-invalid - Emitted when the textarea's invalid state is set to true.\n * @event sgds-valid - Emitted when the textarea's invalid state is set to false.\n */\nexport class SgdsTextarea extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formTextControlStyles, textareaStyle];\n  /**@internal */\n  @query(\"textarea.form-control-group\") textarea: HTMLTextAreaElement;\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**The textarea's name attribute */\n  @property({ type: String, reflect: true }) name: string;\n  /**The textarea's value attribute. */\n  @property({ type: String, reflect: true }) value = \"\";\n  /**Sets the minimum length of the textarea */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the textarea. When maxlength is defined, a word count appears on bottom right of the input*/\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**Enables spell checking on the textarea */\n  @property({ type: Boolean, reflect: true }) spellcheck = false;\n  /** The number of rows to display by default. */\n  @property({ type: Number }) rows = 4;\n  /**The textarea's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"Placeholder\";\n  /** Custom feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n  /**Autofocus the textarea */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /** Makes the textarea readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n  /** Controls how the textarea can be resized. */\n  @property({ type: String, reflect: true }) resize: \"none\" | \"vertical\" | \"auto\" = \"vertical\";\n  /** The native textarea's inputmode attribute. It hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. */\n  @property({ type: String, reflect: true }) inputmode:\n    | \"none\"\n    | \"text\"\n    | \"decimal\"\n    | \"numeric\"\n    | \"tel\"\n    | \"search\"\n    | \"email\"\n    | \"url\";\n  /** The native textarea's autocorrect attribute. */\n  @property({ type: Boolean, reflect: true }) autocorrect: boolean;\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Makes the textarea as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the textarea. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** The textarea's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Sets focus on the textarea. */\n  public focus(options?: FocusOptions) {\n    this.textarea.focus(options);\n  }\n  /** Sets blur on the textarea. */\n  public blur() {\n    this.textarea.blur();\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  /** Selects all the text in the textarea. */\n  public select() {\n    this.textarea.select();\n  }\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-change\");\n    super._mixinHandleChange(e);\n  }\n  private _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-input\");\n    super._mixinHandleInputChange(e);\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleBlur() {\n    const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (sgdsBlur.defaultPrevented) return;\n\n    this.setInvalid(!this._mixinCheckValidity());\n    this._isTouched = true;\n  }\n\n  /** @internal */\n  @watch(\"rows\", { waitUntilFirstUpdate: true })\n  _handleRowsChange() {\n    this._setTextareaHeight();\n  }\n\n  private _setTextareaHeight() {\n    if (this.resize === \"auto\") {\n      this.textarea.style.height = \"auto\";\n      this.textarea.style.height = `${this.textarea.scrollHeight}px`;\n    } else {\n      (this.textarea.style.height as string | undefined) = undefined;\n    }\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  /** @internal */\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    this._mixinSetFormValue();\n    await this.updateComplete;\n    this._setTextareaHeight();\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    this._mixinValidate(this.input);\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  private _wordCount() {\n    return html`\n      <div\n        class=\"form-text word-count ${classMap({\n          \"invalid-feedback\": this.invalid && this.hasFeedback\n        })}\"\n      >\n        ${this.value.length}/${this.maxlength}\n      </div>\n    `;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container m-width-256 ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        <label for=${this._controlId} class=\"form-label\">${this.label}</label>\n        <textarea\n          class=${classMap({\n            \"form-control-group\": true,\n            // \"form-control\": true,\n            \"is-invalid\": this.hasFeedback && this.invalid,\n            \"textarea-resize-none\": this.resize === \"none\",\n            \"textarea-resize-vertical\": this.resize === \"vertical\",\n            \"textarea-resize-auto\": this.resize === \"auto\",\n            readonly: this.readonly,\n            disabled: this.disabled\n          })}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          rows=${ifDefined(this.rows)}\n          placeholder=${ifDefined(this.placeholder)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          .value=${live(this.value)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          spellcheck=${ifDefined(this.spellcheck)}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          ?autofocus=${this.autofocus}\n          autocorrect=${ifDefined(this.autocorrect)}\n          inputmode=${ifDefined(this.inputmode)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n        ></textarea>\n        <div class=\"textarea-info-container\">\n          ${this.invalid && this.hasFeedback\n            ? html`\n                <div class=\"invalid-feedback-container\">\n                  <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n                  <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n                    ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                  </div>\n                </div>\n              `\n            : html`${this._renderHintText()}`}\n          ${this.maxlength > 0 ? this._wordCount() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTextarea;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,IAAa,eAAb,cAAkC,uBAAuB,kBAAkB,CAAC,CAA4B;;;EASnD,KAAA,QAAA;EAMM,KAAA,aAAA;EAEtB,KAAA,OAAA;EAEsB,KAAA,cAAA;EAEI,KAAA,kBAAA;EAEL,KAAA,YAAA;EAED,KAAA,WAAA;EAE2B,KAAA,SAAA;EAenE,KAAA,eAAA;EAE2C,KAAA,cAAA;EAGH,KAAA,WAAA;EAGE,KAAA,aAAA;EAGjB,KAAA,WAAA;EAEV,KAAA,aAAA;;;EAtDd,KAAA,SAAA;GAAC,GAAG,mBAAmB;GAAQA;GAAuBC;EAAa;;;CAyDnF,MAAa,SAAwB;EACnC,KAAK,SAAS,MAAM,OAAO;CAC7B;;CAEA,OAAc;EACZ,KAAK,SAAS,KAAK;CACrB;;;;;CAMA,iBAAiC;EAC/B,OAAO,KAAK,qBAAqB;CACnC;;;;CAIA,gBAAgC;EAC9B,OAAO,KAAK,oBAAoB;CAClC;;;;CAIA,IAAW,WAA0B;EACnC,OAAO,KAAK,kBAAkB;CAChC;;;;CAIA,IAAW,oBAAoB;EAC7B,OAAO,KAAK,2BAA2B;CACzC;;CAGA,SAAgB;EACd,KAAK,SAAS,OAAO;CACvB;CACA,eAAuB,GAAU;EAC/B,EAAE,eAAe;EACjB,KAAK,UAAU;CACjB;CAEA,cAAwB,GAAU;EAChC,KAAK,QAAQ,KAAK,MAAM;EACxB,KAAK,KAAK,aAAa;EACvB,MAAM,mBAAmB,CAAC;CAC5B;CACA,mBAA2B,GAAU;EACnC,KAAK,QAAQ,KAAK,MAAM;EACxB,KAAK,KAAK,YAAY;EACtB,MAAM,wBAAwB,CAAC;CACjC;CAEA,eAAuB;EACrB,KAAK,KAAK,YAAY;CACxB;CAEA,cAAsB;EACpB,MAAM,WAAW,KAAK,KAAK,aAAa,EAAE,YAAY,KAAK,CAAC;EAC5D,IAAI,KAAK,+BAA+B,GAAG;EAC3C,IAAI,SAAS,kBAAkB;EAE/B,KAAK,WAAW,CAAC,KAAK,oBAAoB,CAAC;EAC3C,KAAK,aAAa;CACpB;;CAGA,oBACoB;EAClB,KAAK,mBAAmB;CAC1B;CAEA,qBAA6B;EAC3B,IAAI,KAAK,WAAW,QAAQ;GAC1B,KAAK,SAAS,MAAM,SAAS;GAC7B,KAAK,SAAS,MAAM,SAAS,GAAG,KAAK,SAAS,aAAa;EAC7D,OACE,KAAM,SAAS,MAAM,SAAgC,KAAA;CAEzD;;CAEA,mBACmB;EACjB,IAAI,KAAK,+BAA+B,GAAG;EAC3C,IAAI,KAAK,YACP,KAAK,WAAW,CAAC,KAAK,oBAAoB,CAAC;CAE/C;;CAGA,wBACwB;EAEtB,KAAK,WAAW,KAAK;CACvB;;CAGA,MACM,qBAAqB;EACzB,KAAK,mBAAmB;EACxB,MAAM,KAAK;EACX,KAAK,mBAAmB;EACxB,IAAI,KAAK,+BAA+B,GAAG;EAC3C,KAAK,eAAe,KAAK,KAAK;CAChC;CAEA,kBAA4B;EAC1B,MAAM,mBAAmB,MAAI,aAAa,KAAK,WAAW,0BAA0B,KAAK,SAAS;EAClG,OAAO,KAAK,YAAY;CAC1B;CAEA,aAAqB;EACnB,OAAO,MAAI;;sCAEuB,SAAS,EACrC,oBAAoB,KAAK,WAAW,KAAK,YAC3C,CAAC,EAAE;;UAED,KAAK,MAAM,OAAO,GAAG,KAAK,UAAU;;;CAG5C;CACA,SAAS;EACP,OAAO,MAAI;;oDAEqC,SAAS,EACnD,UAAU,KAAK,SACjB,CAAC,EAAE;;qBAEU,KAAK,WAAW,sBAAsB,KAAK,MAAM;;kBAEpD,SAAS;GACf,sBAAsB;GAEtB,cAAc,KAAK,eAAe,KAAK;GACvC,wBAAwB,KAAK,WAAW;GACxC,4BAA4B,KAAK,WAAW;GAC5C,wBAAwB,KAAK,WAAW;GACxC,UAAU,KAAK;GACf,UAAU,KAAK;EACjB,CAAC,EAAE;eACE,KAAK,WAAW;iBACd,UAAU,KAAK,IAAI,EAAE;iBACrB,UAAU,KAAK,IAAI,EAAE;wBACd,UAAU,KAAK,WAAW,EAAE;sBAC9B,UAAU,KAAK,SAAS,EAAE;sBAC1B,UAAU,KAAK,SAAS,EAAE;mBAC7B,KAAK,KAAK,KAAK,EAAE;yBACX,KAAK,UAAU,SAAS,QAAQ;uBAClC,UAAU,KAAK,UAAU,EAAE;sBAC5B,KAAK,SAAS;sBACd,KAAK,SAAS;sBACd,KAAK,SAAS;uBACb,KAAK,UAAU;wBACd,UAAU,KAAK,WAAW,EAAE;sBAC9B,UAAU,KAAK,SAAS,EAAE;oBAC5B,MAAa,KAAK,mBAAmB,CAAC,EAAE;qBACvC,MAAa,KAAK,cAAc,CAAC,EAAE;sBAClC,MAAa,KAAK,eAAe,CAAC,EAAE;mBACvC,KAAK,aAAa;kBACnB,KAAK,YAAY;;;YAGvB,KAAK,WAAW,KAAK,cACnB,MAAI;;;6BAGW,KAAK,WAAW;sBACvB,KAAK,kBAAkB,KAAK,kBAAkB,KAAK,MAAM,kBAAkB;;;kBAInF,MAAI,GAAG,KAAK,gBAAgB,IAAI;YAClC,KAAK,YAAY,IAAI,KAAK,WAAW,IAAI,QAAQ;;;;CAI3D;AACF;AA1OG,WAAA,CAAA,MAAM,6BAA6B,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;AAInC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,QAAA,KAAA,CAAA;AAExC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,SAAA,KAAA,CAAA;AAExC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,aAAA,KAAA,CAAA;AAExC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,aAAA,KAAA,CAAA;AAExC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,cAAA,KAAA,CAAA;AAEzC,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,aAAA,WAAA,QAAA,KAAA,CAAA;AAEzB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;AAExC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,mBAAA,KAAA,CAAA;AAExC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,aAAA,KAAA,CAAA;AAEzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;AAEzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,UAAA,KAAA,CAAA;AAExC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,aAAA,KAAA,CAAA;AAUxC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;AAEzC,WAAA,CAAA,aAAa,CAAA,GAAA,aAAA,WAAA,gBAAA,KAAA,CAAA;AAGb,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,eAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,aAAA,WAAA,cAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,aAAA,WAAA,YAAA,KAAA,CAAA;AAE1B,WAAA,CAAA,MAAM,CAAA,GAAA,aAAA,WAAA,cAAA,KAAA,CAAA;AAuEN,WAAA,CAAA,MAAM,QAAQ,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,aAAA,WAAA,qBAAA,IAAA;AAc5C,WAAA,CAAA,MAAM,cAAc,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,aAAA,WAAA,oBAAA,IAAA;AASlD,WAAA,CAAA,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,aAAA,WAAA,yBAAA,IAAA;AAOhD,WAAA,CAAA,MAAM,SAAS,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,aAAA,WAAA,sBAAA,IAAA"}

package/react/utils/validatorMixin.cjs.js

@@ -84,9 +84,8 @@ const SgdsFormValidatorMixin = (superClass) => {
 			if (this._mixinShouldSkipSgdsValidation()) return;
 			this.inputValidationController.validateInput(input);
 		}
-		_mixinSetFormValue() {
-			const value = this.value;
-			this._internals.setFormValue(value);
+		_mixinSetFormValue(value) {
+			this._internals.setFormValue(value !== void 0 ? value : this.value);
 		}
 		_mixinCheckValidity() {
 			if (this._mixinShouldSkipSgdsValidation()) return true;

package/react/utils/validatorMixin.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"validatorMixin.cjs.js","names":["InputValidationController","queryAsync"],"sources":["../../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement, PropertyValueMap } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    private _internals: ElementInternals;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    // TypeScript requires mixin constructors to have rest parameter of type any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this._internals = this.attachInternals();\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      /** Idempotency guarantee — always create so reset can clear validity even with noValidate */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties: PropertyValueMap<this>) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n\n      this._mixinSetFormValue();\n\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset (always, regardless of noValidate)\n     * 2. invalid reactive prop is updated after the reset (always)\n     * 3. Reset touched state to false for a pristine form (always)\n     * 4. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check (skipped when noValidate)\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this._isTouched ? (this._isTouched = false) : null;\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue() {\n      const value = this.value as string | FormData | File;\n      this._internals.setFormValue(value);\n    }\n    _mixinCheckValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this._internals.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this._internals.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n    // Only check for noValidate prop\n    _mixinShouldSkipSgdsValidation() {\n      const form = this.closest(\"form\");\n\n      return form?.noValidate || this.noValidate;\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n    declare noValidate: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n  _mixinShouldSkipSgdsValidation(): boolean;\n}\n"],"mappings":";;;;;;;;;;AAaA,MAAa,0BAA6D,eAAkB;CAC1F,MAAM,6BAA6B,WAAW;;GACpB,KAAA,iBAAA;;EAUxB,YAAY,GAAG,MAAa;GAC1B,MAAM,GAAG,IAAI;GARM,KAAA,aAAA;GASnB,KAAK,aAAa,KAAK,gBAAgB;EACzC;EAEA,oBAA0B;GACxB,MAAM,kBAAkB;;GAGxB,KAAK,8BAA8B,IAAIA,kCAAAA,0BAA0B,IAAI;EACvE;EACA,MAAM,aAAa,mBAA2C;GAC5D,MAAM,aAAa,iBAAiB;GAGpC,KAAK,QACH,KAAK,WAAW,cAAc,OAAO,KACpC,MAAM,KAAK,aACZ,KAAK,WAAW,cAAc,UAAU,KACvC,MAAM,KAAK;GAEd,KAAK,mBAAmB;GAExB,IAAI,KAAK,+BAA+B,GAAG;GAE3C,KAAK,eAAe,KAAK,KAAK;EAChC;;;;EAKA,oBAAoB;GAClB,IAAI,KAAK,wBACP,KAAK,uBAAuB;QACvB;IACL,KAAK,QAAQ,KAAK;IAClB,KAAK,oBAAoB,KAAK,KAAK;GACrC;GACA,KAAK,mBAAmB;EAC1B;;;;;;;;;;EAWA,mBAAmB,GAAgB;GACjC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,aAAa,CAAC;EAC/C;;;;;;EAMA,wBAAwB,GAAgB;GACtC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,YAAY,CAAC;EAC9C;;;;;;;;;EASA,oBAAoB,OAA2D;GAC7E,KAAK,0BAA0B,cAAc;GAC7C,KAAK,0BAA0B,mBAAmB;GAClD,KAAwB,eAAa;GACrC,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EAEA,eAAe,OAA2D;GACxE,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EACA,qBAAqB;GACnB,MAAM,QAAQ,KAAK;GACnB,KAAK,WAAW,aAAa,KAAK;EACpC;EACA,sBAA+B;GAC7B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,cAAc;EACtD;EACA,uBAAgC;GAC9B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,eAAe;EACvD;EACA,oBAAmC;GACjC,OAAO,KAAK,WAAW;EACzB;EACA,6BAAqC;GACnC,OAAO,KAAK,WAAW;EACzB;EACA,kBAAkB,OAA4B,SAAkB,QAA4B;GAC1F,IAAI,KAAK,+BAA+B,GAAG;GAC3C,OAAO,KAAK,0BAA0B,YAAY,OAAO,SAAS,MAAM;EAC1E;EAEA,iCAAiC;GAG/B,OAFa,KAAK,QAAQ,MAEhB,CAAC,EAAE,cAAc,KAAK;EAClC;CAYF;CAjIGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,WAAAA,CAAW,YAAY,CAAA,GAAA,qBAAA,WAAA,aAAA,KAAA,CAAA;CACvBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,WAAAA,CAAW,uBAAuB,CAAA,GAAA,qBAAA,WAAA,uBAAA,KAAA,CAAA;CAkIrC,OAAO;AACT"}
+{"version":3,"file":"validatorMixin.cjs.js","names":["InputValidationController","queryAsync"],"sources":["../../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement, PropertyValueMap } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    private _internals: ElementInternals;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    // TypeScript requires mixin constructors to have rest parameter of type any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this._internals = this.attachInternals();\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      /** Idempotency guarantee — always create so reset can clear validity even with noValidate */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties: PropertyValueMap<this>) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n\n      this._mixinSetFormValue();\n\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset (always, regardless of noValidate)\n     * 2. invalid reactive prop is updated after the reset (always)\n     * 3. Reset touched state to false for a pristine form (always)\n     * 4. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check (skipped when noValidate)\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this._isTouched ? (this._isTouched = false) : null;\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue(value?: string | FormData | File | null) {\n      this._internals.setFormValue(value !== undefined ? value : (this.value as string | FormData | File));\n    }\n    _mixinCheckValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this._internals.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this._internals.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n    // Only check for noValidate prop\n    _mixinShouldSkipSgdsValidation() {\n      const form = this.closest(\"form\");\n\n      return form?.noValidate || this.noValidate;\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n    declare noValidate: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(value?: string | FormData | File | null): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n  _mixinShouldSkipSgdsValidation(): boolean;\n}\n"],"mappings":";;;;;;;;;;AAaA,MAAa,0BAA6D,eAAkB;CAC1F,MAAM,6BAA6B,WAAW;;GACpB,KAAA,iBAAA;;EAUxB,YAAY,GAAG,MAAa;GAC1B,MAAM,GAAG,IAAI;GARM,KAAA,aAAA;GASnB,KAAK,aAAa,KAAK,gBAAgB;EACzC;EAEA,oBAA0B;GACxB,MAAM,kBAAkB;;GAGxB,KAAK,8BAA8B,IAAIA,kCAAAA,0BAA0B,IAAI;EACvE;EACA,MAAM,aAAa,mBAA2C;GAC5D,MAAM,aAAa,iBAAiB;GAGpC,KAAK,QACH,KAAK,WAAW,cAAc,OAAO,KACpC,MAAM,KAAK,aACZ,KAAK,WAAW,cAAc,UAAU,KACvC,MAAM,KAAK;GAEd,KAAK,mBAAmB;GAExB,IAAI,KAAK,+BAA+B,GAAG;GAE3C,KAAK,eAAe,KAAK,KAAK;EAChC;;;;EAKA,oBAAoB;GAClB,IAAI,KAAK,wBACP,KAAK,uBAAuB;QACvB;IACL,KAAK,QAAQ,KAAK;IAClB,KAAK,oBAAoB,KAAK,KAAK;GACrC;GACA,KAAK,mBAAmB;EAC1B;;;;;;;;;;EAWA,mBAAmB,GAAgB;GACjC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,aAAa,CAAC;EAC/C;;;;;;EAMA,wBAAwB,GAAgB;GACtC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,YAAY,CAAC;EAC9C;;;;;;;;;EASA,oBAAoB,OAA2D;GAC7E,KAAK,0BAA0B,cAAc;GAC7C,KAAK,0BAA0B,mBAAmB;GAClD,KAAwB,eAAa;GACrC,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EAEA,eAAe,OAA2D;GACxE,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EACA,mBAAmB,OAAyC;GAC1D,KAAK,WAAW,aAAa,UAAU,KAAA,IAAY,QAAS,KAAK,KAAkC;EACrG;EACA,sBAA+B;GAC7B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,cAAc;EACtD;EACA,uBAAgC;GAC9B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,eAAe;EACvD;EACA,oBAAmC;GACjC,OAAO,KAAK,WAAW;EACzB;EACA,6BAAqC;GACnC,OAAO,KAAK,WAAW;EACzB;EACA,kBAAkB,OAA4B,SAAkB,QAA4B;GAC1F,IAAI,KAAK,+BAA+B,GAAG;GAC3C,OAAO,KAAK,0BAA0B,YAAY,OAAO,SAAS,MAAM;EAC1E;EAEA,iCAAiC;GAG/B,OAFa,KAAK,QAAQ,MAEhB,CAAC,EAAE,cAAc,KAAK;EAClC;CAYF;CAhIGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,WAAAA,CAAW,YAAY,CAAA,GAAA,qBAAA,WAAA,aAAA,KAAA,CAAA;CACvBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,WAAAA,CAAW,uBAAuB,CAAA,GAAA,qBAAA,WAAA,uBAAA,KAAA,CAAA;CAiIrC,OAAO;AACT"}

package/react/utils/validatorMixin.js

@@ -84,9 +84,8 @@ const SgdsFormValidatorMixin = (superClass) => {
 			if (this._mixinShouldSkipSgdsValidation()) return;
 			this.inputValidationController.validateInput(input);
 		}
-		_mixinSetFormValue() {
-			const value = this.value;
-			this._internals.setFormValue(value);
+		_mixinSetFormValue(value) {
+			this._internals.setFormValue(value !== void 0 ? value : this.value);
 		}
 		_mixinCheckValidity() {
 			if (this._mixinShouldSkipSgdsValidation()) return true;

package/react/utils/validatorMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"validatorMixin.js","names":[],"sources":["../../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement, PropertyValueMap } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    private _internals: ElementInternals;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    // TypeScript requires mixin constructors to have rest parameter of type any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this._internals = this.attachInternals();\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      /** Idempotency guarantee — always create so reset can clear validity even with noValidate */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties: PropertyValueMap<this>) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n\n      this._mixinSetFormValue();\n\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset (always, regardless of noValidate)\n     * 2. invalid reactive prop is updated after the reset (always)\n     * 3. Reset touched state to false for a pristine form (always)\n     * 4. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check (skipped when noValidate)\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this._isTouched ? (this._isTouched = false) : null;\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue() {\n      const value = this.value as string | FormData | File;\n      this._internals.setFormValue(value);\n    }\n    _mixinCheckValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this._internals.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this._internals.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n    // Only check for noValidate prop\n    _mixinShouldSkipSgdsValidation() {\n      const form = this.closest(\"form\");\n\n      return form?.noValidate || this.noValidate;\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n    declare noValidate: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n  _mixinShouldSkipSgdsValidation(): boolean;\n}\n"],"mappings":";;;;;;;;;;AAaA,MAAa,0BAA6D,eAAkB;CAC1F,MAAM,6BAA6B,WAAW;;GACpB,KAAA,iBAAA;;EAUxB,YAAY,GAAG,MAAa;GAC1B,MAAM,GAAG,IAAI;GARM,KAAA,aAAA;GASnB,KAAK,aAAa,KAAK,gBAAgB;EACzC;EAEA,oBAA0B;GACxB,MAAM,kBAAkB;;GAGxB,KAAK,8BAA8B,IAAI,0BAA0B,IAAI;EACvE;EACA,MAAM,aAAa,mBAA2C;GAC5D,MAAM,aAAa,iBAAiB;GAGpC,KAAK,QACH,KAAK,WAAW,cAAc,OAAO,KACpC,MAAM,KAAK,aACZ,KAAK,WAAW,cAAc,UAAU,KACvC,MAAM,KAAK;GAEd,KAAK,mBAAmB;GAExB,IAAI,KAAK,+BAA+B,GAAG;GAE3C,KAAK,eAAe,KAAK,KAAK;EAChC;;;;EAKA,oBAAoB;GAClB,IAAI,KAAK,wBACP,KAAK,uBAAuB;QACvB;IACL,KAAK,QAAQ,KAAK;IAClB,KAAK,oBAAoB,KAAK,KAAK;GACrC;GACA,KAAK,mBAAmB;EAC1B;;;;;;;;;;EAWA,mBAAmB,GAAgB;GACjC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,aAAa,CAAC;EAC/C;;;;;;EAMA,wBAAwB,GAAgB;GACtC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,YAAY,CAAC;EAC9C;;;;;;;;;EASA,oBAAoB,OAA2D;GAC7E,KAAK,0BAA0B,cAAc;GAC7C,KAAK,0BAA0B,mBAAmB;GAClD,KAAwB,eAAa;GACrC,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EAEA,eAAe,OAA2D;GACxE,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EACA,qBAAqB;GACnB,MAAM,QAAQ,KAAK;GACnB,KAAK,WAAW,aAAa,KAAK;EACpC;EACA,sBAA+B;GAC7B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,cAAc;EACtD;EACA,uBAAgC;GAC9B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,eAAe;EACvD;EACA,oBAAmC;GACjC,OAAO,KAAK,WAAW;EACzB;EACA,6BAAqC;GACnC,OAAO,KAAK,WAAW;EACzB;EACA,kBAAkB,OAA4B,SAAkB,QAA4B;GAC1F,IAAI,KAAK,+BAA+B,GAAG;GAC3C,OAAO,KAAK,0BAA0B,YAAY,OAAO,SAAS,MAAM;EAC1E;EAEA,iCAAiC;GAG/B,OAFa,KAAK,QAAQ,MAEhB,CAAC,EAAE,cAAc,KAAK;EAClC;CAYF;CAjIG,WAAA,CAAA,WAAW,YAAY,CAAA,GAAA,qBAAA,WAAA,aAAA,KAAA,CAAA;CACvB,WAAA,CAAA,WAAW,uBAAuB,CAAA,GAAA,qBAAA,WAAA,uBAAA,KAAA,CAAA;CAkIrC,OAAO;AACT"}
+{"version":3,"file":"validatorMixin.js","names":[],"sources":["../../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement, PropertyValueMap } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    private _internals: ElementInternals;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    // TypeScript requires mixin constructors to have rest parameter of type any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this._internals = this.attachInternals();\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      /** Idempotency guarantee — always create so reset can clear validity even with noValidate */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties: PropertyValueMap<this>) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n\n      this._mixinSetFormValue();\n\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset (always, regardless of noValidate)\n     * 2. invalid reactive prop is updated after the reset (always)\n     * 3. Reset touched state to false for a pristine form (always)\n     * 4. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check (skipped when noValidate)\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this._isTouched ? (this._isTouched = false) : null;\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue(value?: string | FormData | File | null) {\n      this._internals.setFormValue(value !== undefined ? value : (this.value as string | FormData | File));\n    }\n    _mixinCheckValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this._internals.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this._internals.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n    // Only check for noValidate prop\n    _mixinShouldSkipSgdsValidation() {\n      const form = this.closest(\"form\");\n\n      return form?.noValidate || this.noValidate;\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n    declare noValidate: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(value?: string | FormData | File | null): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n  _mixinShouldSkipSgdsValidation(): boolean;\n}\n"],"mappings":";;;;;;;;;;AAaA,MAAa,0BAA6D,eAAkB;CAC1F,MAAM,6BAA6B,WAAW;;GACpB,KAAA,iBAAA;;EAUxB,YAAY,GAAG,MAAa;GAC1B,MAAM,GAAG,IAAI;GARM,KAAA,aAAA;GASnB,KAAK,aAAa,KAAK,gBAAgB;EACzC;EAEA,oBAA0B;GACxB,MAAM,kBAAkB;;GAGxB,KAAK,8BAA8B,IAAI,0BAA0B,IAAI;EACvE;EACA,MAAM,aAAa,mBAA2C;GAC5D,MAAM,aAAa,iBAAiB;GAGpC,KAAK,QACH,KAAK,WAAW,cAAc,OAAO,KACpC,MAAM,KAAK,aACZ,KAAK,WAAW,cAAc,UAAU,KACvC,MAAM,KAAK;GAEd,KAAK,mBAAmB;GAExB,IAAI,KAAK,+BAA+B,GAAG;GAE3C,KAAK,eAAe,KAAK,KAAK;EAChC;;;;EAKA,oBAAoB;GAClB,IAAI,KAAK,wBACP,KAAK,uBAAuB;QACvB;IACL,KAAK,QAAQ,KAAK;IAClB,KAAK,oBAAoB,KAAK,KAAK;GACrC;GACA,KAAK,mBAAmB;EAC1B;;;;;;;;;;EAWA,mBAAmB,GAAgB;GACjC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,aAAa,CAAC;EAC/C;;;;;;EAMA,wBAAwB,GAAgB;GACtC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,YAAY,CAAC;EAC9C;;;;;;;;;EASA,oBAAoB,OAA2D;GAC7E,KAAK,0BAA0B,cAAc;GAC7C,KAAK,0BAA0B,mBAAmB;GAClD,KAAwB,eAAa;GACrC,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EAEA,eAAe,OAA2D;GACxE,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EACA,mBAAmB,OAAyC;GAC1D,KAAK,WAAW,aAAa,UAAU,KAAA,IAAY,QAAS,KAAK,KAAkC;EACrG;EACA,sBAA+B;GAC7B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,cAAc;EACtD;EACA,uBAAgC;GAC9B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,eAAe;EACvD;EACA,oBAAmC;GACjC,OAAO,KAAK,WAAW;EACzB;EACA,6BAAqC;GACnC,OAAO,KAAK,WAAW;EACzB;EACA,kBAAkB,OAA4B,SAAkB,QAA4B;GAC1F,IAAI,KAAK,+BAA+B,GAAG;GAC3C,OAAO,KAAK,0BAA0B,YAAY,OAAO,SAAS,MAAM;EAC1E;EAEA,iCAAiC;GAG/B,OAFa,KAAK,QAAQ,MAEhB,CAAC,EAAE,cAAc,KAAK;EAClC;CAYF;CAhIG,WAAA,CAAA,WAAW,YAAY,CAAA,GAAA,qBAAA,WAAA,aAAA,KAAA,CAAA;CACvB,WAAA,CAAA,WAAW,uBAAuB,CAAA,GAAA,qBAAA,WAAA,uBAAA,KAAA,CAAA;CAiIrC,OAAO;AACT"}

package/types/react.d.ts

@@ -375,7 +375,7 @@ export interface SgdsCheckboxGroupProps extends SgdsBaseProps {
 // ── Checkbox ─────────────────────────────────────────────────────────────
 
 export interface SgdsCheckboxProps extends SgdsBaseProps {
-  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */
+  /** Value submitted in FormData when the checkbox is checked. Defaults to `"on"` when not set, matching native checkbox behaviour. When unchecked, the key is absent from FormData. */
   value?: string;
   /** Draws the checkbox in a checked state. */
   checked?: boolean;

package/utils/validatorMixin.d.ts

@@ -15,7 +15,7 @@ export declare class ToBeValidatedElementInterface {
     _mixinHandleInputChange(e: Event): void;
     _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;
     _mixinValidate(input: HTMLInputElement | SgdsInput): void;
-    _mixinSetFormValue(): void;
+    _mixinSetFormValue(value?: string | FormData | File | null): void;
     _mixinCheckValidity(): boolean;
     _mixinReportValidity(): boolean;
     _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;

package/utils/validatorMixin.js

@@ -83,9 +83,8 @@ const SgdsFormValidatorMixin = (superClass) => {
 			if (this._mixinShouldSkipSgdsValidation()) return;
 			this.inputValidationController.validateInput(input);
 		}
-		_mixinSetFormValue() {
-			const value = this.value;
-			this._internals.setFormValue(value);
+		_mixinSetFormValue(value) {
+			this._internals.setFormValue(value !== void 0 ? value : this.value);
 		}
 		_mixinCheckValidity() {
 			if (this._mixinShouldSkipSgdsValidation()) return true;

package/utils/validatorMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"validatorMixin.js","names":[],"sources":["../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement, PropertyValueMap } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    private _internals: ElementInternals;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    // TypeScript requires mixin constructors to have rest parameter of type any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this._internals = this.attachInternals();\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      /** Idempotency guarantee — always create so reset can clear validity even with noValidate */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties: PropertyValueMap<this>) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n\n      this._mixinSetFormValue();\n\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset (always, regardless of noValidate)\n     * 2. invalid reactive prop is updated after the reset (always)\n     * 3. Reset touched state to false for a pristine form (always)\n     * 4. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check (skipped when noValidate)\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this._isTouched ? (this._isTouched = false) : null;\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue() {\n      const value = this.value as string | FormData | File;\n      this._internals.setFormValue(value);\n    }\n    _mixinCheckValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this._internals.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this._internals.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n    // Only check for noValidate prop\n    _mixinShouldSkipSgdsValidation() {\n      const form = this.closest(\"form\");\n\n      return form?.noValidate || this.noValidate;\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n    declare noValidate: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n  _mixinShouldSkipSgdsValidation(): boolean;\n}\n"],"mappings":";;;;;;;;;AAaA,MAAa,0BAA6D,eAAkB;CAC1F,MAAM,6BAA6B,WAAW;;GACpB,KAAA,iBAAA;;EAUxB,YAAY,GAAG,MAAa;GAC1B,MAAM,GAAG,IAAI;GARM,KAAA,aAAA;GASnB,KAAK,aAAa,KAAK,gBAAgB;EACzC;EAEA,oBAA0B;GACxB,MAAM,kBAAkB;;GAGxB,KAAK,8BAA8B,IAAI,0BAA0B,IAAI;EACvE;EACA,MAAM,aAAa,mBAA2C;GAC5D,MAAM,aAAa,iBAAiB;GAGpC,KAAK,QACH,KAAK,WAAW,cAAc,OAAO,KACpC,MAAM,KAAK,aACZ,KAAK,WAAW,cAAc,UAAU,KACvC,MAAM,KAAK;GAEd,KAAK,mBAAmB;GAExB,IAAI,KAAK,+BAA+B,GAAG;GAE3C,KAAK,eAAe,KAAK,KAAK;EAChC;;;;EAKA,oBAAoB;GAClB,IAAI,KAAK,wBACP,KAAK,uBAAuB;QACvB;IACL,KAAK,QAAQ,KAAK;IAClB,KAAK,oBAAoB,KAAK,KAAK;GACrC;GACA,KAAK,mBAAmB;EAC1B;;;;;;;;;;EAWA,mBAAmB,GAAgB;GACjC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,aAAa,CAAC;EAC/C;;;;;;EAMA,wBAAwB,GAAgB;GACtC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,YAAY,CAAC;EAC9C;;;;;;;;;EASA,oBAAoB,OAA2D;GAC7E,KAAK,0BAA0B,cAAc;GAC7C,KAAK,0BAA0B,mBAAmB;GAClD,KAAwB,eAAa;GACrC,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EAEA,eAAe,OAA2D;GACxE,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EACA,qBAAqB;GACnB,MAAM,QAAQ,KAAK;GACnB,KAAK,WAAW,aAAa,KAAK;EACpC;EACA,sBAA+B;GAC7B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,cAAc;EACtD;EACA,uBAAgC;GAC9B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,eAAe;EACvD;EACA,oBAAmC;GACjC,OAAO,KAAK,WAAW;EACzB;EACA,6BAAqC;GACnC,OAAO,KAAK,WAAW;EACzB;EACA,kBAAkB,OAA4B,SAAkB,QAA4B;GAC1F,IAAI,KAAK,+BAA+B,GAAG;GAC3C,OAAO,KAAK,0BAA0B,YAAY,OAAO,SAAS,MAAM;EAC1E;EAEA,iCAAiC;GAG/B,OAFa,KAAK,QAAQ,MAEhB,CAAC,EAAE,cAAc,KAAK;EAClC;CAYF;CAjIG,WAAA,CAAA,WAAW,YAAY,CAAA,GAAA,qBAAA,WAAA,aAAA,KAAA,CAAA;CACvB,WAAA,CAAA,WAAW,uBAAuB,CAAA,GAAA,qBAAA,WAAA,uBAAA,KAAA,CAAA;CAkIrC,OAAO;AACT"}
+{"version":3,"file":"validatorMixin.js","names":[],"sources":["../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement, PropertyValueMap } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    private _internals: ElementInternals;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    // TypeScript requires mixin constructors to have rest parameter of type any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this._internals = this.attachInternals();\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      /** Idempotency guarantee — always create so reset can clear validity even with noValidate */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties: PropertyValueMap<this>) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n\n      this._mixinSetFormValue();\n\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset (always, regardless of noValidate)\n     * 2. invalid reactive prop is updated after the reset (always)\n     * 3. Reset touched state to false for a pristine form (always)\n     * 4. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check (skipped when noValidate)\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this._isTouched ? (this._isTouched = false) : null;\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue(value?: string | FormData | File | null) {\n      this._internals.setFormValue(value !== undefined ? value : (this.value as string | FormData | File));\n    }\n    _mixinCheckValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this._internals.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this._internals.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n    // Only check for noValidate prop\n    _mixinShouldSkipSgdsValidation() {\n      const form = this.closest(\"form\");\n\n      return form?.noValidate || this.noValidate;\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n    declare noValidate: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(value?: string | FormData | File | null): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n  _mixinShouldSkipSgdsValidation(): boolean;\n}\n"],"mappings":";;;;;;;;;AAaA,MAAa,0BAA6D,eAAkB;CAC1F,MAAM,6BAA6B,WAAW;;GACpB,KAAA,iBAAA;;EAUxB,YAAY,GAAG,MAAa;GAC1B,MAAM,GAAG,IAAI;GARM,KAAA,aAAA;GASnB,KAAK,aAAa,KAAK,gBAAgB;EACzC;EAEA,oBAA0B;GACxB,MAAM,kBAAkB;;GAGxB,KAAK,8BAA8B,IAAI,0BAA0B,IAAI;EACvE;EACA,MAAM,aAAa,mBAA2C;GAC5D,MAAM,aAAa,iBAAiB;GAGpC,KAAK,QACH,KAAK,WAAW,cAAc,OAAO,KACpC,MAAM,KAAK,aACZ,KAAK,WAAW,cAAc,UAAU,KACvC,MAAM,KAAK;GAEd,KAAK,mBAAmB;GAExB,IAAI,KAAK,+BAA+B,GAAG;GAE3C,KAAK,eAAe,KAAK,KAAK;EAChC;;;;EAKA,oBAAoB;GAClB,IAAI,KAAK,wBACP,KAAK,uBAAuB;QACvB;IACL,KAAK,QAAQ,KAAK;IAClB,KAAK,oBAAoB,KAAK,KAAK;GACrC;GACA,KAAK,mBAAmB;EAC1B;;;;;;;;;;EAWA,mBAAmB,GAAgB;GACjC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,aAAa,CAAC;EAC/C;;;;;;EAMA,wBAAwB,GAAgB;GACtC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,YAAY,CAAC;EAC9C;;;;;;;;;EASA,oBAAoB,OAA2D;GAC7E,KAAK,0BAA0B,cAAc;GAC7C,KAAK,0BAA0B,mBAAmB;GAClD,KAAwB,eAAa;GACrC,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EAEA,eAAe,OAA2D;GACxE,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EACA,mBAAmB,OAAyC;GAC1D,KAAK,WAAW,aAAa,UAAU,KAAA,IAAY,QAAS,KAAK,KAAkC;EACrG;EACA,sBAA+B;GAC7B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,cAAc;EACtD;EACA,uBAAgC;GAC9B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,eAAe;EACvD;EACA,oBAAmC;GACjC,OAAO,KAAK,WAAW;EACzB;EACA,6BAAqC;GACnC,OAAO,KAAK,WAAW;EACzB;EACA,kBAAkB,OAA4B,SAAkB,QAA4B;GAC1F,IAAI,KAAK,+BAA+B,GAAG;GAC3C,OAAO,KAAK,0BAA0B,YAAY,OAAO,SAAS,MAAM;EAC1E;EAEA,iCAAiC;GAG/B,OAFa,KAAK,QAAQ,MAEhB,CAAC,EAAE,cAAc,KAAK;EAClC;CAYF;CAhIG,WAAA,CAAA,WAAW,YAAY,CAAA,GAAA,qBAAA,WAAA,aAAA,KAAA,CAAA;CACvB,WAAA,CAAA,WAAW,uBAAuB,CAAA,GAAA,qBAAA,WAAA,uBAAA,KAAA,CAAA;CAiIrC,OAAO;AACT"}