impact-nova 2.5.7 → 2.5.9

package/dist/components/forms/date-picker/year-picker.js

@@ -0,0 +1,176 @@
+import { jsx as r, jsxs as y } from "react/jsx-runtime";
+import * as t from "react";
+import { Cross as W, CalendarMonth as X } from "impact-nova-icons";
+import { cn as Z } from "../../../lib/utils.js";
+import { Input as _ } from "../input/input.js";
+import { Calendar as $ } from "../../data-display/calendar/calendar.js";
+import { Tooltip as x, TooltipTrigger as R, TooltipContent as D } from "../../feedback/tooltip/tooltip.js";
+import { useImpactNovaI18n as ee } from "../../../i18n/use-impact-nova-i18n.js";
+import { buildDateBoundsMatcher as re } from "../../../lib/date-bounds-matcher.js";
+import { fiscalCalendarPassThrough as te } from "./fiscal-pass-through.js";
+import { DatePickerShell as ne } from "./date-picker-shell.js";
+import { usePickerDismissActionsRef as oe, usePickerFooterDismissNudge as ae, handleReadonlyPickerKeyDown as ie, handlePickerSurfacePointerDown as ce } from "./date-input-behavior.js";
+import { formatYearInput as se } from "../../data-display/calendar/calendar-fiscal-labels.js";
+import { viewMonthFromYear as le } from "../../data-display/calendar/calendar-year-utils.js";
+const pe = t.forwardRef(
+  ({
+    value: n,
+    onChange: d,
+    placeholder: Y,
+    minDate: v,
+    maxDate: N,
+    startMonth: S,
+    endMonth: A,
+    showFooter: s = !0,
+    disabled: o,
+    className: I,
+    calendarKind: O,
+    fiscalMode: T,
+    granularity: w,
+    fiscalMonthPattern: M,
+    fiscalYearStartMonth: K,
+    fiscalConfig: k,
+    showPresets: j,
+    showIntervalCaption: F = !1,
+    ...L
+  }, z) => {
+    const { t: a } = ee(), E = Y ?? a("datePicker.selectYear"), m = t.useRef(null), P = t.useRef(null);
+    t.useImperativeHandle(z, () => m.current);
+    const [i, c] = t.useState(!1), u = t.useRef(!1), g = oe(), { footerFlashKey: H, footerFlashTarget: V, popoverHandlers: B } = ae(s, i, g, P), [C, l] = t.useState(n), [q, G] = t.useState(le(n));
+    t.useEffect(() => {
+      i || l(n);
+    }, [i, n]);
+    const p = t.useCallback(() => c(!1), []), J = te({
+      calendarKind: O,
+      fiscalMode: T,
+      granularity: w,
+      fiscalMonthPattern: M,
+      fiscalYearStartMonth: K,
+      fiscalConfig: k,
+      showPresets: j
+    }), Q = (e) => {
+      const f = e && !Array.isArray(e) && !("from" in e) && !("to" in e) ? e : void 0;
+      l(f), s || (d?.(f), p());
+    }, U = () => {
+      d?.(C), p();
+    }, h = () => {
+      l(n), p();
+    }, b = () => {
+      l(void 0), d?.(void 0), s || p();
+    };
+    return t.useLayoutEffect(() => {
+      g.current = { onDismiss: h, resolveFlash: () => "cancel" };
+    }), /* @__PURE__ */ r(
+      ne,
+      {
+        open: i,
+        disabled: o,
+        ariaLabel: a("datePicker.selectYear"),
+        onOpenChange: (e) => {
+          o || c(e);
+        },
+        onOpenAutoFocus: (e) => {
+          u.current || e.preventDefault(), u.current = !1;
+        },
+        popoverHandlers: B,
+        trigger: /* @__PURE__ */ r(
+          "div",
+          {
+            ref: P,
+            "data-component": "year-picker",
+            "data-state": i ? "open" : "closed",
+            onPointerDown: (e) => ce({
+              disabled: o,
+              event: e,
+              onOpen: () => c(!0),
+              focusField: () => m.current?.focus()
+            }),
+            children: /* @__PURE__ */ r(
+              _,
+              {
+                ref: m,
+                value: n ? se(n, k?.fyLabel ?? "fy-long") : "",
+                readOnly: !0,
+                onKeyDown: (e) => ie(e, {
+                  disabled: o,
+                  open: i,
+                  onOpen: () => c(!0),
+                  onCancel: h,
+                  onKeyboardOpen: () => {
+                    u.current = !0;
+                  }
+                }),
+                onClick: () => !o && c(!0),
+                placeholder: E,
+                disabled: o,
+                "data-form-control": "input",
+                className: Z("cursor-pointer", I),
+                suffix: /* @__PURE__ */ y("div", { className: "flex items-center gap-1", children: [
+                  n && !o ? /* @__PURE__ */ y(x, { children: [
+                    /* @__PURE__ */ r(R, { asChild: !0, children: /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        tabIndex: 0,
+                        "aria-label": a("calendar.clear"),
+                        onClick: (e) => {
+                          e.stopPropagation(), b();
+                        },
+                        className: "inline-flex size-4 items-center justify-center border-none bg-transparent p-0",
+                        children: /* @__PURE__ */ r(W, { className: "size-3 hover:text-content" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ r(D, { variant: "tertiary", side: "top", children: a("calendar.clear") })
+                  ] }) : null,
+                  /* @__PURE__ */ y(x, { children: [
+                    /* @__PURE__ */ r(R, { asChild: !0, children: /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        tabIndex: 0,
+                        "data-component": "calendar-trigger",
+                        "aria-label": a("datePicker.selectYear"),
+                        onClick: (e) => {
+                          e.stopPropagation(), o || c((f) => !f);
+                        },
+                        className: "inline-flex items-center justify-center border-none bg-transparent p-0",
+                        children: /* @__PURE__ */ r(X, { className: "h-4 w-4 text-secondary-foreground" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ r(D, { variant: "tertiary", side: "top", children: a("datePicker.selectYear") })
+                  ] })
+                ] }),
+                ...L
+              }
+            )
+          }
+        ),
+        children: /* @__PURE__ */ r(
+          $,
+          {
+            pickerType: "year",
+            selectedYear: C,
+            footerFlashKey: H,
+            footerFlashTarget: V,
+            onYearSelect: Q,
+            month: q,
+            onMonthChange: G,
+            disabled: re(v, N),
+            startMonth: S,
+            endMonth: A,
+            showFooter: s,
+            onApply: U,
+            onCancel: h,
+            onClear: b,
+            showIntervalCaption: F,
+            ...J
+          }
+        )
+      }
+    );
+  }
+);
+pe.displayName = "YearPicker";
+export {
+  pe as YearPicker
+};

package/dist/components/forms/date-picker/year-range-picker.d.ts

@@ -0,0 +1,3 @@
+import { YearRangePickerProps } from './date-picker.types';
+import * as React from "react";
+export declare const YearRangePicker: React.ForwardRefExoticComponent<YearRangePickerProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/forms/date-picker/year-range-picker.js

@@ -0,0 +1,179 @@
+import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import * as t from "react";
+import { Cross as Z, CalendarMonth as _ } from "impact-nova-icons";
+import { cn as ee } from "../../../lib/utils.js";
+import { Input as re } from "../input/input.js";
+import { Calendar as te } from "../../data-display/calendar/calendar.js";
+import { Tooltip as x, TooltipTrigger as D, TooltipContent as Y } from "../../feedback/tooltip/tooltip.js";
+import { useImpactNovaI18n as ne } from "../../../i18n/use-impact-nova-i18n.js";
+import { buildDateBoundsMatcher as oe } from "../../../lib/date-bounds-matcher.js";
+import { fiscalCalendarPassThrough as ae } from "./fiscal-pass-through.js";
+import { DatePickerShell as ie } from "./date-picker-shell.js";
+import { usePickerDismissActionsRef as ce, usePickerFooterDismissNudge as se, handleReadonlyPickerKeyDown as le, handlePickerSurfacePointerDown as fe } from "./date-input-behavior.js";
+import { formatYearInput as N } from "../../data-display/calendar/calendar-fiscal-labels.js";
+import { viewMonthFromYear as pe } from "../../data-display/calendar/calendar-year-utils.js";
+const de = t.forwardRef(
+  ({
+    value: n,
+    onChange: d,
+    placeholder: S,
+    minDate: v,
+    maxDate: A,
+    startMonth: I,
+    endMonth: M,
+    showFooter: l = !0,
+    disabled: o,
+    className: O,
+    calendarKind: T,
+    fiscalMode: w,
+    granularity: K,
+    fiscalMonthPattern: j,
+    fiscalYearStartMonth: F,
+    fiscalConfig: y,
+    showPresets: L,
+    showIntervalCaption: $ = !1,
+    ...z
+  }, E) => {
+    const { t: a } = ne(), H = S ?? a("datePicker.selectYearRange"), k = y?.fyLabel ?? "fy-long", m = t.useRef(null), P = t.useRef(null);
+    t.useImperativeHandle(E, () => m.current);
+    const [i, c] = t.useState(!1), u = t.useRef(!1), R = ce(), { footerFlashKey: V, footerFlashTarget: B, popoverHandlers: q } = se(l, i, R, P), [C, f] = t.useState(n), [G, J] = t.useState(pe(n?.from));
+    t.useEffect(() => {
+      i || f(n);
+    }, [i, n]);
+    const p = t.useCallback(() => c(!1), []), Q = ae({
+      calendarKind: T,
+      fiscalMode: w,
+      granularity: K,
+      fiscalMonthPattern: j,
+      fiscalYearStartMonth: F,
+      fiscalConfig: y,
+      showPresets: L
+    }), U = (e) => {
+      const s = e && !Array.isArray(e) && ("from" in e || "to" in e) ? e : void 0;
+      f(s), l || (d?.(s), s?.to && p());
+    }, W = () => {
+      d?.(C), p();
+    }, h = () => {
+      f(n), p();
+    }, b = () => {
+      f(void 0), d?.(void 0), l || p();
+    };
+    t.useLayoutEffect(() => {
+      R.current = { onDismiss: h, resolveFlash: () => "cancel" };
+    });
+    const X = n?.from ? `${N(n.from, k)}${n.to ? ` – ${N(n.to, k)}` : ""}` : "";
+    return /* @__PURE__ */ r(
+      ie,
+      {
+        open: i,
+        disabled: o,
+        ariaLabel: a("datePicker.selectYearRange"),
+        onOpenChange: (e) => {
+          o || c(e);
+        },
+        onOpenAutoFocus: (e) => {
+          u.current || e.preventDefault(), u.current = !1;
+        },
+        popoverHandlers: q,
+        trigger: /* @__PURE__ */ r(
+          "div",
+          {
+            ref: P,
+            "data-component": "year-range-picker",
+            "data-state": i ? "open" : "closed",
+            onPointerDown: (e) => fe({
+              disabled: o,
+              event: e,
+              onOpen: () => c(!0),
+              focusField: () => m.current?.focus()
+            }),
+            children: /* @__PURE__ */ r(
+              re,
+              {
+                ref: m,
+                value: X,
+                readOnly: !0,
+                onKeyDown: (e) => le(e, {
+                  disabled: o,
+                  open: i,
+                  onOpen: () => c(!0),
+                  onCancel: h,
+                  onKeyboardOpen: () => {
+                    u.current = !0;
+                  }
+                }),
+                onClick: () => !o && c(!0),
+                placeholder: H,
+                disabled: o,
+                "data-form-control": "input",
+                className: ee("cursor-pointer", O),
+                suffix: /* @__PURE__ */ g("div", { className: "flex items-center gap-1", children: [
+                  n?.from && !o ? /* @__PURE__ */ g(x, { children: [
+                    /* @__PURE__ */ r(D, { asChild: !0, children: /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        tabIndex: 0,
+                        "aria-label": a("calendar.clear"),
+                        onClick: (e) => {
+                          e.stopPropagation(), b();
+                        },
+                        className: "inline-flex size-4 items-center justify-center border-none bg-transparent p-0",
+                        children: /* @__PURE__ */ r(Z, { className: "size-3 hover:text-content" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ r(Y, { variant: "tertiary", side: "top", children: a("calendar.clear") })
+                  ] }) : null,
+                  /* @__PURE__ */ g(x, { children: [
+                    /* @__PURE__ */ r(D, { asChild: !0, children: /* @__PURE__ */ r(
+                      "button",
+                      {
+                        type: "button",
+                        tabIndex: 0,
+                        "data-component": "calendar-trigger",
+                        "aria-label": a("datePicker.selectYearRange"),
+                        onClick: (e) => {
+                          e.stopPropagation(), o || c((s) => !s);
+                        },
+                        className: "inline-flex items-center justify-center border-none bg-transparent p-0",
+                        children: /* @__PURE__ */ r(_, { className: "h-4 w-4 text-secondary-foreground" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ r(Y, { variant: "tertiary", side: "top", children: a("datePicker.selectYearRange") })
+                  ] })
+                ] }),
+                ...z
+              }
+            )
+          }
+        ),
+        children: /* @__PURE__ */ r(
+          te,
+          {
+            pickerType: "year",
+            yearMode: "range",
+            selectedYear: C,
+            footerFlashKey: V,
+            footerFlashTarget: B,
+            onYearSelect: U,
+            month: G,
+            onMonthChange: J,
+            disabled: oe(v, A),
+            startMonth: I,
+            endMonth: M,
+            showFooter: l,
+            onApply: W,
+            onCancel: h,
+            onClear: b,
+            showIntervalCaption: $,
+            ...Q
+          }
+        )
+      }
+    );
+  }
+);
+de.displayName = "YearRangePicker";
+export {
+  de as YearRangePicker
+};

package/dist/components/forms/smart-input/smart-input.js

@@ -1,34 +1,50 @@
-import { jsx as P } from "react/jsx-runtime";
-import { useState as E } from "react";
-import { createComponent as x } from "../../../lib/primitives/create-component.js";
-import { Input as L } from "../input/input.js";
-const le = x("SmartInput", function({
-  value: M,
-  type: S = "text",
-  onChange: v,
-  onBlur: b,
-  onFocus: z,
-  allowNegative: D = !0,
+import { jsx as R } from "react/jsx-runtime";
+import { useState as ee } from "react";
+import { createComponent as te } from "../../../lib/primitives/create-component.js";
+import { Input as re } from "../input/input.js";
+const ne = /* @__PURE__ */ new Set([
+  "email",
+  "password",
+  "url",
+  "tel"
+]);
+function se(d, v) {
+  return d !== void 0 ? d : ne.has(v ?? "");
+}
+function ue(d) {
+  return d.replace(/[^\p{L}\p{N}\s]/gu, "");
+}
+const he = te("SmartInput", function({
+  value: v,
+  type: C = "text",
+  onChange: I,
+  onBlur: T,
+  onFocus: _,
+  allowNegative: m = !0,
   min: s,
   max: u,
-  minOperator: F,
-  maxOperator: K,
-  min_operator: O = ">=",
-  max_operator: W = "<=",
-  maxIntegerDigits: V,
-  decimalPlaces: o,
-  enforceDecimal: j = !1,
-  allowDecimal: B = !0,
-  maxLength: i,
-  trimLeadingSpaces: y = !0,
-  customValidator: N,
+  minOperator: b,
+  maxOperator: E,
+  min_operator: F = ">=",
+  max_operator: K = "<=",
+  maxIntegerDigits: D,
+  decimalPlaces: a,
+  enforceDecimal: O = !1,
+  allowDecimal: N = !0,
+  allowSpecialCharacters: U,
+  maxLength: c,
+  trimLeadingSpaces: P = !0,
+  customValidator: B,
   onValidationError: p,
-  disabled: h = !1,
-  ...k
-}, T) {
-  const $ = M !== void 0, [U, m] = E(""), a = $ ? String(M ?? "") : U, c = S === "number", g = F ?? O, w = K ?? W, q = (t) => {
+  disabled: S = !1,
+  ...W
+}, j) {
+  const $ = v !== void 0, [k, g] = ee(""), i = $ ? String(v ?? "") : k, l = C === "number", A = se(
+    U,
+    C
+  ), V = b ?? F, w = E ?? K, z = (t) => {
     if (s === void 0) return !0;
-    switch (g) {
+    switch (V) {
       case ">":
         return t > s;
       case ">=":
@@ -40,7 +56,7 @@ const le = x("SmartInput", function({
       default:
         return !0;
     }
-  }, A = (t) => {
+  }, G = (t) => {
     if (u === void 0) return !0;
     switch (w) {
       case ">":
@@ -54,10 +70,10 @@ const le = x("SmartInput", function({
       default:
         return !0;
     }
-  }, G = (t) => {
+  }, H = (t) => {
     let e = t;
     if (s !== void 0) {
-      const r = g === ">" ? s + 0.01 : s;
+      const r = V === ">" ? s + 0.01 : s;
       e = Math.max(e, r);
     }
     if (u !== void 0) {
@@ -65,124 +81,129 @@ const le = x("SmartInput", function({
       e = Math.min(e, r);
     }
     return e;
-  }, H = (t) => {
-    const e = D ? /[^0-9.-]/g : /[^0-9.]/g;
+  }, Q = (t) => {
+    const e = m ? /[^0-9.-]/g : /[^0-9.]/g;
     return t.replace(e, "");
-  }, J = (t) => {
+  }, Y = (t) => {
     const e = t.split(".");
     return e.length > 2 ? e[0] + "." + e.slice(1).join("") : t;
-  }, Q = (t, e) => {
-    if (!D) return t;
+  }, q = (t, e) => {
+    if (!m) return t;
     if ((t.match(/-/g) || []).length > 1) {
       let n = t.replace(/-/g, "");
       return e.startsWith("-") && (n = "-" + n), n;
     } else if (t.includes("-") && !t.startsWith("-"))
       return t.replace("-", "");
     return t;
-  }, R = (t) => {
-    if (o === void 0 || !t.includes(".")) return t;
+  }, J = (t) => {
+    if (a === void 0 || !t.includes(".")) return t;
     const [e, r] = t.split(".");
-    return r && r.length > o ? `${e}.${r.slice(0, o)}` : t;
+    return r && r.length > a ? `${e}.${r.slice(0, a)}` : t;
   }, X = (t) => {
-    if (V === void 0) return t;
+    if (D === void 0) return t;
     const [e, r] = t.split("."), n = e.replace("-", "");
-    if (n.length > V) {
-      const f = n.slice(0, V), d = e.startsWith("-") ? "-" : "";
-      return r !== void 0 ? `${d}${f}.${r}` : `${d}${f}`;
+    if (n.length > D) {
+      const o = n.slice(0, D), f = e.startsWith("-") ? "-" : "";
+      return r !== void 0 ? `${f}${o}.${r}` : `${f}${o}`;
     }
     return t;
-  }, C = (t) => {
-    if (!c) return t;
+  }, Z = (t) => {
+    if (!l) return t;
     let e = String(t ?? "");
-    return y && (e = e.replace(/^\s+/, "")), e = H(e), e = J(e), e = Q(e, t), e = R(e), e = X(e), B || (e = e.replace(".", "")), e;
-  }, Y = (t) => {
-    if (!c || !t || t === "-") return t;
+    return P && (e = e.replace(/^\s+/, "")), e = Q(e), e = Y(e), e = q(e, t), e = J(e), e = X(e), N || (e = e.replace(".", "")), e;
+  }, y = (t) => {
+    if (l) return Z(t);
+    let e = String(t ?? "");
+    return P && (e = e.replace(/^\s+/, "")), A || (e = ue(e)), e;
+  }, x = (t) => {
+    if (!l || !t || t === "-") return t;
     let e = t;
     const r = parseFloat(e);
     if (isNaN(r)) return "";
-    const n = G(r);
-    if (j && o !== void 0)
-      e = n.toFixed(o);
-    else if (o !== void 0 && e.includes(".")) {
-      const [f, d = ""] = e.split("."), I = d.padEnd(o, "0");
-      e = `${f}.${I}`;
+    const n = H(r);
+    if (O && a !== void 0)
+      e = n.toFixed(a);
+    else if (a !== void 0 && e.includes(".")) {
+      const [o, f = ""] = e.split("."), M = f.padEnd(a, "0");
+      e = `${o}.${M}`;
     } else
       e = String(n);
     return e;
-  }, Z = (t) => {
+  }, L = (t) => {
     if (!t) return !0;
-    if (N && !N(t))
+    if (B && !B(t))
       return p?.("Custom validation failed"), !1;
-    if (c) {
+    if (l) {
       const e = parseFloat(t);
       if (isNaN(e))
         return p?.("Invalid number"), !1;
-      if (!q(e))
-        return p?.(`Value must be ${g} ${s}`), !1;
-      if (!A(e))
+      if (!z(e))
+        return p?.(`Value must be ${V} ${s}`), !1;
+      if (!G(e))
         return p?.(`Value must be ${w} ${u}`), !1;
     }
-    return i && t.length > i ? (p?.(`Maximum length is ${i}`), !1) : !0;
+    return c && t.length > c ? (p?.(`Maximum length is ${c}`), !1) : !0;
   };
-  return /* @__PURE__ */ P(
+  return /* @__PURE__ */ R(
     "div",
     {
       "data-component": "smart-input",
       className: "w-full",
-      "data-numeric": c || void 0,
-      "data-decimal-places": o,
+      "data-numeric": l || void 0,
+      "data-allow-special-characters": A || void 0,
+      "data-decimal-places": a,
       "data-min": s,
       "data-max": u,
-      children: /* @__PURE__ */ P(
-        L,
+      children: /* @__PURE__ */ R(
+        re,
         {
-          ...k,
-          type: S,
-          value: a,
+          ...W,
+          type: C,
+          value: i,
           onChange: (t) => {
-            if (h) return;
-            let r = t.target.value;
-            c ? r = C(r) : y && (r = r.replace(/^\s+/, "")), i && r.length > i && (r = r.slice(0, i)), $ || m(r), v?.(r, t);
+            if (S) return;
+            let e = y(t.target.value);
+            c && e.length > c && (e = e.slice(0, c)), $ || g(e), I?.(e, t);
           },
           onBlur: (t) => {
-            let e = a;
-            c && e && (e = Y(e), Z(e) && ($ || m(e), e !== a && v?.(e))), b?.(t);
+            let e = i;
+            l && e && (e = x(e), L(e) && ($ || g(e), e !== i && I?.(e))), T?.(t);
           },
-          onFocus: z,
+          onFocus: _,
           onKeyDown: (t) => {
-            if (h || !c) return;
+            if (S || !l) return;
             const e = t.key;
             if (e === "e" || e === "E") {
               t.preventDefault();
               return;
             }
-            if (e === "-" && !D) {
+            if (e === "-" && !m) {
               t.preventDefault();
               return;
             }
-            if (e === "-" && a.includes("-")) {
+            if (e === "-" && i.includes("-")) {
               t.preventDefault();
               return;
             }
-            if (e === "." && (!B || a.includes("."))) {
+            if (e === "." && (!N || i.includes("."))) {
               t.preventDefault();
               return;
             }
           },
           onPaste: (t) => {
-            if (h) return;
+            if (S) return;
             t.preventDefault();
-            const e = t.clipboardData.getData("text"), r = c ? C(e) : e, n = t.target, f = n.selectionStart || 0, d = n.selectionEnd || 0, I = a.slice(0, f), _ = a.slice(d);
-            let l = I + r + _;
-            c && (l = C(l)), i && l.length > i && (l = l.slice(0, i)), $ || m(l), v?.(l);
+            const e = t.clipboardData.getData("text"), r = t.target, n = r.selectionStart || 0, o = r.selectionEnd || 0, f = i.slice(0, n), M = i.slice(o);
+            let h = y(f + e + M);
+            c && h.length > c && (h = h.slice(0, c)), $ || g(h), I?.(h);
           },
-          disabled: h,
-          ref: T
+          disabled: S,
+          ref: j
         }
       )
     }
   );
 });
 export {
-  le as SmartInput
+  he as SmartInput
 };

package/dist/components/forms/smart-input/smart-input.types.d.ts

@@ -21,6 +21,11 @@ export interface SmartInputProps extends Omit<InputProps, "onChange" | "value" |
     decimalPlaces?: number;
     enforceDecimal?: boolean;
     allowDecimal?: boolean;
+    /**
+     * When false (default), only letters, numbers, and spaces are kept.
+     * `email` / `password` / `url` / `tel` default to true.
+     */
+    allowSpecialCharacters?: boolean;
     maxLength?: number;
     trimLeadingSpaces?: boolean;
     customValidator?: (value: string) => boolean;