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

package/react/utils/inputValidationController.cjs.js

@@ -0,0 +1,130 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * SGDS custom form validation methods and behaviours
+ */
+class InputValidationController {
+    constructor(host, options) {
+        (this.host = host).addController(this);
+        this._internals = this.host.attachInternals();
+        this.options = Object.assign({ setInvalid: (host, value) => {
+                host.invalid = value;
+            }, value: (host) => {
+                return host.value;
+            }, input: (host) => host.input }, options);
+    }
+    hostConnected() {
+        this.host.addEventListener("invalid", e => this.handleInvalid(e));
+    }
+    hostDisconnected() {
+        this.host.removeEventListener("invalid", e => this.handleInvalid(e));
+    }
+    /**
+     * Prevents the native browser error message pop up when reportValidity() called by
+     * associated form or the component's reportValidity during constraint validation
+     * Sets invalid reactive prop to true
+     */
+    handleInvalid(e) {
+        e.preventDefault();
+        this.options.setInvalid(this.host, true);
+    }
+    /**
+     * Sets invalid to false when invoked and
+     * Updates the ValidityState based on new value, but
+     * does not update invalid reactive prop
+     * @param e
+     */
+    handleInput(e) {
+        const input = e.target;
+        this.options.setInvalid(this.host, false);
+        this.validateInput(input);
+    }
+    /**
+     * Validate the input's new value after onChange and
+     * update invalid reactive prop
+     * @param e
+     */
+    handleChange(e) {
+        const input = e.target;
+        this.validateInput(input);
+        this.options.setInvalid(this.host, !this.checkValidity());
+    }
+    get form() {
+        return this._internals.form;
+    }
+    get validity() {
+        return this._internals.validity;
+    }
+    get validationMessage() {
+        return this._internals.validationMessage;
+    }
+    get willValidate() {
+        return this._internals.willValidate;
+    }
+    /**
+     * Checks the validity and updates the invalid reactive prop of form components
+     */
+    updateInvalidState() {
+        this.options.setInvalid(this.host, !this.checkValidity());
+    }
+    /**
+     * Resets the ValidityState of the control
+     */
+    resetValidity() {
+        return this._internals.setValidity({});
+    }
+    /**
+     * Reports the validity
+     */
+    checkValidity() {
+        return this._internals.checkValidity();
+    }
+    /**
+     * Reports the validity with a error popup message
+     */
+    reportValidity() {
+        return this._internals.reportValidity();
+    }
+    /**
+     * Sets the form control value into FormData,
+     * making the value of control accessible via FormData
+     */
+    setFormValue() {
+        const value = this.options.value(this.host);
+        this._internals.setFormValue(value);
+    }
+    /**
+     * Updates the ValidityState of the input in form component at current state
+     */
+    validateInput(input) {
+        /** When the form control is disabled, its always valid */
+        if (this.options.input(this.host).disabled) {
+            return this._internals.setValidity({});
+        }
+        // get the validity of the internal <input>
+        const validState = input.validity;
+        // if the input is invalid, show the correct error
+        if (!validState.valid) {
+            // loop through the error reasons
+            for (const state in validState) {
+                // if there is an error and corresponding attribute holding
+                // the message
+                if (validState[state]) {
+                    this.validationError = state.toString();
+                    // set the validity error reason and the corresponding
+                    // message
+                    this._internals.setValidity({ [this.validationError]: true }, input.validationMessage, input);
+                }
+            }
+        }
+        else {
+            this._internals.setValidity({});
+        }
+    }
+}
+
+exports.InputValidationController = InputValidationController;
+//# sourceMappingURL=inputValidationController.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"inputValidationController.cjs.js","sources":["../../../src/utils/inputValidationController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\";\nimport { SgdsFormControl } from \"./formSubmitController\";\nimport { SgdsCheckbox, SgdsInput } from \"../components\";\n\n/**\n * SGDS custom form validation methods and behaviours\n */\nexport class InputValidationController implements ReactiveController {\n  host: ReactiveControllerHost & HTMLElement;\n  _internals: ElementInternals;\n  validationError: keyof ValidityState;\n  options: InputValidationControllerOptions;\n\n  constructor(host: ReactiveControllerHost & HTMLElement, options?: Partial<InputValidationControllerOptions>) {\n    (this.host = host).addController(this);\n    this._internals = this.host.attachInternals();\n    this.options = {\n      setInvalid: (host: SgdsFormControl, value: boolean) => {\n        host.invalid = value;\n      },\n      value: (host: SgdsFormControl) => {\n        return host.value;\n      },\n      input: (host: SgdsFormControl) => host.input,\n      ...options\n    };\n  }\n\n  hostConnected(): void {\n    this.host.addEventListener(\"invalid\", e => this.handleInvalid(e));\n  }\n\n  hostDisconnected(): void {\n    this.host.removeEventListener(\"invalid\", e => this.handleInvalid(e));\n  }\n  /**\n   * Prevents the native browser error message pop up when reportValidity() called by\n   * associated form or the component's reportValidity during constraint validation\n   * Sets invalid reactive prop to true\n   */\n  handleInvalid(e: Event) {\n    e.preventDefault();\n    this.options.setInvalid(this.host, true);\n  }\n\n  /**\n   * Sets invalid to false when invoked and\n   * Updates the ValidityState based on new value, but\n   * does not update invalid reactive prop\n   * @param e\n   */\n  handleInput(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.options.setInvalid(this.host, false);\n    this.validateInput(input);\n  }\n  /**\n   * Validate the input's new value after onChange and\n   * update invalid reactive prop\n   * @param e\n   */\n  handleChange(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.validateInput(input);\n    this.options.setInvalid(this.host, !this.checkValidity());\n  }\n\n  get form() {\n    return this._internals.form;\n  }\n\n  get validity() {\n    return this._internals.validity;\n  }\n\n  get validationMessage() {\n    return this._internals.validationMessage;\n  }\n\n  get willValidate() {\n    return this._internals.willValidate;\n  }\n  /**\n   * Checks the validity and updates the invalid reactive prop of form components\n   */\n  updateInvalidState() {\n    this.options.setInvalid(this.host, !this.checkValidity());\n  }\n  /**\n   * Resets the ValidityState of the control\n   */\n  resetValidity() {\n    return this._internals.setValidity({});\n  }\n  /**\n   * Reports the validity\n   */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n  /**\n   * Reports the validity with a error popup message\n   */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n  /**\n   * Sets the form control value into FormData,\n   * making the value of control accessible via FormData\n   */\n  setFormValue() {\n    const value = this.options.value(this.host) as string | FormData | File;\n    this._internals.setFormValue(value);\n  }\n  /**\n   * Updates the ValidityState of the input in form component at current state\n   */\n  validateInput(input) {\n    /** When the form control is disabled, its always valid */\n    if (this.options.input(this.host).disabled) {\n      return this._internals.setValidity({});\n    }\n    // get the validity of the internal <input>\n    const validState = input.validity;\n    // if the input is invalid, show the correct error\n    if (!validState.valid) {\n      // loop through the error reasons\n      for (const state in validState) {\n        // if there is an error and corresponding attribute holding\n        // the message\n        if (validState[state]) {\n          this.validationError = state.toString() as keyof ValidityState;\n\n          // set the validity error reason and the corresponding\n          // message\n          this._internals.setValidity({ [this.validationError]: true }, input.validationMessage, input);\n        }\n      }\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n}\n\nexport interface InputValidationControllerOptions {\n  /** A function that sets the value of host invalid reactive prop */\n  setInvalid: (host: ReactiveControllerHost & HTMLElement, value: boolean) => void;\n  /** A function that gets the value of host value reactive prop */\n  value: (host: ReactiveControllerHost & HTMLElement) => unknown;\n  /** A function that gets the input control of host value reactive prop */\n  input: (host: ReactiveController & HTMLElement) => HTMLInputElement | SgdsInput | SgdsCheckbox;\n}\n"],"names":[],"mappings":";;;;;AAIA;;AAEG;MACU,yBAAyB,CAAA;IAMpC,WAAY,CAAA,IAA0C,EAAE,OAAmD,EAAA;QACzG,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QACvC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;QAC9C,IAAI,CAAC,OAAO,GAAA,MAAA,CAAA,MAAA,CAAA,EACV,UAAU,EAAE,CAAC,IAAqB,EAAE,KAAc,KAAI;AACpD,gBAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;AACvB,aAAC,EACD,KAAK,EAAE,CAAC,IAAqB,KAAI;gBAC/B,OAAO,IAAI,CAAC,KAAK,CAAC;AACpB,aAAC,EACD,KAAK,EAAE,CAAC,IAAqB,KAAK,IAAI,CAAC,KAAK,EACzC,EAAA,OAAO,CACX,CAAC;KACH;IAED,aAAa,GAAA;AACX,QAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;KACnE;IAED,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;KACtE;AACD;;;;AAIG;AACH,IAAA,aAAa,CAAC,CAAQ,EAAA;QACpB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;KAC1C;AAED;;;;;AAKG;AACH,IAAA,WAAW,CAAC,CAAQ,EAAA;AAClB,QAAA,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAC1C,QAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KAC3B;AACD;;;;AAIG;AACH,IAAA,YAAY,CAAC,CAAQ,EAAA;AACnB,QAAA,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;AAC3C,QAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1B,QAAA,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;KAC3D;AAED,IAAA,IAAI,IAAI,GAAA;AACN,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;KAC7B;AAED,IAAA,IAAI,QAAQ,GAAA;AACV,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;KACjC;AAED,IAAA,IAAI,iBAAiB,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC;KAC1C;AAED,IAAA,IAAI,YAAY,GAAA;AACd,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC;KACrC;AACD;;AAEG;IACH,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;KAC3D;AACD;;AAEG;IACH,aAAa,GAAA;QACX,OAAO,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;KACxC;AACD;;AAEG;IACH,aAAa,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;KACxC;AACD;;AAEG;IACH,cAAc,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,CAAC;KACzC;AACD;;;AAGG;IACH,YAAY,GAAA;AACV,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAA6B,CAAC;AACxE,QAAA,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;KACrC;AACD;;AAEG;AACH,IAAA,aAAa,CAAC,KAAK,EAAA;;AAEjB,QAAA,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE;YAC1C,OAAO,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;SACxC;;AAED,QAAA,MAAM,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC;;AAElC,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;;AAErB,YAAA,KAAK,MAAM,KAAK,IAAI,UAAU,EAAE;;;AAG9B,gBAAA,IAAI,UAAU,CAAC,KAAK,CAAC,EAAE;AACrB,oBAAA,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,QAAQ,EAAyB,CAAC;;;oBAI/D,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;iBAC/F;aACF;SACF;aAAM;AACL,YAAA,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;SACjC;KACF;AACF;;;;"}

