@govtechsg/sgds-web-component 3.23.0-rc.1 → 3.23.0-rc.2

package/types/react.d.ts

@@ -181,20 +181,6 @@ Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `
   onSgdsAfterHide?: SgdsEventHandler;
 }
 
-// ── BreadcrumbItem ─────────────────────────────────────────────────────────────
-
-export interface SgdsBreadcrumbItemProps extends SgdsBaseProps {
-  /** Indicates the link matches the current location of the page. Programmatically handled by SgdsBreadcrumb to set this prop to true for the last breadcrumb item */
-  active?: boolean;
-}
-
-// ── Breadcrumb ─────────────────────────────────────────────────────────────
-
-export interface SgdsBreadcrumbProps extends SgdsBaseProps {
-  /** The aria-label of nav element within breadcrumb component. */
-  ariaLabel?: string;
-}
-
 // ── Button ─────────────────────────────────────────────────────────────
 
 export interface SgdsButtonProps extends SgdsBaseProps {
@@ -276,6 +262,20 @@ export interface SgdsCardProps extends SgdsBaseProps {
   orientation?: CardOrientation;
 }
 
+// ── BreadcrumbItem ─────────────────────────────────────────────────────────────
+
+export interface SgdsBreadcrumbItemProps extends SgdsBaseProps {
+  /** Indicates the link matches the current location of the page. Programmatically handled by SgdsBreadcrumb to set this prop to true for the last breadcrumb item */
+  active?: boolean;
+}
+
+// ── Breadcrumb ─────────────────────────────────────────────────────────────
+
+export interface SgdsBreadcrumbProps extends SgdsBaseProps {
+  /** The aria-label of nav element within breadcrumb component. */
+  ariaLabel?: string;
+}
+
 // ── CheckboxGroup ─────────────────────────────────────────────────────────────
 
 export interface SgdsCheckboxGroupProps extends SgdsBaseProps {
@@ -289,9 +289,10 @@ export interface SgdsCheckboxGroupProps extends SgdsBaseProps {
   hintText?: string;
   /** Makes the checkbox group a required field. Only available for when multiselect is true */
   required?: boolean;
+  /** Disables native and sgds validation for the checkbox group. */
+  noValidate?: boolean;
   /** Consolidates the values of its child checked checkboxes into a single string with semi-colon delimiter. Only available when required is true */
   value?: string;
-  defaultValue?: string;
   /** Returns the ValidityState object */
   validity?: ValidityState;
   /** Returns the validation message based on the ValidityState */
@@ -304,6 +305,10 @@ export interface SgdsCheckboxGroupProps extends SgdsBaseProps {
   invalid?: boolean;
   "onsgds-change"?: SgdsEventHandler;
   onSgdsChange?: SgdsEventHandler;
+  "onsgds-invalid"?: SgdsEventHandler;
+  onSgdsInvalid?: SgdsEventHandler;
+  "onsgds-valid"?: SgdsEventHandler;
+  onSgdsValid?: SgdsEventHandler;
 }
 
 // ── Checkbox ─────────────────────────────────────────────────────────────
@@ -315,12 +320,12 @@ export interface SgdsCheckboxProps extends SgdsBaseProps {
   checked?: boolean;
   /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
   hasFeedback?: "style" | "text" | "both";
-  /** 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. */
-  defaultChecked?: boolean;
   /** Marks the checkbox input as indeterminate , with indeterminate logo */
   indeterminate?: boolean;
   /** Makes the checkbox a required field. */
   required?: boolean;
+  /** Disables native and sgds validation for the checkbox. */
+  noValidate?: boolean;
   /** Feedback text for error state when validated */
   invalidFeedback?: string;
   /** Returns the ValidityState object */
@@ -347,6 +352,10 @@ export interface SgdsCheckboxProps extends SgdsBaseProps {
   onSgdsCheck?: SgdsEventHandler;
   "onsgds-uncheck"?: SgdsEventHandler;
   onSgdsUncheck?: SgdsEventHandler;
+  "onsgds-invalid"?: SgdsEventHandler;
+  onSgdsInvalid?: SgdsEventHandler;
+  "onsgds-valid"?: SgdsEventHandler;
+  onSgdsValid?: SgdsEventHandler;
 }
 
 // ── CloseButton ─────────────────────────────────────────────────────────────
@@ -384,6 +393,8 @@ export interface SgdsComboBoxProps extends SgdsBaseProps {
   async?: boolean;
   /** When filtering remotely and there are no results, set this to true to enable no options feedback on the menu. Applicable for async combo box only. */
   emptyMenuAsync?: boolean;
+  /** Number of pixels from the bottom of the menu at which the sgds-scroll-end event fires. */
+  scrollBottomOffset?: number;
   /** The function used to filter the menu list, given the user's input value. */
   filterFunction?: (inputValue: string, item: SgdsComboBoxOptionData) => boolean;
   /** The input's label */
@@ -446,6 +457,8 @@ value: string;
   onSgdsInvalid?: SgdsEventHandler;
   "onsgds-valid"?: SgdsEventHandler;
   onSgdsValid?: SgdsEventHandler;
+  "onsgds-scroll-end"?: SgdsEventHandler;
+  onSgdsScrollEnd?: SgdsEventHandler;
   "onsgds-show"?: SgdsEventHandler;
   onSgdsShow?: SgdsEventHandler;
   "onsgds-after-show"?: SgdsEventHandler;
@@ -905,6 +918,8 @@ export interface SgdsMainnavDropdownProps extends SgdsBaseProps {
   active?: boolean;
   /** When true,  applies active styles on the dropdown button */
   disabled?: boolean;
+  /** Accessible label for the dropdown's toggle button. Forwarded to the button's aria-label attribute. */
+  ariaLabel?: string;
 }
 
 // ── MainnavItem ─────────────────────────────────────────────────────────────
@@ -1067,6 +1082,8 @@ export interface SgdsRadioGroupProps extends SgdsBaseProps {
   hasFeedback?: boolean;
   /** Makes the input as a required field. */
   required?: boolean;
+  /** Disables native and sgds validation for the radio group. */
+  noValidate?: boolean;
   /** Automatically focuses the selected radio input in the group when it becomes checked. */
   autofocus?: boolean;
   /** Returns the ValidityState object */
@@ -1085,6 +1102,10 @@ export interface SgdsRadioGroupProps extends SgdsBaseProps {
   invalid?: boolean;
   "onsgds-change"?: (event: CustomEvent<ISgdsRadioGroupChangeEventDetail>) => void;
   onSgdsChange?: (event: CustomEvent<ISgdsRadioGroupChangeEventDetail>) => void;
+  "onsgds-invalid"?: SgdsEventHandler;
+  onSgdsInvalid?: SgdsEventHandler;
+  "onsgds-valid"?: SgdsEventHandler;
+  onSgdsValid?: SgdsEventHandler;
 }
 
 // ── Radio ─────────────────────────────────────────────────────────────
@@ -1118,6 +1139,8 @@ export interface SgdsSelectOptionProps extends SgdsBaseProps {
 // ── Select ─────────────────────────────────────────────────────────────
 
 export interface SgdsSelectProps extends SgdsBaseProps {
+  /** Disables native and sgds validation for the select. */
+  noValidate?: boolean;
   /** The input's label */
   label?: string;
   /** The input's hint text below the label */
@@ -1172,6 +1195,10 @@ value: string;
   onSgdsFocus?: SgdsEventHandler;
   "onsgds-blur"?: SgdsEventHandler;
   onSgdsBlur?: SgdsEventHandler;
+  "onsgds-invalid"?: SgdsEventHandler;
+  onSgdsInvalid?: SgdsEventHandler;
+  "onsgds-valid"?: SgdsEventHandler;
+  onSgdsValid?: SgdsEventHandler;
   "onsgds-show"?: SgdsEventHandler;
   onSgdsShow?: SgdsEventHandler;
   "onsgds-after-show"?: SgdsEventHandler;
@@ -1689,10 +1716,10 @@ declare module "react" {
       "sgds-alert-link": React.DetailedHTMLProps<SgdsAlertLinkProps, HTMLElement>;
       "sgds-alert": React.DetailedHTMLProps<SgdsAlertProps, HTMLElement>;
       "sgds-badge": React.DetailedHTMLProps<SgdsBadgeProps, HTMLElement>;
-      "sgds-breadcrumb-item": React.DetailedHTMLProps<SgdsBreadcrumbItemProps, HTMLElement>;
-      "sgds-breadcrumb": React.DetailedHTMLProps<SgdsBreadcrumbProps, HTMLElement>;
       "sgds-button": React.DetailedHTMLProps<SgdsButtonProps, HTMLElement>;
       "sgds-card": React.DetailedHTMLProps<SgdsCardProps, HTMLElement>;
+      "sgds-breadcrumb-item": React.DetailedHTMLProps<SgdsBreadcrumbItemProps, HTMLElement>;
+      "sgds-breadcrumb": React.DetailedHTMLProps<SgdsBreadcrumbProps, HTMLElement>;
       "sgds-checkbox-group": React.DetailedHTMLProps<SgdsCheckboxGroupProps, HTMLElement>;
       "sgds-checkbox": React.DetailedHTMLProps<SgdsCheckboxProps, HTMLElement>;
       "sgds-close-button": React.DetailedHTMLProps<SgdsCloseButtonProps, HTMLElement>;
@@ -1772,10 +1799,10 @@ declare global {
     "sgds-alert-link": HTMLElement;
     "sgds-alert": HTMLElement;
     "sgds-badge": HTMLElement;
-    "sgds-breadcrumb-item": HTMLElement;
-    "sgds-breadcrumb": HTMLElement;
     "sgds-button": HTMLElement;
     "sgds-card": HTMLElement;
+    "sgds-breadcrumb-item": HTMLElement;
+    "sgds-breadcrumb": HTMLElement;
     "sgds-checkbox-group": HTMLElement;
     "sgds-checkbox": HTMLElement;
     "sgds-close-button": HTMLElement;

package/utils/validatorMixin.js

@@ -19,9 +19,7 @@ const SgdsFormValidatorMixin = (superClass) => {
         connectedCallback() {
             var _a;
             super.connectedCallback();
-            if (this._mixinShouldSkipSgdsValidation())
-                return;
-            /** Idempotency guarantee */
+            /** Idempotency guarantee — always create so reset can clear validity even with noValidate */
             (_a = this.inputValidationController) !== null && _a !== void 0 ? _a : (this.inputValidationController = new InputValidationController(this));
         }
         async firstUpdated(changedProperties) {
@@ -78,19 +76,19 @@ const SgdsFormValidatorMixin = (superClass) => {
         }
         /**
          * During form resetting,
-         * 1. ValidityState is reset
-         * 2. invalid reactive prop is updated after the reset
-         * 3. Revalidates the ValidityState (but do not update invalid prop)
-         * to prepare for the next validity check
-         * 4. Reset touched state to false for a pristine form
+         * 1. ValidityState is reset (always, regardless of noValidate)
+         * 2. invalid reactive prop is updated after the reset (always)
+         * 3. Reset touched state to false for a pristine form (always)
+         * 4. Revalidates the ValidityState (but do not update invalid prop)
+         * to prepare for the next validity check (skipped when noValidate)
          */
         _mixinResetValidity(input) {
-            if (this._mixinShouldSkipSgdsValidation())
-                return;
             this.inputValidationController.resetValidity();
             this.inputValidationController.updateInvalidState();
-            this.inputValidationController.validateInput(input);
             this._isTouched ? (this._isTouched = false) : null;
+            if (this._mixinShouldSkipSgdsValidation())
+                return;
+            this.inputValidationController.validateInput(input);
         }
         _mixinValidate(input) {
             if (this._mixinShouldSkipSgdsValidation())

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    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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"}
+{"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      /** 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"],"names":[],"mappings":"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"}