material-web-evo 10002.10001.10000

package/labs/behaviors/on-report-validity.js

@@ -0,0 +1,289 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { isServer } from 'lit';
+import { internals } from './element-internals.js';
+/**
+ * A symbol property used for a callback when validity has been reported.
+ */
+export const onReportValidity = Symbol('onReportValidity');
+// Private symbol members, used to avoid name clashing.
+const privateCleanupFormListeners = Symbol('privateCleanupFormListeners');
+const privateDoNotReportInvalid = Symbol('privateDoNotReportInvalid');
+const privateIsSelfReportingValidity = Symbol('privateIsSelfReportingValidity');
+const privateCallOnReportValidity = Symbol('privateCallOnReportValidity');
+/**
+ * Mixes in a callback for constraint validation when validity should be
+ * styled and reported to the user.
+ *
+ * This is commonly used in text-field-like controls that display error styles
+ * and error messages.
+ *
+ * @example
+ * ```ts
+ * const baseClass = mixinOnReportValidity(
+ *   mixinConstraintValidation(
+ *     mixinFormAssociated(mixinElementInternals(LitElement)),
+ *   ),
+ * );
+ *
+ * class MyField extends baseClass {
+ *   \@property({type: Boolean}) error = false;
+ *   \@property() errorMessage = '';
+ *
+ *   [onReportValidity](invalidEvent: Event | null) {
+ *     this.error = !!invalidEvent;
+ *     this.errorMessage = this.validationMessage;
+ *
+ *     // Optionally prevent platform popup from displaying
+ *     invalidEvent?.preventDefault();
+ *   }
+ * }
+ * ```
+ *
+ * @param base The class to mix functionality into.
+ * @return The provided class with `OnReportValidity` mixed in.
+ */
+export function mixinOnReportValidity(base) {
+    var _a, _b, _c;
+    class OnReportValidityElement extends base {
+        // Mixins must have a constructor with `...args: any[]`
+        // tslint:disable-next-line:no-any
+        constructor(...args) {
+            super(...args);
+            /**
+             * Used to clean up event listeners when a new form is associated.
+             */
+            this[_a] = new AbortController();
+            /**
+             * Used to determine if an invalid event should report validity. Invalid
+             * events from `checkValidity()` do not trigger reporting.
+             */
+            this[_b] = false;
+            /**
+             * Used to determine if the control is reporting validity from itself, or
+             * if a `<form>` is causing the validity report. Forms have different
+             * control focusing behavior.
+             */
+            this[_c] = false;
+            if (isServer) {
+                return;
+            }
+            this.addEventListener('invalid', (invalidEvent) => {
+                // Listen for invalid events dispatched by a `<form>` when it tries to
+                // submit and the element is invalid. We ignore events dispatched when
+                // calling `checkValidity()` as well as untrusted events, since the
+                // `reportValidity()` and `<form>`-dispatched events are always
+                // trusted.
+                if (this[privateDoNotReportInvalid] || !invalidEvent.isTrusted) {
+                    return;
+                }
+                this.addEventListener('invalid', () => {
+                    // A normal bubbling phase event listener. By adding it here, we
+                    // ensure it's the last event listener that is called during the
+                    // bubbling phase.
+                    this[privateCallOnReportValidity](invalidEvent);
+                }, { once: true });
+            }, {
+                // Listen during the capture phase, which will happen before the
+                // bubbling phase. That way, we can add a final event listener that
+                // will run after other event listeners, and we can check if it was
+                // default prevented. This works because invalid does not bubble.
+                capture: true,
+            });
+        }
+        checkValidity() {
+            this[privateDoNotReportInvalid] = true;
+            const valid = super.checkValidity();
+            this[privateDoNotReportInvalid] = false;
+            return valid;
+        }
+        reportValidity() {
+            this[privateIsSelfReportingValidity] = true;
+            const valid = super.reportValidity();
+            // Constructor's invalid listener will handle reporting invalid events.
+            if (valid) {
+                this[privateCallOnReportValidity](null);
+            }
+            this[privateIsSelfReportingValidity] = false;
+            return valid;
+        }
+        [(_a = privateCleanupFormListeners, _b = privateDoNotReportInvalid, _c = privateIsSelfReportingValidity, privateCallOnReportValidity)](invalidEvent) {
+            // Since invalid events do not bubble to parent listeners, and because
+            // our invalid listeners are added lazily after other listeners, we can
+            // reliably read `defaultPrevented` synchronously without worrying
+            // about waiting for another listener that could cancel it.
+            const wasCanceled = invalidEvent?.defaultPrevented;
+            if (wasCanceled) {
+                return;
+            }
+            this[onReportValidity](invalidEvent);
+            // If an implementation calls invalidEvent.preventDefault() to stop the
+            // platform popup from displaying, focusing is also prevented, so we need
+            // to manually focus.
+            const implementationCanceledFocus = !wasCanceled && invalidEvent?.defaultPrevented;
+            if (!implementationCanceledFocus) {
+                return;
+            }
+            // The control should be focused when:
+            // - `control.reportValidity()` is called (self-reporting).
+            // - a form is reporting validity for its controls and this is the first
+            //   invalid control.
+            if (this[privateIsSelfReportingValidity] ||
+                isFirstInvalidControlInForm(this[internals].form, this)) {
+                this.focus();
+            }
+        }
+        [onReportValidity](invalidEvent) {
+            throw new Error('Implement [onReportValidity]');
+        }
+        formAssociatedCallback(form) {
+            // can't use super.formAssociatedCallback?.() due to closure
+            if (super.formAssociatedCallback) {
+                super.formAssociatedCallback(form);
+            }
+            // Clean up previous form listeners.
+            this[privateCleanupFormListeners].abort();
+            if (!form) {
+                return;
+            }
+            this[privateCleanupFormListeners] = new AbortController();
+            // Add a listener that fires when the form runs constraint validation and
+            // the control is valid, so that it may remove its error styles.
+            //
+            // This happens on `form.reportValidity()` and `form.requestSubmit()`
+            // (both when the submit fails and passes).
+            addFormReportValidListener(this, form, () => {
+                this[privateCallOnReportValidity](null);
+            }, this[privateCleanupFormListeners].signal);
+        }
+    }
+    return OnReportValidityElement;
+}
+/**
+ * Add a listener that fires when a form runs constraint validation on a control
+ * and it is valid. This is needed to clear previously invalid styles.
+ *
+ * @param control The control of the form to listen for valid events.
+ * @param form The control's form that can run constraint validation.
+ * @param onControlValid A listener that is called when the form runs constraint
+ *     validation and the control is valid.
+ * @param cleanup A cleanup signal to remove the listener.
+ */
+function addFormReportValidListener(control, form, onControlValid, cleanup) {
+    const validateHooks = getFormValidateHooks(form);
+    // When a form validates its controls, check if an invalid event is dispatched
+    // on the control. If it is not, then inform the control to report its valid
+    // state.
+    let controlFiredInvalid = false;
+    let cleanupInvalidListener;
+    let isNextSubmitFromHook = false;
+    validateHooks.addEventListener('before', () => {
+        isNextSubmitFromHook = true;
+        cleanupInvalidListener = new AbortController();
+        controlFiredInvalid = false;
+        control.addEventListener('invalid', () => {
+            controlFiredInvalid = true;
+        }, {
+            signal: cleanupInvalidListener.signal,
+        });
+    }, { signal: cleanup });
+    validateHooks.addEventListener('after', () => {
+        isNextSubmitFromHook = false;
+        cleanupInvalidListener?.abort();
+        if (controlFiredInvalid) {
+            return;
+        }
+        onControlValid();
+    }, { signal: cleanup });
+    // The above hooks handle imperatively submitting the form, but not
+    // declaratively submitting the form. This happens when:
+    // 1. A non-custom element `<button type="submit">` is clicked.
+    // 2. Enter is pressed on a non-custom element text editable `<input>`.
+    form.addEventListener('submit', () => {
+        // This submit was from `form.requestSubmit()`, which already calls the
+        // listener.
+        if (isNextSubmitFromHook) {
+            return;
+        }
+        onControlValid();
+    }, {
+        signal: cleanup,
+    });
+    // Note: it is a known limitation that we cannot detect if a form tries to
+    // submit declaratively, but fails to do so because an unrelated sibling
+    // control failed its constraint validation.
+    //
+    // Since we cannot detect when that happens, a previously invalid control may
+    // not clear its error styling when it becomes valid again.
+    //
+    // To work around this, call `form.reportValidity()` when submitting a form
+    // declaratively. This can be down on the `<button type="submit">`'s click or
+    // the text editable `<input>`'s 'Enter' keydown.
+}
+const FORM_VALIDATE_HOOKS = new WeakMap();
+/**
+ * Get a hooks `EventTarget` that dispatches 'before' and 'after' events that
+ * fire before a form runs constraint validation and immediately after it
+ * finishes running constraint validation on its controls.
+ *
+ * This happens during `form.reportValidity()` and `form.requestSubmit()`.
+ *
+ * @param form The form to get or set up hooks for.
+ * @return A hooks `EventTarget` to add listeners to.
+ */
+function getFormValidateHooks(form) {
+    if (!FORM_VALIDATE_HOOKS.has(form)) {
+        // Patch form methods to add event listener hooks. These are needed to react
+        // to form behaviors that do not dispatch events, such as a form asking its
+        // controls to report their validity.
+        //
+        // We should only patch the methods once, since multiple controls and other
+        // forces may want to patch this method. We cannot reliably clean it up if
+        // there are multiple patched and re-patched methods referring holding
+        // references to each other.
+        //
+        // Instead, we never clean up the patch but add and clean up event listeners
+        // added to the hooks after the patch.
+        const hooks = new EventTarget();
+        FORM_VALIDATE_HOOKS.set(form, hooks);
+        // Add hooks to support notifying before and after a form has run constraint
+        // validation on its controls.
+        // Note: `form.submit()` does not run constraint validation per spec.
+        for (const methodName of ['reportValidity', 'requestSubmit']) {
+            const superMethod = form[methodName];
+            form[methodName] = function () {
+                hooks.dispatchEvent(new Event('before'));
+                const result = Reflect.apply(superMethod, this, arguments);
+                hooks.dispatchEvent(new Event('after'));
+                return result;
+            };
+        }
+    }
+    return FORM_VALIDATE_HOOKS.get(form);
+}
+/**
+ * Checks if a control is the first invalid control in a form.
+ *
+ * @param form The control's form. When `null`, the control doesn't have a form
+ *     and the method returns true.
+ * @param control The control to check.
+ * @return True if there is no form or if the control is the form's first
+ *     invalid control.
+ */
+function isFirstInvalidControlInForm(form, control) {
+    if (!form) {
+        return true;
+    }
+    let firstInvalidControl;
+    for (const element of form.elements) {
+        if (element.matches(':invalid')) {
+            firstInvalidControl = element;
+            break;
+        }
+    }
+    return firstInvalidControl === control;
+}
+//# sourceMappingURL=on-report-validity.js.map