package/react/utils/inputValidationController.js

@@ -0,0 +1,126 @@
+'use client';
+/**
+ * SGDS custom form validation methods and behaviours
+ */
+class InputValidationController {
+    constructor(host, options) {
+        (this.host = host).addController(this);
+        this._internals = this.host.attachInternals();
+        this.options = Object.assign({ setInvalid: (host, value) => {
+                host.invalid = value;
+            }, value: (host) => {
+                return host.value;
+            }, input: (host) => host.input }, options);
+    }
+    hostConnected() {
+        this.host.addEventListener("invalid", e => this.handleInvalid(e));
+    }
+    hostDisconnected() {
+        this.host.removeEventListener("invalid", e => this.handleInvalid(e));
+    }
+    /**
+     * Prevents the native browser error message pop up when reportValidity() called by
+     * associated form or the component's reportValidity during constraint validation
+     * Sets invalid reactive prop to true
+     */
+    handleInvalid(e) {
+        e.preventDefault();
+        this.options.setInvalid(this.host, true);
+    }
+    /**
+     * Sets invalid to false when invoked and
+     * Updates the ValidityState based on new value, but
+     * does not update invalid reactive prop
+     * @param e
+     */
+    handleInput(e) {
+        const input = e.target;
+        this.options.setInvalid(this.host, false);
+        this.validateInput(input);
+    }
+    /**
+     * Validate the input's new value after onChange and
+     * update invalid reactive prop
+     * @param e
+     */
+    handleChange(e) {
+        const input = e.target;
+        this.validateInput(input);
+        this.options.setInvalid(this.host, !this.checkValidity());
+    }
+    get form() {
+        return this._internals.form;
+    }
+    get validity() {
+        return this._internals.validity;
+    }
+    get validationMessage() {
+        return this._internals.validationMessage;
+    }
+    get willValidate() {
+        return this._internals.willValidate;
+    }
+    /**
+     * Checks the validity and updates the invalid reactive prop of form components
+     */
+    updateInvalidState() {
+        this.options.setInvalid(this.host, !this.checkValidity());
+    }
+    /**
+     * Resets the ValidityState of the control
+     */
+    resetValidity() {
+        return this._internals.setValidity({});
+    }
+    /**
+     * Reports the validity
+     */
+    checkValidity() {
+        return this._internals.checkValidity();
+    }
+    /**
+     * Reports the validity with a error popup message
+     */
+    reportValidity() {
+        return this._internals.reportValidity();
+    }
+    /**
+     * Sets the form control value into FormData,
+     * making the value of control accessible via FormData
+     */
+    setFormValue() {
+        const value = this.options.value(this.host);
+        this._internals.setFormValue(value);
+    }
+    /**
+     * Updates the ValidityState of the input in form component at current state
+     */
+    validateInput(input) {
+        /** When the form control is disabled, its always valid */
+        if (this.options.input(this.host).disabled) {
+            return this._internals.setValidity({});
+        }
+        // get the validity of the internal <input>
+        const validState = input.validity;
+        // if the input is invalid, show the correct error
+        if (!validState.valid) {
+            // loop through the error reasons
+            for (const state in validState) {
+                // if there is an error and corresponding attribute holding
+                // the message
+                if (validState[state]) {
+                    this.validationError = state.toString();
+                    // set the validity error reason and the corresponding
+                    // message
+                    this._internals.setValidity({ [this.validationError]: true }, input.validationMessage, input);
+                }
+            }
+        }
+        else {
+            this._internals.setValidity({});
+        }
+    }
+}
+
+export { InputValidationController };
+//# sourceMappingURL=inputValidationController.js.map

