@watermarkinsights/ripple 0.0.0 → 0.1.0-alpha.0

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

@@ -1,302 +1,477 @@
-import { h, Component, Element, Host, Prop, State } from "@stencil/core";
-import { intl, generateId, isRelatedTarget } from "../../global/functions";
+import { h } from "@stencil/core";
+import { triggerFormSubmit, toBool, handleDisabledAttribute, hideTooltip, showTooltip } from "../../global/functions";
+import { globalMessages } from "../../global/intl";
 export class Input {
-  constructor() {
-    this.labelPosition = "top";
-    this.value = "";
-    this.disabled = false;
-    this.placeholder = "";
-    this.requiredField = false;
-    this.charCount = 0;
-    this.announcement = "";
-    this.uid = "";
-    this.requiredErrorMessage = intl.formatMessage({
-      id: "global.requiredError",
-      defaultMessage: "This field is required.",
-    });
-  }
-  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");
+    constructor() {
+        this.previousValue = "";
+        this.label = undefined;
+        this.labelPosition = "top";
+        this.value = "";
+        this.disabled = false;
+        this.info = undefined;
+        this.inputWidth = "";
+        this.placeholder = "";
+        this.requiredField = false;
+        this.errorMessage = undefined;
+        this.characterLimit = undefined;
+        this.symbolBefore = undefined;
+        this.symbolAfter = undefined;
+        this.textAfter = undefined;
+        this.type = "text";
+        this.step = 1;
+        this.min = undefined;
+        this.max = undefined;
+        this.isSubmit = false;
+        this.announcement = "";
     }
-  }
-  componentDidLoad() {
-    if (this.value) {
-      this.inputEl.value = this.value;
+    getInputWidth() {
+        return this.inputWidth ? { width: this.inputWidth } : { flex: "1" };
     }
-  }
-  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));
+    get charCount() {
+        return this.value.length;
     }
-  }
-  handleBlur(ev) {
-    // 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 (this.requiredField && !shouldPreventValidation) {
-      this.errorMessage = this.updateRequiredError(this.errorMessage, this.requiredErrorMessage, this.value);
+    get isDisabled() {
+        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+        return toBool(this.disabled);
     }
-    this.inputWrapperEl.classList.remove("focus");
-  }
-  handleInput(ev) {
-    this.value = ev.target.value;
-    this.charCount = this.value.length;
-    if (this.characterLimit && this.charCount >= this.characterLimit - 5) {
-      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
+    componentWillLoad() {
+        if (!this.label) {
+            console.error("wm-input requires the label property");
+        }
+        handleDisabledAttribute(this.el, this.isDisabled);
     }
-  }
-  handleFocus() {
-    this.inputWrapperEl.classList.add("focus");
-  }
-  updateRequiredError(errorMessage, requiredErrorMessage, value) {
-    const errorPresent = !!errorMessage && errorMessage !== "";
-    let newErrorMessage = errorMessage || "";
-    // no error and empty value generates required error message
-    if (!errorPresent && value === "") {
-      newErrorMessage = requiredErrorMessage;
+    componentDidLoad() {
+        this.previousValue = this.inputEl.value;
     }
-    // if there is an error and a value, clear error message
-    // unless it's a custom error set by the dev
-    else if (errorPresent && value !== "") {
-      if (errorMessage === requiredErrorMessage) {
-        newErrorMessage = "";
-      }
+    handleDisabledChange() {
+        handleDisabledAttribute(this.el, this.isDisabled);
     }
-    return newErrorMessage;
-  }
-  announce(message) {
-    if (this.liveRegionEl.textContent === message) {
-      message += "\u00A0";
+    announceError() {
+        if (this.errorMessage) {
+            setTimeout(() => this.announce(this.errorMessage), 100);
+        }
     }
-    this.announcement = message;
-  }
-  generateCharacterLimitWarning(charCount, charLimit) {
-    const charactersEnteredMessage = intl.formatMessage({
-      id: "input.charactersEntered",
-      defaultMessage: "{x, number} of {y, number} characters entered.",
-    }, { x: charCount, y: charLimit });
-    const characterLimitReachedMessage = intl.formatMessage({
-      id: "input.characterLimitReached",
-      defaultMessage: "No additional characters will be entered.",
-    });
-    return `${charactersEnteredMessage}${charCount >= charLimit ? " " + characterLimitReachedMessage : ""}`;
-  }
-  render() {
-    return (h(Host, { id: this.uid },
-      h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "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, "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 }),
-            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.errorMessage),
-          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": true
-    },
-    "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
+    handleInput(ev) {
+        // keep component's value in sync with input's value
+        this.value = ev.target.value;
+        if (this.characterLimit && this.charCount >= this.characterLimit - 5) {
+            this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
+        }
+    }
+    handleLabelMouseEnter(ev) {
+        const labelEl = ev.target;
+        if (labelEl.scrollWidth > labelEl.clientWidth) {
+            showTooltip("right", labelEl, this.label);
+        }
+    }
+    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));
+        }
+        if (ev.key === "Enter") {
+            this.isSubmit && triggerFormSubmit(this.el.closest("form"));
+        }
+    }
+    handleBlur() {
+        if (this.value !== this.previousValue) {
+            this.wmInputValueChanged.emit({ value: this.value });
+        }
+        this.previousValue = this.value;
+        this.inputWrapperEl.classList.remove("focus");
+    }
+    handleFocus() {
+        this.inputWrapperEl.classList.add("focus");
+    }
+    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 inputfield symbol-after text-after info error`
+            : `info error`;
+    }
+    render() {
+        return (h("div", { key: '3580f19d6c2f1fc0cc5c58c13343e435d55233f8', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: '5827ef923458400025e77de71fad2c80b1b095bd', class: "label-wrapper" }, h("label", { key: '7d1dc047b0c6bb2c14bc61a40445683277ea2ae6', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: 'c586de9e5cd0210a33619453a1ea4eacc1640822', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '0292d93aefa4007d05d31f01ac44eedf70d59d99', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'c82f5e79d3286d5b1d13e1e6d2f926b54c0c5403', class: "inner-wrapper" }, h("div", { key: '61aff4b5c1c880306a43899ade2431a4e3939b16', class: "text-after-wrapper" }, h("div", { key: 'c697b2f407a7b54ae5f971490e013a912a73de72', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: '1983539be2e0a4e1aafa889910788b0fadbecf44', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: '78fbe9432521856d2c86e43e16296fc01f1b07b8', ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), 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, value: this.el.value }), this.symbolAfter && (h("span", { key: 'abe682508a99df6475ce4ca4706926c11c1704c9', class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (h("span", { key: 'b6e60134de240bb256d75ff55744fe4df1e6c795', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: '0a058e1a91250f96a04807419e73c0cc89519364', id: "info", class: "info" }, this.info)), h("div", { key: '21432ca07ec97686e3073297cece2013e5cc94e6', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'fe235ceffb5fd33b4a04eac4a87cd24579bbcbc3', 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": false,
+                "defaultValue": "\"\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "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"
+            },
+            "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
+            },
+            "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
+            },
+            "isSubmit": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-submit",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "announcement": {}
+        };
+    }
+    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": "disabled",
+                "methodName": "handleDisabledChange"
+            }, {
+                "propName": "errorMessage",
+                "methodName": "announceError"
+            }];
     }
-  }; }
-  static get states() { return {
-    "charCount": {},
-    "announcement": {}
-  }; }
-  static get elementRef() { return "el"; }
 }