@covalent/components 6.0.1 → 6.0.3

package/textfield2.mjs

@@ -1,5 +1,932 @@
-const e = `:host{--mdc-text-field-label-ink-color: var(--mdc-theme-text-secondary-on-background);--mdc-text-field-ink-color: var(--mdc-theme-text-secondary-on-background);--mdc-text-field-fill-color: var(--mdc-theme-surface-canvas);--mdc-text-field-idle-line-color: var(--mdc-theme-border);--mdc-text-field-hover-line-color: var(--mdc-theme-text-icon-on-background);--mdc-text-field-outlined-idle-border-color: var(--mdc-theme-border);--mdc-text-field-outlined-hover-border-color: var(--mdc-theme-text-icon-on-background)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon{color:var(--mdc-theme-text-icon-on-background)}
+import { _ as H, a as C, c as b, b as a } from "./tslib.es6.mjs";
+import { f as $, l as w } from "./mwc-line-ripple-directive.mjs";
+import { F as B } from "./form-element.mjs";
+import { o as E } from "./observer.mjs";
+import { x, b as U, y as c } from "./query-assigned-elements.mjs";
+import { e as l } from "./property.mjs";
+import { t as I } from "./state.mjs";
+import { e as _ } from "./event-options.mjs";
+import { i as y } from "./query.mjs";
+import { e as T, i as M, t as v, o as L } from "./class-map.mjs";
+import { l as u } from "./if-defined.mjs";
+import { e as k, s as S } from "./directive-helpers.mjs";
+import { a as D } from "./utils.mjs";
+/**
+ * @license
+ * Copyright 2016 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+var j = (
+  /** @class */
+  function() {
+    function s(e) {
+      e === void 0 && (e = {}), this.adapter = e;
+    }
+    return Object.defineProperty(s, "cssClasses", {
+      get: function() {
+        return {};
+      },
+      enumerable: !1,
+      configurable: !0
+    }), Object.defineProperty(s, "strings", {
+      get: function() {
+        return {};
+      },
+      enumerable: !1,
+      configurable: !0
+    }), Object.defineProperty(s, "numbers", {
+      get: function() {
+        return {};
+      },
+      enumerable: !1,
+      configurable: !0
+    }), Object.defineProperty(s, "defaultAdapter", {
+      get: function() {
+        return {};
+      },
+      enumerable: !1,
+      configurable: !0
+    }), s.prototype.init = function() {
+    }, s.prototype.destroy = function() {
+    }, s;
+  }()
+);
+/**
+ * @license
+ * Copyright 2016 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+var F = {
+  ARIA_CONTROLS: "aria-controls",
+  ARIA_DESCRIBEDBY: "aria-describedby",
+  INPUT_SELECTOR: ".mdc-text-field__input",
+  LABEL_SELECTOR: ".mdc-floating-label",
+  LEADING_ICON_SELECTOR: ".mdc-text-field__icon--leading",
+  LINE_RIPPLE_SELECTOR: ".mdc-line-ripple",
+  OUTLINE_SELECTOR: ".mdc-notched-outline",
+  PREFIX_SELECTOR: ".mdc-text-field__affix--prefix",
+  SUFFIX_SELECTOR: ".mdc-text-field__affix--suffix",
+  TRAILING_ICON_SELECTOR: ".mdc-text-field__icon--trailing"
+}, P = {
+  DISABLED: "mdc-text-field--disabled",
+  FOCUSED: "mdc-text-field--focused",
+  HELPER_LINE: "mdc-text-field-helper-line",
+  INVALID: "mdc-text-field--invalid",
+  LABEL_FLOATING: "mdc-text-field--label-floating",
+  NO_LABEL: "mdc-text-field--no-label",
+  OUTLINED: "mdc-text-field--outlined",
+  ROOT: "mdc-text-field",
+  TEXTAREA: "mdc-text-field--textarea",
+  WITH_LEADING_ICON: "mdc-text-field--with-leading-icon",
+  WITH_TRAILING_ICON: "mdc-text-field--with-trailing-icon",
+  WITH_INTERNAL_COUNTER: "mdc-text-field--with-internal-counter"
+}, O = {
+  LABEL_SCALE: 0.75
+}, q = [
+  "pattern",
+  "min",
+  "max",
+  "required",
+  "step",
+  "minlength",
+  "maxlength"
+], z = [
+  "color",
+  "date",
+  "datetime-local",
+  "month",
+  "range",
+  "time",
+  "week"
+];
+/**
+ * @license
+ * Copyright 2016 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+var A = ["mousedown", "touchstart"], V = ["click", "keydown"], X = (
+  /** @class */
+  function(s) {
+    H(e, s);
+    function e(t, i) {
+      i === void 0 && (i = {});
+      var n = s.call(this, C(C({}, e.defaultAdapter), t)) || this;
+      return n.isFocused = !1, n.receivedUserInput = !1, n.valid = !0, n.useNativeValidation = !0, n.validateOnValueChange = !0, n.helperText = i.helperText, n.characterCounter = i.characterCounter, n.leadingIcon = i.leadingIcon, n.trailingIcon = i.trailingIcon, n.inputFocusHandler = function() {
+        n.activateFocus();
+      }, n.inputBlurHandler = function() {
+        n.deactivateFocus();
+      }, n.inputInputHandler = function() {
+        n.handleInput();
+      }, n.setPointerXOffset = function(o) {
+        n.setTransformOrigin(o);
+      }, n.textFieldInteractionHandler = function() {
+        n.handleTextFieldInteraction();
+      }, n.validationAttributeChangeHandler = function(o) {
+        n.handleValidationAttributeChange(o);
+      }, n;
+    }
+    return Object.defineProperty(e, "cssClasses", {
+      get: function() {
+        return P;
+      },
+      enumerable: !1,
+      configurable: !0
+    }), Object.defineProperty(e, "strings", {
+      get: function() {
+        return F;
+      },
+      enumerable: !1,
+      configurable: !0
+    }), Object.defineProperty(e, "numbers", {
+      get: function() {
+        return O;
+      },
+      enumerable: !1,
+      configurable: !0
+    }), Object.defineProperty(e.prototype, "shouldAlwaysFloat", {
+      get: function() {
+        var t = this.getNativeInput().type;
+        return z.indexOf(t) >= 0;
+      },
+      enumerable: !1,
+      configurable: !0
+    }), Object.defineProperty(e.prototype, "shouldFloat", {
+      get: function() {
+        return this.shouldAlwaysFloat || this.isFocused || !!this.getValue() || this.isBadInput();
+      },
+      enumerable: !1,
+      configurable: !0
+    }), Object.defineProperty(e.prototype, "shouldShake", {
+      get: function() {
+        return !this.isFocused && !this.isValid() && !!this.getValue();
+      },
+      enumerable: !1,
+      configurable: !0
+    }), Object.defineProperty(e, "defaultAdapter", {
+      /**
+       * See {@link MDCTextFieldAdapter} for typing information on parameters and
+       * return types.
+       */
+      get: function() {
+        return {
+          addClass: function() {
+          },
+          removeClass: function() {
+          },
+          hasClass: function() {
+            return !0;
+          },
+          setInputAttr: function() {
+          },
+          removeInputAttr: function() {
+          },
+          registerTextFieldInteractionHandler: function() {
+          },
+          deregisterTextFieldInteractionHandler: function() {
+          },
+          registerInputInteractionHandler: function() {
+          },
+          deregisterInputInteractionHandler: function() {
+          },
+          registerValidationAttributeChangeHandler: function() {
+            return new MutationObserver(function() {
+            });
+          },
+          deregisterValidationAttributeChangeHandler: function() {
+          },
+          getNativeInput: function() {
+            return null;
+          },
+          isFocused: function() {
+            return !1;
+          },
+          activateLineRipple: function() {
+          },
+          deactivateLineRipple: function() {
+          },
+          setLineRippleTransformOrigin: function() {
+          },
+          shakeLabel: function() {
+          },
+          floatLabel: function() {
+          },
+          setLabelRequired: function() {
+          },
+          hasLabel: function() {
+            return !1;
+          },
+          getLabelWidth: function() {
+            return 0;
+          },
+          hasOutline: function() {
+            return !1;
+          },
+          notchOutline: function() {
+          },
+          closeOutline: function() {
+          }
+        };
+      },
+      enumerable: !1,
+      configurable: !0
+    }), e.prototype.init = function() {
+      var t, i, n, o;
+      this.adapter.hasLabel() && this.getNativeInput().required && this.adapter.setLabelRequired(!0), this.adapter.isFocused() ? this.inputFocusHandler() : this.adapter.hasLabel() && this.shouldFloat && (this.notchOutline(!0), this.adapter.floatLabel(!0), this.styleFloating(!0)), this.adapter.registerInputInteractionHandler("focus", this.inputFocusHandler), this.adapter.registerInputInteractionHandler("blur", this.inputBlurHandler), this.adapter.registerInputInteractionHandler("input", this.inputInputHandler);
+      try {
+        for (var d = b(A), h = d.next(); !h.done; h = d.next()) {
+          var f = h.value;
+          this.adapter.registerInputInteractionHandler(f, this.setPointerXOffset);
+        }
+      } catch (g) {
+        t = { error: g };
+      } finally {
+        try {
+          h && !h.done && (i = d.return) && i.call(d);
+        } finally {
+          if (t)
+            throw t.error;
+        }
+      }
+      try {
+        for (var m = b(V), p = m.next(); !p.done; p = m.next()) {
+          var f = p.value;
+          this.adapter.registerTextFieldInteractionHandler(f, this.textFieldInteractionHandler);
+        }
+      } catch (g) {
+        n = { error: g };
+      } finally {
+        try {
+          p && !p.done && (o = m.return) && o.call(m);
+        } finally {
+          if (n)
+            throw n.error;
+        }
+      }
+      this.validationObserver = this.adapter.registerValidationAttributeChangeHandler(this.validationAttributeChangeHandler), this.setcharacterCounter(this.getValue().length);
+    }, e.prototype.destroy = function() {
+      var t, i, n, o;
+      this.adapter.deregisterInputInteractionHandler("focus", this.inputFocusHandler), this.adapter.deregisterInputInteractionHandler("blur", this.inputBlurHandler), this.adapter.deregisterInputInteractionHandler("input", this.inputInputHandler);
+      try {
+        for (var d = b(A), h = d.next(); !h.done; h = d.next()) {
+          var f = h.value;
+          this.adapter.deregisterInputInteractionHandler(f, this.setPointerXOffset);
+        }
+      } catch (g) {
+        t = { error: g };
+      } finally {
+        try {
+          h && !h.done && (i = d.return) && i.call(d);
+        } finally {
+          if (t)
+            throw t.error;
+        }
+      }
+      try {
+        for (var m = b(V), p = m.next(); !p.done; p = m.next()) {
+          var f = p.value;
+          this.adapter.deregisterTextFieldInteractionHandler(f, this.textFieldInteractionHandler);
+        }
+      } catch (g) {
+        n = { error: g };
+      } finally {
+        try {
+          p && !p.done && (o = m.return) && o.call(m);
+        } finally {
+          if (n)
+            throw n.error;
+        }
+      }
+      this.adapter.deregisterValidationAttributeChangeHandler(this.validationObserver);
+    }, e.prototype.handleTextFieldInteraction = function() {
+      var t = this.adapter.getNativeInput();
+      t && t.disabled || (this.receivedUserInput = !0);
+    }, e.prototype.handleValidationAttributeChange = function(t) {
+      var i = this;
+      t.some(function(n) {
+        return q.indexOf(n) > -1 ? (i.styleValidity(!0), i.adapter.setLabelRequired(i.getNativeInput().required), !0) : !1;
+      }), t.indexOf("maxlength") > -1 && this.setcharacterCounter(this.getValue().length);
+    }, e.prototype.notchOutline = function(t) {
+      if (!(!this.adapter.hasOutline() || !this.adapter.hasLabel()))
+        if (t) {
+          var i = this.adapter.getLabelWidth() * O.LABEL_SCALE;
+          this.adapter.notchOutline(i);
+        } else
+          this.adapter.closeOutline();
+    }, e.prototype.activateFocus = function() {
+      this.isFocused = !0, this.styleFocused(this.isFocused), this.adapter.activateLineRipple(), this.adapter.hasLabel() && (this.notchOutline(this.shouldFloat), this.adapter.floatLabel(this.shouldFloat), this.styleFloating(this.shouldFloat), this.adapter.shakeLabel(this.shouldShake)), this.helperText && (this.helperText.isPersistent() || !this.helperText.isValidation() || !this.valid) && this.helperText.showToScreenReader();
+    }, e.prototype.setTransformOrigin = function(t) {
+      if (!(this.isDisabled() || this.adapter.hasOutline())) {
+        var i = t.touches, n = i ? i[0] : t, o = n.target.getBoundingClientRect(), d = n.clientX - o.left;
+        this.adapter.setLineRippleTransformOrigin(d);
+      }
+    }, e.prototype.handleInput = function() {
+      this.autoCompleteFocus(), this.setcharacterCounter(this.getValue().length);
+    }, e.prototype.autoCompleteFocus = function() {
+      this.receivedUserInput || this.activateFocus();
+    }, e.prototype.deactivateFocus = function() {
+      this.isFocused = !1, this.adapter.deactivateLineRipple();
+      var t = this.isValid();
+      this.styleValidity(t), this.styleFocused(this.isFocused), this.adapter.hasLabel() && (this.notchOutline(this.shouldFloat), this.adapter.floatLabel(this.shouldFloat), this.styleFloating(this.shouldFloat), this.adapter.shakeLabel(this.shouldShake)), this.shouldFloat || (this.receivedUserInput = !1);
+    }, e.prototype.getValue = function() {
+      return this.getNativeInput().value;
+    }, e.prototype.setValue = function(t) {
+      if (this.getValue() !== t && (this.getNativeInput().value = t), this.setcharacterCounter(t.length), this.validateOnValueChange) {
+        var i = this.isValid();
+        this.styleValidity(i);
+      }
+      this.adapter.hasLabel() && (this.notchOutline(this.shouldFloat), this.adapter.floatLabel(this.shouldFloat), this.styleFloating(this.shouldFloat), this.validateOnValueChange && this.adapter.shakeLabel(this.shouldShake));
+    }, e.prototype.isValid = function() {
+      return this.useNativeValidation ? this.isNativeInputValid() : this.valid;
+    }, e.prototype.setValid = function(t) {
+      this.valid = t, this.styleValidity(t);
+      var i = !t && !this.isFocused && !!this.getValue();
+      this.adapter.hasLabel() && this.adapter.shakeLabel(i);
+    }, e.prototype.setValidateOnValueChange = function(t) {
+      this.validateOnValueChange = t;
+    }, e.prototype.getValidateOnValueChange = function() {
+      return this.validateOnValueChange;
+    }, e.prototype.setUseNativeValidation = function(t) {
+      this.useNativeValidation = t;
+    }, e.prototype.isDisabled = function() {
+      return this.getNativeInput().disabled;
+    }, e.prototype.setDisabled = function(t) {
+      this.getNativeInput().disabled = t, this.styleDisabled(t);
+    }, e.prototype.setHelperTextContent = function(t) {
+      this.helperText && this.helperText.setContent(t);
+    }, e.prototype.setLeadingIconAriaLabel = function(t) {
+      this.leadingIcon && this.leadingIcon.setAriaLabel(t);
+    }, e.prototype.setLeadingIconContent = function(t) {
+      this.leadingIcon && this.leadingIcon.setContent(t);
+    }, e.prototype.setTrailingIconAriaLabel = function(t) {
+      this.trailingIcon && this.trailingIcon.setAriaLabel(t);
+    }, e.prototype.setTrailingIconContent = function(t) {
+      this.trailingIcon && this.trailingIcon.setContent(t);
+    }, e.prototype.setcharacterCounter = function(t) {
+      if (this.characterCounter) {
+        var i = this.getNativeInput().maxLength;
+        if (i === -1)
+          throw new Error("MDCTextFieldFoundation: Expected maxlength html property on text input or textarea.");
+        this.characterCounter.setCounterValue(t, i);
+      }
+    }, e.prototype.isBadInput = function() {
+      return this.getNativeInput().validity.badInput || !1;
+    }, e.prototype.isNativeInputValid = function() {
+      return this.getNativeInput().validity.valid;
+    }, e.prototype.styleValidity = function(t) {
+      var i = e.cssClasses.INVALID;
+      if (t ? this.adapter.removeClass(i) : this.adapter.addClass(i), this.helperText) {
+        this.helperText.setValidity(t);
+        var n = this.helperText.isValidation();
+        if (!n)
+          return;
+        var o = this.helperText.isVisible(), d = this.helperText.getId();
+        o && d ? this.adapter.setInputAttr(F.ARIA_DESCRIBEDBY, d) : this.adapter.removeInputAttr(F.ARIA_DESCRIBEDBY);
+      }
+    }, e.prototype.styleFocused = function(t) {
+      var i = e.cssClasses.FOCUSED;
+      t ? this.adapter.addClass(i) : this.adapter.removeClass(i);
+    }, e.prototype.styleDisabled = function(t) {
+      var i = e.cssClasses, n = i.DISABLED, o = i.INVALID;
+      t ? (this.adapter.addClass(n), this.adapter.removeClass(o)) : this.adapter.removeClass(n), this.leadingIcon && this.leadingIcon.setDisabled(t), this.trailingIcon && this.trailingIcon.setDisabled(t);
+    }, e.prototype.styleFloating = function(t) {
+      var i = e.cssClasses.LABEL_FLOATING;
+      t ? this.adapter.addClass(i) : this.adapter.removeClass(i);
+    }, e.prototype.getNativeInput = function() {
+      var t = this.adapter ? this.adapter.getNativeInput() : null;
+      return t || {
+        disabled: !1,
+        maxLength: -1,
+        required: !1,
+        type: "input",
+        validity: {
+          badInput: !1,
+          valid: !0
+        },
+        value: ""
+      };
+    }, e;
+  }(j)
+);
+const G = X;
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const Y = T(class extends M {
+  constructor(s) {
+    if (super(s), s.type !== v.PROPERTY && s.type !== v.ATTRIBUTE && s.type !== v.BOOLEAN_ATTRIBUTE)
+      throw Error("The `live` directive is not allowed on child or event bindings");
+    if (!k(s))
+      throw Error("`live` bindings can only contain a single expression");
+  }
+  render(s) {
+    return s;
+  }
+  update(s, [e]) {
+    if (e === x || e === U)
+      return e;
+    const t = s.element, i = s.name;
+    if (s.type === v.PROPERTY) {
+      if (e === t[i])
+        return x;
+    } else if (s.type === v.BOOLEAN_ATTRIBUTE) {
+      if (!!e === t.hasAttribute(i))
+        return x;
+    } else if (s.type === v.ATTRIBUTE && t.getAttribute(i) === e + "")
+      return x;
+    return S(s), e;
+  }
+});
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+const W = ["touchstart", "touchmove", "scroll", "mousewheel"], R = (s = {}) => {
+  const e = {};
+  for (const t in s)
+    e[t] = s[t];
+  return Object.assign({ badInput: !1, customError: !1, patternMismatch: !1, rangeOverflow: !1, rangeUnderflow: !1, stepMismatch: !1, tooLong: !1, tooShort: !1, typeMismatch: !1, valid: !0, valueMissing: !1 }, e);
+};
+class r extends B {
+  constructor() {
+    super(...arguments), this.mdcFoundationClass = G, this.value = "", this.type = "text", this.placeholder = "", this.label = "", this.icon = "", this.iconTrailing = "", this.disabled = !1, this.required = !1, this.minLength = -1, this.maxLength = -1, this.outlined = !1, this.helper = "", this.validateOnInitialRender = !1, this.validationMessage = "", this.autoValidate = !1, this.pattern = "", this.min = "", this.max = "", this.step = null, this.size = null, this.helperPersistent = !1, this.charCounter = !1, this.endAligned = !1, this.prefix = "", this.suffix = "", this.name = "", this.readOnly = !1, this.autocapitalize = "", this.outlineOpen = !1, this.outlineWidth = 0, this.isUiValid = !0, this.focused = !1, this._validity = R(), this.validityTransform = null;
+  }
+  get validity() {
+    return this._checkValidity(this.value), this._validity;
+  }
+  get willValidate() {
+    return this.formElement.willValidate;
+  }
+  get selectionStart() {
+    return this.formElement.selectionStart;
+  }
+  get selectionEnd() {
+    return this.formElement.selectionEnd;
+  }
+  focus() {
+    const e = new CustomEvent("focus");
+    this.formElement.dispatchEvent(e), this.formElement.focus();
+  }
+  blur() {
+    const e = new CustomEvent("blur");
+    this.formElement.dispatchEvent(e), this.formElement.blur();
+  }
+  select() {
+    this.formElement.select();
+  }
+  setSelectionRange(e, t, i) {
+    this.formElement.setSelectionRange(e, t, i);
+  }
+  update(e) {
+    e.has("autoValidate") && this.mdcFoundation && this.mdcFoundation.setValidateOnValueChange(this.autoValidate), e.has("value") && typeof this.value != "string" && (this.value = `${this.value}`), super.update(e);
+  }
+  setFormData(e) {
+    this.name && e.append(this.name, this.value);
+  }
+  /** @soyTemplate */
+  render() {
+    const e = this.charCounter && this.maxLength !== -1, t = !!this.helper || !!this.validationMessage || e, i = {
+      "mdc-text-field--disabled": this.disabled,
+      "mdc-text-field--no-label": !this.label,
+      "mdc-text-field--filled": !this.outlined,
+      "mdc-text-field--outlined": this.outlined,
+      "mdc-text-field--with-leading-icon": this.icon,
+      "mdc-text-field--with-trailing-icon": this.iconTrailing,
+      "mdc-text-field--end-aligned": this.endAligned
+    };
+    return c`
+      <label class="mdc-text-field ${L(i)}">
+        ${this.renderRipple()}
+        ${this.outlined ? this.renderOutline() : this.renderLabel()}
+        ${this.renderLeadingIcon()}
+        ${this.renderPrefix()}
+        ${this.renderInput(t)}
+        ${this.renderSuffix()}
+        ${this.renderTrailingIcon()}
+        ${this.renderLineRipple()}
+      </label>
+      ${this.renderHelperText(t, e)}
+    `;
+  }
+  updated(e) {
+    e.has("value") && e.get("value") !== void 0 && (this.mdcFoundation.setValue(this.value), this.autoValidate && this.reportValidity());
+  }
+  /** @soyTemplate */
+  renderRipple() {
+    return this.outlined ? "" : c`
+      <span class="mdc-text-field__ripple"></span>
+    `;
+  }
+  /** @soyTemplate */
+  renderOutline() {
+    return this.outlined ? c`
+      <mwc-notched-outline
+          .width=${this.outlineWidth}
+          .open=${this.outlineOpen}
+          class="mdc-notched-outline">
+        ${this.renderLabel()}
+      </mwc-notched-outline>` : "";
+  }
+  /** @soyTemplate */
+  renderLabel() {
+    return this.label ? c`
+      <span
+          .floatingLabelFoundation=${$(this.label)}
+          id="label">${this.label}</span>
+    ` : "";
+  }
+  /** @soyTemplate */
+  renderLeadingIcon() {
+    return this.icon ? this.renderIcon(this.icon) : "";
+  }
+  /** @soyTemplate */
+  renderTrailingIcon() {
+    return this.iconTrailing ? this.renderIcon(this.iconTrailing, !0) : "";
+  }
+  /** @soyTemplate */
+  renderIcon(e, t = !1) {
+    return c`<i class="material-icons mdc-text-field__icon ${L({
+      "mdc-text-field__icon--leading": !t,
+      "mdc-text-field__icon--trailing": t
+    })}">${e}</i>`;
+  }
+  /** @soyTemplate */
+  renderPrefix() {
+    return this.prefix ? this.renderAffix(this.prefix) : "";
+  }
+  /** @soyTemplate */
+  renderSuffix() {
+    return this.suffix ? this.renderAffix(this.suffix, !0) : "";
+  }
+  /** @soyTemplate */
+  renderAffix(e, t = !1) {
+    return c`<span class="mdc-text-field__affix ${L({
+      "mdc-text-field__affix--prefix": !t,
+      "mdc-text-field__affix--suffix": t
+    })}">
+        ${e}</span>`;
+  }
+  /** @soyTemplate */
+  renderInput(e) {
+    const t = this.minLength === -1 ? void 0 : this.minLength, i = this.maxLength === -1 ? void 0 : this.maxLength, n = this.autocapitalize ? this.autocapitalize : void 0, o = this.validationMessage && !this.isUiValid, d = this.label ? "label" : void 0, h = e ? "helper-text" : void 0, f = this.focused || this.helperPersistent || o ? "helper-text" : void 0;
+    return c`
+      <input
+          aria-labelledby=${u(d)}
+          aria-controls="${u(h)}"
+          aria-describedby="${u(f)}"
+          class="mdc-text-field__input"
+          type="${this.type}"
+          .value="${Y(this.value)}"
+          ?disabled="${this.disabled}"
+          placeholder="${this.placeholder}"
+          ?required="${this.required}"
+          ?readonly="${this.readOnly}"
+          minlength="${u(t)}"
+          maxlength="${u(i)}"
+          pattern="${u(this.pattern ? this.pattern : void 0)}"
+          min="${u(this.min === "" ? void 0 : this.min)}"
+          max="${u(this.max === "" ? void 0 : this.max)}"
+          step="${u(this.step === null ? void 0 : this.step)}"
+          size="${u(this.size === null ? void 0 : this.size)}"
+          name="${u(this.name === "" ? void 0 : this.name)}"
+          inputmode="${u(this.inputMode)}"
+          autocapitalize="${u(n)}"
+          @input="${this.handleInputChange}"
+          @focus="${this.onInputFocus}"
+          @blur="${this.onInputBlur}">`;
+  }
+  /** @soyTemplate */
+  renderLineRipple() {
+    return this.outlined ? "" : c`
+      <span .lineRippleFoundation=${w()}></span>
+    `;
+  }
+  /** @soyTemplate */
+  renderHelperText(e, t) {
+    const i = this.validationMessage && !this.isUiValid, n = {
+      "mdc-text-field-helper-text--persistent": this.helperPersistent,
+      "mdc-text-field-helper-text--validation-msg": i
+    }, o = this.focused || this.helperPersistent || i ? void 0 : "true", d = i ? this.validationMessage : this.helper;
+    return e ? c`
+      <div class="mdc-text-field-helper-line">
+        <div id="helper-text"
+             aria-hidden="${u(o)}"
+             class="mdc-text-field-helper-text ${L(n)}"
+             >${d}</div>
+        ${this.renderCharCounter(t)}
+      </div>` : "";
+  }
+  /** @soyTemplate */
+  renderCharCounter(e) {
+    const t = Math.min(this.value.length, this.maxLength);
+    return e ? c`
+      <span class="mdc-text-field-character-counter"
+            >${t} / ${this.maxLength}</span>` : "";
+  }
+  onInputFocus() {
+    this.focused = !0;
+  }
+  onInputBlur() {
+    this.focused = !1, this.reportValidity();
+  }
+  checkValidity() {
+    const e = this._checkValidity(this.value);
+    if (!e) {
+      const t = new Event("invalid", { bubbles: !1, cancelable: !0 });
+      this.dispatchEvent(t);
+    }
+    return e;
+  }
+  reportValidity() {
+    const e = this.checkValidity();
+    return this.mdcFoundation.setValid(e), this.isUiValid = e, e;
+  }
+  _checkValidity(e) {
+    const t = this.formElement.validity;
+    let i = R(t);
+    if (this.validityTransform) {
+      const n = this.validityTransform(e, i);
+      i = Object.assign(Object.assign({}, i), n), this.mdcFoundation.setUseNativeValidation(!1);
+    } else
+      this.mdcFoundation.setUseNativeValidation(!0);
+    return this._validity = i, this._validity.valid;
+  }
+  setCustomValidity(e) {
+    this.validationMessage = e, this.formElement.setCustomValidity(e);
+  }
+  handleInputChange() {
+    this.value = this.formElement.value;
+  }
+  createAdapter() {
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getRootAdapterMethods()), this.getInputAdapterMethods()), this.getLabelAdapterMethods()), this.getLineRippleAdapterMethods()), this.getOutlineAdapterMethods());
+  }
+  getRootAdapterMethods() {
+    return Object.assign({ registerTextFieldInteractionHandler: (e, t) => this.addEventListener(e, t), deregisterTextFieldInteractionHandler: (e, t) => this.removeEventListener(e, t), registerValidationAttributeChangeHandler: (e) => {
+      const t = (o) => o.map((d) => d.attributeName).filter((d) => d), i = new MutationObserver((o) => {
+        e(t(o));
+      }), n = { attributes: !0 };
+      return i.observe(this.formElement, n), i;
+    }, deregisterValidationAttributeChangeHandler: (e) => e.disconnect() }, D(this.mdcRoot));
+  }
+  getInputAdapterMethods() {
+    return {
+      getNativeInput: () => this.formElement,
+      // since HelperTextFoundation is not used, aria-describedby a11y logic
+      // is implemented in render method instead of these adapter methods
+      setInputAttr: () => {
+      },
+      removeInputAttr: () => {
+      },
+      isFocused: () => this.shadowRoot ? this.shadowRoot.activeElement === this.formElement : !1,
+      registerInputInteractionHandler: (e, t) => this.formElement.addEventListener(e, t, { passive: e in W }),
+      deregisterInputInteractionHandler: (e, t) => this.formElement.removeEventListener(e, t)
+    };
+  }
+  getLabelAdapterMethods() {
+    return {
+      floatLabel: (e) => this.labelElement && this.labelElement.floatingLabelFoundation.float(e),
+      getLabelWidth: () => this.labelElement ? this.labelElement.floatingLabelFoundation.getWidth() : 0,
+      hasLabel: () => Boolean(this.labelElement),
+      shakeLabel: (e) => this.labelElement && this.labelElement.floatingLabelFoundation.shake(e),
+      setLabelRequired: (e) => {
+        this.labelElement && this.labelElement.floatingLabelFoundation.setRequired(e);
+      }
+    };
+  }
+  getLineRippleAdapterMethods() {
+    return {
+      activateLineRipple: () => {
+        this.lineRippleElement && this.lineRippleElement.lineRippleFoundation.activate();
+      },
+      deactivateLineRipple: () => {
+        this.lineRippleElement && this.lineRippleElement.lineRippleFoundation.deactivate();
+      },
+      setLineRippleTransformOrigin: (e) => {
+        this.lineRippleElement && this.lineRippleElement.lineRippleFoundation.setRippleCenter(e);
+      }
+    };
+  }
+  // tslint:disable:ban-ts-ignore
+  async getUpdateComplete() {
+    var e;
+    const t = await super.getUpdateComplete();
+    return await ((e = this.outlineElement) === null || e === void 0 ? void 0 : e.updateComplete), t;
+  }
+  // tslint:enable:ban-ts-ignore
+  firstUpdated() {
+    var e;
+    super.firstUpdated(), this.mdcFoundation.setValidateOnValueChange(this.autoValidate), this.validateOnInitialRender && this.reportValidity(), (e = this.outlineElement) === null || e === void 0 || e.updateComplete.then(() => {
+      var t;
+      this.outlineWidth = ((t = this.labelElement) === null || t === void 0 ? void 0 : t.floatingLabelFoundation.getWidth()) || 0;
+    });
+  }
+  getOutlineAdapterMethods() {
+    return {
+      closeOutline: () => this.outlineElement && (this.outlineOpen = !1),
+      hasOutline: () => Boolean(this.outlineElement),
+      notchOutline: (e) => {
+        this.outlineElement && !this.outlineOpen && (this.outlineWidth = e, this.outlineOpen = !0);
+      }
+    };
+  }
+  async layout() {
+    await this.updateComplete;
+    const e = this.labelElement;
+    if (!e) {
+      this.outlineOpen = !1;
+      return;
+    }
+    const t = !!this.label && !!this.value;
+    if (e.floatingLabelFoundation.float(t), !this.outlined)
+      return;
+    this.outlineOpen = t, await this.updateComplete;
+    const i = e.floatingLabelFoundation.getWidth();
+    this.outlineOpen && (this.outlineWidth = i, await this.updateComplete);
+  }
+}
+a([
+  y(".mdc-text-field")
+], r.prototype, "mdcRoot", void 0);
+a([
+  y("input")
+], r.prototype, "formElement", void 0);
+a([
+  y(".mdc-floating-label")
+], r.prototype, "labelElement", void 0);
+a([
+  y(".mdc-line-ripple")
+], r.prototype, "lineRippleElement", void 0);
+a([
+  y("mwc-notched-outline")
+], r.prototype, "outlineElement", void 0);
+a([
+  y(".mdc-notched-outline__notch")
+], r.prototype, "notchElement", void 0);
+a([
+  l({ type: String })
+], r.prototype, "value", void 0);
+a([
+  l({ type: String })
+], r.prototype, "type", void 0);
+a([
+  l({ type: String })
+], r.prototype, "placeholder", void 0);
+a([
+  l({ type: String }),
+  E(function(s, e) {
+    e !== void 0 && this.label !== e && this.layout();
+  })
+], r.prototype, "label", void 0);
+a([
+  l({ type: String })
+], r.prototype, "icon", void 0);
+a([
+  l({ type: String })
+], r.prototype, "iconTrailing", void 0);
+a([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", void 0);
+a([
+  l({ type: Boolean })
+], r.prototype, "required", void 0);
+a([
+  l({ type: Number })
+], r.prototype, "minLength", void 0);
+a([
+  l({ type: Number })
+], r.prototype, "maxLength", void 0);
+a([
+  l({ type: Boolean, reflect: !0 }),
+  E(function(s, e) {
+    e !== void 0 && this.outlined !== e && this.layout();
+  })
+], r.prototype, "outlined", void 0);
+a([
+  l({ type: String })
+], r.prototype, "helper", void 0);
+a([
+  l({ type: Boolean })
+], r.prototype, "validateOnInitialRender", void 0);
+a([
+  l({ type: String })
+], r.prototype, "validationMessage", void 0);
+a([
+  l({ type: Boolean })
+], r.prototype, "autoValidate", void 0);
+a([
+  l({ type: String })
+], r.prototype, "pattern", void 0);
+a([
+  l({ type: String })
+], r.prototype, "min", void 0);
+a([
+  l({ type: String })
+], r.prototype, "max", void 0);
+a([
+  l({ type: String })
+], r.prototype, "step", void 0);
+a([
+  l({ type: Number })
+], r.prototype, "size", void 0);
+a([
+  l({ type: Boolean })
+], r.prototype, "helperPersistent", void 0);
+a([
+  l({ type: Boolean })
+], r.prototype, "charCounter", void 0);
+a([
+  l({ type: Boolean })
+], r.prototype, "endAligned", void 0);
+a([
+  l({ type: String })
+], r.prototype, "prefix", void 0);
+a([
+  l({ type: String })
+], r.prototype, "suffix", void 0);
+a([
+  l({ type: String })
+], r.prototype, "name", void 0);
+a([
+  l({ type: String })
+], r.prototype, "inputMode", void 0);
+a([
+  l({ type: Boolean })
+], r.prototype, "readOnly", void 0);
+a([
+  l({ type: String })
+], r.prototype, "autocapitalize", void 0);
+a([
+  I()
+], r.prototype, "outlineOpen", void 0);
+a([
+  I()
+], r.prototype, "outlineWidth", void 0);
+a([
+  I()
+], r.prototype, "isUiValid", void 0);
+a([
+  I()
+], r.prototype, "focused", void 0);
+a([
+  _({ passive: !0 })
+], r.prototype, "handleInputChange", null);
+const oe = `:host{--mdc-text-field-label-ink-color: var(--mdc-theme-text-secondary-on-background);--mdc-text-field-ink-color: var(--mdc-theme-text-secondary-on-background);--mdc-text-field-fill-color: var(--mdc-theme-surface-canvas);--mdc-text-field-idle-line-color: var(--mdc-theme-border);--mdc-text-field-hover-line-color: var(--mdc-theme-text-icon-on-background);--mdc-text-field-outlined-idle-border-color: var(--mdc-theme-border);--mdc-text-field-outlined-hover-border-color: var(--mdc-theme-text-icon-on-background)}.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon{color:var(--mdc-theme-text-icon-on-background)}
 `;
 export {
-  e as s
+  r as T,
+  Y as l,
+  oe as s
 };