@rededor/cura 2.0.0-alpha.13 → 2.0.0-alpha.16

package/dist/collection/components/forms/cura-input-textarea/cura-input-textarea.js

@@ -0,0 +1,613 @@
+import { Host, h } from "@stencil/core";
+import { checkMobile, checkIOS, fakeInputIOSHack } from "../../../utils/utils";
+export class CuraInputTextArea {
+    constructor() {
+        /**
+         * Indicates input status (default: 'default')
+         */
+        this.status = 'default';
+        /**
+         * Size of the textarea: 'small', 'medium', or 'large' (default: 'medium')
+         */
+        this.size = 'medium';
+        /**
+         * Label text for the textarea
+         */
+        this.label = '';
+        /**
+         * Name for the textarea
+         */
+        this.name = '';
+        /**
+         * Placeholder text
+         */
+        this.placeholder = null;
+        /**
+         * Initial value of the textarea
+         */
+        this.value = '';
+        /**
+         * Cura icon name to display
+         */
+        this.iconName = '';
+        /**
+         * Whether the textarea is disabled (default: false)
+         */
+        this.disabled = false;
+        /**
+         * Whether the textarea is required (default: false)
+         */
+        this.required = false;
+        /**
+         * Whether the textarea is read-only (default: false)
+         */
+        this.readOnly = false;
+        /**
+         * Whether the textarea is resizable (default: true)
+         */
+        this.resizable = true;
+        /**
+         * Whether the textarea is in loading state (default: false)
+         */
+        this.isLoading = false;
+        this.isHovered = false;
+        this.isFocused = false;
+        this.currentValue = '';
+        this.fieldStyles = { height: 'auto' };
+        /**
+         * Removes the alertCircle icon when necessary (as used in CuraDropdownSearch)
+         */
+        this.hideErrorIcon = false;
+        /**
+         * Whether the textarea should have autocomplete
+         */
+        this.autocomplete = 'on';
+        this.styles = {};
+    }
+    async setFocus() {
+        const timeoutMs = checkMobile() && checkIOS() ? 1000 : 200;
+        let fakeInput = fakeInputIOSHack(this.host);
+        setTimeout(() => {
+            this.inputRef.focus();
+            if (fakeInput)
+                fakeInput.remove();
+        }, timeoutMs);
+    }
+    formStateRestoreCallback(state) {
+        this.currentValue = state.value;
+        this.internals.setFormValue(this.currentValue);
+    }
+    formAssociatedCallback(form) {
+        form.ariaLabel = this.label;
+    }
+    formResetCallback() {
+        this.handleClearInput();
+        this.internals.setValidity({});
+        this.internals.setFormValue('');
+    }
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    connectedCallback() {
+        this.styles['--primary-base'] = window.CuraAPI.theme.colors.getColor(`primary-base`);
+        this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);
+        this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
+        this.styles['--neutral-black'] = window.CuraAPI.theme.colors.getColor(`neutral-black`);
+        this.styles['--neutral-medium'] = window.CuraAPI.theme.colors.getColor(`neutral-medium`);
+        this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
+        this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
+        this.styles['--success-dark'] = window.CuraAPI.theme.colors.getColor(`success-dark`);
+        this.styles['--success-darker'] = window.CuraAPI.theme.colors.getColor(`success-darker`);
+        this.styles['--success-lighter'] = window.CuraAPI.theme.colors.getColor(`success-lighter`);
+        this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor(`error-lighter`);
+        this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor(`error-dark`);
+        this.styles['--error-darker'] = window.CuraAPI.theme.colors.getColor(`error-darker`);
+        this.styles['--error-base'] = window.CuraAPI.theme.colors.getColor(`error-base`);
+        this.styles['--info-base'] = window.CuraAPI.theme.colors.getColor(`info-base`);
+        this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
+        this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
+        this.styles['--font-color'] = window.CuraAPI.theme.fonts.getColor();
+        this.weights = window.CuraAPI.theme.fonts.getWeights();
+        this.breakpoints = window.CuraAPI.theme.breakpoints.get();
+        this.styles['--font-weight-medium'] = this.weights.medium;
+        this.styles['--font-weight-bold'] = this.weights.bold;
+        this.styles['--font-weight-regular'] = this.weights.regular;
+    }
+    componentWillLoad() {
+        this.currentValue = this.value;
+    }
+    getClasses() {
+        return {
+            [this.size.toLowerCase()]: true,
+            disabled: !!this.disabled,
+            isLoading: !!this.isLoading,
+            isFocused: this.isFocused && !this.disabled && !this.readOnly && !this.isLoading,
+            isHovered: this.isHovered,
+            [this.status]: true,
+            resizable: !!this.resizable,
+        };
+    }
+    getLabelColor() {
+        if (!!this.disabled) {
+            return 'neutral-medium';
+        }
+        else if (((this.isFocused || this.isHovered || this.status === 'success' || this.status === 'error') && !this.readOnly) || this.isHovered) {
+            return 'neutral-black';
+        }
+        else {
+            return 'neutral-dark';
+        }
+    }
+    renderIcon() {
+        if (this.iconName === '' && this.status === 'default') {
+            return;
+        }
+        if (this.status === 'error' && this.hideErrorIcon) {
+            return;
+        }
+        const baseIconSize = this.size === 'large' ? 20 : 16;
+        const iconMap = {
+            loading: { name: this.iconName, color: 'primary-base' },
+            success: { name: 'checkCircle', color: 'success-dark' },
+            error: { name: 'alertCircle', color: 'error-dark' },
+            default: { name: this.iconName, color: 'neutral-dark' },
+            disabled: { name: this.iconName, color: 'neutral-medium' },
+        };
+        const iconConfig = iconMap[this.isLoading ? 'loading' : this.disabled ? 'disabled' : this.status || 'default'];
+        return (h("div", { class: "feedback-icon", style: this.styles }, h("cura-icon", { name: iconConfig.name, iconset: "default", size: baseIconSize, color: iconConfig.color })));
+    }
+    renderHelperText() {
+        const isError = this.status === 'error';
+        const isSuccess = this.status === 'success';
+        const isDefault = this.status === 'default';
+        const helperTextSize = this.size === 'large' ? 'small' : 'xsmall';
+        const colorText = (() => {
+            if (this.disabled)
+                return 'neutral-medium';
+            if (this.isLoading)
+                return 'primary-base';
+            if (this.isFocused || this.isHovered)
+                return 'neutral-black';
+            return 'neutral-dark';
+        })();
+        return (h("div", { style: this.styles, class: "helper-text", part: "cura-input-text-helper" }, isDefault && (h("cura-label", { size: helperTextSize, color: colorText }, h("slot", null))), isError && (h("cura-label", { size: helperTextSize, lineHeight: "xsmall", color: "error-dark" }, h("slot", null))), isSuccess && (h("cura-label", { size: helperTextSize, lineHeight: "xsmall", color: "success-dark" }, h("slot", null)))));
+    }
+    renderMaxLength() {
+        var _a;
+        if (!this.maxlength)
+            return null;
+        return (h("div", { class: "max-length" }, h("cura-label", { size: "xsmall", weight: 'bold', color: "neutral-dark" }, `${((_a = this.currentValue) === null || _a === void 0 ? void 0 : _a.toString().length) || 0}`), h("cura-label", { size: "xsmall", weight: 'bold', color: "neutral-darker" }, `/${this.maxlength}`)));
+    }
+    handleMouseEnter() {
+        this.isHovered = true;
+    }
+    handleMouseLeave() {
+        this.isHovered = false;
+    }
+    handleClearInput() {
+        this.currentValue = '';
+        this.inputRef.value = '';
+        this.valueChange.emit(this.currentValue);
+        this.inputClear.emit(this.currentValue);
+        this.setFocus();
+    }
+    handleInputFocus() {
+        this.isFocused = true;
+    }
+    handleInputBlur() {
+        setTimeout(() => {
+            this.isFocused = false;
+        }, 150);
+    }
+    handleInputChange(event) {
+        const inputValue = event.target.value;
+        this.valueChange.emit(inputValue);
+        this.handleTextInputChange(inputValue);
+        this.internals.setFormValue(this.currentValue);
+    }
+    handleTextInputChange(inputValue) {
+        this.currentValue = inputValue;
+    }
+    render() {
+        return (h(Host, { key: '05f1a1a3b51e4bb1bc54cab3c8d5b6062a95d32a', role: "textbox", "aria-disabled": this.disabled, "aria-required": this.required, "aria-invalid": this.status === 'error' }, h("div", { key: '47eb10b6f3c3e697ae1558fd53d4d9cb9a2b6065', style: this.styles, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), class: Object.assign({ 'cura-textarea-group': true }, this.getClasses()) }, h("div", { key: 'c090b7b2eb353dbe929810c4835f49860bfe9c80', class: "input-wrapper" }, this.label && (h("cura-label", { key: 'a957db2fb6e2779d3c33f7504124cff353e41c2c', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getLabelColor() }, this.label, " ", this.required && h("span", { key: '1928a3597976bd5b1f4076c49dae803a69139cb5', class: "required" }, "* "))), h("div", { key: '58c1cab70c203e9ca106ddec09d606943814b65c', class: "cura-textarea-field", part: "cura-textarea-field", style: this.fieldStyles }, this.renderIcon(), h("textarea", { key: 'd6a59a727dfc5a8655ea496111dd46718101b0be', name: this.name ? this.name : '', onBlur: this.handleInputBlur.bind(this), onFocus: this.handleInputFocus.bind(this), onInput: event => this.handleInputChange(event), class: this.getClasses(), style: this.styles, placeholder: this.placeholder, disabled: this.disabled || this.isLoading, required: this.required, readonly: this.readOnly, maxlength: this.maxlength, value: this.currentValue !== undefined && this.currentValue !== null ? this.currentValue : '', autocomplete: this.autocomplete }), this.isLoading && h("cura-loader-circle", { key: '0476538f94ba6ffc0dc89b4bd125c048f420d415', size: this.size === 'large' ? 'medium' : 'small', color: "primary-base" })), h("div", { key: '84b14a2904cfa97adc766bd65cbbf48cb390d6c6', class: "helper-max-wrapper" }, this.renderHelperText(), " ", this.renderMaxLength())))));
+    }
+    static get is() { return "cura-input-textarea"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-input-textarea.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-input-textarea.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'error' | 'success' | 'default' | string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates input status (default: 'default')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "status",
+                "defaultValue": "'default'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large' | string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the textarea: 'small', 'medium', or 'large' (default: 'medium')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text for the textarea"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name for the textarea"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "placeholder",
+                "defaultValue": "null"
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial value of the textarea"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "iconName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Cura icon name to display"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "icon-name",
+                "defaultValue": "''"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text displayed below the textarea"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "helper-text"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the textarea is disabled (default: false)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the textarea is required (default: false)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | undefined",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum length of the textarea value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "maxlength"
+            },
+            "readOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the textarea is read-only (default: false)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "read-only",
+                "defaultValue": "false"
+            },
+            "resizable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the textarea is resizable (default: true)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "resizable",
+                "defaultValue": "true"
+            },
+            "isLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the textarea is in loading state (default: false)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-loading",
+                "defaultValue": "false"
+            },
+            "hideErrorIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Removes the alertCircle icon when necessary (as used in CuraDropdownSearch)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-error-icon",
+                "defaultValue": "false"
+            },
+            "autocomplete": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the textarea should have autocomplete"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "autocomplete",
+                "defaultValue": "'on'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isHovered": {},
+            "isFocused": {},
+            "currentValue": {},
+            "fieldStyles": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                }
+            }, {
+                "method": "inputClear",
+                "name": "inputClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get attachInternalsMemberName() { return "internals"; }
+}