@c2n/textarea 0.0.6 → 0.0.7

package/dist/textarea.js

@@ -1,5 +1,6 @@
 import { LitElement, html, nothing, unsafeCSS } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
+import { property, query, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { live } from "lit/directives/live.js";
 import { redispatchEvent } from "@c2n/core/dom-helper.js";
@@ -18,6 +19,9 @@ function __decorate(decorators, target, key, desc) {
 var Textarea = class Textarea extends LitElement {
 	constructor(..._args) {
 		super(..._args);
+		this.internals = this.attachInternals();
+		this.customValidityMessage = "";
+		this.disabledByForm = false;
 		this.value = "";
 		this.name = "";
 		this.label = "";
@@ -39,9 +43,29 @@ var Textarea = class Textarea extends LitElement {
 		this.dirty = false;
 		this.hasSupportingSlot = false;
 	}
+	static {
+		this.formAssociated = true;
+	}
 	static {
 		this.styles = unsafeCSS(textarea_default);
 	}
+	/** The containing form, when this control is associated with one. */
+	get form() {
+		return this.internals.form;
+	}
+	/** Labels associated with this form control. */
+	get labels() {
+		return this.internals.labels;
+	}
+	get validity() {
+		return this.internals.validity;
+	}
+	get validationMessage() {
+		return this.internals.validationMessage;
+	}
+	get willValidate() {
+		return this.internals.willValidate;
+	}
 	attributeChangedCallback(name, oldValue, newValue) {
 		if (name === "value" && this.dirty) return;
 		super.attributeChangedCallback(name, oldValue, newValue);
@@ -71,17 +95,43 @@ var Textarea = class Textarea extends LitElement {
 		this.value = this.getAttribute("value") ?? "";
 		this.error = false;
 	}
+	formResetCallback() {
+		this.reset();
+	}
+	formDisabledCallback(disabled) {
+		this.disabledByForm = disabled && !this.hasAttribute("disabled");
+	}
+	formStateRestoreCallback(state) {
+		if (typeof state === "string") this.value = state;
+	}
 	/** Checks the native textarea constraints. Await updateComplete after changing properties. */
 	checkValidity() {
-		return this.input?.checkValidity() ?? true;
+		return this.internals.checkValidity();
 	}
 	/** Shows the browser's validation feedback. */
 	reportValidity() {
-		return this.input?.reportValidity() ?? true;
+		return this.internals.reportValidity();
 	}
 	/** Sets or clears the native validation message. */
 	setCustomValidity(message) {
+		this.customValidityMessage = message;
 		this.input?.setCustomValidity(message);
+		this.syncFormState();
+	}
+	updated(_changed) {
+		this.syncFormState();
+	}
+	syncFormState() {
+		this.internals.setFormValue(this.value, this.value);
+		if (!this.input || this.effectiveDisabled) {
+			this.internals.setValidity({});
+			return;
+		}
+		this.input.setCustomValidity(this.customValidityMessage);
+		this.internals.setValidity(this.input.validity, this.input.validationMessage, this.input);
+	}
+	get effectiveDisabled() {
+		return this.disabled || this.disabledByForm;
 	}
 	handleInput(event) {
 		this.dirty = true;
@@ -99,7 +149,7 @@ var Textarea = class Textarea extends LitElement {
 		this.hasSupportingSlot = event.target.assignedNodes({ flatten: true }).length > 0;
 	}
 	render() {
-		const invalid = this.error && !this.disabled;
+		const invalid = this.error && !this.effectiveDisabled;
 		const showError = invalid && !!this.errorText;
 		const supporting = !!this.help || this.hasSupportingSlot || showError || this.maxLength >= 0;
 		return html` <textarea
@@ -115,7 +165,7 @@ var Textarea = class Textarea extends LitElement {
         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}
+        ?disabled=${this.effectiveDisabled}
         ?readonly=${this.readOnly}
         ?required=${this.required}
         .value=${live(this.value)}
@@ -132,6 +182,7 @@ var Textarea = class Textarea extends LitElement {
       </div>`;
 	}
 };
+__decorate([state()], Textarea.prototype, "disabledByForm", void 0);
 __decorate([property()], Textarea.prototype, "value", void 0);
 __decorate([property()], Textarea.prototype, "name", void 0);
 __decorate([property()], Textarea.prototype, "label", void 0);

package/package.json

@@ -1,18 +1,30 @@
 {
   "name": "@c2n/textarea",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "main": "dist/textarea.js",
   "exports": {
     ".": {
-      "default": "./dist/textarea.js",
-      "types": "./types/src/textarea.d.ts"
+      "types": "./types/src/textarea.d.ts",
+      "default": "./dist/textarea.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
     },
     "./custom-elements.json": "./custom-elements.json"
   },
   "files": [
     "dist",
-    "types"
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
   ],
   "keywords": [
     "textarea",
@@ -50,12 +62,12 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.6",
+    "@c2n/core": "0.0.7",
     "lit": "3.3.3"
   },
   "devDependencies": {
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+  "gitHead": "c8db398a27f7cd417d665fdf5da455fee2d4e910"
 }

package/react.d.ts

@@ -0,0 +1,24 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/textarea. Import once, anywhere in the program:
+//
+//     import '@c2n/textarea/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { Textarea } from '@c2n/textarea'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-textarea': C2Props<Textarea>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/textarea.d.ts

@@ -1,4 +1,15 @@
-import { LitElement } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+/** Events fired by {@link Textarea}, keyed for `addEventListener`. */
+export interface TextareaEventMap {
+    input: InputEvent;
+    change: Event;
+    select: Event;
+}
+export interface Textarea {
+    addEventListener: TypedAddEventListener<Textarea, TextareaEventMap>;
+    removeEventListener: TypedRemoveEventListener<Textarea, TextareaEventMap>;
+}
 /**
  * Multiline text input with native resizing, helper text, error feedback and a character counter.
  * @tag c2-textarea
@@ -30,7 +41,11 @@ import { LitElement } from 'lit';
  * @cssproperty {color} [--c2-textarea__supporting-text__error--color=#dc2626]
  */
 export declare class Textarea extends LitElement {
+    static formAssociated: boolean;
     static styles: import("lit").CSSResult;
+    private readonly internals;
+    private customValidityMessage;
+    private disabledByForm;
     /** Current text. Set this property to update the value programmatically. */
     value: string;
     /** Name forwarded to the native control. */
@@ -70,6 +85,13 @@ export declare class Textarea extends LitElement {
     private dirty;
     private hasSupportingSlot;
     private input?;
+    /** The containing form, when this control is associated with one. */
+    get form(): HTMLFormElement | null;
+    /** Labels associated with this form control. */
+    get labels(): NodeList;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     /** Focuses the native textarea. */
     focus(options?: FocusOptions): void;
@@ -82,12 +104,18 @@ export declare class Textarea extends LitElement {
     isDirty(): boolean;
     /** Restores the value attribute and clears the error state. */
     reset(): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: string | File | FormData | null): 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;
+    protected updated(_changed: PropertyValues): void;
+    private syncFormState;
+    private get effectiveDisabled();
     private handleInput;
     private handleChange;
     private handleSelect;

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

@@ -1 +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"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/textarea.ts"],"names":[],"mappings":"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"}

package/vue.d.ts

@@ -0,0 +1,37 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/textarea. Import once, anywhere in the program:
+//
+//     import '@c2n/textarea/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { Textarea, TextareaEventMap } from '@c2n/textarea'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-textarea': DefineComponent<
+      C2Props<Textarea> & {
+        'aria-label'?: unknown
+        'error-text'?: unknown
+        onInput?: (event: TextareaEventMap['input']) => void
+        onChange?: (event: TextareaEventMap['change']) => void
+        onSelect?: (event: TextareaEventMap['select']) => void
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}