whelk-ui 0.0.7 → 0.0.9

package/dist/whelk-ui.js

@@ -1,5 +1,5 @@
-import { defineComponent as m, openBlock as a, createElementBlock as c, unref as r, renderSlot as d, createCommentVNode as s, toDisplayString as _ } from "vue";
-const o = {
+import { defineComponent as I, openBlock as s, createElementBlock as p, unref as R, renderSlot as k, createCommentVNode as _, toDisplayString as y, useModel as V, computed as b, withDirectives as S, createElementVNode as m, vModelCheckbox as B, mergeModels as $, ref as q, resolveComponent as F, Fragment as O, normalizeClass as A, withKeys as G, createVNode as x, createBlock as h, withCtx as N, createTextVNode as M, vModelText as D, renderList as K, resolveDynamicComponent as U, Transition as E, vShow as P } from "vue";
+const L = {
   Disable: "DISABLE",
   Error: "ERROR",
   Loading: "LOADING",
@@ -7,35 +7,703 @@ const o = {
   LoggingOut: "LOGGING_OUT",
   NoAction: "NO_ACTION",
   Saving: "SAVING"
-}, b = ["disabled"], l = { key: 1 }, g = /* @__PURE__ */ m({
+}, z = ["disabled"], H = { key: 1 }, X = /* @__PURE__ */ I({
   __name: "ButtonComponent",
   props: {
     objectState: {
       type: String,
-      default: o.NoAction,
+      default: L.NoAction,
       required: !1,
       validator: function(e) {
-        return Object.values(o).includes(e);
+        return Object.values(L).includes(e);
       }
     }
   },
   setup(e) {
-    return (t, n) => (a(), c("button", {
-      disabled: e.objectState !== r(o).NoAction
+    return (a, o) => (s(), p("button", {
+      disabled: e.objectState !== R(L).NoAction
     }, [
-      e.objectState === r(o).NoAction ? d(t.$slots, "default", { key: 0 }, void 0, !0) : s("", !0),
-      e.objectState !== r(o).NoAction ? (a(), c("span", l, _(e.objectState), 1)) : s("", !0)
-    ], 8, b));
+      e.objectState === R(L).NoAction ? k(a.$slots, "default", { key: 0 }, void 0, !0) : _("", !0),
+      e.objectState !== R(L).NoAction ? (s(), p("span", H, y(e.objectState), 1)) : _("", !0)
+    ], 8, z));
   }
-}), p = (e, t) => {
-  const n = e.__vccOpts || e;
-  for (const [i, u] of t)
-    n[i] = u;
-  return n;
-}, f = /* @__PURE__ */ p(g, [["__scopeId", "data-v-3de7a432"]]), O = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), g = (e, a) => {
+  const o = e.__vccOpts || e;
+  for (const [t, i] of a)
+    o[t] = i;
+  return o;
+}, J = /* @__PURE__ */ g(X, [["__scopeId", "data-v-3de7a432"]]), Q = {}, W = { class: "card" };
+function Y(e, a) {
+  return s(), p("div", W, [
+    k(e.$slots, "default", {}, void 0, !0)
+  ]);
+}
+const Z = /* @__PURE__ */ g(Q, [["render", Y], ["__scopeId", "data-v-025f3983"]]), ee = {}, te = { class: "card-footer" };
+function ae(e, a) {
+  return s(), p("div", te, [
+    k(e.$slots, "default", {}, void 0, !0)
+  ]);
+}
+const le = /* @__PURE__ */ g(ee, [["render", ae], ["__scopeId", "data-v-86222ad6"]]), oe = {}, ne = { class: "card-header" };
+function re(e, a) {
+  return s(), p("div", ne, [
+    k(e.$slots, "default", {}, void 0, !0)
+  ]);
+}
+const se = /* @__PURE__ */ g(oe, [["render", re], ["__scopeId", "data-v-9e7cf920"]]), ie = { class: "checkbox-component" }, ue = ["id", "name"], de = ["for"], ce = /* @__PURE__ */ I({
+  __name: "CheckBox",
+  props: /* @__PURE__ */ $({
+    id: {
+      type: String,
+      required: !0
+    },
+    label: {
+      type: String,
+      required: !0
+    }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const a = V(e, "modelValue"), o = e, t = b(() => `checkbox-${o.id}`);
+    return (i, l) => (s(), p("div", ie, [
+      S(m("input", {
+        id: t.value,
+        name: e.label,
+        "onUpdate:modelValue": l[0] || (l[0] = (n) => a.value = n),
+        type: "checkbox"
+      }, null, 8, ue), [
+        [B, a.value]
+      ]),
+      m("label", { for: t.value }, y(o.label), 9, de)
+    ]));
+  }
+}), me = /* @__PURE__ */ g(ce, [["__scopeId", "data-v-39385668"]]), pe = {}, fe = { class: "form-group" };
+function ve(e, a) {
+  return s(), p("div", fe, [
+    k(e.$slots, "default", {}, void 0, !0)
+  ]);
+}
+const T = /* @__PURE__ */ g(pe, [["render", ve], ["__scopeId", "data-v-142c8936"]]), ge = {}, _e = { class: "render-error-message" };
+function he(e, a) {
+  return s(), p("span", _e, [
+    k(e.$slots, "default", {}, void 0, !0)
+  ]);
+}
+const w = /* @__PURE__ */ g(ge, [["render", he], ["__scopeId", "data-v-e384ff35"]]), be = ["id"], ye = {
+  key: 0,
+  class: "tooltip-title"
+}, $e = { class: "tooltip-message" }, qe = ["data-tooltip-target"], Ie = /* @__PURE__ */ I({
+  __name: "ToolTip",
+  props: {
+    id: {
+      type: String,
+      required: !0
+    },
+    message: {
+      type: String,
+      required: !0
+    },
+    title: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(e) {
+    const a = e, o = b(() => `tooltip-${a.id}`), t = q("tooltip");
+    return (i, l) => {
+      const n = F("Info");
+      return s(), p(O, null, [
+        m("div", {
+          id: o.value,
+          class: A(t.value),
+          role: "tooltip"
+        }, [
+          a.title !== "" && a.title !== null && a.title !== void 0 ? (s(), p("p", ye, y(a.title), 1)) : _("", !0),
+          m("p", $e, y(a.message), 1)
+        ], 10, be),
+        m("span", {
+          "data-tooltip-target": o.value,
+          type: "tooltip",
+          onMouseenter: l[0] || (l[0] = (u) => t.value = "tooltip show"),
+          onMouseleave: l[1] || (l[1] = (u) => t.value = "tooltip"),
+          onFocus: l[2] || (l[2] = (u) => t.value = "tooltip show"),
+          onBlur: l[3] || (l[3] = (u) => t.value = "tooltip"),
+          onKeydown: l[4] || (l[4] = G((u) => t.value = "tooltip", ["esc"]))
+        }, [
+          x(n)
+        ], 40, qe)
+      ], 64);
+    };
+  }
+}), C = /* @__PURE__ */ g(Ie, [["__scopeId", "data-v-5121adbc"]]), xe = ["for"], Ne = {
+  key: 1,
+  "aria-description": "Field is required"
+}, ke = ["id", "name"], Ve = /* @__PURE__ */ I({
+  __name: "DatetimeComponent",
+  props: /* @__PURE__ */ $({
+    isRequired: {
+      type: Boolean,
+      default: !1
+    },
+    label: {
+      type: String,
+      required: !0
+    },
+    tooltipMessage: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    tooltipTitle: {
+      type: String,
+      required: !1,
+      default: ""
+    }
+  }, {
+    model: {
+      type: Date,
+      required: !1
+    },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ $(["isValid"], ["update:model"]),
+  setup(e, { emit: a }) {
+    const o = a, t = e, i = V(e, "model"), l = q(!1), n = q(""), u = b(() => "input-" + t.label?.toLowerCase()?.replace(" ", "-"));
+    function v() {
+      l.value = !1, n.value = "";
+      let r = Number(i?.value?.toString().length);
+      r = isNaN(r) ? 0 : r, t.isRequired && r === 0 && (l.value = !0, n.value = "This field is required"), o("isValid", !l.value);
+    }
+    return (r, c) => (s(), h(T, { class: "datetime-component" }, {
+      default: N(() => [
+        m("label", { for: u.value }, [
+          t.tooltipMessage !== "" ? (s(), h(C, {
+            key: 0,
+            title: e.tooltipTitle,
+            message: e.tooltipMessage,
+            id: u.value
+          }, null, 8, ["title", "message", "id"])) : _("", !0),
+          M(" " + y(e.label), 1),
+          e.isRequired ? (s(), p("span", Ne, "*")) : _("", !0)
+        ], 8, xe),
+        S(m("input", {
+          id: u.value,
+          type: "datetime-local",
+          name: t.label,
+          "onUpdate:modelValue": c[0] || (c[0] = (d) => i.value = d),
+          onKeyup: v,
+          onFocusout: v
+        }, null, 40, ke), [
+          [D, i.value]
+        ]),
+        x(w, { "error-message": n.value }, null, 8, ["error-message"])
+      ]),
+      _: 1
+    }));
+  }
+}), Se = /* @__PURE__ */ g(Ve, [["__scopeId", "data-v-905d8a98"]]), Me = { class: "drop-down-items" }, Te = ["onClick"], Ce = /* @__PURE__ */ I({
+  __name: "DropDownItem",
+  props: {
+    dropDownItems: {
+      type: Array,
+      required: !0
+    }
+  },
+  emits: ["dropDownItemClicked"],
+  setup(e, { emit: a }) {
+    const o = a;
+    function t(i) {
+      o("dropDownItemClicked", i);
+    }
+    return (i, l) => (s(), p("div", Me, [
+      (s(!0), p(O, null, K(e.dropDownItems, (n) => (s(), p("div", {
+        class: "drop-down-item",
+        onClick: (u) => t(n.trigger),
+        key: n.label
+      }, [
+        (s(), h(U(n.icon))),
+        M(" " + y(n.label), 1)
+      ], 8, Te))), 128))
+    ]));
+  }
+}), j = /* @__PURE__ */ g(Ce, [["__scopeId", "data-v-7a71b3ac"]]), we = { class: "drop-down" }, Le = /* @__PURE__ */ I({
+  __name: "DropDown",
+  props: {
+    dropDownItems: {
+      type: Array,
+      required: !0
+    }
+  },
+  emits: ["dropDownItemClicked"],
+  setup(e, { emit: a }) {
+    const o = a, t = q(!1);
+    function i() {
+      t.value = !t.value;
+    }
+    function l(n) {
+      o("dropDownItemClicked", n), t.value = !1;
+    }
+    return (n, u) => (s(), p("div", we, [
+      m("button", {
+        type: "button",
+        onClick: i
+      }, [
+        k(n.$slots, "default", {}, void 0, !0)
+      ]),
+      x(E, null, {
+        default: N(() => [
+          S(x(j, {
+            onDropDownItemClicked: l,
+            "drop-down-items": e.dropDownItems
+          }, null, 8, ["drop-down-items"]), [
+            [P, t.value]
+          ])
+        ]),
+        _: 1
+      }),
+      x(E, null, {
+        default: N(() => [
+          t.value ? (s(), p("div", {
+            key: 0,
+            onClick: i,
+            class: "drop-down-backdrop"
+          })) : _("", !0)
+        ]),
+        _: 1
+      })
+    ]));
+  }
+}), De = /* @__PURE__ */ g(Le, [["__scopeId", "data-v-539fd54a"]]), Re = ["for"], Ee = { class: "number-input-row" }, Oe = ["aria-label", "disabled"], Ae = ["aria-label", "disabled"], je = /* @__PURE__ */ I({
+  __name: "NumberInput",
+  props: /* @__PURE__ */ $({
+    label: {
+      type: String,
+      required: !0
+    },
+    maxValue: {
+      type: Number,
+      default: Number.MAX_SAFE_INTEGER
+    },
+    minValue: {
+      type: Number,
+      default: Number.MIN_SAFE_INTEGER
+    },
+    stepIncrement: {
+      type: Number,
+      default: 1
+    },
+    tooltipMessage: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    tooltipTitle: {
+      type: String,
+      required: !1,
+      default: ""
+    }
+  }, {
+    modelValue: {
+      type: Number,
+      default: 0
+    },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const a = e, o = V(e, "modelValue"), t = q(""), i = b(() => "input-" + a.label?.toLowerCase()?.replace(" ", "-")), l = b(() => o.value >= a.maxValue), n = b(() => o.value <= a.minValue);
+    function u() {
+      if (t.value = "", n.value) {
+        t.value = "Reached Lowest Value";
+        return;
+      }
+      let c = Math.abs(a.minValue - o.value);
+      c = c < Math.abs(a.stepIncrement) ? c : Math.abs(a.stepIncrement);
+      let d = o.value - c;
+      d = d > a.maxValue ? a.maxValue : d, o.value = d;
+    }
+    function v() {
+      if (t.value = "", l.value) {
+        t.value = "Reached Maxium Value";
+        return;
+      }
+      let c = Math.abs(a.maxValue - o.value);
+      c = c < Math.abs(a.stepIncrement) ? c : Math.abs(a.stepIncrement);
+      let d = o.value + c;
+      d = d < a.minValue ? a.minValue : d, o.value = d;
+    }
+    function r(c) {
+      t.value = "";
+      let f = c.target?.valueAsNumber;
+      f === void 0 && (t.value = "Model is undefined - default 0", f = 0), isNaN(f) && (t.value = "Not a number - default 0", f = 0), f = f > a.maxValue ? a.maxValue : f, f = f < a.minValue ? a.minValue : f, o.value = f;
+    }
+    return (c, d) => (s(), h(T, { class: "number-input" }, {
+      default: N(() => [
+        m("label", { for: i.value }, [
+          a.tooltipMessage !== "" ? (s(), h(C, {
+            key: 0,
+            title: e.tooltipTitle,
+            message: e.tooltipMessage,
+            id: i.value
+          }, null, 8, ["title", "message", "id"])) : _("", !0),
+          M(" " + y(e.label), 1)
+        ], 8, Re),
+        m("div", Ee, [
+          m("button", {
+            type: "button",
+            class: "negative",
+            "aria-label": `Decrement current value of ${o.value} by ${a.stepIncrement}`,
+            disabled: n.value,
+            onClick: u
+          }, " - ", 8, Oe),
+          S(m("input", {
+            type: "number",
+            "aria-label": "Current value picked",
+            "aria-describedby": "helper-text-explanation",
+            "onUpdate:modelValue": d[0] || (d[0] = (f) => o.value = f),
+            onChange: d[1] || (d[1] = (f) => r(f)),
+            onKeyup: d[2] || (d[2] = (f) => r(f))
+          }, null, 544), [
+            [D, o.value]
+          ]),
+          m("button", {
+            type: "button",
+            class: "positive",
+            "aria-label": `Increment current value of ${o.value} by ${a.stepIncrement}`,
+            disabled: l.value,
+            onClick: v
+          }, " + ", 8, Ae)
+        ]),
+        x(w, { "error-message": t.value }, null, 8, ["error-message"])
+      ]),
+      _: 1
+    }));
+  }
+}), Be = /* @__PURE__ */ g(je, [["__scopeId", "data-v-06558243"]]), Fe = ["for"], Ge = {
+  key: 1,
+  "aria-description": "Field is required"
+}, Ke = ["id", "name", "placeholder"], Ue = /* @__PURE__ */ I({
+  __name: "PasswordInput",
+  props: /* @__PURE__ */ $({
+    isRequired: {
+      type: Boolean,
+      default: !1
+    },
+    label: {
+      type: String,
+      required: !0
+    },
+    minLength: {
+      type: Number,
+      default: 0,
+      required: !1,
+      validator: (e) => !Number.isNaN(e)
+    },
+    placeholderText: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    tooltipMessage: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    tooltipTitle: {
+      type: String,
+      required: !1,
+      default: ""
+    }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ $(["isValid"], ["update:modelValue"]),
+  setup(e, { emit: a }) {
+    const o = a, t = e, i = V(e, "modelValue"), l = q(!1), n = q(""), u = b(() => "input-" + t.label?.toLowerCase()?.replace(" ", "-"));
+    function v() {
+      l.value = !1, n.value = "";
+      let r = Number(i?.value?.toString().length);
+      r = isNaN(r) ? 0 : r, t.isRequired && r === 0 && (l.value = !0, n.value = "This field is required"), t.minLength > 0 && r < t.minLength && (l.value = !0, n.value = `This field has a minimum length ${r} / ${t.minLength}`), o("isValid", !l.value);
+    }
+    return (r, c) => (s(), h(T, { class: "text-input" }, {
+      default: N(() => [
+        m("label", { for: u.value }, [
+          t.tooltipMessage !== "" ? (s(), h(C, {
+            key: 0,
+            title: e.tooltipTitle,
+            message: e.tooltipMessage,
+            id: u.value
+          }, null, 8, ["title", "message", "id"])) : _("", !0),
+          M(" " + y(e.label), 1),
+          e.isRequired ? (s(), p("span", Ge, "*")) : _("", !0)
+        ], 8, Fe),
+        S(m("input", {
+          id: u.value,
+          type: "password",
+          name: t.label,
+          placeholder: t.placeholderText,
+          "onUpdate:modelValue": c[0] || (c[0] = (d) => i.value = d),
+          onKeyup: v,
+          onFocusout: v
+        }, null, 40, Ke), [
+          [D, i.value]
+        ]),
+        x(w, { "error-message": n.value }, null, 8, ["error-message"])
+      ]),
+      _: 1
+    }));
+  }
+}), Pe = /* @__PURE__ */ g(Ue, [["__scopeId", "data-v-d179e9e2"]]), ze = ["for"], He = { class: "switch-text" }, Xe = /* @__PURE__ */ I({
+  __name: "SwitchComponent",
+  props: /* @__PURE__ */ $({
+    label: {
+      type: String,
+      required: !0
+    },
+    offText: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    onText: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    tooltipMessage: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    tooltipTitle: {
+      type: String,
+      required: !1,
+      default: ""
+    }
+  }, {
+    modelValue: {
+      type: Boolean
+    },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(e) {
+    const a = e, o = b(() => l.value ? "switch on" : "switch off"), t = b(() => "input-" + a.label?.toLowerCase()?.replace(" ", "-")), i = b(() => l.value ? a.onText : a.offText), l = V(e, "modelValue");
+    function n() {
+      l.value = !l.value;
+    }
+    return (u, v) => (s(), h(T, { class: "switch-component" }, {
+      default: N(() => [
+        m("label", { for: t.value }, [
+          a.tooltipMessage !== "" ? (s(), h(C, {
+            key: 0,
+            title: e.tooltipTitle,
+            message: e.tooltipMessage,
+            id: t.value
+          }, null, 8, ["title", "message", "id"])) : _("", !0),
+          M(" " + y(e.label), 1)
+        ], 8, ze),
+        m("div", {
+          onClick: n,
+          class: A(o.value)
+        }, [
+          m("div", He, y(i.value), 1),
+          v[0] || (v[0] = m("div", { class: "switch-block" }, null, -1))
+        ], 2)
+      ]),
+      _: 1
+    }));
+  }
+}), Je = /* @__PURE__ */ g(Xe, [["__scopeId", "data-v-f28e5f26"]]), Qe = ["for"], We = {
+  key: 1,
+  "aria-description": "Field is required"
+}, Ye = ["id", "name", "placeholder"], Ze = /* @__PURE__ */ I({
+  __name: "TextArea",
+  props: /* @__PURE__ */ $({
+    isRequired: {
+      type: Boolean,
+      default: !1
+    },
+    label: {
+      type: String,
+      required: !0
+    },
+    minLength: {
+      type: Number,
+      default: 0,
+      required: !1,
+      validator: (e) => !Number.isNaN(e)
+    },
+    maxLength: {
+      type: Number,
+      default: 0,
+      required: !1,
+      validator: (e) => !Number.isNaN(e)
+    },
+    placeholderText: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    tooltipMessage: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    tooltipTitle: {
+      type: String,
+      required: !1,
+      default: ""
+    }
+  }, {
+    model: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ $(["isValid"], ["update:model"]),
+  setup(e, { emit: a }) {
+    const o = a, t = e, i = V(e, "model"), l = q(!1), n = q(""), u = b(() => "input-" + t.label?.toLowerCase()?.replace(" ", "-"));
+    function v() {
+      l.value = !1, n.value = "";
+      let r = Number(i?.value?.toString().length);
+      r = isNaN(r) ? 0 : r, t.isRequired && r === 0 && (l.value = !0, n.value = "This field is required"), t.minLength > 0 && r < t.minLength && (l.value = !0, n.value = `This field has a minimum length ${r} / ${t.minLength}`), t.maxLength > 0 && r > t.maxLength && (l.value = !0, n.value = `This field has a maximum length ${r} / ${t.maxLength}`), o("isValid", !l.value);
+    }
+    return (r, c) => (s(), h(T, null, {
+      default: N(() => [
+        m("label", { for: u.value }, [
+          t.tooltipMessage !== "" ? (s(), h(C, {
+            key: 0,
+            title: e.tooltipTitle,
+            message: e.tooltipMessage,
+            id: u.value
+          }, null, 8, ["title", "message", "id"])) : _("", !0),
+          M(" " + y(e.label), 1),
+          e.isRequired ? (s(), p("span", We, "*")) : _("", !0)
+        ], 8, Qe),
+        S(m("textarea", {
+          rows: "10",
+          id: u.value,
+          type: "text",
+          name: t.label,
+          placeholder: t.placeholderText,
+          "onUpdate:modelValue": c[0] || (c[0] = (d) => i.value = d),
+          onKeyup: v,
+          onFocusout: v
+        }, null, 40, Ye), [
+          [D, i.value]
+        ]),
+        x(w, { "error-message": n.value }, null, 8, ["error-message"])
+      ]),
+      _: 1
+    }));
+  }
+}), et = /* @__PURE__ */ g(Ze, [["__scopeId", "data-v-88c9adeb"]]), tt = ["for"], at = {
+  key: 1,
+  "aria-description": "Field is required"
+}, lt = ["id", "name", "placeholder"], ot = /* @__PURE__ */ I({
+  __name: "TextInput",
+  props: /* @__PURE__ */ $({
+    isRequired: {
+      type: Boolean,
+      default: !1
+    },
+    label: {
+      type: String,
+      required: !0
+    },
+    minLength: {
+      type: Number,
+      default: 0,
+      required: !1,
+      validator: (e) => !Number.isNaN(e)
+    },
+    maxLength: {
+      type: Number,
+      default: 0,
+      required: !1,
+      validator: (e) => !Number.isNaN(e)
+    },
+    placeholderText: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    tooltipMessage: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    tooltipTitle: {
+      type: String,
+      required: !1,
+      default: ""
+    }
+  }, {
+    modelValue: { required: !0 },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ $(["isValid"], ["update:modelValue"]),
+  setup(e, { emit: a }) {
+    const o = a, t = e, i = V(e, "modelValue"), l = q(!1), n = q(""), u = b(() => "input-" + t.label?.toLowerCase()?.replace(" ", "-"));
+    function v() {
+      l.value = !1, n.value = "";
+      let r = Number(i?.value?.toString().length);
+      r = isNaN(r) ? 0 : r, t.isRequired && r === 0 && (l.value = !0, n.value = "This field is required"), t.minLength > 0 && r < t.minLength && (l.value = !0, n.value = `This field has a minimum length ${r} / ${t.minLength}`), t.maxLength > 0 && r > t.maxLength && (l.value = !0, n.value = `This field has a maximum length ${r} / ${t.maxLength}`), o("isValid", !l.value);
+    }
+    return (r, c) => (s(), h(T, { class: "text-input" }, {
+      default: N(() => [
+        m("label", { for: u.value }, [
+          t.tooltipMessage !== "" ? (s(), h(C, {
+            key: 0,
+            title: e.tooltipTitle,
+            message: e.tooltipMessage,
+            id: u.value
+          }, null, 8, ["title", "message", "id"])) : _("", !0),
+          M(" " + y(e.label), 1),
+          e.isRequired ? (s(), p("span", at, "*")) : _("", !0)
+        ], 8, tt),
+        S(m("input", {
+          id: u.value,
+          type: "text",
+          name: t.label,
+          placeholder: t.placeholderText,
+          "onUpdate:modelValue": c[0] || (c[0] = (d) => i.value = d),
+          onKeyup: v,
+          onFocusout: v
+        }, null, 40, lt), [
+          [D, i.value]
+        ]),
+        x(w, { "error-message": n.value }, null, 8, ["error-message"])
+      ]),
+      _: 1
+    }));
+  }
+}), nt = /* @__PURE__ */ g(ot, [["__scopeId", "data-v-354652ea"]]), rt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  ButtonComponent: f
-}, Symbol.toStringTag, { value: "Module" })), k = {
+  ButtonComponent: J,
+  CardComponent: Z,
+  CardFooter: le,
+  CardHeader: se,
+  CheckBox: me,
+  DatetimeComponent: Se,
+  DropDown: De,
+  DropDownItem: j,
+  FormGroup: T,
+  NumberInput: Be,
+  PasswordInput: Pe,
+  RenderErrorMessage: w,
+  SwitchComponent: Je,
+  TextArea: et,
+  TextInput: nt,
+  ToolTip: C
+}, Symbol.toStringTag, { value: "Module" })), it = {
   customer: "Customer",
   group: "Group",
   kanban_board: "Kanban Board",
@@ -47,7 +715,7 @@ const o = {
   project: "Project",
   task: "Task",
   user: "User"
-}, S = {
+}, ut = {
   customer: "customer",
   kanban_board: "kanban_board",
   kanban_card: "kanban_card",
@@ -57,17 +725,32 @@ const o = {
   requirement_item: "requirement_item",
   project: "project",
   task: "task"
-}, q = {
+}, dt = {
   install(e) {
-    Object.entries(O).forEach(([t, n]) => {
-      e.component(t, n);
+    Object.entries(rt).forEach(([a, o]) => {
+      e.component(a, o);
     });
   }
 };
 export {
-  f as ButtonComponent,
-  o as ObjectStateEnum,
-  k as ObjectTitleCaseEnums,
-  S as ObjectTypeEnums,
-  q as default
+  J as ButtonComponent,
+  Z as CardComponent,
+  le as CardFooter,
+  se as CardHeader,
+  me as CheckBox,
+  Se as DatetimeComponent,
+  De as DropDown,
+  j as DropDownItem,
+  T as FormGroup,
+  Be as NumberInput,
+  L as ObjectStateEnum,
+  it as ObjectTitleCaseEnums,
+  ut as ObjectTypeEnums,
+  Pe as PasswordInput,
+  w as RenderErrorMessage,
+  Je as SwitchComponent,
+  et as TextArea,
+  nt as TextInput,
+  C as ToolTip,
+  dt as default
 };