@watermarkinsights/ripple 5.13.0-alpha.3 → 5.13.0-alpha.4

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

@@ -1,498 +0,0 @@
-import { h } from "@stencil/core";
-import { triggerFormSubmit, toBool, handleDisabledAttribute } from "../../global/functions";
-import { globalMessages } from "../../global/intl";
-export class Input {
-    constructor() {
-        this.labelPosition = "top";
-        this.value = "";
-        this.disabled = false;
-        this.inputWidth = "";
-        this.placeholder = "";
-        this.requiredField = false;
-        this.type = "text";
-        this.step = 1;
-        this.isSubmit = false;
-        this.announcement = "";
-        this.previousValue = "";
-    }
-    getInputWidth() {
-        return this.inputWidth ? { width: this.inputWidth } : { flex: "1" };
-    }
-    get charCount() {
-        return this.value.length;
-    }
-    get isDisabled() {
-        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
-        return toBool(this.disabled);
-    }
-    componentWillLoad() {
-        if (!this.label) {
-            console.error("wm-input requires the label property");
-        }
-        handleDisabledAttribute(this.el, this.isDisabled);
-    }
-    componentDidLoad() {
-        this.previousValue = this.inputEl.value;
-    }
-    handleDisabledChange() {
-        handleDisabledAttribute(this.el, this.isDisabled);
-    }
-    announceError() {
-        if (this.errorMessage) {
-            setTimeout(() => this.announce(this.errorMessage), 100);
-        }
-    }
-    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));
-        }
-    }
-    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: '62f9860ec2c3ab8b8889a3cb16782cd751c785fb', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: '5ee7f338762c085696e47d58e8f75f93bf4d4a6f', class: "label-wrapper" }, h("label", { key: '65f22de9893c6f5edb02a60229a8b45869ff0807', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: '43577e74f14b26a0f41d77d326cd88d3d171e6b7', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: '440bf0ce343f6735ab26a4b3926da12353bf855f', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: 'ab920b6710d5a7d1aeb4a118d64da53c74e1edae', class: "inner-wrapper" }, h("div", { key: '9cb24ca5e904bbbbf3df16efe6b09ea2cacfd44c', class: "text-after-wrapper" }, h("div", { key: '78fa02386934097655347c80ce4e7b76e1531900', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: 'a34b2dd76159a2662bf4f0c693a2ff3a76483b32', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: '361b681383669fd62399818fde3010bc67a484e2', 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: 'dcb784ead7dc9e468f260b3821957fe85c47fc0d', 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: 'd133d5ae885d18c52fba9e09b54918eef2005fba', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: 'e2ff90b30e75517d3aa96ad2a80af2a1875f4ba8', id: "info", class: "info" }, this.info)), h("div", { key: '68f36477a50cce27e642b47e49448e8f2502b275', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '8b86d3977cad2208e5428226ed83245b5747049d', 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",
-                "attribute": "label",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "labelPosition": {
-                "type": "string",
-                "attribute": "label-position",
-                "mutable": false,
-                "complexType": {
-                    "original": "\"top\" | \"left\" | \"none\"",
-                    "resolved": "\"left\" | \"none\" | \"top\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "\"top\""
-            },
-            "value": {
-                "type": "string",
-                "attribute": "value",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "\"\""
-            },
-            "disabled": {
-                "type": "boolean",
-                "attribute": "disabled",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "info": {
-                "type": "string",
-                "attribute": "info",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "inputWidth": {
-                "type": "string",
-                "attribute": "input-width",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "\"\""
-            },
-            "placeholder": {
-                "type": "string",
-                "attribute": "placeholder",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "\"\""
-            },
-            "requiredField": {
-                "type": "boolean",
-                "attribute": "required-field",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "errorMessage": {
-                "type": "string",
-                "attribute": "error-message",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "characterLimit": {
-                "type": "number",
-                "attribute": "character-limit",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "symbolBefore": {
-                "type": "string",
-                "attribute": "symbol-before",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "symbolAfter": {
-                "type": "string",
-                "attribute": "symbol-after",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "textAfter": {
-                "type": "string",
-                "attribute": "text-after",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "type": {
-                "type": "string",
-                "attribute": "type",
-                "mutable": false,
-                "complexType": {
-                    "original": "\"number\" | \"text\"",
-                    "resolved": "\"number\" | \"text\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "\"text\""
-            },
-            "step": {
-                "type": "number",
-                "attribute": "step",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "1"
-            },
-            "min": {
-                "type": "number",
-                "attribute": "min",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "max": {
-                "type": "number",
-                "attribute": "max",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "isSubmit": {
-                "type": "boolean",
-                "attribute": "is-submit",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "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"
-            }];
-    }
-}