@7pmlabs/design-system 0.8.2 → 1.0.1

package/dist/design-system17.mjs

@@ -1,283 +1,127 @@
-import { defineComponent as ae, ref as v, computed as h, watch as q, nextTick as C, onMounted as oe, onBeforeUnmount as ne, openBlock as d, createElementBlock as n, createElementVNode as i, createVNode as F, normalizeClass as f, unref as M, Fragment as N, renderList as O, toDisplayString as I, createBlock as U, createCommentVNode as _, createTextVNode as ue, withDirectives as re, withModifiers as ie, vShow as ce } from "vue";
-import { useValidationField as ve } from "./design-system3.mjs";
-import { lockScrollBody as fe, unlockScrollBody as A, ensureVisiblePosition as pe, resetPosition as me, ensureVisibleY as ge } from "./design-system6.mjs";
-import { useI18n as be } from "./design-system49.mjs";
-import we from "./design-system28.mjs";
-import he from "./design-system14.mjs";
-import ke from "./design-system15.mjs";
-import ye from "./design-system39.mjs";
-import xe from "./design-system98.mjs";
-const Ce = { class: "ds-absolute ds-right-3 ds-z-[1]" }, Me = ["onClick"], $e = ["id", "disabled"], Ie = ["id", "data-cy", "data-ut"], Be = { class: "ds-max-h-72 ds-overflow-y-auto ds-rounded-lg ds-bg-white ds-shadow" }, Ve = { class: "ds-py-1 ds-text-sm ds-text-black/[0.85]" }, Ee = ["onClick"], Oe = /* @__PURE__ */ ae({
-  __name: "BMultiSelect",
+import { defineComponent as L, ref as f, computed as l, openBlock as d, createElementBlock as k, createElementVNode as S, Fragment as W, renderList as z, createBlock as C, normalizeClass as U, unref as G, createCommentVNode as H } from "vue";
+import J from "./design-system29.mjs";
+import { useValidationField as Q } from "./design-system3.mjs";
+import { useI18n as T } from "./design-system49.mjs";
+import X from "./design-system100.mjs";
+import Y from "./design-system98.mjs";
+import Z from "./design-system101.mjs";
+const ee = { class: "ds-flex ds-items-center ds-justify-center ds-space-x-2" }, re = /* @__PURE__ */ L({
+  __name: "BOtpField",
   props: {
     inputId: { default: "" },
-    modelValue: {},
-    label: { default: "" },
-    items: {},
+    modelValue: { default: "" },
+    numInputs: { default: 6 },
+    focusIndex: { default: void 0 },
     disabled: { type: Boolean, default: !1 },
-    placeholder: { default: "" },
-    valueCssClass: { default: "" },
-    menuCssClass: { default: "" },
+    inputCssClass: { default: "" },
     validationRules: { default: void 0 },
     required: { type: Boolean, default: !1 },
     requiredErrorMessage: { default: "" },
-    hideDetails: { type: Boolean, default: !1 },
-    showSelectedItemCount: { type: Boolean, default: !1 },
-    allowInput: { type: Boolean, default: !1 }
+    hideDetails: { type: Boolean, default: !1 }
   },
-  emits: ["change", "open", "close", "change:input", "update:modelValue"],
-  setup(j, { expose: K, emit: W }) {
-    const l = j, m = W, g = v(null), B = v(null), b = v(null), u = v(!1), { t: L } = be(), Y = {
-      validateRule: (e) => !!e && e.length > 0,
-      errorMessage: () => l.requiredErrorMessage || L("ds.global.field_required")
-    }, V = v(""), p = v([]), k = h(() => l.inputId || `id-${xe()}`), a = h({
+  emits: ["complete", "change", "update:focusIndex", "update:modelValue"],
+  setup(D, { expose: _, emit: y }) {
+    const t = D, o = y, { t: V } = T(), B = {
+      validateRule: (e) => !!e,
+      errorMessage: () => t.requiredErrorMessage || V("ds.global.field_required")
+    }, p = f(0), m = f([]), v = f(null), R = (e) => {
+      a.value = e;
+    }, j = () => {
+      a.value = -1;
+    }, F = l(() => t.inputId || `id-${Y()}`), s = l({
       get() {
-        return l.modelValue;
+        return t.modelValue.split("");
       },
       set(e) {
-        m("update:modelValue", e);
+        o("update:modelValue", e.join(""));
       }
-    }), G = h(() => {
-      let e = "ds-border ds-drop-shadow-light ds-text-sm ds-h-[40px] ds-px-3 ds-rounded-lg ds-block ds-w-full ds-inline-flex ds-items-center ds-justify-between ";
-      return e += l.disabled ? "ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4] " : "ds-bg-white ds-text-black/[0.85] ", e += w.value.valid ? "ds-border-black/10 focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus " : "ds-border-error focus:ds-ring-1 focus:ds-ring-error ", e;
-    }), H = h(() => {
-      let e = [];
-      return l.required && e.push(Y), l.validationRules && (e = e.concat(l.validationRules)), e.length ? e : void 0;
-    }), J = h(
-      () => {
-        var e, s;
-        return ((e = a.value) == null ? void 0 : e.length) > 1 ? ` (${L("ds.components.base.multi_select.selected_item_count", {
-          count: (s = a.value) == null ? void 0 : s.length
-        })})` : "";
-      }
-    ), Q = h(
-      () => l.showSelectedItemCount ? `${l.label}${J.value}` : l.label
-    ), { validate: E, validationResult: w } = ve(
-      k.value,
-      a,
-      H.value
-    );
-    q(u, (e) => {
-      e ? (fe(), se(), m("open")) : (A(), T(), m("close"));
-    }), q(
-      a,
-      () => {
-        R();
+    }), q = l(() => t.modelValue), a = l({
+      get() {
+        return t.focusIndex !== void 0 ? t.focusIndex : p.value;
       },
-      {
-        deep: !0
+      set(e) {
+        t.focusIndex !== void 0 ? o("update:focusIndex", e) : p.value = e;
       }
-    ), q(
-      () => l.items,
-      () => {
-        a.value.length !== 0 && p.value.length === 0 && R();
-      },
-      {
-        deep: !0
+    }), w = l(() => {
+      let e = [];
+      return t.required && e.push(B), t.validationRules && (e = e.concat(t.validationRules)), e.length ? e : void 0;
+    }), M = l(() => [
+      t.disabled ? "ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]" : "ds-text-black/[0.85]",
+      g.value.valid ? "ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus" : "ds-border-error focus:ds-ring-1 focus:ds-ring-error",
+      t.inputCssClass
+    ]), { validate: h, validationResult: g } = Q(
+      F.value,
+      q,
+      w.value
+    ), E = () => {
+      v.value[a.value].focus();
+    }, I = () => s.value.join("").length === t.numInputs ? o("complete", s.value.join("")) : "Wait until the user enters the required number of characters", c = (e) => {
+      a.value = Math.max(Math.min(t.numInputs - 1, e), 0);
+    }, b = () => {
+      c(a.value + 1);
+    }, O = () => {
+      c(a.value - 1);
+    }, i = (e) => {
+      m.value = [...s.value], s.value[a.value] = e, s.value = Z(s.value);
+      const u = m.value.join(""), r = s.value.join("");
+      u !== r && (o("change", r), I());
+    }, $ = (e) => {
+      e.preventDefault();
+      const u = e.clipboardData.getData("text/plain").slice(0, t.numInputs - a.value).split("");
+      if (!u.join("").match(/^\d+$/))
+        return "Invalid pasted data";
+      const n = s.value.slice(0, a.value).concat(u);
+      return n.slice(0, t.numInputs).forEach((x, N) => {
+        s.value[N] = x;
+      }), c(n.slice(0, t.numInputs).length), o("update:modelValue", s.value.join("")), I();
+    }, A = (e) => {
+      i(e), b();
+    }, K = (e) => {
+      switch (e.key) {
+        case "Backspace":
+          e.preventDefault(), i(""), O();
+          break;
+        case "Delete":
+          e.preventDefault(), i("");
+          break;
+        case "ArrowLeft":
+          e.preventDefault(), O();
+          break;
+        case "ArrowRight":
+          e.preventDefault(), b();
+          break;
       }
-    );
-    const R = () => {
-      p.value = a.value.map((e) => {
-        let s = p.value.find((r) => r.value === e);
-        return s || (s = l.items.find((r) => r.value === e)), { text: s == null ? void 0 : s.text, value: e, cssClass: s == null ? void 0 : s.cssClass };
-      });
-    }, X = () => {
-      document.addEventListener("keydown", S);
-    }, S = (e) => {
-      e.key === "Escape" && (D(), $());
-    }, Z = () => {
-      document.addEventListener("click", z);
-    }, z = (e) => {
-      [g.value, b.value].some((t) => e.composedPath().includes(t)) || (D(), $());
-    }, P = (e) => {
-      const s = a.value.findIndex((r) => r === e.value);
-      s !== -1 ? a.value.splice(s, 1) : a.value.push(e.value), m("change", e.value), C(() => {
-        E();
-      }), ge(g.value, b.value);
-    }, ee = (e, s) => {
-      s.style.width = `${e.offsetWidth}px`;
-    }, se = () => {
-      C(() => {
-        pe(g.value, b.value), ee(g.value, b.value);
-      });
-    }, T = () => {
-      me(g.value, b.value);
-    }, le = (e) => {
-      m("change:input", e), $();
-    }, D = () => {
-      var e;
-      u.value = !1, (e = B.value) == null || e.blur(), V.value = "";
-    }, te = (e) => {
-      const s = a.value.findIndex((r) => r === e.value);
-      s !== -1 && (a.value.splice(s, 1), m("change", e.value), C(() => {
-        E();
-      }));
-    };
-    (() => {
-      var e;
-      ((e = l.items) == null ? void 0 : e.length) > 0 && R();
-    })(), oe(() => {
-      X(), Z();
-    }), ne(() => {
-      document.removeEventListener("keydown", S), document.removeEventListener("click", z), A(), T();
-    }), K({ validate: E, selectMenu: u });
-    const y = v(null), o = v(-1), $ = () => {
-      o.value = -1;
-    }, de = (e) => {
-      e.key === "ArrowDown" ? (e.preventDefault(), o.value < l.items.length - 1 && (o.value++, C(() => {
-        var s;
-        y.value && ((s = y.value[o.value]) == null || s.scrollIntoView({
-          block: "nearest"
-        }));
-      }))) : e.key === "ArrowUp" ? (e.preventDefault(), o.value > 0 ? (o.value--, C(() => {
-        var s;
-        y.value && ((s = y.value[o.value]) == null || s.scrollIntoView({
-          block: "nearest"
-        }));
-      })) : o.value = -1) : e.key === "Enter" && o.value >= 0 ? (e.preventDefault(), P(l.items[o.value])) : e.key === "Tab" && D();
-    };
-    return (e, s) => {
-      var r;
-      return d(), n("div", null, [
-        i("div", {
-          ref_key: "selectEl",
-          ref: g
-        }, [
-          F(ke, {
-            id: k.value,
-            label: Q.value,
-            required: e.required
-          }, null, 8, ["id", "label", "required"]),
-          l.allowInput ? (d(), n("div", {
-            key: 0,
-            class: f([{
-              "ds-border-focus ds-ring-1 ds-ring-focus": u.value && M(w).valid,
-              "ds-ring-1 ds-ring-error": u.value && !M(w).valid,
-              "ds-border-black/10": M(w).valid,
-              "ds-border-error": !M(w).valid
-            }, "ds-relative ds-flex ds-flex-wrap ds-items-center ds-gap-x-1 ds-rounded-lg ds-border ds-bg-white ds-px-3 ds-py-1 ds-drop-shadow-light"])
-          }, [
-            i("div", Ce, [
-              (d(), n("svg", {
-                class: f([[u.value ? "ds-rotate-180" : ""], "ds-h-4 ds-min-h-4 ds-w-4 ds-min-w-4 ds-transition-transform"]),
-                viewBox: "0 0 320 512",
-                xmlns: "http://www.w3.org/2000/svg",
-                onClick: s[0] || (s[0] = (t) => {
-                  var c;
-                  return (c = B.value) == null ? void 0 : c.focus();
-                })
-              }, s[5] || (s[5] = [
-                i("path", { d: "M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z" }, null, -1)
-              ]), 2))
-            ]),
-            (d(!0), n(N, null, O(p.value, (t, c) => (d(), n("div", {
-              key: `item${c}`,
-              class: "ds-my-0.5 ds-flex-initial ds-space-x-1 ds-rounded-lg ds-bg-black/10 ds-px-2"
-            }, [
-              i("span", null, I(t.text), 1),
-              (d(), n("svg", {
-                class: "ds-mb-1 ds-inline ds-h-4 ds-w-4 ds-cursor-pointer ds-fill-black/60 hover:ds-fill-black/40",
-                viewBox: "0 0 512 512",
-                xmlns: "http://www.w3.org/2000/svg",
-                onClick: (x) => te(t)
-              }, s[6] || (s[6] = [
-                i("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" }, null, -1)
-              ]), 8, Me))
-            ]))), 128)),
-            l.allowInput ? (d(), U(ye, {
-              key: 0,
-              id: k.value,
-              ref_key: "inputRef",
-              ref: B,
-              modelValue: V.value,
-              "onUpdate:modelValue": [
-                s[1] || (s[1] = (t) => V.value = t),
-                le
-              ],
-              disabled: l.disabled,
-              class: "ds-flex-auto",
-              "hide-details": "",
-              "input-css-class": "ds-drop-shadow-none ds-border-none !ds-ring-0 ds-px-0 !ds-h-[30px] ds-pl-0",
-              onChange: $,
-              onFocus: s[2] || (s[2] = (t) => u.value = !0),
-              onKeydown: de
-            }, null, 8, ["id", "modelValue", "disabled"])) : _("", !0)
-          ], 2)) : (d(), n("button", {
-            key: 1,
-            id: k.value,
-            class: f(G.value),
-            disabled: e.disabled,
-            type: "button",
-            onClick: s[3] || (s[3] = (t) => u.value = !u.value)
-          }, [
-            p.value.length > 0 ? (d(), n("span", {
-              key: 0,
-              class: f([e.valueCssClass, "ds-truncate ds-text-sm"])
-            }, I((r = p.value) == null ? void 0 : r.map((t) => t.text).join(", ")), 3)) : (d(), n("span", {
-              key: 1,
-              class: f([e.valueCssClass, "ds-truncate ds-text-sm ds-text-black/[0.4]"])
-            }, I(l.placeholder), 3)),
-            s[8] || (s[8] = ue("   ")),
-            (d(), n("svg", {
-              class: f([[u.value ? "ds-rotate-180" : ""], "ds-h-4 ds-min-h-4 ds-w-4 ds-min-w-4 ds-transition-transform"]),
-              viewBox: "0 0 320 512",
-              xmlns: "http://www.w3.org/2000/svg"
-            }, s[7] || (s[7] = [
-              i("path", { d: "M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z" }, null, -1)
-            ]), 2))
-          ], 10, $e)),
-          re(i("div", {
-            id: `${k.value}Menu`,
-            ref_key: "selectMenuEl",
-            ref: b,
-            class: f([e.menuCssClass, "ds-absolute ds-z-50 ds-min-w-[8rem] ds-py-1"]),
-            "data-cy": e.$attrs["data-cy"] ? `${e.$attrs["data-cy"]}Menu` : void 0,
-            "data-ut": e.$attrs["data-ut"] ? `${e.$attrs["data-ut"]}Menu` : void 0
-          }, [
-            i("div", Be, [
-              i("ul", Ve, [
-                (d(!0), n(N, null, O(e.items, (t, c) => (d(), n("li", {
-                  key: `item${c}`,
-                  ref_for: !0,
-                  ref_key: "itemRefs",
-                  ref: y,
-                  class: "ds-cursor-pointer",
-                  onClick: ie((x) => P(t), ["prevent"])
-                }, [
-                  i("a", {
-                    class: f([[
-                      t.cssClass,
-                      {
-                        "ds-bg-slate-100": o.value !== c && p.value.some((x) => x.value === t.value),
-                        "ds-bg-slate-300": o.value === c
-                      }
-                    ], "ds-flex ds-items-center ds-space-x-2 ds-px-4 ds-py-2 hover:ds-bg-slate-300"])
-                  }, [
-                    F(we, {
-                      modelValue: a.value,
-                      "onUpdate:modelValue": s[4] || (s[4] = (x) => a.value = x),
-                      value: t.value,
-                      size: "sm"
-                    }, null, 8, ["modelValue", "value"]),
-                    i("span", null, I(t == null ? void 0 : t.text), 1)
-                  ], 2)
-                ], 8, Ee))), 128))
-              ])
-            ])
-          ], 10, Ie), [
-            [ce, u.value]
-          ])
-        ], 512),
-        e.hideDetails ? _("", !0) : (d(), U(he, {
-          key: 0,
-          "error-message": M(w).errorMessage(),
-          class: "ds-mt-1"
-        }, null, 8, ["error-message"]))
-      ]);
+    }, P = () => {
+      h();
     };
+    return _({ validate: h, focus: E }), (e, u) => (d(), k("div", null, [
+      S("div", ee, [
+        (d(!0), k(W, null, z(e.numInputs, (r, n) => (d(), C(X, {
+          key: n,
+          ref_for: !0,
+          ref_key: "boxRefs",
+          ref: v,
+          class: U(M.value),
+          focus: a.value === n,
+          "is-disabled": e.disabled,
+          value: s.value[n],
+          onOnChange: A,
+          onOnKeydown: K,
+          onOnKeyup: P,
+          onOnPaste: $,
+          onOnFocus: (x) => R(n),
+          onOnBlur: j
+        }, null, 8, ["class", "focus", "is-disabled", "value", "onOnFocus"]))), 128))
+      ]),
+      e.hideDetails ? H("", !0) : (d(), C(J, {
+        key: 0,
+        "error-message": G(g).errorMessage(),
+        class: "ds-mt-1"
+      }, null, 8, ["error-message"]))
+    ]));
   }
 });
 export {
-  Oe as default
+  re as default
 };
 //# sourceMappingURL=design-system17.mjs.map

package/dist/design-system17.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"design-system17.mjs","sources":["../src/components/BMultiSelect.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { createVNode as _createVNode, unref as _unref, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock, renderList as _renderList, Fragment as _Fragment, toDisplayString as _toDisplayString, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, withModifiers as _withModifiers, vShow as _vShow, withDirectives as _withDirectives } from \"vue\"\n\nconst _hoisted_1 = { class: \"ds-absolute ds-right-3 ds-z-[1]\" }\nconst _hoisted_2 = [\"onClick\"]\nconst _hoisted_3 = [\"id\", \"disabled\"]\nconst _hoisted_4 = [\"id\", \"data-cy\", \"data-ut\"]\nconst _hoisted_5 = { class: \"ds-max-h-72 ds-overflow-y-auto ds-rounded-lg ds-bg-white ds-shadow\" }\nconst _hoisted_6 = { class: \"ds-py-1 ds-text-sm ds-text-black/[0.85]\" }\nconst _hoisted_7 = [\"onClick\"]\n\nimport {\n  useValidationField,\n  type ValidationRule,\n} from '@/composables/Validation';\nimport {\n  ensureVisiblePosition,\n  ensureVisibleY,\n  lockScrollBody,\n  resetPosition,\n  unlockScrollBody,\n} from '@/helpers/ComponentHelper';\nimport { v4 as uuid } from 'uuid';\nimport {\n  computed,\n  nextTick,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  watch,\n} from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport BCheckbox from './BCheckbox.vue';\nimport BErrorMessage from './BErrorMessage.vue';\nimport BLabel from './BLabel.vue';\nimport BTextField from './BTextField.vue';\nimport type { DisplayItem } from '@/types';\n\n//#region Props\nexport interface BMultiSelectProps {\n  inputId?: string;\n  modelValue: Array<string | number>;\n  label?: string;\n  items: DisplayItem[];\n  disabled?: boolean;\n  placeholder?: string;\n  valueCssClass?: string;\n  menuCssClass?: string;\n  /**\n   * Array of custom validation rules.\n   */\n  validationRules?: ValidationRule[];\n  /**\n   * Validate if the field is left empty.\n   */\n  required?: boolean;\n  requiredErrorMessage?: string;\n  /**\n   * Hide the validation error message.\n   */\n  hideDetails?: boolean;\n  /**\n   * Show number of selected items.\n   */\n  showSelectedItemCount?: boolean;\n  /**\n   * Allow to type to search.\n   */\n  allowInput?: boolean;\n}\n\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BMultiSelect',\n  props: {\n    inputId: { default: '' },\n    modelValue: {},\n    label: { default: '' },\n    items: {},\n    disabled: { type: Boolean, default: false },\n    placeholder: { default: '' },\n    valueCssClass: { default: '' },\n    menuCssClass: { default: '' },\n    validationRules: { default: undefined },\n    required: { type: Boolean, default: false },\n    requiredErrorMessage: { default: '' },\n    hideDetails: { type: Boolean, default: false },\n    showSelectedItemCount: { type: Boolean, default: false },\n    allowInput: { type: Boolean, default: false }\n  },\n  emits: [\"change\", \"open\", \"close\", \"change:input\", \"update:modelValue\"],\n  setup(__props: any, { expose: __expose, emit: __emit }) {\n\n// https://vuejs.org/guide/essentials/event-handling.html#event-modifiers\nconst props = __props;\n//#endregion\n\n//#region Events\nconst emit = __emit;\n//#endregion\n\n//#region Data\nconst selectEl = ref<HTMLElement | null>(null);\nconst inputRef = ref<InstanceType<typeof BTextField> | null>(null);\nconst selectMenuEl = ref<HTMLElement | null>(null);\nconst selectMenu = ref(false);\nconst { t } = useI18n();\nconst validateRequired: ValidationRule = {\n  validateRule: (val: Array<string | number>) => !!val && val.length > 0,\n  errorMessage: () =>\n    props.requiredErrorMessage || t('ds.global.field_required'),\n};\nconst inputText = ref('');\nconst selectedItems = ref<DisplayItem[]>([]);\nconst id = computed(() => props.inputId || `id-${uuid()}`);\nconst value = computed({\n  get() {\n    return props.modelValue;\n  },\n  set(val) {\n    emit('update:modelValue', val);\n  },\n});\nconst btnCssClass = computed(() => {\n  let result = `ds-border ds-drop-shadow-light ds-text-sm ds-h-[40px] ds-px-3 ds-rounded-lg ds-block ds-w-full ds-inline-flex ds-items-center ds-justify-between `;\n  result += props.disabled\n    ? `ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4] `\n    : `ds-bg-white ds-text-black/[0.85] `;\n  result += !validationResult.value.valid\n    ? `ds-border-error focus:ds-ring-1 focus:ds-ring-error `\n    : `ds-border-black/10 focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus `;\n\n  return result;\n});\nconst vRules = computed(() => {\n  let result: ValidationRule[] = [];\n\n  if (props.required) {\n    result.push(validateRequired);\n  }\n  if (props.validationRules) {\n    result = result.concat(props.validationRules);\n  }\n\n  return result.length ? result : undefined;\n});\nconst selectedItemCount = computed(() =>\n  value.value?.length > 1\n    ? ` (${t('ds.components.base.multi_select.selected_item_count', {\n        count: value.value?.length,\n      })})`\n    : '',\n);\nconst labelDisplay = computed(() =>\n  props.showSelectedItemCount\n    ? `${props.label}${selectedItemCount.value}`\n    : props.label,\n);\nconst { validate, validationResult } = useValidationField(\n  id.value,\n  value,\n  vRules.value,\n);\n//#endregion\n\n//#region Watchers\nwatch(selectMenu, (val) => {\n  if (val) {\n    lockScrollBody();\n    ensureMenuPosition();\n    emit('open');\n  } else {\n    unlockScrollBody();\n    resetMenuPosition();\n    emit('close');\n  }\n});\nwatch(\n  value,\n  () => {\n    ensureSelectedItems();\n  },\n  {\n    deep: true,\n  },\n);\nwatch(\n  () => props.items,\n  () => {\n    if (value.value.length !== 0 && selectedItems.value.length === 0) {\n      ensureSelectedItems();\n    }\n  },\n  {\n    deep: true,\n  },\n);\n//#endregion\n\n//#region Methods\nconst ensureSelectedItems = () => {\n  selectedItems.value = value.value.map((v) => {\n    let item = selectedItems.value.find((i) => i.value === v);\n    if (!item) {\n      item = props.items.find((i) => i.value === v);\n    }\n    return { text: item?.text, value: v, cssClass: item?.cssClass };\n  });\n};\nconst initPressEscapeEventListener = () => {\n  document.addEventListener('keydown', closeOnEscapePressed);\n};\nconst closeOnEscapePressed = (event: KeyboardEvent) => {\n  if (event.key === 'Escape') {\n    closeSelectMenu();\n    resetFocusedIndex();\n  }\n};\nconst initClickOutsideEventListener = () => {\n  document.addEventListener('click', closeOnClickOutside);\n};\nconst closeOnClickOutside = (event: any) => {\n  const refs = [selectEl.value, selectMenuEl.value];\n  const withinBoundaries = refs.some((r) => event.composedPath().includes(r));\n  if (!withinBoundaries) {\n    closeSelectMenu();\n    resetFocusedIndex();\n  }\n};\nconst onClickItem = (item: DisplayItem) => {\n  const index = value.value.findIndex((v) => v === item.value);\n  if (index !== -1) {\n    value.value.splice(index, 1);\n  } else {\n    value.value.push(item.value);\n  }\n  emit('change', item.value);\n  nextTick(() => {\n    validate();\n  });\n\n  // Reset calculate the position of the menu\n  ensureVisibleY(selectEl.value!, selectMenuEl.value!);\n};\nconst ensureMenuWidth = (parentEl: HTMLElement, menuEl: HTMLElement) => {\n  menuEl.style.width = `${parentEl.offsetWidth}px`;\n};\nconst ensureMenuPosition = () => {\n  nextTick(() => {\n    ensureVisiblePosition(selectEl.value!, selectMenuEl.value!);\n    ensureMenuWidth(selectEl.value!, selectMenuEl.value!);\n  });\n};\nconst resetMenuPosition = () => {\n  resetPosition(selectEl.value!, selectMenuEl.value!);\n};\nconst onChangeInputText = (text: string) => {\n  emit('change:input', text);\n  resetFocusedIndex();\n};\nconst closeSelectMenu = () => {\n  selectMenu.value = false;\n  inputRef.value?.blur();\n  inputText.value = '';\n};\nconst deselectItem = (item: DisplayItem) => {\n  const index = value.value.findIndex((v) => v === item.value);\n  if (index !== -1) {\n    value.value.splice(index, 1);\n    emit('change', item.value);\n    nextTick(() => {\n      validate();\n    });\n  }\n};\nconst init = () => {\n  if (props.items?.length > 0) {\n    ensureSelectedItems();\n  }\n};\ninit();\n//#endregion\n\n//#region Lifecycle Hooks\nonMounted(() => {\n  initPressEscapeEventListener();\n  initClickOutsideEventListener();\n});\nonBeforeUnmount(() => {\n  document.removeEventListener('keydown', closeOnEscapePressed);\n  document.removeEventListener('click', closeOnClickOutside);\n  unlockScrollBody();\n  // Make sure dropdown menu unmounted with itself\n  resetMenuPosition();\n});\n//#endregion\n\n__expose({ validate, selectMenu });\n\nconst itemRefs = ref<HTMLLIElement[] | null>(null);\nconst focusedIndex = ref(-1);\nconst resetFocusedIndex = () => {\n  focusedIndex.value = -1;\n};\nconst onKeyDown = (event: KeyboardEvent) => {\n  if (event.key === 'ArrowDown') {\n    event.preventDefault();\n    if (focusedIndex.value < props.items.length - 1) {\n      focusedIndex.value++;\n      nextTick(() => {\n        if (itemRefs.value) {\n          itemRefs.value[focusedIndex.value]?.scrollIntoView({\n            block: 'nearest',\n          });\n        }\n      });\n    }\n  } else if (event.key === 'ArrowUp') {\n    event.preventDefault();\n    if (focusedIndex.value > 0) {\n      focusedIndex.value--;\n      nextTick(() => {\n        if (itemRefs.value) {\n          itemRefs.value[focusedIndex.value]?.scrollIntoView({\n            block: 'nearest',\n          });\n        }\n      });\n    } else {\n      // If at the top of the list, leave the list\n      focusedIndex.value = -1;\n    }\n  } else if (event.key === 'Enter' && focusedIndex.value >= 0) {\n    event.preventDefault();\n    onClickItem(props.items[focusedIndex.value]);\n  } else if (event.key === 'Tab') {\n    closeSelectMenu();\n  }\n};\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", null, [\n    _createElementVNode(\"div\", {\n      ref_key: \"selectEl\",\n      ref: selectEl\n    }, [\n      _createVNode(BLabel, {\n        id: id.value,\n        label: labelDisplay.value,\n        required: _ctx.required\n      }, null, 8, [\"id\", \"label\", \"required\"]),\n      (props.allowInput)\n        ? (_openBlock(), _createElementBlock(\"div\", {\n            key: 0,\n            class: _normalizeClass([{\n          'ds-border-focus ds-ring-1 ds-ring-focus':\n            selectMenu.value && _unref(validationResult).valid,\n          'ds-ring-1 ds-ring-error': selectMenu.value && !_unref(validationResult).valid,\n          'ds-border-black/10': _unref(validationResult).valid,\n          'ds-border-error': !_unref(validationResult).valid,\n        }, \"ds-relative ds-flex ds-flex-wrap ds-items-center ds-gap-x-1 ds-rounded-lg ds-border ds-bg-white ds-px-3 ds-py-1 ds-drop-shadow-light\"])\n          }, [\n            _createElementVNode(\"div\", _hoisted_1, [\n              (_openBlock(), _createElementBlock(\"svg\", {\n                class: _normalizeClass([[selectMenu.value ? 'ds-rotate-180' : ''], \"ds-h-4 ds-min-h-4 ds-w-4 ds-min-w-4 ds-transition-transform\"]),\n                viewBox: \"0 0 320 512\",\n                xmlns: \"http://www.w3.org/2000/svg\",\n                onClick: _cache[0] || (_cache[0] = ($event: any) => (inputRef.value?.focus()))\n              }, _cache[5] || (_cache[5] = [\n                _createElementVNode(\"path\", { d: \"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\" }, null, -1)\n              ]), 2))\n            ]),\n            (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(selectedItems.value, (item, i) => {\n              return (_openBlock(), _createElementBlock(\"div\", {\n                key: `item${i}`,\n                class: \"ds-my-0.5 ds-flex-initial ds-space-x-1 ds-rounded-lg ds-bg-black/10 ds-px-2\"\n              }, [\n                _createElementVNode(\"span\", null, _toDisplayString(item.text), 1),\n                (_openBlock(), _createElementBlock(\"svg\", {\n                  class: \"ds-mb-1 ds-inline ds-h-4 ds-w-4 ds-cursor-pointer ds-fill-black/60 hover:ds-fill-black/40\",\n                  viewBox: \"0 0 512 512\",\n                  xmlns: \"http://www.w3.org/2000/svg\",\n                  onClick: ($event: any) => (deselectItem(item))\n                }, _cache[6] || (_cache[6] = [\n                  _createElementVNode(\"path\", { d: \"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z\" }, null, -1)\n                ]), 8, _hoisted_2))\n              ]))\n            }), 128)),\n            (props.allowInput)\n              ? (_openBlock(), _createBlock(BTextField, {\n                  key: 0,\n                  id: id.value,\n                  ref_key: \"inputRef\",\n                  ref: inputRef,\n                  modelValue: inputText.value,\n                  \"onUpdate:modelValue\": [\n                    _cache[1] || (_cache[1] = ($event: any) => ((inputText).value = $event)),\n                    onChangeInputText\n                  ],\n                  disabled: props.disabled,\n                  class: \"ds-flex-auto\",\n                  \"hide-details\": \"\",\n                  \"input-css-class\": \"ds-drop-shadow-none ds-border-none !ds-ring-0 ds-px-0 !ds-h-[30px] ds-pl-0\",\n                  onChange: resetFocusedIndex,\n                  onFocus: _cache[2] || (_cache[2] = ($event: any) => (selectMenu.value = true)),\n                  onKeydown: onKeyDown\n                }, null, 8, [\"id\", \"modelValue\", \"disabled\"]))\n              : _createCommentVNode(\"\", true)\n          ], 2))\n        : (_openBlock(), _createElementBlock(\"button\", {\n            key: 1,\n            id: id.value,\n            class: _normalizeClass(btnCssClass.value),\n            disabled: _ctx.disabled,\n            type: \"button\",\n            onClick: _cache[3] || (_cache[3] = ($event: any) => (selectMenu.value = !selectMenu.value))\n          }, [\n            (selectedItems.value.length > 0)\n              ? (_openBlock(), _createElementBlock(\"span\", {\n                  key: 0,\n                  class: _normalizeClass([_ctx.valueCssClass, \"ds-truncate ds-text-sm\"])\n                }, _toDisplayString(selectedItems.value?.map((s) => s.text).join(', ')), 3))\n              : (_openBlock(), _createElementBlock(\"span\", {\n                  key: 1,\n                  class: _normalizeClass([_ctx.valueCssClass, \"ds-truncate ds-text-sm ds-text-black/[0.4]\"])\n                }, _toDisplayString(props.placeholder), 3)),\n            _cache[8] || (_cache[8] = _createTextVNode(\"   \")),\n            (_openBlock(), _createElementBlock(\"svg\", {\n              class: _normalizeClass([[selectMenu.value ? 'ds-rotate-180' : ''], \"ds-h-4 ds-min-h-4 ds-w-4 ds-min-w-4 ds-transition-transform\"]),\n              viewBox: \"0 0 320 512\",\n              xmlns: \"http://www.w3.org/2000/svg\"\n            }, _cache[7] || (_cache[7] = [\n              _createElementVNode(\"path\", { d: \"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\" }, null, -1)\n            ]), 2))\n          ], 10, _hoisted_3)),\n      _withDirectives(_createElementVNode(\"div\", {\n        id: `${id.value}Menu`,\n        ref_key: \"selectMenuEl\",\n        ref: selectMenuEl,\n        class: _normalizeClass([_ctx.menuCssClass, \"ds-absolute ds-z-50 ds-min-w-[8rem] ds-py-1\"]),\n        \"data-cy\": _ctx.$attrs['data-cy'] ? `${_ctx.$attrs['data-cy']}Menu` : undefined,\n        \"data-ut\": _ctx.$attrs['data-ut'] ? `${_ctx.$attrs['data-ut']}Menu` : undefined\n      }, [\n        _createElementVNode(\"div\", _hoisted_5, [\n          _createElementVNode(\"ul\", _hoisted_6, [\n            (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.items, (item, index) => {\n              return (_openBlock(), _createElementBlock(\"li\", {\n                key: `item${index}`,\n                ref_for: true,\n                ref_key: \"itemRefs\",\n                ref: itemRefs,\n                class: \"ds-cursor-pointer\",\n                onClick: _withModifiers(($event: any) => (onClickItem(item)), [\"prevent\"])\n              }, [\n                _createElementVNode(\"a\", {\n                  class: _normalizeClass([[\n                  item.cssClass,\n                  {\n                    'ds-bg-slate-100':\n                      focusedIndex.value !== index &&\n                      selectedItems.value.some((s) => s.value === item.value),\n                    'ds-bg-slate-300': focusedIndex.value === index,\n                  },\n                ], \"ds-flex ds-items-center ds-space-x-2 ds-px-4 ds-py-2 hover:ds-bg-slate-300\"])\n                }, [\n                  _createVNode(BCheckbox, {\n                    modelValue: value.value,\n                    \"onUpdate:modelValue\": _cache[4] || (_cache[4] = ($event: any) => ((value).value = $event)),\n                    value: item.value,\n                    size: \"sm\"\n                  }, null, 8, [\"modelValue\", \"value\"]),\n                  _createElementVNode(\"span\", null, _toDisplayString(item?.text), 1)\n                ], 2)\n              ], 8, _hoisted_7))\n            }), 128))\n          ])\n        ])\n      ], 10, _hoisted_4), [\n        [_vShow, selectMenu.value]\n      ])\n    ], 512),\n    (!_ctx.hideDetails)\n      ? (_openBlock(), _createBlock(BErrorMessage, {\n          key: 0,\n          \"error-message\": _unref(validationResult).errorMessage(),\n          class: \"ds-mt-1\"\n        }, null, 8, [\"error-message\"]))\n      : _createCommentVNode(\"\", true)\n  ]))\n}\n}\n\n})"],"names":["_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_sfc_main","_defineComponent","__props","__expose","__emit","props","emit","selectEl","ref","inputRef","selectMenuEl","selectMenu","t","useI18n","validateRequired","val","inputText","selectedItems","id","computed","uuid","value","btnCssClass","result","validationResult","vRules","selectedItemCount","_a","_b","labelDisplay","validate","useValidationField","watch","lockScrollBody","ensureMenuPosition","unlockScrollBody","resetMenuPosition","ensureSelectedItems","v","item","i","initPressEscapeEventListener","closeOnEscapePressed","event","closeSelectMenu","resetFocusedIndex","initClickOutsideEventListener","closeOnClickOutside","r","onClickItem","index","nextTick","ensureVisibleY","ensureMenuWidth","parentEl","menuEl","ensureVisiblePosition","resetPosition","onChangeInputText","text","deselectItem","onMounted","onBeforeUnmount","itemRefs","focusedIndex","onKeyDown","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","_createVNode","BLabel","_normalizeClass","_unref","$event","_Fragment","_renderList","_toDisplayString","_createBlock","BTextField","_createCommentVNode","s","_createTextVNode","_withDirectives","_withModifiers","BCheckbox","_vShow","BErrorMessage"],"mappings":"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"}
+{"version":3,"file":"design-system17.mjs","sources":["../src/components/BOtpField/BOtpField.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeClass as _normalizeClass, createBlock as _createBlock, createElementVNode as _createElementVNode, unref as _unref, createCommentVNode as _createCommentVNode } from \"vue\"\n\nconst _hoisted_1 = { class: \"ds-flex ds-items-center ds-justify-center ds-space-x-2\" }\n\nimport BErrorMessage from '@/components/BErrorMessage.vue';\nimport {\n  useValidationField,\n  type ValidationRule,\n} from '@/composables/Validation';\nimport { cloneDeep } from 'lodash-es';\nimport { v4 as uuid } from 'uuid';\nimport { computed, ref } from 'vue';\nimport { useI18n } from 'vue-i18n';\nimport BOtpFieldBox from './BOtpFieldBox.vue';\n\n//#region Props\nexport interface BOtpFieldProps {\n  inputId?: string;\n  modelValue: string;\n  /**\n   * Number of input boxes.\n   */\n  numInputs?: number;\n  /**\n   * Index of input box to be focused.\n   */\n  focusIndex?: number;\n  disabled?: boolean;\n  inputCssClass?: string | {};\n  /**\n   * Array of custom validation rules.\n   */\n  validationRules?: ValidationRule[];\n  /**\n   * Validate if the field is left empty.\n   */\n  required?: boolean;\n  requiredErrorMessage?: string;\n  /**\n   * Hide the validation error message.\n   */\n  hideDetails?: boolean;\n}\n\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BOtpField',\n  props: {\n    inputId: { default: '' },\n    modelValue: { default: '' },\n    numInputs: { default: 6 },\n    focusIndex: { default: undefined },\n    disabled: { type: Boolean, default: false },\n    inputCssClass: { default: '' },\n    validationRules: { default: undefined },\n    required: { type: Boolean, default: false },\n    requiredErrorMessage: { default: '' },\n    hideDetails: { type: Boolean, default: false }\n  },\n  emits: [\"complete\", \"change\", \"update:focusIndex\", \"update:modelValue\"],\n  setup(__props: any, { expose: __expose, emit: __emit }) {\n\n// Sourcecode: https://github.com/ejirocodes/vue3-otp-input\nconst props = __props;\n//#endregion\n\n//#region Events\nconst emit = __emit;\n//#endregion\n\n//#region Data\nconst { t } = useI18n();\nconst validateRequired: ValidationRule = {\n  validateRule: (val: string) => !!val,\n  errorMessage: () =>\n    props.requiredErrorMessage || t('ds.global.field_required'),\n};\nconst fIndex = ref(0);\nconst oldOtp = ref<any[]>([]);\nconst boxRefs = ref<Array<InstanceType<typeof BOtpFieldBox>> | null>(null);\nconst handleOnFocus = (index: number) => {\n  focusIndexValue.value = index;\n};\nconst handleOnBlur = () => {\n  focusIndexValue.value = -1;\n};\nconst id = computed(() => props.inputId || `id-${uuid()}`);\nconst value = computed<any[]>({\n  get() {\n    return props.modelValue.split('');\n  },\n  set(val: any) {\n    emit('update:modelValue', val.join(''));\n  },\n});\nconst originalValue = computed(() => props.modelValue);\nconst focusIndexValue = computed({\n  get() {\n    return props.focusIndex !== undefined ? props.focusIndex : fIndex.value;\n  },\n  set(val: number) {\n    if (props.focusIndex !== undefined) {\n      emit('update:focusIndex', val);\n    } else {\n      fIndex.value = val;\n    }\n  },\n});\nconst vRules = computed(() => {\n  let result: ValidationRule[] = [];\n\n  if (props.required) {\n    result.push(validateRequired);\n  }\n  if (props.validationRules) {\n    result = result.concat(props.validationRules);\n  }\n\n  return result.length ? result : undefined;\n});\nconst inputCssClassValue = computed(() => [\n  ...[\n    props.disabled\n      ? 'ds-cursor-not-allowed ds-bg-[#f2f2f2] ds-text-black/[0.4]'\n      : 'ds-text-black/[0.85]',\n    validationResult.value.valid\n      ? 'ds-border-black/[0.1] focus:ds-border-focus focus:ds-ring-1 focus:ds-ring-focus'\n      : 'ds-border-error focus:ds-ring-1 focus:ds-ring-error',\n  ],\n  props.inputCssClass,\n]);\n\nconst { validate, validationResult } = useValidationField(\n  id.value,\n  originalValue,\n  vRules.value,\n);\n//#endregion\n\n//#region Methods\nconst focus = () => {\n  boxRefs.value![focusIndexValue.value].focus();\n};\nconst checkFilledAllInputs = () => {\n  if (value.value.join('').length === props.numInputs) {\n    return emit('complete', value.value.join(''));\n  }\n  return 'Wait until the user enters the required number of characters';\n};\n// Focus on input by index\nconst focusInput = (input: number) => {\n  focusIndexValue.value = Math.max(Math.min(props.numInputs - 1, input), 0);\n};\n// Focus on next input\nconst focusNextInput = () => {\n  focusInput(focusIndexValue.value + 1);\n};\n// Focus on previous input\nconst focusPrevInput = () => {\n  focusInput(focusIndexValue.value - 1);\n};\n// Change OTP value at focused input\nconst changeCodeAtFocus = (val: number | string) => {\n  oldOtp.value = [...value.value];\n\n  value.value[focusIndexValue.value] = val;\n  value.value = cloneDeep(value.value);\n\n  const oldOtpStr = oldOtp.value.join('');\n  const otpStr = value.value.join('');\n  if (oldOtpStr !== otpStr) {\n    emit('change', otpStr);\n    checkFilledAllInputs();\n  }\n};\n// Handle pasted OTP\nconst handleOnPaste = (event: any) => {\n  event.preventDefault();\n  const pastedData = event.clipboardData\n    .getData('text/plain')\n    .slice(0, props.numInputs - focusIndexValue.value)\n    .split('');\n  if (!pastedData.join('').match(/^\\d+$/)) {\n    return 'Invalid pasted data';\n  }\n\n  // Paste data from focused input onwards\n  const currentCharsInOtp = value.value.slice(0, focusIndexValue.value);\n  const combinedWithPastedData = currentCharsInOtp.concat(pastedData);\n\n  combinedWithPastedData.slice(0, props.numInputs).forEach((val, i) => {\n    value.value[i] = val;\n  });\n\n  focusInput(combinedWithPastedData.slice(0, props.numInputs).length);\n\n  // Update modelValue when data is pasted from keyboard\n  emit('update:modelValue', value.value.join(''));\n  // Check if `complete`\n  return checkFilledAllInputs();\n};\nconst handleOnChange = (val: string) => {\n  changeCodeAtFocus(val);\n  focusNextInput();\n};\n// Handle cases of backspace, delete, left arrow, right arrow\nconst handleOnKeyDown = (event: KeyboardEvent) => {\n  switch (event.key) {\n    case 'Backspace':\n      event.preventDefault();\n      changeCodeAtFocus('');\n      focusPrevInput();\n      break;\n    case 'Delete':\n      event.preventDefault();\n      changeCodeAtFocus('');\n      break;\n    case 'ArrowLeft':\n      event.preventDefault();\n      focusPrevInput();\n      break;\n    case 'ArrowRight':\n      event.preventDefault();\n      focusNextInput();\n      break;\n    default:\n      break;\n  }\n};\nconst handleOnKeyUp = () => {\n  validate();\n};\n//#endregion\n\n__expose({ validate, focus });\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(\"div\", null, [\n    _createElementVNode(\"div\", _hoisted_1, [\n      (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.numInputs, (_, i) => {\n        return (_openBlock(), _createBlock(BOtpFieldBox, {\n          key: i,\n          ref_for: true,\n          ref_key: \"boxRefs\",\n          ref: boxRefs,\n          class: _normalizeClass(inputCssClassValue.value),\n          focus: focusIndexValue.value === i,\n          \"is-disabled\": _ctx.disabled,\n          value: value.value[i],\n          onOnChange: handleOnChange,\n          onOnKeydown: handleOnKeyDown,\n          onOnKeyup: handleOnKeyUp,\n          onOnPaste: handleOnPaste,\n          onOnFocus: ($event: any) => (handleOnFocus(i)),\n          onOnBlur: handleOnBlur\n        }, null, 8, [\"class\", \"focus\", \"is-disabled\", \"value\", \"onOnFocus\"]))\n      }), 128))\n    ]),\n    (!_ctx.hideDetails)\n      ? (_openBlock(), _createBlock(BErrorMessage, {\n          key: 0,\n          \"error-message\": _unref(validationResult).errorMessage(),\n          class: \"ds-mt-1\"\n        }, null, 8, [\"error-message\"]))\n      : _createCommentVNode(\"\", true)\n  ]))\n}\n}\n\n})"],"names":["_hoisted_1","_sfc_main","_defineComponent","__props","__expose","__emit","props","emit","t","useI18n","validateRequired","val","fIndex","ref","oldOtp","boxRefs","handleOnFocus","index","focusIndexValue","handleOnBlur","id","computed","uuid","value","originalValue","vRules","result","inputCssClassValue","validationResult","validate","useValidationField","focus","checkFilledAllInputs","focusInput","input","focusNextInput","focusPrevInput","changeCodeAtFocus","cloneDeep","oldOtpStr","otpStr","handleOnPaste","event","pastedData","combinedWithPastedData","i","handleOnChange","handleOnKeyDown","handleOnKeyUp","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_","_createBlock","BOtpFieldBox","_normalizeClass","$event","_createCommentVNode","BErrorMessage","_unref"],"mappings":"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"}