@vonage/vivid 4.12.1 → 4.14.0

package/shared/text-field2.cjs

@@ -1,228 +1,573 @@
 'use strict';
 
-const index = require('./index.cjs');
 const applyMixins = require('./apply-mixins.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
+const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const formAssociated = require('./form-associated.cjs');
+const vividElement = require('./vivid-element.cjs');
+const definition = require('./definition27.cjs');
+const formElements = require('./form-elements.cjs');
 const ariaGlobal = require('./aria-global.cjs');
-const startEnd = require('./start-end.cjs');
+const affix = require('./affix.cjs');
 
-class _TextField extends index.FoundationElement {
+const byteToHex = [];
+for (let i = 0; i < 256; ++i) {
+    byteToHex.push((i + 0x100).toString(16).slice(1));
 }
-/**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(TextField:class)} component.
- *
- * @internal
- */
-class FormAssociatedTextField extends formAssociated.FormAssociated(_TextField) {
-    constructor() {
-        super(...arguments);
-        this.proxy = document.createElement("input");
+function unsafeStringify(arr, offset = 0) {
+    return (byteToHex[arr[offset + 0]] +
+        byteToHex[arr[offset + 1]] +
+        byteToHex[arr[offset + 2]] +
+        byteToHex[arr[offset + 3]] +
+        '-' +
+        byteToHex[arr[offset + 4]] +
+        byteToHex[arr[offset + 5]] +
+        '-' +
+        byteToHex[arr[offset + 6]] +
+        byteToHex[arr[offset + 7]] +
+        '-' +
+        byteToHex[arr[offset + 8]] +
+        byteToHex[arr[offset + 9]] +
+        '-' +
+        byteToHex[arr[offset + 10]] +
+        byteToHex[arr[offset + 11]] +
+        byteToHex[arr[offset + 12]] +
+        byteToHex[arr[offset + 13]] +
+        byteToHex[arr[offset + 14]] +
+        byteToHex[arr[offset + 15]]).toLowerCase();
+}
+
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+    if (!getRandomValues) {
+        if (typeof crypto === 'undefined' || !crypto.getRandomValues) {
+            throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+        }
+        getRandomValues = crypto.getRandomValues.bind(crypto);
+    }
+    return getRandomValues(rnds8);
+}
+
+const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+const native = { randomUUID };
+
+function v4(options, buf, offset) {
+    if (native.randomUUID && !buf && !options) {
+        return native.randomUUID();
     }
+    options = options || {};
+    const rnds = options.random || (options.rng || rng)();
+    rnds[6] = (rnds[6] & 0x0f) | 0x40;
+    rnds[8] = (rnds[8] & 0x3f) | 0x80;
+    return unsafeStringify(rnds);
 }
 
-/**
- * Text field sub-types
- * @public
- */
+const generateRandomId = () => v4();
+
+class Reflector {
+  #reflectedProperties = /* @__PURE__ */ new Map();
+  #source;
+  #target;
+  constructor(source, target) {
+    this.#source = source;
+    this.#target = target;
+  }
+  attribute(propertyName, attributeName) {
+    this.#addReflectedProperty(propertyName, {
+      type: "attribute",
+      destination: attributeName
+    });
+  }
+  booleanAttribute(propertyName, attributeName) {
+    this.#addReflectedProperty(propertyName, {
+      type: "boolean-attribute",
+      destination: attributeName
+    });
+  }
+  property(propertyName, targetProperty, skipIfEqual = false) {
+    this.#addReflectedProperty(propertyName, {
+      type: "property",
+      destination: targetProperty,
+      skipIfEqual
+    });
+  }
+  destroy() {
+    const notifier = defineVividComponent.Observable.getNotifier(this.#source);
+    for (const prop of this.#reflectedProperties.keys()) {
+      notifier.unsubscribe(this.#propertyChangeHandler, prop);
+    }
+    this.#reflectedProperties.clear();
+  }
+  #addReflectedProperty(name, reflected) {
+    this.#reflectedProperties.set(name, reflected);
+    const notifier = defineVividComponent.Observable.getNotifier(this.#source);
+    notifier.subscribe(this.#propertyChangeHandler, name);
+    this.#propertyChangeHandler.handleChange(this.#source, name);
+  }
+  #propertyChangeHandler = {
+    handleChange: (source, propertyName) => {
+      const reflectedProperty = this.#reflectedProperties.get(propertyName);
+      const value = source[propertyName];
+      switch (reflectedProperty.type) {
+        case "boolean-attribute":
+          defineVividComponent.DOM.setBooleanAttribute(
+            this.#target,
+            reflectedProperty.destination,
+            Boolean(value)
+          );
+          break;
+        case "attribute":
+          defineVividComponent.DOM.setAttribute(this.#target, reflectedProperty.destination, value);
+          break;
+        case "property":
+          if (reflectedProperty.skipIfEqual && this.#target[reflectedProperty.destination] === value) {
+            return;
+          }
+          this.#target[reflectedProperty.destination] = value;
+          break;
+      }
+    }
+  };
+}
+
+class _TextField extends vividElement.VividElement {
+}
+class FormAssociatedTextField extends formAssociated.FormAssociated(_TextField) {
+  constructor() {
+    super(...arguments);
+    this.proxy = document.createElement("input");
+  }
+}
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _TextField_instances, handleLabelChange_fn, _reflectToInput, _helperTextMirrorEl, _helperTextSlotMutationObserver, updateHelperTextMutationObserver_fn, updateMirroredHelperText_fn;
 const TextFieldType = {
+  /**
+   * An email TextField
+   */
+  email: "email",
+  /**
+   * A password TextField
+   */
+  password: "password",
+  /**
+   * A telephone TextField
+   */
+  tel: "tel",
+  /**
+   * A text TextField
+   */
+  text: "text",
+  /**
+   * A URL TextField
+   */
+  url: "url"
+};
+const safariWorkaroundClassName = "_vvd-3-text-field-safari-workaround";
+const getSafariWorkaroundStyleSheet = definition.memoizeWith(
+  () => "",
+  () => {
+    const styleSheet = new CSSStyleSheet();
+    const supportsReplaceSync = "replaceSync" in styleSheet;
+    if (supportsReplaceSync) {
+      styleSheet.replaceSync(`
+.${safariWorkaroundClassName}::placeholder {
+	opacity: 1 !important;
+	-webkit-text-fill-color: var(--_low-ink-color) !important;
+}`);
+    }
+    return styleSheet;
+  }
+);
+const installSafariWorkaroundStyle = (forElement) => {
+  const root = forElement.getRootNode();
+  const workaroundStyleSheet = getSafariWorkaroundStyleSheet();
+  const supportsAdoptedStyleSheets = "adoptedStyleSheets" in root;
+  if (!supportsAdoptedStyleSheets) {
+    return;
+  }
+  if (!root.adoptedStyleSheets.includes(workaroundStyleSheet)) {
+    root.adoptedStyleSheets = [
+      ...root.adoptedStyleSheets,
+      workaroundStyleSheet
+    ];
+  }
+};
+exports.TextField = class TextField extends FormAssociatedTextField {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _TextField_instances);
+    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    this.type = TextFieldType.text;
     /**
-     * An email TextField
-     */
-    email: "email",
-    /**
-     * A password TextField
-     */
-    password: "password",
-    /**
-     * A telephone TextField
-     */
-    tel: "tel",
-    /**
-     * A text TextField
-     */
-    text: "text",
-    /**
-     * A URL TextField
+     * @internal
      */
-    url: "url",
-};
-
-/**
- * A Text Field Custom HTML Element.
- * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text | <input type="text" /> element }.
- *
- * @slot start - Content which can be provided before the number field input
- * @slot end - Content which can be provided after the number field input
- * @slot - The default slot for the label
- * @csspart label - The label
- * @csspart root - The element wrapping the control, including start and end slots
- * @csspart control - The text field element
- * @fires change - Fires a custom 'change' event when the value has changed
- *
- * @public
- */
-let TextField$1 = class TextField extends FormAssociatedTextField {
-    constructor() {
-        super(...arguments);
-        /**
-         * Allows setting a type or mode of text.
-         * @public
-         * @remarks
-         * HTML Attribute: type
-         */
-        this.type = TextFieldType.text;
-    }
-    readOnlyChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.readOnly = this.readOnly;
-            this.validate();
-        }
+    this._labelEl = null;
+    __privateAdd(this, _reflectToInput);
+    __privateAdd(this, _helperTextMirrorEl);
+    __privateAdd(this, _helperTextSlotMutationObserver);
+  }
+  /**
+   * @internal
+   */
+  readOnlyChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.readOnly = this.readOnly;
+      this.validate();
     }