package/react/utils/inputValidationController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputValidationController.js","sources":["../../../src/utils/inputValidationController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\";\nimport { SgdsFormControl } from \"./formSubmitController\";\nimport { SgdsCheckbox, SgdsInput } from \"../components\";\n\n/**\n * SGDS custom form validation methods and behaviours\n */\nexport class InputValidationController implements ReactiveController {\n  host: ReactiveControllerHost & HTMLElement;\n  _internals: ElementInternals;\n  validationError: keyof ValidityState;\n  options: InputValidationControllerOptions;\n\n  constructor(host: ReactiveControllerHost & HTMLElement, options?: Partial<InputValidationControllerOptions>) {\n    (this.host = host).addController(this);\n    this._internals = this.host.attachInternals();\n    this.options = {\n      setInvalid: (host: SgdsFormControl, value: boolean) => {\n        host.invalid = value;\n      },\n      value: (host: SgdsFormControl) => {\n        return host.value;\n      },\n      input: (host: SgdsFormControl) => host.input,\n      ...options\n    };\n  }\n\n  hostConnected(): void {\n    this.host.addEventListener(\"invalid\", e => this.handleInvalid(e));\n  }\n\n  hostDisconnected(): void {\n    this.host.removeEventListener(\"invalid\", e => this.handleInvalid(e));\n  }\n  /**\n   * Prevents the native browser error message pop up when reportValidity() called by\n   * associated form or the component's reportValidity during constraint validation\n   * Sets invalid reactive prop to true\n   */\n  handleInvalid(e: Event) {\n    e.preventDefault();\n    this.options.setInvalid(this.host, true);\n  }\n\n  /**\n   * Sets invalid to false when invoked and\n   * Updates the ValidityState based on new value, but\n   * does not update invalid reactive prop\n   * @param e\n   */\n  handleInput(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.options.setInvalid(this.host, false);\n    this.validateInput(input);\n  }\n  /**\n   * Validate the input's new value after onChange and\n   * update invalid reactive prop\n   * @param e\n   */\n  handleChange(e: Event) {\n    const input = e.target as HTMLInputElement;\n    this.validateInput(input);\n    this.options.setInvalid(this.host, !this.checkValidity());\n  }\n\n  get form() {\n    return this._internals.form;\n  }\n\n  get validity() {\n    return this._internals.validity;\n  }\n\n  get validationMessage() {\n    return this._internals.validationMessage;\n  }\n\n  get willValidate() {\n    return this._internals.willValidate;\n  }\n  /**\n   * Checks the validity and updates the invalid reactive prop of form components\n   */\n  updateInvalidState() {\n    this.options.setInvalid(this.host, !this.checkValidity());\n  }\n  /**\n   * Resets the ValidityState of the control\n   */\n  resetValidity() {\n    return this._internals.setValidity({});\n  }\n  /**\n   * Reports the validity\n   */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n  /**\n   * Reports the validity with a error popup message\n   */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n  /**\n   * Sets the form control value into FormData,\n   * making the value of control accessible via FormData\n   */\n  setFormValue() {\n    const value = this.options.value(this.host) as string | FormData | File;\n    this._internals.setFormValue(value);\n  }\n  /**\n   * Updates the ValidityState of the input in form component at current state\n   */\n  validateInput(input) {\n    /** When the form control is disabled, its always valid */\n    if (this.options.input(this.host).disabled) {\n      return this._internals.setValidity({});\n    }\n    // get the validity of the internal <input>\n    const validState = input.validity;\n    // if the input is invalid, show the correct error\n    if (!validState.valid) {\n      // loop through the error reasons\n      for (const state in validState) {\n        // if there is an error and corresponding attribute holding\n        // the message\n        if (validState[state]) {\n          this.validationError = state.toString() as keyof ValidityState;\n\n          // set the validity error reason and the corresponding\n          // message\n          this._internals.setValidity({ [this.validationError]: true }, input.validationMessage, input);\n        }\n      }\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n}\n\nexport interface InputValidationControllerOptions {\n  /** A function that sets the value of host invalid reactive prop */\n  setInvalid: (host: ReactiveControllerHost & HTMLElement, value: boolean) => void;\n  /** A function that gets the value of host value reactive prop */\n  value: (host: ReactiveControllerHost & HTMLElement) => unknown;\n  /** A function that gets the input control of host value reactive prop */\n  input: (host: ReactiveController & HTMLElement) => HTMLInputElement | SgdsInput | SgdsCheckbox;\n}\n"],"names":[],"mappings":";AAIA;;AAEG;MACU,yBAAyB,CAAA;IAMpC,WAAY,CAAA,IAA0C,EAAE,OAAmD,EAAA;QACzG,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QACvC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;QAC9C,IAAI,CAAC,OAAO,GAAA,MAAA,CAAA,MAAA,CAAA,EACV,UAAU,EAAE,CAAC,IAAqB,EAAE,KAAc,KAAI;AACpD,gBAAA,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;AACvB,aAAC,EACD,KAAK,EAAE,CAAC,IAAqB,KAAI;gBAC/B,OAAO,IAAI,CAAC,KAAK,CAAC;AACpB,aAAC,EACD,KAAK,EAAE,CAAC,IAAqB,KAAK,IAAI,CAAC,KAAK,EACzC,EAAA,OAAO,CACX,CAAC;KACH;IAED,aAAa,GAAA;AACX,QAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;KACnE;IAED,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,CAAC,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;KACtE;AACD;;;;AAIG;AACH,IAAA,aAAa,CAAC,CAAQ,EAAA;QACpB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;KAC1C;AAED;;;;;AAKG;AACH,IAAA,WAAW,CAAC,CAAQ,EAAA;AAClB,QAAA,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC3C,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAC1C,QAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KAC3B;AACD;;;;AAIG;AACH,IAAA,YAAY,CAAC,CAAQ,EAAA;AACnB,QAAA,MAAM,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAC;AAC3C,QAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAC1B,QAAA,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;KAC3D;AAED,IAAA,IAAI,IAAI,GAAA;AACN,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;KAC7B;AAED,IAAA,IAAI,QAAQ,GAAA;AACV,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;KACjC;AAED,IAAA,IAAI,iBAAiB,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC;KAC1C;AAED,IAAA,IAAI,YAAY,GAAA;AACd,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC;KACrC;AACD;;AAEG;IACH,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;KAC3D;AACD;;AAEG;IACH,aAAa,GAAA;QACX,OAAO,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;KACxC;AACD;;AAEG;IACH,aAAa,GAAA;AACX,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC;KACxC;AACD;;AAEG;IACH,cAAc,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,CAAC;KACzC;AACD;;;AAGG;IACH,YAAY,GAAA;AACV,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAA6B,CAAC;AACxE,QAAA,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;KACrC;AACD;;AAEG;AACH,IAAA,aAAa,CAAC,KAAK,EAAA;;AAEjB,QAAA,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE;YAC1C,OAAO,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;SACxC;;AAED,QAAA,MAAM,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC;;AAElC,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE;;AAErB,YAAA,KAAK,MAAM,KAAK,IAAI,UAAU,EAAE;;;AAG9B,gBAAA,IAAI,UAAU,CAAC,KAAK,CAAC,EAAE;AACrB,oBAAA,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,QAAQ,EAAyB,CAAC;;;oBAI/D,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,GAAG,IAAI,EAAE,EAAE,KAAK,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;iBAC/F;aACF;SACF;aAAM;AACL,YAAA,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;SACjC;KACF;AACF;;;;"}

