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

package/utils/formSubmitController.js

@@ -0,0 +1,59 @@
+/**
+ * A controller to help with form submission
+ */
+class FormSubmitController {
+    constructor(host, options) {
+        (this.host = host).addController(this);
+        this.options = Object.assign({ form: (input) => {
+                return input.closest("form");
+            } }, options);
+    }
+    hostConnected() {
+        this.form = this.options.form(this.host);
+    }
+    hostDisconnected() {
+        if (this.form) {
+            this.form = undefined;
+        }
+    }
+    /**
+     * 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, invoker) {
+        if (this.form) {
+            const button = document.createElement("button");
+            button.type = type;
+            button.style.position = "absolute";
+            button.style.width = "0";
+            button.style.height = "0";
+            button.style.clipPath = "inset(50%)";
+            button.style.overflow = "hidden";
+            button.style.whiteSpace = "nowrap";
+            // Pass form attributes through to the temporary button
+            if (invoker) {
+                ["formaction", "formmethod", "formnovalidate", "formtarget"].forEach(attr => {
+                    if (invoker.hasAttribute(attr)) {
+                        button.setAttribute(attr, invoker.getAttribute(attr));
+                    }
+                });
+            }
+            this.form.append(button);
+            button.click();
+            button.remove();
+        }
+    }
+    /** Resets the form, restoring all the control to their default value */
+    reset(invoker) {
+        this.doAction("reset", invoker);
+    }
+    /** Submits the form, triggering validation and form data injection. */
+    submit(invoker) {
+        // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a
+        // native submit button into the form, "click" it, then remove it to simulate a standard form submission.
+        this.doAction("submit", invoker);
+    }
+}
+
+export { FormSubmitController };
+//# sourceMappingURL=formSubmitController.js.map

package/utils/formSubmitController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formSubmitController.js","sources":["../../src/utils/formSubmitController.ts"],"sourcesContent":["import type SgdsButton from \"../components/Button/sgds-button\";\nimport type { ReactiveController, ReactiveControllerHost } from \"lit\";\nimport SgdsElement from \"../base/sgds-element\";\nimport { SgdsInput } from \"../components\";\n\n/**\n * A controller to help with form submission\n */\nexport class FormSubmitController implements ReactiveController {\n  host?: ReactiveControllerHost & Element;\n  form?: HTMLFormElement | null;\n  options: FormSubmitControllerOptions;\n\n  constructor(host: ReactiveControllerHost & Element, options?: Partial<FormSubmitControllerOptions>) {\n    (this.host = host).addController(this);\n    this.options = {\n      form: (input: HTMLInputElement) => {\n        return input.closest(\"form\");\n      },\n      ...options\n    };\n  }\n\n  hostConnected() {\n    this.form = this.options.form(this.host);\n  }\n\n  hostDisconnected() {\n    if (this.form) {\n      this.form = undefined;\n    }\n  }\n  /**\n   * Creates a temporary native HTML button that can participate in form and invoke form submits and reset\n   * Button is removed once action is performed\n   */\n  doAction(type: \"submit\" | \"reset\", invoker?: HTMLInputElement | SgdsButton) {\n    if (this.form) {\n      const button = document.createElement(\"button\");\n      button.type = type;\n      button.style.position = \"absolute\";\n      button.style.width = \"0\";\n      button.style.height = \"0\";\n      button.style.clipPath = \"inset(50%)\";\n      button.style.overflow = \"hidden\";\n      button.style.whiteSpace = \"nowrap\";\n\n      // Pass form attributes through to the temporary button\n      if (invoker) {\n        [\"formaction\", \"formmethod\", \"formnovalidate\", \"formtarget\"].forEach(attr => {\n          if (invoker.hasAttribute(attr)) {\n            button.setAttribute(attr, invoker.getAttribute(attr));\n          }\n        });\n      }\n\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n\n  /** Resets the form, restoring all the control to their default value */\n  reset(invoker?: HTMLInputElement | SgdsButton) {\n    this.doAction(\"reset\", invoker);\n  }\n\n  /** Submits the form, triggering validation and form data injection. */\n  submit(invoker?: HTMLInputElement | SgdsButton) {\n    // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a\n    // native submit button into the form, \"click\" it, then remove it to simulate a standard form submission.\n    this.doAction(\"submit\", invoker);\n  }\n}\n\nexport interface FormSubmitControllerOptions {\n  /** A function that returns the form containing the form control. */\n  form: (input: unknown) => HTMLFormElement | null;\n}\n\nexport interface SgdsFormControl extends SgdsElement {\n  // Form attributes\n  name: string;\n  value: unknown;\n  disabled?: boolean;\n  defaultValue?: unknown;\n  defaultChecked?: boolean;\n  form?: HTMLFormElement;\n  valid?: boolean;\n  invalid?: boolean;\n\n  // Constraint validation attributes\n  pattern?: string;\n  min?: number | string | Date;\n  max?: number | string | Date;\n  step?: number | \"any\";\n  required?: boolean;\n  minlength?: number;\n  maxlength?: number;\n\n  input?: HTMLInputElement | SgdsInput;\n}\n"],"names":[],"mappings":"AAKA;;AAEG;MACU,oBAAoB,CAAA;IAK/B,WAAY,CAAA,IAAsC,EAAE,OAA8C,EAAA;QAChG,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QACvC,IAAI,CAAC,OAAO,GACV,MAAA,CAAA,MAAA,CAAA,EAAA,IAAI,EAAE,CAAC,KAAuB,KAAI;AAChC,gBAAA,OAAO,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;aAC9B,EAAA,EACE,OAAO,CACX,CAAC;KACH;IAED,aAAa,GAAA;AACX,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1C;IAED,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;SACvB;KACF;AACD;;;AAGG;IACH,QAAQ,CAAC,IAAwB,EAAE,OAAuC,EAAA;AACxE,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AAChD,YAAA,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;AACnB,YAAA,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;AACnC,YAAA,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC;AACzB,YAAA,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;AAC1B,YAAA,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,YAAY,CAAC;AACrC,YAAA,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;AACjC,YAAA,MAAM,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;;YAGnC,IAAI,OAAO,EAAE;AACX,gBAAA,CAAC,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,IAAG;AAC1E,oBAAA,IAAI,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE;AAC9B,wBAAA,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;qBACvD;AACH,iBAAC,CAAC,CAAC;aACJ;AAED,YAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YACzB,MAAM,CAAC,KAAK,EAAE,CAAC;YACf,MAAM,CAAC,MAAM,EAAE,CAAC;SACjB;KACF;;AAGD,IAAA,KAAK,CAAC,OAAuC,EAAA;AAC3C,QAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;KACjC;;AAGD,IAAA,MAAM,CAAC,OAAuC,EAAA;;;AAG5C,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;KAClC;AACF;;;;"}