-    autofocusChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.autofocus = this.autofocus;
-            this.validate();
-        }
+  }
+  /**
+   * @internal
+   */
+  autofocusChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.autofocus = this.autofocus;
+      this.validate();
     }
-    placeholderChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.placeholder = this.placeholder;
-        }
+  }
+  /**
+   * @internal
+   */
+  placeholderChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.placeholder = this.placeholder;
     }
-    typeChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.type = this.type;
-            this.validate();
-        }
+  }
+  /**
+   * @internal
+   */
+  typeChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.type = this.type;
+      this.validate();
     }
-    listChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.setAttribute("list", this.list);
-            this.validate();
-        }
+  }
+  /**
+   * @internal
+   */
+  listChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.setAttribute("list", this.list);
+      this.validate();
     }
-    maxlengthChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.maxLength = this.maxlength;
-            this.validate();
-        }
+  }
+  /**
+   * @internal
+   */
+  maxlengthChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.maxLength = this.maxlength;
+      this.validate();
     }
-    minlengthChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.minLength = this.minlength;
-            this.validate();
-        }
+  }
+  /**
+   * @internal
+   */
+  minlengthChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.minLength = this.minlength;
+      this.validate();
     }
-    patternChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.pattern = this.pattern;
-            this.validate();
-        }
+  }
+  /**
+   * @internal
+   */
+  patternChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.pattern = this.pattern;
+      this.validate();
     }
