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

package/react/index.cjs.js

@@ -7,8 +7,8 @@ var index = require('./accordion-item/index.cjs.js');
 var index$1 = require('./accordion/index.cjs.js');
 var index$2 = require('./alert-link/index.cjs.js');
 var index$3 = require('./alert/index.cjs.js');
-var index$4 = require('./button/index.cjs.js');
-var index$5 = require('./badge/index.cjs.js');
+var index$4 = require('./badge/index.cjs.js');
+var index$5 = require('./button/index.cjs.js');
 var index$6 = require('./card/index.cjs.js');
 var index$7 = require('./breadcrumb-item/index.cjs.js');
 var index$8 = require('./breadcrumb/index.cjs.js');
@@ -83,8 +83,8 @@ exports.SgdsAccordionItem = index["default"];
 exports.SgdsAccordion = index$1["default"];
 exports.SgdsAlertLink = index$2["default"];
 exports.SgdsAlert = index$3["default"];
-exports.SgdsButton = index$4["default"];
-exports.SgdsBadge = index$5["default"];
+exports.SgdsBadge = index$4["default"];
+exports.SgdsButton = index$5["default"];
 exports.SgdsCard = index$6["default"];
 exports.SgdsBreadcrumbItem = index$7["default"];
 exports.SgdsBreadcrumb = index$8["default"];

package/react/index.d.ts

@@ -2,8 +2,8 @@ export { default as SgdsAccordionItem } from './accordion-item';
 export { default as SgdsAccordion } from './accordion';
 export { default as SgdsAlertLink } from './alert-link';
 export { default as SgdsAlert } from './alert';
-export { default as SgdsButton } from './button';
 export { default as SgdsBadge } from './badge';
+export { default as SgdsButton } from './button';
 export { default as SgdsCard } from './card';
 export { default as SgdsBreadcrumbItem } from './breadcrumb-item';
 export { default as SgdsBreadcrumb } from './breadcrumb';

package/react/index.js

@@ -3,8 +3,8 @@ export { default as SgdsAccordionItem } from './accordion-item/index.js';
 export { default as SgdsAccordion } from './accordion/index.js';
 export { default as SgdsAlertLink } from './alert-link/index.js';
 export { default as SgdsAlert } from './alert/index.js';
-export { default as SgdsButton } from './button/index.js';
 export { default as SgdsBadge } from './badge/index.js';
+export { default as SgdsButton } from './button/index.js';
 export { default as SgdsCard } from './card/index.js';
 export { default as SgdsBreadcrumbItem } from './breadcrumb-item/index.js';
 export { default as SgdsBreadcrumb } from './breadcrumb/index.js';

package/react/radio-group/index.cjs.js

@@ -34,7 +34,9 @@ var index = react.createComponent({
     tagName: "sgds-radio-group",
     elementClass: sgdsRadioGroup.SgdsRadioGroup,
     events: {
-        onSgdsChange: "sgds-change"
+        onSgdsChange: "sgds-change",
+        onSgdsInvalid: "sgds-invalid",
+        onSgdsValid: "sgds-valid"
     }
 });
 

package/react/radio-group/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/react/radio-group/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Radio/sgds-radio-group\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-radio-group\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-radio-group\",\n  elementClass: Component,\n  events: {\n    onSgdsChange: \"sgds-change\"\n  }\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,kBAAkB,EAAEC,6BAAS,CAAC,CAAC;AAExC,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,YAAY,EAAEF,6BAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC5B,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/radio-group/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Radio/sgds-radio-group\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-radio-group\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-radio-group\",\n  elementClass: Component,\n  events: {\n    onSgdsChange: \"sgds-change\",\n    onSgdsInvalid: \"sgds-invalid\",\n    onSgdsValid: \"sgds-valid\"\n  }\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,kBAAkB,EAAEC,6BAAS,CAAC,CAAC;AAExC,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,YAAY,EAAEF,6BAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,WAAW,EAAE,YAAY;AAC1B,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/radio-group/index.js

@@ -10,7 +10,9 @@ var index = createComponent({
     tagName: "sgds-radio-group",
     elementClass: SgdsRadioGroup,
     events: {
-        onSgdsChange: "sgds-change"
+        onSgdsChange: "sgds-change",
+        onSgdsInvalid: "sgds-invalid",
+        onSgdsValid: "sgds-valid"
     }
 });
 