package/labs/behaviors/on-report-validity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"on-report-validity.js","sourceRoot":"","sources":["on-report-validity.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {LitElement, isServer} from 'lit';\n\nimport {ConstraintValidation} from './constraint-validation.js';\nimport {WithElementInternals, internals} from './element-internals.js';\nimport {MixinBase, MixinReturn} from './mixin.js';\n\n/**\n * A constraint validation element that has a callback for when the element\n * should report validity styles and error messages to the user.\n *\n * This is commonly used in text-field-like controls that display error styles\n * and error messages.\n */\nexport interface OnReportValidity extends ConstraintValidation {\n  /**\n   * A callback that is invoked when validity should be reported. Components\n   * that can display their own error state can use this and update their\n   * styles.\n   *\n   * If an invalid event is provided, the element is invalid. If `null`, the\n   * element is valid.\n   *\n   * The invalid event's `preventDefault()` may be called to stop the platform\n   * popup from displaying.\n   *\n   * @param invalidEvent The `invalid` event dispatched when an element is\n   *     invalid, or `null` if the element is valid.\n   */\n  [onReportValidity](invalidEvent: Event | null): void;\n\n  // `mixinOnReportValidity()` implements this optional method. If overriden,\n  // call `super.formAssociatedCallback(form)`.\n  // (inherit jsdoc from `FormAssociated`)\n  formAssociatedCallback(form: HTMLFormElement | null): void;\n}\n\n/**\n * A symbol property used for a callback when validity has been reported.\n */\nexport const onReportValidity = Symbol('onReportValidity');\n\n// Private symbol members, used to avoid name clashing.\nconst privateCleanupFormListeners = Symbol('privateCleanupFormListeners');\nconst privateDoNotReportInvalid = Symbol('privateDoNotReportInvalid');\nconst privateIsSelfReportingValidity = Symbol('privateIsSelfReportingValidity');\nconst privateCallOnReportValidity = Symbol('privateCallOnReportValidity');\n\n/**\n * Mixes in a callback for constraint validation when validity should be\n * styled and reported to the user.\n *\n * This is commonly used in text-field-like controls that display error styles\n * and error messages.\n *\n * @example\n * ```ts\n * const baseClass = mixinOnReportValidity(\n *   mixinConstraintValidation(\n *     mixinFormAssociated(mixinElementInternals(LitElement)),\n *   ),\n * );\n *\n * class MyField extends baseClass {\n *   \\@property({type: Boolean}) error = false;\n *   \\@property() errorMessage = '';\n *\n *   [onReportValidity](invalidEvent: Event | null) {\n *     this.error = !!invalidEvent;\n *     this.errorMessage = this.validationMessage;\n *\n *     // Optionally prevent platform popup from displaying\n *     invalidEvent?.preventDefault();\n *   }\n * }\n * ```\n *\n * @param base The class to mix functionality into.\n * @return The provided class with `OnReportValidity` mixed in.\n */\nexport function mixinOnReportValidity<\n  T extends MixinBase<LitElement & ConstraintValidation & WithElementInternals>,\n>(base: T): MixinReturn<T, OnReportValidity> {\n  abstract class OnReportValidityElement\n    extends base\n    implements OnReportValidity\n  {\n    /**\n     * Used to clean up event listeners when a new form is associated.\n     */\n    [privateCleanupFormListeners] = new AbortController();\n\n    /**\n     * Used to determine if an invalid event should report validity. Invalid\n     * events from `checkValidity()` do not trigger reporting.\n     */\n    [privateDoNotReportInvalid] = false;\n\n    /**\n     * Used to determine if the control is reporting validity from itself, or\n     * if a `<form>` is causing the validity report. Forms have different\n     * control focusing behavior.\n     */\n    [privateIsSelfReportingValidity] = false;\n\n    // Mixins must have a constructor with `...args: any[]`\n    // tslint:disable-next-line:no-any\n    constructor(...args: any[]) {\n      super(...args);\n      if (isServer) {\n        return;\n      }\n\n      this.addEventListener(\n        'invalid',\n        (invalidEvent) => {\n          // Listen for invalid events dispatched by a `<form>` when it tries to\n          // submit and the element is invalid. We ignore events dispatched when\n          // calling `checkValidity()` as well as untrusted events, since the\n          // `reportValidity()` and `<form>`-dispatched events are always\n          // trusted.\n          if (this[privateDoNotReportInvalid] || !invalidEvent.isTrusted) {\n            return;\n          }\n\n          this.addEventListener(\n            'invalid',\n            () => {\n              // A normal bubbling phase event listener. By adding it here, we\n              // ensure it's the last event listener that is called during the\n              // bubbling phase.\n              this[privateCallOnReportValidity](invalidEvent);\n            },\n            {once: true},\n          );\n        },\n        {\n          // Listen during the capture phase, which will happen before the\n          // bubbling phase. That way, we can add a final event listener that\n          // will run after other event listeners, and we can check if it was\n          // default prevented. This works because invalid does not bubble.\n          capture: true,\n        },\n      );\n    }\n\n    override checkValidity() {\n      this[privateDoNotReportInvalid] = true;\n      const valid = super.checkValidity();\n      this[privateDoNotReportInvalid] = false;\n      return valid;\n    }\n\n    override reportValidity() {\n      this[privateIsSelfReportingValidity] = true;\n      const valid = super.reportValidity();\n      // Constructor's invalid listener will handle reporting invalid events.\n      if (valid) {\n        this[privateCallOnReportValidity](null);\n      }\n\n      this[privateIsSelfReportingValidity] = false;\n      return valid;\n    }\n\n    [privateCallOnReportValidity](invalidEvent: Event | null) {\n      // Since invalid events do not bubble to parent listeners, and because\n      // our invalid listeners are added lazily after other listeners, we can\n      // reliably read `defaultPrevented` synchronously without worrying\n      // about waiting for another listener that could cancel it.\n      const wasCanceled = invalidEvent?.defaultPrevented;\n      if (wasCanceled) {\n        return;\n      }\n\n      this[onReportValidity](invalidEvent);\n\n      // If an implementation calls invalidEvent.preventDefault() to stop the\n      // platform popup from displaying, focusing is also prevented, so we need\n      // to manually focus.\n      const implementationCanceledFocus =\n        !wasCanceled && invalidEvent?.defaultPrevented;\n      if (!implementationCanceledFocus) {\n        return;\n      }\n\n      // The control should be focused when:\n      // - `control.reportValidity()` is called (self-reporting).\n      // - a form is reporting validity for its controls and this is the first\n      //   invalid control.\n      if (\n        this[privateIsSelfReportingValidity] ||\n        isFirstInvalidControlInForm(this[internals].form, this)\n      ) {\n        this.focus();\n      }\n    }\n\n    [onReportValidity](invalidEvent: Event | null) {\n      throw new Error('Implement [onReportValidity]');\n    }\n\n    override formAssociatedCallback(form: HTMLFormElement | null) {\n      // can't use super.formAssociatedCallback?.() due to closure\n      if (super.formAssociatedCallback) {\n        super.formAssociatedCallback(form);\n      }\n\n      // Clean up previous form listeners.\n      this[privateCleanupFormListeners].abort();\n      if (!form) {\n        return;\n      }\n\n      this[privateCleanupFormListeners] = new AbortController();\n\n      // Add a listener that fires when the form runs constraint validation and\n      // the control is valid, so that it may remove its error styles.\n      //\n      // This happens on `form.reportValidity()` and `form.requestSubmit()`\n      // (both when the submit fails and passes).\n      addFormReportValidListener(\n        this,\n        form,\n        () => {\n          this[privateCallOnReportValidity](null);\n        },\n        this[privateCleanupFormListeners].signal,\n      );\n    }\n  }\n\n  return OnReportValidityElement;\n}\n\n/**\n * Add a listener that fires when a form runs constraint validation on a control\n * and it is valid. This is needed to clear previously invalid styles.\n *\n * @param control The control of the form to listen for valid events.\n * @param form The control's form that can run constraint validation.\n * @param onControlValid A listener that is called when the form runs constraint\n *     validation and the control is valid.\n * @param cleanup A cleanup signal to remove the listener.\n */\nfunction addFormReportValidListener(\n  control: Element,\n  form: HTMLFormElement,\n  onControlValid: () => void,\n  cleanup: AbortSignal,\n) {\n  const validateHooks = getFormValidateHooks(form);\n\n  // When a form validates its controls, check if an invalid event is dispatched\n  // on the control. If it is not, then inform the control to report its valid\n  // state.\n  let controlFiredInvalid = false;\n  let cleanupInvalidListener: AbortController | undefined;\n  let isNextSubmitFromHook = false;\n  validateHooks.addEventListener(\n    'before',\n    () => {\n      isNextSubmitFromHook = true;\n      cleanupInvalidListener = new AbortController();\n      controlFiredInvalid = false;\n      control.addEventListener(\n        'invalid',\n        () => {\n          controlFiredInvalid = true;\n        },\n        {\n          signal: cleanupInvalidListener.signal,\n        },\n      );\n    },\n    {signal: cleanup},\n  );\n\n  validateHooks.addEventListener(\n    'after',\n    () => {\n      isNextSubmitFromHook = false;\n      cleanupInvalidListener?.abort();\n      if (controlFiredInvalid) {\n        return;\n      }\n\n      onControlValid();\n    },\n    {signal: cleanup},\n  );\n\n  // The above hooks handle imperatively submitting the form, but not\n  // declaratively submitting the form. This happens when:\n  // 1. A non-custom element `<button type=\"submit\">` is clicked.\n  // 2. Enter is pressed on a non-custom element text editable `<input>`.\n  form.addEventListener(\n    'submit',\n    () => {\n      // This submit was from `form.requestSubmit()`, which already calls the\n      // listener.\n      if (isNextSubmitFromHook) {\n        return;\n      }\n\n      onControlValid();\n    },\n    {\n      signal: cleanup,\n    },\n  );\n\n  // Note: it is a known limitation that we cannot detect if a form tries to\n  // submit declaratively, but fails to do so because an unrelated sibling\n  // control failed its constraint validation.\n  //\n  // Since we cannot detect when that happens, a previously invalid control may\n  // not clear its error styling when it becomes valid again.\n  //\n  // To work around this, call `form.reportValidity()` when submitting a form\n  // declaratively. This can be down on the `<button type=\"submit\">`'s click or\n  // the text editable `<input>`'s 'Enter' keydown.\n}\n\nconst FORM_VALIDATE_HOOKS = new WeakMap<HTMLFormElement, EventTarget>();\n\n/**\n * Get a hooks `EventTarget` that dispatches 'before' and 'after' events that\n * fire before a form runs constraint validation and immediately after it\n * finishes running constraint validation on its controls.\n *\n * This happens during `form.reportValidity()` and `form.requestSubmit()`.\n *\n * @param form The form to get or set up hooks for.\n * @return A hooks `EventTarget` to add listeners to.\n */\nfunction getFormValidateHooks(form: HTMLFormElement) {\n  if (!FORM_VALIDATE_HOOKS.has(form)) {\n    // Patch form methods to add event listener hooks. These are needed to react\n    // to form behaviors that do not dispatch events, such as a form asking its\n    // controls to report their validity.\n    //\n    // We should only patch the methods once, since multiple controls and other\n    // forces may want to patch this method. We cannot reliably clean it up if\n    // there are multiple patched and re-patched methods referring holding\n    // references to each other.\n    //\n    // Instead, we never clean up the patch but add and clean up event listeners\n    // added to the hooks after the patch.\n    const hooks = new EventTarget();\n    FORM_VALIDATE_HOOKS.set(form, hooks);\n\n    // Add hooks to support notifying before and after a form has run constraint\n    // validation on its controls.\n    // Note: `form.submit()` does not run constraint validation per spec.\n    for (const methodName of ['reportValidity', 'requestSubmit'] as const) {\n      const superMethod = form[methodName];\n      form[methodName] = function (this: HTMLFormElement) {\n        hooks.dispatchEvent(new Event('before'));\n        const result = Reflect.apply(superMethod, this, arguments);\n        hooks.dispatchEvent(new Event('after'));\n        return result;\n      };\n    }\n  }\n\n  return FORM_VALIDATE_HOOKS.get(form)!;\n}\n\n/**\n * Checks if a control is the first invalid control in a form.\n *\n * @param form The control's form. When `null`, the control doesn't have a form\n *     and the method returns true.\n * @param control The control to check.\n * @return True if there is no form or if the control is the form's first\n *     invalid control.\n */\nfunction isFirstInvalidControlInForm(\n  form: HTMLFormElement | null,\n  control: HTMLElement,\n) {\n  if (!form) {\n    return true;\n  }\n\n  let firstInvalidControl: Element | undefined;\n  for (const element of form.elements) {\n    if (element.matches(':invalid')) {\n      firstInvalidControl = element;\n      break;\n    }\n  }\n\n  return firstInvalidControl === control;\n}\n"]}

