@matter-server/dashboard 0.2.7-alpha.0-20260118-993a1c7 → 0.2.7-alpha.0-20260119-49e7237

package/dist/web/js/outlined-text-field-BVcHUxiS.js

@@ -0,0 +1,968 @@
+import { j as i, w as e, x as i$1, y as t, z as E, A, m as mixinDelegatesAria, k as mixinElementInternals, i as i$2, _ as __decorate, n, r as r$1, a as e$1, o, f as e$2, h as b, u, l as i$3, t as t$1 } from './matter-dashboard-app-Dr-IYMsD.js';
+import { V as Validator, m as mixinOnReportValidity, a as mixinConstraintValidation, b as mixinFormAssociated, o as o$1, g as getFormValue, d as createValidator, e as getValidityAnchor, c as onReportValidity } from './validator-muF28wYx.js';
+import { r as redispatchEvent } from './prevent_default-tLhqZmsK.js';
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./textfield/internal/outlined-styles.css.
+const styles$1 = i`:host{--_caret-color: var(--md-outlined-text-field-caret-color, var(--md-sys-color-primary, #6750a4));--_disabled-input-text-color: var(--md-outlined-text-field-disabled-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-input-text-opacity: var(--md-outlined-text-field-disabled-input-text-opacity, 0.38);--_disabled-label-text-color: var(--md-outlined-text-field-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-opacity: var(--md-outlined-text-field-disabled-label-text-opacity, 0.38);--_disabled-leading-icon-color: var(--md-outlined-text-field-disabled-leading-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-leading-icon-opacity: var(--md-outlined-text-field-disabled-leading-icon-opacity, 0.38);--_disabled-outline-color: var(--md-outlined-text-field-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-opacity: var(--md-outlined-text-field-disabled-outline-opacity, 0.12);--_disabled-outline-width: var(--md-outlined-text-field-disabled-outline-width, 1px);--_disabled-supporting-text-color: var(--md-outlined-text-field-disabled-supporting-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-supporting-text-opacity: var(--md-outlined-text-field-disabled-supporting-text-opacity, 0.38);--_disabled-trailing-icon-color: var(--md-outlined-text-field-disabled-trailing-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-trailing-icon-opacity: var(--md-outlined-text-field-disabled-trailing-icon-opacity, 0.38);--_error-focus-caret-color: var(--md-outlined-text-field-error-focus-caret-color, var(--md-sys-color-error, #b3261e));--_error-focus-input-text-color: var(--md-outlined-text-field-error-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-focus-label-text-color: var(--md-outlined-text-field-error-focus-label-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-leading-icon-color: var(--md-outlined-text-field-error-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-focus-outline-color: var(--md-outlined-text-field-error-focus-outline-color, var(--md-sys-color-error, #b3261e));--_error-focus-supporting-text-color: var(--md-outlined-text-field-error-focus-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-focus-trailing-icon-color: var(--md-outlined-text-field-error-focus-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_error-hover-input-text-color: var(--md-outlined-text-field-error-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-hover-label-text-color: var(--md-outlined-text-field-error-hover-label-text-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-leading-icon-color: var(--md-outlined-text-field-error-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-hover-outline-color: var(--md-outlined-text-field-error-hover-outline-color, var(--md-sys-color-on-error-container, #410e0b));--_error-hover-supporting-text-color: var(--md-outlined-text-field-error-hover-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-hover-trailing-icon-color: var(--md-outlined-text-field-error-hover-trailing-icon-color, var(--md-sys-color-on-error-container, #410e0b));--_error-input-text-color: var(--md-outlined-text-field-error-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_error-label-text-color: var(--md-outlined-text-field-error-label-text-color, var(--md-sys-color-error, #b3261e));--_error-leading-icon-color: var(--md-outlined-text-field-error-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_error-outline-color: var(--md-outlined-text-field-error-outline-color, var(--md-sys-color-error, #b3261e));--_error-supporting-text-color: var(--md-outlined-text-field-error-supporting-text-color, var(--md-sys-color-error, #b3261e));--_error-trailing-icon-color: var(--md-outlined-text-field-error-trailing-icon-color, var(--md-sys-color-error, #b3261e));--_focus-input-text-color: var(--md-outlined-text-field-focus-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_focus-label-text-color: var(--md-outlined-text-field-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_focus-leading-icon-color: var(--md-outlined-text-field-focus-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-outline-color: var(--md-outlined-text-field-focus-outline-color, var(--md-sys-color-primary, #6750a4));--_focus-outline-width: var(--md-outlined-text-field-focus-outline-width, 3px);--_focus-supporting-text-color: var(--md-outlined-text-field-focus-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_focus-trailing-icon-color: var(--md-outlined-text-field-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-input-text-color: var(--md-outlined-text-field-hover-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-label-text-color: var(--md-outlined-text-field-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-leading-icon-color: var(--md-outlined-text-field-hover-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-outline-color: var(--md-outlined-text-field-hover-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-outline-width: var(--md-outlined-text-field-hover-outline-width, 1px);--_hover-supporting-text-color: var(--md-outlined-text-field-hover-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_hover-trailing-icon-color: var(--md-outlined-text-field-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-color: var(--md-outlined-text-field-input-text-color, var(--md-sys-color-on-surface, #1d1b20));--_input-text-font: var(--md-outlined-text-field-input-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_input-text-line-height: var(--md-outlined-text-field-input-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_input-text-placeholder-color: var(--md-outlined-text-field-input-text-placeholder-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-prefix-color: var(--md-outlined-text-field-input-text-prefix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-size: var(--md-outlined-text-field-input-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_input-text-suffix-color: var(--md-outlined-text-field-input-text-suffix-color, var(--md-sys-color-on-surface-variant, #49454f));--_input-text-weight: var(--md-outlined-text-field-input-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_label-text-color: var(--md-outlined-text-field-label-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_label-text-font: var(--md-outlined-text-field-label-text-font, var(--md-sys-typescale-body-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-outlined-text-field-label-text-line-height, var(--md-sys-typescale-body-large-line-height, 1.5rem));--_label-text-populated-line-height: var(--md-outlined-text-field-label-text-populated-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_label-text-populated-size: var(--md-outlined-text-field-label-text-populated-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_label-text-size: var(--md-outlined-text-field-label-text-size, var(--md-sys-typescale-body-large-size, 1rem));--_label-text-weight: var(--md-outlined-text-field-label-text-weight, var(--md-sys-typescale-body-large-weight, var(--md-ref-typeface-weight-regular, 400)));--_leading-icon-color: var(--md-outlined-text-field-leading-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_leading-icon-size: var(--md-outlined-text-field-leading-icon-size, 24px);--_outline-color: var(--md-outlined-text-field-outline-color, var(--md-sys-color-outline, #79747e));--_outline-width: var(--md-outlined-text-field-outline-width, 1px);--_supporting-text-color: var(--md-outlined-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));--_supporting-text-font: var(--md-outlined-text-field-supporting-text-font, var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto)));--_supporting-text-line-height: var(--md-outlined-text-field-supporting-text-line-height, var(--md-sys-typescale-body-small-line-height, 1rem));--_supporting-text-size: var(--md-outlined-text-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));--_supporting-text-weight: var(--md-outlined-text-field-supporting-text-weight, var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400)));--_trailing-icon-color: var(--md-outlined-text-field-trailing-icon-color, var(--md-sys-color-on-surface-variant, #49454f));--_trailing-icon-size: var(--md-outlined-text-field-trailing-icon-size, 24px);--_container-shape-start-start: var(--md-outlined-text-field-container-shape-start-start, var(--md-outlined-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-start-end: var(--md-outlined-text-field-container-shape-start-end, var(--md-outlined-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-end-end: var(--md-outlined-text-field-container-shape-end-end, var(--md-outlined-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_container-shape-end-start: var(--md-outlined-text-field-container-shape-end-start, var(--md-outlined-text-field-container-shape, var(--md-sys-shape-corner-extra-small, 4px)));--_icon-input-space: var(--md-outlined-text-field-icon-input-space, 16px);--_leading-space: var(--md-outlined-text-field-leading-space, 16px);--_trailing-space: var(--md-outlined-text-field-trailing-space, 16px);--_top-space: var(--md-outlined-text-field-top-space, 16px);--_bottom-space: var(--md-outlined-text-field-bottom-space, 16px);--_input-text-prefix-trailing-space: var(--md-outlined-text-field-input-text-prefix-trailing-space, 2px);--_input-text-suffix-leading-space: var(--md-outlined-text-field-input-text-suffix-leading-space, 2px);--_focus-caret-color: var(--md-outlined-text-field-focus-caret-color, var(--md-sys-color-primary, #6750a4));--_with-leading-icon-leading-space: var(--md-outlined-text-field-with-leading-icon-leading-space, 12px);--_with-trailing-icon-trailing-space: var(--md-outlined-text-field-with-trailing-icon-trailing-space, 12px);--md-outlined-field-bottom-space: var(--_bottom-space);--md-outlined-field-container-shape-end-end: var(--_container-shape-end-end);--md-outlined-field-container-shape-end-start: var(--_container-shape-end-start);--md-outlined-field-container-shape-start-end: var(--_container-shape-start-end);--md-outlined-field-container-shape-start-start: var(--_container-shape-start-start);--md-outlined-field-content-color: var(--_input-text-color);--md-outlined-field-content-font: var(--_input-text-font);--md-outlined-field-content-line-height: var(--_input-text-line-height);--md-outlined-field-content-size: var(--_input-text-size);--md-outlined-field-content-space: var(--_icon-input-space);--md-outlined-field-content-weight: var(--_input-text-weight);--md-outlined-field-disabled-content-color: var(--_disabled-input-text-color);--md-outlined-field-disabled-content-opacity: var(--_disabled-input-text-opacity);--md-outlined-field-disabled-label-text-color: var(--_disabled-label-text-color);--md-outlined-field-disabled-label-text-opacity: var(--_disabled-label-text-opacity);--md-outlined-field-disabled-leading-content-color: var(--_disabled-leading-icon-color);--md-outlined-field-disabled-leading-content-opacity: var(--_disabled-leading-icon-opacity);--md-outlined-field-disabled-outline-color: var(--_disabled-outline-color);--md-outlined-field-disabled-outline-opacity: var(--_disabled-outline-opacity);--md-outlined-field-disabled-outline-width: var(--_disabled-outline-width);--md-outlined-field-disabled-supporting-text-color: var(--_disabled-supporting-text-color);--md-outlined-field-disabled-supporting-text-opacity: var(--_disabled-supporting-text-opacity);--md-outlined-field-disabled-trailing-content-color: var(--_disabled-trailing-icon-color);--md-outlined-field-disabled-trailing-content-opacity: var(--_disabled-trailing-icon-opacity);--md-outlined-field-error-content-color: var(--_error-input-text-color);--md-outlined-field-error-focus-content-color: var(--_error-focus-input-text-color);--md-outlined-field-error-focus-label-text-color: var(--_error-focus-label-text-color);--md-outlined-field-error-focus-leading-content-color: var(--_error-focus-leading-icon-color);--md-outlined-field-error-focus-outline-color: var(--_error-focus-outline-color);--md-outlined-field-error-focus-supporting-text-color: var(--_error-focus-supporting-text-color);--md-outlined-field-error-focus-trailing-content-color: var(--_error-focus-trailing-icon-color);--md-outlined-field-error-hover-content-color: var(--_error-hover-input-text-color);--md-outlined-field-error-hover-label-text-color: var(--_error-hover-label-text-color);--md-outlined-field-error-hover-leading-content-color: var(--_error-hover-leading-icon-color);--md-outlined-field-error-hover-outline-color: var(--_error-hover-outline-color);--md-outlined-field-error-hover-supporting-text-color: var(--_error-hover-supporting-text-color);--md-outlined-field-error-hover-trailing-content-color: var(--_error-hover-trailing-icon-color);--md-outlined-field-error-label-text-color: var(--_error-label-text-color);--md-outlined-field-error-leading-content-color: var(--_error-leading-icon-color);--md-outlined-field-error-outline-color: var(--_error-outline-color);--md-outlined-field-error-supporting-text-color: var(--_error-supporting-text-color);--md-outlined-field-error-trailing-content-color: var(--_error-trailing-icon-color);--md-outlined-field-focus-content-color: var(--_focus-input-text-color);--md-outlined-field-focus-label-text-color: var(--_focus-label-text-color);--md-outlined-field-focus-leading-content-color: var(--_focus-leading-icon-color);--md-outlined-field-focus-outline-color: var(--_focus-outline-color);--md-outlined-field-focus-outline-width: var(--_focus-outline-width);--md-outlined-field-focus-supporting-text-color: var(--_focus-supporting-text-color);--md-outlined-field-focus-trailing-content-color: var(--_focus-trailing-icon-color);--md-outlined-field-hover-content-color: var(--_hover-input-text-color);--md-outlined-field-hover-label-text-color: var(--_hover-label-text-color);--md-outlined-field-hover-leading-content-color: var(--_hover-leading-icon-color);--md-outlined-field-hover-outline-color: var(--_hover-outline-color);--md-outlined-field-hover-outline-width: var(--_hover-outline-width);--md-outlined-field-hover-supporting-text-color: var(--_hover-supporting-text-color);--md-outlined-field-hover-trailing-content-color: var(--_hover-trailing-icon-color);--md-outlined-field-label-text-color: var(--_label-text-color);--md-outlined-field-label-text-font: var(--_label-text-font);--md-outlined-field-label-text-line-height: var(--_label-text-line-height);--md-outlined-field-label-text-populated-line-height: var(--_label-text-populated-line-height);--md-outlined-field-label-text-populated-size: var(--_label-text-populated-size);--md-outlined-field-label-text-size: var(--_label-text-size);--md-outlined-field-label-text-weight: var(--_label-text-weight);--md-outlined-field-leading-content-color: var(--_leading-icon-color);--md-outlined-field-leading-space: var(--_leading-space);--md-outlined-field-outline-color: var(--_outline-color);--md-outlined-field-outline-width: var(--_outline-width);--md-outlined-field-supporting-text-color: var(--_supporting-text-color);--md-outlined-field-supporting-text-font: var(--_supporting-text-font);--md-outlined-field-supporting-text-line-height: var(--_supporting-text-line-height);--md-outlined-field-supporting-text-size: var(--_supporting-text-size);--md-outlined-field-supporting-text-weight: var(--_supporting-text-weight);--md-outlined-field-top-space: var(--_top-space);--md-outlined-field-trailing-content-color: var(--_trailing-icon-color);--md-outlined-field-trailing-space: var(--_trailing-space);--md-outlined-field-with-leading-content-leading-space: var(--_with-leading-icon-leading-space);--md-outlined-field-with-trailing-content-trailing-space: var(--_with-trailing-icon-trailing-space)}
+`;
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const r = o => void 0 === o.strings,
+  m = {},
+  p = (o, t = m) => o._$AH = t;
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const l = e(class extends i$1 {
+  constructor(r$1) {
+    if (super(r$1), r$1.type !== t.PROPERTY && r$1.type !== t.ATTRIBUTE && r$1.type !== t.BOOLEAN_ATTRIBUTE) throw Error("The `live` directive is not allowed on child or event bindings");
+    if (!r(r$1)) throw Error("`live` bindings can only contain a single expression");
+  }
+  render(r) {
+    return r;
+  }
+  update(i, [t$1]) {
+    if (t$1 === E || t$1 === A) return t$1;
+    const o = i.element,
+      l = i.name;
+    if (i.type === t.PROPERTY) {
+      if (t$1 === o[l]) return E;
+    } else if (i.type === t.BOOLEAN_ATTRIBUTE) {
+      if (!!t$1 === o.hasAttribute(l)) return E;
+    } else if (i.type === t.ATTRIBUTE && o.getAttribute(l) === t$1 + "") return E;
+    return p(i), t$1;
+  }
+});
+
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const stringConverter = {
+  fromAttribute(value) {
+    return value ?? '';
+  },
+  toAttribute(value) {
+    return value || null;
+  }
+};
+
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A validator that provides constraint validation that emulates `<input>` and
+ * `<textarea>` validation.
+ */
+class TextFieldValidator extends Validator {
+  computeValidity({
+    state,
+    renderedControl
+  }) {
+    let inputOrTextArea = renderedControl;
+    if (isInputState(state) && !inputOrTextArea) {
+      // Get cached <input> or create it.
+      inputOrTextArea = this.inputControl || document.createElement('input');
+      // Cache the <input> to re-use it next time.
+      this.inputControl = inputOrTextArea;
+    } else if (!inputOrTextArea) {
+      // Get cached <textarea> or create it.
+      inputOrTextArea = this.textAreaControl || document.createElement('textarea');
+      // Cache the <textarea> to re-use it next time.
+      this.textAreaControl = inputOrTextArea;
+    }
+    // Set this variable so we can check it for input-specific properties.
+    const input = isInputState(state) ? inputOrTextArea : null;
+    // Set input's "type" first, since this can change the other properties
+    if (input) {
+      input.type = state.type;
+    }
+    if (inputOrTextArea.value !== state.value) {
+      // Only programmatically set the value if there's a difference. When using
+      // the rendered control, the value will always be up to date. Setting the
+      // property (even if it's the same string) will reset the internal <input>
+      // dirty flag, making minlength and maxlength validation reset.
+      inputOrTextArea.value = state.value;
+    }
+    inputOrTextArea.required = state.required;
+    // The following IDLAttribute properties will always hydrate an attribute,
+    // even if set to a the default value ('' or -1). The presence of the
+    // attribute triggers constraint validation, so we must remove the attribute
+    // when empty.
+    if (input) {
+      const inputState = state;
+      if (inputState.pattern) {
+        input.pattern = inputState.pattern;
+      } else {
+        input.removeAttribute('pattern');
+      }
+      if (inputState.min) {
+        input.min = inputState.min;
+      } else {
+        input.removeAttribute('min');
+      }
+      if (inputState.max) {
+        input.max = inputState.max;
+      } else {
+        input.removeAttribute('max');
+      }
+      if (inputState.step) {
+        input.step = inputState.step;
+      } else {
+        input.removeAttribute('step');
+      }
+    }
+    // Use -1 to represent no minlength and maxlength, which is what the
+    // platform input returns. However, it will throw an error if you try to
+    // manually set it to -1.
+    //
+    // While the type is `number`, it may actually be `null` at runtime.
+    // `null > -1` is true since `null` coerces to `0`, so we default null and
+    // undefined to -1.
+    //
+    // We set attributes instead of properties since setting a property may
+    // throw an out of bounds error in relation to the other property.
+    // Attributes will not throw errors while the state is updating.
+    if ((state.minLength ?? -1) > -1) {
+      inputOrTextArea.setAttribute('minlength', String(state.minLength));
+    } else {
+      inputOrTextArea.removeAttribute('minlength');
+    }
+    if ((state.maxLength ?? -1) > -1) {
+      inputOrTextArea.setAttribute('maxlength', String(state.maxLength));
+    } else {
+      inputOrTextArea.removeAttribute('maxlength');
+    }
+    return {
+      validity: inputOrTextArea.validity,
+      validationMessage: inputOrTextArea.validationMessage
+    };
+  }
+  equals({
+    state: prev
+  }, {
+    state: next
+  }) {
+    // Check shared input and textarea properties
+    const inputOrTextAreaEqual = prev.type === next.type && prev.value === next.value && prev.required === next.required && prev.minLength === next.minLength && prev.maxLength === next.maxLength;
+    if (!isInputState(prev) || !isInputState(next)) {
+      // Both are textareas, all relevant properties are equal.
+      return inputOrTextAreaEqual;
+    }
+    // Check additional input-specific properties.
+    return inputOrTextAreaEqual && prev.pattern === next.pattern && prev.min === next.min && prev.max === next.max && prev.step === next.step;
+  }
+  copy({
+    state
+  }) {
+    // Don't hold a reference to the rendered control when copying since we
+    // don't use it when checking if the state changed.
+    return {
+      state: isInputState(state) ? this.copyInput(state) : this.copyTextArea(state),
+      renderedControl: null
+    };
+  }
+  copyInput(state) {
+    const {
+      type,
+      pattern,
+      min,
+      max,
+      step
+    } = state;
+    return {
+      ...this.copySharedState(state),
+      type,
+      pattern,
+      min,
+      max,
+      step
+    };
+  }
+  copyTextArea(state) {
+    return {
+      ...this.copySharedState(state),
+      type: state.type
+    };
+  }
+  copySharedState({
+    value,
+    required,
+    minLength,
+    maxLength
+  }) {
+    return {
+      value,
+      required,
+      minLength,
+      maxLength
+    };
+  }
+}
+function isInputState(state) {
+  return state.type !== 'textarea';
+}
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Separate variable needed for closure.
+const textFieldBaseClass = mixinDelegatesAria(mixinOnReportValidity(mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(i$2)))));
+/**
+ * A text field component.
+ *
+ * @fires select {Event} The native `select` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select_event)
+ * --bubbles
+ * @fires change {Event} The native `change` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)
+ * --bubbles
+ * @fires input {InputEvent} The native `input` event on
+ * [`<input>`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+ * --bubbles --composed
+ */
+class TextField extends textFieldBaseClass {
+  constructor() {
+    super(...arguments);
+    /**
+     * Gets or sets whether or not the text field is in a visually invalid state.
+     *
+     * This error state overrides the error state controlled by
+     * `reportValidity()`.
+     */
+    this.error = false;
+    /**
+     * The error message that replaces supporting text when `error` is true. If
+     * `errorText` is an empty string, then the supporting text will continue to
+     * show.
+     *
+     * This error message overrides the error message displayed by
+     * `reportValidity()`.
+     */
+    this.errorText = '';
+    /**
+     * The floating Material label of the textfield component. It informs the user
+     * about what information is requested for a text field. It is aligned with
+     * the input text, is always visible, and it floats when focused or when text
+     * is entered into the textfield. This label also sets accessibilty labels,
+     * but the accessible label is overriden by `aria-label`.
+     *
+     * Learn more about floating labels from the Material Design guidelines:
+     * https://m3.material.io/components/text-fields/guidelines
+     */
+    this.label = '';
+    /**
+     * Disables the asterisk on the floating label, when the text field is
+     * required.
+     */
+    this.noAsterisk = false;
+    /**
+     * Indicates that the user must specify a value for the input before the
+     * owning form can be submitted and will render an error state when
+     * `reportValidity()` is invoked when value is empty. Additionally the
+     * floating label will render an asterisk `"*"` when true.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required
+     */
+    this.required = false;
+    /**
+     * The current value of the text field. It is always a string.
+     */
+    this.value = '';
+    /**
+     * An optional prefix to display before the input value.
+     */
+    this.prefixText = '';
+    /**
+     * An optional suffix to display after the input value.
+     */
+    this.suffixText = '';
+    /**
+     * Whether or not the text field has a leading icon. Used for SSR.
+     */
+    this.hasLeadingIcon = false;
+    /**
+     * Whether or not the text field has a trailing icon. Used for SSR.
+     */
+    this.hasTrailingIcon = false;
+    /**
+     * Conveys additional information below the text field, such as how it should
+     * be used.
+     */
+    this.supportingText = '';
+    /**
+     * Override the input text CSS `direction`. Useful for RTL languages that use
+     * LTR notation for fractions.
+     */
+    this.textDirection = '';
+    /**
+     * The number of rows to display for a `type="textarea"` text field.
+     * Defaults to 2.
+     */
+    this.rows = 2;
+    /**
+     * The number of cols to display for a `type="textarea"` text field.
+     * Defaults to 20.
+     */
+    this.cols = 20;
+    // <input> properties
+    this.inputMode = '';
+    /**
+     * Defines the greatest value in the range of permitted values.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
+     */
+    this.max = '';
+    /**
+     * The maximum number of characters a user can enter into the text field. Set
+     * to -1 for none.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
+     */
+    this.maxLength = -1;
+    /**
+     * Defines the most negative value in the range of permitted values.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
+     */
+    this.min = '';
+    /**
+     * The minimum number of characters a user can enter into the text field. Set
+     * to -1 for none.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
+     */
+    this.minLength = -1;
+    /**
+     * When true, hide the spinner for `type="number"` text fields.
+     */
+    this.noSpinner = false;
+    /**
+     * A regular expression that the text field's value must match to pass
+     * constraint validation.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
+     */
+    this.pattern = '';
+    /**
+     * Defines the text displayed in the textfield when it has no value. Provides
+     * a brief hint to the user as to the expected type of data that should be
+     * entered into the control. Unlike `label`, the placeholder is not visible
+     * and does not float when the textfield has a value.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/placeholder
+     */
+    this.placeholder = '';
+    /**
+     * Indicates whether or not a user should be able to edit the text field's
+     * value.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly
+     */
+    this.readOnly = false;
+    /**
+     * Indicates that input accepts multiple email addresses.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#multiple
+     */
+    this.multiple = false;
+    /**
+     * Returns or sets the element's step attribute, which works with min and max
+     * to limit the increments at which a numeric or date-time value can be set.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
+     */
+    this.step = '';
+    /**
+     * The `<input>` type to use, defaults to "text". The type greatly changes how
+     * the text field behaves.
+     *
+     * Text fields support a limited number of `<input>` types:
+     *
+     * - text
+     * - textarea
+     * - email
+     * - number
+     * - password
+     * - search
+     * - tel
+     * - url
+     *
+     * See
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
+     * for more details on each input type.
+     */
+    this.type = 'text';
+    /**
+     * Describes what, if any, type of autocomplete functionality the input
+     * should provide.
+     *
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+     */
+    this.autocomplete = '';
+    /**
+     * Returns true when the text field has been interacted with. Native
+     * validation errors only display in response to user interactions.
+     */
+    this.dirty = false;
+    this.focused = false;
+    /**
+     * Whether or not a native error has been reported via `reportValidity()`.
+     */
+    this.nativeError = false;
+    /**
+     * The validation message displayed from a native error via
+     * `reportValidity()`.
+     */
+    this.nativeErrorText = '';
+  }
+  /**
+   * Gets or sets the direction in which selection occurred.
+   */
+  get selectionDirection() {
+    return this.getInputOrTextarea().selectionDirection;
+  }
+  set selectionDirection(value) {
+    this.getInputOrTextarea().selectionDirection = value;
+  }
+  /**
+   * Gets or sets the end position or offset of a text selection.
+   */
+  get selectionEnd() {
+    return this.getInputOrTextarea().selectionEnd;
+  }
+  set selectionEnd(value) {
+    this.getInputOrTextarea().selectionEnd = value;
+  }
+  /**
+   * Gets or sets the starting position or offset of a text selection.
+   */
+  get selectionStart() {
+    return this.getInputOrTextarea().selectionStart;
+  }
+  set selectionStart(value) {
+    this.getInputOrTextarea().selectionStart = value;
+  }
+  /**
+   * The text field's value as a number.
+   */
+  get valueAsNumber() {
+    const input = this.getInput();
+    if (!input) {
+      return NaN;
+    }
+    return input.valueAsNumber;
+  }
+  set valueAsNumber(value) {
+    const input = this.getInput();
+    if (!input) {
+      return;
+    }
+    input.valueAsNumber = value;
+    this.value = input.value;
+  }
+  /**
+   * The text field's value as a Date.
+   */
+  get valueAsDate() {
+    const input = this.getInput();
+    if (!input) {
+      return null;
+    }
+    return input.valueAsDate;
+  }
+  set valueAsDate(value) {
+    const input = this.getInput();
+    if (!input) {
+      return;
+    }
+    input.valueAsDate = value;
+    this.value = input.value;
+  }
+  get hasError() {
+    return this.error || this.nativeError;
+  }
+  /**
+   * Selects all the text in the text field.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select
+   */
+  select() {
+    this.getInputOrTextarea().select();
+  }
+  setRangeText(...args) {
+    // Calling setRangeText with 1 vs 3-4 arguments has different behavior.
+    // Use spread syntax and type casting to ensure correct usage.
+    this.getInputOrTextarea().setRangeText(...args);
+    this.value = this.getInputOrTextarea().value;
+  }
+  /**
+   * Sets the start and end positions of a selection in the text field.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
+   *
+   * @param start The offset into the text field for the start of the selection.
+   * @param end The offset into the text field for the end of the selection.
+   * @param direction The direction in which the selection is performed.
+   */
+  setSelectionRange(start, end, direction) {
+    this.getInputOrTextarea().setSelectionRange(start, end, direction);
+  }
+  /**
+   * Shows the browser picker for an input element of type "date", "time", etc.
+   *
+   * For a full list of supported types, see:
+   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker#browser_compatibility
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker
+   */
+  showPicker() {
+    const input = this.getInput();
+    if (!input) {
+      return;
+    }
+    input.showPicker();
+  }
+  /**
+   * Decrements the value of a numeric type text field by `step` or `n` `step`
+   * number of times.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown
+   *
+   * @param stepDecrement The number of steps to decrement, defaults to 1.
+   */
+  stepDown(stepDecrement) {
+    const input = this.getInput();
+    if (!input) {
+      return;
+    }
+    input.stepDown(stepDecrement);
+    this.value = input.value;
+  }
+  /**
+   * Increments the value of a numeric type text field by `step` or `n` `step`
+   * number of times.
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp
+   *
+   * @param stepIncrement The number of steps to increment, defaults to 1.
+   */
+  stepUp(stepIncrement) {
+    const input = this.getInput();
+    if (!input) {
+      return;
+    }
+    input.stepUp(stepIncrement);
+    this.value = input.value;
+  }
+  /**
+   * Reset the text field to its default value.
+   */
+  reset() {
+    this.dirty = false;
+    this.value = this.getAttribute('value') ?? '';
+    this.nativeError = false;
+    this.nativeErrorText = '';
+  }
+  attributeChangedCallback(attribute, newValue, oldValue) {
+    if (attribute === 'value' && this.dirty) {
+      // After user input, changing the value attribute no longer updates the
+      // text field's value (until reset). This matches native <input> behavior.
+      return;
+    }
+    super.attributeChangedCallback(attribute, newValue, oldValue);
+  }
+  render() {
+    const classes = {
+      'disabled': this.disabled,
+      'error': !this.disabled && this.hasError,
+      'textarea': this.type === 'textarea',
+      'no-spinner': this.noSpinner
+    };
+    return b`
+      <span class="text-field ${e$2(classes)}">
+        ${this.renderField()}
+      </span>
+    `;
+  }
+  updated(changedProperties) {
+    // Keep changedProperties arg so that subclasses may call it
+    // If a property such as `type` changes and causes the internal <input>
+    // value to change without dispatching an event, re-sync it.
+    const value = this.getInputOrTextarea().value;
+    if (this.value !== value) {
+      // Note this is typically inefficient in updated() since it schedules
+      // another update. However, it is needed for the <input> to fully render
+      // before checking its value.
+      this.value = value;
+    }
+  }
+  renderField() {
+    return u`<${this.fieldTag}
+      class="field"
+      count=${this.value.length}
+      ?disabled=${this.disabled}
+      ?error=${this.hasError}
+      error-text=${this.getErrorText()}
+      ?focused=${this.focused}
+      ?has-end=${this.hasTrailingIcon}
+      ?has-start=${this.hasLeadingIcon}
+      label=${this.label}
+      ?no-asterisk=${this.noAsterisk}
+      max=${this.maxLength}
+      ?populated=${!!this.value}
+      ?required=${this.required}
+      ?resizable=${this.type === 'textarea'}
+      supporting-text=${this.supportingText}
+    >
+      ${this.renderLeadingIcon()}
+      ${this.renderInputOrTextarea()}
+      ${this.renderTrailingIcon()}
+      <div id="description" slot="aria-describedby"></div>
+      <slot name="container" slot="container"></slot>
+    </${this.fieldTag}>`;
+  }
+  renderLeadingIcon() {
+    return b`
+      <span class="icon leading" slot="start">
+        <slot name="leading-icon" @slotchange=${this.handleIconChange}></slot>
+      </span>
+    `;
+  }
+  renderTrailingIcon() {
+    return b`
+      <span class="icon trailing" slot="end">
+        <slot name="trailing-icon" @slotchange=${this.handleIconChange}></slot>
+      </span>
+    `;
+  }
+  renderInputOrTextarea() {
+    const style = {
+      'direction': this.textDirection
+    };
+    const ariaLabel = this.ariaLabel || this.label || A;
+    // lit-anaylzer `autocomplete` types are too strict
+    // tslint:disable-next-line:no-any
+    const autocomplete = this.autocomplete;
+    // These properties may be set to null if the attribute is removed, and
+    // `null > -1` is incorrectly `true`.
+    const hasMaxLength = (this.maxLength ?? -1) > -1;
+    const hasMinLength = (this.minLength ?? -1) > -1;
+    if (this.type === 'textarea') {
+      return b`
+        <textarea
+          class="input"
+          style=${o$1(style)}
+          aria-describedby="description"
+          aria-invalid=${this.hasError}
+          aria-label=${ariaLabel}
+          autocomplete=${autocomplete || A}
+          name=${this.name || A}
+          ?disabled=${this.disabled}
+          maxlength=${hasMaxLength ? this.maxLength : A}
+          minlength=${hasMinLength ? this.minLength : A}
+          placeholder=${this.placeholder || A}
+          ?readonly=${this.readOnly}
+          ?required=${this.required}
+          rows=${this.rows}
+          cols=${this.cols}
+          .value=${l(this.value)}
+          @change=${this.redispatchEvent}
+          @focus=${this.handleFocusChange}
+          @blur=${this.handleFocusChange}
+          @input=${this.handleInput}
+          @select=${this.redispatchEvent}></textarea>
+      `;
+    }
+    const prefix = this.renderPrefix();
+    const suffix = this.renderSuffix();
+    // TODO(b/243805848): remove `as unknown as number` and `as any` once lit
+    // analyzer is fixed
+    // tslint:disable-next-line:no-any
+    const inputMode = this.inputMode;
+    return b`
+      <div class="input-wrapper">
+        ${prefix}
+        <input
+          class="input"
+          style=${o$1(style)}
+          aria-describedby="description"
+          aria-invalid=${this.hasError}
+          aria-label=${ariaLabel}
+          autocomplete=${autocomplete || A}
+          name=${this.name || A}
+          ?disabled=${this.disabled}
+          inputmode=${inputMode || A}
+          max=${this.max || A}
+          maxlength=${hasMaxLength ? this.maxLength : A}
+          min=${this.min || A}
+          minlength=${hasMinLength ? this.minLength : A}
+          pattern=${this.pattern || A}
+          placeholder=${this.placeholder || A}
+          ?readonly=${this.readOnly}
+          ?required=${this.required}
+          ?multiple=${this.multiple}
+          step=${this.step || A}
+          type=${this.type}
+          .value=${l(this.value)}
+          @change=${this.redispatchEvent}
+          @focus=${this.handleFocusChange}
+          @blur=${this.handleFocusChange}
+          @input=${this.handleInput}
+          @select=${this.redispatchEvent} />
+        ${suffix}
+      </div>
+    `;
+  }
+  renderPrefix() {
+    return this.renderAffix(this.prefixText, /* isSuffix */false);
+  }
+  renderSuffix() {
+    return this.renderAffix(this.suffixText, /* isSuffix */true);
+  }
+  renderAffix(text, isSuffix) {
+    if (!text) {
+      return A;
+    }
+    const classes = {
+      'suffix': isSuffix,
+      'prefix': !isSuffix
+    };
+    return b`<span class="${e$2(classes)}">${text}</span>`;
+  }
+  getErrorText() {
+    return this.error ? this.errorText : this.nativeErrorText;
+  }
+  handleFocusChange() {
+    var _this$inputOrTextarea;
+    // When calling focus() or reportValidity() during change, it's possible
+    // for blur to be called after the new focus event. Rather than set
+    // `this.focused` to true/false on focus/blur, we always set it to whether
+    // or not the input itself is focused.
+    this.focused = ((_this$inputOrTextarea = this.inputOrTextarea) === null || _this$inputOrTextarea === void 0 ? void 0 : _this$inputOrTextarea.matches(':focus')) ?? false;
+  }
+  handleInput(event) {
+    this.dirty = true;
+    this.value = event.target.value;
+  }
+  redispatchEvent(event) {
+    redispatchEvent(this, event);
+  }
+  getInputOrTextarea() {
+    if (!this.inputOrTextarea) {
+      // If the input is not yet defined, synchronously render.
+      // e.g.
+      // const textField = document.createElement('md-outlined-text-field');
+      // document.body.appendChild(textField);
+      // textField.focus(); // synchronously render
+      this.connectedCallback();
+      this.scheduleUpdate();
+    }
+    if (this.isUpdatePending) {
+      // If there are pending updates, synchronously perform them. This ensures
+      // that constraint validation properties (like `required`) are synced
+      // before interacting with input APIs that depend on them.
+      this.scheduleUpdate();
+    }
+    return this.inputOrTextarea;
+  }
+  getInput() {
+    if (this.type === 'textarea') {
+      return null;
+    }
+    return this.getInputOrTextarea();
+  }
+  handleIconChange() {
+    this.hasLeadingIcon = this.leadingIcons.length > 0;
+    this.hasTrailingIcon = this.trailingIcons.length > 0;
+  }
+  [getFormValue]() {
+    return this.value;
+  }
+  formResetCallback() {
+    this.reset();
+  }
+  formStateRestoreCallback(state) {
+    this.value = state;
+  }
+  focus() {
+    // Required for the case that the user slots a focusable element into the
+    // leading icon slot such as an iconbutton due to how delegatesFocus works.
+    this.getInputOrTextarea().focus();
+  }
+  [createValidator]() {
+    return new TextFieldValidator(() => ({
+      state: this,
+      renderedControl: this.inputOrTextarea
+    }));
+  }
+  [getValidityAnchor]() {
+    return this.inputOrTextarea;
+  }
+  [onReportValidity](invalidEvent) {
+    // Prevent default pop-up behavior.
+    invalidEvent === null || invalidEvent === void 0 || invalidEvent.preventDefault();
+    const prevMessage = this.getErrorText();
+    this.nativeError = !!invalidEvent;
+    this.nativeErrorText = this.validationMessage;
+    if (prevMessage === this.getErrorText()) {
+      var _this$field;
+      (_this$field = this.field) === null || _this$field === void 0 || _this$field.reannounceError();
+    }
+  }
+}
+/** @nocollapse */
+TextField.shadowRootOptions = {
+  ...i$2.shadowRootOptions,
+  delegatesFocus: true
+};
+__decorate([n({
+  type: Boolean,
+  reflect: true
+})], TextField.prototype, "error", void 0);
+__decorate([n({
+  attribute: 'error-text'
+})], TextField.prototype, "errorText", void 0);
+__decorate([n()], TextField.prototype, "label", void 0);
+__decorate([n({
+  type: Boolean,
+  attribute: 'no-asterisk'
+})], TextField.prototype, "noAsterisk", void 0);
+__decorate([n({
+  type: Boolean,
+  reflect: true
+})], TextField.prototype, "required", void 0);
+__decorate([n()], TextField.prototype, "value", void 0);
+__decorate([n({
+  attribute: 'prefix-text'
+})], TextField.prototype, "prefixText", void 0);
+__decorate([n({
+  attribute: 'suffix-text'
+})], TextField.prototype, "suffixText", void 0);
+__decorate([n({
+  type: Boolean,
+  attribute: 'has-leading-icon'
+})], TextField.prototype, "hasLeadingIcon", void 0);
+__decorate([n({
+  type: Boolean,
+  attribute: 'has-trailing-icon'
+})], TextField.prototype, "hasTrailingIcon", void 0);
+__decorate([n({
+  attribute: 'supporting-text'
+})], TextField.prototype, "supportingText", void 0);
+__decorate([n({
+  attribute: 'text-direction'
+})], TextField.prototype, "textDirection", void 0);
+__decorate([n({
+  type: Number
+})], TextField.prototype, "rows", void 0);
+__decorate([n({
+  type: Number
+})], TextField.prototype, "cols", void 0);
+__decorate([n({
+  reflect: true
+})], TextField.prototype, "inputMode", void 0);
+__decorate([n()], TextField.prototype, "max", void 0);
+__decorate([n({
+  type: Number
+})], TextField.prototype, "maxLength", void 0);
+__decorate([n()], TextField.prototype, "min", void 0);
+__decorate([n({
+  type: Number
+})], TextField.prototype, "minLength", void 0);
+__decorate([n({
+  type: Boolean,
+  attribute: 'no-spinner'
+})], TextField.prototype, "noSpinner", void 0);
+__decorate([n()], TextField.prototype, "pattern", void 0);
+__decorate([n({
+  reflect: true,
+  converter: stringConverter
+})], TextField.prototype, "placeholder", void 0);
+__decorate([n({
+  type: Boolean,
+  reflect: true
+})], TextField.prototype, "readOnly", void 0);
+__decorate([n({
+  type: Boolean,
+  reflect: true
+})], TextField.prototype, "multiple", void 0);
+__decorate([n()], TextField.prototype, "step", void 0);
+__decorate([n({
+  reflect: true
+})], TextField.prototype, "type", void 0);
+__decorate([n({
+  reflect: true
+})], TextField.prototype, "autocomplete", void 0);
+__decorate([r$1()], TextField.prototype, "dirty", void 0);
+__decorate([r$1()], TextField.prototype, "focused", void 0);
+__decorate([r$1()], TextField.prototype, "nativeError", void 0);
+__decorate([r$1()], TextField.prototype, "nativeErrorText", void 0);
+__decorate([e$1('.input')], TextField.prototype, "inputOrTextarea", void 0);
+__decorate([e$1('.field')], TextField.prototype, "field", void 0);
+__decorate([o({
+  slot: 'leading-icon'
+})], TextField.prototype, "leadingIcons", void 0);
+__decorate([o({
+  slot: 'trailing-icon'
+})], TextField.prototype, "trailingIcons", void 0);
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * An outlined text field component
+ */
+class OutlinedTextField extends TextField {
+  constructor() {
+    super(...arguments);
+    this.fieldTag = i$3`md-outlined-field`;
+  }
+}
+
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+// Generated stylesheet for ./textfield/internal/shared-styles.css.
+const styles = i`:host{display:inline-flex;outline:none;resize:both;text-align:start;-webkit-tap-highlight-color:rgba(0,0,0,0)}.text-field,.field{width:100%}.text-field{display:inline-flex}.field{cursor:text}.disabled .field{cursor:default}.text-field,.textarea .field{resize:inherit}slot[name=container]{border-radius:inherit}.icon{color:currentColor;display:flex;align-items:center;justify-content:center;fill:currentColor;position:relative}.icon ::slotted(*){display:flex;position:absolute}[has-start] .icon.leading{font-size:var(--_leading-icon-size);height:var(--_leading-icon-size);width:var(--_leading-icon-size)}[has-end] .icon.trailing{font-size:var(--_trailing-icon-size);height:var(--_trailing-icon-size);width:var(--_trailing-icon-size)}.input-wrapper{display:flex}.input-wrapper>*{all:inherit;padding:0}.input{caret-color:var(--_caret-color);overflow-x:hidden;text-align:inherit}.input::placeholder{color:currentColor;opacity:1}.input::-webkit-calendar-picker-indicator{display:none}.input::-webkit-search-decoration,.input::-webkit-search-cancel-button{display:none}@media(forced-colors: active){.input{background:none}}.no-spinner .input::-webkit-inner-spin-button,.no-spinner .input::-webkit-outer-spin-button{display:none}.no-spinner .input[type=number]{-moz-appearance:textfield}:focus-within .input{caret-color:var(--_focus-caret-color)}.error:focus-within .input{caret-color:var(--_error-focus-caret-color)}.text-field:not(.disabled) .prefix{color:var(--_input-text-prefix-color)}.text-field:not(.disabled) .suffix{color:var(--_input-text-suffix-color)}.text-field:not(.disabled) .input::placeholder{color:var(--_input-text-placeholder-color)}.prefix,.suffix{text-wrap:nowrap;width:min-content}.prefix{padding-inline-end:var(--_input-text-prefix-trailing-space)}.suffix{padding-inline-start:var(--_input-text-suffix-leading-space)}
+`;
+
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * TODO(b/228525797): Add docs
+ * @final
+ * @suppress {visibility}
+ */
+let MdOutlinedTextField = class MdOutlinedTextField extends OutlinedTextField {
+  constructor() {
+    super(...arguments);
+    this.fieldTag = i$3`md-outlined-field`;
+  }
+};
+MdOutlinedTextField.styles = [styles, styles$1];
+MdOutlinedTextField = __decorate([t$1('md-outlined-text-field')], MdOutlinedTextField);