package/utils/inputValidationController.d.ts

@@ -0,0 +1,70 @@
+import { ReactiveController, ReactiveControllerHost } from "lit";
+import { SgdsCheckbox, SgdsInput } from "../components";
+/**
+ * SGDS custom form validation methods and behaviours
+ */
+export declare class InputValidationController implements ReactiveController {
+    host: ReactiveControllerHost & HTMLElement;
+    _internals: ElementInternals;
+    validationError: keyof ValidityState;
+    options: InputValidationControllerOptions;
+    constructor(host: ReactiveControllerHost & HTMLElement, options?: Partial<InputValidationControllerOptions>);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * 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: Event): void;
+    /**
+     * 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: Event): void;
+    /**
+     * Validate the input's new value after onChange and
+     * update invalid reactive prop
+     * @param e
+     */
+    handleChange(e: Event): void;
+    get form(): HTMLFormElement;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    /**
+     * Checks the validity and updates the invalid reactive prop of form components
+     */
+    updateInvalidState(): void;
+    /**
+     * Resets the ValidityState of the control
+     */
+    resetValidity(): void;
+    /**
+     * Reports the validity
+     */
+    checkValidity(): boolean;
+    /**
+     * Reports the validity with a error popup message
+     */
+    reportValidity(): boolean;
+    /**
+     * Sets the form control value into FormData,
+     * making the value of control accessible via FormData
+     */
+    setFormValue(): void;
+    /**
+     * Updates the ValidityState of the input in form component at current state
+     */
+    validateInput(input: any): void;
+}
+export interface InputValidationControllerOptions {
+    /** A function that sets the value of host invalid reactive prop */
+    setInvalid: (host: ReactiveControllerHost & HTMLElement, value: boolean) => void;
+    /** A function that gets the value of host value reactive prop */
+    value: (host: ReactiveControllerHost & HTMLElement) => unknown;
+    /** A function that gets the input control of host value reactive prop */
+    input: (host: ReactiveController & HTMLElement) => HTMLInputElement | SgdsInput | SgdsCheckbox;
+}

