revert: "feat(labs): change form-submitter to a behavior mixin"

This reverts commit 4142a69.

PiperOrigin-RevId: 878971156

Author: material-web-copybara

button/internal/button.ts

@@ -12,6 +12,11 @@ import {property, query, queryAssignedElements} from 'lit/decorators.js';
 
 import {ARIAMixinStrict} from '../../internal/aria/aria.js';
 import {mixinDelegatesAria} from '../../internal/aria/delegate.js';
+import {
+  FormSubmitter,
+  setupFormSubmitter,
+  type FormSubmitterType,
+} from '../../internal/controller/form-submitter.js';
 import {
   dispatchActivationClick,
   isActivationClick,
@@ -20,17 +25,18 @@ import {
   internals,
   mixinElementInternals,
 } from '../../labs/behaviors/element-internals.js';
-import {mixinFormSubmitter} from '../../labs/behaviors/form-submitter.js';
 
 // Separate variable needed for closure.
-const buttonBaseClass = mixinDelegatesAria(
-  mixinFormSubmitter(mixinElementInternals(LitElement)),
-);
+const buttonBaseClass = mixinDelegatesAria(mixinElementInternals(LitElement));
 
 /**
  * A button component.
  */
-export abstract class Button extends buttonBaseClass {
+export abstract class Button extends buttonBaseClass implements FormSubmitter {
+  static {
+    setupFormSubmitter(Button);
+  }
+
   /** @nocollapse */
   static readonly formAssociated = true;
 
@@ -89,6 +95,25 @@ export abstract class Button extends buttonBaseClass {
   @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon =
     false;
 
+  /**
+   * The default behavior of the button. May be "button", "reset", or "submit"
+   * (default).
+   */
+  @property() type: FormSubmitterType = 'submit';
+
+  /**
+   * The value added to a form with the button's name when the button submits a
+   * form.
+   */
+  @property({reflect: true}) value = '';
+
+  get name() {
+    return this.getAttribute('name') ?? '';
+  }
+  set name(name: string) {
+    this.setAttribute('name', name);
+  }
+
   /**
    * The associated form element with which this element's value will submit.
    */

iconbutton/internal/icon-button.ts

@@ -14,6 +14,11 @@ import {literal, html as staticHtml} from 'lit/static-html.js';
 
 import {ARIAMixinStrict} from '../../internal/aria/aria.js';
 import {mixinDelegatesAria} from '../../internal/aria/delegate.js';
+import {
+  FormSubmitter,
+  setupFormSubmitter,
+  type FormSubmitterType,
+} from '../../internal/controller/form-submitter.js';
 import {isRtl} from '../../internal/controller/is-rtl.js';
 import {
   afterDispatch,
@@ -23,13 +28,12 @@ import {
   internals,
   mixinElementInternals,
 } from '../../labs/behaviors/element-internals.js';
-import {mixinFormSubmitter} from '../../labs/behaviors/form-submitter.js';
 
 type LinkTarget = '_blank' | '_parent' | '_self' | '_top';
 
 // Separate variable needed for closure.
 const iconButtonBaseClass = mixinDelegatesAria(
-  mixinFormSubmitter(mixinElementInternals(LitElement)),
+  mixinElementInternals(LitElement),
 );
 
 /**
@@ -39,7 +43,11 @@ const iconButtonBaseClass = mixinDelegatesAria(
  * --composed
  * @fires change {Event} Dispatched when a toggle button toggles --bubbles
  */
-export class IconButton extends iconButtonBaseClass {
+export class IconButton extends iconButtonBaseClass implements FormSubmitter {
+  static {
+    setupFormSubmitter(IconButton);
+  }
+
   /** @nocollapse */
   static readonly formAssociated = true;
 
@@ -105,6 +113,25 @@ export class IconButton extends iconButtonBaseClass {
    */
   @property({type: Boolean, reflect: true}) selected = false;
 
+  /**
+   * The default behavior of the button. May be "button", "reset", or "submit"
+   * (default).
+   */
+  @property() type: FormSubmitterType = 'submit';
+
+  /**
+   * The value added to a form with the button's name when the button submits a
+   * form.
+   */
+  @property({reflect: true}) value = '';
+
+  get name() {
+    return this.getAttribute('name') ?? '';
+  }
+  set name(name: string) {
+    this.setAttribute('name', name);
+  }
+
   /**
    * The associated form element with which this element's value will submit.
    */

internal/controller/form-submitter.ts

@@ -0,0 +1,130 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {isServer, ReactiveElement} from 'lit';
+
+import {
+  internals,
+  WithElementInternals,
+} from '../../labs/behaviors/element-internals.js';
+
+/**
+ * A string indicating the form submission behavior of the element.
+ *
+ * - submit: The element submits the form. This is the default value if the
+ * attribute is not specified, or if it is dynamically changed to an empty or
+ * invalid value.
+ * - reset: The element resets the form.
+ * - button: The element does nothing.
+ */
+export type FormSubmitterType = 'button' | 'submit' | 'reset';
+
+/**
+ * An element that can submit or reset a `<form>`, similar to
+ * `<button type="submit">`.
+ */
+export interface FormSubmitter extends ReactiveElement, WithElementInternals {
+  /**
+   * A string indicating the form submission behavior of the element.
+   *
+   * - submit: The element submits the form. This is the default value if the
+   * attribute is not specified, or if it is dynamically changed to an empty or
+   * invalid value.
+   * - reset: The element resets the form.
+   * - button: The element does nothing.
+   */
+  type: FormSubmitterType;
+
+  /**
+   * The HTML name to use in form submission. When combined with a `value`, the
+   * submitting button's name/value will be added to the form.
+   *
+   * Names must reflect to a `name` attribute for form integration.
+   */
+  name: string;
+
+  /**
+   * The value of the button. When combined with a `name`, the submitting
+   * button's name/value will be added to the form.
+   */
+  value: string;
+}
+
+type FormSubmitterConstructor =
+  | (new () => FormSubmitter)
+  | (abstract new () => FormSubmitter);
+
+/**
+ * Sets up an element's constructor to enable form submission. The element
+ * instance should be form associated and have a `type` property.
+ *
+ * A click listener is added to each element instance. If the click is not
+ * default prevented, it will submit the element's form, if any.
+ *
+ * @example
+ * ```ts
+ * class MyElement extends mixinElementInternals(LitElement) {
+ *   static {
+ *     setupFormSubmitter(MyElement);
+ *   }
+ *
+ *   static formAssociated = true;
+ *
+ *   type: FormSubmitterType = 'submit';
+ * }
+ * ```
+ *
+ * @param ctor The form submitter element's constructor.
+ */
+export function setupFormSubmitter(ctor: FormSubmitterConstructor) {
+  if (isServer) {
+    return;
+  }
+
+  (ctor as unknown as typeof ReactiveElement).addInitializer((instance) => {
+    const submitter = instance as FormSubmitter;
+    submitter.addEventListener('click', async (event) => {
+      const {type, [internals]: elementInternals} = submitter;
+      const {form} = elementInternals;
+      if (!form || type === 'button') {
+        return;
+      }
+
+      // Wait a full task for event bubbling to complete.
+      await new Promise<void>((resolve) => {
+        setTimeout(resolve);
+      });
+
+      if (event.defaultPrevented) {
+        return;
+      }
+
+      if (type === 'reset') {
+        form.reset();
+        return;
+      }
+
+      // form.requestSubmit(submitter) does not work with form associated custom
+      // elements. This patches the dispatched submit event to add the correct
+      // `submitter`.
+      // See https://github.com/WICG/webcomponents/issues/814
+      form.addEventListener(
+        'submit',
+        (submitEvent) => {
+          Object.defineProperty(submitEvent, 'submitter', {
+            configurable: true,
+            enumerable: true,
+            get: () => submitter,
+          });
+        },
+        {capture: true, once: true},
+      );
+
+      elementInternals.setFormValue(submitter.value);
+      form.requestSubmit();
+    });
+  });
+}

labs/behaviors/form-submitter_test.ts …ternal/controller/form-submitter_test.tslabs/behaviors/form-submitter_test.ts renamed to internal/controller/form-submitter_test.ts labs/behaviors/form-submitter_test.ts renamed to internal/controller/form-submitter_test.ts

@@ -7,12 +7,12 @@
 // import 'jasmine'; (google3-only)
 
 import {html, LitElement} from 'lit';
-import {customElement} from 'lit/decorators.js';
+import {customElement, property} from 'lit/decorators.js';
 
 import {mixinElementInternals} from '../../labs/behaviors/element-internals.js';
 import {Environment} from '../../testing/environment.js';
 import {Harness} from '../../testing/harness.js';
-import {mixinFormSubmitter} from './form-submitter.js';
+import {FormSubmitterType, setupFormSubmitter} from './form-submitter.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -21,10 +21,16 @@ declare global {
 }
 
 @customElement('test-form-submitter-button')
-class FormSubmitterButton extends mixinFormSubmitter(
-  mixinElementInternals(LitElement),
-) {
+class FormSubmitterButton extends mixinElementInternals(LitElement) {
+  static {
+    setupFormSubmitter(FormSubmitterButton);
+  }
+
   static formAssociated = true;
+
+  type: FormSubmitterType = 'submit';
+  @property({reflect: true}) name = '';
+  value = '';
 }
 
 describe('setupFormSubmitter()', () => {