@nysds/nys-textinput 1.12.0 → 1.13.0

package/dist/nys-textinput.js

@@ -1,11 +1,11 @@
 import { LitElement as y, unsafeCSS as c, html as h } from "lit";
 import { property as o, state as _ } from "lit/decorators.js";
 import { ifDefined as u } from "lit/directives/if-defined.js";
-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}';
-var b = Object.defineProperty, r = (p, e, s, t) => {
+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}';
+var b = Object.defineProperty, r = (p, s, e, t) => {
   for (var i = void 0, l = p.length - 1, a; l >= 0; l--)
-    (a = p[l]) && (i = a(e, s, i) || i);
-  return i && b(e, s, i), i;
+    (a = p[l]) && (i = a(s, e, i) || i);
+  return i && b(s, e, i), i;
 };
 let f = 0;
 const d = class d extends y {
@@ -26,12 +26,12 @@ const d = class d extends y {
     this._setValue();
   }
   // Ensure the "width" property is valid after updates
-  async updated(e) {
-    if (e.has("disabled") && (this._validateButtonSlot("startButton"), this._validateButtonSlot("endButton")), e.has("type")) {
-      const s = this._maskPatterns[this.type], t = this.shadowRoot?.querySelector("input");
+  async updated(s) {
+    if (s.has("disabled") && (this._validateButtonSlot("startButton"), this._validateButtonSlot("endButton")), s.has("type")) {
+      const e = this._maskPatterns[this.type], t = this.shadowRoot?.querySelector("input");
       if (t)
-        if (s)
-          t.maxLength = s.length, this._updateOverlay(t.value, s);
+        if (e)
+          t.maxLength = e.length, this._updateOverlay(t.value, e);
         else {
           t.removeAttribute("maxLength");
           const i = this.shadowRoot?.querySelector(
@@ -40,85 +40,98 @@ const d = class d extends y {
           i && (i.textContent = "");
         }
     }
+    if (s.has("readonly") || s.has("required")) {
+      const e = this.shadowRoot?.querySelector("input");
+      e && (e.required = this.required && !this.readonly);
+    }
   }
-  // This callback is automatically called when the parent form is reset.
-  formResetCallback() {
-    this.value = "";
-  }
-  // Form Integration
+  /**
+   * Form Integration
+   * --------------------------------------------------------------------------
+   */
   _setValue() {
     this._internals.setFormValue(this.value), this._manageRequire();
   }
   _manageRequire() {
-    const e = this.shadowRoot?.querySelector("input");
-    if (!e) return;
-    const s = this.errorMessage || "This field is required";
-    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);
-  }
-  _setValidityMessage(e = "") {
     const s = this.shadowRoot?.querySelector("input");
     if (!s) return;
-    this.showError = !!e, this._originalErrorMessage?.trim() && e !== "" ? this.errorMessage = this._originalErrorMessage : this.errorMessage = e;
-    const t = e ? { customError: !0 } : {};
-    this._internals.setValidity(t, this.errorMessage, s);
+    const e = this.errorMessage || "This field is required";
+    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);
   }
-  _validate() {
+  _setValidityMessage(s = "") {
     const e = this.shadowRoot?.querySelector("input");
     if (!e) return;
-    const s = e.validity;
+    this.showError = !!s, this._originalErrorMessage?.trim() && s !== "" ? this.errorMessage = this._originalErrorMessage : this.errorMessage = s;
+    const t = s ? { customError: !0 } : {};
+    this._internals.setValidity(t, this.errorMessage, e);
+  }
+  _validate() {
+    const s = this.shadowRoot?.querySelector("input");
+    if (!s) return;
+    const e = s.validity;
     let t = "";
-    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);
+    e.valueMissing ? t = "This field is required" : e.typeMismatch ? t = "Invalid format for this type" : e.patternMismatch ? t = "Invalid format" : e.tooShort ? t = `Value is too short. Minimum length is ${s.minLength}` : e.tooLong ? t = `Value is too long. Maximum length is ${s.maxLength}` : e.rangeUnderflow ? t = `Value must be at least ${s.min}` : e.rangeOverflow ? t = `Value must be at most ${s.max}` : e.stepMismatch ? t = "Invalid step value" : t = s.validationMessage, this._setValidityMessage(t);
+  }
+  // This callback is automatically called when the parent form is reset.
+  formResetCallback() {
+    this.value = "";
   }
-  // Functions
+  /**
+   * Functions
+   * --------------------------------------------------------------------------
+   */
   // This helper function is called to perform the element's native validation.
   checkValidity() {
-    const e = this.shadowRoot?.querySelector("input");
-    return e ? e.checkValidity() : !0;
-  }
-  _handleInvalid(e) {
-    e.preventDefault(), this._hasUserInteracted = !0, this._validate();
     const s = this.shadowRoot?.querySelector("input");
-    if (s) {
+    return s ? s.checkValidity() : !0;
+  }
+  _handleInvalid(s) {
+    s.preventDefault(), this._hasUserInteracted = !0, this._validate();
+    const e = this.shadowRoot?.querySelector("input");
+    if (e) {
       const t = this._internals.form;
       t ? Array.from(t.elements).find(
         (a) => typeof a.checkValidity == "function" && !a.checkValidity()
-      ) === this && s.focus() : s.focus();
+      ) === this && e.focus() : e.focus();
     }
   }
   _togglePasswordVisibility() {
     this.showPassword = !this.showPassword;
   }
-  _updateOverlay(e, s) {
+  _updateOverlay(s, e) {
     const t = this.shadowRoot?.querySelector(
       ".nys-textinput__mask-overlay"
     );
     if (!t) return;
-    const i = e, l = s.slice(i.length);
+    const i = s, l = e.slice(i.length);
     t.textContent = i + l;
   }
-  _applyMask(e, s) {
-    const t = e.replace(/\D/g, "");
+  _applyMask(s, e) {
+    const t = s.replace(/\D/g, "");
     let i = "";
     if (this.type === "tel")
       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;
     let l = 0;
-    for (let a = 0; a < s.length; a++)
-      if (s[a] === "_" || s[a].match(/[d9]/i))
+    for (let a = 0; a < e.length; a++)
+      if (e[a] === "_" || e[a].match(/[d9]/i))
         if (l < t.length)
           i += t[l++];
         else
           break;
       else
-        i += s[a];
+        i += e[a];
     return i;
   }
-  // Event Handlers
+  /**
+   * Event Handlers
+   * --------------------------------------------------------------------------
+   */
   // Handle input event to check pattern validity
-  _handleInput(e) {
-    const s = e.target;
-    let t = s.value;
+  _handleInput(s) {
+    const e = s.target;
+    let t = e.value;
     const i = this._maskPatterns[this.type];
-    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(
+    i && (t = this._applyMask(t, i), e.value = t, this._updateOverlay(t, i)), this.value = t, this._internals.setFormValue(this.value), this._hasUserInteracted && this._validate(), this.dispatchEvent(
       new CustomEvent("nys-input", {
         detail: { id: this.id, value: this.value },
         bubbles: !0,
@@ -134,21 +147,21 @@ const d = class d extends y {
   _handleBlur() {
     this._hasUserInteracted || (this._hasUserInteracted = !0), this._validate(), this.dispatchEvent(new Event("nys-blur"));
   }
-  _validateButtonSlot(e) {
-    const s = this.shadowRoot?.querySelector(
-      'slot[name="' + e + '"]'
+  _validateButtonSlot(s) {
+    const e = this.shadowRoot?.querySelector(
+      'slot[name="' + s + '"]'
     ), t = this.shadowRoot?.querySelector(
       ".nys-textinput__buttoncontainer"
     );
-    if (!s || !t) return;
-    const i = s.assignedElements();
+    if (!e || !t) return;
+    const i = e.assignedElements();
     let l = !1;
     i.forEach((a) => {
       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(
-        "The '" + e + "' slot only accepts a single <nys-button> element. Removing invalid or extra node:",
+        "The '" + s + "' slot only accepts a single <nys-button> element. Removing invalid or extra node:",
         a
       ), a.remove());
-    }), e === "startButton" ? t.classList.toggle("has-start-button", l) : e === "endButton" && t.classList.toggle("has-end-button", l);
+    }), s === "startButton" ? t.classList.toggle("has-start-button", l) : s === "endButton" && t.classList.toggle("has-end-button", l);
   }
   render() {
     return h`
@@ -157,7 +170,7 @@ const d = class d extends y {
           for=${this.id + "--native"}
           label=${this.label}
           description=${this.description}
-          flag=${this.required ? "required" : this.optional ? "optional" : ""}
+          flag=${this.required && !this.readonly ? "required" : this.optional ? "optional" : ""}
           tooltip=${this.tooltip}
           ?inverted=${this.inverted}
         >
@@ -176,7 +189,7 @@ const d = class d extends y {
               name=${this.name}
               id=${this.id + "--native"}
               ?disabled=${this.disabled}
-              ?required=${this.required}
+              ?required=${this.required && !this.readonly}
               ?readonly=${this.readonly}
               aria-required=${this.required}
               aria-disabled="${this.disabled}"

package/dist/nys-textinput.js.map

@@ -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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"}
+{"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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nysds/nys-textinput",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "The Textinput component from the NYS Design System.",
   "module": "dist/nys-textinput.js",
   "exports": {
@@ -22,9 +22,9 @@
     "lit-analyze": "lit-analyzer '**/*.ts'"
   },
   "dependencies": {
-    "@nysds/nys-icon": "^1.12.0",
-    "@nysds/nys-label": "^1.12.0",
-    "@nysds/nys-errormessage": "^1.12.0"
+    "@nysds/nys-icon": "^1.13.0",
+    "@nysds/nys-label": "^1.13.0",
+    "@nysds/nys-errormessage": "^1.13.0"
   },
   "devDependencies": {
     "lit": "^3.3.1",