package/labs/behaviors/validators/checkbox-validator.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Validator } from './validator.js';
+/**
+ * Constraint validation properties for a checkbox.
+ */
+export interface CheckboxState {
+    /**
+     * Whether the checkbox is checked.
+     */
+    readonly checked: boolean;
+    /**
+     * Whether the checkbox is required.
+     */
+    readonly required: boolean;
+}
+/**
+ * A validator that provides constraint validation that emulates
+ * `<input type="checkbox">` validation.
+ */
+export declare class CheckboxValidator extends Validator<CheckboxState> {
+    private checkboxControl?;
+    protected computeValidity(state: CheckboxState): {
+        validity: ValidityState;
+        validationMessage: string;
+    };
+    protected equals(prev: CheckboxState, next: CheckboxState): boolean;
+    protected copy({ checked, required }: CheckboxState): {
+        checked: boolean;
+        required: boolean;
+    };
+}

package/labs/behaviors/validators/checkbox-validator.js

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Validator } from './validator.js';
+/**
+ * A validator that provides constraint validation that emulates
+ * `<input type="checkbox">` validation.
+ */
+export class CheckboxValidator extends Validator {
+    computeValidity(state) {
+        if (!this.checkboxControl) {
+            // Lazily create the platform input
+            this.checkboxControl = document.createElement('input');
+            this.checkboxControl.type = 'checkbox';
+        }
+        this.checkboxControl.checked = state.checked;
+        this.checkboxControl.required = state.required;
+        return {
+            validity: this.checkboxControl.validity,
+            validationMessage: this.checkboxControl.validationMessage,
+        };
+    }
+    equals(prev, next) {
+        return prev.checked === next.checked && prev.required === next.required;
+    }
+    copy({ checked, required }) {
+        return { checked, required };
+    }
+}
+//# sourceMappingURL=checkbox-validator.js.map