package/react/utils/validatorMixin.cjs.js

@@ -0,0 +1,108 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var decorators_js = require('lit/decorators.js');
+var inputValidationController = require('./inputValidationController.cjs.js');
+
+/**
+ * @summary The FormValidationMixin used by the form components
+ * @param superClass
+ * @returns
+ */
+const SgdsFormValidatorMixin = (superClass) => {
+    class ToBeValidatedElement extends superClass {
+        constructor() {
+            super(...arguments);
+            this._isTouched = false;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.inputValidationController = new inputValidationController.InputValidationController(this);
+        }
+        async firstUpdated(changedProperties) {
+            super.firstUpdated(changedProperties);
+            /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */
+            this.input =
+                this.shadowRoot.querySelector("input") || (await this.sgdsInput) || this.shadowRoot.querySelector("textarea");
+            this._mixinValidate(this.input);
+        }
+        /**
+         * Native lifecycle of Form-Associated Custom Element Callbacks
+         */
+        formResetCallback() {
+            if (this._mixinResetFormControl) {
+                this._mixinResetFormControl();
+            }
+            else {
+                this.value = this.defaultValue;
+                this._mixinResetValidity(this.input);
+            }
+            this._mixinSetFormValue();
+        }
+        /**
+         *
+         * Methods use by classes using this mixin
+         */
+        /**
+         * OnChange of form component
+         * 1. Make value of control accessible via FormData
+         * 2. Run change handler
+         */
+        _mixinHandleChange(e) {
+            this._mixinSetFormValue();
+            this.inputValidationController.handleChange(e);
+        }
+        /**
+         * OnChange of form component
+         * 1. Make value of control accessible via FormData
+         * 2. Run input handler
+         */
+        _mixinHandleInputChange(e) {
+            this._mixinSetFormValue();
+            this.inputValidationController.handleInput(e);
+        }
+        /**
+         * 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
+         */
+        _mixinResetValidity(input) {
+            this.inputValidationController.resetValidity();
+            this.inputValidationController.updateInvalidState();
+            this.inputValidationController.validateInput(input);
+            this._isTouched ? (this._isTouched = false) : null;
+        }
+        _mixinValidate(input) {
+            this.inputValidationController.validateInput(input);
+        }
+        _mixinSetFormValue() {
+            this.inputValidationController.setFormValue();
+        }
+        _mixinCheckValidity() {
+            return this.inputValidationController.checkValidity();
+        }
+        _mixinReportValidity() {
+            return this.inputValidationController.reportValidity();
+        }
+        _mixinGetValidity() {
+            return this.inputValidationController.validity;
+        }
+        _mixinGetValidationMessage() {
+            return this.inputValidationController.validationMessage;
+        }
+    }
+    ToBeValidatedElement.formAssociated = true;
+    tslib.__decorate([
+        decorators_js.queryAsync("sgds-input")
+    ], ToBeValidatedElement.prototype, "sgdsInput", void 0);
+    return ToBeValidatedElement;
+};
+
+exports.SgdsFormValidatorMixin = SgdsFormValidatorMixin;
+//# sourceMappingURL=validatorMixin.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"validatorMixin.cjs.js","sources":["../../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n\n    connectedCallback(): void {\n      super.connectedCallback();\n      this.inputValidationController = new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") || (await this.sgdsInput) || this.shadowRoot.querySelector(\"textarea\");\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset\n     * 2. invalid reactive prop is updated after the reset\n     * 3. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check\n     * 4. Reset touched state to false for a pristine form\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this.inputValidationController.validateInput(input);\n      this._isTouched ? (this._isTouched = false) : null;\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue() {\n      this.inputValidationController.setFormValue();\n    }\n    _mixinCheckValidity(): boolean {\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this.inputValidationController.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this.inputValidationController.validationMessage;\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n}\n"],"names":["InputValidationController","__decorate","queryAsync"],"mappings":"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"}

