@nysds/nys-textinput 1.13.0 → 1.14.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.
- package/dist/index.d.ts +1 -0
- package/dist/nys-textinput.d.ts +139 -0
- package/dist/nys-textinput.figma.d.ts +1 -0
- package/dist/nys-textinput.js +61 -53
- package/dist/nys-textinput.js.map +1 -1
- package/package.json +5 -5
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./nys-textinput";
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
/**
|
|
3
|
+
* A text input for collecting short, single-line data. Supports validation, input masking (tel),
|
|
4
|
+
* password visibility toggle, and live error messaging. Form-associated via ElementInternals.
|
|
5
|
+
*
|
|
6
|
+
* Use for names, emails, passwords, phone numbers. For multi-line input, use `nys-textarea` instead.
|
|
7
|
+
* For predefined options, use `nys-select`, `nys-radiobutton`, or `nys-checkbox`.
|
|
8
|
+
*
|
|
9
|
+
* @summary Text input for short single-line data with validation and masking support.
|
|
10
|
+
* @element nys-textinput
|
|
11
|
+
*
|
|
12
|
+
* @slot description - Custom HTML description content below the label.
|
|
13
|
+
* @slot startButton - Button at input start. Use single `nys-button` only.
|
|
14
|
+
* @slot endButton - Button at input end. Use single `nys-button` only.
|
|
15
|
+
*
|
|
16
|
+
* @fires nys-input - Fired on input change. Detail: `{id, value}`.
|
|
17
|
+
* @fires nys-focus - Fired when input gains focus.
|
|
18
|
+
* @fires nys-blur - Fired when input loses focus. Triggers validation.
|
|
19
|
+
*
|
|
20
|
+
* @example Basic text input
|
|
21
|
+
* ```html
|
|
22
|
+
* <nys-textinput label="Full Name" required></nys-textinput>
|
|
23
|
+
* ```
|
|
24
|
+
*
|
|
25
|
+
* @example Required Email
|
|
26
|
+
* ```html
|
|
27
|
+
* <nys-textinput type="email" label="Email Address" required></nys-textinput>
|
|
28
|
+
* ```
|
|
29
|
+
*
|
|
30
|
+
* @example Phone with masking
|
|
31
|
+
* ```html
|
|
32
|
+
* <nys-textinput type="tel" label="Phone Number"></nys-textinput>
|
|
33
|
+
* ```
|
|
34
|
+
*
|
|
35
|
+
* @example Search with button
|
|
36
|
+
* ```html
|
|
37
|
+
* <nys-textinput type="search" placeholder="Search">
|
|
38
|
+
* <nys-button slot="endButton" label="Search" prefixIcon="search"></nys-button>
|
|
39
|
+
* </nys-textinput>
|
|
40
|
+
* ```
|
|
41
|
+
*/
|
|
42
|
+
export declare class NysTextinput extends LitElement {
|
|
43
|
+
static styles: import("lit").CSSResult;
|
|
44
|
+
/** Unique identifier. Auto-generated if not provided. */
|
|
45
|
+
id: string;
|
|
46
|
+
/** Name for form submission. */
|
|
47
|
+
name: string;
|
|
48
|
+
/**
|
|
49
|
+
* Input type: `text` (default), `email`, `number`, `password`, `search`, `tel` (auto-masked), `url`.
|
|
50
|
+
* @default "text"
|
|
51
|
+
*/
|
|
52
|
+
type: "email" | "number" | "password" | "search" | "tel" | "text" | "url";
|
|
53
|
+
/** Visible label text. Required for accessibility. */
|
|
54
|
+
label: string;
|
|
55
|
+
/** Helper text below label. Use slot for custom HTML. */
|
|
56
|
+
description: string;
|
|
57
|
+
/** Placeholder text. Don't use as label replacement. */
|
|
58
|
+
placeholder: string;
|
|
59
|
+
/** Current input value. */
|
|
60
|
+
value: string;
|
|
61
|
+
/** Prevents interaction. */
|
|
62
|
+
disabled: boolean;
|
|
63
|
+
/** Makes input read-only but focusable. */
|
|
64
|
+
readonly: boolean;
|
|
65
|
+
/** Marks as required. Shows "Required" flag and validates on blur. */
|
|
66
|
+
required: boolean;
|
|
67
|
+
/** Shows "Optional" flag. Use when most fields are required. */
|
|
68
|
+
optional: boolean;
|
|
69
|
+
/** Tooltip text shown on hover/focus of info icon. */
|
|
70
|
+
tooltip: string;
|
|
71
|
+
/** Form `id` to associate with when input is outside form element. */
|
|
72
|
+
form: string | null;
|
|
73
|
+
/** Regex pattern for validation. Shows error on mismatch. */
|
|
74
|
+
pattern: string;
|
|
75
|
+
/** Maximum character length. */
|
|
76
|
+
maxlength: number | null;
|
|
77
|
+
/** Accessible label. When set, assuming "label" isn't provided for private special cases (i.e., <checkbox other>). */
|
|
78
|
+
ariaLabel: string;
|
|
79
|
+
/**
|
|
80
|
+
* Input width: `sm` (88px), `md` (200px), `lg` (384px), `full` (100%, default).
|
|
81
|
+
* @default "full"
|
|
82
|
+
*/
|
|
83
|
+
width: "sm" | "md" | "lg" | "full";
|
|
84
|
+
/** Step increment for `type="number"`. */
|
|
85
|
+
step: number | null;
|
|
86
|
+
/** Minimum value for `type="number"`. */
|
|
87
|
+
min: number | null;
|
|
88
|
+
/** Maximum value for `type="number"`. */
|
|
89
|
+
max: number | null;
|
|
90
|
+
/** Adjusts colors for dark backgrounds. */
|
|
91
|
+
inverted: boolean;
|
|
92
|
+
/** Shows error message when true. Set by validation or manually. */
|
|
93
|
+
showError: boolean;
|
|
94
|
+
/** Error message text. Shown only when `showError` is true. */
|
|
95
|
+
errorMessage: string;
|
|
96
|
+
private showPassword;
|
|
97
|
+
private _originalErrorMessage;
|
|
98
|
+
private _hasUserInteracted;
|
|
99
|
+
private _internals;
|
|
100
|
+
private _maskPatterns;
|
|
101
|
+
/**
|
|
102
|
+
* Lifecycle methods
|
|
103
|
+
* --------------------------------------------------------------------------
|
|
104
|
+
*/
|
|
105
|
+
static formAssociated: boolean;
|
|
106
|
+
constructor();
|
|
107
|
+
connectedCallback(): void;
|
|
108
|
+
disconnectedCallback(): void;
|
|
109
|
+
firstUpdated(): void;
|
|
110
|
+
updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void>;
|
|
111
|
+
focus(): void;
|
|
112
|
+
/**
|
|
113
|
+
* Form Integration
|
|
114
|
+
* --------------------------------------------------------------------------
|
|
115
|
+
*/
|
|
116
|
+
private _setValue;
|
|
117
|
+
private _manageRequire;
|
|
118
|
+
private _setValidityMessage;
|
|
119
|
+
private _validate;
|
|
120
|
+
formResetCallback(): void;
|
|
121
|
+
/**
|
|
122
|
+
* Functions
|
|
123
|
+
* --------------------------------------------------------------------------
|
|
124
|
+
*/
|
|
125
|
+
checkValidity(): boolean;
|
|
126
|
+
private _handleInvalid;
|
|
127
|
+
private _togglePasswordVisibility;
|
|
128
|
+
private _updateOverlay;
|
|
129
|
+
private _applyMask;
|
|
130
|
+
/**
|
|
131
|
+
* Event Handlers
|
|
132
|
+
* --------------------------------------------------------------------------
|
|
133
|
+
*/
|
|
134
|
+
private _handleInput;
|
|
135
|
+
private _handleFocus;
|
|
136
|
+
private _handleBlur;
|
|
137
|
+
private _validateButtonSlot;
|
|
138
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
139
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/nys-textinput.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
import { LitElement as y, unsafeCSS as c, html as h } from "lit";
|
|
2
2
|
import { property as o, state as _ } from "lit/decorators.js";
|
|
3
3
|
import { ifDefined as u } from "lit/directives/if-defined.js";
|
|
4
|
-
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-
|
|
5
|
-
var
|
|
4
|
+
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)}.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--start: var(--_nys-textinput-border-radius);--_nys-button-border-radius--end: 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--end: 0}.nys-textinput__buttoncontainer.has-end-button ::slotted(nys-button){--_nys-button-border-radius--start: 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}';
|
|
5
|
+
var f = Object.defineProperty, r = (p, e, s, t) => {
|
|
6
6
|
for (var i = void 0, l = p.length - 1, a; l >= 0; l--)
|
|
7
|
-
(a = p[l]) && (i = a(
|
|
8
|
-
return i &&
|
|
7
|
+
(a = p[l]) && (i = a(e, s, i) || i);
|
|
8
|
+
return i && f(e, s, i), i;
|
|
9
9
|
};
|
|
10
|
-
let
|
|
10
|
+
let b = 0;
|
|
11
11
|
const d = class d extends y {
|
|
12
12
|
// allows use of elementInternals' API
|
|
13
13
|
constructor() {
|
|
14
|
-
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.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 = {
|
|
14
|
+
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 = {
|
|
15
15
|
tel: "(___) ___-____"
|
|
16
16
|
}, this._internals = this.attachInternals();
|
|
17
17
|
}
|
|
18
18
|
// Generate a unique ID if one is not provided
|
|
19
19
|
connectedCallback() {
|
|
20
|
-
super.connectedCallback(), this.id || (this.id = `nys-textinput-${Date.now()}-${
|
|
20
|
+
super.connectedCallback(), this.id || (this.id = `nys-textinput-${Date.now()}-${b++}`), this._originalErrorMessage = this.errorMessage ?? "", this.addEventListener("invalid", this._handleInvalid);
|
|
21
21
|
}
|
|
22
22
|
disconnectedCallback() {
|
|
23
23
|
super.disconnectedCallback(), this.removeEventListener("invalid", this._handleInvalid);
|
|
@@ -26,12 +26,12 @@ const d = class d extends y {
|
|
|
26
26
|
this._setValue();
|
|
27
27
|
}
|
|
28
28
|
// Ensure the "width" property is valid after updates
|
|
29
|
-
async updated(
|
|
30
|
-
if (
|
|
31
|
-
const
|
|
29
|
+
async updated(e) {
|
|
30
|
+
if (e.has("disabled") && (this._validateButtonSlot("startButton"), this._validateButtonSlot("endButton")), e.has("type")) {
|
|
31
|
+
const s = this._maskPatterns[this.type], t = this.shadowRoot?.querySelector("input");
|
|
32
32
|
if (t)
|
|
33
|
-
if (
|
|
34
|
-
t.maxLength =
|
|
33
|
+
if (s)
|
|
34
|
+
t.maxLength = s.length, this._updateOverlay(t.value, s);
|
|
35
35
|
else {
|
|
36
36
|
t.removeAttribute("maxLength");
|
|
37
37
|
const i = this.shadowRoot?.querySelector(
|
|
@@ -40,11 +40,14 @@ const d = class d extends y {
|
|
|
40
40
|
i && (i.textContent = "");
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
|
-
if (
|
|
44
|
-
const
|
|
45
|
-
|
|
43
|
+
if (e.has("readonly") || e.has("required")) {
|
|
44
|
+
const s = this.shadowRoot?.querySelector("input");
|
|
45
|
+
s && (s.required = this.required && !this.readonly);
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
|
+
focus() {
|
|
49
|
+
this.shadowRoot?.querySelector("input")?.focus();
|
|
50
|
+
}
|
|
48
51
|
/**
|
|
49
52
|
* Form Integration
|
|
50
53
|
* --------------------------------------------------------------------------
|
|
@@ -53,28 +56,30 @@ const d = class d extends y {
|
|
|
53
56
|
this._internals.setFormValue(this.value), this._manageRequire();
|
|
54
57
|
}
|
|
55
58
|
_manageRequire() {
|
|
56
|
-
const s = this.shadowRoot?.querySelector("input");
|
|
57
|
-
if (!s) return;
|
|
58
|
-
const e = this.errorMessage || "This field is required";
|
|
59
|
-
this.required && (!this.value || this.value?.trim() === "") ? (this._internals.ariaRequired = "true", this._internals.setValidity({ valueMissing: !0 }, e, s)) : (this._internals.ariaRequired = "false", this._internals.setValidity({}), this._hasUserInteracted = !1);
|
|
60
|
-
}
|
|
61
|
-
_setValidityMessage(s = "") {
|
|
62
59
|
const e = this.shadowRoot?.querySelector("input");
|
|
63
60
|
if (!e) return;
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
this._internals.setValidity(t, this.errorMessage, e);
|
|
61
|
+
const s = this.errorMessage || "This field is required";
|
|
62
|
+
this.required && (!this.value || this.value?.trim() === "") ? (this._internals.ariaRequired = "true", this._internals.setValidity({ valueMissing: !0 }, s, e)) : (this._internals.ariaRequired = "false", this._internals.setValidity({}), this._hasUserInteracted = !1);
|
|
67
63
|
}
|
|
68
|
-
|
|
64
|
+
_setValidityMessage(e = "") {
|
|
69
65
|
const s = this.shadowRoot?.querySelector("input");
|
|
70
66
|
if (!s) return;
|
|
71
|
-
|
|
67
|
+
this.showError = !!e, this._originalErrorMessage?.trim() && e !== "" ? this.errorMessage = this._originalErrorMessage : this.errorMessage = e;
|
|
68
|
+
const t = e ? { customError: !0 } : {};
|
|
69
|
+
this._internals.setValidity(t, this.errorMessage, s);
|
|
70
|
+
}
|
|
71
|
+
_validate() {
|
|
72
|
+
const e = this.shadowRoot?.querySelector("input");
|
|
73
|
+
if (!e) return;
|
|
74
|
+
const s = e.validity;
|
|
72
75
|
let t = "";
|
|
73
|
-
|
|
76
|
+
s.valueMissing ? t = "This field is required" : s.typeMismatch ? t = "Invalid format for this type" : s.patternMismatch ? t = "Invalid format" : s.tooShort ? t = `Value is too short. Minimum length is ${e.minLength}` : s.tooLong ? t = `Value is too long. Maximum length is ${e.maxLength}` : s.rangeUnderflow ? t = `Value must be at least ${e.min}` : s.rangeOverflow ? t = `Value must be at most ${e.max}` : s.stepMismatch ? t = "Invalid step value" : t = e.validationMessage, this._setValidityMessage(t);
|
|
74
77
|
}
|
|
75
78
|
// This callback is automatically called when the parent form is reset.
|
|
76
79
|
formResetCallback() {
|
|
77
80
|
this.value = "";
|
|
81
|
+
const e = this.shadowRoot?.querySelector("input");
|
|
82
|
+
e && (e.value = ""), this._internals.setFormValue(""), this.showError = !1, this.errorMessage = "", this._internals.setValidity({}), this.showPassword = !1, this.requestUpdate();
|
|
78
83
|
}
|
|
79
84
|
/**
|
|
80
85
|
* Functions
|
|
@@ -82,44 +87,44 @@ const d = class d extends y {
|
|
|
82
87
|
*/
|
|
83
88
|
// This helper function is called to perform the element's native validation.
|
|
84
89
|
checkValidity() {
|
|
85
|
-
const s = this.shadowRoot?.querySelector("input");
|
|
86
|
-
return s ? s.checkValidity() : !0;
|
|
87
|
-
}
|
|
88
|
-
_handleInvalid(s) {
|
|
89
|
-
s.preventDefault(), this._hasUserInteracted = !0, this._validate();
|
|
90
90
|
const e = this.shadowRoot?.querySelector("input");
|
|
91
|
-
|
|
91
|
+
return e ? e.checkValidity() : !0;
|
|
92
|
+
}
|
|
93
|
+
_handleInvalid(e) {
|
|
94
|
+
e.preventDefault(), this._hasUserInteracted = !0, this._validate();
|
|
95
|
+
const s = this.shadowRoot?.querySelector("input");
|
|
96
|
+
if (s) {
|
|
92
97
|
const t = this._internals.form;
|
|
93
98
|
t ? Array.from(t.elements).find(
|
|
94
99
|
(a) => typeof a.checkValidity == "function" && !a.checkValidity()
|
|
95
|
-
) === this &&
|
|
100
|
+
) === this && s.focus() : s.focus();
|
|
96
101
|
}
|
|
97
102
|
}
|
|
98
103
|
_togglePasswordVisibility() {
|
|
99
104
|
this.showPassword = !this.showPassword;
|
|
100
105
|
}
|
|
101
|
-
_updateOverlay(
|
|
106
|
+
_updateOverlay(e, s) {
|
|
102
107
|
const t = this.shadowRoot?.querySelector(
|
|
103
108
|
".nys-textinput__mask-overlay"
|
|
104
109
|
);
|
|
105
110
|
if (!t) return;
|
|
106
|
-
const i =
|
|
111
|
+
const i = e, l = s.slice(i.length);
|
|
107
112
|
t.textContent = i + l;
|
|
108
113
|
}
|
|
109
|
-
_applyMask(
|
|
110
|
-
const t =
|
|
114
|
+
_applyMask(e, s) {
|
|
115
|
+
const t = e.replace(/\D/g, "");
|
|
111
116
|
let i = "";
|
|
112
117
|
if (this.type === "tel")
|
|
113
118
|
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;
|
|
114
119
|
let l = 0;
|
|
115
|
-
for (let a = 0; a <
|
|
116
|
-
if (
|
|
120
|
+
for (let a = 0; a < s.length; a++)
|
|
121
|
+
if (s[a] === "_" || s[a].match(/[d9]/i))
|
|
117
122
|
if (l < t.length)
|
|
118
123
|
i += t[l++];
|
|
119
124
|
else
|
|
120
125
|
break;
|
|
121
126
|
else
|
|
122
|
-
i +=
|
|
127
|
+
i += s[a];
|
|
123
128
|
return i;
|
|
124
129
|
}
|
|
125
130
|
/**
|
|
@@ -127,11 +132,11 @@ const d = class d extends y {
|
|
|
127
132
|
* --------------------------------------------------------------------------
|
|
128
133
|
*/
|
|
129
134
|
// Handle input event to check pattern validity
|
|
130
|
-
_handleInput(
|
|
131
|
-
const
|
|
132
|
-
let t =
|
|
135
|
+
_handleInput(e) {
|
|
136
|
+
const s = e.target;
|
|
137
|
+
let t = s.value;
|
|
133
138
|
const i = this._maskPatterns[this.type];
|
|
134
|
-
i && (t = this._applyMask(t, i),
|
|
139
|
+
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(
|
|
135
140
|
new CustomEvent("nys-input", {
|
|
136
141
|
detail: { id: this.id, value: this.value },
|
|
137
142
|
bubbles: !0,
|
|
@@ -147,21 +152,21 @@ const d = class d extends y {
|
|
|
147
152
|
_handleBlur() {
|
|
148
153
|
this._hasUserInteracted || (this._hasUserInteracted = !0), this._validate(), this.dispatchEvent(new Event("nys-blur"));
|
|
149
154
|
}
|
|
150
|
-
_validateButtonSlot(
|
|
151
|
-
const
|
|
152
|
-
'slot[name="' +
|
|
155
|
+
_validateButtonSlot(e) {
|
|
156
|
+
const s = this.shadowRoot?.querySelector(
|
|
157
|
+
'slot[name="' + e + '"]'
|
|
153
158
|
), t = this.shadowRoot?.querySelector(
|
|
154
159
|
".nys-textinput__buttoncontainer"
|
|
155
160
|
);
|
|
156
|
-
if (!
|
|
157
|
-
const i =
|
|
161
|
+
if (!s || !t) return;
|
|
162
|
+
const i = s.assignedElements();
|
|
158
163
|
let l = !1;
|
|
159
164
|
i.forEach((a) => {
|
|
160
165
|
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(
|
|
161
|
-
"The '" +
|
|
166
|
+
"The '" + e + "' slot only accepts a single <nys-button> element. Removing invalid or extra node:",
|
|
162
167
|
a
|
|
163
168
|
), a.remove());
|
|
164
|
-
}),
|
|
169
|
+
}), e === "startButton" ? t.classList.toggle("has-start-button", l) : e === "endButton" && t.classList.toggle("has-end-button", l);
|
|
165
170
|
}
|
|
166
171
|
render() {
|
|
167
172
|
return h`
|
|
@@ -193,7 +198,7 @@ const d = class d extends y {
|
|
|
193
198
|
?readonly=${this.readonly}
|
|
194
199
|
aria-required=${this.required}
|
|
195
200
|
aria-disabled="${this.disabled}"
|
|
196
|
-
aria-label="${[this.label, this.description].filter(Boolean).join(" ")}"
|
|
201
|
+
aria-label="${[this.label, this.description].filter(Boolean).join(" ") || u(this.ariaLabel || void 0) || "Text input"}"
|
|
197
202
|
.value=${this.value}
|
|
198
203
|
placeholder=${u(
|
|
199
204
|
this.placeholder ? this.placeholder : void 0
|
|
@@ -286,6 +291,9 @@ r([
|
|
|
286
291
|
r([
|
|
287
292
|
o({ type: Number })
|
|
288
293
|
], n.prototype, "maxlength");
|
|
294
|
+
r([
|
|
295
|
+
o({ type: String })
|
|
296
|
+
], n.prototype, "ariaLabel");
|
|
289
297
|
r([
|
|
290
298
|
o({ type: String, reflect: !0 })
|
|
291
299
|
], n.prototype, "width");
|
|
@@ -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 * `<nys-textinput>` is a form-enabled text input with validation, optional\n * masking, password toggle, accessibility support, and live error messages.\n * Works with forms via ElementInternals.\n *\n * @slot description - Optional custom description content below the label.\n * @slot startButton - Slot for a single <nys-button> at the start of the input.\n * @slot endButton - Slot for a single <nys-button> at the end of the input.\n *\n * @fires nys-input - Fired on input change. Detail: `{ id, value }`.\n * @fires nys-focus - Fired when input receives focus.\n * @fires nys-blur - Fired when input loses focus.\n */\n\nexport class NysTextinput 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, reflect: true }) type:\n | \"email\"\n | \"number\"\n | \"password\"\n | \"search\"\n | \"tel\"\n | \"text\"\n | \"url\" = \"text\";\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: String, reflect: true }) form: string | null = null;\n @property({ type: String }) pattern = \"\";\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 }) step: number | null = null;\n @property({ type: Number }) min: number | null = null;\n @property({ type: Number }) max: number | null = null;\n @property({ type: Boolean, reflect: true }) inverted = false;\n @property({ type: Boolean, reflect: true }) showError = false;\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 input.maxLength = mask.length;\n this._updateOverlay(input.value, mask);\n } else {\n input.removeAttribute(\"maxLength\");\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.ariaRequired = \"true\";\n this._internals.setValidity({ valueMissing: true }, message, input);\n } else {\n this._internals.ariaRequired = \"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 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 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(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 input is invalid, start aggressive mode\n }\n this._validate();\n\n this.dispatchEvent(new Event(\"nys-blur\"));\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 .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 } 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\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 input.maxLength = mask.length;\n this._updateOverlay(input.value, mask);\n } else {\n input.removeAttribute(\"maxLength\");\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 public focus() {\n const input = this.shadowRoot?.querySelector(\"input\");\n input?.focus();\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.ariaRequired = \"true\";\n this._internals.setValidity({ valueMissing: true }, message, input);\n } else {\n this._internals.ariaRequired = \"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(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 input is invalid, start aggressive mode\n }\n this._validate();\n\n this.dispatchEvent(new Event(\"nys-blur\"));\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":";;;;;;;;;AAMA,IAAIA,IAAqB;AA2ClB,MAAMC,IAAN,MAAMA,UAAqBC,EAAW;AAAA;AAAA,EAwG3C,cAAc;AACZ,UAAA,GArGyC,KAAA,KAAK,IAGL,KAAA,OAAO,IAMP,KAAA,OAO/B,QAGgB,KAAA,QAAQ,IAGR,KAAA,cAAc,IAGd,KAAA,cAAc,IAGd,KAAA,QAAQ,IAGQ,KAAA,WAAW,IAGX,KAAA,WAAW,IAGX,KAAA,WAAW,IAGX,KAAA,WAAW,IAG3B,KAAA,UAAU,IAGK,KAAA,OAAsB,MAGrC,KAAA,UAAU,IAGV,KAAA,YAA2B,MAG3B,KAAA,YAAY,IAMG,KAAA,QAI9B,QAGe,KAAA,OAAsB,MAGtB,KAAA,MAAqB,MAGrB,KAAA,MAAqB,MAGL,KAAA,WAAW,IAGX,KAAA,YAAY,IAG5B,KAAA,eAAe,IAClC,KAAQ,eAAe,IAEhC,KAAQ,wBAAwB,IAChC,KAAQ,qBAAqB,IAG7B,KAAQ,gBAAwC;AAAA,MAC9C,KAAK;AAAA,IAAA,GAWL,KAAK,aAAa,KAAK,gBAAA;AAAA,EACzB;AAAA;AAAA,EAGA,oBAAoB;AAClB,UAAM,kBAAA,GACD,KAAK,OACR,KAAK,KAAK,iBAAiB,KAAK,KAAK,IAAIF,GAAoB,KAG/D,KAAK,wBAAwB,KAAK,gBAAgB,IAClD,KAAK,iBAAiB,WAAW,KAAK,cAAc;AAAA,EACtD;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAA,GACN,KAAK,oBAAoB,WAAW,KAAK,cAAc;AAAA,EACzD;AAAA,EAEA,eAAe;AAEb,SAAK,UAAA;AAAA,EACP;AAAA;AAAA,EAGA,MAAM,QAAQG,GAA2D;AAMvE,QALIA,EAAkB,IAAI,UAAU,MAClC,KAAK,oBAAoB,aAAa,GACtC,KAAK,oBAAoB,WAAW,IAGlCA,EAAkB,IAAI,MAAM,GAAG;AACjC,YAAMC,IAAO,KAAK,cAAc,KAAK,IAAI,GACnCC,IAAQ,KAAK,YAAY,cAAc,OAAO;AAEpD,UAAIA;AACF,YAAID;AACF,UAAAC,EAAM,YAAYD,EAAK,QACvB,KAAK,eAAeC,EAAM,OAAOD,CAAI;AAAA,aAChC;AACL,UAAAC,EAAM,gBAAgB,WAAW;AACjC,gBAAMC,IAAU,KAAK,YAAY;AAAA,YAC/B;AAAA,UAAA;AAEF,UAAIA,QAAiB,cAAc;AAAA,QACrC;AAAA,IAEJ;AACA,QACEH,EAAkB,IAAI,UAAU,KAChCA,EAAkB,IAAI,UAAU,GAChC;AACA,YAAME,IAAQ,KAAK,YAAY,cAAc,OAAO;AAEpD,MAAIA,MAAOA,EAAM,WAAW,KAAK,YAAY,CAAC,KAAK;AAAA,IACrD;AAAA,EACF;AAAA,EAEO,QAAQ;AAEb,IADc,KAAK,YAAY,cAAc,OAAO,GAC7C,MAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,YAAY;AAClB,SAAK,WAAW,aAAa,KAAK,KAAK,GACvC,KAAK,eAAA;AAAA,EACP;AAAA,EAEQ,iBAAiB;AACvB,UAAMA,IAAQ,KAAK,YAAY,cAAc,OAAO;AAEpD,QAAI,CAACA,EAAO;AAEZ,UAAME,IAAU,KAAK,gBAAgB;AAIrC,IAFE,KAAK,aAAa,CAAC,KAAK,SAAS,KAAK,OAAO,KAAA,MAAW,OAGxD,KAAK,WAAW,eAAe,QAC/B,KAAK,WAAW,YAAY,EAAE,cAAc,GAAA,GAAQA,GAASF,CAAK,MAElE,KAAK,WAAW,eAAe,SAC/B,KAAK,WAAW,YAAY,EAAE,GAC9B,KAAK,qBAAqB;AAAA,EAE9B;AAAA,EAEQ,oBAAoBE,IAAkB,IAAI;AAChD,UAAMF,IAAQ,KAAK,YAAY,cAAc,OAAO;AACpD,QAAI,CAACA,EAAO;AAGZ,SAAK,YAAY,CAAC,CAACE,GAGf,KAAK,uBAAuB,KAAA,KAAUA,MAAY,KACpD,KAAK,eAAe,KAAK,wBAEzB,KAAK,eAAeA;AAGtB,UAAMC,IAAgBD,IAAU,EAAE,aAAa,GAAA,IAAS,CAAA;AACxD,SAAK,WAAW,YAAYC,GAAe,KAAK,cAAcH,CAAK;AAAA,EACrE;AAAA,EAEQ,YAAY;AAClB,UAAMA,IAAQ,KAAK,YAAY,cAAc,OAAO;AACpD,QAAI,CAACA,EAAO;AAGZ,UAAMI,IAAWJ,EAAM;AACvB,QAAIE,IAAU;AAGd,IAAIE,EAAS,eACXF,IAAU,2BACDE,EAAS,eAClBF,IAAU,iCACDE,EAAS,kBAClBF,IAAU,mBACDE,EAAS,WAClBF,IAAU,yCAAyCF,EAAM,SAAS,KACzDI,EAAS,UAClBF,IAAU,wCAAwCF,EAAM,SAAS,KACxDI,EAAS,iBAClBF,IAAU,0BAA0BF,EAAM,GAAG,KACpCI,EAAS,gBAClBF,IAAU,yBAAyBF,EAAM,GAAG,KACnCI,EAAS,eAClBF,IAAU,uBAEVA,IAAUF,EAAM,mBAGlB,KAAK,oBAAoBE,CAAO;AAAA,EAClC;AAAA;AAAA,EAGO,oBAAoB;AACzB,SAAK,QAAQ;AAEb,UAAMF,IAAQ,KAAK,YAAY,cAAc,OAAO;AACpD,IAAIA,MACFA,EAAM,QAAQ,KAGhB,KAAK,WAAW,aAAa,EAAE,GAG/B,KAAK,YAAY,IACjB,KAAK,eAAe,IACpB,KAAK,WAAW,YAAY,EAAE,GAE9B,KAAK,eAAe,IAGpB,KAAK,cAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,gBAAyB;AACvB,UAAMA,IAAQ,KAAK,YAAY,cAAc,OAAO;AACpD,WAAOA,IAAQA,EAAM,cAAA,IAAkB;AAAA,EACzC;AAAA,EAEQ,eAAeK,GAAc;AACnC,IAAAA,EAAM,eAAA,GACN,KAAK,qBAAqB,IAC1B,KAAK,UAAA;AAEL,UAAML,IAAQ,KAAK,YAAY,cAAc,OAAO;AACpD,QAAIA,GAAO;AAET,YAAMM,IAAO,KAAK,WAAW;AAC7B,MAAIA,IACe,MAAM,KAAKA,EAAK,QAAQ,EAIJ;AAAA,QACnC,CAACC,MACC,OAAOA,EAAQ,iBAAkB,cACjC,CAACA,EAAQ,cAAA;AAAA,MAAc,MAEC,QAC1BP,EAAM,MAAA,IAIRA,EAAM,MAAA;AAAA,IAEV;AAAA,EACF;AAAA,EAEQ,4BAA4B;AAClC,SAAK,eAAe,CAAC,KAAK;AAAA,EAC5B;AAAA,EAEQ,eAAeQ,GAAeT,GAAc;AAClD,UAAME,IAAU,KAAK,YAAY;AAAA,MAC/B;AAAA,IAAA;AAEF,QAAI,CAACA,EAAS;AAEd,UAAMQ,IAASD,GACTE,IAAYX,EAAK,MAAMU,EAAO,MAAM;AAC1C,IAAAR,EAAQ,cAAcQ,IAASC;AAAA,EACjC;AAAA,EAEQ,WAAWF,GAAeT,GAAsB;AACtD,UAAMY,IAASH,EAAM,QAAQ,OAAO,EAAE;AACtC,QAAII,IAAS;AAGb,QAAI,KAAK,SAAS;AAChB,aAAID,EAAO,SAAS,MAClBC,IAAS,MAAMD,EAAO,UAAU,GAAG,CAAC,IAElCA,EAAO,UAAU,MACnBC,KAAU,OAAOD,EAAO,UAAU,GAAG,CAAC,IAGpCA,EAAO,SAAS,MAClBC,KAAU,MAAMD,EAAO,UAAU,GAAG,EAAE,IAEjCC;AAIT,QAAIC,IAAa;AACjB,aAASC,IAAI,GAAGA,IAAIf,EAAK,QAAQe;AAC/B,UAAIf,EAAKe,CAAC,MAAM,OAAOf,EAAKe,CAAC,EAAE,MAAM,OAAO;AAC1C,YAAID,IAAaF,EAAO;AACtB,UAAAC,KAAUD,EAAOE,GAAY;AAAA;AAE7B;AAAA;AAGF,QAAAD,KAAUb,EAAKe,CAAC;AAIpB,WAAOF;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQQ,aAAaP,GAAc;AACjC,UAAML,IAAQK,EAAM;AACpB,QAAIU,IAAWf,EAAM;AAErB,UAAMD,IAAO,KAAK,cAAc,KAAK,IAAI;AACzC,IAAIA,MACFgB,IAAW,KAAK,WAAWA,GAAUhB,CAAI,GACzCC,EAAM,QAAQe,GACd,KAAK,eAAeA,GAAUhB,CAAI,IAGpC,KAAK,QAAQgB,GACb,KAAK,WAAW,aAAa,KAAK,KAAK,GAGnC,KAAK,sBACP,KAAK,UAAA,GAGP,KAAK;AAAA,MACH,IAAI,YAAY,aAAa;AAAA,QAC3B,QAAQ,EAAE,IAAI,KAAK,IAAI,OAAO,KAAK,MAAA;AAAA,QACnC,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA,EAGQ,eAAe;AACrB,SAAK,cAAc,IAAI,MAAM,WAAW,CAAC;AAAA,EAC3C;AAAA;AAAA,EAGQ,cAAc;AACpB,IAAK,KAAK,uBACR,KAAK,qBAAqB,KAE5B,KAAK,UAAA,GAEL,KAAK,cAAc,IAAI,MAAM,UAAU,CAAC;AAAA,EAC1C;AAAA,EAEQ,oBAAoBC,GAAkB;AAC5C,UAAMC,IAAO,KAAK,YAAY;AAAA,MAC5B,gBAAgBD,IAAW;AAAA,IAAA,GAEvBE,IAAY,KAAK,YAAY;AAAA,MACjC;AAAA,IAAA;AAGF,QAAI,CAACD,KAAQ,CAACC,EAAW;AAEzB,UAAMC,IAAmBF,EAAK,iBAAA;AAE9B,QAAIG,IAAmB;AAEvB,IAAAD,EAAiB,QAAQ,CAACE,MAAS;AAKjC,MAHEA,aAAgB,eAChBA,EAAK,QAAQ,kBAAkB,gBAEd,CAACD,KAElBA,IAAmB,IACnBC,EAAK,aAAa,QAAQ,IAAI,GAC9BA,EAAK,aAAa,WAAW,SAAS,GAElC,KAAK,WACPA,EAAK,aAAa,YAAY,MAAM,IAEpCA,EAAK,gBAAgB,UAAU,MAGjC,QAAQ;AAAA,QACN,UACEL,IACA;AAAA,QACFK;AAAA,MAAA,GAEFA,EAAK,OAAA;AAAA,IAET,CAAC,GAEGL,MAAa,gBACfE,EAAU,UAAU,OAAO,oBAAoBE,CAAgB,IACtDJ,MAAa,eACtBE,EAAU,UAAU,OAAO,kBAAkBE,CAAgB;AAAA,EAEjE;AAAA,EAEA,SAAS;AACP,WAAOE;AAAA;AAAA;AAAA,gBAGK,KAAK,KAAK,UAAU;AAAA,kBAClB,KAAK,KAAK;AAAA,wBACJ,KAAK,WAAW;AAAA,iBACvB,KAAK,YAAY,CAAC,KAAK,WAC1B,aACA,KAAK,WACH,aACA,EAAE;AAAA,oBACE,KAAK,OAAO;AAAA,sBACV,KAAK,QAAQ;AAAA;AAAA,wDAEqB,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,0BAK9C,MAAM,KAAK,oBAAoB,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMlD,KAAK,SAAS,aACjB,KAAK,eACH,SACA,aACF,KAAK,IAAI;AAAA,qBACN,KAAK,IAAI;AAAA,mBACX,KAAK,KAAK,UAAU;AAAA,0BACb,KAAK,QAAQ;AAAA,0BACb,KAAK,YAAY,CAAC,KAAK,QAAQ;AAAA,0BAC/B,KAAK,QAAQ;AAAA,8BACT,KAAK,QAAQ;AAAA,+BACZ,KAAK,QAAQ;AAAA,4BAChB,CAAC,KAAK,OAAO,KAAK,WAAW,EACxC,OAAO,OAAO,EACd,KAAK,GAAG,KACXC,EAAU,KAAK,aAAa,MAAS,KACrC,YAAY;AAAA,uBACH,KAAK,KAAK;AAAA,4BACLA;AAAA,MACZ,KAAK,cAAc,KAAK,cAAc;AAAA,IAAA,CACvC;AAAA,wBACSA,EAAU,KAAK,UAAU,KAAK,UAAU,MAAS,CAAC;AAAA,oBACtDA,EAAU,KAAK,QAAQ,OAAO,KAAK,MAAM,MAAS,CAAC;AAAA,0BAC7CA;AAAA,MACV,KAAK,cAAc,OAAO,KAAK,YAAY;AAAA,IAAA,CAC5C;AAAA,qBACMA,EAAU,KAAK,SAAS,OAAO,KAAK,OAAO,MAAS,CAAC;AAAA,oBACtDA,EAAU,KAAK,QAAQ,OAAO,KAAK,MAAM,MAAS,CAAC;AAAA,qBAClDA,EAAU,KAAK,QAAQ,MAAS,CAAC;AAAA,uBAC/B,KAAK,YAAY;AAAA,wBAChB,KAAK,YAAY;AAAA,uBAClB,KAAK,WAAW;AAAA;AAAA,cAEzB,KAAK,SAAS,aACZD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,+BAOe,MACX,CAAC,KAAK,YAAY,KAAK,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA,2BAK3C,KAAK,eAAe,mBAAmB,YAAY;AAAA;AAAA,iCAG9D,EAAE;AAAA;AAAA;AAAA;AAAA,0BAIQ,MAAM,KAAK,oBAAoB,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA,uBAI9C,KAAK,SAAS;AAAA,yBACZ,KAAK,YAAY;AAAA;AAAA;AAAA;AAAA,EAIxC;AACF;AAniBE1B,EAAO,SAAS4B,EAAUC,CAAM,GAqGhC7B,EAAO,iBAAiB;AAtGnB,IAAM8B,IAAN9B;AAIsC+B,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAJ9BF,EAIgC,WAAA,IAAA;AAGAC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BF,EAOgC,WAAA,MAAA;AAMAC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAb9BF,EAagC,WAAA,MAAA;AAUfC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvBfF,EAuBiB,WAAA,OAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfF,EA0BiB,WAAA,aAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7BfF,EA6BiB,WAAA,aAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhCfF,EAgCiB,WAAA,OAAA;AAGgBC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnC/BF,EAmCiC,WAAA,UAAA;AAGAC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtC/BF,EAsCiC,WAAA,UAAA;AAGAC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAzC/BF,EAyCiC,WAAA,UAAA;AAGAC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA5C/BF,EA4CiC,WAAA,UAAA;AAGhBC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/CfF,EA+CiB,WAAA,SAAA;AAGeC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAlD9BF,EAkDgC,WAAA,MAAA;AAGfC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArDfF,EAqDiB,WAAA,SAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxDfF,EAwDiB,WAAA,WAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3DfF,EA2DiB,WAAA,WAAA;AAMeC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAjE9BF,EAiEgC,WAAA,OAAA;AAOfC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxEfF,EAwEiB,WAAA,MAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3EfF,EA2EiB,WAAA,KAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9EfF,EA8EiB,WAAA,KAAA;AAGgBC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjF/BF,EAiFiC,WAAA,UAAA;AAGAC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApF/BF,EAoFiC,WAAA,WAAA;AAGhBC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvFfF,EAuFiB,WAAA,cAAA;AACXC,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAxFIH,EAwFM,WAAA,cAAA;AA8cd,eAAe,IAAI,eAAe,KACrC,eAAe,OAAO,iBAAiBA,CAAY;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nysds/nys-textinput",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.14.0",
|
|
4
4
|
"description": "The Textinput component from the NYS Design System.",
|
|
5
5
|
"module": "dist/nys-textinput.js",
|
|
6
6
|
"exports": {
|
|
@@ -22,14 +22,14 @@
|
|
|
22
22
|
"lit-analyze": "lit-analyzer '**/*.ts'"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@nysds/nys-icon": "^1.
|
|
26
|
-
"@nysds/nys-label": "^1.
|
|
27
|
-
"@nysds/nys-errormessage": "^1.
|
|
25
|
+
"@nysds/nys-icon": "^1.14.0",
|
|
26
|
+
"@nysds/nys-label": "^1.14.0",
|
|
27
|
+
"@nysds/nys-errormessage": "^1.14.0"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"lit": "^3.3.1",
|
|
31
31
|
"typescript": "^5.9.3",
|
|
32
|
-
"vite": "^7.1
|
|
32
|
+
"vite": "^7.3.1"
|
|
33
33
|
},
|
|
34
34
|
"keywords": [
|
|
35
35
|
"new-york-state",
|