@uh-design-system/component-library 0.1.0 → 0.2.0-alpha.0

package/dist/collection/components/01-base-components/ds-text-input/ds-text-input.js

@@ -0,0 +1,665 @@
+import { Fragment, h } from "@stencil/core";
+import classNames from "classnames";
+import { idGenerator } from "./utils";
+const INPUT_TYPE_ICONS_MAP = {
+    search: 'search',
+};
+const INPUT_TYPE_ACTION_BUTTON_ICON_MAP = {
+    search: ({ clearButtonVisible }) => (clearButtonVisible ? 'cancel_fill' : ''),
+    password: ({ passwordInputVisible }) => (passwordInputVisible ? 'visibility_off_fill' : 'visibility_fill'),
+};
+const assistiveTextIdGenerator = idGenerator('ds-assistive-text');
+const visuallyHiddenAssistiveTextIdGenerator = idGenerator('visually-hidden-assistive-text');
+const successTextIdGenerator = idGenerator('success-text');
+const errorTextIdGenerator = idGenerator('error-text');
+export class DsTextInput {
+    constructor() {
+        this.assistiveTextId = assistiveTextIdGenerator.next().value;
+        this.visuallyHiddenAssistiveTextId = visuallyHiddenAssistiveTextIdGenerator.next().value;
+        this.successTextId = successTextIdGenerator.next().value;
+        this.errorTextId = errorTextIdGenerator.next().value;
+        this.onActionButtonClicked = (e) => {
+            e.stopPropagation();
+            switch (this.type) {
+                case 'password':
+                    return this.togglePasswordVisibility();
+                case 'search':
+                    this.clearInput();
+                default:
+                    return;
+            }
+        };
+        this.label = undefined;
+        this.placeholder = undefined;
+        this.id = 'input';
+        this.name = undefined;
+        this.disabled = undefined;
+        this.required = undefined;
+        this.readonly = undefined;
+        this.value = undefined;
+        this.min = undefined;
+        this.max = undefined;
+        this.maxlength = undefined;
+        this.pattern = undefined;
+        this.autocomplete = undefined;
+        this.errorText = undefined;
+        this.successText = undefined;
+        this.assistiveText = undefined;
+        this.actionButtonAriaLabel = undefined;
+        this.hiddenAssistiveText = undefined;
+        this.prefixText = undefined;
+        this.suffixText = undefined;
+        this.icon = '';
+        this.type = 'text';
+        this.ariaLabel = undefined;
+        this.ariaLabelledBy = undefined;
+        this.ariaDescribedby = undefined;
+        this.hasFocus = false;
+        this.clearButtonVisible = false;
+        this.passwordInputVisible = false;
+        this.inputActive = false;
+    }
+    async togglePasswordVisibility() {
+        return (this.passwordInputVisible = !this.passwordInputVisible);
+    }
+    async clearInput() {
+        this.inputElement.value = '';
+        this.inputElement.focus();
+        this.clearButtonVisible = false;
+    }
+    renderValidityMessage(type) {
+        const textId = type === 'success' ? this.successTextId : this.errorTextId;
+        const text = type === 'success' ? this.successText : this.errorText;
+        const icon = type === 'success' ? 'check_circle_fill' : 'warning_fill';
+        const className = type + '-text';
+        return (h("slot", { name: className }, text && (h("div", { class: `${className}-container` }, h("ds-icon", { name: icon }), h("small", { id: textId, class: className }, text)))));
+    }
+    renderPrefixContent() {
+        if (this.prefixText) {
+            return (h("slot", { name: "prefix" }, h("span", { class: "prefix" }, this.prefixText)));
+        }
+        const prefixIcon = this.icon || INPUT_TYPE_ICONS_MAP[this.type];
+        if (prefixIcon) {
+            return (h("slot", { name: "prefix" }, h("ds-icon", { class: "prefix", name: prefixIcon })));
+        }
+        return null;
+    }
+    renderSuffixContent() {
+        var _a, _b;
+        if (this.suffixText) {
+            return (h("slot", { name: "suffix" }, h("span", { class: "suffix" }, this.suffixText)));
+        }
+        const actionButtonIcon = (_b = (_a = INPUT_TYPE_ACTION_BUTTON_ICON_MAP[this.type]) === null || _a === void 0 ? void 0 : _a.call(INPUT_TYPE_ACTION_BUTTON_ICON_MAP, this)) !== null && _b !== void 0 ? _b : '';
+        const ariaPressed = this.type === 'password' ? this.passwordInputVisible : undefined;
+        if (actionButtonIcon) {
+            return (h("slot", { name: "suffix" }, h("ds-button", { ref: e => (this.suffixButtonElement = e), variant: "supplementary", colour: "black", class: "suffix", disabled: false, icon: actionButtonIcon, onClick: this.onActionButtonClicked, "aria-pressed": ariaPressed, "aria-label": this.actionButtonAriaLabel })));
+        }
+        return null;
+    }
+    handleInputContainerClick(e) {
+        if (e.target === this.suffixButtonElement)
+            return;
+        this.inputElement.focus();
+    }
+    render() {
+        const inputType = this.type === 'password' && this.passwordInputVisible ? 'text' : this.type;
+        return (h(Fragment, { key: '6d7c594001a3103009b407b8ff83d2c1280d014a' }, h("div", { key: '76051b2e72023d0a11fe07f10390b787e7466f02', class: "label-container" }, h("slot", { key: '3c6aa9d9ad95523cd241fddf19be9f3b61cc6a5e', name: "label" }, h("label", { key: '9adea3cfcbd36030bdf66dd9ddc64a1483910c0f', class: classNames({ required: this.required }), htmlFor: this.id }, this.label)), h("slot", { key: '12466889750015207ac3f56159c70795e797d433', name: "help-text" }, h("small", { key: '4c4ae48f06cb9633d5f306ae14da8ccc5d09699e', id: this.assistiveTextId }, this.assistiveText), h("ds-visually-hidden", { key: '899469a328caf988e955bc2f3e4bc15664f01de3', id: this.visuallyHiddenAssistiveTextId }, this.hiddenAssistiveText))), h("div", { key: 'b8afbafcafc45a83b9bf177a09d585745ff2d7bf', onMouseDown: () => (this.inputActive = true), onMouseUp: () => (this.inputActive = false), onClick: e => this.handleInputContainerClick(e), class: classNames('input-container', {
+                disabled: this.disabled,
+                readonly: this.readonly,
+                valid: !!this.successText,
+                invalid: !!this.errorText,
+                focus: this.hasFocus,
+                active: !!this.inputActive,
+            }) }, this.renderPrefixContent(), h("input", { key: '75b925eced73863f039c31f7c8abaf8996532f7c', ref: e => (this.inputElement = e), id: this.id, name: this.name, "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedby ||
+                classNames(this.assistiveTextId, this.visuallyHiddenAssistiveTextId, {
+                    [this.successTextId]: this.successText,
+                    [this.errorTextId]: this.errorText,
+                }), disabled: this.disabled, required: this.required, readonly: this.readonly, value: this.value, type: inputType, min: this.min, max: this.max, maxlength: this.maxlength, pattern: this.pattern, placeholder: this.placeholder, autocomplete: this.autocomplete, onInput: e => (this.clearButtonVisible = !!e.target.value), onFocus: () => (this.hasFocus = true), onBlur: () => (this.hasFocus = false) }), this.renderSuffixContent()), this.renderValidityMessage('error'), this.renderValidityMessage('success')));
+    }
+    static get is() { return "ds-text-input"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-text-input.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-text-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "id": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "id",
+                "reflect": false,
+                "defaultValue": "'input'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "name",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "required",
+                "reflect": false
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "readonly",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min",
+                "reflect": false
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max",
+                "reflect": false
+            },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "maxlength",
+                "reflect": false
+            },
+            "pattern": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "pattern",
+                "reflect": false
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "autocomplete",
+                "reflect": false
+            },
+            "errorText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "error-text",
+                "reflect": false
+            },
+            "successText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "success-text",
+                "reflect": false
+            },
+            "assistiveText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "assistive-text",
+                "reflect": false
+            },
+            "actionButtonAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "action-button-aria-label",
+                "reflect": false
+            },
+            "hiddenAssistiveText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hidden-assistive-text",
+                "reflect": false
+            },
+            "prefixText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "prefix-text",
+                "reflect": false
+            },
+            "suffixText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "suffix-text",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TextInputType",
+                    "resolved": "\"email\" | \"loading\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+                    "references": {
+                        "TextInputType": {
+                            "location": "import",
+                            "path": "./utils",
+                            "id": "src/components/01-base-components/ds-text-input/utils.ts::TextInputType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'text'"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-label",
+                "reflect": false
+            },
+            "ariaLabelledBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-labelledby",
+                "reflect": false
+            },
+            "ariaDescribedby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-describedby",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {},
+            "clearButtonVisible": {},
+            "passwordInputVisible": {},
+            "inputActive": {}
+        };
+    }
+    static get methods() {
+        return {
+            "togglePasswordVisibility": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "clearInput": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}