@c2n/textarea 0.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,19 @@
+# @c2n/textarea
+
+Multiline Lit input with native resizing, helper and error text, character counting, and CSS custom properties.
+
+```sh
+npm install @c2n/textarea
+```
+
+```js
+import '@c2n/textarea'
+```
+
+```html
+<c2-textarea label="Message" name="message" rows="4" maxlength="500" placeholder="Write a message…"></c2-textarea>
+```
+
+Read `value` on `input` or `change`; set the property to update text. Use `disabled`, `readonly`, `required`, `minlength`, `maxlength`, and `resize="none|vertical|horizontal|both"`. `help` and the `supporting-text` slot provide guidance; `error` with `error-text` displays feedback. Call `focus()`, `blur()`, `select()`, `setSelectionRange()`, `reset()`, `checkValidity()`, `reportValidity()`, or `setCustomValidity()` as needed. Await `updateComplete` after property changes before calling native methods.
+
+This component does not automatically participate in enclosing form submission or reset. Read its value and reset it explicitly in your form handlers.

package/dist/textarea.js

@@ -0,0 +1,170 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+import { redispatchEvent } from "@c2n/core/dom-helper.js";
+//#region src/textarea.scss?inline
+var textarea_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: inline-flex;\n  flex-direction: column;\n  vertical-align: middle;\n  max-width: 100%;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\ntextarea {\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  margin: 0;\n  resize: vertical;\n  text-align: inherit;\n  min-height: var(--c2-textarea__container--min-height,80px);\n  padding: var(--c2-textarea__container--padding,10px 12px);\n  border: var(--c2-textarea__container--border,1px solid #bcbcc6);\n  border-radius: var(--c2-textarea__container--border-radius,6px);\n  background: var(--c2-textarea__container--background,#ffffff);\n  color: var(--c2-textarea__container--color,#18181b);\n  font-family: var(--c2-textarea__container--font-family,inherit);\n  font-size: var(--c2-textarea__container--font-size,14px);\n  line-height: var(--c2-textarea__container--line-height,20px);\n}\ntextarea::placeholder {\n  color: var(--c2-textarea__placeholder--color,#71717a);\n  opacity: 1;\n}\ntextarea:hover:not(:disabled) {\n  border: var(--c2-textarea__container__hover--border,1px solid #a1a1aa);\n}\ntextarea:focus {\n  border: var(--c2-textarea__container__focus--border,1px solid #476ef9);\n  outline: var(--c2-textarea__container__focus--outline,3px solid rgba(71, 110, 249, 0.2));\n}\ntextarea:read-only {\n  background: var(--c2-textarea__container__read-only--background,#fafafa);\n}\ntextarea:disabled {\n  cursor: not-allowed;\n  opacity: var(--c2-textarea__container__disabled--opacity,0.38);\n}\n\n:host([resize=none]) textarea {\n  resize: none;\n}\n\n:host([resize=horizontal]) textarea {\n  resize: horizontal;\n}\n\n:host([resize=both]) textarea {\n  resize: both;\n}\n\n:host([error]:not([disabled])) textarea {\n  border: var(--c2-textarea__container__error--border,1px solid #dc2626);\n}\n:host([error]:not([disabled])) textarea:focus {\n  outline: var(--c2-textarea__container__error__focus--outline,3px solid rgba(220, 38, 38, 0.2));\n}\n:host([error]:not([disabled])) .supporting-text {\n  color: var(--c2-textarea__supporting-text__error--color,#dc2626);\n}\n\n.supporting-text {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--c2-textarea__supporting-text--gap,4px);\n  margin-top: var(--c2-textarea__supporting-text--gap,4px);\n  font-size: var(--c2-textarea__supporting-text--font-size,12px);\n  line-height: var(--c2-textarea__supporting-text--line-height,16px);\n  color: var(--c2-textarea__supporting-text--color,#71717a);\n}\n\n[hidden] {\n  display: none;\n}\n\n.message {\n  min-width: 0;\n  overflow-wrap: anywhere;\n}\n\n.counter {\n  flex: none;\n  font-variant-numeric: tabular-nums;\n  margin-inline-start: auto;\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/textarea.ts
+var Textarea = class Textarea extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = "";
+		this.name = "";
+		this.label = "";
+		this.ariaLabel = null;
+		this.placeholder = "";
+		this.rows = 3;
+		this.cols = 20;
+		this.resize = "vertical";
+		this.wrap = "soft";
+		this.autocomplete = "";
+		this.disabled = false;
+		this.readOnly = false;
+		this.required = false;
+		this.maxLength = -1;
+		this.minLength = -1;
+		this.error = false;
+		this.errorText = "";
+		this.help = "";
+		this.dirty = false;
+		this.hasSupportingSlot = false;
+	}
+	static {
+		this.styles = unsafeCSS(textarea_default);
+	}
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (name === "value" && this.dirty) return;
+		super.attributeChangedCallback(name, oldValue, newValue);
+	}
+	/** Focuses the native textarea. */
+	focus(options) {
+		this.input?.focus(options);
+	}
+	blur() {
+		this.input?.blur();
+	}
+	/** Selects all text. */
+	select() {
+		this.input?.select();
+	}
+	/** Selects a range of text using native UTF-16 character offsets. */
+	setSelectionRange(start, end, direction) {
+		this.input?.setSelectionRange(start, end, direction);
+	}
+	/** Whether the user has edited the value since the last reset. */
+	isDirty() {
+		return this.dirty;
+	}
+	/** Restores the value attribute and clears the error state. */
+	reset() {
+		this.dirty = false;
+		this.value = this.getAttribute("value") ?? "";
+		this.error = false;
+	}
+	/** Checks the native textarea constraints. Await updateComplete after changing properties. */
+	checkValidity() {
+		return this.input?.checkValidity() ?? true;
+	}
+	/** Shows the browser's validation feedback. */
+	reportValidity() {
+		return this.input?.reportValidity() ?? true;
+	}
+	/** Sets or clears the native validation message. */
+	setCustomValidity(message) {
+		this.input?.setCustomValidity(message);
+	}
+	handleInput(event) {
+		this.dirty = true;
+		this.value = event.target.value;
+		redispatchEvent(this, event);
+	}
+	handleChange(event) {
+		this.value = event.target.value;
+		redispatchEvent(this, event);
+	}
+	handleSelect(event) {
+		redispatchEvent(this, event);
+	}
+	handleSlotChange(event) {
+		this.hasSupportingSlot = event.target.assignedNodes({ flatten: true }).length > 0;
+	}
+	render() {
+		const invalid = this.error && !this.disabled;
+		const showError = invalid && !!this.errorText;
+		const supporting = !!this.help || this.hasSupportingSlot || showError || this.maxLength >= 0;
+		return html` <textarea
+        part="textarea"
+        name=${ifDefined(this.name || void 0)}
+        aria-label=${ifDefined(this.label || this.ariaLabel || void 0)}
+        aria-describedby=${supporting ? "supporting-text" : nothing}
+        aria-invalid=${invalid ? "true" : nothing}
+        placeholder=${this.placeholder}
+        rows=${this.rows > 0 ? this.rows : 3}
+        cols=${this.cols > 0 ? this.cols : 20}
+        wrap=${this.wrap}
+        autocomplete=${ifDefined(this.autocomplete || void 0)}
+        maxlength=${ifDefined(this.maxLength >= 0 ? this.maxLength : void 0)}
+        minlength=${ifDefined(this.minLength >= 0 ? this.minLength : void 0)}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readOnly}
+        ?required=${this.required}
+        .value=${live(this.value)}
+        @input=${this.handleInput}
+        @change=${this.handleChange}
+        @select=${this.handleSelect}
+      ></textarea>
+      <div id="supporting-text" part="supporting-text" class="supporting-text" ?hidden=${!supporting}>
+        <span class="message">
+          <slot name="supporting-text" ?hidden=${showError} @slotchange=${this.handleSlotChange}>${this.help}</slot>
+          ${showError ? html`<span role="alert">${this.errorText}</span>` : nothing}
+        </span>
+        ${this.maxLength >= 0 ? html`<span class="counter">${this.value.length} / ${this.maxLength}</span>` : nothing}
+      </div>`;
+	}
+};
+__decorate([property()], Textarea.prototype, "value", void 0);
+__decorate([property()], Textarea.prototype, "name", void 0);
+__decorate([property()], Textarea.prototype, "label", void 0);
+__decorate([property({ attribute: "aria-label" })], Textarea.prototype, "ariaLabel", void 0);
+__decorate([property()], Textarea.prototype, "placeholder", void 0);
+__decorate([property({ type: Number })], Textarea.prototype, "rows", void 0);
+__decorate([property({ type: Number })], Textarea.prototype, "cols", void 0);
+__decorate([property({ reflect: true })], Textarea.prototype, "resize", void 0);
+__decorate([property()], Textarea.prototype, "wrap", void 0);
+__decorate([property()], Textarea.prototype, "autocomplete", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Textarea.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Textarea.prototype, "readOnly", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Textarea.prototype, "required", void 0);
+__decorate([property({ type: Number })], Textarea.prototype, "maxLength", void 0);
+__decorate([property({ type: Number })], Textarea.prototype, "minLength", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Textarea.prototype, "error", void 0);
+__decorate([property({ attribute: "error-text" })], Textarea.prototype, "errorText", void 0);
+__decorate([property()], Textarea.prototype, "help", void 0);
+__decorate([state()], Textarea.prototype, "dirty", void 0);
+__decorate([state()], Textarea.prototype, "hasSupportingSlot", void 0);
+__decorate([query("textarea")], Textarea.prototype, "input", void 0);
+Textarea = __decorate([customElement("c2-textarea")], Textarea);
+//#endregion
+export { Textarea };

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@c2n/textarea",
+  "version": "0.0.6",
+  "type": "module",
+  "main": "dist/textarea.js",
+  "exports": {
+    ".": {
+      "default": "./dist/textarea.js",
+      "types": "./types/src/textarea.d.ts"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "textarea",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.6",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+}

package/types/src/textarea.d.ts

@@ -0,0 +1,102 @@
+import { LitElement } from 'lit';
+/**
+ * Multiline text input with native resizing, helper text, error feedback and a character counter.
+ * @tag c2-textarea
+ * @slot supporting-text - Rich helper content below the field; error-text takes precedence when invalid.
+ * @event {InputEvent} input - Fired on each edit, after value is updated.
+ * @event {Event} change - Fired when an edit is committed.
+ * @event {Event} select - Fired when text is selected.
+ * @cssproperty {pixel} [--c2-textarea__container--min-height=80px]
+ * @cssproperty {padding} [--c2-textarea__container--padding=10px 12px]
+ * @cssproperty {border} [--c2-textarea__container--border=1px solid #bcbcc6]
+ * @cssproperty {border-radius} [--c2-textarea__container--border-radius=6px]
+ * @cssproperty {color} [--c2-textarea__container--background=#ffffff]
+ * @cssproperty {color} [--c2-textarea__container--color=#18181b]
+ * @cssproperty {font-family} [--c2-textarea__container--font-family=inherit]
+ * @cssproperty {font-size} [--c2-textarea__container--font-size=14px]
+ * @cssproperty {pixel} [--c2-textarea__container--line-height=20px]
+ * @cssproperty {border} [--c2-textarea__container__hover--border=1px solid #a1a1aa]
+ * @cssproperty {border} [--c2-textarea__container__focus--border=1px solid #476ef9]
+ * @cssproperty {outline} [--c2-textarea__container__focus--outline=3px solid rgba(71, 110, 249, 0.2)]
+ * @cssproperty {border} [--c2-textarea__container__error--border=1px solid #dc2626]
+ * @cssproperty {outline} [--c2-textarea__container__error__focus--outline=3px solid rgba(220, 38, 38, 0.2)]
+ * @cssproperty {color} [--c2-textarea__container__read-only--background=#fafafa]
+ * @cssproperty {opacity} [--c2-textarea__container__disabled--opacity=0.38]
+ * @cssproperty {color} [--c2-textarea__placeholder--color=#71717a]
+ * @cssproperty {pixel} [--c2-textarea__supporting-text--gap=4px]
+ * @cssproperty {font-size} [--c2-textarea__supporting-text--font-size=12px]
+ * @cssproperty {pixel} [--c2-textarea__supporting-text--line-height=16px]
+ * @cssproperty {color} [--c2-textarea__supporting-text--color=#71717a]
+ * @cssproperty {color} [--c2-textarea__supporting-text__error--color=#dc2626]
+ */
+export declare class Textarea extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Current text. Set this property to update the value programmatically. */
+    value: string;
+    /** Name forwarded to the native control. */
+    name: string;
+    /** Accessible name for the native textarea. */
+    label: string;
+    /** Accessible name forwarded from the host. */
+    ariaLabel: string | null;
+    /** Hint shown when empty. */
+    placeholder: string;
+    /** Visible number of text lines. */
+    rows: number;
+    /** Native width hint, used when no CSS width is set. */
+    cols: number;
+    /** Allowed user resize directions. */
+    resize: 'none' | 'vertical' | 'horizontal' | 'both';
+    /** Native line wrapping mode. */
+    wrap: 'soft' | 'hard' | 'off';
+    /** Browser autocomplete hint. */
+    autocomplete: string;
+    /** Prevents editing and removes the control from keyboard navigation. */
+    disabled: boolean;
+    /** Prevents editing while allowing selection. */
+    readOnly: boolean;
+    /** Requires a nonempty value for native validation. */
+    required: boolean;
+    /** Maximum character count; -1 means unlimited. */
+    maxLength: number;
+    /** Minimum character count; -1 means no minimum. */
+    minLength: number;
+    /** Displays the error border and error text. */
+    error: boolean;
+    /** Message displayed when error is true. */
+    errorText: string;
+    /** Helper text below the control. */
+    help: string;
+    private dirty;
+    private hasSupportingSlot;
+    private input?;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /** Focuses the native textarea. */
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    /** Selects all text. */
+    select(): void;
+    /** Selects a range of text using native UTF-16 character offsets. */
+    setSelectionRange(start: number, end: number, direction?: 'forward' | 'backward' | 'none'): void;
+    /** Whether the user has edited the value since the last reset. */
+    isDirty(): boolean;
+    /** Restores the value attribute and clears the error state. */
+    reset(): void;
+    /** Checks the native textarea constraints. Await updateComplete after changing properties. */
+    checkValidity(): boolean;
+    /** Shows the browser's validation feedback. */
+    reportValidity(): boolean;
+    /** Sets or clears the native validation message. */
+    setCustomValidity(message: string): void;
+    private handleInput;
+    private handleChange;
+    private handleSelect;
+    private handleSlotChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-textarea': Textarea;
+    }
+}
+//# sourceMappingURL=textarea.d.ts.map

