@watermarkinsights/ripple 3.6.0 → 3.7.0-3

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

@@ -1,424 +1,423 @@
-import { h, Component, Element, Event, Host, Prop, State, Watch } from "@stencil/core";
-import { intl, generateId, isRelatedTarget } from "../../global/functions";
-export class Input {
-  constructor() {
-    this.labelPosition = "top";
-    this.value = "";
-    this.disabled = false;
-    this.placeholder = "";
-    this.requiredField = false;
-    this.type = "text";
-    this.step = 1;
-    this.announcement = "";
-    this.previousBlurredValue = "";
-    this.displayedErrorMessage = "";
-    this.uid = "";
-    this.requiredErrorMessage = intl.formatMessage({
-      id: "global.requiredError",
-      defaultMessage: "This field is required.",
-    });
-    this.numberErrorMessage = intl.formatMessage({
-      id: "input.numberError",
-      defaultMessage: "Please enter a valid number.",
-    });
-  }
-  get charCount() {
-    return this.value.length;
-  }
-  componentWillLoad() {
-    this.uid = this.el.id ? this.el.id : generateId();
-    this.el.focus = function () {
-      if (!this.disabled) {
-        this.shadowRoot.querySelector("input").focus();
-      }
-    };
-    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() {
-    this.displayedErrorMessage = this.validate();
-  }
-  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() {
-    return this.requiredField && this.value === "" ? this.requiredErrorMessage : "";
-  }
-  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) {
-    const charactersEnteredMessage = intl.formatMessage({
-      id: "global.charactersEntered",
-      defaultMessage: "{x, number} of {y, number} characters entered.",
-      description: "for screen readers",
-    }, { x: charCount, y: charLimit });
-    const characterLimitReachedMessage = intl.formatMessage({
-      id: "global.characterLimitReached",
-      defaultMessage: "No additional characters will be entered.",
-      description: "for screen readers",
-    });
-    return `${charactersEnteredMessage}${charCount >= charLimit ? " " + characterLimitReachedMessage : ""}`;
-  }
-  generateCharacterLimitLabel(characterLimit) {
-    return intl.formatMessage({
-      id: "global.characterLimit",
-      defaultMessage: "{limit, number} characters allowed.",
-      description: "for screen readers",
-    }, { limit: characterLimit });
-  }
-  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" }, this.labelPosition !== "none" && (h("label", { htmlFor: `inputfield-${this.uid}`, class: "label" },
-          this.label,
-          this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*"))))),
-        h("div", { class: "inner-wrapper" },
-          h("div", { class: "inputfield-wrapper" },
-            h("input", { ref: (el) => (this.inputEl = el), id: `inputfield-${this.uid}`, disabled: this.disabled, "aria-label": `${this.label}${this.characterLimit ? " " + this.generateCharacterLimitLabel(this.characterLimit) : ""}`, "aria-describedby": `info-${this.uid} error-${this.uid}`, 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", required: this.requiredField, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min }),
-            this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" },
-              this.charCount,
-              "/",
-              this.characterLimit)) : ("")),
-          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 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
-    },
-    "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"
-    },
-    "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
-    },
-    "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": {},
-    "previousBlurredValue": {},
-    "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, Component, Element, Event, Host, Prop, State, Watch } from "@stencil/core";
+import { intl, generateId, isRelatedTarget } from "../../global/functions";
+export class Input {
+  constructor() {
+    this.labelPosition = "top";
+    this.value = "";
+    this.disabled = false;
+    this.placeholder = "";
+    this.requiredField = false;
+    this.type = "text";
+    this.step = 1;
+    this.announcement = "";
+    this.displayedErrorMessage = "";
+    this.uid = "";
+    this.previousBlurredValue = "";
+    this.requiredErrorMessage = intl.formatMessage({
+      id: "global.requiredError",
+      defaultMessage: "This field is required.",
+    });
+    this.numberErrorMessage = intl.formatMessage({
+      id: "input.numberError",
+      defaultMessage: "Please enter a valid number.",
+    });
+  }
+  get charCount() {
+    return this.value.length;
+  }
+  componentWillLoad() {
+    this.uid = this.el.id ? this.el.id : generateId();
+    this.el.focus = function () {
+      if (!this.disabled) {
+        this.shadowRoot.querySelector("input").focus();
+      }
+    };
+    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() {
+    return this.requiredField && this.value === "" ? this.requiredErrorMessage : "";
+  }
+  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) {
+    const charactersEnteredMessage = intl.formatMessage({
+      id: "global.charactersEntered",
+      defaultMessage: "{x, number} of {y, number} characters entered.",
+      description: "for screen readers",
+    }, { x: charCount, y: charLimit });
+    const characterLimitReachedMessage = intl.formatMessage({
+      id: "global.characterLimitReached",
+      defaultMessage: "No additional characters will be entered.",
+      description: "for screen readers",
+    });
+    return `${charactersEnteredMessage}${charCount >= charLimit ? " " + characterLimitReachedMessage : ""}`;
+  }
+  generateCharacterLimitLabel(characterLimit) {
+    return intl.formatMessage({
+      id: "global.characterLimit",
+      defaultMessage: "{limit, number} characters allowed.",
+      description: "for screen readers",
+    }, { limit: characterLimit });
+  }
+  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" }, this.labelPosition !== "none" && (h("label", { htmlFor: `inputfield-${this.uid}`, class: "label" },
+          this.label,
+          this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*"))))),
+        h("div", { class: "inner-wrapper" },
+          h("div", { class: "inputfield-wrapper" },
+            h("input", { ref: (el) => (this.inputEl = el), id: `inputfield-${this.uid}`, disabled: this.disabled, "aria-label": `${this.label}${this.characterLimit ? " " + this.generateCharacterLimitLabel(this.characterLimit) : ""}`, "aria-describedby": `info-${this.uid} error-${this.uid}`, 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", required: this.requiredField, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min }),
+            this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" },
+              this.charCount,
+              "/",
+              this.characterLimit)) : ("")),
+          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 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
+    },
+    "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"
+    },
+    "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
+    },
+    "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"
+    }]; }
+}