@nysds/nys-textinput 1.16.1 → 1.18.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-textinput.js +76 -68
  2. package/dist/nys-textinput.js.map +1 -1
  3. package/package.json +4 -4
package/dist/nys-textinput.js CHANGED
@@ -1,24 +1,24 @@
1
- import { LitElement as p, unsafeCSS as c, html as y } from "lit";
2
- import { property as o, state as _ } from "lit/decorators.js";
1
+ import { LitElement as h, unsafeCSS as c, html as y } from "lit";
2
+ import { property as o, query as _, state as v } from "lit/decorators.js";
3
3
  import { ifDefined as u } from "lit/directives/if-defined.js";
4
4
  /*!
5
5
  * █▄ █ █ █ █▀▀▀█ █▀▀▄ █▀▀▀█
6
6
  * █ █ █ █▄▄▄█ ▀▀▀▄▄ █ █ ▀▀▀▄▄
7
7
  * █ ▀█ █ █▄▄▄█ █▄▄▀ █▄▄▄█
8
8
  *
9
- * Textinput Component v1.16.1
9
+ * Textinput Component v1.18.0
10
10
  * Part of the New York State Design System
11
11
  * Repository: https://github.com/its-hcd/nysds
12
12
  * License: MIT
13
13
  */
14
- const v = ':host{--_nys-textinput-width: 100%;--_nys-textinput-height: var(--nys-size-500, 40px);--_nys-textinput-border-radius: var(--nys-radius-md, 4px);--_nys-textinput-border-width: var(--nys-border-width-sm, 1px);--_nys-textinput-border-color: var(--nys-color-neutral-400, #909395);--_nys-textinput-color: var(--nys-color-text, var(--nys-color-neutral-900, #1b1b1b));--_nys-textinput-color--placeholder: var(--nys-color-text-weaker, var(--nys-color-neutral-500, #797c7f));--_nys-textinput-padding: var(--nys-space-100, 8px);--_nys-textinput-gap: var(--nys-space-50, 4px);--_nys-textinput-background-color: var(--nys-color-ink-reverse, var(--nys-color-white, #ffffff));--_nys-textinput-outline-color--hover: var(--nys-color-neutral-900, #1b1b1b);--_nys-textinput-outline-width: var(--nys-border-width-sm, 1px);--_nys-textinput-outline-color--focus: var(--nys-color-focus, #004dd1);--_nys-textinput-background-color--disabled: var(--nys-color-neutral-10, #f6f6f6);--_nys-textinput-border-color--disabled: var(--nys-color-neutral-200, #bec0c1);--_nys-textinput-color--disabled: var(--nys-color-text-disabled, var(--nys-color-neutral-200, #bec0c1));--_nys-textinput-font-family: var(--nys-font-family-ui, var(--nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif));--_nys-textinput-font-size: var(--nys-font-size-ui-md, 16px);--_nys-textinput-font-weight: var(--nys-font-weight-regular, 400);--_nys-textinput-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-textinput-letter-spacing: var(--nys-font-letterspacing-ui-md, var(--nys-font-letterspacing-400, .044px))}:host([width=sm]){--_nys-textinput-width: var(--nys-form-width-sm, 88px)}:host([width=md]){--_nys-textinput-width: var(--nys-form-width-md, 200px)}:host([width=lg]){--_nys-textinput-width: var(--nys-form-width-lg, 384px)}:host([width=full]){--_nys-textinput-width: 100%;flex:1}:host([showError]){--_nys-textinput-border-color: var(--nys-color-danger, #b52c2c)}:host([inverted]){--_nys-textinput-outline-color--focus: var(--nys-color-focus-reverse, #7aa5e7)}.nys-textinput{font-weight:var(--_nys-textinput-font-weight);font-family:var(--_nys-textinput-font-family);font-size:var(--_nys-textinput-font-size);line-height:var(--_nys-textinput-line-height);letter-spacing:var(--_nys-textinput-letter-spacing);color:var(--_nys-textinput-color);gap:var(--_nys-textinput-gap);display:flex;flex-direction:column}.nys-textinput__mask-overlay{position:absolute;margin:calc(var(--_nys-textinput-padding) + var(--_nys-textinput-border-width));color:var(--nys-color-text-weaker, #797c7f);display:inline;overflow:hidden;white-space:nowrap;font:inherit;letter-spacing:normal}.nys-textinput__input{color:var(--_nys-textinput-color);border-radius:var(--_nys-textinput-border-radius);border:solid var(--_nys-textinput-border-color) var(--_nys-textinput-border-width);outline:transparent solid var(--_nys-textinput-outline-width);padding:var(--_nys-textinput-padding);width:100%;height:var(--_nys-textinput-height);box-sizing:border-box;background-color:transparent;position:relative;font:inherit}.nys-textinput__input::placeholder{color:var(--_nys-textinput-color--placeholder)}.nys-textinput__buttoncontainer{width:var(--_nys-textinput-width);max-width:100%;display:flex}.nys-textinput__buttoncontainer.has-end-button .nys-textinput__input{border-start-end-radius:0;border-end-end-radius:0;border-inline-end:none}.nys-textinput__buttoncontainer.has-start-button .nys-textinput__input{border-start-start-radius:0;border-end-start-radius:0;border-inline-start:none}.nys-textinput__container{position:relative;display:flex;align-items:center;width:100%;background-color:var(--_nys-textinput-background-color);border-radius:var(--_nys-textinput-border-radius)}::slotted(nys-button){--_nys-button-height: var(--_nys-textinput-height);--_nys-button-border-radius: var(--_nys-textinput-border-radius);--_nys-button-background-color--disabled: var(--_nys-textinput-background-color--disabled);--_nys-button-border-color--disabled: var(--_nys-textinput-color--disabled);--_nys-button-color--disabled: var(--_nys-textinput-color--disabled);--_nys-button-border-width: var(--_nys-textinput-border-width);z-index:1}.nys-textinput__buttoncontainer.has-start-button ::slotted(nys-button){--_nys-button-border-radius: var(--_nys-textinput-border-radius) 0 0 var(--_nys-textinput-border-radius)}.nys-textinput__buttoncontainer.has-end-button ::slotted(nys-button){--_nys-button-border-radius: 0 var(--_nys-textinput-border-radius) var(--_nys-textinput-border-radius) 0}.eye-icon{position:absolute;right:var(--nys-space-50, 4px);top:50%;transform:translateY(-50%);cursor:pointer;color:var(--_nys-textinput-color--icon);--nys-button-background-color: var(--_nys-textinput-background-color);--nys-button-background-color--hover: var(--_nys-textinput-background-color);--nys-button-background-color--active: var(--_nys-textinput-background-color);--_nys-button-outline-focus: calc(var(--_nys-button-outline-width) * -1);--_nys-button-padding--y: var(--nys-space-50, 4px);--_nys-button-padding--x: var(--nys-space-50, 4px);--_nys-button-height: var(--nys-size-300, 32px);--_nys-button-width: var(--nys-size-400, 32px)}.nys-textinput__input:hover:not(:disabled):not(:focus):not([readonly]){outline-color:var(--_nys-textinput-outline-color--hover);border-color:var(--_nys-textinput-outline-color--hover)}.nys-textinput__input:focus:not([readonly]){outline-color:var(--_nys-textinput-outline-color--focus);border-color:var(--_nys-textinput-outline-color--focus);caret-color:var(--_nys-textinput-outline-color--focus)}.nys-textinput__input:disabled,.nys-textinput__input:disabled::placeholder,.nys-textinput__input:disabled+.eye-icon{background-color:var(--_nys-textinput-background-color--disabled);border-color:var(--_nys-textinput-border-color--disabled);color:var(--_nys-textinput-color--disabled);cursor:not-allowed}';
15
- var b = Object.defineProperty, r = (h, e, s, t) => {
16
- for (var i = void 0, l = h.length - 1, a; l >= 0; l--)
17
- (a = h[l]) && (i = a(e, s, i) || i);
18
- return i && b(e, s, i), i;
14
+ const f = ':host{--_nys-textinput-width: 100%;--_nys-textinput-height: var(--nys-size-500, 40px);--_nys-textinput-border-radius: var(--nys-radius-md, 4px);--_nys-textinput-border-width: var(--nys-border-width-sm, 1px);--_nys-textinput-border-color: var(--nys-color-neutral-400, #909395);--_nys-textinput-color: var(--nys-color-text, var(--nys-color-neutral-900, #1b1b1b));--_nys-textinput-color--placeholder: var(--nys-color-text-weaker, var(--nys-color-neutral-500, #797c7f));--_nys-textinput-padding: var(--nys-space-100, 8px);--_nys-textinput-gap: var(--nys-space-50, 4px);--_nys-textinput-background-color: var(--nys-color-ink-reverse, var(--nys-color-white, #ffffff));--_nys-textinput-outline-color--hover: var(--nys-color-neutral-900, #1b1b1b);--_nys-textinput-outline-width: var(--nys-border-width-sm, 1px);--_nys-textinput-outline-color--focus: var(--nys-color-focus, #004dd1);--_nys-textinput-background-color--disabled: var(--nys-color-neutral-10, #f6f6f6);--_nys-textinput-border-color--disabled: var(--nys-color-neutral-200, #bec0c1);--_nys-textinput-color--disabled: var(--nys-color-text-disabled, var(--nys-color-neutral-200, #bec0c1));--_nys-textinput-font-family: var(--nys-font-family-ui, var(--nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif));--_nys-textinput-font-size: var(--nys-font-size-ui-md, 16px);--_nys-textinput-font-weight: var(--nys-font-weight-regular, 400);--_nys-textinput-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-textinput-letter-spacing: var(--nys-font-letterspacing-ui-md, var(--nys-font-letterspacing-400, .044px))}:host([width=sm]){--_nys-textinput-width: var(--nys-form-width-sm, 88px)}:host([width=md]){--_nys-textinput-width: var(--nys-form-width-md, 200px)}:host([width=lg]){--_nys-textinput-width: var(--nys-form-width-lg, 384px)}:host([width=full]){--_nys-textinput-width: 100%;flex:1}:host([showError]){--_nys-textinput-border-color: var(--nys-color-danger, #b52c2c)}:host([inverted]){--_nys-textinput-outline-color--focus: var(--nys-color-focus-reverse, #7aa5e7)}.nys-textinput{font-weight:var(--_nys-textinput-font-weight);font-family:var(--_nys-textinput-font-family);font-size:var(--_nys-textinput-font-size);line-height:var(--_nys-textinput-line-height);letter-spacing:var(--_nys-textinput-letter-spacing);color:var(--_nys-textinput-color);gap:var(--_nys-textinput-gap);display:flex;flex-direction:column}.nys-textinput__mask-overlay{position:absolute;margin:calc(var(--_nys-textinput-padding) + var(--_nys-textinput-border-width));color:var(--nys-color-text-weaker, #797c7f);display:inline;overflow:hidden;white-space:nowrap;font:inherit;letter-spacing:normal}.nys-textinput__input{color:var(--_nys-textinput-color);border-radius:var(--_nys-textinput-border-radius);border:solid var(--_nys-textinput-border-color) var(--_nys-textinput-border-width);outline:transparent solid var(--_nys-textinput-outline-width);padding:var(--_nys-textinput-padding);width:100%;height:var(--_nys-textinput-height);box-sizing:border-box;background-color:transparent;position:relative;font:inherit}.nys-textinput__input::placeholder{color:var(--_nys-textinput-color--placeholder)}.nys-textinput__buttoncontainer{width:var(--_nys-textinput-width);max-width:100%;display:flex}.nys-textinput__buttoncontainer.has-end-button .nys-textinput__input{border-start-end-radius:0;border-end-end-radius:0;border-inline-end:none}.nys-textinput__buttoncontainer.has-start-button .nys-textinput__input{border-start-start-radius:0;border-end-start-radius:0;border-inline-start:none}.nys-textinput__container{position:relative;display:flex;align-items:center;width:100%;background-color:var(--_nys-textinput-background-color);border-radius:var(--_nys-textinput-border-radius)}::slotted(nys-button){--_nys-button-height: var(--_nys-textinput-height);--_nys-button-border-radius: var(--_nys-textinput-border-radius);--_nys-button-background-color--disabled: var(--_nys-textinput-background-color--disabled);--_nys-button-border-color--disabled: var(--_nys-textinput-color--disabled);--_nys-button-color--disabled: var(--_nys-textinput-color--disabled);--_nys-button-border-width: var(--_nys-textinput-border-width);z-index:1}.nys-textinput__buttoncontainer.has-start-button ::slotted(nys-button){--_nys-button-border-radius: var(--_nys-textinput-border-radius) 0 0 var(--_nys-textinput-border-radius)}.nys-textinput__buttoncontainer.has-end-button ::slotted(nys-button){--_nys-button-border-radius: 0 var(--_nys-textinput-border-radius) var(--_nys-textinput-border-radius) 0}.eye-icon{position:absolute;right:var(--nys-space-50, 4px);top:50%;transform:translateY(-50%);cursor:pointer;color:var(--_nys-textinput-color--icon);--nys-button-background-color: var(--_nys-textinput-background-color);--nys-button-background-color--hover: var(--_nys-textinput-background-color);--nys-button-background-color--active: var(--_nys-textinput-background-color);--_nys-button-outline-focus: calc(var(--_nys-button-outline-width) * -1);--_nys-button-padding--y: var(--nys-space-50, 4px);--_nys-button-padding--x: var(--nys-space-50, 4px);--_nys-button-height: var(--nys-size-300, 32px);--_nys-button-width: var(--nys-size-400, 32px)}.nys-textinput__input:hover:not(:disabled):not(:focus):not([readonly]){outline-color:var(--_nys-textinput-outline-color--hover);border-color:var(--_nys-textinput-outline-color--hover)}.nys-textinput__input:focus:not([readonly]){outline-color:var(--_nys-textinput-outline-color--focus);border-color:var(--_nys-textinput-outline-color--focus);caret-color:var(--_nys-textinput-outline-color--focus)}.nys-textinput__input:disabled,.nys-textinput__input:disabled::placeholder,.nys-textinput__input:disabled+.eye-icon{background-color:var(--_nys-textinput-background-color--disabled);border-color:var(--_nys-textinput-border-color--disabled);color:var(--_nys-textinput-color--disabled);cursor:not-allowed}';
15
+ var b = Object.defineProperty, r = (p, e, s, t) => {
16
+ for (var n = void 0, l = p.length - 1, a; l >= 0; l--)
17
+ (a = p[l]) && (n = a(e, s, n) || n);
18
+ return n && b(e, s, n), n;
19
19
  };
20
- let f = 0;
21
- const d = class d extends p {
20
+ let x = 0;
21
+ const d = class d extends h {
22
22
  // allows use of elementInternals' API
23
23
  constructor() {
24
24
  super(), this.id = "", this.name = "", this.type = "text", this.label = "", this.description = "", this.placeholder = "", this.value = "", this.disabled = !1, this.readonly = !1, this.required = !1, this.optional = !1, this.tooltip = "", this.form = null, this.pattern = "", this.maxlength = null, this.ariaLabel = "", this.width = "full", this.step = null, this.min = null, this.max = null, this.inverted = !1, this.showError = !1, this.errorMessage = "", this.showPassword = !1, this._originalErrorMessage = "", this._hasUserInteracted = !1, this._maskPatterns = {
@@ -27,31 +27,31 @@ const d = class d extends p {
27
27
  }
28
28
  // Generate a unique ID if one is not provided
29
29
  connectedCallback() {
30
- super.connectedCallback(), this.id || (this.id = `nys-textinput-${Date.now()}-${f++}`), this._originalErrorMessage = this.errorMessage ?? "", this.addEventListener("invalid", this._handleInvalid);
30
+ super.connectedCallback(), this.id || (this.id = `nys-textinput-${Date.now()}-${x++}`), this._originalErrorMessage = this.errorMessage ?? "", this.addEventListener("invalid", this._handleInvalid);
31
31
  }
32
32
  disconnectedCallback() {
33
33
  super.disconnectedCallback(), this.removeEventListener("invalid", this._handleInvalid);
34
34
  }
35
- firstUpdated() {
35
+ async firstUpdated() {
36
36
  this._setValue();
37
37
  }
38
38
  // Ensure the "width" property is valid after updates
39
39
  async updated(e) {
40
- if (e.has("disabled") && (this._validateButtonSlot("startButton"), this._validateButtonSlot("endButton")), e.has("type")) {
41
- const s = this._maskPatterns[this.type], t = this.shadowRoot?.querySelector("input");
40
+ if (e.has("value") && this._setValue(), e.has("disabled") && (this._validateButtonSlot("startButton"), this._validateButtonSlot("endButton")), e.has("type")) {
41
+ const s = this._maskPatterns[this.type], t = this._inputEl;
42
42
  if (t)
43
43
  if (s)
44
44
  this.maxlength === null && (t.maxLength = s.length), this._updateOverlay(t.value, s);
45
45
  else {
46
46
  this.maxlength === null && t.removeAttribute("maxLength");
47
- const i = this.shadowRoot?.querySelector(
47
+ const n = this.shadowRoot?.querySelector(
48
48
  ".nys-textinput__mask-overlay"
49
49
  );
50
- i && (i.textContent = "");
50
+ n && (n.textContent = "");
51
51
  }
52
52
  }
53
53
  if (e.has("readonly") || e.has("required")) {
54
- const s = this.shadowRoot?.querySelector("input");
54
+ const s = this._inputEl;
55
55
  s && (s.required = this.required && !this.readonly);
56
56
  }
57
57
  }
@@ -63,20 +63,20 @@ const d = class d extends p {
63
63
  this._internals.setFormValue(this.value), this._manageRequire();
64
64
  }
65
65
  _manageRequire() {
66
- const e = this.shadowRoot?.querySelector("input");
66
+ const e = this._inputEl;
67
67
  if (!e) return;
68
68
  const s = this.errorMessage || "This field is required";
69
69
  this.required && (!this.value || this.value?.trim() === "") ? (this._internals.ariaInvalid = "true", this._internals.setValidity({ valueMissing: !0 }, s, e)) : (this._internals.ariaInvalid = "false", this._internals.setValidity({}), this._hasUserInteracted = !1);
70
70
  }
71
71
  _setValidityMessage(e = "") {
72
- const s = this.shadowRoot?.querySelector("input");
72
+ const s = this._inputEl;
73
73
  if (!s) return;
74
- this.showError = !!e, this._originalErrorMessage?.trim() && e !== "" ? this.errorMessage = this._originalErrorMessage : this.errorMessage = e;
74
+ this.showError = !!e, this._originalErrorMessage?.trim() && e !== "" ? this.errorMessage = this._originalErrorMessage : this.errorMessage = e, this._internals.ariaInvalid = this.showError ? "true" : "false";
75
75
  const t = e ? { customError: !0 } : {};
76
76
  this._internals.setValidity(t, this.errorMessage, s);
77
77
  }
78
78
  _validate() {
79
- const e = this.shadowRoot?.querySelector("input");
79
+ const e = this._inputEl;
80
80
  if (!e) return;
81
81
  const s = e.validity;
82
82
  let t = "";
@@ -85,8 +85,8 @@ const d = class d extends p {
85
85
  // This callback is automatically called when the parent form is reset.
86
86
  formResetCallback() {
87
87
  this.value = "";
88
- const e = this.shadowRoot?.querySelector("input");
89
- e && (e.value = ""), this._internals.setFormValue(""), this.showError = !1, this.errorMessage = "", this._internals.setValidity({}), this.showPassword = !1, this.requestUpdate();
88
+ const e = this._inputEl;
89
+ e && (e.value = ""), this._internals.setFormValue(""), this.showError = !1, this.errorMessage = "", this._internals.setValidity({}), this._internals.ariaInvalid = "false", this.showPassword = !1, this.requestUpdate();
90
90
  }
91
91
  /**
92
92
  * Functions
@@ -94,12 +94,12 @@ const d = class d extends p {
94
94
  */
95
95
  // This helper function is called to perform the element's native validation.
96
96
  checkValidity() {
97
- const e = this.shadowRoot?.querySelector("input");
97
+ const e = this._inputEl;
98
98
  return e ? e.checkValidity() : !0;
99
99
  }
100
100
  _handleInvalid(e) {
101
101
  e.preventDefault(), this._hasUserInteracted = !0, this._validate();
102
- const s = this.shadowRoot?.querySelector("input");
102
+ const s = this._inputEl;
103
103
  if (s) {
104
104
  const t = this._internals.form;
105
105
  t ? Array.from(t.elements).find(
@@ -115,24 +115,24 @@ const d = class d extends p {
115
115
  ".nys-textinput__mask-overlay"
116
116
  );
117
117
  if (!t) return;
118
- const i = e, l = s.slice(i.length);
119
- t.textContent = i + l;
118
+ const n = e, l = s.slice(n.length);
119
+ t.textContent = n + l;
120
120
  }
121
121
  _applyMask(e, s) {
122
122
  const t = e.replace(/\D/g, "");
123
- let i = "";
123
+ let n = "";
124
124
  if (this.type === "tel")
125
- return t.length > 0 && (i = "(" + t.substring(0, 3)), t.length >= 4 && (i += ") " + t.substring(3, 6)), t.length > 6 && (i += "-" + t.substring(6, 10)), i;
125
+ return t.length > 0 && (n = "(" + t.substring(0, 3)), t.length >= 4 && (n += ") " + t.substring(3, 6)), t.length > 6 && (n += "-" + t.substring(6, 10)), n;
126
126
  let l = 0;
127
127
  for (let a = 0; a < s.length; a++)
128
128
  if (s[a] === "_" || s[a].match(/[d9]/i))
129
129
  if (l < t.length)
130
- i += t[l++];
130
+ n += t[l++];
131
131
  else
132
132
  break;
133
133
  else
134
- i += s[a];
135
- return i;
134
+ n += s[a];
135
+ return n;
136
136
  }
137
137
  /**
138
138
  * Event Handlers
@@ -142,8 +142,8 @@ const d = class d extends p {
142
142
  _handleInput(e) {
143
143
  const s = e.target;
144
144
  let t = s.value;
145
- const i = this._maskPatterns[this.type];
146
- i && (t = this._applyMask(t, i), s.value = t, this._updateOverlay(t, i)), this.value = t, this._internals.setFormValue(this.value), this._hasUserInteracted && this._validate(), this.dispatchEvent(
145
+ const n = this._maskPatterns[this.type];
146
+ n && (t = this._applyMask(t, n), s.value = t, this._updateOverlay(t, n)), this.value = t, this._internals.setFormValue(this.value), this._hasUserInteracted && this._validate(), this.dispatchEvent(
147
147
  new CustomEvent("nys-input", {
148
148
  detail: { id: this.id, value: this.value },
149
149
  bubbles: !0,
@@ -170,9 +170,9 @@ const d = class d extends p {
170
170
  ".nys-textinput__buttoncontainer"
171
171
  );
172
172
  if (!s || !t) return;
173
- const i = s.assignedElements();
173
+ const n = s.assignedElements();
174
174
  let l = !1;
175
- i.forEach((a) => {
175
+ n.forEach((a) => {
176
176
  a instanceof HTMLElement && a.tagName.toLowerCase() === "nys-button" && !l ? (l = !0, a.setAttribute("size", "sm"), a.setAttribute("variant", "primary"), this.disabled ? a.setAttribute("disabled", "true") : a.removeAttribute("disabled")) : (console.warn(
177
177
  "The '" + e + "' slot only accepts a single <nys-button> element. Removing invalid or extra node:",
178
178
  a
@@ -183,7 +183,7 @@ const d = class d extends p {
183
183
  return y`
184
184
  <div class="nys-textinput">
185
185
  <nys-label
186
- for=${this.id + "--native"}
186
+ id="${this.id}--label"
187
187
  label=${this.label}
188
188
  description=${this.description}
189
189
  flag=${this.required && !this.readonly ? "required" : this.optional ? "optional" : ""}
@@ -207,9 +207,13 @@ const d = class d extends p {
207
207
  ?disabled=${this.disabled}
208
208
  ?required=${this.required && !this.readonly}
209
209
  ?readonly=${this.readonly}
210
+ aria-label=${u(
211
+ [this.label, this.description].filter(Boolean).join(" ") || this.ariaLabel || void 0
212
+ )}
210
213
  aria-required=${this.required}
211
214
  aria-disabled="${this.disabled}"
212
- aria-label="${[this.label, this.description].filter(Boolean).join(" ") || u(this.ariaLabel || void 0) || "Text input"}"
215
+ aria-invalid=${this.showError ? "true" : "false"}
216
+ aria-errormessage=${this.id + "--error"}
213
217
  .value=${this.value}
214
218
  placeholder=${u(
215
219
  this.placeholder ? this.placeholder : void 0
@@ -248,6 +252,7 @@ const d = class d extends p {
248
252
  ></slot>
249
253
  </div>
250
254
  <nys-errormessage
255
+ id=${this.id + "--error"}
251
256
  ?showError=${this.showError}
252
257
  errorMessage=${this.errorMessage}
253
258
  ></nys-errormessage>
@@ -255,85 +260,88 @@ const d = class d extends p {
255
260
  `;
256
261
  }
257
262
  };
258
- d.styles = c(v), d.shadowRootOptions = {
259
- ...p.shadowRootOptions,
263
+ d.styles = c(f), d.shadowRootOptions = {
264
+ ...h.shadowRootOptions,
260
265
  delegatesFocus: !0
261
266
  }, d.formAssociated = !0;
262
- let n = d;
267
+ let i = d;
263
268
  r([
264
269
  o({ type: String, reflect: !0 })
265
- ], n.prototype, "id");
270
+ ], i.prototype, "id");
266
271
  r([
267
272
  o({ type: String, reflect: !0 })
268
- ], n.prototype, "name");
273
+ ], i.prototype, "name");
269
274
  r([
270
275
  o({ type: String, reflect: !0 })
271
- ], n.prototype, "type");
276
+ ], i.prototype, "type");
272
277
  r([
273
278
  o({ type: String })
274
- ], n.prototype, "label");
279
+ ], i.prototype, "label");
275
280
  r([
276
281
  o({ type: String })
277
- ], n.prototype, "description");
282
+ ], i.prototype, "description");
278
283
  r([
279
284
  o({ type: String })
280
- ], n.prototype, "placeholder");
285
+ ], i.prototype, "placeholder");
281
286
  r([
282
287
  o({ type: String })
283
- ], n.prototype, "value");
288
+ ], i.prototype, "value");
284
289
  r([
285
290
  o({ type: Boolean, reflect: !0 })
286
- ], n.prototype, "disabled");
291
+ ], i.prototype, "disabled");
287
292
  r([
288
293
  o({ type: Boolean, reflect: !0 })
289
- ], n.prototype, "readonly");
294
+ ], i.prototype, "readonly");
290
295
  r([
291
296
  o({ type: Boolean, reflect: !0 })
292
- ], n.prototype, "required");
297
+ ], i.prototype, "required");
293
298
  r([
294
299
  o({ type: Boolean, reflect: !0 })
295
- ], n.prototype, "optional");
300
+ ], i.prototype, "optional");
296
301
  r([
297
302
  o({ type: String })
298
- ], n.prototype, "tooltip");
303
+ ], i.prototype, "tooltip");
299
304
  r([
300
305
  o({ type: String, reflect: !0 })
301
- ], n.prototype, "form");
306
+ ], i.prototype, "form");
302
307
  r([
303
308
  o({ type: String })
304
- ], n.prototype, "pattern");
309
+ ], i.prototype, "pattern");
305
310
  r([
306
311
  o({ type: Number })
307
- ], n.prototype, "maxlength");
312
+ ], i.prototype, "maxlength");
308
313
  r([
309
314
  o({ type: String })
310
- ], n.prototype, "ariaLabel");
315
+ ], i.prototype, "ariaLabel");
311
316
  r([
312
317
  o({ type: String, reflect: !0 })
313
- ], n.prototype, "width");
318
+ ], i.prototype, "width");
314
319
  r([
315
320
  o({ type: Number })
316
- ], n.prototype, "step");
321
+ ], i.prototype, "step");
317
322
  r([
318
323
  o({ type: Number })
319
- ], n.prototype, "min");
324
+ ], i.prototype, "min");
320
325
  r([
321
326
  o({ type: Number })
322
- ], n.prototype, "max");
327
+ ], i.prototype, "max");
323
328
  r([
324
329
  o({ type: Boolean, reflect: !0 })
325
- ], n.prototype, "inverted");
330
+ ], i.prototype, "inverted");
326
331
  r([
327
332
  o({ type: Boolean, reflect: !0 })
328
- ], n.prototype, "showError");
333
+ ], i.prototype, "showError");
329
334
  r([
330
335
  o({ type: String })
331
- ], n.prototype, "errorMessage");
336
+ ], i.prototype, "errorMessage");
337
+ r([
338
+ _("input")
339
+ ], i.prototype, "_inputEl");
332
340
  r([
333
- _()
334
- ], n.prototype, "showPassword");
335
- customElements.get("nys-textinput") || customElements.define("nys-textinput", n);
341
+ v()
342
+ ], i.prototype, "showPassword");
343
+ customElements.get("nys-textinput") || customElements.define("nys-textinput", i);
336
344
  export {
337
- n as NysTextinput
345
+ i as NysTextinput
338
346
  };
339
347
  //# sourceMappingURL=nys-textinput.js.map
package/dist/nys-textinput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nys-textinput.js","sources":["../src/nys-textinput.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } 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-textinput.scss?inline\";\n\nlet textinputIdCounter = 0;\n\n/**\n * A text input for collecting short, single-line data. Supports validation, input masking (tel),\n * password visibility toggle, and live error messaging. Form-associated via ElementInternals.\n *\n * Use for names, emails, passwords, phone numbers. For multi-line input, use `nys-textarea` instead.\n * For predefined options, use `nys-select`, `nys-radiobutton`, or `nys-checkbox`.\n *\n * @summary Text input for short single-line data with validation and masking support.\n * @element nys-textinput\n *\n * @slot description - Custom HTML description content below the label.\n * @slot startButton - Button at input start. Use single `nys-button` only.\n * @slot endButton - Button at input end. Use single `nys-button` only.\n *\n * @fires nys-input - Fired on input change. Detail: `{id, value}`.\n * @fires nys-focus - Fired when input gains focus.\n * @fires nys-blur - Fired when input loses focus. Triggers validation.\n *\n * @example Basic text input\n * ```html\n * <nys-textinput label=\"Full Name\" required></nys-textinput>\n * ```\n *\n * @example Required Email\n * ```html\n * <nys-textinput type=\"email\" label=\"Email Address\" required></nys-textinput>\n * ```\n *\n * @example Phone with masking\n * ```html\n * <nys-textinput type=\"tel\" label=\"Phone Number\"></nys-textinput>\n * ```\n *\n * @example Search with button\n * ```html\n * <nys-textinput type=\"search\" placeholder=\"Search\">\n * <nys-button slot=\"endButton\" label=\"Search\" prefixIcon=\"search\"></nys-button>\n * </nys-textinput>\n * ```\n */\n\nexport class NysTextinput extends LitElement {\n static styles = unsafeCSS(styles);\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /** Unique identifier. Auto-generated if not provided. */\n @property({ type: String, reflect: true }) id = \"\";\n\n /** Name for form submission. */\n @property({ type: String, reflect: true }) name = \"\";\n\n /**\n * Input type: `text` (default), `email`, `number`, `password`, `search`, `tel` (auto-masked), `url`.\n * @default \"text\"\n */\n @property({ type: String, reflect: true }) type:\n | \"email\"\n | \"number\"\n | \"password\"\n | \"search\"\n | \"tel\"\n | \"text\"\n | \"url\" = \"text\";\n\n /** Visible label text. Required for accessibility. */\n @property({ type: String }) label = \"\";\n\n /** Helper text below label. Use slot for custom HTML. */\n @property({ type: String }) description = \"\";\n\n /** Placeholder text. Don't use as label replacement. */\n @property({ type: String }) placeholder = \"\";\n\n /** Current input value. */\n @property({ type: String }) value = \"\";\n\n /** Prevents interaction. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Makes input read-only but focusable. */\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /** Marks as required. Shows \"Required\" flag and validates on blur. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Shows \"Optional\" flag. Use when most fields are required. */\n @property({ type: Boolean, reflect: true }) optional = false;\n\n /** Tooltip text shown on hover/focus of info icon. */\n @property({ type: String }) tooltip = \"\";\n\n /** Form `id` to associate with when input is outside form element. */\n @property({ type: String, reflect: true }) form: string | null = null;\n\n /** Regex pattern for validation. Shows error on mismatch. */\n @property({ type: String }) pattern = \"\";\n\n /** Maximum character length. */\n @property({ type: Number }) maxlength: number | null = null;\n\n /** Accessible label. When set, assuming \"label\" isn't provided for private special cases (i.e., <checkbox other>). */\n @property({ type: String }) ariaLabel = \"\";\n\n /**\n * Input width: `sm` (88px), `md` (200px), `lg` (384px), `full` (100%, default).\n * @default \"full\"\n */\n @property({ type: String, reflect: true }) width:\n | \"sm\"\n | \"md\"\n | \"lg\"\n | \"full\" = \"full\";\n\n /** Step increment for `type=\"number\"`. */\n @property({ type: Number }) step: number | null = null;\n\n /** Minimum value for `type=\"number\"`. */\n @property({ type: Number }) min: number | null = null;\n\n /** Maximum value for `type=\"number\"`. */\n @property({ type: Number }) max: number | null = null;\n\n /** Adjusts colors for dark backgrounds. */\n @property({ type: Boolean, reflect: true }) inverted = false;\n\n /** Shows error message when true. Set by validation or manually. */\n @property({ type: Boolean, reflect: true }) showError = false;\n\n /** Error message text. Shown only when `showError` is true. */\n @property({ type: String }) errorMessage = \"\";\n @state() private showPassword = false;\n\n private _originalErrorMessage = \"\";\n private _hasUserInteracted = false; // need this flag for \"eager mode\"\n private _internals: ElementInternals;\n\n private _maskPatterns: Record<string, string> = {\n tel: \"(___) ___-____\",\n };\n\n /**\n * Lifecycle methods\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-textinput-${Date.now()}-${textinputIdCounter++}`;\n }\n\n this._originalErrorMessage = this.errorMessage ?? \"\";\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 // Ensure the \"width\" property is valid after updates\n async updated(changedProperties: Map<string | number | symbol, unknown>) {\n if (changedProperties.has(\"disabled\")) {\n this._validateButtonSlot(\"startButton\");\n this._validateButtonSlot(\"endButton\");\n }\n\n if (changedProperties.has(\"type\")) {\n const mask = this._maskPatterns[this.type];\n const input = this.shadowRoot?.querySelector(\"input\");\n\n if (input) {\n if (mask) {\n // Only apply mask length if user hasn't explicitly set maxlength\n if (this.maxlength === null) {\n input.maxLength = mask.length;\n }\n this._updateOverlay(input.value, mask);\n } else {\n // Only remove if user hasn't explicitly set maxlength\n if (this.maxlength === null) {\n input.removeAttribute(\"maxLength\");\n }\n const overlay = this.shadowRoot?.querySelector(\n \".nys-textinput__mask-overlay\",\n );\n if (overlay) overlay.textContent = \"\";\n }\n }\n }\n if (\n changedProperties.has(\"readonly\") ||\n changedProperties.has(\"required\")\n ) {\n const input = this.shadowRoot?.querySelector(\"input\");\n\n if (input) input.required = this.required && !this.readonly;\n }\n }\n\n /**\n * Form Integration\n * --------------------------------------------------------------------------\n */\n\n private _setValue() {\n this._internals.setFormValue(this.value);\n this._manageRequire(); // Update validation\n }\n\n private _manageRequire() {\n const input = this.shadowRoot?.querySelector(\"input\");\n\n if (!input) return;\n\n const message = this.errorMessage || \"This field is required\";\n const isInvalid =\n this.required && (!this.value || this.value?.trim() === \"\"); // Check for blank as well\n\n if (isInvalid) {\n this._internals.ariaInvalid = \"true\";\n this._internals.setValidity({ valueMissing: true }, message, input);\n } else {\n this._internals.ariaInvalid = \"false\";\n this._internals.setValidity({});\n this._hasUserInteracted = false; // Reset eager/lazy checking\n }\n }\n\n private _setValidityMessage(message: string = \"\") {\n const input = this.shadowRoot?.querySelector(\"input\");\n if (!input) return;\n\n // Always show the visual error if there is a message\n this.showError = !!message;\n\n // Use the original errorMessage if defined, or keep the message from validation\n if (this._originalErrorMessage?.trim() && message !== \"\") {\n this.errorMessage = this._originalErrorMessage;\n } else {\n this.errorMessage = message;\n }\n\n const validityState = message ? { customError: true } : {};\n this._internals.setValidity(validityState, this.errorMessage, input);\n }\n\n private _validate() {\n const input = this.shadowRoot?.querySelector(\"input\");\n if (!input) return;\n\n // Get the native validation state\n const validity = input.validity;\n let message = \"\";\n\n // Check each possible validation error\n if (validity.valueMissing) {\n message = \"This field is required\";\n } else if (validity.typeMismatch) {\n message = \"Invalid format for this type\";\n } else if (validity.patternMismatch) {\n message = \"Invalid format\";\n } else if (validity.tooShort) {\n message = `Value is too short. Minimum length is ${input.minLength}`;\n } else if (validity.tooLong) {\n message = `Value is too long. Maximum length is ${input.maxLength}`;\n } else if (validity.rangeUnderflow) {\n message = `Value must be at least ${input.min}`;\n } else if (validity.rangeOverflow) {\n message = `Value must be at most ${input.max}`;\n } else if (validity.stepMismatch) {\n message = \"Invalid step value\";\n } else {\n message = input.validationMessage;\n }\n\n this._setValidityMessage(message);\n }\n\n // This callback is automatically called when the parent form is reset.\n public formResetCallback() {\n this.value = \"\";\n\n const input = this.shadowRoot?.querySelector(\"input\");\n if (input) {\n input.value = \"\";\n }\n\n this._internals.setFormValue(\"\");\n\n // Reset validation UI\n this.showError = false;\n this.errorMessage = \"\";\n this._internals.setValidity({});\n\n this.showPassword = false;\n\n // Re-render UI\n this.requestUpdate();\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 input = this.shadowRoot?.querySelector(\"input\");\n return input ? input.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 input = this.shadowRoot?.querySelector(\"input\");\n if (input) {\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 input.focus();\n }\n } else {\n // If not part of a form, simply focus.\n input.focus();\n }\n }\n }\n\n private _togglePasswordVisibility() {\n this.showPassword = !this.showPassword;\n }\n\n private _updateOverlay(value: string, mask: string) {\n const overlay = this.shadowRoot?.querySelector(\n \".nys-textinput__mask-overlay\",\n ) as HTMLElement;\n if (!overlay) return;\n\n const filled = value;\n const remaining = mask.slice(filled.length);\n overlay.textContent = filled + remaining;\n }\n\n private _applyMask(value: string, mask: string): string {\n const digits = value.replace(/\\D/g, \"\");\n let result = \"\";\n\n // Special handling for tel to avoid trailing dash\n if (this.type === \"tel\") {\n if (digits.length > 0) {\n result = \"(\" + digits.substring(0, 3);\n }\n if (digits.length >= 4) {\n result += \") \" + digits.substring(3, 6);\n }\n // Add dash if there are more than 6 digits\n if (digits.length > 6) {\n result += \"-\" + digits.substring(6, 10);\n }\n return result;\n }\n\n // Default generic masking logic\n let digitIndex = 0;\n for (let i = 0; i < mask.length; i++) {\n if (mask[i] === \"_\" || mask[i].match(/[d9]/i)) {\n if (digitIndex < digits.length) {\n result += digits[digitIndex++];\n } else {\n break;\n }\n } else {\n result += mask[i]; // keep formatting symbols\n }\n }\n\n return result;\n }\n\n /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n\n // Handle input event to check pattern validity\n private _handleInput(event: Event) {\n const input = event.target as HTMLInputElement;\n let newValue = input.value;\n\n const mask = this._maskPatterns[this.type];\n if (mask) {\n newValue = this._applyMask(newValue, mask);\n input.value = newValue; // ensure input reflects masked value\n this._updateOverlay(newValue, mask);\n }\n\n this.value = newValue;\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(\n new Event(\"nys-focus\", { bubbles: true, composed: true }),\n );\n }\n\n // Handle blur event\n private _handleBlur() {\n if (!this._hasUserInteracted) {\n this._hasUserInteracted = true; // At initial unfocus: if input is invalid, start aggressive mode\n }\n this._validate();\n\n this.dispatchEvent(\n new Event(\"nys-blur\", { bubbles: true, composed: true }),\n );\n }\n\n private _validateButtonSlot(slotName: string) {\n const slot = this.shadowRoot?.querySelector(\n 'slot[name=\"' + slotName + '\"]',\n ) as HTMLSlotElement;\n const container = this.shadowRoot?.querySelector(\n \".nys-textinput__buttoncontainer\",\n );\n\n if (!slot || !container) return;\n\n const assignedElements = slot.assignedElements();\n\n let foundValidButton = false;\n\n assignedElements.forEach((node) => {\n const isNysButton =\n node instanceof HTMLElement &&\n node.tagName.toLowerCase() === \"nys-button\";\n\n if (isNysButton && !foundValidButton) {\n // First valid nys-button found\n foundValidButton = true;\n node.setAttribute(\"size\", \"sm\");\n node.setAttribute(\"variant\", \"primary\");\n //set button to be disabled if the input is disabled\n if (this.disabled) {\n node.setAttribute(\"disabled\", \"true\");\n } else {\n node.removeAttribute(\"disabled\");\n }\n } else {\n console.warn(\n \"The '\" +\n slotName +\n \"' slot only accepts a single <nys-button> element. Removing invalid or extra node:\",\n node,\n );\n node.remove();\n }\n });\n\n if (slotName === \"startButton\") {\n container.classList.toggle(\"has-start-button\", foundValidButton);\n } else if (slotName === \"endButton\") {\n container.classList.toggle(\"has-end-button\", foundValidButton);\n }\n }\n\n render() {\n return html`\n <div class=\"nys-textinput\">\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 <div class=\"nys-textinput__buttoncontainer\">\n <slot\n name=\"startButton\"\n @slotchange=${() => this._validateButtonSlot(\"startButton\")}\n ></slot>\n <div class=\"nys-textinput__container\">\n <span class=\"nys-textinput__mask-overlay\"></span>\n <input\n class=\"nys-textinput__input\"\n type=${this.type === \"password\"\n ? this.showPassword\n ? \"text\"\n : \"password\"\n : this.type}\n name=${this.name}\n id=${this.id + \"--native\"}\n ?disabled=${this.disabled}\n ?required=${this.required && !this.readonly}\n ?readonly=${this.readonly}\n aria-required=${this.required}\n aria-disabled=\"${this.disabled}\"\n aria-label=\"${[this.label, this.description]\n .filter(Boolean)\n .join(\" \") ||\n ifDefined(this.ariaLabel || undefined) ||\n \"Text input\"}\"\n .value=${this.value}\n placeholder=${ifDefined(\n this.placeholder ? this.placeholder : undefined,\n )}\n pattern=${ifDefined(this.pattern ? this.pattern : undefined)}\n min=${ifDefined(this.min !== null ? this.min : undefined)}\n maxlength=${ifDefined(\n this.maxlength !== null ? this.maxlength : undefined,\n )}\n step=${ifDefined(this.step !== null ? this.step : undefined)}\n max=${ifDefined(this.max !== null ? this.max : undefined)}\n form=${ifDefined(this.form || undefined)}\n @input=${this._handleInput}\n @focus=\"${this._handleFocus}\"\n @blur=\"${this._handleBlur}\"\n />\n ${this.type === \"password\"\n ? html` <nys-button\n class=\"eye-icon\"\n id=\"password-toggle\"\n suffixIcon=\"slotted\"\n ariaLabel=\"password toggle\"\n variant=\"ghost\"\n size=\"sm\"\n @nys-click=${() =>\n !this.disabled && this._togglePasswordVisibility()}\n >\n <nys-icon\n slot=\"suffix-icon\"\n size=\"2xl\"\n name=${this.showPassword ? \"visibility_off\" : \"visibility\"}\n ></nys-icon>\n </nys-button>`\n : \"\"}\n </div>\n <slot\n name=\"endButton\"\n @slotchange=${() => this._validateButtonSlot(\"endButton\")}\n ></slot>\n </div>\n <nys-errormessage\n ?showError=${this.showError}\n errorMessage=${this.errorMessage}\n ></nys-errormessage>\n </div>\n `;\n }\n}\n\nif (!customElements.get(\"nys-textinput\")) {\n customElements.define(\"nys-textinput\", NysTextinput);\n}\n"],"names":["textinputIdCounter","_NysTextinput","LitElement","changedProperties","mask","input","overlay","message","validityState","validity","event","form","element","value","filled","remaining","digits","result","digitIndex","i","newValue","slotName","slot","container","assignedElements","foundValidButton","node","html","ifDefined","unsafeCSS","styles","NysTextinput","__decorateClass","property","state"],"mappings":"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"}
1
+ {"version":3,"file":"nys-textinput.js","sources":["../src/nys-textinput.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state, query } 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-textinput.scss?inline\";\n\nlet textinputIdCounter = 0;\n\n/**\n * A text input for collecting short, single-line data. Supports validation, input masking (tel),\n * password visibility toggle, and live error messaging. Form-associated via ElementInternals.\n *\n * Use for names, emails, passwords, phone numbers. For multi-line input, use `nys-textarea` instead.\n * For predefined options, use `nys-select`, `nys-radiobutton`, or `nys-checkbox`.\n *\n * @summary Text input for short single-line data with validation and masking support.\n * @element nys-textinput\n *\n * @slot description - Custom HTML description content below the label.\n * @slot startButton - Button at input start. Use single `nys-button` only.\n * @slot endButton - Button at input end. Use single `nys-button` only.\n *\n * @fires nys-input - Fired on input change. Detail: `{id, value}`.\n * @fires nys-focus - Fired when input gains focus.\n * @fires nys-blur - Fired when input loses focus. Triggers validation.\n *\n * @example Basic text input\n * ```html\n * <nys-textinput label=\"Full Name\" required></nys-textinput>\n * ```\n *\n * @example Required Email\n * ```html\n * <nys-textinput type=\"email\" label=\"Email Address\" required></nys-textinput>\n * ```\n *\n * @example Phone with masking\n * ```html\n * <nys-textinput type=\"tel\" label=\"Phone Number\"></nys-textinput>\n * ```\n *\n * @example Search with button\n * ```html\n * <nys-textinput type=\"search\" placeholder=\"Search\">\n * <nys-button slot=\"endButton\" label=\"Search\" prefixIcon=\"search\"></nys-button>\n * </nys-textinput>\n * ```\n */\n\nexport class NysTextinput extends LitElement {\n static styles = unsafeCSS(styles);\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /** Unique identifier. Auto-generated if not provided. */\n @property({ type: String, reflect: true }) id = \"\";\n\n /** Name for form submission. */\n @property({ type: String, reflect: true }) name = \"\";\n\n /**\n * Input type: `text` (default), `email`, `number`, `password`, `search`, `tel` (auto-masked), `url`.\n * @default \"text\"\n */\n @property({ type: String, reflect: true }) type:\n | \"email\"\n | \"number\"\n | \"password\"\n | \"search\"\n | \"tel\"\n | \"text\"\n | \"url\" = \"text\";\n\n /** Visible label text. Required for accessibility. */\n @property({ type: String }) label = \"\";\n\n /** Helper text below label. Use slot for custom HTML. */\n @property({ type: String }) description = \"\";\n\n /** Placeholder text. Don't use as label replacement. */\n @property({ type: String }) placeholder = \"\";\n\n /** Current input value. */\n @property({ type: String }) value = \"\";\n\n /** Prevents interaction. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Makes input read-only but focusable. */\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /** Marks as required. Shows \"Required\" flag and validates on blur. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Shows \"Optional\" flag. Use when most fields are required. */\n @property({ type: Boolean, reflect: true }) optional = false;\n\n /** Tooltip text shown on hover/focus of info icon. */\n @property({ type: String }) tooltip = \"\";\n\n /** Form `id` to associate with when input is outside form element. */\n @property({ type: String, reflect: true }) form: string | null = null;\n\n /** Regex pattern for validation. Shows error on mismatch. */\n @property({ type: String }) pattern = \"\";\n\n /** Maximum character length. */\n @property({ type: Number }) maxlength: number | null = null;\n\n /** Accessible label. When set, assuming \"label\" isn't provided for private special cases (i.e., <checkbox other>). */\n @property({ type: String }) ariaLabel = \"\";\n\n /**\n * Input width: `sm` (88px), `md` (200px), `lg` (384px), `full` (100%, default).\n * @default \"full\"\n */\n @property({ type: String, reflect: true }) width:\n | \"sm\"\n | \"md\"\n | \"lg\"\n | \"full\" = \"full\";\n\n /** Step increment for `type=\"number\"`. */\n @property({ type: Number }) step: number | null = null;\n\n /** Minimum value for `type=\"number\"`. */\n @property({ type: Number }) min: number | null = null;\n\n /** Maximum value for `type=\"number\"`. */\n @property({ type: Number }) max: number | null = null;\n\n /** Adjusts colors for dark backgrounds. */\n @property({ type: Boolean, reflect: true }) inverted = false;\n\n /** Shows error message when true. Set by validation or manually. */\n @property({ type: Boolean, reflect: true }) showError = false;\n\n /** Error message text. Shown only when `showError` is true. */\n @property({ type: String }) errorMessage = \"\";\n\n @query(\"input\") private _inputEl!: HTMLInputElement;\n\n @state() private showPassword = false;\n\n private _originalErrorMessage = \"\";\n private _hasUserInteracted = false; // need this flag for \"eager mode\"\n private _internals: ElementInternals;\n\n private _maskPatterns: Record<string, string> = {\n tel: \"(___) ___-____\",\n };\n\n /**\n * Lifecycle methods\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-textinput-${Date.now()}-${textinputIdCounter++}`;\n }\n\n this._originalErrorMessage = this.errorMessage ?? \"\";\n this.addEventListener(\"invalid\", this._handleInvalid);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\"invalid\", this._handleInvalid);\n }\n\n async firstUpdated() {\n // This ensures our element always participates in the form\n this._setValue();\n }\n\n // Ensure the \"width\" property is valid after updates\n async updated(changedProperties: Map<string | number | symbol, unknown>) {\n if (changedProperties.has(\"value\")) {\n this._setValue();\n }\n\n if (changedProperties.has(\"disabled\")) {\n this._validateButtonSlot(\"startButton\");\n this._validateButtonSlot(\"endButton\");\n }\n\n if (changedProperties.has(\"type\")) {\n const mask = this._maskPatterns[this.type];\n const input = this._inputEl;\n\n if (input) {\n if (mask) {\n // Only apply mask length if user hasn't explicitly set maxlength\n if (this.maxlength === null) {\n input.maxLength = mask.length;\n }\n this._updateOverlay(input.value, mask);\n } else {\n // Only remove if user hasn't explicitly set maxlength\n if (this.maxlength === null) {\n input.removeAttribute(\"maxLength\");\n }\n const overlay = this.shadowRoot?.querySelector(\n \".nys-textinput__mask-overlay\",\n );\n if (overlay) overlay.textContent = \"\";\n }\n }\n }\n if (\n changedProperties.has(\"readonly\") ||\n changedProperties.has(\"required\")\n ) {\n const input = this._inputEl;\n\n if (input) input.required = this.required && !this.readonly;\n }\n }\n\n /**\n * Form Integration\n * --------------------------------------------------------------------------\n */\n\n private _setValue() {\n this._internals.setFormValue(this.value);\n this._manageRequire(); // Update validation\n }\n\n private _manageRequire() {\n const input = this._inputEl;\n\n if (!input) return;\n\n const message = this.errorMessage || \"This field is required\";\n const isInvalid =\n this.required && (!this.value || this.value?.trim() === \"\"); // Check for blank as well\n\n if (isInvalid) {\n this._internals.ariaInvalid = \"true\";\n this._internals.setValidity({ valueMissing: true }, message, input);\n } else {\n this._internals.ariaInvalid = \"false\";\n this._internals.setValidity({});\n this._hasUserInteracted = false; // Reset eager/lazy checking\n }\n }\n\n private _setValidityMessage(message: string = \"\") {\n const input = this._inputEl;\n if (!input) return;\n\n // Always show the visual error if there is a message\n this.showError = !!message;\n\n // Use the original errorMessage if defined, or keep the message from validation\n if (this._originalErrorMessage?.trim() && message !== \"\") {\n this.errorMessage = this._originalErrorMessage;\n } else {\n this.errorMessage = message;\n }\n\n this._internals.ariaInvalid = this.showError ? \"true\" : \"false\";\n\n const validityState = message ? { customError: true } : {};\n this._internals.setValidity(validityState, this.errorMessage, input);\n }\n\n private _validate() {\n const input = this._inputEl;\n if (!input) return;\n\n // Get the native validation state\n const validity = input.validity;\n let message = \"\";\n\n // Check each possible validation error\n if (validity.valueMissing) {\n message = \"This field is required\";\n } else if (validity.typeMismatch) {\n message = \"Invalid format for this type\";\n } else if (validity.patternMismatch) {\n message = \"Invalid format\";\n } else if (validity.tooShort) {\n message = `Value is too short. Minimum length is ${input.minLength}`;\n } else if (validity.tooLong) {\n message = `Value is too long. Maximum length is ${input.maxLength}`;\n } else if (validity.rangeUnderflow) {\n message = `Value must be at least ${input.min}`;\n } else if (validity.rangeOverflow) {\n message = `Value must be at most ${input.max}`;\n } else if (validity.stepMismatch) {\n message = \"Invalid step value\";\n } else {\n message = input.validationMessage;\n }\n\n this._setValidityMessage(message);\n }\n\n // This callback is automatically called when the parent form is reset.\n public formResetCallback() {\n this.value = \"\";\n\n const input = this._inputEl;\n if (input) {\n input.value = \"\";\n }\n\n this._internals.setFormValue(\"\");\n\n // Reset validation UI\n this.showError = false;\n this.errorMessage = \"\";\n this._internals.setValidity({});\n this._internals.ariaInvalid = \"false\";\n\n this.showPassword = false;\n\n // Re-render UI\n this.requestUpdate();\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 input = this._inputEl;\n return input ? input.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 input = this._inputEl;\n if (input) {\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 input.focus();\n }\n } else {\n // If not part of a form, simply focus.\n input.focus();\n }\n }\n }\n\n private _togglePasswordVisibility() {\n this.showPassword = !this.showPassword;\n }\n\n private _updateOverlay(value: string, mask: string) {\n const overlay = this.shadowRoot?.querySelector(\n \".nys-textinput__mask-overlay\",\n ) as HTMLElement;\n if (!overlay) return;\n\n const filled = value;\n const remaining = mask.slice(filled.length);\n overlay.textContent = filled + remaining;\n }\n\n private _applyMask(value: string, mask: string): string {\n const digits = value.replace(/\\D/g, \"\");\n let result = \"\";\n\n // Special handling for tel to avoid trailing dash\n if (this.type === \"tel\") {\n if (digits.length > 0) {\n result = \"(\" + digits.substring(0, 3);\n }\n if (digits.length >= 4) {\n result += \") \" + digits.substring(3, 6);\n }\n // Add dash if there are more than 6 digits\n if (digits.length > 6) {\n result += \"-\" + digits.substring(6, 10);\n }\n return result;\n }\n\n // Default generic masking logic\n let digitIndex = 0;\n for (let i = 0; i < mask.length; i++) {\n if (mask[i] === \"_\" || mask[i].match(/[d9]/i)) {\n if (digitIndex < digits.length) {\n result += digits[digitIndex++];\n } else {\n break;\n }\n } else {\n result += mask[i]; // keep formatting symbols\n }\n }\n\n return result;\n }\n\n /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n\n // Handle input event to check pattern validity\n private _handleInput(event: Event) {\n const input = event.target as HTMLInputElement;\n let newValue = input.value;\n\n const mask = this._maskPatterns[this.type];\n if (mask) {\n newValue = this._applyMask(newValue, mask);\n input.value = newValue; // ensure input reflects masked value\n this._updateOverlay(newValue, mask);\n }\n\n this.value = newValue;\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(\n new Event(\"nys-focus\", { bubbles: true, composed: true }),\n );\n }\n\n // Handle blur event\n private _handleBlur() {\n if (!this._hasUserInteracted) {\n this._hasUserInteracted = true; // At initial unfocus: if input is invalid, start aggressive mode\n }\n this._validate();\n\n this.dispatchEvent(\n new Event(\"nys-blur\", { bubbles: true, composed: true }),\n );\n }\n\n private _validateButtonSlot(slotName: string) {\n const slot = this.shadowRoot?.querySelector(\n 'slot[name=\"' + slotName + '\"]',\n ) as HTMLSlotElement;\n const container = this.shadowRoot?.querySelector(\n \".nys-textinput__buttoncontainer\",\n );\n\n if (!slot || !container) return;\n\n const assignedElements = slot.assignedElements();\n\n let foundValidButton = false;\n\n assignedElements.forEach((node) => {\n const isNysButton =\n node instanceof HTMLElement &&\n node.tagName.toLowerCase() === \"nys-button\";\n\n if (isNysButton && !foundValidButton) {\n // First valid nys-button found\n foundValidButton = true;\n node.setAttribute(\"size\", \"sm\");\n node.setAttribute(\"variant\", \"primary\");\n //set button to be disabled if the input is disabled\n if (this.disabled) {\n node.setAttribute(\"disabled\", \"true\");\n } else {\n node.removeAttribute(\"disabled\");\n }\n } else {\n console.warn(\n \"The '\" +\n slotName +\n \"' slot only accepts a single <nys-button> element. Removing invalid or extra node:\",\n node,\n );\n node.remove();\n }\n });\n\n if (slotName === \"startButton\") {\n container.classList.toggle(\"has-start-button\", foundValidButton);\n } else if (slotName === \"endButton\") {\n container.classList.toggle(\"has-end-button\", foundValidButton);\n }\n }\n\n render() {\n return html`\n <div class=\"nys-textinput\">\n <nys-label\n id=\"${this.id}--label\"\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 <div class=\"nys-textinput__buttoncontainer\">\n <slot\n name=\"startButton\"\n @slotchange=${() => this._validateButtonSlot(\"startButton\")}\n ></slot>\n <div class=\"nys-textinput__container\">\n <span class=\"nys-textinput__mask-overlay\"></span>\n <input\n class=\"nys-textinput__input\"\n type=${this.type === \"password\"\n ? this.showPassword\n ? \"text\"\n : \"password\"\n : this.type}\n name=${this.name}\n id=${this.id + \"--native\"}\n ?disabled=${this.disabled}\n ?required=${this.required && !this.readonly}\n ?readonly=${this.readonly}\n aria-label=${ifDefined(\n [this.label, this.description].filter(Boolean).join(\" \") ||\n this.ariaLabel ||\n undefined,\n )}\n aria-required=${this.required}\n aria-disabled=\"${this.disabled}\"\n aria-invalid=${this.showError ? \"true\" : \"false\"}\n aria-errormessage=${this.id + \"--error\"}\n .value=${this.value}\n placeholder=${ifDefined(\n this.placeholder ? this.placeholder : undefined,\n )}\n pattern=${ifDefined(this.pattern ? this.pattern : undefined)}\n min=${ifDefined(this.min !== null ? this.min : undefined)}\n maxlength=${ifDefined(\n this.maxlength !== null ? this.maxlength : undefined,\n )}\n step=${ifDefined(this.step !== null ? this.step : undefined)}\n max=${ifDefined(this.max !== null ? this.max : undefined)}\n form=${ifDefined(this.form || undefined)}\n @input=${this._handleInput}\n @focus=\"${this._handleFocus}\"\n @blur=\"${this._handleBlur}\"\n />\n ${this.type === \"password\"\n ? html` <nys-button\n class=\"eye-icon\"\n id=\"password-toggle\"\n suffixIcon=\"slotted\"\n ariaLabel=\"password toggle\"\n variant=\"ghost\"\n size=\"sm\"\n @nys-click=${() =>\n !this.disabled && this._togglePasswordVisibility()}\n >\n <nys-icon\n slot=\"suffix-icon\"\n size=\"2xl\"\n name=${this.showPassword ? \"visibility_off\" : \"visibility\"}\n ></nys-icon>\n </nys-button>`\n : \"\"}\n </div>\n <slot\n name=\"endButton\"\n @slotchange=${() => this._validateButtonSlot(\"endButton\")}\n ></slot>\n </div>\n <nys-errormessage\n id=${this.id + \"--error\"}\n ?showError=${this.showError}\n errorMessage=${this.errorMessage}\n ></nys-errormessage>\n </div>\n `;\n }\n}\n\nif (!customElements.get(\"nys-textinput\")) {\n customElements.define(\"nys-textinput\", NysTextinput);\n}\n"],"names":["textinputIdCounter","_NysTextinput","LitElement","changedProperties","mask","input","overlay","message","validityState","validity","event","form","element","value","filled","remaining","digits","result","digitIndex","i","newValue","slotName","slot","container","assignedElements","foundValidButton","node","html","ifDefined","unsafeCSS","styles","NysTextinput","__decorateClass","property","query","state"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nysds/nys-textinput",
3
- "version": "1.16.1",
3
+ "version": "1.18.0",
4
4
  "description": "The Textinput component from the NYS Design System.",
5
5
  "module": "dist/nys-textinput.js",
6
6
  "exports": {
@@ -22,9 +22,9 @@
22
22
  "lit-analyze": "lit-analyzer '**/*.ts'"
23
23
  },
24
24
  "dependencies": {
25
- "@nysds/nys-icon": "^1.16.1",
26
- "@nysds/nys-label": "^1.16.1",
27
- "@nysds/nys-errormessage": "^1.16.1"
25
+ "@nysds/nys-icon": "^1.18.0",
26
+ "@nysds/nys-label": "^1.18.0",
27
+ "@nysds/nys-errormessage": "^1.18.0"
28
28
  },
29
29
  "devDependencies": {
30
30
  "lit": "^3.3.1",