package/utils/inputValidationController.js

@@ -0,0 +1,125 @@
+/**
+ * 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/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":"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"}

package/utils/validatorMixin.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from "lit";
+import { SgdsInput } from "../components";
+import { InputValidationController } from "./inputValidationController";
+type Constructor<T> = new (...args: any[]) => T;
+/**
+ * @summary The FormValidationMixin used by the form components
+ * @param superClass
+ * @returns
+ */
+export declare const SgdsFormValidatorMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<ToBeValidatedElementInterface> & T;
+export declare class ToBeValidatedElementInterface {
+    inputValidationController: InputValidationController;
+    input: HTMLInputElement;
+    _mixinHandleChange(e: Event): void;
+    _mixinHandleInputChange(e: Event): void;
+    _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;
+    _mixinValidate(input: HTMLInputElement | SgdsInput): void;
+    _mixinSetFormValue(): void;
+    _mixinCheckValidity(): boolean;
+    _mixinReportValidity(): boolean;
+    _mixinGetValidity(): ValidityState;
+    _mixinGetValidationMessage(): string;
+}
+export {};

package/utils/validatorMixin.js

@@ -0,0 +1,103 @@
+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/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":"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"}

package/base/form-check-element.d.ts

@@ -1,50 +0,0 @@
-import { SgdsFormControl } from "../utils/form";
-import SgdsElement from "./sgds-element";
-export declare class FormCheckElement extends SgdsElement implements SgdsFormControl {
-    /**@internal */
-    input: HTMLInputElement;
-    /**@internal */
-    private readonly formSubmitController;
-    /** Name of the HTML form control. Submitted with the form as part of a name/value pair. */
-    name: string;
-    /** For aria-label when there is no appropriate text label visible */
-    ariaLabel: string;
-    /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */
-    value: string;
-    /** Makes the checkbox a required field. */
-    required: boolean;
-    /** Draws the checkbox in a checked state. */
-    checked: boolean;
-    /** Disables the checkbox (so the user can't check / uncheck it). */
-    disabled: boolean;
-    /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
-    hasFeedback: boolean;
-    /** 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 invalid. Replace the pseudo :invalid selector for absent in custom elements */
-    invalid: boolean;
-    /** Marks the checkbox input as indeterminate , with indeterminate logo  */
-    indeterminate: boolean;
-    _handleInvalidChange(): void;
-    /** Simulates a click on the checkbox. */
-    click(): void;
-    /** Sets focus on the checkbox. */
-    focus(options?: FocusOptions): void;
-    /** Removes focus from the checkbox. */
-    blur(): void;
-    /** Checks for validity and shows the browser's validation message if the control is invalid. */
-    reportValidity(): boolean;
-    protected _handleChange(): void;
-    protected _handleKeyDown(event: KeyboardEvent): void;
-    protected _handleInvalid(e: Event): void;
-    /** @internal For Id/For pair of the HTML form control and label. */
-    protected _inputId: string;
-    /**@internal */
-    protected _size: string;
-    /** @internal */
-    handleDisabledChange(): void;
-    /** @internal */
-    handleStateChange(): void;
-    render(): import("lit-html").TemplateResult<1>;
-}
-export default FormCheckElement;

package/base/form-check-element.js