-    sizeChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.size = this.size;
-        }
+  }
+  /**
+   * @internal
+   */
+  sizeChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.size = this.size;
     }
-    spellcheckChanged() {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.spellcheck = this.spellcheck;
-        }
+  }
+  /**
+   * @internal
+   */
+  spellcheckChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.spellcheck = this.spellcheck;
     }
-    /**
-     * @internal
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        this.proxy.setAttribute("type", this.type);
-        this.validate();
-        if (this.autofocus) {
-            index.DOM.queueUpdate(() => {
-                this.focus();
-            });
-        }
+  }
+  /**
+   * Selects all the text in the text field
+   *
+   * @public
+   */
+  select() {
+    this.control.select();
+  }
+  /**
+   * Handles the internal control's `input` event
+   * @internal
+   */
+  handleTextInput() {
+    this.value = this.control.value;
+  }
+  /**
+   * Change event handler for inner control.
+   * @remarks
+   * "Change" events are not `composable` so they will not
+   * permeate the shadow DOM boundary. This fn effectively proxies
+   * the change event, emitting a `change` event whenever the internal
+   * control emits a `change` event
+   * @internal
+   */
+  handleChange() {
+    this.$emit("change");
+  }
+  /** {@inheritDoc (FormAssociated:interface).validate} */
+  validate() {
+    super.validate(this.control);
+  }
+  /**
+   * @internal
+   */
+  labelChanged() {
+    if (this._labelEl) {
+      __privateMethod(this, _TextField_instances, handleLabelChange_fn).call(this, this._labelEl);
     }
-    /**
-     * Selects all the text in the text field
-     *
-     * @public
-     */
-    select() {
-        this.control.select();
-        /**
-         * The select event does not permeate the shadow DOM boundary.
-         * This fn effectively proxies the select event,
-         * emitting a `select` event whenever the internal
-         * control emits a `select` event
-         */
-        this.$emit("select");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.proxy.setAttribute("type", this.type);
+    this.validate();
+    if (this.autofocus) {
+      defineVividComponent.DOM.queueUpdate(() => {
+        this.focus();
+      });
     }
-    /**
-     * Handles the internal control's `input` event
-     * @internal
-     */
-    handleTextInput() {
-        this.value = this.control.value;
+    if (!this.control) {
+      const uniqueId = this.id || generateRandomId();
+      const controlId = `vvd-text-field-control-${uniqueId}`;
+      const helperTextId = `vvd-text-field-helper-text-${uniqueId}`;
+      const input = document.createElement("input");
+      input.slot = "_control";
+      input.id = controlId;
+      input.className = safariWorkaroundClassName;
+      this.control = input;
+      input.addEventListener("input", () => {
+        this.handleTextInput();
+      });
+      input.addEventListener("change", () => {
+        this.handleChange();
+      });
+      input.addEventListener("blur", () => {
+        this.$emit("blur", void 0, { bubbles: false });
+      });
+      input.addEventListener("focus", () => {
+        this.$emit("focus", void 0, { bubbles: false });
+      });
+      this.appendChild(input);
+      const label = document.createElement("label");
+      label.slot = "_label";
+      label.htmlFor = controlId;
+      this._labelEl = label;
+      __privateMethod(this, _TextField_instances, handleLabelChange_fn).call(this, label);
+      __privateSet(this, _helperTextMirrorEl, document.createElement("div"));
+      __privateGet(this, _helperTextMirrorEl).id = helperTextId;
+      __privateGet(this, _helperTextMirrorEl).slot = "_mirrored-helper-text";
+      __privateMethod(this, _TextField_instances, updateMirroredHelperText_fn).call(this);
+      this.appendChild(__privateGet(this, _helperTextMirrorEl));
+      installSafariWorkaroundStyle(this);
     }
-    /**
-     * Change event handler for inner control.
-     * @remarks
-     * "Change" events are not `composable` so they will not
-     * permeate the shadow DOM boundary. This fn effectively proxies
-     * the change event, emitting a `change` event whenever the internal
-     * control emits a `change` event
-     * @internal
-     */
-    handleChange() {
-        this.$emit("change");
+    __privateSet(this, _reflectToInput, new Reflector(this, this.control));
+    __privateGet(this, _reflectToInput).booleanAttribute("autofocus", "autofocus");
+    __privateGet(this, _reflectToInput).booleanAttribute("disabled", "disabled");
+    __privateGet(this, _reflectToInput).booleanAttribute("readOnly", "readonly");
+    __privateGet(this, _reflectToInput).booleanAttribute("required", "required");
+    __privateGet(this, _reflectToInput).booleanAttribute("spellcheck", "spellcheck");
+    __privateGet(this, _reflectToInput).attribute("list", "list");
+    __privateGet(this, _reflectToInput).attribute("maxlength", "maxlength");
+    __privateGet(this, _reflectToInput).attribute("minlength", "minlength");
+    __privateGet(this, _reflectToInput).attribute("pattern", "pattern");
+    __privateGet(this, _reflectToInput).attribute("placeholder", "placeholder");
+    __privateGet(this, _reflectToInput).attribute("size", "size");
+    __privateGet(this, _reflectToInput).attribute("autoComplete", "autocomplete");
+    __privateGet(this, _reflectToInput).attribute("type", "type");
+    __privateGet(this, _reflectToInput).attribute("inputMode", "inputmode");
+    __privateGet(this, _reflectToInput).attribute("ariaAtomic", "aria-atomic");
+    __privateGet(this, _reflectToInput).attribute("ariaBusy", "aria-busy");
+    __privateGet(this, _reflectToInput).attribute("ariaCurrent", "aria-current");
+    __privateGet(this, _reflectToInput).attribute("ariaDetails", "aria-details");
+    __privateGet(this, _reflectToInput).attribute("ariaDisabled", "aria-disabled");
+    __privateGet(this, _reflectToInput).attribute("ariaHaspopup", "aria-haspopup");
+    __privateGet(this, _reflectToInput).attribute("ariaHidden", "aria-hidden");
+    __privateGet(this, _reflectToInput).attribute("ariaInvalid", "aria-invalid");
+    __privateGet(this, _reflectToInput).attribute("ariaKeyshortcuts", "aria-keyshortcuts");
+    __privateGet(this, _reflectToInput).attribute("ariaLabel", "aria-label");
+    __privateGet(this, _reflectToInput).attribute("ariaLive", "aria-live");
+    __privateGet(this, _reflectToInput).attribute("ariaRelevant", "aria-relevant");
+    __privateGet(this, _reflectToInput).attribute(
+      "ariaRoledescription",
+      "aria-roledescription"
+    );
+    __privateGet(this, _reflectToInput).property("value", "value", true);
+    __privateMethod(this, _TextField_instances, updateHelperTextMutationObserver_fn).call(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateGet(this, _reflectToInput).destroy();
+    __privateSet(this, _reflectToInput, void 0);
+    __privateMethod(this, _TextField_instances, updateHelperTextMutationObserver_fn).call(this);
+  }
+  focus() {
+    this.control?.focus();
+  }
+  /**
+   * @internal
+   */
+  helperTextChanged() {
+    __privateMethod(this, _TextField_instances, updateMirroredHelperText_fn).call(this);
+  }
+  /**
+   * @internal
+   */
+  _helperTextSlottedContentChanged() {
+    __privateMethod(this, _TextField_instances, updateMirroredHelperText_fn).call(this);
+    __privateMethod(this, _TextField_instances, updateHelperTextMutationObserver_fn).call(this);
+  }
+};
+_TextField_instances = new WeakSet();
+handleLabelChange_fn = function(labelEl) {
+  if (!this.label) {
+    labelEl.remove();
+  } else {
+    labelEl.textContent = this.label;
+    if (!labelEl.isConnected) {
+      this.appendChild(labelEl);
     }
-    /** {@inheritDoc (FormAssociated:interface).validate} */
-    validate() {
-        super.validate(this.control);
+  }
+};
+_reflectToInput = new WeakMap();
+_helperTextMirrorEl = new WeakMap();
+_helperTextSlotMutationObserver = new WeakMap();
+updateHelperTextMutationObserver_fn = function() {
+  const usesHelperTextSlot = this._helperTextSlottedContent.length;
+  const shouldHaveMutationObserver = usesHelperTextSlot && this.isConnected;
+  if (shouldHaveMutationObserver && !__privateGet(this, _helperTextSlotMutationObserver)) {
+    __privateSet(this, _helperTextSlotMutationObserver, new MutationObserver((records) => {
+      if (records.some((record) => record.target !== __privateGet(this, _helperTextMirrorEl))) {
+        __privateMethod(this, _TextField_instances, updateMirroredHelperText_fn).call(this);
+      }
+    }));
+    __privateGet(this, _helperTextSlotMutationObserver).observe(this, {
+      subtree: true,
+      childList: true,
+      characterData: true
+    });
+  }
+  if (!shouldHaveMutationObserver && __privateGet(this, _helperTextSlotMutationObserver)) {
+    __privateGet(this, _helperTextSlotMutationObserver).disconnect();
+    __privateSet(this, _helperTextSlotMutationObserver, void 0);
+  }
+};
+updateMirroredHelperText_fn = function() {
+  let helperText = this.helperText ?? "";
+  if (this._helperTextSlottedContent?.length) {
+    helperText = this._helperTextSlottedContent.map((node) => node.innerText).join(" ");
+  }
+  if (__privateGet(this, _helperTextMirrorEl)) {
+    __privateGet(this, _helperTextMirrorEl).textContent = helperText;
+    if (helperText) {
+      this.control.setAttribute(
+        "aria-describedby",
+        __privateGet(this, _helperTextMirrorEl).id
+      );
+    } else {
+      this.control.removeAttribute("aria-describedby");
     }
+  }
 };
-index.__decorate([
-    index.attr({ attribute: "readonly", mode: "boolean" })
-], TextField$1.prototype, "readOnly", void 0);
-index.__decorate([
-    index.attr({ mode: "boolean" })
-], TextField$1.prototype, "autofocus", void 0);
-index.__decorate([
-    index.attr
-], TextField$1.prototype, "placeholder", void 0);
-index.__decorate([
-    index.attr
-], TextField$1.prototype, "type", void 0);
-index.__decorate([
-    index.attr
-], TextField$1.prototype, "list", void 0);
-index.__decorate([
-    index.attr({ converter: index.nullableNumberConverter })
-], TextField$1.prototype, "maxlength", void 0);
-index.__decorate([
-    index.attr({ converter: index.nullableNumberConverter })
-], TextField$1.prototype, "minlength", void 0);
-index.__decorate([
-    index.attr
-], TextField$1.prototype, "pattern", void 0);
-index.__decorate([
-    index.attr({ converter: index.nullableNumberConverter })
-], TextField$1.prototype, "size", void 0);
-index.__decorate([
-    index.attr({ mode: "boolean" })
-], TextField$1.prototype, "spellcheck", void 0);
-index.__decorate([
-    index.observable
-], TextField$1.prototype, "defaultSlottedNodes", void 0);
-/**
- * Includes ARIA states and properties relating to the ARIA textbox role
- *
- * @public
- */
+__decorateClass([
+  defineVividComponent.attr({ attribute: "readonly", mode: "boolean" })
+], exports.TextField.prototype, "readOnly", 2);
+__decorateClass([
+  defineVividComponent.attr({ mode: "boolean" })
+], exports.TextField.prototype, "autofocus", 2);
+__decorateClass([
+  defineVividComponent.attr
+], exports.TextField.prototype, "placeholder", 2);
+__decorateClass([
+  defineVividComponent.attr
+], exports.TextField.prototype, "type", 2);
+__decorateClass([
+  defineVividComponent.attr
+], exports.TextField.prototype, "list", 2);
+__decorateClass([
+  defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
+], exports.TextField.prototype, "maxlength", 2);
+__decorateClass([
+  defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
+], exports.TextField.prototype, "minlength", 2);
+__decorateClass([
+  defineVividComponent.attr
+], exports.TextField.prototype, "pattern", 2);
+__decorateClass([
+  defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
+], exports.TextField.prototype, "size", 2);
+__decorateClass([
+  defineVividComponent.attr({ mode: "boolean" })
+], exports.TextField.prototype, "spellcheck", 2);
+__decorateClass([
+  defineVividComponent.attr
+], exports.TextField.prototype, "appearance", 2);
+__decorateClass([
+  defineVividComponent.attr
+], exports.TextField.prototype, "shape", 2);
+__decorateClass([
+  defineVividComponent.attr
+], exports.TextField.prototype, "autoComplete", 2);
+__decorateClass([
+  defineVividComponent.attr()
+], exports.TextField.prototype, "scale", 2);
+__decorateClass([
+  defineVividComponent.attr({ attribute: "inputmode" })
+], exports.TextField.prototype, "inputMode", 2);
+__decorateClass([
+  defineVividComponent.observable
+], exports.TextField.prototype, "actionItemsSlottedContent", 2);
+__decorateClass([
+  defineVividComponent.observable
+], exports.TextField.prototype, "leadingActionItemsSlottedContent", 2);
+exports.TextField = __decorateClass([
+  formElements.errorText,
+  formElements.formElements
+], exports.TextField);
 class DelegatesARIATextbox {
 }
 applyMixins.applyMixins(DelegatesARIATextbox, ariaGlobal.ARIAGlobalStatesAndProperties);
-applyMixins.applyMixins(TextField$1, startEnd.StartEnd, DelegatesARIATextbox);
+applyMixinsWithObservables.applyMixinsWithObservables(
+  exports.TextField,
+  affix.AffixIcon,
+  formElements.FormElementCharCount,
+  formElements.FormElementHelperText,
+  formElements.FormElementSuccessText,
+  DelegatesARIATextbox
+);
 
 exports.DelegatesARIATextbox = DelegatesARIATextbox;
-exports.TextField = TextField$1;
+exports.Reflector = Reflector;