package/labs/behaviors/validators/checkbox-validator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-validator.js","sourceRoot":"","sources":["checkbox-validator.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAiBzC;;;GAGG;AACH,MAAM,OAAO,iBAAkB,SAAQ,SAAwB;IAG1C,eAAe,CAAC,KAAoB;QACrD,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACzB,mCAAmC;YACnC,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACvD,IAAI,CAAC,eAAe,CAAC,IAAI,GAAG,UAAU,CAAC;SACxC;QAED,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;QAC7C,IAAI,CAAC,eAAe,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;QAC/C,OAAO;YACL,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC,QAAQ;YACvC,iBAAiB,EAAE,IAAI,CAAC,eAAe,CAAC,iBAAiB;SAC1D,CAAC;IACJ,CAAC;IAEkB,MAAM,CAAC,IAAmB,EAAE,IAAmB;QAChE,OAAO,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ,CAAC;IAC1E,CAAC;IAEkB,IAAI,CAAC,EAAC,OAAO,EAAE,QAAQ,EAAgB;QACxD,OAAO,EAAC,OAAO,EAAE,QAAQ,EAAC,CAAC;IAC7B,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Validator} from './validator.js';\n\n/**\n * Constraint validation properties for a checkbox.\n */\nexport interface CheckboxState {\n  /**\n   * Whether the checkbox is checked.\n   */\n  readonly checked: boolean;\n\n  /**\n   * Whether the checkbox is required.\n   */\n  readonly required: boolean;\n}\n\n/**\n * A validator that provides constraint validation that emulates\n * `<input type=\"checkbox\">` validation.\n */\nexport class CheckboxValidator extends Validator<CheckboxState> {\n  private checkboxControl?: HTMLInputElement;\n\n  protected override computeValidity(state: CheckboxState) {\n    if (!this.checkboxControl) {\n      // Lazily create the platform input\n      this.checkboxControl = document.createElement('input');\n      this.checkboxControl.type = 'checkbox';\n    }\n\n    this.checkboxControl.checked = state.checked;\n    this.checkboxControl.required = state.required;\n    return {\n      validity: this.checkboxControl.validity,\n      validationMessage: this.checkboxControl.validationMessage,\n    };\n  }\n\n  protected override equals(prev: CheckboxState, next: CheckboxState) {\n    return prev.checked === next.checked && prev.required === next.required;\n  }\n\n  protected override copy({checked, required}: CheckboxState) {\n    return {checked, required};\n  }\n}\n"]}

package/labs/behaviors/validators/radio-validator.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Validator } from './validator.js';
+/**
+ * Constraint validation properties for a radio.
+ */
+export interface RadioState {
+    /**
+     * Whether the radio is checked.
+     */
+    readonly checked: boolean;
+    /**
+     * Whether the radio is required.
+     */
+    readonly required: boolean;
+}
+/**
+ * Radio constraint validation properties for a single radio and its siblings.
+ */
+export type RadioGroupState = readonly [RadioState, ...RadioState[]];
+/**
+ * A validator that provides constraint validation that emulates
+ * `<input type="radio">` validation.
+ */
+export declare class RadioValidator extends Validator<RadioGroupState> {
+    private radioElement?;
+    protected computeValidity(states: RadioGroupState): {
+        validity: {
+            valueMissing: boolean;
+        };
+        validationMessage: string;
+    };
+    protected equals(prevGroup: RadioGroupState, nextGroup: RadioGroupState): boolean;
+    protected copy(states: RadioGroupState): RadioGroupState;
+}

package/labs/behaviors/validators/radio-validator.js

@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Validator } from './validator.js';
+/**
+ * A validator that provides constraint validation that emulates
+ * `<input type="radio">` validation.
+ */
+export class RadioValidator extends Validator {
+    computeValidity(states) {
+        if (!this.radioElement) {
+            // Lazily create the radio element
+            this.radioElement = document.createElement('input');
+            this.radioElement.type = 'radio';
+            // A name is required for validation to run
+            this.radioElement.name = 'group';
+        }
+        let isRequired = false;
+        let isChecked = false;
+        for (const { checked, required } of states) {
+            if (required) {
+                isRequired = true;
+            }
+            if (checked) {
+                isChecked = true;
+            }
+        }
+        // Firefox v119 doesn't compute grouped radio validation correctly while
+        // they are detached from the DOM, which is why we don't render multiple
+        // virtual <input>s. Instead, we can check the required/checked states and
+        // grab the i18n'd validation message if the value is missing.
+        this.radioElement.checked = isChecked;
+        this.radioElement.required = isRequired;
+        return {
+            validity: {
+                valueMissing: isRequired && !isChecked,
+            },
+            validationMessage: this.radioElement.validationMessage,
+        };
+    }
+    equals(prevGroup, nextGroup) {
+        if (prevGroup.length !== nextGroup.length) {
+            return false;
+        }
+        for (let i = 0; i < prevGroup.length; i++) {
+            const prev = prevGroup[i];
+            const next = nextGroup[i];
+            if (prev.checked !== next.checked || prev.required !== next.required) {
+                return false;
+            }
+        }
+        return true;
+    }
+    copy(states) {
+        // Cast as unknown since typescript does not have enough information to
+        // infer that the array always has at least one element.
+        return states.map(({ checked, required }) => ({
+            checked,
+            required,
+        }));
+    }
+}
+//# sourceMappingURL=radio-validator.js.map

package/labs/behaviors/validators/radio-validator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-validator.js","sourceRoot":"","sources":["radio-validator.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAsBzC;;;GAGG;AACH,MAAM,OAAO,cAAe,SAAQ,SAA0B;IAGzC,eAAe,CAAC,MAAuB;QACxD,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,kCAAkC;YAClC,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACpD,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,OAAO,CAAC;YACjC,2CAA2C;YAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,OAAO,CAAC;SAClC;QAED,IAAI,UAAU,GAAG,KAAK,CAAC;QACvB,IAAI,SAAS,GAAG,KAAK,CAAC;QACtB,KAAK,MAAM,EAAC,OAAO,EAAE,QAAQ,EAAC,IAAI,MAAM,EAAE;YACxC,IAAI,QAAQ,EAAE;gBACZ,UAAU,GAAG,IAAI,CAAC;aACnB;YAED,IAAI,OAAO,EAAE;gBACX,SAAS,GAAG,IAAI,CAAC;aAClB;SACF;QAED,wEAAwE;QACxE,wEAAwE;QACxE,0EAA0E;QAC1E,8DAA8D;QAC9D,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,SAAS,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,QAAQ,GAAG,UAAU,CAAC;QACxC,OAAO;YACL,QAAQ,EAAE;gBACR,YAAY,EAAE,UAAU,IAAI,CAAC,SAAS;aACvC;YACD,iBAAiB,EAAE,IAAI,CAAC,YAAY,CAAC,iBAAiB;SACvD,CAAC;IACJ,CAAC;IAEkB,MAAM,CACvB,SAA0B,EAC1B,SAA0B;QAE1B,IAAI,SAAS,CAAC,MAAM,KAAK,SAAS,CAAC,MAAM,EAAE;YACzC,OAAO,KAAK,CAAC;SACd;QAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACzC,MAAM,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;YAC1B,MAAM,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;YAC1B,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ,EAAE;gBACpE,OAAO,KAAK,CAAC;aACd;SACF;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAEkB,IAAI,CAAC,MAAuB;QAC7C,uEAAuE;QACvE,wDAAwD;QACxD,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,EAAC,OAAO,EAAE,QAAQ,EAAC,EAAE,EAAE,CAAC,CAAC;YAC1C,OAAO;YACP,QAAQ;SACT,CAAC,CAA+B,CAAC;IACpC,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Validator} from './validator.js';\n\n/**\n * Constraint validation properties for a radio.\n */\nexport interface RadioState {\n  /**\n   * Whether the radio is checked.\n   */\n  readonly checked: boolean;\n\n  /**\n   * Whether the radio is required.\n   */\n  readonly required: boolean;\n}\n\n/**\n * Radio constraint validation properties for a single radio and its siblings.\n */\nexport type RadioGroupState = readonly [RadioState, ...RadioState[]];\n\n/**\n * A validator that provides constraint validation that emulates\n * `<input type=\"radio\">` validation.\n */\nexport class RadioValidator extends Validator<RadioGroupState> {\n  private radioElement?: HTMLInputElement;\n\n  protected override computeValidity(states: RadioGroupState) {\n    if (!this.radioElement) {\n      // Lazily create the radio element\n      this.radioElement = document.createElement('input');\n      this.radioElement.type = 'radio';\n      // A name is required for validation to run\n      this.radioElement.name = 'group';\n    }\n\n    let isRequired = false;\n    let isChecked = false;\n    for (const {checked, required} of states) {\n      if (required) {\n        isRequired = true;\n      }\n\n      if (checked) {\n        isChecked = true;\n      }\n    }\n\n    // Firefox v119 doesn't compute grouped radio validation correctly while\n    // they are detached from the DOM, which is why we don't render multiple\n    // virtual <input>s. Instead, we can check the required/checked states and\n    // grab the i18n'd validation message if the value is missing.\n    this.radioElement.checked = isChecked;\n    this.radioElement.required = isRequired;\n    return {\n      validity: {\n        valueMissing: isRequired && !isChecked,\n      },\n      validationMessage: this.radioElement.validationMessage,\n    };\n  }\n\n  protected override equals(\n    prevGroup: RadioGroupState,\n    nextGroup: RadioGroupState,\n  ) {\n    if (prevGroup.length !== nextGroup.length) {\n      return false;\n    }\n\n    for (let i = 0; i < prevGroup.length; i++) {\n      const prev = prevGroup[i];\n      const next = nextGroup[i];\n      if (prev.checked !== next.checked || prev.required !== next.required) {\n        return false;\n      }\n    }\n\n    return true;\n  }\n\n  protected override copy(states: RadioGroupState): RadioGroupState {\n    // Cast as unknown since typescript does not have enough information to\n    // infer that the array always has at least one element.\n    return states.map(({checked, required}) => ({\n      checked,\n      required,\n    })) as unknown as RadioGroupState;\n  }\n}\n"]}

package/labs/behaviors/validators/select-validator.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Validator } from './validator.js';
+/**
+ * Constraint validation properties for a select dropdown.
+ */
+export interface SelectState {
+    /**
+     * The current selected value.
+     */
+    readonly value: string;
+    /**
+     * Whether the select is required.
+     */
+    readonly required: boolean;
+}
+/**
+ * A validator that provides constraint validation that emulates `<select>`
+ * validation.
+ */
+export declare class SelectValidator extends Validator<SelectState> {
+    private selectControl?;
+    protected computeValidity(state: SelectState): {
+        validity: ValidityState;
+        validationMessage: string;
+    };
+    protected equals(prev: SelectState, next: SelectState): boolean;
+    protected copy({ value, required }: SelectState): {
+        value: string;
+        required: boolean;
+    };
+}

package/labs/behaviors/validators/select-validator.js

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { html, render } from 'lit';
+import { Validator } from './validator.js';
+/**
+ * A validator that provides constraint validation that emulates `<select>`
+ * validation.
+ */
+export class SelectValidator extends Validator {
+    computeValidity(state) {
+        if (!this.selectControl) {
+            // Lazily create the platform select
+            this.selectControl = document.createElement('select');
+        }
+        render(html `<option value=${state.value}></option>`, this.selectControl);
+        this.selectControl.value = state.value;
+        this.selectControl.required = state.required;
+        return {
+            validity: this.selectControl.validity,
+            validationMessage: this.selectControl.validationMessage,
+        };
+    }
+    equals(prev, next) {
+        return prev.value === next.value && prev.required === next.required;
+    }
+    copy({ value, required }) {
+        return { value, required };
+    }
+}
+//# sourceMappingURL=select-validator.js.map

package/labs/behaviors/validators/select-validator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-validator.js","sourceRoot":"","sources":["select-validator.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAE,MAAM,EAAC,MAAM,KAAK,CAAC;AAEjC,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAiBzC;;;GAGG;AACH,MAAM,OAAO,eAAgB,SAAQ,SAAsB;IAGtC,eAAe,CAAC,KAAkB;QACnD,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,oCAAoC;YACpC,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;SACvD;QAED,MAAM,CAAC,IAAI,CAAA,iBAAiB,KAAK,CAAC,KAAK,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAEzE,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QACvC,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;QAC7C,OAAO;YACL,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ;YACrC,iBAAiB,EAAE,IAAI,CAAC,aAAa,CAAC,iBAAiB;SACxD,CAAC;IACJ,CAAC;IAEkB,MAAM,CAAC,IAAiB,EAAE,IAAiB;QAC5D,OAAO,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,QAAQ,CAAC;IACtE,CAAC;IAEkB,IAAI,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAc;QACpD,OAAO,EAAC,KAAK,EAAE,QAAQ,EAAC,CAAC;IAC3B,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, render} from 'lit';\n\nimport {Validator} from './validator.js';\n\n/**\n * Constraint validation properties for a select dropdown.\n */\nexport interface SelectState {\n  /**\n   * The current selected value.\n   */\n  readonly value: string;\n\n  /**\n   * Whether the select is required.\n   */\n  readonly required: boolean;\n}\n\n/**\n * A validator that provides constraint validation that emulates `<select>`\n * validation.\n */\nexport class SelectValidator extends Validator<SelectState> {\n  private selectControl?: HTMLSelectElement;\n\n  protected override computeValidity(state: SelectState) {\n    if (!this.selectControl) {\n      // Lazily create the platform select\n      this.selectControl = document.createElement('select');\n    }\n\n    render(html`<option value=${state.value}></option>`, this.selectControl);\n\n    this.selectControl.value = state.value;\n    this.selectControl.required = state.required;\n    return {\n      validity: this.selectControl.validity,\n      validationMessage: this.selectControl.validationMessage,\n    };\n  }\n\n  protected override equals(prev: SelectState, next: SelectState) {\n    return prev.value === next.value && prev.required === next.required;\n  }\n\n  protected override copy({value, required}: SelectState) {\n    return {value, required};\n  }\n}\n"]}