@nysds/nys-textarea 1.11.4 → 1.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/nys-textarea.js +70 -66
  2. package/dist/nys-textarea.js.map +1 -1
  3. package/package.json +4 -4
package/dist/nys-textarea.js CHANGED
@@ -1,33 +1,27 @@
1
1
  import { LitElement as y, unsafeCSS as u, html as p } from "lit";
2
2
  import { property as a } from "lit/decorators.js";
3
- import { ifDefined as l } from "lit/directives/if-defined.js";
4
- const v = ':host{--_nys-textarea-width: 100%;--_nys-textarea-border-radius: var(--nys-radius-md, 4px);--_nys-textarea-border-width: var(--nys-border-width-sm, 1px);--_nys-textarea-border-color: var(--nys-color-neutral-400, #909395);--_nys-textarea-padding: var(--nys-space-100, 8px);--_nys-textarea-gap: var(--nys-space-50, 4px);--_nys-textarea-color: var(--nys-color-ink, #1b1b1b);--_nys-textarea-color--placeholder: var( --nys-color-text-weaker, var(--nys-color-neutral-500, #797c7f) );--_nys-textarea-outline-color--hover: var(--nys-color-neutral-900, #1b1b1b);--_nys-textarea-outline-width: var(--nys-border-width-sm, 1px);--_nys-textarea-outline-color--focus: var(--nys-color-focus, #004dd1);--_nys-textarea-background-color--disabled: var( --nys-color-neutral-10, #f6f6f6 );--_nys-textarea-border-color--disabled: var( --nys-color-neutral-200, #bec0c1 );--_nys-textarea-color--disabled: var( --nys-color-text-disabled, var(--nys-color-neutral-200, #bec0c1) );--_nys-textarea-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-textarea-font-size: var(--nys-font-size-ui-md, 16px);--_nys-textarea-font-weight: var(--nys-font-weight-regular, 400);--_nys-textarea-line-height: var(--nys-font-lineheight-ui-md, 24px);--nys-textarea-letterspacing-ui: var( --nys-font-letterspacing-ui-md, var(--nys-font-letterspacing-400, .044px) )}:host([width=sm]){--_nys-textarea-width: var(--nys-form-width-sm, 88px)}:host([width=md]){--_nys-textarea-width: var(--nys-form-width-md, 200px)}:host([width=lg]){--_nys-textarea-width: var(--nys-form-width-lg, 384px)}:host([width=full]){--_nys-textarea-width: 100%;flex:1}:host([showError]){--_nys-textarea-border-color: var(--nys-color-danger, #b52c2c)}.nys-textarea{font-weight:var(--_nys-textarea-font-weight);font-family:var(--_nys-textarea-font-family);line-height:var(--_nys-textarea-line-height);letter-spacing:var(--nys-textarea-letterspacing-ui);color:var(--_nys-textarea-color);gap:var(--_nys-textarea-gap);display:flex;flex-direction:column}.nys-textarea__textarea{color:var(--_nys-textarea-color);font-size:var(--_nys-textarea-font-size);font-family:var(--_nys-textarea-font-family);border-radius:var(--_nys-textarea-border-radius);border:solid var(--_nys-textarea-border-color) var(--_nys-textarea-border-width);padding:var(--_nys-textarea-padding);width:var(--_nys-textarea-width);line-height:var(--_nys-textarea-line-height);max-width:var(--_nys-textarea-width);box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.nys-textarea__textarea::placeholder{color:var(--_nys-textarea-color--placeholder)}.nys-textarea__textarea.none{resize:none}.nys-textarea__textarea:hover:not(:disabled):not(:focus){outline:solid var(--_nys-textarea-outline-width) var(--_nys-textarea-outline-color--hover);border-color:var(--_nys-textarea-outline-color--hover)}.nys-textarea__textarea:focus{outline:solid var(--_nys-textarea-outline-width) var(--_nys-textarea-outline-color--focus);border-color:var(--_nys-textarea-outline-color--focus);caret-color:var(--_nys-textarea-outline-color--focus)}.nys-textarea__textarea:disabled,.nys-textarea__textarea:disabled::placeholder{background-color:var(--_nys-textarea-background-color--disabled);border-color:var(--_nys-textarea-border-color--disabled);color:var(--_nys-textarea-color--disabled);cursor:not-allowed}';
5
- var f = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (c, e, t, o) => {
6
- for (var n = o > 1 ? void 0 : o ? x(e, t) : e, h = c.length - 1, d; h >= 0; h--)
7
- (d = c[h]) && (n = (o ? d(e, t, n) : d(n)) || n);
8
- return o && n && f(e, t, n), n;
3
+ import { ifDefined as o } from "lit/directives/if-defined.js";
4
+ const v = ':host{--_nys-textarea-width: 100%;--_nys-textarea-border-radius: var(--nys-radius-md, 4px);--_nys-textarea-border-width: var(--nys-border-width-sm, 1px);--_nys-textarea-border-color: var(--nys-color-neutral-400, #909395);--_nys-textarea-padding: var(--nys-space-100, 8px);--_nys-textarea-gap: var(--nys-space-50, 4px);--_nys-textarea-color: var(--nys-color-ink, #1b1b1b);--_nys-textarea-color--placeholder: var(--nys-color-text-weaker, var(--nys-color-neutral-500, #797c7f));--_nys-textarea-outline-color--hover: var(--nys-color-neutral-900, #1b1b1b);--_nys-textarea-outline-width: var(--nys-border-width-sm, 1px);--_nys-textarea-outline-color--focus: var(--nys-color-focus, #004dd1);--_nys-textarea-background-color--disabled: var(--nys-color-neutral-10, #f6f6f6);--_nys-textarea-border-color--disabled: var(--nys-color-neutral-200, #bec0c1);--_nys-textarea-color--disabled: var(--nys-color-text-disabled, var(--nys-color-neutral-200, #bec0c1));--_nys-textarea-font-family: var(--nys-font-family-ui, var(--nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif));--_nys-textarea-font-size: var(--nys-font-size-ui-md, 16px);--_nys-textarea-font-weight: var(--nys-font-weight-regular, 400);--_nys-textarea-line-height: var(--nys-font-lineheight-ui-md, 24px);--nys-textarea-letterspacing-ui: var(--nys-font-letterspacing-ui-md, var(--nys-font-letterspacing-400, .044px))}:host([width=sm]){--_nys-textarea-width: var(--nys-form-width-sm, 88px)}:host([width=md]){--_nys-textarea-width: var(--nys-form-width-md, 200px)}:host([width=lg]){--_nys-textarea-width: var(--nys-form-width-lg, 384px)}:host([width=full]){--_nys-textarea-width: 100%;flex:1}:host([showError]){--_nys-textarea-border-color: var(--nys-color-danger, #b52c2c)}.nys-textarea{font-weight:var(--_nys-textarea-font-weight);font-family:var(--_nys-textarea-font-family);line-height:var(--_nys-textarea-line-height);letter-spacing:var(--nys-textarea-letterspacing-ui);color:var(--_nys-textarea-color);gap:var(--_nys-textarea-gap);display:flex;flex-direction:column}.nys-textarea__textarea{color:var(--_nys-textarea-color);font-size:var(--_nys-textarea-font-size);font-family:var(--_nys-textarea-font-family);border-radius:var(--_nys-textarea-border-radius);border:solid var(--_nys-textarea-border-color) var(--_nys-textarea-border-width);padding:var(--_nys-textarea-padding);width:var(--_nys-textarea-width);line-height:var(--_nys-textarea-line-height);max-width:var(--_nys-textarea-width);box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.nys-textarea__textarea::placeholder{color:var(--_nys-textarea-color--placeholder)}.nys-textarea__textarea.none{resize:none}.nys-textarea__textarea:hover:not(:disabled):not(:focus):not([readonly]){outline:solid var(--_nys-textarea-outline-width) var(--_nys-textarea-outline-color--hover);border-color:var(--_nys-textarea-outline-color--hover)}.nys-textarea__textarea:focus:not([readonly]){outline:solid var(--_nys-textarea-outline-width) var(--_nys-textarea-outline-color--focus);border-color:var(--_nys-textarea-outline-color--focus);caret-color:var(--_nys-textarea-outline-color--focus)}.nys-textarea__textarea:disabled,.nys-textarea__textarea:disabled::placeholder{background-color:var(--_nys-textarea-background-color--disabled);border-color:var(--_nys-textarea-border-color--disabled);color:var(--_nys-textarea-color--disabled);cursor:not-allowed}';
5
+ var f = Object.defineProperty, s = (c, e, t, l) => {
6
+ for (var i = void 0, d = c.length - 1, n; d >= 0; d--)
7
+ (n = c[d]) && (i = n(e, t, i) || i);
8
+ return i && f(e, t, i), i;
9
9
  };
10
- let _ = 0;
11
- var i;
12
- const r = (i = class extends y {
10
+ let x = 0;
11
+ const h = class h extends y {
13
12
  // allows use of elementInternals' API
14
13
  constructor() {
15
- super(), this.id = "", this.name = "", this.label = "", this.description = "", this.placeholder = "", this.value = "", this.disabled = !1, this.readonly = !1, this.required = !1, this.optional = !1, this._tooltip = "", this.inverted = !1, this.form = null, this.maxlength = null, this.width = "full", this.rows = 4, this._resize = "vertical", this.showError = !1, this.errorMessage = "", this._hasUserInteracted = !1, this._internals = this.attachInternals();
16
- }
17
- get resize() {
18
- return this._resize;
19
- }
20
- set resize(e) {
21
- this._resize = i.VALID_RESIZE.includes(
22
- e
23
- ) ? e : "vertical";
14
+ super(), this.id = "", this.name = "", this.label = "", this.description = "", this.placeholder = "", this.value = "", this.disabled = !1, this.readonly = !1, this.required = !1, this.optional = !1, this.tooltip = "", this.inverted = !1, this.form = null, this.maxlength = null, this.width = "full", this.rows = 4, this.resize = "vertical", this.showError = !1, this.errorMessage = "", this._hasUserInteracted = !1, this._internals = this.attachInternals();
24
15
  }
25
16
  async updated(e) {
26
- await Promise.resolve(), e.has("width") && (this.width = i.VALID_WIDTHS.includes(this.width) ? this.width : "full"), e.has("rows") && (this.rows = this.rows ?? 4);
17
+ if (await Promise.resolve(), e.has("rows") && (this.rows = this.rows ?? 4), e.has("readonly") || e.has("required")) {
18
+ const t = this.shadowRoot?.querySelector("textarea");
19
+ t && (t.required = this.required && !this.readonly);
20
+ }
27
21
  }
28
22
  // Generate a unique ID if one is not provided
29
23
  connectedCallback() {
30
- super.connectedCallback(), this.id || (this.id = `nys-textarea-${Date.now()}-${_++}`), this.addEventListener("invalid", this._handleInvalid);
24
+ super.connectedCallback(), this.id || (this.id = `nys-textarea-${Date.now()}-${x++}`), this.addEventListener("invalid", this._handleInvalid);
31
25
  }
32
26
  disconnectedCallback() {
33
27
  super.disconnectedCallback(), this.removeEventListener("invalid", this._handleInvalid);
@@ -35,11 +29,10 @@ const r = (i = class extends y {
35
29
  firstUpdated() {
36
30
  this._setValue();
37
31
  }
38
- // This callback is automatically called when the parent form is reset.
39
- formResetCallback() {
40
- this.value = "";
41
- }
42
- /********************** Form Integration **********************/
32
+ /**
33
+ * Form Integration
34
+ * --------------------------------------------------------------------------
35
+ */
43
36
  _setValue() {
44
37
  this._internals.setFormValue(this.value), this._manageRequire();
45
38
  }
@@ -63,7 +56,14 @@ const r = (i = class extends y {
63
56
  let t = e.validationMessage;
64
57
  this._setValidityMessage(t);
65
58
  }
66
- /********************** Functions **********************/
59
+ // This callback is automatically called when the parent form is reset.
60
+ formResetCallback() {
61
+ this.value = "";
62
+ }
63
+ /**
64
+ * Functions
65
+ * --------------------------------------------------------------------------
66
+ */
67
67
  // This helper function is called to perform the element's native validation.
68
68
  checkValidity() {
69
69
  const e = this.shadowRoot?.querySelector("textarea");
@@ -73,13 +73,16 @@ const r = (i = class extends y {
73
73
  e.preventDefault(), this._hasUserInteracted = !0, this._validate();
74
74
  const t = this.shadowRoot?.querySelector("textarea");
75
75
  if (t) {
76
- const o = this._internals.form;
77
- o ? Array.from(o.elements).find(
78
- (d) => typeof d.checkValidity == "function" && !d.checkValidity()
76
+ const l = this._internals.form;
77
+ l ? Array.from(l.elements).find(
78
+ (n) => typeof n.checkValidity == "function" && !n.checkValidity()
79
79
  ) === this && t.focus() : t.focus();
80
80
  }
81
81
  }
82
- /******************** Event Handlers ********************/
82
+ /**
83
+ * Event Handlers
84
+ * --------------------------------------------------------------------------
85
+ */
83
86
  // Handle input event to check pattern validity
84
87
  _handleInput(e) {
85
88
  const t = e.target;
@@ -103,7 +106,7 @@ const r = (i = class extends y {
103
106
  const t = e.target;
104
107
  this.value = t.value, this.dispatchEvent(
105
108
  new CustomEvent("nys-select", {
106
- detail: { value: this.value },
109
+ detail: { id: this.id, value: this.value },
107
110
  bubbles: !0,
108
111
  composed: !0
109
112
  })
@@ -126,8 +129,8 @@ const r = (i = class extends y {
126
129
  for=${this.id + "--native"}
127
130
  label=${this.label}
128
131
  description=${this.description}
129
- flag=${this.required ? "required" : this.optional ? "optional" : ""}
130
- _tooltip=${this._tooltip}
132
+ flag=${this.required && !this.readonly ? "required" : this.optional ? "optional" : ""}
133
+ tooltip=${this.tooltip}
131
134
  ?inverted=${this.inverted}
132
135
  >
133
136
  <slot name="description" slot="description">${this.description}</slot>
@@ -138,18 +141,18 @@ const r = (i = class extends y {
138
141
  id=${this.id + "--native"}
139
142
  .value=${this.value}
140
143
  ?disabled=${this.disabled}
141
- ?required=${this.required}
144
+ ?required=${this.required && !this.readonly}
142
145
  ?readonly=${this.readonly}
143
- aria-disabled=${l(this.disabled ? "true" : void 0)}
144
- aria-required=${l(this.required ? "true" : void 0)}
145
- aria-label=${l(this.label || void 0)}
146
- aria-description=${l(this.description || void 0)}
147
- placeholder=${l(
146
+ aria-disabled=${o(this.disabled ? "true" : void 0)}
147
+ aria-required=${o(this.required ? "true" : void 0)}
148
+ aria-label=${o(this.label || void 0)}
149
+ aria-description=${o(this.description || void 0)}
150
+ placeholder=${o(
148
151
  this.placeholder ? this.placeholder : void 0
149
152
  )}
150
- maxlength=${l(this.maxlength ?? void 0)}
153
+ maxlength=${o(this.maxlength ?? void 0)}
151
154
  .rows=${this.rows}
152
- form=${l(this.form || void 0)}
155
+ form=${o(this.form || void 0)}
153
156
  @input=${this._handleInput}
154
157
  @focus="${this._handleFocus}"
155
158
  @blur="${this._handleBlur}"
@@ -163,67 +166,68 @@ const r = (i = class extends y {
163
166
  </label>
164
167
  `;
165
168
  }
166
- }, i.styles = u(v), i.VALID_WIDTHS = ["sm", "md", "lg", "full"], i.VALID_RESIZE = ["vertical", "none"], i.formAssociated = !0, i);
169
+ };
170
+ h.styles = u(v), h.formAssociated = !0;
171
+ let r = h;
167
172
  s([
168
173
  a({ type: String, reflect: !0 })
169
- ], r.prototype, "id", 2);
174
+ ], r.prototype, "id");
170
175
  s([
171
176
  a({ type: String, reflect: !0 })
172
- ], r.prototype, "name", 2);
177
+ ], r.prototype, "name");
173
178
  s([
174
179
  a({ type: String })
175
- ], r.prototype, "label", 2);
180
+ ], r.prototype, "label");
176
181
  s([
177
182
  a({ type: String })
178
- ], r.prototype, "description", 2);
183
+ ], r.prototype, "description");
179
184
  s([
180
185
  a({ type: String })
181
- ], r.prototype, "placeholder", 2);
186
+ ], r.prototype, "placeholder");
182
187
  s([
183
188
  a({ type: String })
184
- ], r.prototype, "value", 2);
189
+ ], r.prototype, "value");
185
190
  s([
186
191
  a({ type: Boolean, reflect: !0 })
187
- ], r.prototype, "disabled", 2);
192
+ ], r.prototype, "disabled");
188
193
  s([
189
194
  a({ type: Boolean, reflect: !0 })
190
- ], r.prototype, "readonly", 2);
195
+ ], r.prototype, "readonly");
191
196
  s([
192
197
  a({ type: Boolean, reflect: !0 })
193
- ], r.prototype, "required", 2);
198
+ ], r.prototype, "required");
194
199
  s([
195
200
  a({ type: Boolean, reflect: !0 })
196
- ], r.prototype, "optional", 2);
201
+ ], r.prototype, "optional");
197
202
  s([
198
203
  a({ type: String })
199
- ], r.prototype, "_tooltip", 2);
204
+ ], r.prototype, "tooltip");
200
205
  s([
201
206
  a({ type: Boolean, reflect: !0 })
202
- ], r.prototype, "inverted", 2);
207
+ ], r.prototype, "inverted");
203
208
  s([
204
209
  a({ type: String, reflect: !0 })
205
- ], r.prototype, "form", 2);
210
+ ], r.prototype, "form");
206
211
  s([
207
212
  a({ type: Number })
208
- ], r.prototype, "maxlength", 2);
213
+ ], r.prototype, "maxlength");
209
214
  s([
210
- a({ reflect: !0 })
211
- ], r.prototype, "width", 2);
215
+ a({ type: String, reflect: !0 })
216
+ ], r.prototype, "width");
212
217
  s([
213
218
  a({ type: Number })
214
- ], r.prototype, "rows", 2);
219
+ ], r.prototype, "rows");
215
220
  s([
216
- a({ reflect: !0 })
217
- ], r.prototype, "resize", 1);
221
+ a({ type: String, reflect: !0 })
222
+ ], r.prototype, "resize");
218
223
  s([
219
224
  a({ type: Boolean, reflect: !0 })
220
- ], r.prototype, "showError", 2);
225
+ ], r.prototype, "showError");
221
226
  s([
222
227
  a({ type: String })
223
- ], r.prototype, "errorMessage", 2);
224
- let b = r;
225
- customElements.get("nys-textarea") || customElements.define("nys-textarea", b);
228
+ ], r.prototype, "errorMessage");
229
+ customElements.get("nys-textarea") || customElements.define("nys-textarea", r);
226
230
  export {
227
- b as NysTextarea
231
+ r as NysTextarea
228
232
  };
229
233
  //# sourceMappingURL=nys-textarea.js.map
package/dist/nys-textarea.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nys-textarea.js","sources":["../src/nys-textarea.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-textarea.scss?inline\";\n\nlet textareaIdCounter = 0; // Counter for generating unique IDs\n\nexport class NysTextarea extends LitElement {\n static styles = unsafeCSS(styles);\n\n @property({ type: String, reflect: true }) id = \"\";\n @property({ type: String, reflect: true }) name = \"\";\n @property({ type: String }) label = \"\";\n @property({ type: String }) description = \"\";\n @property({ type: String }) placeholder = \"\";\n @property({ type: String }) value = \"\";\n @property({ type: Boolean, reflect: true }) disabled = false;\n @property({ type: Boolean, reflect: true }) readonly = false;\n @property({ type: Boolean, reflect: true }) required = false;\n @property({ type: Boolean, reflect: true }) optional = false;\n @property({ type: String }) _tooltip = \"\";\n @property({ type: Boolean, reflect: true }) inverted = false;\n @property({ type: String, reflect: true }) form: string | null = null;\n @property({ type: Number }) maxlength: number | null = null;\n private static readonly VALID_WIDTHS = [\"sm\", \"md\", \"lg\", \"full\"] as const;\n @property({ reflect: true })\n width: (typeof NysTextarea.VALID_WIDTHS)[number] = \"full\";\n @property({ type: Number }) rows = 4;\n private static readonly VALID_RESIZE = [\"vertical\", \"none\"] as const;\n\n // Use `typeof` to dynamically infer the allowed types\n private _resize: (typeof NysTextarea.VALID_RESIZE)[number] = \"vertical\";\n\n // Getter and setter for the `resize` property\n @property({ reflect: true })\n get resize(): (typeof NysTextarea.VALID_RESIZE)[number] {\n return this._resize;\n }\n\n set resize(value: string) {\n this._resize = NysTextarea.VALID_RESIZE.includes(\n value as (typeof NysTextarea.VALID_RESIZE)[number],\n )\n ? (value as (typeof NysTextarea.VALID_RESIZE)[number])\n : \"vertical\";\n }\n @property({ type: Boolean, reflect: true }) showError = false;\n @property({ type: String }) errorMessage = \"\";\n\n async updated(changedProperties: Map<string | number | symbol, unknown>) {\n await Promise.resolve();\n if (changedProperties.has(\"width\")) {\n this.width = NysTextarea.VALID_WIDTHS.includes(this.width)\n ? this.width\n : \"full\";\n }\n if (changedProperties.has(\"rows\")) {\n this.rows = this.rows ?? 4;\n }\n }\n\n private _hasUserInteracted = false; // need this flag for \"eager mode\"\n private _internals: ElementInternals;\n\n /********************** Lifecycle updates **********************/\n static formAssociated = true; // allows use of elementInternals' API\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n // Generate a unique ID if one is not provided\n connectedCallback() {\n super.connectedCallback();\n if (!this.id) {\n this.id = `nys-textarea-${Date.now()}-${textareaIdCounter++}`;\n }\n this.addEventListener(\"invalid\", this._handleInvalid);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\"invalid\", this._handleInvalid);\n }\n\n firstUpdated() {\n // This ensures our element always participates in the form\n this._setValue();\n }\n\n // This callback is automatically called when the parent form is reset.\n formResetCallback() {\n this.value = \"\";\n }\n\n /********************** Form Integration **********************/\n private _setValue() {\n this._internals.setFormValue(this.value);\n this._manageRequire();\n }\n\n private _manageRequire() {\n const textarea = this.shadowRoot?.querySelector(\"textarea\");\n\n if (!textarea) return;\n\n const message = this.errorMessage || \"This field is required\";\n const isInvalid = this.required && !this.value;\n\n if (isInvalid) {\n this._internals.ariaRequired = \"true\";\n this._internals.setValidity({ valueMissing: true }, message, textarea);\n } else {\n this._internals.ariaRequired = \"false\"; // Reset when valid\n this._internals.setValidity({});\n this._hasUserInteracted = false; // Reset lazy validation when valid\n }\n }\n\n private _setValidityMessage(message: string = \"\") {\n const textarea = this.shadowRoot?.querySelector(\"textarea\");\n if (!textarea) return;\n\n // Toggle the HTML <div> tag error message\n this.showError = !!message;\n // If user sets errorMessage, this will always override the native validation message\n if (this.errorMessage?.trim() && message !== \"\") {\n message = this.errorMessage;\n }\n\n this._internals.setValidity(\n message ? { customError: true } : {},\n message,\n textarea,\n );\n }\n\n private _validate() {\n const textarea = this.shadowRoot?.querySelector(\"textarea\");\n if (!textarea) return;\n\n // Get the native validation state\n let message = textarea.validationMessage;\n\n this._setValidityMessage(message);\n }\n\n /********************** Functions **********************/\n // This helper function is called to perform the element's native validation.\n checkValidity(): boolean {\n const textarea = this.shadowRoot?.querySelector(\"textarea\");\n return textarea ? textarea.checkValidity() : true;\n }\n\n private _handleInvalid(event: Event) {\n event.preventDefault();\n this._hasUserInteracted = true; // Start aggressive mode due to form submission\n this._validate();\n\n const textarea = this.shadowRoot?.querySelector(\"textarea\");\n if (textarea) {\n // Focus only if this is the first invalid element (top-down approach)\n const form = this._internals.form;\n if (form) {\n const elements = Array.from(form.elements) as Array<\n HTMLElement & { checkValidity?: () => boolean }\n >;\n // Find the first element in the form that is invalid\n const firstInvalidElement = elements.find(\n (element) =>\n typeof element.checkValidity === \"function\" &&\n !element.checkValidity(),\n );\n if (firstInvalidElement === this) {\n textarea.focus();\n }\n } else {\n // If not part of a form, simply focus.\n textarea.focus();\n }\n }\n }\n\n /******************** Event Handlers ********************/\n // Handle input event to check pattern validity\n private _handleInput(event: Event) {\n const textarea = event.target as HTMLInputElement;\n this.value = textarea.value;\n this._internals.setFormValue(this.value);\n\n // Field is invalid after unfocused, validate aggressively on each input (e.g. Eager mode: a combination of aggressive and lazy.)\n if (this._hasUserInteracted) {\n this._validate();\n }\n\n this.dispatchEvent(\n new CustomEvent(\"nys-input\", {\n detail: { id: this.id, value: this.value },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n // Handle focus event\n private _handleFocus() {\n this.dispatchEvent(new Event(\"nys-focus\"));\n }\n\n // Handle blur event\n private _handleBlur() {\n if (!this._hasUserInteracted) {\n this._hasUserInteracted = true; // At initial unfocus: if textarea is invalid, start aggressive mode\n }\n\n this._validate();\n this.dispatchEvent(new Event(\"nys-blur\"));\n }\n\n private _handleSelect(e: Event) {\n const select = e.target as HTMLSelectElement;\n this.value = select.value;\n this.dispatchEvent(\n new CustomEvent(\"nys-select\", {\n detail: { value: this.value },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleSelectionChange(e: Event) {\n const select = e.target as HTMLSelectElement;\n this.value = select.value;\n this.dispatchEvent(\n new CustomEvent(\"nys-selectionchange\", {\n detail: { id: this.id, value: this.value },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n render() {\n return html`\n <label class=\"nys-textarea\">\n <nys-label\n for=${this.id + \"--native\"}\n label=${this.label}\n description=${this.description}\n flag=${this.required ? \"required\" : this.optional ? \"optional\" : \"\"}\n _tooltip=${this._tooltip}\n ?inverted=${this.inverted}\n >\n <slot name=\"description\" slot=\"description\">${this.description}</slot>\n </nys-label>\n <textarea\n class=\"nys-textarea__textarea ${this.resize}\"\n name=${this.name}\n id=${this.id + \"--native\"}\n .value=${this.value}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?readonly=${this.readonly}\n aria-disabled=${ifDefined(this.disabled ? \"true\" : undefined)}\n aria-required=${ifDefined(this.required ? \"true\" : undefined)}\n aria-label=${ifDefined(this.label || undefined)}\n aria-description=${ifDefined(this.description || undefined)}\n placeholder=${ifDefined(\n this.placeholder ? this.placeholder : undefined,\n )}\n maxlength=${ifDefined(this.maxlength ?? undefined)}\n .rows=${this.rows}\n form=${ifDefined(this.form || undefined)}\n @input=${this._handleInput}\n @focus=\"${this._handleFocus}\"\n @blur=\"${this._handleBlur}\"\n @select=\"${this._handleSelect}\"\n @selectionchange=\"${this._handleSelectionChange}\"\n ></textarea>\n <nys-errormessage\n ?showError=${this.showError}\n errorMessage=${this._internals.validationMessage || this.errorMessage}\n ></nys-errormessage>\n </label>\n `;\n }\n}\n\nif (!customElements.get(\"nys-textarea\")) {\n customElements.define(\"nys-textarea\", NysTextarea);\n}\n"],"names":["textareaIdCounter","_NysTextarea","_a","LitElement","value","changedProperties","textarea","message","event","form","element","select","html","ifDefined","unsafeCSS","styles","__decorateClass","property","NysTextarea"],"mappings":"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"}
1
+ {"version":3,"file":"nys-textarea.js","sources":["../src/nys-textarea.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-textarea.scss?inline\";\n\nlet textareaIdCounter = 0;\n\n/**\n * `<nys-textarea>` is a form-enabled textarea with validation, accessibility support,\n * and live error messages. Integrates with forms via ElementInternals.\n *\n * @slot description - Optional slot for custom description content below the label.\n *\n * @fires nys-input - Fired on input, detail: `{ id, value }`\n * @fires nys-focus - Fired on focus.\n * @fires nys-blur - Fired on blur.\n * @fires nys-select - Fired on text selection, detail: `{ id, value }`\n * @fires nys-selectionchange - Fired on selection change, detail: `{ id, value }`\n */\n\nexport class NysTextarea extends LitElement {\n static styles = unsafeCSS(styles);\n\n @property({ type: String, reflect: true }) id = \"\";\n @property({ type: String, reflect: true }) name = \"\";\n @property({ type: String }) label = \"\";\n @property({ type: String }) description = \"\";\n @property({ type: String }) placeholder = \"\";\n @property({ type: String }) value = \"\";\n @property({ type: Boolean, reflect: true }) disabled = false;\n @property({ type: Boolean, reflect: true }) readonly = false;\n @property({ type: Boolean, reflect: true }) required = false;\n @property({ type: Boolean, reflect: true }) optional = false;\n @property({ type: String }) tooltip = \"\";\n @property({ type: Boolean, reflect: true }) inverted = false;\n @property({ type: String, reflect: true }) form: string | null = null;\n @property({ type: Number }) maxlength: number | null = null;\n @property({ type: String, reflect: true }) width:\n | \"sm\"\n | \"md\"\n | \"lg\"\n | \"full\" = \"full\";\n @property({ type: Number }) rows = 4;\n @property({ type: String, reflect: true }) resize: \"vertical\" | \"none\" =\n \"vertical\";\n @property({ type: Boolean, reflect: true }) showError = false;\n @property({ type: String }) errorMessage = \"\";\n\n async updated(changedProperties: Map<string | number | symbol, unknown>) {\n await Promise.resolve();\n if (changedProperties.has(\"rows\")) {\n this.rows = this.rows ?? 4;\n }\n if (\n changedProperties.has(\"readonly\") ||\n changedProperties.has(\"required\")\n ) {\n const input = this.shadowRoot?.querySelector(\"textarea\");\n\n if (input) input.required = this.required && !this.readonly;\n }\n }\n\n private _hasUserInteracted = false; // need this flag for \"eager mode\"\n private _internals: ElementInternals;\n\n /**\n * Lifecycle methods\n * --------------------------------------------------------------------------\n */\n\n static formAssociated = true; // allows use of elementInternals' API\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n // Generate a unique ID if one is not provided\n connectedCallback() {\n super.connectedCallback();\n if (!this.id) {\n this.id = `nys-textarea-${Date.now()}-${textareaIdCounter++}`;\n }\n this.addEventListener(\"invalid\", this._handleInvalid);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\"invalid\", this._handleInvalid);\n }\n\n firstUpdated() {\n // This ensures our element always participates in the form\n this._setValue();\n }\n\n /**\n * Form Integration\n * --------------------------------------------------------------------------\n */\n\n private _setValue() {\n this._internals.setFormValue(this.value);\n this._manageRequire();\n }\n\n private _manageRequire() {\n const textarea = this.shadowRoot?.querySelector(\"textarea\");\n\n if (!textarea) return;\n\n const message = this.errorMessage || \"This field is required\";\n const isInvalid = this.required && !this.value;\n\n if (isInvalid) {\n this._internals.ariaRequired = \"true\";\n this._internals.setValidity({ valueMissing: true }, message, textarea);\n } else {\n this._internals.ariaRequired = \"false\"; // Reset when valid\n this._internals.setValidity({});\n this._hasUserInteracted = false; // Reset lazy validation when valid\n }\n }\n\n private _setValidityMessage(message: string = \"\") {\n const textarea = this.shadowRoot?.querySelector(\"textarea\");\n if (!textarea) return;\n\n // Toggle the HTML <div> tag error message\n this.showError = !!message;\n // If user sets errorMessage, this will always override the native validation message\n if (this.errorMessage?.trim() && message !== \"\") {\n message = this.errorMessage;\n }\n\n this._internals.setValidity(\n message ? { customError: true } : {},\n message,\n textarea,\n );\n }\n\n private _validate() {\n const textarea = this.shadowRoot?.querySelector(\"textarea\");\n if (!textarea) return;\n\n // Get the native validation state\n let message = textarea.validationMessage;\n\n this._setValidityMessage(message);\n }\n\n // This callback is automatically called when the parent form is reset.\n formResetCallback() {\n this.value = \"\";\n }\n\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\n // This helper function is called to perform the element's native validation.\n checkValidity(): boolean {\n const textarea = this.shadowRoot?.querySelector(\"textarea\");\n return textarea ? textarea.checkValidity() : true;\n }\n\n private _handleInvalid(event: Event) {\n event.preventDefault();\n this._hasUserInteracted = true; // Start aggressive mode due to form submission\n this._validate();\n\n const textarea = this.shadowRoot?.querySelector(\"textarea\");\n if (textarea) {\n // Focus only if this is the first invalid element (top-down approach)\n const form = this._internals.form;\n if (form) {\n const elements = Array.from(form.elements) as Array<\n HTMLElement & { checkValidity?: () => boolean }\n >;\n // Find the first element in the form that is invalid\n const firstInvalidElement = elements.find(\n (element) =>\n typeof element.checkValidity === \"function\" &&\n !element.checkValidity(),\n );\n if (firstInvalidElement === this) {\n textarea.focus();\n }\n } else {\n // If not part of a form, simply focus.\n textarea.focus();\n }\n }\n }\n\n /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n\n // Handle input event to check pattern validity\n private _handleInput(event: Event) {\n const textarea = event.target as HTMLInputElement;\n this.value = textarea.value;\n this._internals.setFormValue(this.value);\n\n // Field is invalid after unfocused, validate aggressively on each input (e.g. Eager mode: a combination of aggressive and lazy.)\n if (this._hasUserInteracted) {\n this._validate();\n }\n\n this.dispatchEvent(\n new CustomEvent(\"nys-input\", {\n detail: { id: this.id, value: this.value },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n // Handle focus event\n private _handleFocus() {\n this.dispatchEvent(new Event(\"nys-focus\"));\n }\n\n // Handle blur event\n private _handleBlur() {\n if (!this._hasUserInteracted) {\n this._hasUserInteracted = true; // At initial unfocus: if textarea is invalid, start aggressive mode\n }\n\n this._validate();\n this.dispatchEvent(new Event(\"nys-blur\"));\n }\n\n private _handleSelect(e: Event) {\n const select = e.target as HTMLSelectElement;\n this.value = select.value;\n this.dispatchEvent(\n new CustomEvent(\"nys-select\", {\n detail: { id: this.id, value: this.value },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleSelectionChange(e: Event) {\n const select = e.target as HTMLSelectElement;\n this.value = select.value;\n this.dispatchEvent(\n new CustomEvent(\"nys-selectionchange\", {\n detail: { id: this.id, value: this.value },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n render() {\n return html`\n <label class=\"nys-textarea\">\n <nys-label\n for=${this.id + \"--native\"}\n label=${this.label}\n description=${this.description}\n flag=${this.required && !this.readonly\n ? \"required\"\n : this.optional\n ? \"optional\"\n : \"\"}\n tooltip=${this.tooltip}\n ?inverted=${this.inverted}\n >\n <slot name=\"description\" slot=\"description\">${this.description}</slot>\n </nys-label>\n <textarea\n class=\"nys-textarea__textarea ${this.resize}\"\n name=${this.name}\n id=${this.id + \"--native\"}\n .value=${this.value}\n ?disabled=${this.disabled}\n ?required=${this.required && !this.readonly}\n ?readonly=${this.readonly}\n aria-disabled=${ifDefined(this.disabled ? \"true\" : undefined)}\n aria-required=${ifDefined(this.required ? \"true\" : undefined)}\n aria-label=${ifDefined(this.label || undefined)}\n aria-description=${ifDefined(this.description || undefined)}\n placeholder=${ifDefined(\n this.placeholder ? this.placeholder : undefined,\n )}\n maxlength=${ifDefined(this.maxlength ?? undefined)}\n .rows=${this.rows}\n form=${ifDefined(this.form || undefined)}\n @input=${this._handleInput}\n @focus=\"${this._handleFocus}\"\n @blur=\"${this._handleBlur}\"\n @select=\"${this._handleSelect}\"\n @selectionchange=\"${this._handleSelectionChange}\"\n ></textarea>\n <nys-errormessage\n ?showError=${this.showError}\n errorMessage=${this._internals.validationMessage || this.errorMessage}\n ></nys-errormessage>\n </label>\n `;\n }\n}\n\nif (!customElements.get(\"nys-textarea\")) {\n customElements.define(\"nys-textarea\", NysTextarea);\n}\n"],"names":["textareaIdCounter","_NysTextarea","LitElement","changedProperties","input","textarea","message","event","form","element","select","html","ifDefined","unsafeCSS","styles","NysTextarea","__decorateClass","property"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nysds/nys-textarea",
3
- "version": "1.11.4",
3
+ "version": "1.13.0",
4
4
  "description": "The Textarea component from the NYS Design System.",
5
5
  "module": "dist/nys-textarea.js",
6
6
  "types": "dist/index.d.ts",
@@ -23,9 +23,9 @@
23
23
  "lit-analyze": "lit-analyzer '**/*.ts'"
24
24
  },
25
25
  "dependencies": {
26
- "@nysds/nys-icon": "^1.11.4",
27
- "@nysds/nys-label": "^1.11.4",
28
- "@nysds/nys-errormessage": "^1.11.4"
26
+ "@nysds/nys-icon": "^1.13.0",
27
+ "@nysds/nys-label": "^1.13.0",
28
+ "@nysds/nys-errormessage": "^1.13.0"
29
29
  },
30
30
  "devDependencies": {
31
31
  "lit": "^3.3.1",