package/react/radio-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/radio-group/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Radio/sgds-radio-group\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-radio-group\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-radio-group\",\n  elementClass: Component,\n  events: {\n    onSgdsChange: \"sgds-change\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,kBAAkB,EAAEA,cAAS,CAAC,CAAC;AAExC,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,YAAY,EAAEA,cAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC5B,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/radio-group/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Radio/sgds-radio-group\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-radio-group\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-radio-group\",\n  elementClass: Component,\n  events: {\n    onSgdsChange: \"sgds-change\",\n    onSgdsInvalid: \"sgds-invalid\",\n    onSgdsValid: \"sgds-valid\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,kBAAkB,EAAEA,cAAS,CAAC,CAAC;AAExC,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,kBAAkB;AAC3B,IAAA,YAAY,EAAEA,cAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,WAAW,EAAE,YAAY;AAC1B,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/select/index.cjs.js

@@ -38,6 +38,8 @@ var index = react.createComponent({
         onSgdsChange: "sgds-change",
         onSgdsFocus: "sgds-focus",
         onSgdsBlur: "sgds-blur",
+        onSgdsInvalid: "sgds-invalid",
+        onSgdsValid: "sgds-valid",
         onSgdsShow: "sgds-show",
         onSgdsAfterShow: "sgds-after-show",
         onSgdsHide: "sgds-hide",

package/react/select/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/react/select/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Select/sgds-select\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-select\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-select\",\n  elementClass: Component,\n  events: {\n    onSgdsSelect: \"sgds-select\",\n    onSgdsChange: \"sgds-change\",\n    onSgdsFocus: \"sgds-focus\",\n    onSgdsBlur: \"sgds-blur\",\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,aAAa,EAAEC,qBAAS,CAAC,CAAC;AAEnC,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,YAAY,EAAEF,qBAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AACnC,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/select/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Select/sgds-select\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-select\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-select\",\n  elementClass: Component,\n  events: {\n    onSgdsSelect: \"sgds-select\",\n    onSgdsChange: \"sgds-change\",\n    onSgdsFocus: \"sgds-focus\",\n    onSgdsBlur: \"sgds-blur\",\n    onSgdsInvalid: \"sgds-invalid\",\n    onSgdsValid: \"sgds-valid\",\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,aAAa,EAAEC,qBAAS,CAAC,CAAC;AAEnC,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,YAAY,EAAEF,qBAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AACnC,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/select/index.js

@@ -14,6 +14,8 @@ var index = createComponent({
         onSgdsChange: "sgds-change",
         onSgdsFocus: "sgds-focus",
         onSgdsBlur: "sgds-blur",
+        onSgdsInvalid: "sgds-invalid",
+        onSgdsValid: "sgds-valid",
         onSgdsShow: "sgds-show",
         onSgdsAfterShow: "sgds-after-show",
         onSgdsHide: "sgds-hide",

package/react/select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/select/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Select/sgds-select\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-select\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-select\",\n  elementClass: Component,\n  events: {\n    onSgdsSelect: \"sgds-select\",\n    onSgdsChange: \"sgds-change\",\n    onSgdsFocus: \"sgds-focus\",\n    onSgdsBlur: \"sgds-blur\",\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,aAAa,EAAEA,UAAS,CAAC,CAAC;AAEnC,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,YAAY,EAAEA,UAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AACnC,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/select/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Select/sgds-select\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-select\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-select\",\n  elementClass: Component,\n  events: {\n    onSgdsSelect: \"sgds-select\",\n    onSgdsChange: \"sgds-change\",\n    onSgdsFocus: \"sgds-focus\",\n    onSgdsBlur: \"sgds-blur\",\n    onSgdsInvalid: \"sgds-invalid\",\n    onSgdsValid: \"sgds-valid\",\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,aAAa,EAAEA,UAAS,CAAC,CAAC;AAEnC,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,YAAY,EAAEA,UAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AACnC,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/utils/validatorMixin.cjs.js

@@ -24,9 +24,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.InputValidationController(this));
         }
         async firstUpdated(changedProperties) {
@@ -83,19 +81,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/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    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":";;;;;;;;;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,IAAIA,mDAAyB,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,IAAAC,gBAAA,CAAA;QAAzBC,wBAAU,CAAC,YAAY,CAAC;AAA+B,KAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AACnB,IAAAD,gBAAA,CAAA;QAApCC,wBAAU,CAAC,uBAAuB,CAAC;AAAyC,KAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAoI/E,IAAA,OAAO,oBAAsE,CAAC;AAChF;;;;"}
+{"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      /** 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":["InputValidationController","__decorate","queryAsync"],"mappings":"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"}

package/react/utils/validatorMixin.js

@@ -20,9 +20,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) {
@@ -79,19 +77,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/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    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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"}

package/types/react.d.ts

@@ -155,6 +155,32 @@ export interface SgdsAlertProps extends SgdsBaseProps {
   onSgdsHide?: SgdsEventHandler;
 }
 
+// ── Badge ─────────────────────────────────────────────────────────────
+
+export interface SgdsBadgeProps extends SgdsBaseProps {
+  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true */
+  show?: boolean;
+  /** One or more badge variant combinations.
+Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.
+
+(@deprecated) The `info` variant is deprecated. Use `primary` instead. */
+  variant?: "primary" | "accent" | "success" | "danger" | "warning" | "cyan" | "purple" | "neutral" | "white" | "info";
+  /** Manually set the outlined state to false */
+  outlined?: boolean;
+  /** Manually set the dismissible state of the button to `false` */
+  dismissible?: boolean;
+  /** Manually enable full width */
+  fullWidth?: boolean;
+  "onsgds-show"?: SgdsEventHandler;
+  onSgdsShow?: SgdsEventHandler;
+  "onsgds-hide"?: SgdsEventHandler;
+  onSgdsHide?: SgdsEventHandler;
+  "onsgds-after-show"?: SgdsEventHandler;
+  onSgdsAfterShow?: SgdsEventHandler;
+  "onsgds-after-hide"?: SgdsEventHandler;
+  onSgdsAfterHide?: SgdsEventHandler;
+}
+
 // ── Button ─────────────────────────────────────────────────────────────
 
 export interface SgdsButtonProps extends SgdsBaseProps {
@@ -211,32 +237,6 @@ value of this attribute must be an id of a form in the same document or shadow r
   onSgdsFocus?: SgdsEventHandler;
 }
 
-// ── Badge ─────────────────────────────────────────────────────────────
-
-export interface SgdsBadgeProps extends SgdsBaseProps {
-  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true */
-  show?: boolean;
-  /** One or more badge variant combinations.
-Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.
-
-(@deprecated) The `info` variant is deprecated. Use `primary` instead. */
-  variant?: "primary" | "accent" | "success" | "danger" | "warning" | "cyan" | "purple" | "neutral" | "white" | "info";
-  /** Manually set the outlined state to false */
-  outlined?: boolean;
-  /** Manually set the dismissible state of the button to `false` */
-  dismissible?: boolean;
-  /** Manually enable full width */
-  fullWidth?: boolean;
-  "onsgds-show"?: SgdsEventHandler;
-  onSgdsShow?: SgdsEventHandler;
-  "onsgds-hide"?: SgdsEventHandler;
-  onSgdsHide?: SgdsEventHandler;
-  "onsgds-after-show"?: SgdsEventHandler;
-  onSgdsAfterShow?: SgdsEventHandler;
-  "onsgds-after-hide"?: SgdsEventHandler;
-  onSgdsAfterHide?: SgdsEventHandler;
-}
-
 // ── Card ─────────────────────────────────────────────────────────────
 
 export interface SgdsCardProps 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;
@@ -596,6 +609,8 @@ export interface SgdsDropdownItemProps extends SgdsBaseProps {
   active?: boolean;
   /** Disables the SgdsMainnavItem */
   disabled?: boolean;
+  /** Forwards aria-label to the inner clickable element for accessibility */
+  ariaLabel?: string;
 }
 
 // ── Dropdown ─────────────────────────────────────────────────────────────
@@ -903,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 ─────────────────────────────────────────────────────────────
@@ -1065,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 */
@@ -1083,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 ─────────────────────────────────────────────────────────────
@@ -1116,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 */
@@ -1170,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;
@@ -1686,8 +1715,8 @@ declare module "react" {
       "sgds-accordion": React.DetailedHTMLProps<SgdsAccordionProps, HTMLElement>;
       "sgds-alert-link": React.DetailedHTMLProps<SgdsAlertLinkProps, HTMLElement>;
       "sgds-alert": React.DetailedHTMLProps<SgdsAlertProps, HTMLElement>;
-      "sgds-button": React.DetailedHTMLProps<SgdsButtonProps, HTMLElement>;
       "sgds-badge": React.DetailedHTMLProps<SgdsBadgeProps, 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>;
@@ -1769,8 +1798,8 @@ declare global {
     "sgds-accordion": HTMLElement;
     "sgds-alert-link": HTMLElement;
     "sgds-alert": HTMLElement;
-    "sgds-button": HTMLElement;
     "sgds-badge": HTMLElement;
+    "sgds-button": HTMLElement;
     "sgds-card": HTMLElement;
     "sgds-breadcrumb-item": HTMLElement;
     "sgds-breadcrumb": 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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"}