package/types/src/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAA;AAO1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAAoB;IAE1C,4EAA4E;IAChE,KAAK,SAAK;IACtB,4CAA4C;IAChC,IAAI,SAAK;IACrB,+CAA+C;IACnC,KAAK,SAAK;IACtB,+CAA+C;IACC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAO;IAC/E,6BAA6B;IACjB,WAAW,SAAK;IAC5B,oCAAoC;IACR,IAAI,SAAI;IACpC,wDAAwD;IAC5B,IAAI,SAAK;IACrC,sCAAsC;IACT,MAAM,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAa;IAC7F,iCAAiC;IACrB,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAS;IAClD,iCAAiC;IACrB,YAAY,SAAK;IAC7B,yEAAyE;IAC7B,QAAQ,UAAQ;IAC5D,iDAAiD;IACL,QAAQ,UAAQ;IAC5D,uDAAuD;IACX,QAAQ,UAAQ;IAC5D,mDAAmD;IACvB,SAAS,SAAK;IAC1C,oDAAoD;IACxB,SAAS,SAAK;IAC1C,gDAAgD;IACJ,KAAK,UAAQ;IACzD,4CAA4C;IACL,SAAS,SAAK;IACrD,qCAAqC;IACzB,IAAI,SAAK;IAEZ,OAAO,CAAC,KAAK,CAAQ;IACrB,OAAO,CAAC,iBAAiB,CAAQ;IACvB,OAAO,CAAC,KAAK,CAAC,CAAqB;IAE7C,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAKhG,mCAAmC;IAC1B,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAG5B,IAAI;IAGb,wBAAwB;IACxB,MAAM;IAGN,qEAAqE;IACrE,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM;IAGzF,kEAAkE;IAClE,OAAO;IAGP,+DAA+D;IAC/D,KAAK;IAKL,8FAA8F;IAC9F,aAAa;IAGb,+CAA+C;IAC/C,cAAc;IAGd,oDAAoD;IACpD,iBAAiB,CAAC,OAAO,EAAE,MAAM;IAIjC,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;IAGpB,OAAO,CAAC,gBAAgB;IAIf,MAAM;CAiChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,QAAQ,CAAA;KACxB;CACF"}