package/react/utils/validatorMixin.js

@@ -0,0 +1,104 @@
+'use client';
+import { __decorate } from 'tslib';
+import { queryAsync } from 'lit/decorators.js';
+import { InputValidationController } from './inputValidationController.js';
+
+/**
+ * @summary The FormValidationMixin used by the form components
+ * @param superClass
+ * @returns
+ */
+const SgdsFormValidatorMixin = (superClass) => {
+    class ToBeValidatedElement extends superClass {
+        constructor() {
+            super(...arguments);
+            this._isTouched = false;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.inputValidationController = new InputValidationController(this);
+        }
+        async firstUpdated(changedProperties) {
+            super.firstUpdated(changedProperties);
+            /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */
+            this.input =
+                this.shadowRoot.querySelector("input") || (await this.sgdsInput) || this.shadowRoot.querySelector("textarea");
+            this._mixinValidate(this.input);
+        }
+        /**
+         * Native lifecycle of Form-Associated Custom Element Callbacks
+         */
+        formResetCallback() {
+            if (this._mixinResetFormControl) {
+                this._mixinResetFormControl();
+            }
+            else {
+                this.value = this.defaultValue;
+                this._mixinResetValidity(this.input);
+            }
+            this._mixinSetFormValue();
+        }
+        /**
+         *
+         * Methods use by classes using this mixin
+         */
+        /**
+         * OnChange of form component
+         * 1. Make value of control accessible via FormData
+         * 2. Run change handler
+         */
+        _mixinHandleChange(e) {
+            this._mixinSetFormValue();
+            this.inputValidationController.handleChange(e);
+        }
+        /**
+         * OnChange of form component
+         * 1. Make value of control accessible via FormData
+         * 2. Run input handler
+         */
+        _mixinHandleInputChange(e) {
+            this._mixinSetFormValue();
+            this.inputValidationController.handleInput(e);
+        }
+        /**
+         * 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
+         */
+        _mixinResetValidity(input) {
+            this.inputValidationController.resetValidity();
+            this.inputValidationController.updateInvalidState();
+            this.inputValidationController.validateInput(input);
+            this._isTouched ? (this._isTouched = false) : null;
+        }
+        _mixinValidate(input) {
+            this.inputValidationController.validateInput(input);
+        }
+        _mixinSetFormValue() {
+            this.inputValidationController.setFormValue();
+        }
+        _mixinCheckValidity() {
+            return this.inputValidationController.checkValidity();
+        }
+        _mixinReportValidity() {
+            return this.inputValidationController.reportValidity();
+        }
+        _mixinGetValidity() {
+            return this.inputValidationController.validity;
+        }
+        _mixinGetValidationMessage() {
+            return this.inputValidationController.validationMessage;
+        }
+    }
+    ToBeValidatedElement.formAssociated = true;
+    __decorate([
+        queryAsync("sgds-input")
+    ], ToBeValidatedElement.prototype, "sgdsInput", void 0);
+    return ToBeValidatedElement;
+};
+
+export { SgdsFormValidatorMixin };
+//# sourceMappingURL=validatorMixin.js.map

