feat(field): add field component

PiperOrigin-RevId: 401868371

Author: asyncliz

components/field/filled-field.ts

@@ -4,4 +4,24 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-// TODO(b/177366329): Import and export filled field web component
+import {customElement} from 'lit/decorators';
+
+import {FilledField} from './lib/filled-field';
+import {styles as filledStyles} from './lib/filled-styles.css';
+import {styles as sharedStyles} from './lib/shared-styles.css';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-filled-field': MdFilledField;
+  }
+}
+
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {const}
+ */
+@customElement('md-filled-field')
+export class MdFilledField extends FilledField {
+  static styles = [sharedStyles, filledStyles];
+}

components/field/lib/constants.ts

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {html, LitElement, TemplateResult} from 'lit';
+import {property, state} from 'lit/decorators';
+import {ClassInfo, classMap} from 'lit/directives/class-map';
+
+import {FieldFoundation} from './foundation';
+import {FieldState, LabelType} from './state';
+
+/** @soyCompatible */
+export class Field extends LitElement implements FieldState {
+  // FieldState
+  @property({type: Boolean}) disabled = false;
+  @property({type: Boolean}) error = false;
+  @property({type: Boolean}) focused = false;
+  @property({type: String}) label?: string;
+  @state() labelText = '';
+  @property({type: Boolean}) populated = false;
+  @property({type: Boolean}) required = false;
+  @state() visibleLabelType = LabelType.RESTING;
+
+  protected foundation = new FieldFoundation({state: this});
+
+  /** @soyTemplate */
+  render(): TemplateResult {
+    return html`
+      <span class="mdc-field ${classMap(this.getRenderClasses())}">
+        <span class="mdc-field__container">
+          ${this.renderContainerContents()}
+        </span>
+      </span>
+    `;
+  }
+
+  /** @soyTemplate */
+  protected getRenderClasses(): ClassInfo {
+    return {
+      'mdc-field--disabled': this.disabled,
+      'mdc-field--error': this.error,
+      'mdc-field--focused': this.focused,
+      'mdc-field--populated': this.populated,
+      'mdc-field--required': this.required,
+    };
+  }
+
+  /** @soyTemplate */
+  protected renderContainerContents(): TemplateResult {
+    return html`
+      <span class="mdc-field__start">
+        <slot name="start"></slot>
+      </span>
+      <span class="mdc-field__middle">${this.renderMiddleContents()}</span>
+      <span class="mdc-field__end">
+        <slot name="end"></slot>
+      </span>
+    `;
+  }
+
+  /** @soyTemplate */
+  protected renderMiddleContents(): TemplateResult {
+    return html`
+      <span class="mdc-field__content"><slot></slot></span>
+    `;
+  }
+
+  /** @soyTemplate */
+  protected renderLabel(labelType: LabelType): TemplateResult {
+    return html`
+      <span class="mdc-field__label
+        ${classMap(this.getRenderLabelClasses(labelType))}"
+      >${this.labelText}</span>
+    `;
+  }
+
+  /** @soyTemplate */
+  protected getRenderLabelClasses(labelType: LabelType): ClassInfo {
+    return {
+      'mdc-field__label--floating': labelType === LabelType.FLOATING,
+      'mdc-field__label--resting': labelType === LabelType.RESTING,
+      'mdc-field__label--hidden': labelType !== this.visibleLabelType,
+    };
+  }
+}

components/field/lib/field.ts

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {html, TemplateResult} from 'lit';
+import {ClassInfo} from 'lit/directives/class-map';
+
+import {Field} from './field';
+import {LabelType} from './state';
+
+/** @soyCompatible */
+export class FilledField extends Field {
+  /** @soyTemplate */
+  protected override getRenderClasses(): ClassInfo {
+    return {
+      ...super.getRenderClasses(),
+      'mdc-field--filled': true,
+    };
+  }
+
+  /** @soyTemplate */
+  protected override renderContainerContents(): TemplateResult {
+    return html`
+      ${super.renderContainerContents()}
+      <span class="mdc-field__stroke"></span>
+    `;
+  }
+
+  /** @soyTemplate */
+  protected renderMiddleContents(): TemplateResult {
+    return html`
+      ${this.renderLabel(LabelType.FLOATING)}
+      ${this.renderLabel(LabelType.RESTING)}
+      ${super.renderMiddleContents()}
+    `;
+  }
+}

