mosstandardcomponents 1.0.8 → 1.0.10

package/dist/input-field.es.js

@@ -1,64 +1,65 @@
-import { createElementBlock as r, openBlock as n, createElementVNode as l, resolveComponent as u, createCommentVNode as a, normalizeClass as c, toDisplayString as d, withKeys as p, createBlock as f, createVNode as w } from "vue";
-const k = {
+import { createElementBlock as i, openBlock as r, createElementVNode as a, resolveComponent as y, createCommentVNode as o, normalizeClass as c, toDisplayString as u, withKeys as w, createBlock as x, createVNode as g, resolveDirective as S, withDirectives as C } from "vue";
+import { vMaska as I } from "maska";
+const V = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 1008 1008"
 };
-function _(t, o) {
-  return n(), r("svg", k, [...o[0] || (o[0] = [
-    l("path", {
+function B(t, n) {
+  return r(), i("svg", V, [...n[0] || (n[0] = [
+    a("path", {
       fill: "currentColor",
       d: "M1008 540c0 14-4 27-11 39-103 170-293 285-493 285S114 749 11 579c-7-12-11-25-11-39s4-27 11-39c103-170 293-285 493-285s390 115 493 285c7 12 11 25 11 39zM531 324c0-15-12-27-27-27-94 0-171 77-171 171 0 15 12 27 27 27s27-12 27-27c0-64 53-117 117-117 15 0 27-12 27-27zm405 216c-53-83-127-154-214-199 22 39 34 83 34 127 0 139-113 252-252 252S252 607 252 468c0-44 12-88 34-127-87 45-161 116-214 199 96 148 251 252 432 252s336-104 432-252z"
     }, null, -1)
   ])]);
 }
-const C = { render: _ }, x = {
+const A = { render: B }, T = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 1008 1008"
 };
-function S(t, o) {
-  return n(), r("svg", x, [...o[0] || (o[0] = [
-    l("path", {
+function F(t, n) {
+  return r(), i("svg", T, [...n[0] || (n[0] = [
+    a("path", {
       fill: "currentColor",
       d: "M1008 540c0 15-4 27-11 39-18 29-40 56-62 81-110 127-262 204-431 204l42-74c163-14 302-114 390-250-42-65-95-121-159-165l36-63c70 46 140 117 184 189 7 12 11 24 11 39zm-252-72c0 105-65 198-162 235l158-282c2 15 4 31 4 47zm-21-251v5C616 434 497 646 380 859l-28 50c-3 6-9 9-16 9-10 0-63-33-75-39-6-4-9-9-9-16 0-9 19-40 25-49C168 764 76 680 11 579c-7-11-11-25-11-39 0-13 4-28 11-39 112-171 285-285 493-285 34 0 68 3 101 10l31-55c3-6 9-9 15-9 11 0 63 33 75 39 6 4 9 9 9 16zM531 324c0-15-12-27-27-27-94 0-171 77-171 171 0 15 12 27 27 27s27-12 27-27c0-65 53-117 117-117 15 0 27-12 27-27zM312 751l44-79c-65-48-104-124-104-204 0-44 12-88 34-127-87 45-161 116-214 199 58 91 141 166 240 211z"
     }, null, -1)
   ])]);
 }
-const B = { render: S }, I = {
+const q = { render: F }, E = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 1039 1008"
 };
-function q(t, o) {
-  return n(), r("svg", I, [...o[0] || (o[0] = [
-    l("path", {
+function K(t, n) {
+  return r(), i("svg", E, [...n[0] || (n[0] = [
+    a("path", {
       fill: "currentColor",
       d: "M908 989H131q-32 0-62.5-17T19 926.5 0 863t19-68l388-670q42-62 113-62t112 62l389 670q18 28 18 64 0 75-68 113-31 17-63 17zM576 157q-19-38-55.5-38T463 150L69 826q-20 30 0 69 21 32 56 32h777q35 0 55.5-30.5t.5-70.5zm-13 501.5Q544 676 517.5 676T474 659t-17-45V351q0-29 17-46t45.5-17 45.5 17 17 46v263q0 27-19 44.5zm-97.5 174q-8.5-14.5-8.5-36t18.5-39.5 37.5-18 31 5 20 13q18 18 18 44t-18 44.5-39.5 18.5-36-8.5-23-23z"
     }, null, -1)
   ])]);
 }
-const V = { render: q }, z = {
+const p = { render: K }, P = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 1008 1008"
 };
-function A(t, o) {
-  return n(), r("svg", z, [...o[0] || (o[0] = [
-    l("path", {
+function z(t, n) {
+  return r(), i("svg", P, [...n[0] || (n[0] = [
+    a("path", {
       fill: "currentColor",
       d: "M940 318c0 14-6 28-16 39L517 764l-77 76c-10 10-24 16-38 16s-28-6-38-16l-77-76L84 560c-10-10-16-24-16-38s6-28 16-38l76-77c10-10 25-16 39-16s28 6 38 16l165 166 369-369c10-11 24-16 38-16s29 6 39 16l76 76c10 10 16 24 16 38z"
     }, null, -1)
   ])]);
 }
-const P = { render: A }, T = (t, o) => {
+const k = { render: z }, _ = (t, n) => {
   const e = t.__vccOpts || t;
-  for (const [h, m] of o)
-    e[h] = m;
+  for (const [f, s] of n)
+    e[f] = s;
   return e;
-}, E = {
+}, M = {
   name: "InputField",
   components: {
-    IconEyeSlash: B,
-    IconPrivacy: C,
-    IconAlert: V,
-    IconCheck: P
+    IconEyeSlash: q,
+    IconPrivacy: A,
+    IconAlert: p,
+    IconCheck: k
   },
   props: {
     modelValue: String,
@@ -138,24 +139,24 @@ const P = { render: A }, T = (t, o) => {
       t && t.value && this.$emit("update:modelValue", t.value);
     }
   }
-}, M = { class: "pt-2" }, K = ["for"], F = ["textContent"], L = {
+}, N = { class: "pt-2" }, L = ["for"], D = ["textContent"], H = {
   key: 0,
   class: "text-red"
-}, N = {
+}, G = {
   key: 1,
   textContent: " (optioneel)",
   class: "font-normal"
-}, D = ["id", "value", "type", "name", "placeholder", "required", "optional", "error", "minlength", "maxlength", "autocomplete", "autofocus", "inputmode", "disabled", "readonly", "aria-describedby", "aria-errormessage", "pattern", "aria-invalid"], H = ["aria-pressed", "aria-label"], O = { class: "sr-only" }, Q = {
+}, O = ["id", "value", "type", "name", "placeholder", "required", "optional", "error", "minlength", "maxlength", "autocomplete", "autofocus", "inputmode", "disabled", "readonly", "aria-describedby", "aria-errormessage", "pattern", "aria-invalid"], Q = ["aria-pressed", "aria-label"], j = { class: "sr-only" }, J = {
   key: 1,
   class: "absolute right-0 top-0 py-3 pl-1 pr-2 text-error-500"
-}, j = {
+}, R = {
   key: 2,
   class: "absolute right-0 top-0 py-3 pl-1 pr-2 text-green"
-}, G = ["id", "textContent"], J = ["id"], R = ["textContent"], U = ["textContent"];
-function W(t, o, e, h, m, i) {
-  const y = u("icon-privacy"), g = u("icon-eye-slash"), b = u("icon-alert"), v = u("icon-check");
-  return n(), r("div", M, [
-    e.label ? (n(), r("label", {
+}, U = ["id", "textContent"], W = ["id"], X = ["textContent"], Y = ["textContent"];
+function Z(t, n, e, f, s, l) {
+  const b = y("icon-privacy"), v = y("icon-eye-slash"), d = y("icon-alert"), h = y("icon-check");
+  return r(), i("div", N, [
+    e.label ? (r(), i("label", {
       key: 0,
       for: t.computedId,
       class: c(["max-w-full whitespace-nowrap text-sm font-bold", {
@@ -166,23 +167,23 @@ function W(t, o, e, h, m, i) {
         "text-blue-dark": e.error && !t.isActive
       }])
     }, [
-      l("span", {
-        textContent: d(e.label)
-      }, null, 8, F),
-      e.required ? (n(), r("span", L, " * ")) : a("", !0),
-      e.optional ? (n(), r("span", N)) : a("", !0)
-    ], 10, K)) : a("", !0),
-    l("div", {
+      a("span", {
+        textContent: u(e.label)
+      }, null, 8, D),
+      e.required ? (r(), i("span", H, " * ")) : o("", !0),
+      e.optional ? (r(), i("span", G)) : o("", !0)
+    ], 10, L)) : o("", !0),
+    a("div", {
       class: c([
         "relative mt-1 rounded-sm",
         [
-          i.outlineClass,
+          l.outlineClass,
           t.isActive || e.error ? "border-2" : "border",
           e.disabled && e.modelValue || e.readonly ? "bg-blue-dark-100" : ""
         ]
       ])
     }, [
-      l("input", {
+      a("input", {
         id: t.computedId,
         ref: "input",
         value: e.modelValue,
@@ -205,75 +206,452 @@ function W(t, o, e, h, m, i) {
         "aria-invalid": e.error.toString(),
         class: "block h-12 w-full appearance-none border-0 bg-transparent pl-4 pr-8 focus:outline-none",
         "data-clarity-mask": "true",
-        onInput: o[0] || (o[0] = (s) => t.$emit("update:modelValue", s.target.value)),
-        onBlur: o[1] || (o[1] = (...s) => i.onBlur && i.onBlur(...s)),
-        onFocus: o[2] || (o[2] = (...s) => i.onFocus && i.onFocus(...s)),
-        onKeyup: o[3] || (o[3] = p((...s) => i.onKeyupEnter && i.onKeyupEnter(...s), ["enter"]))
-      }, null, 40, D),
-      t.initialType === "password" && !e.hidepasswordicon && !e.disabled ? (n(), r("div", {
+        onInput: n[0] || (n[0] = (m) => t.$emit("update:modelValue", m.target.value)),
+        onBlur: n[1] || (n[1] = (...m) => l.onBlur && l.onBlur(...m)),
+        onFocus: n[2] || (n[2] = (...m) => l.onFocus && l.onFocus(...m)),
+        onKeyup: n[3] || (n[3] = w((...m) => l.onKeyupEnter && l.onKeyupEnter(...m), ["enter"]))
+      }, null, 40, O),
+      t.initialType === "password" && !e.hidepasswordicon && !e.disabled ? (r(), i("div", {
         key: 0,
         class: c(["absolute right-0 top-0", { "right-8": e.error }])
       }, [
-        l("button", {
+        a("button", {
           type: "button",
           class: "m-1 px-2 py-3 focus-visible:outline-blue-dark",
           "aria-pressed": t.showPassword,
           "aria-label": t.showPassword ? "Verberg wachtwoord" : "Toon wachtwoord",
-          onClick: o[4] || (o[4] = (...s) => i.togglePassword && i.togglePassword(...s))
+          onClick: n[4] || (n[4] = (...m) => l.togglePassword && l.togglePassword(...m))
         }, [
-          t.showPassword ? (n(), f(y, {
+          t.showPassword ? (r(), x(b, {
             key: 0,
             class: "h-4 w-4",
             "aria-hidden": "true"
-          })) : (n(), f(g, {
+          })) : (r(), x(v, {
             key: 1,
             class: "h-4 w-4",
             "aria-hidden": "true"
           })),
-          l("span", O, d(t.showPassword ? "verberg" : "toon") + " wachtwoord", 1)
-        ], 8, H)
-      ], 2)) : a("", !0),
-      e.error ? (n(), r("div", Q, [
-        w(b, {
+          a("span", j, u(t.showPassword ? "verberg" : "toon") + " wachtwoord", 1)
+        ], 8, Q)
+      ], 2)) : o("", !0),
+      e.error ? (r(), i("div", J, [
+        g(d, {
           class: "-mt-1 mr-1 inline h-5 w-5",
           "aria-hidden": "true"
         })
-      ])) : a("", !0),
-      !e.error && e.modelValue && t.shouldShowCheck ? (n(), r("div", j, [
-        w(v, {
+      ])) : o("", !0),
+      !e.error && e.modelValue && t.shouldShowCheck ? (r(), i("div", R, [
+        g(h, {
           class: "-mt-1 mr-1 inline h-5 w-5",
           "aria-hidden": "true"
         })
-      ])) : a("", !0)
+      ])) : o("", !0)
     ], 2),
-    e.hint && !e.error ? (n(), r("div", {
+    e.hint && !e.error ? (r(), i("div", {
       key: 1,
       id: t.computedId + "-hint",
       class: c(["w-full pt-1 text-xs leading-4", { "text-grey-500": e.disabled }]),
-      textContent: d(e.hint)
-    }, null, 10, G)) : a("", !0),
-    e.error && e.errormessage ? (n(), r("div", {
+      textContent: u(e.hint)
+    }, null, 10, U)) : o("", !0),
+    e.error && e.errormessage ? (r(), i("div", {
       key: 2,
       id: t.computedId + "-errormsg",
       class: "w-full pt-1 text-sm font-bold leading-4 text-error-500",
       "aria-live": "assertive"
     }, [
-      l("span", {
-        textContent: d(e.errormessage)
-      }, null, 8, R)
-    ], 8, J)) : a("", !0),
-    t.initialType === "password" ? (n(), r("p", {
+      a("span", {
+        textContent: u(e.errormessage)
+      }, null, 8, X)
+    ], 8, W)) : o("", !0),
+    t.initialType === "password" ? (r(), i("p", {
       key: 3,
       class: "sr-only",
       "aria-live": "polite",
-      textContent: d(
+      textContent: u(
         t.showPassword ? "wachtwoord wordt getoond" : "wachtwoord is verborgen"
       )
-    }, null, 8, U)) : a("", !0)
+    }, null, 8, Y)) : o("", !0)
   ]);
 }
-const Y = /* @__PURE__ */ T(E, [["render", W], ["__scopeId", "data-v-5a4e94c9"]]);
+const Be = /* @__PURE__ */ _(M, [["render", Z], ["__scopeId", "data-v-5a4e94c9"]]), $ = {
+  name: "AmountInputField",
+  components: { IconAlert: p, IconCheck: k },
+  props: {
+    modelValue: Number,
+    label: String,
+    name: String,
+    placeholder: { type: String, default: "" },
+    required: Boolean,
+    optional: Boolean,
+    disabled: Boolean,
+    error: Boolean,
+    pattern: { type: String, default: "[1-9]?" },
+    autocomplete: { type: String, default: "on" },
+    inputmode: String,
+    autofocus: Boolean,
+    readonly: Boolean,
+    min: String,
+    max: String,
+    id: { type: String, default: null },
+    hint: String,
+    errormessage: String,
+    borderClass: String,
+    showCheck: Boolean,
+    symbol: String
+  },
+  emits: [
+    "update:modelValue",
+    "input",
+    "focus",
+    "blur",
+    "onKeyupEnter"
+  ],
+  data() {
+    return {
+      isActive: !1,
+      shouldShowCheck: !1,
+      displayValue: "",
+      computedId: null,
+      isTyping: !1
+    };
+  },
+  watch: {
+    modelValue: {
+      immediate: !0,
+      handler(t) {
+        this.isTyping || (this.displayValue = this.formatCurrency(t));
+      }
+    }
+  },
+  computed: {
+    outlineClass() {
+      return this.isActive ? "border-blue" : this.error ? "border-error-500" : !this.disabled && this.modelValue ? "border-blue-dark-900" : this.disabled && this.modelValue || this.readonly ? "border-none" : "border-blue-dark-200";
+    }
+  },
+  mounted() {
+    this.computedId = this.id ?? "cb-input-" + Math.random().toString(36).slice(4);
+  },
+  methods: {
+    onInput(t) {
+      this.isTyping = !0;
+      const n = t.target.value, e = n.replace(/[^\d.,]/g, "").replace(",", "."), f = parseFloat(e);
+      isNaN(f) || (this.$emit("update:modelValue", f), this.$emit("input", f)), this.displayValue = n;
+    },
+    onBlur() {
+      this.isTyping = !1, this.applyFormatting(), this.isActive = !1, this.$emit("blur", this.modelValue);
+    },
+    onKeyupEnter() {
+      this.isTyping = !1, this.applyFormatting(), this.isActive = !1, this.$emit("onKeyupEnter", this.modelValue);
+    },
+    applyFormatting() {
+      const t = this.displayValue.replace(/[^\d.,]/g, "").replace(",", "."), n = parseFloat(t);
+      if (!isNaN(n)) {
+        const e = this.formatCurrency(n);
+        this.displayValue = e, this.$emit("update:modelValue", n), this.$emit("input", n);
+      }
+    },
+    formatCurrency(t) {
+      return t == null || t === "" ? "" : new Intl.NumberFormat("nl-NL", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      }).format(t);
+    },
+    onFocus() {
+      this.isActive = !0, this.$emit("focus");
+    }
+  }
+}, ee = { class: "pt-2" }, te = ["for"], ne = ["textContent"], re = {
+  key: 0,
+  class: "text-red"
+}, ie = {
+  key: 1,
+  class: "font-normal",
+  textContent: " (optioneel)"
+}, le = ["id", "value", "name", "placeholder", "required", "optional", "error", "min", "max", "autocomplete", "autofocus", "inputmode", "disabled", "readonly", "aria-describedby", "aria-errormessage", "pattern", "aria-invalid"], oe = {
+  key: 0,
+  class: "absolute right-0 top-0 py-3 pl-1 pr-2 text-error-500"
+}, ae = {
+  key: 1,
+  class: "absolute right-0 top-0 py-3 pl-1 pr-2 text-green"
+}, se = ["id", "textContent"], de = ["id"], ue = ["textContent"];
+function ce(t, n, e, f, s, l) {
+  const b = y("icon-alert"), v = y("icon-check");
+  return r(), i("div", ee, [
+    e.label ? (r(), i("label", {
+      key: 0,
+      for: s.computedId,
+      class: c(["max-w-full whitespace-nowrap text-sm font-bold", {
+        active: s.isActive || e.modelValue,
+        "text-blue-dark": e.disabled,
+        "text-blue": s.isActive,
+        "text-blue-dark": !e.error && !s.isActive,
+        "text-blue-dark": e.error && !s.isActive
+      }])
+    }, [
+      a("span", {
+        textContent: u(e.label)
+      }, null, 8, ne),
+      e.required ? (r(), i("span", re, " * ")) : o("", !0),
+      e.optional ? (r(), i("span", ie)) : o("", !0)
+    ], 10, te)) : o("", !0),
+    a("div", {
+      class: c(["relative mt-1 rounded-sm", [
+        l.outlineClass,
+        s.isActive || e.error ? "border-2" : "border",
+        e.disabled && e.modelValue || e.readonly ? "bg-blue-dark-100" : ""
+      ]])
+    }, [
+      a("input", {
+        id: s.computedId,
+        value: s.displayValue,
+        type: "text",
+        name: e.name,
+        placeholder: e.placeholder,
+        required: e.required,
+        optional: e.optional,
+        error: e.error,
+        min: e.min,
+        max: e.max,
+        autocomplete: e.autocomplete,
+        autofocus: e.autofocus,
+        inputmode: e.inputmode,
+        disabled: e.disabled,
+        readonly: e.readonly,
+        "aria-describedby": e.hint ? s.computedId + "-hint" : !1,
+        "aria-errormessage": e.error ? s.computedId + "-errormsg" : !1,
+        pattern: e.pattern,
+        "aria-invalid": e.error.toString(),
+        class: "block h-12 w-full appearance-none border-0 bg-transparent pl-10 pr-8 focus:outline-none",
+        onInput: n[0] || (n[0] = (...d) => l.onInput && l.onInput(...d)),
+        onBlur: n[1] || (n[1] = (...d) => l.onBlur && l.onBlur(...d)),
+        onFocus: n[2] || (n[2] = (...d) => l.onFocus && l.onFocus(...d)),
+        onKeyup: n[3] || (n[3] = w((...d) => l.onKeyupEnter && l.onKeyupEnter(...d), ["enter"]))
+      }, null, 40, le),
+      e.error ? (r(), i("div", oe, [
+        g(b, {
+          class: "-mt-1 mr-1 inline h-5 w-5",
+          "aria-hidden": "true"
+        })
+      ])) : o("", !0),
+      !e.error && e.modelValue && s.shouldShowCheck ? (r(), i("div", ae, [
+        g(v, {
+          class: "-mt-1 mr-1 inline h-5 w-5",
+          "aria-hidden": "true"
+        })
+      ])) : o("", !0)
+    ], 2),
+    e.hint && !e.error ? (r(), i("div", {
+      key: 1,
+      id: s.computedId + "-hint",
+      class: c(["w-full pt-1 text-xs leading-4", { "text-grey-500": e.disabled }]),
+      textContent: u(e.hint)
+    }, null, 10, se)) : o("", !0),
+    e.error && e.errormessage ? (r(), i("div", {
+      key: 2,
+      id: s.computedId + "-errormsg",
+      class: "w-full pt-1 text-sm font-bold leading-4 text-error-500",
+      "aria-live": "assertive"
+    }, [
+      a("span", {
+        textContent: u(e.errormessage)
+      }, null, 8, ue)
+    ], 8, de)) : o("", !0)
+  ]);
+}
+const Ae = /* @__PURE__ */ _($, [["render", ce], ["__scopeId", "data-v-490f2fac"]]), he = {
+  name: "IbanInputField",
+  components: {
+    IconAlert: p,
+    IconCheck: k
+  },
+  directives: { maska: I },
+  props: {
+    modelValue: String,
+    label: String,
+    name: String,
+    placeholder: {
+      type: String,
+      default: " "
+    },
+    required: { type: Boolean, default: !1 },
+    optional: { type: Boolean, default: !1 },
+    disabled: Boolean,
+    error: { type: Boolean, default: !1 },
+    pattern: { type: String, default: null },
+    autocomplete: { type: String, default: "on" },
+    inputmode: String,
+    autofocus: Boolean,
+    readonly: Boolean,
+    minlength: String,
+    maxlength: String,
+    type: { type: String, default: "text" },
+    id: {
+      type: String,
+      default: null
+    },
+    hint: String,
+    errormessage: { type: String, default: "" },
+    borderClass: { type: String, default: null },
+    maskaVal: { type: String, default: "" },
+    showCheck: { type: Boolean, default: !1 }
+  },
+  data: function() {
+    return {
+      initialType: "",
+      fieldType: "text",
+      isActive: !1,
+      hasError: !1,
+      shouldShowCheck: !1,
+      maskaPattern: "@@## @@@@ #### #### ##",
+      maskaPlaceholder: "NL20 INGB 0001 2345 67",
+      computedId: null
+    };
+  },
+  computed: {
+    outlineClass: function() {
+      return this.isActive ? "border-blue" : this.error ? "border-error-500" : !this.disabled && this.modelValue ? "border-blue-dark-900" : this.disabled && this.modelValue || this.readonly ? "border-none" : "border-blue-dark-200";
+    },
+    maskaValue: function() {
+      let t = this.maskaPlaceholder;
+      if (this.maskaVal) {
+        const n = this.maskaVal.length;
+        t = "<i>" + this.maskaVal + "</i>" + t.substring(n);
+      }
+      return t;
+    }
+  },
+  watch: {
+    type: function() {
+      this.fieldType = this.type;
+    }
+  },
+  created: function() {
+    this.initialType = this.type, this.fieldType = this.type;
+  },
+  mounted() {
+    this.computedId = this.id ? this.id : "cb-input-" + Math.random().toString(36).slice(4);
+  },
+  methods: {
+    onBlur: function(t) {
+      this.isActive = !1, this.$emit("blur", t.target.value), this.showCheck && (this.shouldShowCheck = !0);
+    },
+    onFocus: function(t) {
+      this.isActive = !0, this.$emit("focus");
+    },
+    onKeyupEnter: function(t) {
+      this.isActive = !1, this.$emit("onKeyupEnter", t.target.value);
+    }
+  }
+}, me = { class: "pt-2" }, fe = ["for"], ye = ["textContent"], ge = {
+  key: 0,
+  class: "text-red"
+}, be = {
+  key: 1,
+  textContent: " (optioneel)",
+  class: "font-normal"
+}, ve = ["id", "value", "type", "name", "placeholder", "required", "optional", "error", "autocomplete", "autofocus", "inputmode", "disabled", "readonly", "aria-describedby", "aria-errormessage", "pattern", "aria-invalid", "data-maska"], we = ["innerHTML"], pe = {
+  key: 0,
+  class: "absolute right-0 top-0 py-3 pl-1 pr-2 text-error-500"
+}, ke = {
+  key: 1,
+  class: "absolute right-0 top-0 py-3 pl-1 pr-2 text-green"
+}, _e = ["id", "textContent"], xe = ["id"], Se = ["textContent"];
+function Ce(t, n, e, f, s, l) {
+  const b = y("icon-alert"), v = y("icon-check"), d = S("maska");
+  return r(), i("div", me, [
+    e.label ? (r(), i("label", {
+      key: 0,
+      for: t.computedId,
+      class: c(["max-w-full whitespace-nowrap text-sm font-bold", {
+        active: t.isActive || e.modelValue,
+        "text-blue-dark": e.disabled,
+        "text-blue": t.isActive,
+        "text-blue-dark": !e.error && !t.isActive,
+        "text-blue-dark": e.error && !t.isActive
+      }])
+    }, [
+      a("span", {
+        textContent: u(e.label)
+      }, null, 8, ye),
+      e.required ? (r(), i("span", ge, " * ")) : o("", !0),
+      e.optional ? (r(), i("span", be)) : o("", !0)
+    ], 10, fe)) : o("", !0),
+    a("div", {
+      class: c([
+        "relative mt-1 rounded-sm",
+        [
+          l.outlineClass,
+          t.isActive || e.error ? "border-2" : "border",
+          e.disabled && e.modelValue || e.readonly ? "bg-blue-dark-100" : ""
+        ]
+      ])
+    }, [
+      C(a("input", {
+        id: t.computedId,
+        value: e.modelValue,
+        type: t.fieldType,
+        name: e.name,
+        placeholder: e.placeholder,
+        required: e.required,
+        optional: e.optional,
+        error: e.error,
+        autocomplete: e.autocomplete,
+        autofocus: e.autofocus,
+        inputmode: e.inputmode,
+        disabled: e.disabled,
+        readonly: e.readonly,
+        "aria-describedby": e.hint ? t.computedId + "-hint" : null,
+        "aria-errormessage": e.error ? t.computedId + "-errormsg" : null,
+        pattern: e.pattern,
+        "aria-invalid": e.error.toString(),
+        "data-maska": t.maskaPattern,
+        class: "block h-12 w-full appearance-none border-0 bg-transparent pl-3 pr-8 focus:outline-none",
+        onInput: n[0] || (n[0] = (h) => t.$emit("update:modelValue", h.target.value)),
+        onBlur: n[1] || (n[1] = (...h) => l.onBlur && l.onBlur(...h)),
+        onFocus: n[2] || (n[2] = (...h) => l.onFocus && l.onFocus(...h)),
+        onKeyup: n[3] || (n[3] = w((...h) => l.onKeyupEnter && l.onKeyupEnter(...h), ["enter"]))
+      }, null, 40, ve), [
+        [d]
+      ]),
+      a("div", {
+        class: "maska absolute left-1 top-0 my-1 px-2 leading-10 text-transparent opacity-0",
+        "aria-hidden": "true",
+        innerHTML: l.maskaValue
+      }, null, 8, we),
+      e.error ? (r(), i("div", pe, [
+        g(b, {
+          class: "-mt-1 mr-1 inline h-5 w-5",
+          "aria-hidden": "true"
+        })
+      ])) : o("", !0),
+      !e.error && e.modelValue && t.shouldShowCheck ? (r(), i("div", ke, [
+        g(v, {
+          class: "-mt-1 mr-1 inline h-5 w-5",
+          "aria-hidden": "true"
+        })
+      ])) : o("", !0)
+    ], 2),
+    e.hint && !e.error ? (r(), i("div", {
+      key: 1,
+      id: t.computedId + "-hint",
+      class: c(["w-full pt-1 text-xs leading-4", { "text-grey-500": e.disabled }]),
+      textContent: u(e.hint)
+    }, null, 10, _e)) : o("", !0),
+    e.error && e.errormessage ? (r(), i("div", {
+      key: 2,
+      id: t.computedId + "-errormsg",
+      class: "w-full pt-1 text-sm font-bold leading-4 text-error-500",
+      "aria-live": "assertive"
+    }, [
+      a("span", {
+        textContent: u(e.errormessage)
+      }, null, 8, Se)
+    ], 8, xe)) : o("", !0)
+  ]);
+}
+const Te = /* @__PURE__ */ _(he, [["render", Ce], ["__scopeId", "data-v-5f84fec5"]]);
 export {
-  Y as InputField,
-  Y as default
+  Ae as AmountInputField,
+  Te as IbanInputField,
+  Be as InputField
 };

package/dist/input-field.umd.js

@@ -1 +1 @@
-(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a.mosstandardcomponents={},a.Vue))})(this,function(a,e){"use strict";const c={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1008 1008"};function m(o,n){return e.openBlock(),e.createElementBlock("svg",c,[...n[0]||(n[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M1008 540c0 14-4 27-11 39-103 170-293 285-493 285S114 749 11 579c-7-12-11-25-11-39s4-27 11-39c103-170 293-285 493-285s390 115 493 285c7 12 11 25 11 39zM531 324c0-15-12-27-27-27-94 0-171 77-171 171 0 15 12 27 27 27s27-12 27-27c0-64 53-117 117-117 15 0 27-12 27-27zm405 216c-53-83-127-154-214-199 22 39 34 83 34 127 0 139-113 252-252 252S252 607 252 468c0-44 12-88 34-127-87 45-161 116-214 199 96 148 251 252 432 252s336-104 432-252z"},null,-1)])])}const u={render:m},h={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1008 1008"};function f(o,n){return e.openBlock(),e.createElementBlock("svg",h,[...n[0]||(n[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M1008 540c0 15-4 27-11 39-18 29-40 56-62 81-110 127-262 204-431 204l42-74c163-14 302-114 390-250-42-65-95-121-159-165l36-63c70 46 140 117 184 189 7 12 11 24 11 39zm-252-72c0 105-65 198-162 235l158-282c2 15 4 31 4 47zm-21-251v5C616 434 497 646 380 859l-28 50c-3 6-9 9-16 9-10 0-63-33-75-39-6-4-9-9-9-16 0-9 19-40 25-49C168 764 76 680 11 579c-7-11-11-25-11-39 0-13 4-28 11-39 112-171 285-285 493-285 34 0 68 3 101 10l31-55c3-6 9-9 15-9 11 0 63 33 75 39 6 4 9 9 9 16zM531 324c0-15-12-27-27-27-94 0-171 77-171 171 0 15 12 27 27 27s27-12 27-27c0-65 53-117 117-117 15 0 27-12 27-27zM312 751l44-79c-65-48-104-124-104-204 0-44 12-88 34-127-87 45-161 116-214 199 58 91 141 166 240 211z"},null,-1)])])}const p={render:f},w={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1039 1008"};function y(o,n){return e.openBlock(),e.createElementBlock("svg",w,[...n[0]||(n[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M908 989H131q-32 0-62.5-17T19 926.5 0 863t19-68l388-670q42-62 113-62t112 62l389 670q18 28 18 64 0 75-68 113-31 17-63 17zM576 157q-19-38-55.5-38T463 150L69 826q-20 30 0 69 21 32 56 32h777q35 0 55.5-30.5t.5-70.5zm-13 501.5Q544 676 517.5 676T474 659t-17-45V351q0-29 17-46t45.5-17 45.5 17 17 46v263q0 27-19 44.5zm-97.5 174q-8.5-14.5-8.5-36t18.5-39.5 37.5-18 31 5 20 13q18 18 18 44t-18 44.5-39.5 18.5-36-8.5-23-23z"},null,-1)])])}const g={render:y},k={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1008 1008"};function b(o,n){return e.openBlock(),e.createElementBlock("svg",k,[...n[0]||(n[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M940 318c0 14-6 28-16 39L517 764l-77 76c-10 10-24 16-38 16s-28-6-38-16l-77-76L84 560c-10-10-16-24-16-38s6-28 16-38l76-77c10-10 25-16 39-16s28 6 38 16l165 166 369-369c10-11 24-16 38-16s29 6 39 16l76 76c10 10 16 24 16 38z"},null,-1)])])}const B={render:b},C=(o,n)=>{const t=o.__vccOpts||o;for(const[s,d]of n)t[s]=d;return t},V={name:"InputField",components:{IconEyeSlash:p,IconPrivacy:u,IconAlert:g,IconCheck:B},props:{modelValue:String,label:String,name:String,placeholder:{type:String,default:" "},required:{type:Boolean,default:!1},optional:{type:Boolean,default:!1},disabled:Boolean,error:{type:Boolean,default:!1},pattern:{type:String,default:null},hidepasswordicon:{type:Boolean,default:!1},autocomplete:{type:String,default:"on"},inputmode:String,autofocus:Boolean,readonly:Boolean,minlength:String,maxlength:String,type:{type:String,default:"text"},id:{type:String,default:null},hint:String,errormessage:{type:String,default:""},borderClass:{type:String,default:null},showCheck:{type:Boolean,default:!1},inputClass:{type:String,default:null}},emits:["update:modelValue","focus","blur","showpassword","onKeyupEnter"],data:function(){return{initialType:"",fieldType:"text",isActive:!1,hasError:!1,showPassword:!1,shouldShowCheck:!1,computedId:null}},computed:{outlineClass:function(){return this.isActive?"border-blue":this.error?"border-error-500":!this.disabled&&this.modelValue?"border-blue-dark-900":this.disabled&&this.modelValue||this.readonly?"border-none":"border-blue-dark-200"}},watch:{type:function(){this.fieldType=this.type}},mounted:function(){this.computedId=this.id?this.id:"cb-input-"+Math.random().toString(36).slice(4),this.checkAutofill(),setTimeout(this.checkAutofill,1e3)},created:function(){this.initialType=this.type,this.fieldType=this.type},methods:{togglePassword:function(){this.showPassword=!this.showPassword,this.fieldType=this.showPassword?"text":"password",this.$emit("showpassword",this.showPassword)},onBlur:function(o){this.isActive=!1,this.$emit("blur",o.target.value),this.showCheck&&(this.shouldShowCheck=!0)},onFocus:function(o){this.isActive=!0,this.$emit("focus")},onKeyupEnter:function(o){this.isActive=!1,this.$emit("onKeyupEnter",o.target.value)},checkAutofill:function(){const o=this.$refs.input;o&&o.value&&this.$emit("update:modelValue",o.value)}}},E={class:"pt-2"},_=["for"],S=["textContent"],x={key:0,class:"text-red"},N={key:1,textContent:" (optioneel)",class:"font-normal"},z=["id","value","type","name","placeholder","required","optional","error","minlength","maxlength","autocomplete","autofocus","inputmode","disabled","readonly","aria-describedby","aria-errormessage","pattern","aria-invalid"],I=["aria-pressed","aria-label"],T={class:"sr-only"},q={key:1,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-error-500"},P={key:2,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-green"},A=["id","textContent"],M=["id"],F=["textContent"],K=["textContent"];function D(o,n,t,s,d,l){const L=e.resolveComponent("icon-privacy"),j=e.resolveComponent("icon-eye-slash"),O=e.resolveComponent("icon-alert"),H=e.resolveComponent("icon-check");return e.openBlock(),e.createElementBlock("div",E,[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:o.computedId,class:e.normalizeClass(["max-w-full whitespace-nowrap text-sm font-bold",{active:o.isActive||t.modelValue,"text-blue-dark":t.disabled,"text-blue":o.isActive,"text-blue-dark":!t.error&&!o.isActive,"text-blue-dark":t.error&&!o.isActive}])},[e.createElementVNode("span",{textContent:e.toDisplayString(t.label)},null,8,S),t.required?(e.openBlock(),e.createElementBlock("span",x," * ")):e.createCommentVNode("",!0),t.optional?(e.openBlock(),e.createElementBlock("span",N)):e.createCommentVNode("",!0)],10,_)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["relative mt-1 rounded-sm",[l.outlineClass,o.isActive||t.error?"border-2":"border",t.disabled&&t.modelValue||t.readonly?"bg-blue-dark-100":""]])},[e.createElementVNode("input",{id:o.computedId,ref:"input",value:t.modelValue,type:o.fieldType,name:t.name,placeholder:t.placeholder,required:t.required,optional:t.optional,error:t.error,minlength:t.minlength,maxlength:t.maxlength,autocomplete:t.autocomplete,autofocus:t.autofocus,inputmode:t.inputmode,disabled:t.disabled,readonly:t.readonly,"aria-describedby":t.hint?o.computedId+"-hint":null,"aria-errormessage":t.error?o.computedId+"-errormsg":null,pattern:t.pattern,"aria-invalid":t.error.toString(),class:"block h-12 w-full appearance-none border-0 bg-transparent pl-4 pr-8 focus:outline-none","data-clarity-mask":"true",onInput:n[0]||(n[0]=r=>o.$emit("update:modelValue",r.target.value)),onBlur:n[1]||(n[1]=(...r)=>l.onBlur&&l.onBlur(...r)),onFocus:n[2]||(n[2]=(...r)=>l.onFocus&&l.onFocus(...r)),onKeyup:n[3]||(n[3]=e.withKeys((...r)=>l.onKeyupEnter&&l.onKeyupEnter(...r),["enter"]))},null,40,z),o.initialType==="password"&&!t.hidepasswordicon&&!t.disabled?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["absolute right-0 top-0",{"right-8":t.error}])},[e.createElementVNode("button",{type:"button",class:"m-1 px-2 py-3 focus-visible:outline-blue-dark","aria-pressed":o.showPassword,"aria-label":o.showPassword?"Verberg wachtwoord":"Toon wachtwoord",onClick:n[4]||(n[4]=(...r)=>l.togglePassword&&l.togglePassword(...r))},[o.showPassword?(e.openBlock(),e.createBlock(L,{key:0,class:"h-4 w-4","aria-hidden":"true"})):(e.openBlock(),e.createBlock(j,{key:1,class:"h-4 w-4","aria-hidden":"true"})),e.createElementVNode("span",T,e.toDisplayString(o.showPassword?"verberg":"toon")+" wachtwoord",1)],8,I)],2)):e.createCommentVNode("",!0),t.error?(e.openBlock(),e.createElementBlock("div",q,[e.createVNode(O,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0),!t.error&&t.modelValue&&o.shouldShowCheck?(e.openBlock(),e.createElementBlock("div",P,[e.createVNode(H,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0)],2),t.hint&&!t.error?(e.openBlock(),e.createElementBlock("div",{key:1,id:o.computedId+"-hint",class:e.normalizeClass(["w-full pt-1 text-xs leading-4",{"text-grey-500":t.disabled}]),textContent:e.toDisplayString(t.hint)},null,10,A)):e.createCommentVNode("",!0),t.error&&t.errormessage?(e.openBlock(),e.createElementBlock("div",{key:2,id:o.computedId+"-errormsg",class:"w-full pt-1 text-sm font-bold leading-4 text-error-500","aria-live":"assertive"},[e.createElementVNode("span",{textContent:e.toDisplayString(t.errormessage)},null,8,F)],8,M)):e.createCommentVNode("",!0),o.initialType==="password"?(e.openBlock(),e.createElementBlock("p",{key:3,class:"sr-only","aria-live":"polite",textContent:e.toDisplayString(o.showPassword?"wachtwoord wordt getoond":"wachtwoord is verborgen")},null,8,K)):e.createCommentVNode("",!0)])}const i=C(V,[["render",D],["__scopeId","data-v-5a4e94c9"]]);a.InputField=i,a.default=i,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("maska")):typeof define=="function"&&define.amd?define(["exports","vue","maska"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.mosstandardcomponents={},i.Vue,i.maska))})(this,function(i,e,g){"use strict";const k={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1008 1008"};function p(o,n){return e.openBlock(),e.createElementBlock("svg",k,[...n[0]||(n[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M1008 540c0 14-4 27-11 39-103 170-293 285-493 285S114 749 11 579c-7-12-11-25-11-39s4-27 11-39c103-170 293-285 493-285s390 115 493 285c7 12 11 25 11 39zM531 324c0-15-12-27-27-27-94 0-171 77-171 171 0 15 12 27 27 27s27-12 27-27c0-64 53-117 117-117 15 0 27-12 27-27zm405 216c-53-83-127-154-214-199 22 39 34 83 34 127 0 139-113 252-252 252S252 607 252 468c0-44 12-88 34-127-87 45-161 116-214 199 96 148 251 252 432 252s336-104 432-252z"},null,-1)])])}const b={render:p},w={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1008 1008"};function B(o,n){return e.openBlock(),e.createElementBlock("svg",w,[...n[0]||(n[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M1008 540c0 15-4 27-11 39-18 29-40 56-62 81-110 127-262 204-431 204l42-74c163-14 302-114 390-250-42-65-95-121-159-165l36-63c70 46 140 117 184 189 7 12 11 24 11 39zm-252-72c0 105-65 198-162 235l158-282c2 15 4 31 4 47zm-21-251v5C616 434 497 646 380 859l-28 50c-3 6-9 9-16 9-10 0-63-33-75-39-6-4-9-9-9-16 0-9 19-40 25-49C168 764 76 680 11 579c-7-11-11-25-11-39 0-13 4-28 11-39 112-171 285-285 493-285 34 0 68 3 101 10l31-55c3-6 9-9 15-9 11 0 63 33 75 39 6 4 9 9 9 16zM531 324c0-15-12-27-27-27-94 0-171 77-171 171 0 15 12 27 27 27s27-12 27-27c0-65 53-117 117-117 15 0 27-12 27-27zM312 751l44-79c-65-48-104-124-104-204 0-44 12-88 34-127-87 45-161 116-214 199 58 91 141 166 240 211z"},null,-1)])])}const C={render:B},V={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1039 1008"};function _(o,n){return e.openBlock(),e.createElementBlock("svg",V,[...n[0]||(n[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M908 989H131q-32 0-62.5-17T19 926.5 0 863t19-68l388-670q42-62 113-62t112 62l389 670q18 28 18 64 0 75-68 113-31 17-63 17zM576 157q-19-38-55.5-38T463 150L69 826q-20 30 0 69 21 32 56 32h777q35 0 55.5-30.5t.5-70.5zm-13 501.5Q544 676 517.5 676T474 659t-17-45V351q0-29 17-46t45.5-17 45.5 17 17 46v263q0 27-19 44.5zm-97.5 174q-8.5-14.5-8.5-36t18.5-39.5 37.5-18 31 5 20 13q18 18 18 44t-18 44.5-39.5 18.5-36-8.5-23-23z"},null,-1)])])}const h={render:_},S={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 1008 1008"};function E(o,n){return e.openBlock(),e.createElementBlock("svg",S,[...n[0]||(n[0]=[e.createElementVNode("path",{fill:"currentColor",d:"M940 318c0 14-6 28-16 39L517 764l-77 76c-10 10-24 16-38 16s-28-6-38-16l-77-76L84 560c-10-10-16-24-16-38s6-28 16-38l76-77c10-10 25-16 39-16s28 6 38 16l165 166 369-369c10-11 24-16 38-16s29 6 39 16l76 76c10 10 16 24 16 38z"},null,-1)])])}const f={render:E},y=(o,n)=>{const t=o.__vccOpts||o;for(const[c,r]of n)t[c]=r;return t},x={name:"InputField",components:{IconEyeSlash:C,IconPrivacy:b,IconAlert:h,IconCheck:f},props:{modelValue:String,label:String,name:String,placeholder:{type:String,default:" "},required:{type:Boolean,default:!1},optional:{type:Boolean,default:!1},disabled:Boolean,error:{type:Boolean,default:!1},pattern:{type:String,default:null},hidepasswordicon:{type:Boolean,default:!1},autocomplete:{type:String,default:"on"},inputmode:String,autofocus:Boolean,readonly:Boolean,minlength:String,maxlength:String,type:{type:String,default:"text"},id:{type:String,default:null},hint:String,errormessage:{type:String,default:""},borderClass:{type:String,default:null},showCheck:{type:Boolean,default:!1},inputClass:{type:String,default:null}},emits:["update:modelValue","focus","blur","showpassword","onKeyupEnter"],data:function(){return{initialType:"",fieldType:"text",isActive:!1,hasError:!1,showPassword:!1,shouldShowCheck:!1,computedId:null}},computed:{outlineClass:function(){return this.isActive?"border-blue":this.error?"border-error-500":!this.disabled&&this.modelValue?"border-blue-dark-900":this.disabled&&this.modelValue||this.readonly?"border-none":"border-blue-dark-200"}},watch:{type:function(){this.fieldType=this.type}},mounted:function(){this.computedId=this.id?this.id:"cb-input-"+Math.random().toString(36).slice(4),this.checkAutofill(),setTimeout(this.checkAutofill,1e3)},created:function(){this.initialType=this.type,this.fieldType=this.type},methods:{togglePassword:function(){this.showPassword=!this.showPassword,this.fieldType=this.showPassword?"text":"password",this.$emit("showpassword",this.showPassword)},onBlur:function(o){this.isActive=!1,this.$emit("blur",o.target.value),this.showCheck&&(this.shouldShowCheck=!0)},onFocus:function(o){this.isActive=!0,this.$emit("focus")},onKeyupEnter:function(o){this.isActive=!1,this.$emit("onKeyupEnter",o.target.value)},checkAutofill:function(){const o=this.$refs.input;o&&o.value&&this.$emit("update:modelValue",o.value)}}},N={class:"pt-2"},I=["for"],A=["textContent"],T={key:0,class:"text-red"},F={key:1,textContent:" (optioneel)",class:"font-normal"},q=["id","value","type","name","placeholder","required","optional","error","minlength","maxlength","autocomplete","autofocus","inputmode","disabled","readonly","aria-describedby","aria-errormessage","pattern","aria-invalid"],z=["aria-pressed","aria-label"],K={class:"sr-only"},P={key:1,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-error-500"},D={key:2,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-green"},M=["id","textContent"],L=["id"],H=["textContent"],j=["textContent"];function O(o,n,t,c,r,l){const m=e.resolveComponent("icon-privacy"),u=e.resolveComponent("icon-eye-slash"),a=e.resolveComponent("icon-alert"),s=e.resolveComponent("icon-check");return e.openBlock(),e.createElementBlock("div",N,[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:o.computedId,class:e.normalizeClass(["max-w-full whitespace-nowrap text-sm font-bold",{active:o.isActive||t.modelValue,"text-blue-dark":t.disabled,"text-blue":o.isActive,"text-blue-dark":!t.error&&!o.isActive,"text-blue-dark":t.error&&!o.isActive}])},[e.createElementVNode("span",{textContent:e.toDisplayString(t.label)},null,8,A),t.required?(e.openBlock(),e.createElementBlock("span",T," * ")):e.createCommentVNode("",!0),t.optional?(e.openBlock(),e.createElementBlock("span",F)):e.createCommentVNode("",!0)],10,I)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["relative mt-1 rounded-sm",[l.outlineClass,o.isActive||t.error?"border-2":"border",t.disabled&&t.modelValue||t.readonly?"bg-blue-dark-100":""]])},[e.createElementVNode("input",{id:o.computedId,ref:"input",value:t.modelValue,type:o.fieldType,name:t.name,placeholder:t.placeholder,required:t.required,optional:t.optional,error:t.error,minlength:t.minlength,maxlength:t.maxlength,autocomplete:t.autocomplete,autofocus:t.autofocus,inputmode:t.inputmode,disabled:t.disabled,readonly:t.readonly,"aria-describedby":t.hint?o.computedId+"-hint":null,"aria-errormessage":t.error?o.computedId+"-errormsg":null,pattern:t.pattern,"aria-invalid":t.error.toString(),class:"block h-12 w-full appearance-none border-0 bg-transparent pl-4 pr-8 focus:outline-none","data-clarity-mask":"true",onInput:n[0]||(n[0]=d=>o.$emit("update:modelValue",d.target.value)),onBlur:n[1]||(n[1]=(...d)=>l.onBlur&&l.onBlur(...d)),onFocus:n[2]||(n[2]=(...d)=>l.onFocus&&l.onFocus(...d)),onKeyup:n[3]||(n[3]=e.withKeys((...d)=>l.onKeyupEnter&&l.onKeyupEnter(...d),["enter"]))},null,40,q),o.initialType==="password"&&!t.hidepasswordicon&&!t.disabled?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["absolute right-0 top-0",{"right-8":t.error}])},[e.createElementVNode("button",{type:"button",class:"m-1 px-2 py-3 focus-visible:outline-blue-dark","aria-pressed":o.showPassword,"aria-label":o.showPassword?"Verberg wachtwoord":"Toon wachtwoord",onClick:n[4]||(n[4]=(...d)=>l.togglePassword&&l.togglePassword(...d))},[o.showPassword?(e.openBlock(),e.createBlock(m,{key:0,class:"h-4 w-4","aria-hidden":"true"})):(e.openBlock(),e.createBlock(u,{key:1,class:"h-4 w-4","aria-hidden":"true"})),e.createElementVNode("span",K,e.toDisplayString(o.showPassword?"verberg":"toon")+" wachtwoord",1)],8,z)],2)):e.createCommentVNode("",!0),t.error?(e.openBlock(),e.createElementBlock("div",P,[e.createVNode(a,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0),!t.error&&t.modelValue&&o.shouldShowCheck?(e.openBlock(),e.createElementBlock("div",D,[e.createVNode(s,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0)],2),t.hint&&!t.error?(e.openBlock(),e.createElementBlock("div",{key:1,id:o.computedId+"-hint",class:e.normalizeClass(["w-full pt-1 text-xs leading-4",{"text-grey-500":t.disabled}]),textContent:e.toDisplayString(t.hint)},null,10,M)):e.createCommentVNode("",!0),t.error&&t.errormessage?(e.openBlock(),e.createElementBlock("div",{key:2,id:o.computedId+"-errormsg",class:"w-full pt-1 text-sm font-bold leading-4 text-error-500","aria-live":"assertive"},[e.createElementVNode("span",{textContent:e.toDisplayString(t.errormessage)},null,8,H)],8,L)):e.createCommentVNode("",!0),o.initialType==="password"?(e.openBlock(),e.createElementBlock("p",{key:3,class:"sr-only","aria-live":"polite",textContent:e.toDisplayString(o.showPassword?"wachtwoord wordt getoond":"wachtwoord is verborgen")},null,8,j)):e.createCommentVNode("",!0)])}const G=y(x,[["render",O],["__scopeId","data-v-5a4e94c9"]]),Q={name:"AmountInputField",components:{IconAlert:h,IconCheck:f},props:{modelValue:Number,label:String,name:String,placeholder:{type:String,default:""},required:Boolean,optional:Boolean,disabled:Boolean,error:Boolean,pattern:{type:String,default:"[1-9]?"},autocomplete:{type:String,default:"on"},inputmode:String,autofocus:Boolean,readonly:Boolean,min:String,max:String,id:{type:String,default:null},hint:String,errormessage:String,borderClass:String,showCheck:Boolean,symbol:String},emits:["update:modelValue","input","focus","blur","onKeyupEnter"],data(){return{isActive:!1,shouldShowCheck:!1,displayValue:"",computedId:null,isTyping:!1}},watch:{modelValue:{immediate:!0,handler(o){this.isTyping||(this.displayValue=this.formatCurrency(o))}}},computed:{outlineClass(){return this.isActive?"border-blue":this.error?"border-error-500":!this.disabled&&this.modelValue?"border-blue-dark-900":this.disabled&&this.modelValue||this.readonly?"border-none":"border-blue-dark-200"}},mounted(){this.computedId=this.id??"cb-input-"+Math.random().toString(36).slice(4)},methods:{onInput(o){this.isTyping=!0;const n=o.target.value,t=n.replace(/[^\d.,]/g,"").replace(",","."),c=parseFloat(t);isNaN(c)||(this.$emit("update:modelValue",c),this.$emit("input",c)),this.displayValue=n},onBlur(){this.isTyping=!1,this.applyFormatting(),this.isActive=!1,this.$emit("blur",this.modelValue)},onKeyupEnter(){this.isTyping=!1,this.applyFormatting(),this.isActive=!1,this.$emit("onKeyupEnter",this.modelValue)},applyFormatting(){const o=this.displayValue.replace(/[^\d.,]/g,"").replace(",","."),n=parseFloat(o);if(!isNaN(n)){const t=this.formatCurrency(n);this.displayValue=t,this.$emit("update:modelValue",n),this.$emit("input",n)}},formatCurrency(o){return o==null||o===""?"":new Intl.NumberFormat("nl-NL",{minimumFractionDigits:2,maximumFractionDigits:2}).format(o)},onFocus(){this.isActive=!0,this.$emit("focus")}}},J={class:"pt-2"},R=["for"],U=["textContent"],W={key:0,class:"text-red"},X={key:1,class:"font-normal",textContent:" (optioneel)"},Y=["id","value","name","placeholder","required","optional","error","min","max","autocomplete","autofocus","inputmode","disabled","readonly","aria-describedby","aria-errormessage","pattern","aria-invalid"],Z={key:0,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-error-500"},v={key:1,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-green"},$=["id","textContent"],ee=["id"],te=["textContent"];function oe(o,n,t,c,r,l){const m=e.resolveComponent("icon-alert"),u=e.resolveComponent("icon-check");return e.openBlock(),e.createElementBlock("div",J,[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:r.computedId,class:e.normalizeClass(["max-w-full whitespace-nowrap text-sm font-bold",{active:r.isActive||t.modelValue,"text-blue-dark":t.disabled,"text-blue":r.isActive,"text-blue-dark":!t.error&&!r.isActive,"text-blue-dark":t.error&&!r.isActive}])},[e.createElementVNode("span",{textContent:e.toDisplayString(t.label)},null,8,U),t.required?(e.openBlock(),e.createElementBlock("span",W," * ")):e.createCommentVNode("",!0),t.optional?(e.openBlock(),e.createElementBlock("span",X)):e.createCommentVNode("",!0)],10,R)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["relative mt-1 rounded-sm",[l.outlineClass,r.isActive||t.error?"border-2":"border",t.disabled&&t.modelValue||t.readonly?"bg-blue-dark-100":""]])},[e.createElementVNode("input",{id:r.computedId,value:r.displayValue,type:"text",name:t.name,placeholder:t.placeholder,required:t.required,optional:t.optional,error:t.error,min:t.min,max:t.max,autocomplete:t.autocomplete,autofocus:t.autofocus,inputmode:t.inputmode,disabled:t.disabled,readonly:t.readonly,"aria-describedby":t.hint?r.computedId+"-hint":!1,"aria-errormessage":t.error?r.computedId+"-errormsg":!1,pattern:t.pattern,"aria-invalid":t.error.toString(),class:"block h-12 w-full appearance-none border-0 bg-transparent pl-10 pr-8 focus:outline-none",onInput:n[0]||(n[0]=(...a)=>l.onInput&&l.onInput(...a)),onBlur:n[1]||(n[1]=(...a)=>l.onBlur&&l.onBlur(...a)),onFocus:n[2]||(n[2]=(...a)=>l.onFocus&&l.onFocus(...a)),onKeyup:n[3]||(n[3]=e.withKeys((...a)=>l.onKeyupEnter&&l.onKeyupEnter(...a),["enter"]))},null,40,Y),t.error?(e.openBlock(),e.createElementBlock("div",Z,[e.createVNode(m,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0),!t.error&&t.modelValue&&r.shouldShowCheck?(e.openBlock(),e.createElementBlock("div",v,[e.createVNode(u,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0)],2),t.hint&&!t.error?(e.openBlock(),e.createElementBlock("div",{key:1,id:r.computedId+"-hint",class:e.normalizeClass(["w-full pt-1 text-xs leading-4",{"text-grey-500":t.disabled}]),textContent:e.toDisplayString(t.hint)},null,10,$)):e.createCommentVNode("",!0),t.error&&t.errormessage?(e.openBlock(),e.createElementBlock("div",{key:2,id:r.computedId+"-errormsg",class:"w-full pt-1 text-sm font-bold leading-4 text-error-500","aria-live":"assertive"},[e.createElementVNode("span",{textContent:e.toDisplayString(t.errormessage)},null,8,te)],8,ee)):e.createCommentVNode("",!0)])}const ne=y(Q,[["render",oe],["__scopeId","data-v-490f2fac"]]),le={name:"IbanInputField",components:{IconAlert:h,IconCheck:f},directives:{maska:g.vMaska},props:{modelValue:String,label:String,name:String,placeholder:{type:String,default:" "},required:{type:Boolean,default:!1},optional:{type:Boolean,default:!1},disabled:Boolean,error:{type:Boolean,default:!1},pattern:{type:String,default:null},autocomplete:{type:String,default:"on"},inputmode:String,autofocus:Boolean,readonly:Boolean,minlength:String,maxlength:String,type:{type:String,default:"text"},id:{type:String,default:null},hint:String,errormessage:{type:String,default:""},borderClass:{type:String,default:null},maskaVal:{type:String,default:""},showCheck:{type:Boolean,default:!1}},data:function(){return{initialType:"",fieldType:"text",isActive:!1,hasError:!1,shouldShowCheck:!1,maskaPattern:"@@## @@@@ #### #### ##",maskaPlaceholder:"NL20 INGB 0001 2345 67",computedId:null}},computed:{outlineClass:function(){return this.isActive?"border-blue":this.error?"border-error-500":!this.disabled&&this.modelValue?"border-blue-dark-900":this.disabled&&this.modelValue||this.readonly?"border-none":"border-blue-dark-200"},maskaValue:function(){let o=this.maskaPlaceholder;if(this.maskaVal){const n=this.maskaVal.length;o="<i>"+this.maskaVal+"</i>"+o.substring(n)}return o}},watch:{type:function(){this.fieldType=this.type}},created:function(){this.initialType=this.type,this.fieldType=this.type},mounted(){this.computedId=this.id?this.id:"cb-input-"+Math.random().toString(36).slice(4)},methods:{onBlur:function(o){this.isActive=!1,this.$emit("blur",o.target.value),this.showCheck&&(this.shouldShowCheck=!0)},onFocus:function(o){this.isActive=!0,this.$emit("focus")},onKeyupEnter:function(o){this.isActive=!1,this.$emit("onKeyupEnter",o.target.value)}}},re={class:"pt-2"},ae=["for"],ie=["textContent"],se={key:0,class:"text-red"},de={key:1,textContent:" (optioneel)",class:"font-normal"},ce=["id","value","type","name","placeholder","required","optional","error","autocomplete","autofocus","inputmode","disabled","readonly","aria-describedby","aria-errormessage","pattern","aria-invalid","data-maska"],me=["innerHTML"],ue={key:0,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-error-500"},he={key:1,class:"absolute right-0 top-0 py-3 pl-1 pr-2 text-green"},fe=["id","textContent"],ye=["id"],ge=["textContent"];function ke(o,n,t,c,r,l){const m=e.resolveComponent("icon-alert"),u=e.resolveComponent("icon-check"),a=e.resolveDirective("maska");return e.openBlock(),e.createElementBlock("div",re,[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:o.computedId,class:e.normalizeClass(["max-w-full whitespace-nowrap text-sm font-bold",{active:o.isActive||t.modelValue,"text-blue-dark":t.disabled,"text-blue":o.isActive,"text-blue-dark":!t.error&&!o.isActive,"text-blue-dark":t.error&&!o.isActive}])},[e.createElementVNode("span",{textContent:e.toDisplayString(t.label)},null,8,ie),t.required?(e.openBlock(),e.createElementBlock("span",se," * ")):e.createCommentVNode("",!0),t.optional?(e.openBlock(),e.createElementBlock("span",de)):e.createCommentVNode("",!0)],10,ae)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["relative mt-1 rounded-sm",[l.outlineClass,o.isActive||t.error?"border-2":"border",t.disabled&&t.modelValue||t.readonly?"bg-blue-dark-100":""]])},[e.withDirectives(e.createElementVNode("input",{id:o.computedId,value:t.modelValue,type:o.fieldType,name:t.name,placeholder:t.placeholder,required:t.required,optional:t.optional,error:t.error,autocomplete:t.autocomplete,autofocus:t.autofocus,inputmode:t.inputmode,disabled:t.disabled,readonly:t.readonly,"aria-describedby":t.hint?o.computedId+"-hint":null,"aria-errormessage":t.error?o.computedId+"-errormsg":null,pattern:t.pattern,"aria-invalid":t.error.toString(),"data-maska":o.maskaPattern,class:"block h-12 w-full appearance-none border-0 bg-transparent pl-3 pr-8 focus:outline-none",onInput:n[0]||(n[0]=s=>o.$emit("update:modelValue",s.target.value)),onBlur:n[1]||(n[1]=(...s)=>l.onBlur&&l.onBlur(...s)),onFocus:n[2]||(n[2]=(...s)=>l.onFocus&&l.onFocus(...s)),onKeyup:n[3]||(n[3]=e.withKeys((...s)=>l.onKeyupEnter&&l.onKeyupEnter(...s),["enter"]))},null,40,ce),[[a]]),e.createElementVNode("div",{class:"maska absolute left-1 top-0 my-1 px-2 leading-10 text-transparent opacity-0","aria-hidden":"true",innerHTML:l.maskaValue},null,8,me),t.error?(e.openBlock(),e.createElementBlock("div",ue,[e.createVNode(m,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0),!t.error&&t.modelValue&&o.shouldShowCheck?(e.openBlock(),e.createElementBlock("div",he,[e.createVNode(u,{class:"-mt-1 mr-1 inline h-5 w-5","aria-hidden":"true"})])):e.createCommentVNode("",!0)],2),t.hint&&!t.error?(e.openBlock(),e.createElementBlock("div",{key:1,id:o.computedId+"-hint",class:e.normalizeClass(["w-full pt-1 text-xs leading-4",{"text-grey-500":t.disabled}]),textContent:e.toDisplayString(t.hint)},null,10,fe)):e.createCommentVNode("",!0),t.error&&t.errormessage?(e.openBlock(),e.createElementBlock("div",{key:2,id:o.computedId+"-errormsg",class:"w-full pt-1 text-sm font-bold leading-4 text-error-500","aria-live":"assertive"},[e.createElementVNode("span",{textContent:e.toDisplayString(t.errormessage)},null,8,ge)],8,ye)):e.createCommentVNode("",!0)])}const pe=y(le,[["render",ke],["__scopeId","data-v-5f84fec5"]]);i.AmountInputField=ne,i.IbanInputField=pe,i.InputField=G,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -1 +1 @@
-input[type=number][data-v-5a4e94c9]::-webkit-inner-spin-button,input[type=number][data-v-5a4e94c9]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=password][data-v-5a4e94c9]::-ms-reveal,input[type=password][data-v-5a4e94c9]::-ms-clear{display:none}input[type=number][data-v-5a4e94c9]{-moz-appearance:textfield}
+input[type=number][data-v-5a4e94c9]::-webkit-inner-spin-button,input[type=number][data-v-5a4e94c9]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=password][data-v-5a4e94c9]::-ms-reveal,input[type=password][data-v-5a4e94c9]::-ms-clear{display:none}input[type=number][data-v-5a4e94c9]{-moz-appearance:textfield}input[data-v-490f2fac]::-webkit-outer-spin-button,input[data-v-490f2fac]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number][data-v-490f2fac]{-moz-appearance:textfield}input[data-v-5f84fec5]{text-transform:uppercase}.maska[data-v-5f84fec5]{letter-spacing:0;font-variant-numeric:tabular-nums;pointer-events:none}input:not(:placeholder-shown)+label+.maska[data-v-5f84fec5],input:focus+label+.maska[data-v-5f84fec5]{opacity:1;color:#999}.maska[data-v-5f84fec5] i{color:transparent;opacity:0;text-transform:uppercase;font-style:unset}input[data-v-5f84fec5]::-webkit-outer-spin-button,input[data-v-5f84fec5]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number][data-v-5f84fec5]{-moz-appearance:textfield}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mosstandardcomponents",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "type": "module",
   "main": "dist/input-field.umd.js",
   "module": "dist/input-field.es.js",
@@ -17,11 +17,13 @@
     "build": "vite build"
   },
   "peerDependencies": {
-    "vue": "^3.0.0"
+    "vue": "^3.0.0",
+    "maska": "^2.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.0",
-    "vite": "^5.0.0"
+    "vite": "^5.0.0",
+    "maska": "^2.1.0"
   },
   "author": "mos",
   "license": "ISC",
@@ -30,6 +32,7 @@
   },
   "homepage": "https://github.com/ChimeneIsHere/stage_consumentenbond#readme",
   "dependencies": {
+    "v-mask": "^2.3.0",
     "vite-svg-loader": "^5.1.0"
   }
 }