@watermarkinsights/ripple 3.27.0 → 3.27.1

package/dist/collection/components/wm-input/wm-input.js

@@ -1,509 +1,509 @@
-import { h, Host } from "@stencil/core";
-import { intl, generateId, isRelatedTarget } from "../../global/functions";
-import { globalMessages } from "../../global/intl";
-export class Input {
-  constructor() {
-    this.uid = "";
-    this.previousBlurredValue = "";
-    this.numberErrorMessage = intl.formatMessage({
-      id: "input.numberError",
-      defaultMessage: "Please enter a valid number.",
-    });
-    this.label = undefined;
-    this.labelPosition = "top";
-    this.value = "";
-    this.disabled = false;
-    this.info = undefined;
-    this.inputWidth = "";
-    this.placeholder = "";
-    this.requiredField = false;
-    this.requiredFieldMessage = undefined;
-    this.errorMessage = undefined;
-    this.characterLimit = undefined;
-    this.symbolBefore = undefined;
-    this.symbolAfter = undefined;
-    this.textAfter = undefined;
-    this.preventValidation = undefined;
-    this.type = "text";
-    this.step = 1;
-    this.min = undefined;
-    this.max = undefined;
-    this.announcement = "";
-    this.displayedErrorMessage = "";
-  }
-  getInputWidth() {
-    return this.inputWidth ? { width: this.inputWidth } : { flex: "1" };
-  }
-  get charCount() {
-    return this.value.length;
-  }
-  componentWillLoad() {
-    this.uid = this.el.id ? this.el.id : generateId();
-    if (!this.label) {
-      console.error("wm-input requires the label property");
-    }
-  }
-  componentDidLoad() {
-    if (this.value) {
-      this.inputEl.value = this.value;
-      this.previousBlurredValue = this.inputEl.value;
-    }
-  }
-  handleErrorMessage(newValue) {
-    this.displayedErrorMessage = newValue;
-  }
-  handleKeyDown(ev) {
-    // in most browsers, onInput doesn't fire if the input's maxLength is reached
-    // to handle the case where a user continues to type after reaching the character limit, the keyDown event must be used
-    const isModifierKey = ev.ctrlKey || ev.metaKey || ev.altKey;
-    const isCharacter = /^.$/.test(ev.key) && !isModifierKey;
-    const hasReachedCharacterLimit = isCharacter && this.characterLimit && this.inputEl.value.length >= this.characterLimit;
-    if (hasReachedCharacterLimit) {
-      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
-    }
-  }
-  handleBlur(ev) {
-    if (this.value !== this.previousBlurredValue) {
-      this.wmInputValueChanged.emit({ value: this.value });
-    }
-    this.previousBlurredValue = this.value;
-    // do not validate if clicking to an element that should prevent validation (e.g. close button on modal)
-    const shouldPreventValidation = this.preventValidation && isRelatedTarget(ev, this.preventValidation);
-    if (!shouldPreventValidation) {
-      this.displayedErrorMessage = this.validate();
-    }
-    this.inputWrapperEl.classList.remove("focus");
-  }
-  handleInput(ev) {
-    this.value = ev.target.value;
-    if (this.characterLimit && this.charCount >= this.characterLimit - 5) {
-      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
-    }
-  }
-  handleFocus() {
-    this.inputWrapperEl.classList.add("focus");
-  }
-  validate() {
-    // These rules are in priority order
-    // i.e. an input that is triggering both required and number errors will only show the number one but it's first
-    const validationRules = [this.validateNumber.bind(this), this.validateRequired.bind(this)];
-    if (this.errorMessage) {
-      return this.errorMessage;
-    }
-    else {
-      // sets newError to first rule that returns an error
-      return validationRules.reduce((prev, current) => (prev ? prev : current()), "");
-    }
-  }
-  validateRequired() {
-    const reqMsg = this.requiredFieldMessage || globalMessages.requiredError;
-    return this.requiredField && this.value === "" ? reqMsg : "";
-  }
-  validateNumber() {
-    return this.type === "number" && this.inputEl.validity.badInput ? this.numberErrorMessage : "";
-  }
-  announce(message) {
-    if (this.liveRegionEl.textContent === message) {
-      message += "\u00A0";
-    }
-    this.announcement = message;
-  }
-  generateCharacterLimitWarning(charCount, charLimit) {
-    let message = globalMessages.getCharactersEntered(charCount, charLimit);
-    if (charCount >= charLimit) {
-      message += ` ${globalMessages.characterLimitReached}`;
-    }
-    return message;
-  }
-  descriptors() {
-    // the input field value is announced to provide context to symbol-before, symbol-after and text-after. If none are present, it shouldn't be announced.
-    return this.symbolBefore || this.symbolAfter || this.textAfter
-      ? `symbol-before-${this.uid} inputfield-${this.uid} symbol-after-${this.uid} text-after-${this.uid} info-${this.uid} error-${this.uid}`
-      : `info-${this.uid} error-${this.uid}`;
-  }
-  renderErrorMessage() {
-    return this.errorMessage || this.displayedErrorMessage;
-  }
-  render() {
-    return (h(Host, { id: this.uid }, h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage || this.displayedErrorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { class: "label-wrapper" }, h("label", { htmlFor: `inputfield-${this.uid}`, class: "label" }, this.label, this.characterLimit && (h("span", { class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: "inner-wrapper" }, h("div", { class: "text-after-wrapper" }, h("div", { class: `inputfield-wrapper ${this.disabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { class: "symbol", id: `symbol-before-${this.uid}` }, this.symbolBefore)), h("input", { ref: (el) => (this.inputEl = el), id: `inputfield-${this.uid}`, disabled: this.disabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: (ev) => this.handleBlur(ev), onFocus: this.handleFocus.bind(this), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min }), this.symbolAfter && (h("span", { class: "symbol", id: `symbol-after-${this.uid}` }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && h("span", { class: "text-after", id: `text-after-${this.uid}` }, this.textAfter)), this.info && (h("div", { id: `info-${this.uid}`, class: "info" }, this.info)), h("div", { id: `error-${this.uid}`, "aria-live": "assertive", class: "error-message", "aria-atomic": "true" }, this.renderErrorMessage()), h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
-  }
-  static get is() { return "wm-input"; }
-  static get encapsulation() { return "shadow"; }
-  static get delegatesFocus() { return true; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["wm-input.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["wm-input.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "labelPosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"top\" | \"left\" | \"none\"",
-          "resolved": "\"left\" | \"none\" | \"top\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label-position",
-        "reflect": false,
-        "defaultValue": "\"top\""
-      },
-      "value": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "value",
-        "reflect": true,
-        "defaultValue": "\"\""
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "info": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "info",
-        "reflect": false
-      },
-      "inputWidth": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "input-width",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "placeholder": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "placeholder",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "requiredField": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "required-field",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "requiredFieldMessage": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "required-field-message",
-        "reflect": false
-      },
-      "errorMessage": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "error-message",
-        "reflect": false
-      },
-      "characterLimit": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "character-limit",
-        "reflect": false
-      },
-      "symbolBefore": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "symbol-before",
-        "reflect": false
-      },
-      "symbolAfter": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "symbol-after",
-        "reflect": false
-      },
-      "textAfter": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "text-after",
-        "reflect": false
-      },
-      "preventValidation": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "prevent-validation",
-        "reflect": false
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"number\" | \"text\"",
-          "resolved": "\"number\" | \"text\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "\"text\""
-      },
-      "step": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "step",
-        "reflect": false,
-        "defaultValue": "1"
-      },
-      "min": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "min",
-        "reflect": false
-      },
-      "max": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "max",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "announcement": {},
-      "displayedErrorMessage": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "wmInputValueChanged",
-        "name": "wmInputValueChanged",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ value: string }",
-          "resolved": "{ value: string; }",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "errorMessage",
-        "methodName": "handleErrorMessage"
-      }];
-  }
-}
+import { h, Host } from "@stencil/core";
+import { intl, generateId, isRelatedTarget } from "../../global/functions";
+import { globalMessages } from "../../global/intl";
+export class Input {
+  constructor() {
+    this.uid = "";
+    this.previousBlurredValue = "";
+    this.numberErrorMessage = intl.formatMessage({
+      id: "input.numberError",
+      defaultMessage: "Please enter a valid number.",
+    });
+    this.label = undefined;
+    this.labelPosition = "top";
+    this.value = "";
+    this.disabled = false;
+    this.info = undefined;
+    this.inputWidth = "";
+    this.placeholder = "";
+    this.requiredField = false;
+    this.requiredFieldMessage = undefined;
+    this.errorMessage = undefined;
+    this.characterLimit = undefined;
+    this.symbolBefore = undefined;
+    this.symbolAfter = undefined;
+    this.textAfter = undefined;
+    this.preventValidation = undefined;
+    this.type = "text";
+    this.step = 1;
+    this.min = undefined;
+    this.max = undefined;
+    this.announcement = "";
+    this.displayedErrorMessage = "";
+  }
+  getInputWidth() {
+    return this.inputWidth ? { width: this.inputWidth } : { flex: "1" };
+  }
+  get charCount() {
+    return this.value.length;
+  }
+  componentWillLoad() {
+    this.uid = this.el.id ? this.el.id : generateId();
+    if (!this.label) {
+      console.error("wm-input requires the label property");
+    }
+  }
+  componentDidLoad() {
+    if (this.value) {
+      this.inputEl.value = this.value;
+      this.previousBlurredValue = this.inputEl.value;
+    }
+  }
+  handleErrorMessage(newValue) {
+    this.displayedErrorMessage = newValue;
+  }
+  handleKeyDown(ev) {
+    // in most browsers, onInput doesn't fire if the input's maxLength is reached
+    // to handle the case where a user continues to type after reaching the character limit, the keyDown event must be used
+    const isModifierKey = ev.ctrlKey || ev.metaKey || ev.altKey;
+    const isCharacter = /^.$/.test(ev.key) && !isModifierKey;
+    const hasReachedCharacterLimit = isCharacter && this.characterLimit && this.inputEl.value.length >= this.characterLimit;
+    if (hasReachedCharacterLimit) {
+      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
+    }
+  }
+  handleBlur(ev) {
+    if (this.value !== this.previousBlurredValue) {
+      this.wmInputValueChanged.emit({ value: this.value });
+    }
+    this.previousBlurredValue = this.value;
+    // do not validate if clicking to an element that should prevent validation (e.g. close button on modal)
+    const shouldPreventValidation = this.preventValidation && isRelatedTarget(ev, this.preventValidation);
+    if (!shouldPreventValidation) {
+      this.displayedErrorMessage = this.validate();
+    }
+    this.inputWrapperEl.classList.remove("focus");
+  }
+  handleInput(ev) {
+    this.value = ev.target.value;
+    if (this.characterLimit && this.charCount >= this.characterLimit - 5) {
+      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
+    }
+  }
+  handleFocus() {
+    this.inputWrapperEl.classList.add("focus");
+  }
+  validate() {
+    // These rules are in priority order
+    // i.e. an input that is triggering both required and number errors will only show the number one but it's first
+    const validationRules = [this.validateNumber.bind(this), this.validateRequired.bind(this)];
+    if (this.errorMessage) {
+      return this.errorMessage;
+    }
+    else {
+      // sets newError to first rule that returns an error
+      return validationRules.reduce((prev, current) => (prev ? prev : current()), "");
+    }
+  }
+  validateRequired() {
+    const reqMsg = this.requiredFieldMessage || globalMessages.requiredError;
+    return this.requiredField && this.value === "" ? reqMsg : "";
+  }
+  validateNumber() {
+    return this.type === "number" && this.inputEl.validity.badInput ? this.numberErrorMessage : "";
+  }
+  announce(message) {
+    if (this.liveRegionEl.textContent === message) {
+      message += "\u00A0";
+    }
+    this.announcement = message;
+  }
+  generateCharacterLimitWarning(charCount, charLimit) {
+    let message = globalMessages.getCharactersEntered(charCount, charLimit);
+    if (charCount >= charLimit) {
+      message += ` ${globalMessages.characterLimitReached}`;
+    }
+    return message;
+  }
+  descriptors() {
+    // the input field value is announced to provide context to symbol-before, symbol-after and text-after. If none are present, it shouldn't be announced.
+    return this.symbolBefore || this.symbolAfter || this.textAfter
+      ? `symbol-before-${this.uid} inputfield-${this.uid} symbol-after-${this.uid} text-after-${this.uid} info-${this.uid} error-${this.uid}`
+      : `info-${this.uid} error-${this.uid}`;
+  }
+  renderErrorMessage() {
+    return this.errorMessage || this.displayedErrorMessage;
+  }
+  render() {
+    return (h(Host, { id: this.uid }, h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage || this.displayedErrorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { class: "label-wrapper" }, h("label", { htmlFor: `inputfield-${this.uid}`, class: "label" }, this.label, this.characterLimit && (h("span", { class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: "inner-wrapper" }, h("div", { class: "text-after-wrapper" }, h("div", { class: `inputfield-wrapper ${this.disabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { class: "symbol", id: `symbol-before-${this.uid}` }, this.symbolBefore)), h("input", { ref: (el) => (this.inputEl = el), id: `inputfield-${this.uid}`, disabled: this.disabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: (ev) => this.handleBlur(ev), onFocus: this.handleFocus.bind(this), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min }), this.symbolAfter && (h("span", { class: "symbol", id: `symbol-after-${this.uid}` }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && h("span", { class: "text-after", id: `text-after-${this.uid}` }, this.textAfter)), this.info && (h("div", { id: `info-${this.uid}`, class: "info" }, this.info)), h("div", { id: `error-${this.uid}`, "aria-live": "assertive", class: "error-message", "aria-atomic": "true" }, this.renderErrorMessage()), h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+  }
+  static get is() { return "wm-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["wm-input.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["wm-input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "labelPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"top\" | \"left\" | \"none\"",
+          "resolved": "\"left\" | \"none\" | \"top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label-position",
+        "reflect": false,
+        "defaultValue": "\"top\""
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "\"\""
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "info": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "info",
+        "reflect": false
+      },
+      "inputWidth": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "input-width",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "requiredField": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required-field",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "requiredFieldMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required-field-message",
+        "reflect": false
+      },
+      "errorMessage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error-message",
+        "reflect": false
+      },
+      "characterLimit": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "character-limit",
+        "reflect": false
+      },
+      "symbolBefore": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "symbol-before",
+        "reflect": false
+      },
+      "symbolAfter": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "symbol-after",
+        "reflect": false
+      },
+      "textAfter": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "text-after",
+        "reflect": false
+      },
+      "preventValidation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "prevent-validation",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"number\" | \"text\"",
+          "resolved": "\"number\" | \"text\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"text\""
+      },
+      "step": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "step",
+        "reflect": false,
+        "defaultValue": "1"
+      },
+      "min": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "min",
+        "reflect": false
+      },
+      "max": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "announcement": {},
+      "displayedErrorMessage": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "wmInputValueChanged",
+        "name": "wmInputValueChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ value: string }",
+          "resolved": "{ value: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "errorMessage",
+        "methodName": "handleErrorMessage"
+      }];
+  }
+}