package/react/utils/validatorMixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validatorMixin.js","sources":["../../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n\n    connectedCallback(): void {\n      super.connectedCallback();\n      this.inputValidationController = new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") || (await this.sgdsInput) || this.shadowRoot.querySelector(\"textarea\");\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset\n     * 2. invalid reactive prop is updated after the reset\n     * 3. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check\n     * 4. Reset touched state to false for a pristine form\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this.inputValidationController.validateInput(input);\n      this._isTouched ? (this._isTouched = false) : null;\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue() {\n      this.inputValidationController.setFormValue();\n    }\n    _mixinCheckValidity(): boolean {\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this.inputValidationController.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this.inputValidationController.validationMessage;\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n}\n"],"names":[],"mappings":";;;;;AAQA;;;;AAIG;AACU,MAAA,sBAAsB,GAAG,CAAoC,UAAa,KAAI;IACzF,MAAM,oBAAqB,SAAQ,UAAU,CAAA;AAA7C,QAAA,WAAA,GAAA;;YAIU,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;SA8F5B;QA3FC,iBAAiB,GAAA;YACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAC1B,IAAI,CAAC,yBAAyB,GAAG,IAAI,yBAAyB,CAAC,IAAI,CAAC,CAAC;SACtE;QACD,MAAM,YAAY,CAAC,iBAAiB,EAAA;AAClC,YAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;;AAGtC,YAAA,IAAI,CAAC,KAAK;gBACR,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,KAAK,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;AAChH,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACjC;AAED;;AAEG;QACH,iBAAiB,GAAA;AACf,YAAA,IAAI,IAAI,CAAC,sBAAsB,EAAE;gBAC/B,IAAI,CAAC,sBAAsB,EAAE,CAAC;aAC/B;iBAAM;AACL,gBAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;AAC/B,gBAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACtC;YACD,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B;AACD;;;AAGG;AAEH;;;;AAIG;AACH,QAAA,kBAAkB,CAAC,CAAQ,EAAA;YACzB,IAAI,CAAC,kBAAkB,EAAE,CAAC;AAC1B,YAAA,IAAI,CAAC,yBAAyB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;SAChD;AACD;;;;AAIG;AACH,QAAA,uBAAuB,CAAC,CAAQ,EAAA;YAC9B,IAAI,CAAC,kBAAkB,EAAE,CAAC;AAC1B,YAAA,IAAI,CAAC,yBAAyB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;SAC/C;AACD;;;;;;;AAOG;AACH,QAAA,mBAAmB,CAAC,KAAyD,EAAA;AAC3E,YAAA,IAAI,CAAC,yBAAyB,CAAC,aAAa,EAAE,CAAC;AAC/C,YAAA,IAAI,CAAC,yBAAyB,CAAC,kBAAkB,EAAE,CAAC;AACpD,YAAA,IAAI,CAAC,yBAAyB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AACpD,YAAA,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,GAAG,KAAK,IAAI,IAAI,CAAC;SACpD;AAED,QAAA,cAAc,CAAC,KAAyD,EAAA;AACtE,YAAA,IAAI,CAAC,yBAAyB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;SACrD;QACD,kBAAkB,GAAA;AAChB,YAAA,IAAI,CAAC,yBAAyB,CAAC,YAAY,EAAE,CAAC;SAC/C;QACD,mBAAmB,GAAA;AACjB,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,aAAa,EAAE,CAAC;SACvD;QACD,oBAAoB,GAAA;AAClB,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,cAAc,EAAE,CAAC;SACxD;QACD,iBAAiB,GAAA;AACf,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,QAAQ,CAAC;SAChD;QACD,0BAA0B,GAAA;AACxB,YAAA,OAAO,IAAI,CAAC,yBAAyB,CAAC,iBAAiB,CAAC;SACzD;;IAtFM,oBAAc,CAAA,cAAA,GAAG,IAAH,CAAQ;AAIH,IAAA,UAAA,CAAA;QAAzB,UAAU,CAAC,YAAY,CAAC;AAA+B,KAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AA+F1D,IAAA,OAAO,oBAAsE,CAAC;AAChF;;;;"}

