@govtechsg/sgds-web-component 3.3.1 → 3.3.2

package/utils/validatorMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"validatorMixin.js","sources":["../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement } 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      this.inputValidationController = new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties) {\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      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\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  }\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}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"validatorMixin.js","sources":["../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement } 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      /** Idempotency guarantee */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties) {\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      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\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  }\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}\n"],"names":[],"mappings":"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"}