@@ -1,169 +0,0 @@
-import { __decorate } from 'tslib';
-import { html } from 'lit';
-import { query, property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { defaultValue } from '../utils/defaultvalue.js';
-import { FormSubmitController } from '../utils/form.js';
-import { watch } from '../utils/watch.js';
-import SgdsElement from './sgds-element.js';
-
-class FormCheckElement extends SgdsElement {
-    constructor() {
-        super(...arguments);
-        /**@internal */
-        this.formSubmitController = new FormSubmitController(this, {
-            value: (control) => (control.checked ? control.value : undefined),
-            defaultValue: (control) => control.defaultChecked,
-            setValue: (control, checked) => (control.checked = checked)
-        });
-        /** For aria-label when there is no appropriate text label visible */
-        this.ariaLabel = "checkbox";
-        /** Makes the checkbox a required field. */
-        this.required = false;
-        /** Draws the checkbox in a checked state. */
-        this.checked = false;
-        /** Disables the checkbox (so the user can't check / uncheck it). */
-        this.disabled = false;
-        /** Allows invalidFeedback, invalid and valid styles to be visible with the input */
-        this.hasFeedback = false;
-        /** 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. */
-        this.defaultChecked = false;
-        /** Marks the checkbox input as invalid. Replace the pseudo :invalid selector for absent in custom elements */
-        this.invalid = false;
-        /** Marks the checkbox input as indeterminate , with indeterminate logo  */
-        this.indeterminate = false;
-    }
-    _handleInvalidChange() {
-        this.emit("sgds-validity-change", { detail: { invalid: this.invalid } });
-    }
-    /** Simulates a click on the checkbox. */
-    click() {
-        this.input.click();
-    }
-    /** Sets focus on the checkbox. */
-    focus(options) {
-        this.input.focus(options);
-    }
-    /** Removes focus from the checkbox. */
-    blur() {
-        this.input.blur();
-    }
-    /** Checks for validity and shows the browser's validation message if the control is invalid. */
-    reportValidity() {
-        if (!this.input.reportValidity()) {
-            this.invalid = !this.input.checkValidity();
-        }
-        return this.input.reportValidity();
-    }
-    _handleChange() {
-        if (this.indeterminate) {
-            this.indeterminate = !this.indeterminate;
-        }
-        this.checked = !this.checked;
-        this.value = this.input.value;
-        this.emit("sgds-change", { detail: { checked: this.checked, value: this.value } });
-    }
-    _handleKeyDown(event) {
-        const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
-        if (event.key === "Enter" && !hasModifier) {
-            this.click();
-        }
-    }
-    _handleInvalid(e) {
-        e.preventDefault();
-        this.invalid = true;
-    }
-    /** @internal */
-    handleDisabledChange() {
-        // Disabled form controls are always valid, so we need to recheck validity when the state changes
-        this.input.disabled = this.disabled;
-        this.invalid = !this.input.checkValidity();
-    }
-    /** @internal */
-    handleStateChange() {
-        this.invalid = !this.input.checkValidity();
-    }
-    render() {
-        return html `
-      <div
-        class=${classMap({
-            "form-check": true
-        })}
-      >
-        <input
-          class=${classMap({
-            "form-check-input": true,
-            "is-invalid": this.hasFeedback && this.invalid,
-            md: this._size === "md"
-        })}
-          type="checkbox"
-          id=${this._inputId}
-          aria-invalid=${this.invalid ? "true" : "false"}
-          name=${ifDefined(this.name)}
-          value=${ifDefined(this.value)}
-          ?checked=${this.checked}
-          ?indeterminate=${this.indeterminate}
-          ?disabled=${this.disabled}
-          ?required=${this.required}
-          aria-disabled=${this.disabled ? "true" : "false"}
-          aria-checked=${this.checked ? "true" : "false"}
-          @change=${this._handleChange}
-          @keydown=${this._handleKeyDown}
-          @invalid=${(e) => this._handleInvalid(e)}
-        />
-        <label for="${this._inputId}" aria-label=${ifDefined(this.ariaLabel)} class="form-check-label"
-          ><slot></slot
-        ></label>
-      </div>
-    `;
-    }
-}
-__decorate([
-    query('input[type="checkbox"]')
-], FormCheckElement.prototype, "input", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], FormCheckElement.prototype, "name", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], FormCheckElement.prototype, "ariaLabel", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], FormCheckElement.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], FormCheckElement.prototype, "required", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], FormCheckElement.prototype, "checked", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], FormCheckElement.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], FormCheckElement.prototype, "hasFeedback", void 0);
-__decorate([
-    defaultValue("checked")
-], FormCheckElement.prototype, "defaultChecked", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], FormCheckElement.prototype, "invalid", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], FormCheckElement.prototype, "indeterminate", void 0);
-__decorate([
-    watch("invalid", { waitUntilFirstUpdate: true })
-], FormCheckElement.prototype, "_handleInvalidChange", null);
-__decorate([
-    property({ type: String })
-], FormCheckElement.prototype, "_size", void 0);
-__decorate([
-    watch("disabled", { waitUntilFirstUpdate: true })
-], FormCheckElement.prototype, "handleDisabledChange", null);
-__decorate([
-    watch("checked", { waitUntilFirstUpdate: true })
-], FormCheckElement.prototype, "handleStateChange", null);
-
-export { FormCheckElement, FormCheckElement as default };
-//# sourceMappingURL=form-check-element.js.map