package/styles/form-hint.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1)}`;
+var css_248z = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1)}.form-text.disabled{opacity:var(--sgds-opacity-50)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-hint.js.map

package/styles/form-label.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`.form-label{margin-bottom:0}.form-check-label,.form-label{color:var(--sgds-form-color)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
+var css_248z = css`.form-label{color:var(--sgds-form-color);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-50)}.form-check-label{color:var(--sgds-form-color)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-label.js.map

package/themes/day.css

@@ -13,7 +13,7 @@
   --sgds-default-color: var(--sgds-gray-900);
   --sgds-default-color-inverse: var(--sgds-gray-000);
   --sgds-default-color-muted: var(--sgds-gray-200);
-  --sgds-default-color-subtle: var(--sgds-gray-400);
+  --sgds-default-color-subtle: var(--sgds-gray-500);
   --sgds-default-color-emphasis: var(--sgds-gray-800);
   --sgds-default-color-on-dark: var(--sgds-gray-000);
   --sgds-default-color-on-light: var(--sgds-gray-800);

package/themes/night.css

@@ -5,8 +5,9 @@
   /* Semantic - Default Colors */
   --sgds-default-bg: var(--sgds-gray-900);
   --sgds-default-bg-muted: var(--sgds-gray-700);
-  --sgds-default-bg-subtle: var(--sgds-gray-400);
-  --sgds-default-bg-emphasis: var(--sgds-gray-800);
+  --sgds-default-bg-subtle: var(--sgds-gray-500);
+  --sgds-default-bg-emphasis: var(--sgds-gray-200);
+  --sgds-default-bg-overlay: oklch(from var(--sgds-gray-900) l c h / 0.4);
   --sgds-default-bg-translucent: oklch(from var(--sgds-gray-000) l c h / 0.1);
   --sgds-default-bg-translucent-subtle: oklch(from var(--sgds-gray-000) l c h / 0.1);
   --sgds-default-bg-transparent: transparent;

package/themes/root.css

@@ -145,6 +145,7 @@
   --sgds-icon-size-lg: 1.5rem;
   --sgds-icon-size-xl: 2rem;
   --sgds-icon-size-2-xl: 3rem;
+  --sgds-icon-size-3-xl: 4rem;
 
   /* Primitive - Letter Spacing */
   --sgds-letter-spacing-tighter: -1px;

package/utils/{form.d.ts → formSubmitController.d.ts}

@@ -1,6 +1,10 @@
 import type SgdsButton from "../components/Button/sgds-button";
 import type { ReactiveController, ReactiveControllerHost } from "lit";
 import SgdsElement from "../base/sgds-element";
+import { SgdsInput } from "../components";
+/**
+ * A controller to help with form submission
+ */
 export declare class FormSubmitController implements ReactiveController {
     host?: ReactiveControllerHost & Element;
     form?: HTMLFormElement | null;
@@ -8,10 +12,10 @@ export declare class FormSubmitController implements ReactiveController {
     constructor(host: ReactiveControllerHost & Element, options?: Partial<FormSubmitControllerOptions>);
     hostConnected(): void;
     hostDisconnected(): void;
-    handleFormData(event: FormDataEvent): void;
-    handleFormSubmit(event: Event): void;
-    handleFormReset(): void;
-    reportFormValidity(): boolean;
+    /**
+     * Creates a temporary native HTML button that can participate in form and invoke form submits and reset
+     * Button is removed once action is performed
+     */
     doAction(type: "submit" | "reset", invoker?: HTMLInputElement | SgdsButton): void;
     /** Resets the form, restoring all the control to their default value */
     reset(invoker?: HTMLInputElement | SgdsButton): void;
@@ -21,21 +25,6 @@ export declare class FormSubmitController implements ReactiveController {
 export interface FormSubmitControllerOptions {
     /** A function that returns the form containing the form control. */
     form: (input: unknown) => HTMLFormElement | null;
-    /** A function that returns the form control's name, which will be submitted with the form data. */
-    name: (input: unknown) => string;
-    /** A function that returns the form control's current value. */
-    value: (input: unknown) => unknown | unknown[];
-    /** A function that returns the form control's default value. */
-    defaultValue: (input: unknown) => unknown | unknown[];
-    /** A function that returns the form control's current disabled state. If disabled, the value won't be submitted. */
-    disabled: (input: unknown) => boolean;
-    /**
-     * A function that maps to the form control's reportValidity() function. When the control is invalid, this will
-     * prevent submission and trigger the browser's constraint violation warning.
-     */
-    reportValidity: (input: unknown) => boolean;
-    /** A function that sets the form control's value */
-    setValue: (input: unknown, value: unknown) => void;
 }
 export interface SgdsFormControl extends SgdsElement {
     name: string;
@@ -43,7 +32,7 @@ export interface SgdsFormControl extends SgdsElement {
     disabled?: boolean;
     defaultValue?: unknown;
     defaultChecked?: boolean;
-    form?: string;
+    form?: HTMLFormElement;
     valid?: boolean;
     invalid?: boolean;
     pattern?: string;
@@ -53,4 +42,5 @@ export interface SgdsFormControl extends SgdsElement {
     required?: boolean;
     minlength?: number;
     maxlength?: number;
+    input?: HTMLInputElement | SgdsInput;
 }