@govtechsg/sgds-web-component 3.11.0 → 3.12.0-rc.0

package/react/utils/inputValidationController.js

@@ -5,7 +5,8 @@
 class InputValidationController {
     constructor(host, options) {
         (this.host = host).addController(this);
-        this._internals = this.host.attachInternals();
+        // Use the internals from the host if it implements the mixin
+        this._internals = host._internals || this.host.attachInternals();
         this.options = Object.assign({ setInvalid: (host, value) => {
                 host.invalid = value;
             }, value: (host) => {

package/react/utils/inputValidationController.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputValidationController.js","sources":["../../../src/utils/inputValidationController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\";\nimport { SgdsFormControl } from \"./formSubmitController\";\nimport { SgdsCheckbox, SgdsInput } from \"../components\";\n\n/**\n * SGDS custom form validation methods and behaviours\n */\nexport class InputValidationController implements ReactiveController {\n  host: ReactiveControllerHost & HTMLElement;\n  _internals: ElementInternals;\n  validationError: keyof ValidityState;\n  options: InputValidationControllerOptions;\n\n  constructor(host: ReactiveControllerHost & HTMLElement, options?: Partial<InputValidationControllerOptions>) {\n    (this.host = host).addController(this);\n    this._internals = this.host.attachInternals();\n    this.options = {\n      setInvalid: (host: SgdsFormControl, value: boolean) => {\n        host.invalid = value;\n      },\n      value: (host: SgdsFormControl) => {\n        return host.value;\n      },\n      input: (host: SgdsFormControl) => host.input,\n      ...options\n    };\n  }\n\n  hostConnected(): void {\n    this.host.addEventListener(\"invalid\", e => this.handleInvalid(e));\n  }\n\n  hostDisconnected(): void {\n    this.host.removeEventListener(\"invalid\", e => this.handleInvalid(e));\n  }\n  /**\n   * Prevents the native browser error message pop up when reportValidity() called by\n   * associated form or the component's reportValidity during constraint validation\n   * Sets invalid reactive prop to true\n   */\n  handleInvalid(e: Event) {\n    e.preventDefault();\n    this.options.setInvalid(this.host, true);\n  }\n\n  /**\n   * Sets invalid to false when invoked and\n   * Updates the ValidityState based on new value, but\n   * does not update invalid reactive prop\n   * @param e\n   */\n  handleInput(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.options.setInvalid(this.host, false);\n    this.validateInput(input);\n  }\n  /**\n   * Validate the input's new value after onChange and\n   * update invalid reactive prop\n   * @param e\n   */\n  handleChange(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.validateInput(input);\n    this.options.setInvalid(this.host, !this.checkValidity());\n  }\n\n  get form() {\n    return this._internals.form;\n  }\n\n  get validity() {\n    return this._internals.validity;\n  }\n\n  get validationMessage() {\n    return this._internals.validationMessage;\n  }\n\n  get willValidate() {\n    return this._internals.willValidate;\n  }\n  /**\n   * Checks the validity and updates the invalid reactive prop of form components\n   */\n  updateInvalidState() {\n    this.options.setInvalid(this.host, !this.checkValidity());\n  }\n  /**\n   * Resets the ValidityState of the control\n   */\n  resetValidity() {\n    return this._internals.setValidity({});\n  }\n  /**\n   * Reports the validity\n   */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n  /**\n   * Reports the validity with a error popup message\n   */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n  setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n    return this._internals.setValidity(flags, message, anchor);\n  }\n  /**\n   * Sets the form control value into FormData,\n   * making the value of control accessible via FormData\n   */\n  setFormValue() {\n    const value = this.options.value(this.host) as string | FormData | File;\n    this._internals.setFormValue(value);\n  }\n  /**\n   * Updates the ValidityState of the input in form component at current state\n   */\n  validateInput(input) {\n    /** When the form control is disabled, its always valid */\n    if (this.options.input(this.host).disabled) {\n      return this._internals.setValidity({});\n    }\n    // get the validity of the internal <input>\n    const validState = input.validity;\n    // if the input is invalid, show the correct error\n    if (!validState.valid) {\n      // loop through the error reasons\n      for (const state in validState) {\n        // if there is an error and corresponding attribute holding\n        // the message\n        if (validState[state]) {\n          this.validationError = state.toString() as keyof ValidityState;\n          // set the validity error reason and the corresponding\n          // message\n          this._internals.setValidity({ [this.validationError]: true }, input.validationMessage, input);\n        }\n      }\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n}\n\nexport interface InputValidationControllerOptions {\n  /** A function that sets the value of host invalid reactive prop */\n  setInvalid: (host: ReactiveControllerHost & HTMLElement, value: boolean) => void;\n  /** A function that gets the value of host value reactive prop */\n  value: (host: ReactiveControllerHost & HTMLElement) => unknown;\n  /** A function that gets the input control of host value reactive prop */\n  input: (host: ReactiveController & HTMLElement) => HTMLInputElement | SgdsInput | SgdsCheckbox;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"inputValidationController.js","sources":["../../../src/utils/inputValidationController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\";\nimport { SgdsFormControl } from \"./formSubmitController\";\nimport { SgdsCheckbox, SgdsInput } from \"../components\";\n\ninterface HostWithInternals extends ReactiveControllerHost, HTMLElement {\n  _internals?: ElementInternals;\n}\n\n/**\n * SGDS custom form validation methods and behaviours\n */\nexport class InputValidationController implements ReactiveController {\n  host: ReactiveControllerHost & HTMLElement;\n  _internals: ElementInternals;\n  validationError: keyof ValidityState;\n  options: InputValidationControllerOptions;\n\n  constructor(host: ReactiveControllerHost & HTMLElement, options?: Partial<InputValidationControllerOptions>) {\n    (this.host = host).addController(this);\n    // Use the internals from the host if it implements the mixin\n    this._internals = (host as HostWithInternals)._internals || this.host.attachInternals();\n    this.options = {\n      setInvalid: (host: SgdsFormControl, value: boolean) => {\n        host.invalid = value;\n      },\n      value: (host: SgdsFormControl) => {\n        return host.value;\n      },\n      input: (host: SgdsFormControl) => host.input,\n      ...options\n    };\n  }\n\n  hostConnected(): void {\n    this.host.addEventListener(\"invalid\", e => this.handleInvalid(e));\n  }\n\n  hostDisconnected(): void {\n    this.host.removeEventListener(\"invalid\", e => this.handleInvalid(e));\n  }\n  /**\n   * Prevents the native browser error message pop up when reportValidity() called by\n   * associated form or the component's reportValidity during constraint validation\n   * Sets invalid reactive prop to true\n   */\n  handleInvalid(e: Event) {\n    e.preventDefault();\n    this.options.setInvalid(this.host, true);\n  }\n\n  /**\n   * Sets invalid to false when invoked and\n   * Updates the ValidityState based on new value, but\n   * does not update invalid reactive prop\n   * @param e\n   */\n  handleInput(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.options.setInvalid(this.host, false);\n    this.validateInput(input);\n  }\n  /**\n   * Validate the input's new value after onChange and\n   * update invalid reactive prop\n   * @param e\n   */\n  handleChange(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.validateInput(input);\n    this.options.setInvalid(this.host, !this.checkValidity());\n  }\n\n  get form() {\n    return this._internals.form;\n  }\n\n  get validity() {\n    return this._internals.validity;\n  }\n\n  get validationMessage() {\n    return this._internals.validationMessage;\n  }\n\n  get willValidate() {\n    return this._internals.willValidate;\n  }\n  /**\n   * Checks the validity and updates the invalid reactive prop of form components\n   */\n  updateInvalidState() {\n    this.options.setInvalid(this.host, !this.checkValidity());\n  }\n  /**\n   * Resets the ValidityState of the control\n   */\n  resetValidity() {\n    return this._internals.setValidity({});\n  }\n  /**\n   * Reports the validity\n   */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n  /**\n   * Reports the validity with a error popup message\n   */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n  setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n    return this._internals.setValidity(flags, message, anchor);\n  }\n  /**\n   * Sets the form control value into FormData,\n   * making the value of control accessible via FormData\n   */\n  setFormValue() {\n    const value = this.options.value(this.host) as string | FormData | File;\n    this._internals.setFormValue(value);\n  }\n  /**\n   * Updates the ValidityState of the input in form component at current state\n   */\n  validateInput(input) {\n    /** When the form control is disabled, its always valid */\n    if (this.options.input(this.host).disabled) {\n      return this._internals.setValidity({});\n    }\n    // get the validity of the internal <input>\n    const validState = input.validity;\n    // if the input is invalid, show the correct error\n    if (!validState.valid) {\n      // loop through the error reasons\n      for (const state in validState) {\n        // if there is an error and corresponding attribute holding\n        // the message\n        if (validState[state]) {\n          this.validationError = state.toString() as keyof ValidityState;\n          // set the validity error reason and the corresponding\n          // message\n          this._internals.setValidity({ [this.validationError]: true }, input.validationMessage, input);\n        }\n      }\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n}\n\nexport interface InputValidationControllerOptions {\n  /** A function that sets the value of host invalid reactive prop */\n  setInvalid: (host: ReactiveControllerHost & HTMLElement, value: boolean) => void;\n  /** A function that gets the value of host value reactive prop */\n  value: (host: ReactiveControllerHost & HTMLElement) => unknown;\n  /** A function that gets the input control of host value reactive prop */\n  input: (host: ReactiveController & HTMLElement) => HTMLInputElement | SgdsInput | SgdsCheckbox;\n}\n"],"names":[],"mappings":"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"}

package/react/utils/validatorMixin.cjs.js

@@ -14,9 +14,12 @@ var inputValidationController = require('./inputValidationController.cjs.js');
  */
 const SgdsFormValidatorMixin = (superClass) => {
     class ToBeValidatedElement extends superClass {
-        constructor() {
-            super(...arguments);
+        // TypeScript requires mixin constructors to have rest parameter of type any[]
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        constructor(...args) {
+            super(...args);
             this._isTouched = false;
+            this._internals = this.attachInternals();
         }
         connectedCallback() {
             var _a;
@@ -34,9 +37,9 @@ const SgdsFormValidatorMixin = (superClass) => {
                     (await this.sgdsInput) ||
                     this.shadowRoot.querySelector("textarea") ||
                     (await this.sgdsDatepickerInput);
+            this._mixinSetFormValue();
             if (this._mixinShouldSkipSgdsValidation())
                 return;
-            this._mixinSetFormValue();
             this._mixinValidate(this.input);
         }
         /**
@@ -63,6 +66,8 @@ const SgdsFormValidatorMixin = (superClass) => {
          */
         _mixinHandleChange(e) {
             this._mixinSetFormValue();
+            if (this._mixinShouldSkipSgdsValidation())
+                return;
             this.inputValidationController.handleChange(e);
         }
         /**
@@ -72,6 +77,8 @@ const SgdsFormValidatorMixin = (superClass) => {
          */
         _mixinHandleInputChange(e) {
             this._mixinSetFormValue();
+            if (this._mixinShouldSkipSgdsValidation())
+                return;
             this.inputValidationController.handleInput(e);
         }
         /**
@@ -83,30 +90,41 @@ const SgdsFormValidatorMixin = (superClass) => {
          * 4. Reset touched state to false for a pristine form
          */
         _mixinResetValidity(input) {
+            if (this._mixinShouldSkipSgdsValidation())
+                return;
             this.inputValidationController.resetValidity();
             this.inputValidationController.updateInvalidState();
             this.inputValidationController.validateInput(input);
             this._isTouched ? (this._isTouched = false) : null;
         }
         _mixinValidate(input) {
+            if (this._mixinShouldSkipSgdsValidation())
+                return;
             this.inputValidationController.validateInput(input);
         }
         _mixinSetFormValue() {
-            this.inputValidationController.setFormValue();
+            const value = this.value;
+            this._internals.setFormValue(value);
         }
         _mixinCheckValidity() {
+            if (this._mixinShouldSkipSgdsValidation())
+                return true;
             return this.inputValidationController.checkValidity();
         }
         _mixinReportValidity() {
+            if (this._mixinShouldSkipSgdsValidation())
+                return true;
             return this.inputValidationController.reportValidity();
         }
         _mixinGetValidity() {
-            return this.inputValidationController.validity;
+            return this._internals.validity;
         }
         _mixinGetValidationMessage() {
-            return this.inputValidationController.validationMessage;
+            return this._internals.validationMessage;
         }
         _mixinSetValidity(flags, message, anchor) {
+            if (this._mixinShouldSkipSgdsValidation())
+                return;
             return this.inputValidationController.setValidity(flags, message, anchor);
         }
         // Only check for noValidate prop

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

@@ -1 +1 @@
-{"version":3,"file":"validatorMixin.cjs.js","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    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    connectedCallback(): void {\n      super.connectedCallback();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      /** Idempotency guarantee */\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      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinSetFormValue();\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      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      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset\n     * 2. invalid reactive prop is updated after the reset\n     * 3. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check\n     * 4. Reset touched state to false for a pristine form\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this.inputValidationController.validateInput(input);\n      this._isTouched ? (this._isTouched = false) : null;\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue() {\n      this.inputValidationController.setFormValue();\n    }\n    _mixinCheckValidity(): boolean {\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this.inputValidationController.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this.inputValidationController.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\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"],"names":["InputValidationController","__decorate","queryAsync"],"mappings":"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"}
+{"version":3,"file":"validatorMixin.cjs.js","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      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      /** Idempotency guarantee */\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\n     * 2. invalid reactive prop is updated after the reset\n     * 3. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check\n     * 4. Reset touched state to false for a pristine form\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this.inputValidationController.validateInput(input);\n      this._isTouched ? (this._isTouched = false) : null;\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"],"names":["InputValidationController","__decorate","queryAsync"],"mappings":"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"}

package/react/utils/validatorMixin.js

@@ -10,9 +10,12 @@ import { InputValidationController } from './inputValidationController.js';
  */
 const SgdsFormValidatorMixin = (superClass) => {
     class ToBeValidatedElement extends superClass {
-        constructor() {
-            super(...arguments);
+        // TypeScript requires mixin constructors to have rest parameter of type any[]
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        constructor(...args) {
+            super(...args);
             this._isTouched = false;
+            this._internals = this.attachInternals();
         }
         connectedCallback() {
             var _a;
@@ -30,9 +33,9 @@ const SgdsFormValidatorMixin = (superClass) => {
                     (await this.sgdsInput) ||
                     this.shadowRoot.querySelector("textarea") ||
                     (await this.sgdsDatepickerInput);
+            this._mixinSetFormValue();
             if (this._mixinShouldSkipSgdsValidation())
                 return;
-            this._mixinSetFormValue();
             this._mixinValidate(this.input);
         }
         /**
@@ -59,6 +62,8 @@ const SgdsFormValidatorMixin = (superClass) => {
          */
         _mixinHandleChange(e) {
             this._mixinSetFormValue();
+            if (this._mixinShouldSkipSgdsValidation())
+                return;
             this.inputValidationController.handleChange(e);
         }
         /**
@@ -68,6 +73,8 @@ const SgdsFormValidatorMixin = (superClass) => {
          */
         _mixinHandleInputChange(e) {
             this._mixinSetFormValue();
+            if (this._mixinShouldSkipSgdsValidation())
+                return;
             this.inputValidationController.handleInput(e);
         }
         /**
@@ -79,30 +86,41 @@ const SgdsFormValidatorMixin = (superClass) => {
          * 4. Reset touched state to false for a pristine form
          */
         _mixinResetValidity(input) {
+            if (this._mixinShouldSkipSgdsValidation())
+                return;
             this.inputValidationController.resetValidity();
             this.inputValidationController.updateInvalidState();
             this.inputValidationController.validateInput(input);
             this._isTouched ? (this._isTouched = false) : null;
         }
         _mixinValidate(input) {
+            if (this._mixinShouldSkipSgdsValidation())
+                return;
             this.inputValidationController.validateInput(input);
         }
         _mixinSetFormValue() {
-            this.inputValidationController.setFormValue();
+            const value = this.value;
+            this._internals.setFormValue(value);
         }
         _mixinCheckValidity() {
+            if (this._mixinShouldSkipSgdsValidation())
+                return true;
             return this.inputValidationController.checkValidity();
         }
         _mixinReportValidity() {
+            if (this._mixinShouldSkipSgdsValidation())
+                return true;
             return this.inputValidationController.reportValidity();
         }
         _mixinGetValidity() {
-            return this.inputValidationController.validity;
+            return this._internals.validity;
         }
         _mixinGetValidationMessage() {
-            return this.inputValidationController.validationMessage;
+            return this._internals.validationMessage;
         }
         _mixinSetValidity(flags, message, anchor) {
+            if (this._mixinShouldSkipSgdsValidation())
+                return;
             return this.inputValidationController.setValidity(flags, message, anchor);
         }
         // Only check for noValidate prop

package/react/utils/validatorMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"validatorMixin.js","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    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    connectedCallback(): void {\n      super.connectedCallback();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      /** Idempotency guarantee */\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      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinSetFormValue();\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      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      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset\n     * 2. invalid reactive prop is updated after the reset\n     * 3. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check\n     * 4. Reset touched state to false for a pristine form\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this.inputValidationController.validateInput(input);\n      this._isTouched ? (this._isTouched = false) : null;\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue() {\n      this.inputValidationController.setFormValue();\n    }\n    _mixinCheckValidity(): boolean {\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this.inputValidationController.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this.inputValidationController.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\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"],"names":[],"mappings":";;;;;AAQA;;;;AAIG;AACU,MAAA,sBAAsB,GAAG,CAAoC,UAAa,KAAI;IACzF,MAAM,oBAAqB,SAAQ,UAAU,CAAA;AAA7C,QAAA,WAAA,GAAA;;YAIU,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;SAoH5B;QAhHC,iBAAiB,GAAA;;YACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAC1B,IAAI,IAAI,CAAC,8BAA8B,EAAE;gBAAE,OAAO;;AAGlD,YAAA,CAAA,EAAA,GAAA,IAAI,CAAC,yBAAyB,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,IAA9B,IAAI,CAAC,yBAAyB,GAAK,IAAI,yBAAyB,CAAC,IAAI,CAAC,CAAC,CAAA;SACxE;QACD,MAAM,YAAY,CAAC,iBAAyC,EAAA;AAC1D,YAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;;AAGtC,YAAA,IAAI,CAAC,KAAK;AACR,gBAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC;AACtC,qBAAC,MAAM,IAAI,CAAC,SAAS,CAAC;AACtB,oBAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC;AACzC,qBAAC,MAAM,IAAI,CAAC,mBAAmB,CAAC,CAAC;YAEnC,IAAI,IAAI,CAAC,8BAA8B,EAAE;gBAAE,OAAO;YAElD,IAAI,CAAC,kBAAkB,EAAE,CAAC;AAE1B,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACjC;AAED;;AAEG;QACH,iBAAiB,GAAA;AACf,YAAA,IAAI,IAAI,CAAC,sBAAsB,EAAE;gBAC/B,IAAI,CAAC,sBAAsB,EAAE,CAAC;aAC/B;iBAAM;AACL,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;AAC/B,gBAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACtC;YACD,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B;AACD;;;AAGG;AAEH;;;;AAIG;AACH,QAAA,kBAAkB,CAAC,CAAQ,EAAA;YACzB,IAAI,CAAC,kBAAkB,EAAE,CAAC;AAC1B,YAAA,IAAI,CAAC,yBAAyB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;SAChD;AACD;;;;AAIG;AACH,QAAA,uBAAuB,CAAC,CAAQ,EAAA;YAC9B,IAAI,CAAC,kBAAkB,EAAE,CAAC;AAC1B,YAAA,IAAI,CAAC,yBAAyB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;SAC/C;AACD;;;;;;;AAOG;AACH,QAAA,mBAAmB,CAAC,KAAyD,EAAA;AAC3E,YAAA,IAAI,CAAC,yBAAyB,CAAC,aAAa,EAAE,CAAC;AAC/C,YAAA,IAAI,CAAC,yBAAyB,CAAC,kBAAkB,EAAE,CAAC;AACpD,YAAA,IAAI,CAAC,yBAAyB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AACpD,YAAA,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,GAAG,KAAK,IAAI,IAAI,CAAC;SACpD;AAED,QAAA,cAAc,CAAC,KAAyD,EAAA;AACtE,YAAA,IAAI,CAAC,yBAAyB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;SACrD;QACD,kBAAkB,GAAA;AAChB,YAAA,IAAI,CAAC,yBAAyB,CAAC,YAAY,EAAE,CAAC;SAC/C;QACD,mBAAmB,GAAA;AACjB,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,aAAa,EAAE,CAAC;SACvD;QACD,oBAAoB,GAAA;AAClB,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,cAAc,EAAE,CAAC;SACxD;QACD,iBAAiB,GAAA;AACf,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,QAAQ,CAAC;SAChD;QACD,0BAA0B,GAAA;AACxB,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,iBAAiB,CAAC;SACzD;AACD,QAAA,iBAAiB,CAAC,KAA0B,EAAE,OAAgB,EAAE,MAAoB,EAAA;AAClF,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;SAC3E;;QAED,8BAA8B,GAAA;YAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;AAElC,YAAA,OAAO,CAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,IAAI,CAAE,UAAU,KAAI,IAAI,CAAC,UAAU,CAAC;SAC5C;;IA3GM,oBAAc,CAAA,cAAA,GAAG,IAAH,CAAQ;AAIH,IAAA,UAAA,CAAA;QAAzB,UAAU,CAAC,YAAY,CAAC;AAA+B,KAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AACnB,IAAA,UAAA,CAAA;QAApC,UAAU,CAAC,uBAAuB,CAAC;AAAyC,KAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAoH/E,IAAA,OAAO,oBAAsE,CAAC;AAChF;;;;"}
+{"version":3,"file":"validatorMixin.js","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      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      /** Idempotency guarantee */\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\n     * 2. invalid reactive prop is updated after the reset\n     * 3. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check\n     * 4. Reset touched state to false for a pristine form\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this.inputValidationController.validateInput(input);\n      this._isTouched ? (this._isTouched = false) : null;\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"],"names":[],"mappings":"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"}

package/utils/inputValidationController.js

@@ -4,7 +4,8 @@
 class InputValidationController {
     constructor(host, options) {
         (this.host = host).addController(this);
-        this._internals = this.host.attachInternals();
+        // Use the internals from the host if it implements the mixin
+        this._internals = host._internals || this.host.attachInternals();
         this.options = Object.assign({ setInvalid: (host, value) => {
                 host.invalid = value;
             }, value: (host) => {

package/utils/inputValidationController.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputValidationController.js","sources":["../../src/utils/inputValidationController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\";\nimport { SgdsFormControl } from \"./formSubmitController\";\nimport { SgdsCheckbox, SgdsInput } from \"../components\";\n\n/**\n * SGDS custom form validation methods and behaviours\n */\nexport class InputValidationController implements ReactiveController {\n  host: ReactiveControllerHost & HTMLElement;\n  _internals: ElementInternals;\n  validationError: keyof ValidityState;\n  options: InputValidationControllerOptions;\n\n  constructor(host: ReactiveControllerHost & HTMLElement, options?: Partial<InputValidationControllerOptions>) {\n    (this.host = host).addController(this);\n    this._internals = this.host.attachInternals();\n    this.options = {\n      setInvalid: (host: SgdsFormControl, value: boolean) => {\n        host.invalid = value;\n      },\n      value: (host: SgdsFormControl) => {\n        return host.value;\n      },\n      input: (host: SgdsFormControl) => host.input,\n      ...options\n    };\n  }\n\n  hostConnected(): void {\n    this.host.addEventListener(\"invalid\", e => this.handleInvalid(e));\n  }\n\n  hostDisconnected(): void {\n    this.host.removeEventListener(\"invalid\", e => this.handleInvalid(e));\n  }\n  /**\n   * Prevents the native browser error message pop up when reportValidity() called by\n   * associated form or the component's reportValidity during constraint validation\n   * Sets invalid reactive prop to true\n   */\n  handleInvalid(e: Event) {\n    e.preventDefault();\n    this.options.setInvalid(this.host, true);\n  }\n\n  /**\n   * Sets invalid to false when invoked and\n   * Updates the ValidityState based on new value, but\n   * does not update invalid reactive prop\n   * @param e\n   */\n  handleInput(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.options.setInvalid(this.host, false);\n    this.validateInput(input);\n  }\n  /**\n   * Validate the input's new value after onChange and\n   * update invalid reactive prop\n   * @param e\n   */\n  handleChange(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.validateInput(input);\n    this.options.setInvalid(this.host, !this.checkValidity());\n  }\n\n  get form() {\n    return this._internals.form;\n  }\n\n  get validity() {\n    return this._internals.validity;\n  }\n\n  get validationMessage() {\n    return this._internals.validationMessage;\n  }\n\n  get willValidate() {\n    return this._internals.willValidate;\n  }\n  /**\n   * Checks the validity and updates the invalid reactive prop of form components\n   */\n  updateInvalidState() {\n    this.options.setInvalid(this.host, !this.checkValidity());\n  }\n  /**\n   * Resets the ValidityState of the control\n   */\n  resetValidity() {\n    return this._internals.setValidity({});\n  }\n  /**\n   * Reports the validity\n   */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n  /**\n   * Reports the validity with a error popup message\n   */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n  setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n    return this._internals.setValidity(flags, message, anchor);\n  }\n  /**\n   * Sets the form control value into FormData,\n   * making the value of control accessible via FormData\n   */\n  setFormValue() {\n    const value = this.options.value(this.host) as string | FormData | File;\n    this._internals.setFormValue(value);\n  }\n  /**\n   * Updates the ValidityState of the input in form component at current state\n   */\n  validateInput(input) {\n    /** When the form control is disabled, its always valid */\n    if (this.options.input(this.host).disabled) {\n      return this._internals.setValidity({});\n    }\n    // get the validity of the internal <input>\n    const validState = input.validity;\n    // if the input is invalid, show the correct error\n    if (!validState.valid) {\n      // loop through the error reasons\n      for (const state in validState) {\n        // if there is an error and corresponding attribute holding\n        // the message\n        if (validState[state]) {\n          this.validationError = state.toString() as keyof ValidityState;\n          // set the validity error reason and the corresponding\n          // message\n          this._internals.setValidity({ [this.validationError]: true }, input.validationMessage, input);\n        }\n      }\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n}\n\nexport interface InputValidationControllerOptions {\n  /** A function that sets the value of host invalid reactive prop */\n  setInvalid: (host: ReactiveControllerHost & HTMLElement, value: boolean) => void;\n  /** A function that gets the value of host value reactive prop */\n  value: (host: ReactiveControllerHost & HTMLElement) => unknown;\n  /** A function that gets the input control of host value reactive prop */\n  input: (host: ReactiveController & HTMLElement) => HTMLInputElement | SgdsInput | SgdsCheckbox;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"inputValidationController.js","sources":["../../src/utils/inputValidationController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\";\nimport { SgdsFormControl } from \"./formSubmitController\";\nimport { SgdsCheckbox, SgdsInput } from \"../components\";\n\ninterface HostWithInternals extends ReactiveControllerHost, HTMLElement {\n  _internals?: ElementInternals;\n}\n\n/**\n * SGDS custom form validation methods and behaviours\n */\nexport class InputValidationController implements ReactiveController {\n  host: ReactiveControllerHost & HTMLElement;\n  _internals: ElementInternals;\n  validationError: keyof ValidityState;\n  options: InputValidationControllerOptions;\n\n  constructor(host: ReactiveControllerHost & HTMLElement, options?: Partial<InputValidationControllerOptions>) {\n    (this.host = host).addController(this);\n    // Use the internals from the host if it implements the mixin\n    this._internals = (host as HostWithInternals)._internals || this.host.attachInternals();\n    this.options = {\n      setInvalid: (host: SgdsFormControl, value: boolean) => {\n        host.invalid = value;\n      },\n      value: (host: SgdsFormControl) => {\n        return host.value;\n      },\n      input: (host: SgdsFormControl) => host.input,\n      ...options\n    };\n  }\n\n  hostConnected(): void {\n    this.host.addEventListener(\"invalid\", e => this.handleInvalid(e));\n  }\n\n  hostDisconnected(): void {\n    this.host.removeEventListener(\"invalid\", e => this.handleInvalid(e));\n  }\n  /**\n   * Prevents the native browser error message pop up when reportValidity() called by\n   * associated form or the component's reportValidity during constraint validation\n   * Sets invalid reactive prop to true\n   */\n  handleInvalid(e: Event) {\n    e.preventDefault();\n    this.options.setInvalid(this.host, true);\n  }\n\n  /**\n   * Sets invalid to false when invoked and\n   * Updates the ValidityState based on new value, but\n   * does not update invalid reactive prop\n   * @param e\n   */\n  handleInput(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.options.setInvalid(this.host, false);\n    this.validateInput(input);\n  }\n  /**\n   * Validate the input's new value after onChange and\n   * update invalid reactive prop\n   * @param e\n   */\n  handleChange(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.validateInput(input);\n    this.options.setInvalid(this.host, !this.checkValidity());\n  }\n\n  get form() {\n    return this._internals.form;\n  }\n\n  get validity() {\n    return this._internals.validity;\n  }\n\n  get validationMessage() {\n    return this._internals.validationMessage;\n  }\n\n  get willValidate() {\n    return this._internals.willValidate;\n  }\n  /**\n   * Checks the validity and updates the invalid reactive prop of form components\n   */\n  updateInvalidState() {\n    this.options.setInvalid(this.host, !this.checkValidity());\n  }\n  /**\n   * Resets the ValidityState of the control\n   */\n  resetValidity() {\n    return this._internals.setValidity({});\n  }\n  /**\n   * Reports the validity\n   */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n  /**\n   * Reports the validity with a error popup message\n   */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n  setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n    return this._internals.setValidity(flags, message, anchor);\n  }\n  /**\n   * Sets the form control value into FormData,\n   * making the value of control accessible via FormData\n   */\n  setFormValue() {\n    const value = this.options.value(this.host) as string | FormData | File;\n    this._internals.setFormValue(value);\n  }\n  /**\n   * Updates the ValidityState of the input in form component at current state\n   */\n  validateInput(input) {\n    /** When the form control is disabled, its always valid */\n    if (this.options.input(this.host).disabled) {\n      return this._internals.setValidity({});\n    }\n    // get the validity of the internal <input>\n    const validState = input.validity;\n    // if the input is invalid, show the correct error\n    if (!validState.valid) {\n      // loop through the error reasons\n      for (const state in validState) {\n        // if there is an error and corresponding attribute holding\n        // the message\n        if (validState[state]) {\n          this.validationError = state.toString() as keyof ValidityState;\n          // set the validity error reason and the corresponding\n          // message\n          this._internals.setValidity({ [this.validationError]: true }, input.validationMessage, input);\n        }\n      }\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n}\n\nexport interface InputValidationControllerOptions {\n  /** A function that sets the value of host invalid reactive prop */\n  setInvalid: (host: ReactiveControllerHost & HTMLElement, value: boolean) => void;\n  /** A function that gets the value of host value reactive prop */\n  value: (host: ReactiveControllerHost & HTMLElement) => unknown;\n  /** A function that gets the input control of host value reactive prop */\n  input: (host: ReactiveController & HTMLElement) => HTMLInputElement | SgdsInput | SgdsCheckbox;\n}\n"],"names":[],"mappings":"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"}

package/utils/validatorMixin.js

@@ -9,9 +9,12 @@ import { InputValidationController } from './inputValidationController.js';
  */
 const SgdsFormValidatorMixin = (superClass) => {
     class ToBeValidatedElement extends superClass {
-        constructor() {
-            super(...arguments);
+        // TypeScript requires mixin constructors to have rest parameter of type any[]
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        constructor(...args) {
+            super(...args);
             this._isTouched = false;
+            this._internals = this.attachInternals();
         }
         connectedCallback() {
             var _a;
@@ -29,9 +32,9 @@ const SgdsFormValidatorMixin = (superClass) => {
                     (await this.sgdsInput) ||
                     this.shadowRoot.querySelector("textarea") ||
                     (await this.sgdsDatepickerInput);
+            this._mixinSetFormValue();
             if (this._mixinShouldSkipSgdsValidation())
                 return;
-            this._mixinSetFormValue();
             this._mixinValidate(this.input);
         }
         /**
@@ -58,6 +61,8 @@ const SgdsFormValidatorMixin = (superClass) => {
          */
         _mixinHandleChange(e) {
             this._mixinSetFormValue();
+            if (this._mixinShouldSkipSgdsValidation())
+                return;
             this.inputValidationController.handleChange(e);
         }
         /**
@@ -67,6 +72,8 @@ const SgdsFormValidatorMixin = (superClass) => {
          */
         _mixinHandleInputChange(e) {
             this._mixinSetFormValue();
+            if (this._mixinShouldSkipSgdsValidation())
+                return;
             this.inputValidationController.handleInput(e);
         }
         /**
@@ -78,30 +85,41 @@ const SgdsFormValidatorMixin = (superClass) => {
          * 4. Reset touched state to false for a pristine form
          */
         _mixinResetValidity(input) {
+            if (this._mixinShouldSkipSgdsValidation())
+                return;
             this.inputValidationController.resetValidity();
             this.inputValidationController.updateInvalidState();
             this.inputValidationController.validateInput(input);
             this._isTouched ? (this._isTouched = false) : null;
         }
         _mixinValidate(input) {
+            if (this._mixinShouldSkipSgdsValidation())
+                return;
             this.inputValidationController.validateInput(input);
         }
         _mixinSetFormValue() {
-            this.inputValidationController.setFormValue();
+            const value = this.value;
+            this._internals.setFormValue(value);
         }
         _mixinCheckValidity() {
+            if (this._mixinShouldSkipSgdsValidation())
+                return true;
             return this.inputValidationController.checkValidity();
         }
         _mixinReportValidity() {
+            if (this._mixinShouldSkipSgdsValidation())
+                return true;
             return this.inputValidationController.reportValidity();
         }
         _mixinGetValidity() {
-            return this.inputValidationController.validity;
+            return this._internals.validity;
         }
         _mixinGetValidationMessage() {
-            return this.inputValidationController.validationMessage;
+            return this._internals.validationMessage;
         }
         _mixinSetValidity(flags, message, anchor) {
+            if (this._mixinShouldSkipSgdsValidation())
+                return;
             return this.inputValidationController.setValidity(flags, message, anchor);
         }
         // Only check for noValidate prop

package/utils/validatorMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"validatorMixin.js","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    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    connectedCallback(): void {\n      super.connectedCallback();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      /** Idempotency guarantee */\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      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinSetFormValue();\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      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      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset\n     * 2. invalid reactive prop is updated after the reset\n     * 3. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check\n     * 4. Reset touched state to false for a pristine form\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this.inputValidationController.validateInput(input);\n      this._isTouched ? (this._isTouched = false) : null;\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue() {\n      this.inputValidationController.setFormValue();\n    }\n    _mixinCheckValidity(): boolean {\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this.inputValidationController.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this.inputValidationController.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\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"],"names":[],"mappings":";;;;AAQA;;;;AAIG;AACU,MAAA,sBAAsB,GAAG,CAAoC,UAAa,KAAI;IACzF,MAAM,oBAAqB,SAAQ,UAAU,CAAA;AAA7C,QAAA,WAAA,GAAA;;YAIU,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;SAoH5B;QAhHC,iBAAiB,GAAA;;YACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAC1B,IAAI,IAAI,CAAC,8BAA8B,EAAE;gBAAE,OAAO;;AAGlD,YAAA,CAAA,EAAA,GAAA,IAAI,CAAC,yBAAyB,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,IAA9B,IAAI,CAAC,yBAAyB,GAAK,IAAI,yBAAyB,CAAC,IAAI,CAAC,CAAC,CAAA;SACxE;QACD,MAAM,YAAY,CAAC,iBAAyC,EAAA;AAC1D,YAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;;AAGtC,YAAA,IAAI,CAAC,KAAK;AACR,gBAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC;AACtC,qBAAC,MAAM,IAAI,CAAC,SAAS,CAAC;AACtB,oBAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC;AACzC,qBAAC,MAAM,IAAI,CAAC,mBAAmB,CAAC,CAAC;YAEnC,IAAI,IAAI,CAAC,8BAA8B,EAAE;gBAAE,OAAO;YAElD,IAAI,CAAC,kBAAkB,EAAE,CAAC;AAE1B,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACjC;AAED;;AAEG;QACH,iBAAiB,GAAA;AACf,YAAA,IAAI,IAAI,CAAC,sBAAsB,EAAE;gBAC/B,IAAI,CAAC,sBAAsB,EAAE,CAAC;aAC/B;iBAAM;AACL,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;AAC/B,gBAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACtC;YACD,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B;AACD;;;AAGG;AAEH;;;;AAIG;AACH,QAAA,kBAAkB,CAAC,CAAQ,EAAA;YACzB,IAAI,CAAC,kBAAkB,EAAE,CAAC;AAC1B,YAAA,IAAI,CAAC,yBAAyB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;SAChD;AACD;;;;AAIG;AACH,QAAA,uBAAuB,CAAC,CAAQ,EAAA;YAC9B,IAAI,CAAC,kBAAkB,EAAE,CAAC;AAC1B,YAAA,IAAI,CAAC,yBAAyB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;SAC/C;AACD;;;;;;;AAOG;AACH,QAAA,mBAAmB,CAAC,KAAyD,EAAA;AAC3E,YAAA,IAAI,CAAC,yBAAyB,CAAC,aAAa,EAAE,CAAC;AAC/C,YAAA,IAAI,CAAC,yBAAyB,CAAC,kBAAkB,EAAE,CAAC;AACpD,YAAA,IAAI,CAAC,yBAAyB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AACpD,YAAA,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,GAAG,KAAK,IAAI,IAAI,CAAC;SACpD;AAED,QAAA,cAAc,CAAC,KAAyD,EAAA;AACtE,YAAA,IAAI,CAAC,yBAAyB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;SACrD;QACD,kBAAkB,GAAA;AAChB,YAAA,IAAI,CAAC,yBAAyB,CAAC,YAAY,EAAE,CAAC;SAC/C;QACD,mBAAmB,GAAA;AACjB,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,aAAa,EAAE,CAAC;SACvD;QACD,oBAAoB,GAAA;AAClB,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,cAAc,EAAE,CAAC;SACxD;QACD,iBAAiB,GAAA;AACf,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,QAAQ,CAAC;SAChD;QACD,0BAA0B,GAAA;AACxB,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,iBAAiB,CAAC;SACzD;AACD,QAAA,iBAAiB,CAAC,KAA0B,EAAE,OAAgB,EAAE,MAAoB,EAAA;AAClF,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;SAC3E;;QAED,8BAA8B,GAAA;YAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;AAElC,YAAA,OAAO,CAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,IAAI,CAAE,UAAU,KAAI,IAAI,CAAC,UAAU,CAAC;SAC5C;;IA3GM,oBAAc,CAAA,cAAA,GAAG,IAAH,CAAQ;AAIH,IAAA,UAAA,CAAA;QAAzB,UAAU,CAAC,YAAY,CAAC;AAA+B,KAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AACnB,IAAA,UAAA,CAAA;QAApC,UAAU,CAAC,uBAAuB,CAAC;AAAyC,KAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAoH/E,IAAA,OAAO,oBAAsE,CAAC;AAChF;;;;"}
+{"version":3,"file":"validatorMixin.js","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      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      /** Idempotency guarantee */\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\n     * 2. invalid reactive prop is updated after the reset\n     * 3. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check\n     * 4. Reset touched state to false for a pristine form\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this.inputValidationController.validateInput(input);\n      this._isTouched ? (this._isTouched = false) : null;\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"],"names":[],"mappings":";;;;AAQA;;;;AAIG;AACU,MAAA,sBAAsB,GAAG,CAAoC,UAAa,KAAI;IACzF,MAAM,oBAAqB,SAAQ,UAAU,CAAA;;;AAW3C,QAAA,WAAA,CAAY,GAAG,IAAW,EAAA;AACxB,YAAA,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;YART,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;AASzB,YAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;SAC1C;QAED,iBAAiB,GAAA;;YACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAE1B,IAAI,IAAI,CAAC,8BAA8B,EAAE;gBAAE,OAAO;;AAGlD,YAAA,CAAA,EAAA,GAAA,IAAI,CAAC,yBAAyB,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,IAA9B,IAAI,CAAC,yBAAyB,GAAK,IAAI,yBAAyB,CAAC,IAAI,CAAC,CAAC,CAAA;SACxE;QACD,MAAM,YAAY,CAAC,iBAAyC,EAAA;AAC1D,YAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;;AAGtC,YAAA,IAAI,CAAC,KAAK;AACR,gBAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC;AACtC,qBAAC,MAAM,IAAI,CAAC,SAAS,CAAC;AACtB,oBAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC;AACzC,qBAAC,MAAM,IAAI,CAAC,mBAAmB,CAAC,CAAC;YAEnC,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAE1B,IAAI,IAAI,CAAC,8BAA8B,EAAE;gBAAE,OAAO;AAElD,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACjC;AAED;;AAEG;QACH,iBAAiB,GAAA;AACf,YAAA,IAAI,IAAI,CAAC,sBAAsB,EAAE;gBAC/B,IAAI,CAAC,sBAAsB,EAAE,CAAC;aAC/B;iBAAM;AACL,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;AAC/B,gBAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACtC;YACD,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B;AACD;;;AAGG;AAEH;;;;AAIG;AACH,QAAA,kBAAkB,CAAC,CAAQ,EAAA;YACzB,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC1B,IAAI,IAAI,CAAC,8BAA8B,EAAE;gBAAE,OAAO;AAClD,YAAA,IAAI,CAAC,yBAAyB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;SAChD;AACD;;;;AAIG;AACH,QAAA,uBAAuB,CAAC,CAAQ,EAAA;YAC9B,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC1B,IAAI,IAAI,CAAC,8BAA8B,EAAE;gBAAE,OAAO;AAClD,YAAA,IAAI,CAAC,yBAAyB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;SAC/C;AACD;;;;;;;AAOG;AACH,QAAA,mBAAmB,CAAC,KAAyD,EAAA;YAC3E,IAAI,IAAI,CAAC,8BAA8B,EAAE;gBAAE,OAAO;AAClD,YAAA,IAAI,CAAC,yBAAyB,CAAC,aAAa,EAAE,CAAC;AAC/C,YAAA,IAAI,CAAC,yBAAyB,CAAC,kBAAkB,EAAE,CAAC;AACpD,YAAA,IAAI,CAAC,yBAAyB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AACpD,YAAA,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,GAAG,KAAK,IAAI,IAAI,CAAC;SACpD;AAED,QAAA,cAAc,CAAC,KAAyD,EAAA;YACtE,IAAI,IAAI,CAAC,8BAA8B,EAAE;gBAAE,OAAO;AAClD,YAAA,IAAI,CAAC,yBAAyB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;SACrD;QACD,kBAAkB,GAAA;AAChB,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAiC,CAAC;AACrD,YAAA,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;SACrC;QACD,mBAAmB,GAAA;YACjB,IAAI,IAAI,CAAC,8BAA8B,EAAE;AAAE,gBAAA,OAAO,IAAI,CAAC;AACvD,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,aAAa,EAAE,CAAC;SACvD;QACD,oBAAoB,GAAA;YAClB,IAAI,IAAI,CAAC,8BAA8B,EAAE;AAAE,gBAAA,OAAO,IAAI,CAAC;AACvD,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,cAAc,EAAE,CAAC;SACxD;QACD,iBAAiB,GAAA;AACf,YAAA,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;SACjC;QACD,0BAA0B,GAAA;AACxB,YAAA,OAAO,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC;SAC1C;AACD,QAAA,iBAAiB,CAAC,KAA0B,EAAE,OAAgB,EAAE,MAAoB,EAAA;YAClF,IAAI,IAAI,CAAC,8BAA8B,EAAE;gBAAE,OAAO;AAClD,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;SAC3E;;QAED,8BAA8B,GAAA;YAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;AAElC,YAAA,OAAO,CAAA,IAAI,KAAJ,IAAA,IAAA,IAAI,KAAJ,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,IAAI,CAAE,UAAU,KAAI,IAAI,CAAC,UAAU,CAAC;SAC5C;;IA5HM,oBAAc,CAAA,cAAA,GAAG,IAAH,CAAQ;AAKH,IAAA,UAAA,CAAA;QAAzB,UAAU,CAAC,YAAY,CAAC;AAA+B,KAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AACnB,IAAA,UAAA,CAAA;QAApC,UAAU,CAAC,uBAAuB,CAAC;AAAyC,KAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAoI/E,IAAA,OAAO,oBAAsE,CAAC;AAChF;;;;"}