@tessera-ui/core 0.4.0

package/dist/collection/components/textarea/textarea.js

@@ -0,0 +1,526 @@
+import { h, Host } from "@stencil/core";
+import { generateId } from "../../utils/aria";
+/**
+ * @part base - The outer wrapper.
+ * @part label - The label element.
+ * @part textarea - The native textarea element.
+ * @part help-text - The help text wrapper.
+ * @part error-text - The error message wrapper.
+ */
+export class TsTextarea {
+    hostEl;
+    textareaEl;
+    inputId = generateId('ts-textarea');
+    /** The textarea's value. */
+    value = '';
+    /** Placeholder text. */
+    placeholder;
+    /** Renders the textarea as disabled. */
+    disabled = false;
+    /** Renders the textarea as readonly. */
+    readonly = false;
+    /** The textarea size. */
+    size = 'md';
+    /** Label text displayed above the textarea. */
+    label;
+    /** Help text displayed below the textarea. */
+    helpText;
+    /** Renders the textarea in an error state. */
+    error = false;
+    /** Error message displayed below the textarea. */
+    errorMessage;
+    /** Makes the textarea required. */
+    required = false;
+    /** Name attribute for form submission. */
+    name;
+    /** Number of visible text rows. */
+    rows = 3;
+    /** Resize behavior. */
+    resize = 'vertical';
+    /** Maximum character length. */
+    maxlength;
+    /** Whether the textarea is currently focused. */
+    hasFocus = false;
+    /** Emitted on every keystroke. */
+    tsInput;
+    /** Emitted when the value changes (on blur / commit). */
+    tsChange;
+    /** Emitted when the textarea gains focus. */
+    tsFocus;
+    /** Emitted when the textarea loses focus. */
+    tsBlur;
+    handleValueChange(newValue, oldValue) {
+        if (newValue !== oldValue && this.textareaEl) {
+            this.textareaEl.value = newValue;
+        }
+    }
+    /** Programmatically focus the textarea. */
+    async setFocus() {
+        this.textareaEl?.focus();
+    }
+    /** Programmatically select the textarea text. */
+    async selectText() {
+        this.textareaEl?.select();
+    }
+    handleInput = (event) => {
+        const target = event.target;
+        const previousValue = this.value;
+        this.value = target.value;
+        this.tsInput.emit({ value: this.value, previousValue });
+    };
+    handleChange = () => {
+        this.tsChange.emit({ value: this.value, previousValue: this.value });
+    };
+    handleFocus = () => {
+        this.hasFocus = true;
+        this.tsFocus.emit();
+    };
+    handleBlur = () => {
+        this.hasFocus = false;
+        this.tsBlur.emit();
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const hasError = this.error && !!this.errorMessage;
+        const labelId = `${this.inputId}-label`;
+        const helpId = `${this.inputId}-help`;
+        const errorId = `${this.inputId}-error`;
+        return (h(Host, { key: '7bdc41a5aa35af6300e17a214ef1a2606cc57acc', class: {
+                'ts-textarea': true,
+                [`ts-textarea--${this.size}`]: true,
+                'ts-textarea--focused': this.hasFocus,
+                'ts-textarea--disabled': this.disabled,
+                'ts-textarea--error': this.error,
+            } }, this.label && (h("label", { key: 'b3e4691906f93a375c9064f28810c1f21b4ef465', class: "textarea__label", part: "label", id: labelId, htmlFor: this.inputId }, this.label, this.required && h("span", { key: 'f69fe7f1f6dce0815a987517f426bc9064a82bff', class: "textarea__required", "aria-hidden": "true" }, " *"))), h("div", { key: '3af1749e1566071c6bb786a8f69d14be554ee393', class: {
+                'textarea__wrapper': true,
+                'textarea__wrapper--focused': this.hasFocus,
+                'textarea__wrapper--error': this.error,
+                'textarea__wrapper--disabled': this.disabled,
+            }, part: "base" }, h("textarea", { key: '91722d413599317ffa74aca132d62e7f4e301340', ref: (el) => (this.textareaEl = el), id: this.inputId, class: "textarea__native", part: "textarea", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, name: this.name, rows: this.rows, "aria-labelledby": this.label ? labelId : undefined, "aria-describedby": hasError ? errorId : this.helpText ? helpId : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), hasError && (h("div", { key: '6b269961eec546d027f64bc2d44ef1790f72a42c', class: "textarea__error", part: "error-text", id: errorId, role: "alert" }, this.errorMessage)), !hasError && this.helpText && (h("div", { key: 'ec535a5669fa2dec0b0a4b2aa85233b6f84c136a', class: "textarea__help", part: "help-text", id: helpId }, this.helpText))));
+    }
+    static get is() { return "ts-textarea"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["textarea.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["textarea.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The textarea's value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders the textarea as disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders the textarea as readonly."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TsSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "TsSize": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsSize",
+                            "referenceLocation": "TsSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The textarea size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text displayed above the textarea."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "helpText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Help text displayed below the textarea."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "help-text"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders the textarea in an error state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message displayed below the textarea."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the textarea required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute for form submission."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of visible text rows."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "3"
+            },
+            "resize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'vertical' | 'horizontal' | 'both'",
+                    "resolved": "\"both\" | \"horizontal\" | \"none\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resize behavior."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "resize",
+                "defaultValue": "'vertical'"
+            },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum character length."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "maxlength"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsInput",
+                "name": "tsInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on every keystroke."
+                },
+                "complexType": {
+                    "original": "TsChangeEventDetail<string>",
+                    "resolved": "TsChangeEventDetail<string>",
+                    "references": {
+                        "TsChangeEventDetail": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsChangeEventDetail",
+                            "referenceLocation": "TsChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "tsChange",
+                "name": "tsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value changes (on blur / commit)."
+                },
+                "complexType": {
+                    "original": "TsChangeEventDetail<string>",
+                    "resolved": "TsChangeEventDetail<string>",
+                    "references": {
+                        "TsChangeEventDetail": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsChangeEventDetail",
+                            "referenceLocation": "TsChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "tsFocus",
+                "name": "tsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the textarea gains focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tsBlur",
+                "name": "tsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the textarea loses focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically focus the textarea.",
+                    "tags": []
+                }
+            },
+            "selectText": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically select the textarea text.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+}
+//# sourceMappingURL=textarea.js.map

package/dist/collection/components/textarea/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, Watch, h, Host, Element, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize, TsChangeEventDetail } from '../../types';\nimport { generateId } from '../../utils/aria';\n\n/**\n * @part base - The outer wrapper.\n * @part label - The label element.\n * @part textarea - The native textarea element.\n * @part help-text - The help text wrapper.\n * @part error-text - The error message wrapper.\n */\n@Component({\n  tag: 'ts-textarea',\n  styleUrl: 'textarea.css',\n  shadow: true,\n})\nexport class TsTextarea {\n  @Element() hostEl!: HTMLElement;\n\n  private textareaEl?: HTMLTextAreaElement;\n  private inputId = generateId('ts-textarea');\n\n  /** The textarea's value. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** Placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Renders the textarea as disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Renders the textarea as readonly. */\n  @Prop({ reflect: true }) readonly = false;\n\n  /** The textarea size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Label text displayed above the textarea. */\n  @Prop() label?: string;\n\n  /** Help text displayed below the textarea. */\n  @Prop() helpText?: string;\n\n  /** Renders the textarea in an error state. */\n  @Prop({ reflect: true }) error = false;\n\n  /** Error message displayed below the textarea. */\n  @Prop() errorMessage?: string;\n\n  /** Makes the textarea required. */\n  @Prop({ reflect: true }) required = false;\n\n  /** Name attribute for form submission. */\n  @Prop() name?: string;\n\n  /** Number of visible text rows. */\n  @Prop() rows = 3;\n\n  /** Resize behavior. */\n  @Prop({ reflect: true }) resize: 'none' | 'vertical' | 'horizontal' | 'both' = 'vertical';\n\n  /** Maximum character length. */\n  @Prop() maxlength?: number;\n\n  /** Whether the textarea is currently focused. */\n  @State() hasFocus = false;\n\n  /** Emitted on every keystroke. */\n  @Event({ eventName: 'tsInput' }) tsInput!: EventEmitter<TsChangeEventDetail<string>>;\n\n  /** Emitted when the value changes (on blur / commit). */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<TsChangeEventDetail<string>>;\n\n  /** Emitted when the textarea gains focus. */\n  @Event({ eventName: 'tsFocus' }) tsFocus!: EventEmitter<void>;\n\n  /** Emitted when the textarea loses focus. */\n  @Event({ eventName: 'tsBlur' }) tsBlur!: EventEmitter<void>;\n\n  @Watch('value')\n  handleValueChange(newValue: string, oldValue: string): void {\n    if (newValue !== oldValue && this.textareaEl) {\n      this.textareaEl.value = newValue;\n    }\n  }\n\n  /** Programmatically focus the textarea. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.textareaEl?.focus();\n  }\n\n  /** Programmatically select the textarea text. */\n  @Method()\n  async selectText(): Promise<void> {\n    this.textareaEl?.select();\n  }\n\n  private handleInput = (event: Event): void => {\n    const target = event.target as HTMLTextAreaElement;\n    const previousValue = this.value;\n    this.value = target.value;\n    this.tsInput.emit({ value: this.value, previousValue });\n  };\n\n  private handleChange = (): void => {\n    this.tsChange.emit({ value: this.value, previousValue: this.value });\n  };\n\n  private handleFocus = (): void => {\n    this.hasFocus = true;\n    this.tsFocus.emit();\n  };\n\n  private handleBlur = (): void => {\n    this.hasFocus = false;\n    this.tsBlur.emit();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const hasError = this.error && !!this.errorMessage;\n    const labelId = `${this.inputId}-label`;\n    const helpId = `${this.inputId}-help`;\n    const errorId = `${this.inputId}-error`;\n\n    return (\n      <Host\n        class={{\n          'ts-textarea': true,\n          [`ts-textarea--${this.size}`]: true,\n          'ts-textarea--focused': this.hasFocus,\n          'ts-textarea--disabled': this.disabled,\n          'ts-textarea--error': this.error,\n        }}\n      >\n        {this.label && (\n          <label class=\"textarea__label\" part=\"label\" id={labelId} htmlFor={this.inputId}>\n            {this.label}\n            {this.required && <span class=\"textarea__required\" aria-hidden=\"true\"> *</span>}\n          </label>\n        )}\n\n        <div\n          class={{\n            'textarea__wrapper': true,\n            'textarea__wrapper--focused': this.hasFocus,\n            'textarea__wrapper--error': this.error,\n            'textarea__wrapper--disabled': this.disabled,\n          }}\n          part=\"base\"\n        >\n          <textarea\n            ref={(el) => (this.textareaEl = el)}\n            id={this.inputId}\n            class=\"textarea__native\"\n            part=\"textarea\"\n            value={this.value}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            required={this.required}\n            maxlength={this.maxlength}\n            name={this.name}\n            rows={this.rows}\n            aria-labelledby={this.label ? labelId : undefined}\n            aria-describedby={hasError ? errorId : this.helpText ? helpId : undefined}\n            aria-invalid={this.error ? 'true' : undefined}\n            aria-required={this.required ? 'true' : undefined}\n            onInput={this.handleInput}\n            onChange={this.handleChange}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n        </div>\n\n        {hasError && (\n          <div class=\"textarea__error\" part=\"error-text\" id={errorId} role=\"alert\">\n            {this.errorMessage}\n          </div>\n        )}\n\n        {!hasError && this.helpText && (\n          <div class=\"textarea__help\" part=\"help-text\" id={helpId}>\n            {this.helpText}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}