components/field/lib/filled-field.ts

@@ -4,16 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {MDCObserverFoundation} from '@material/base/observer-foundation';
+import {ObserverFoundation} from '../../controller/observer-foundation';
 
-import {FieldAdapter} from './adapter';
-import {LabelType} from './constants';
-
-export class FieldFoundation extends MDCObserverFoundation<FieldAdapter> {
-  constructor(adapter: FieldAdapter) {
-    super(adapter);
-  }
+import {FieldAdapter, LabelType} from './state';
 
+export class FieldFoundation extends ObserverFoundation<FieldAdapter> {
   override init() {
     this.observe(this.adapter.state, {
       disabled: this.onDisabledChange,

components/field/lib/foundation.ts

@@ -0,0 +1,53 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {html, TemplateResult} from 'lit';
+import {ClassInfo} from 'lit/directives/class-map';
+
+import {Field} from './field';
+import {LabelType} from './state';
+
+/** @soyCompatible */
+export class OutlinedField extends Field {
+  /** @soyTemplate */
+  protected override getRenderClasses(): ClassInfo {
+    return {
+      ...super.getRenderClasses(),
+      'mdc-field--outlined': true,
+    };
+  }
+
+  /** @soyTemplate */
+  protected override renderContainerContents(): TemplateResult {
+    return html`
+      ${this.renderOutline()}
+      ${super.renderContainerContents()}
+    `;
+  }
+
+  /** @soyTemplate */
+  protected renderOutline(): TemplateResult {
+    return html`
+      <span class="mdc-field__outline">
+        <span class="mdc-field__outline-start"></span>
+        <span class="mdc-field__outline-notch">
+          <span class="mdc-field__outline-panel-inactive"></span>
+          <span class="mdc-field__outline-panel-active"></span>
+          ${this.renderLabel(LabelType.FLOATING)}
+        </span>
+        <span class="mdc-field__outline-end"></span>
+      </span>
+    `;
+  }
+
+  /** @soyTemplate */
+  protected override renderMiddleContents(): TemplateResult {
+    return html`
+      ${this.renderLabel(LabelType.RESTING)}
+      ${super.renderMiddleContents()}
+    `;
+  }
+}

components/field/lib/outlined-field.ts

@@ -4,8 +4,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {LabelType} from './constants';
-
 export interface FieldState {
   disabled: boolean;
   error: boolean;
@@ -17,6 +15,11 @@ export interface FieldState {
   visibleLabelType: LabelType;
 }
 
+export enum LabelType {
+  FLOATING = 'floating',
+  RESTING = 'resting',
+}
+
 export interface FieldAdapter {
   state: FieldState;
 }

components/field/lib/adapter.ts components/field/lib/state.tscomponents/field/lib/adapter.ts renamed to components/field/lib/state.ts

@@ -4,4 +4,24 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-// TODO(b/177366329): Import and export outlined field web component
+import {customElement} from 'lit/decorators';
+
+import {OutlinedField} from './lib/outlined-field';
+import {styles as outlinedStyles} from './lib/outlined-styles.css';
+import {styles as sharedStyles} from './lib/shared-styles.css';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'md-outlined-field': MdOutlinedField;
+  }
+}
+
+/**
+ * @soyCompatible
+ * @final
+ * @suppress {const}
+ */
+@customElement('md-outlined-field')
+export class MdOutlinedField extends OutlinedField {
+  static styles = [sharedStyles, outlinedStyles];
+}