@nysds/nys-textinput 1.12.0 → 1.13.1
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/nys-textinput.js +31 -16
- package/dist/nys-textinput.js.map +1 -1
- package/package.json +4 -4
package/dist/nys-textinput.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { LitElement as y, unsafeCSS as c, html as
|
|
1
|
+
import { LitElement as y, unsafeCSS as c, html as p } 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-color: var( --nys-color-ink, var(--nys-color-neutral-900, #1b1b1b) );--_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-color:transparent;outline-width:var(--_nys-textinput-outline-width);outline-style:solid;padding:var(--_nys-textinput-padding);width:100%;height:var(--_nys-textinput-height);box-sizing:border-box;-webkit-box-sizing:border-box;-moz-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){outline-color:var(--_nys-textinput-outline-color--hover);border-color:var(--_nys-textinput-outline-color--hover)}.nys-textinput__input:focus{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 b = Object.defineProperty, r = (
|
|
6
|
-
for (var i = void 0, l =
|
|
7
|
-
(a =
|
|
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-color: var( --nys-color-ink, var(--nys-color-neutral-900, #1b1b1b) );--_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-color:transparent;outline-width:var(--_nys-textinput-outline-width);outline-style:solid;padding:var(--_nys-textinput-padding);width:100%;height:var(--_nys-textinput-height);box-sizing:border-box;-webkit-box-sizing:border-box;-moz-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 b = Object.defineProperty, r = (h, e, s, t) => {
|
|
6
|
+
for (var i = void 0, l = h.length - 1, a; l >= 0; l--)
|
|
7
|
+
(a = h[l]) && (i = a(e, s, i) || i);
|
|
8
8
|
return i && b(e, s, i), i;
|
|
9
9
|
};
|
|
10
10
|
let f = 0;
|
|
@@ -40,12 +40,15 @@ const d = class d extends y {
|
|
|
40
40
|
i && (i.textContent = "");
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
|
+
if (e.has("readonly") || e.has("required")) {
|
|
44
|
+
const s = this.shadowRoot?.querySelector("input");
|
|
45
|
+
s && (s.required = this.required && !this.readonly);
|
|
46
|
+
}
|
|
43
47
|
}
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
// Form Integration
|
|
48
|
+
/**
|
|
49
|
+
* Form Integration
|
|
50
|
+
* --------------------------------------------------------------------------
|
|
51
|
+
*/
|
|
49
52
|
_setValue() {
|
|
50
53
|
this._internals.setFormValue(this.value), this._manageRequire();
|
|
51
54
|
}
|
|
@@ -69,7 +72,16 @@ const d = class d extends y {
|
|
|
69
72
|
let t = "";
|
|
70
73
|
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);
|
|
71
74
|
}
|
|
72
|
-
//
|
|
75
|
+
// This callback is automatically called when the parent form is reset.
|
|
76
|
+
formResetCallback() {
|
|
77
|
+
this.value = "";
|
|
78
|
+
const e = this.shadowRoot?.querySelector("input");
|
|
79
|
+
e && (e.value = ""), this._internals.setFormValue(""), this.showError = !1, this.errorMessage = "", this._internals.setValidity({}), this.showPassword = !1, this.requestUpdate();
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* Functions
|
|
83
|
+
* --------------------------------------------------------------------------
|
|
84
|
+
*/
|
|
73
85
|
// This helper function is called to perform the element's native validation.
|
|
74
86
|
checkValidity() {
|
|
75
87
|
const e = this.shadowRoot?.querySelector("input");
|
|
@@ -112,7 +124,10 @@ const d = class d extends y {
|
|
|
112
124
|
i += s[a];
|
|
113
125
|
return i;
|
|
114
126
|
}
|
|
115
|
-
|
|
127
|
+
/**
|
|
128
|
+
* Event Handlers
|
|
129
|
+
* --------------------------------------------------------------------------
|
|
130
|
+
*/
|
|
116
131
|
// Handle input event to check pattern validity
|
|
117
132
|
_handleInput(e) {
|
|
118
133
|
const s = e.target;
|
|
@@ -151,13 +166,13 @@ const d = class d extends y {
|
|
|
151
166
|
}), e === "startButton" ? t.classList.toggle("has-start-button", l) : e === "endButton" && t.classList.toggle("has-end-button", l);
|
|
152
167
|
}
|
|
153
168
|
render() {
|
|
154
|
-
return
|
|
169
|
+
return p`
|
|
155
170
|
<div class="nys-textinput">
|
|
156
171
|
<nys-label
|
|
157
172
|
for=${this.id + "--native"}
|
|
158
173
|
label=${this.label}
|
|
159
174
|
description=${this.description}
|
|
160
|
-
flag=${this.required ? "required" : this.optional ? "optional" : ""}
|
|
175
|
+
flag=${this.required && !this.readonly ? "required" : this.optional ? "optional" : ""}
|
|
161
176
|
tooltip=${this.tooltip}
|
|
162
177
|
?inverted=${this.inverted}
|
|
163
178
|
>
|
|
@@ -176,7 +191,7 @@ const d = class d extends y {
|
|
|
176
191
|
name=${this.name}
|
|
177
192
|
id=${this.id + "--native"}
|
|
178
193
|
?disabled=${this.disabled}
|
|
179
|
-
?required=${this.required}
|
|
194
|
+
?required=${this.required && !this.readonly}
|
|
180
195
|
?readonly=${this.readonly}
|
|
181
196
|
aria-required=${this.required}
|
|
182
197
|
aria-disabled="${this.disabled}"
|
|
@@ -197,7 +212,7 @@ const d = class d extends y {
|
|
|
197
212
|
@focus="${this._handleFocus}"
|
|
198
213
|
@blur="${this._handleBlur}"
|
|
199
214
|
/>
|
|
200
|
-
${this.type === "password" ?
|
|
215
|
+
${this.type === "password" ? p` <nys-button
|
|
201
216
|
class="eye-icon"
|
|
202
217
|
id="password-toggle"
|
|
203
218
|
suffixIcon="slotted"
|
|
@@ -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; // Counter for generating unique IDs\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 // Lifecycle updates\n static formAssociated = true; // allows use of elementInternals' API\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n // Generate a unique ID if one is not provided\n connectedCallback() {\n super.connectedCallback();\n if (!this.id) {\n this.id = `nys-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 }\n\n // This callback is automatically called when the parent form is reset.\n formResetCallback() {\n this.value = \"\";\n }\n\n // Form Integration\n private _setValue() {\n this._internals.setFormValue(this.value);\n this._manageRequire(); // 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 // Functions\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 // Event Handlers\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 ? \"required\" : this.optional ? \"optional\" : \"\"}\n tooltip=${this.tooltip}\n ?inverted=${this.inverted}\n >\n <slot name=\"description\" slot=\"description\">${this.description}</slot>\n </nys-label>\n <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}\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 Email with validation\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 /**\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 /**\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 .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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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nysds/nys-textinput",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.13.1",
|
|
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.
|
|
26
|
-
"@nysds/nys-label": "^1.
|
|
27
|
-
"@nysds/nys-errormessage": "^1.
|
|
25
|
+
"@nysds/nys-icon": "^1.13.1",
|
|
26
|
+
"@nysds/nys-label": "^1.13.1",
|
|
27
|
+
"@nysds/nys-errormessage": "^1.13.1"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"lit": "^3.3.1",
|