@3squared/forge-ui-3 2.21.4 → 2.21.6

package/dist/esm/forge-ui-3.js

@@ -1,15 +1,15 @@
 import $e from "primevue/message";
-import { defineComponent as z, createBlock as x, openBlock as d, normalizeProps as G, guardReactiveProps as Y, withCtx as f, renderSlot as F, createVNode as k, unref as c, createElementVNode as m, normalizeClass as P, createCommentVNode as T, ref as M, createElementBlock as b, Fragment as U, mergeProps as j, renderList as L, mergeModels as E, useModel as N, computed as _, withDirectives as K, createTextVNode as V, toDisplayString as $, vShow as X, createSlots as ie, onMounted as ne, withKeys as le, isRef as Fe, normalizeStyle as Se, withModifiers as Q, watch as W, h as Ce, useTemplateRef as Te } from "vue";
-import { Icon as I } from "@iconify/vue";
+import { defineComponent as z, createBlock as x, openBlock as d, normalizeProps as G, guardReactiveProps as Y, withCtx as g, renderSlot as F, createVNode as k, unref as c, createElementVNode as m, normalizeClass as P, createCommentVNode as T, ref as I, createElementBlock as b, Fragment as U, mergeProps as j, renderList as L, mergeModels as E, useModel as N, computed as _, withDirectives as K, createTextVNode as V, toDisplayString as $, vShow as X, createSlots as ie, onMounted as ne, withKeys as le, isRef as Fe, normalizeStyle as Se, withModifiers as Q, watch as W, h as Ce, useTemplateRef as Te } from "vue";
+import { Icon as M } from "@iconify/vue";
 import q from "primevue/button";
 import ze from "primevue/toast";
 import Pe from "primevue/autocomplete";
 import je from "primevue/checkbox";
 import { useField as se } from "vee-validate";
 import _e from "primevue/progressspinner";
-import Me from "primevue/dialog";
+import Ie from "primevue/dialog";
 import ae from "primevue/inputtext";
-import { vOnClickOutside as Ie } from "@vueuse/components";
+import { vOnClickOutside as Me } from "@vueuse/components";
 import Ve from "primevue/menubar";
 import de from "primevue/multiselect";
 import De from "primevue/datepicker";
@@ -191,7 +191,7 @@ const Qe = {
   select: {
     root: ({ props: e }) => ({
       class: [
-        "form-select d-flex cursor-pointer position-relative",
+        "form-select flex-1 d-flex cursor-pointer position-relative",
         {
           disabled: e.disabled
         }
@@ -577,7 +577,7 @@ const Qe = {
 }, ft = {
   // More PassThrough options defined in ForgeDatepicker.
   datepicker: {
-    root: "d-inline-flex relative w-100",
+    root: "d-flex flex-1 relative",
     pcInputText: "form-control",
     dropdown: "d-none",
     panel: ({ props: e }) => ({
@@ -757,8 +757,7 @@ const Qe = {
     mask: () => ({
       class: "table-overlay table-spinner"
     }),
-    rowGroupHeaderCell: "border",
-    rowGroupHeader: "border-top border-bottom",
+    rowGroupHeaderCell: "fw-600 bg-grey-300",
     rowToggleButton: "btn",
     pcPaginator: {
       //remove paginator if there are initially no values
@@ -1185,7 +1184,7 @@ const Qe = {
       ]
     })
   }
-}, Mt = {
+}, It = {
   accordionPanel: {
     root: "card my-2"
   },
@@ -1203,7 +1202,7 @@ const Qe = {
   accordionContent: {
     root: "mt-2 mx-4 mb-4"
   }
-}, It = {
+}, Mt = {
   // More PT options can be found in the ForgeTable file.
   treetable: {
     root: "position-relative",
@@ -1314,8 +1313,8 @@ const Qe = {
   ..._t,
   ...jt,
   ...Pt,
-  ...Mt,
   ...It,
+  ...Mt,
   ...Vt,
   ...Dt,
   directives: {
@@ -1343,11 +1342,11 @@ const Qe = {
     return (a, i) => {
       const o = $e;
       return d(), x(o, G(Y({ ...a.$attrs, ...t })), {
-        icon: f(() => [
+        icon: g(() => [
           m("div", {
             class: P(t.icon ? "me-2 pe-1" : "")
           }, [
-            t.icon ? (d(), x(c(I), {
+            t.icon ? (d(), x(c(M), {
               key: 0,
               "data-cy": "message-icon",
               icon: t.icon,
@@ -1356,10 +1355,10 @@ const Qe = {
             }, null, 8, ["icon", "class"])) : T("", !0)
           ], 2)
         ]),
-        closeicon: f(() => [
-          k(c(I), { icon: "bi:x" })
+        closeicon: g(() => [
+          k(c(M), { icon: "bi:x" })
         ]),
-        default: f(() => [
+        default: g(() => [
           F(a.$slots, "default")
         ]),
         _: 3
@@ -1375,7 +1374,7 @@ const Qe = {
     params: { default: Array }
   },
   setup(e) {
-    const t = M(!1), a = e, i = async () => {
+    const t = I(!1), a = e, i = async () => {
       t.value = !0;
       try {
         await a.action.apply(this, a.params);
@@ -1400,7 +1399,7 @@ const Qe = {
   __name: "ForgeAutoComplete",
   setup(e) {
     return (t, a) => (d(), x(c(Pe), j({ ...t.$attrs, ...t.$props }, { inputClass: "form-control border-0" }), {
-      default: f(() => [
+      default: g(() => [
         (d(!0), b(U, null, L(t.$slots, (i, o) => F(t.$slots, o, { slot: o })), 256))
       ]),
       _: 3
@@ -1557,7 +1556,7 @@ const Qe = {
       target: i.target
     }, [
       F(i.$slots, "default", {}, () => [
-        i.iconName ? (d(), x(c(I), {
+        i.iconName ? (d(), x(c(M), {
           key: 0,
           id: "link-icon",
           icon: i.iconName,
@@ -1654,7 +1653,7 @@ const Lt = {
   }),
   emits: ["update:visible", "update:error"],
   setup(e, { expose: t }) {
-    const a = N(e, "visible"), i = M(!1), o = e, l = M(!1), n = N(e, "error"), s = () => {
+    const a = N(e, "visible"), i = I(!1), o = e, l = I(!1), n = N(e, "error"), s = () => {
       n.value = {
         hasError: !1,
         header: "",
@@ -1674,11 +1673,11 @@ const Lt = {
       if (o.onConfirm) {
         l.value = !0, n.value.hasError = !1;
         try {
-          const g = await o.onConfirm();
-          (g || g == null) && h();
-        } catch (g) {
+          const v = await o.onConfirm();
+          (v || v == null) && h();
+        } catch (v) {
           n.value.hasError = !0;
-          const C = Ut(g);
+          const C = Ut(v);
           n.value.header = C.errorMessage, n.value.message = C.errorDetails;
         }
         l.value = !1;
@@ -1702,15 +1701,15 @@ const Lt = {
         }
       ]
     }));
-    return (g, C) => {
-      const S = q, A = Me;
+    return (v, C) => {
+      const S = q, A = Ie;
       return d(), x(A, j(o, {
         onMaximize: u,
         onUnmaximize: p,
         pt: w.value
       }), ie({
-        closeicon: f(() => [
-          k(c(I), {
+        closeicon: g(() => [
+          k(c(M), {
             "data-cy": "close-icon",
             icon: "bi:x-lg",
             width: "18",
@@ -1718,8 +1717,8 @@ const Lt = {
             onClick: h
           })
         ]),
-        maximizeicon: f(() => [
-          k(c(I), {
+        maximizeicon: g(() => [
+          k(c(M), {
             "data-cy": "maximisable-icon",
             icon: i.value ? "bi:arrows-angle-contract" : "bi:arrows-angle-expand",
             width: "16",
@@ -1728,9 +1727,9 @@ const Lt = {
         ]),
         _: 2
       }, [
-        L(g.$slots, (v, B) => ({
+        L(v.$slots, (f, B) => ({
           name: B,
-          fn: f((D) => [
+          fn: g((D) => [
             B == "default" ? (d(), b(U, { key: 0 }, [
               n.value.hasError ? (d(), b("div", Lt, [
                 k(re, {
@@ -1738,7 +1737,7 @@ const Lt = {
                   "data-cy": "error",
                   class: "mb-0"
                 }, {
-                  default: f(() => [
+                  default: g(() => [
                     m("p", {
                       class: P(n.value.message.length > 0 ? "my-auto" : "mb-0")
                     }, $(n.value.header), 3),
@@ -1750,18 +1749,18 @@ const Lt = {
                 })
               ])) : T("", !0)
             ], 64)) : T("", !0),
-            F(g.$slots, B, G(Y(D || {}))),
-            l.value ? F(g.$slots, "loader", { key: 1 }, () => [
+            F(v.$slots, B, G(Y(D || {}))),
+            l.value ? F(v.$slots, "loader", { key: 1 }, () => [
               k(pe, { "data-cy": "loader" })
             ]) : T("", !0)
           ])
         })),
-        g.showFooter ? {
+        v.showFooter ? {
           name: "footer",
-          fn: f(() => [
+          fn: g(() => [
             m("div", qt, [
               k(S, {
-                label: g.cancelText,
+                label: v.cancelText,
                 class: P(o.cancelClass),
                 outlined: "",
                 onClick: h,
@@ -1769,7 +1768,7 @@ const Lt = {
                 type: o.cancelButtonType
               }, null, 8, ["label", "class", "type"]),
               k(S, {
-                label: g.submitText,
+                label: v.submitText,
                 class: P([o.submitClass, "ms-auto"]),
                 onClick: r,
                 id: "submit-button",
@@ -1797,9 +1796,9 @@ const Lt = {
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, a = N(e, "modelValue"), i = M(!1), o = M(), l = () => {
-      var g;
-      i.value = !i.value, (g = o.value) == null || g.focus();
+    const t = e, a = N(e, "modelValue"), i = I(!1), o = I(), l = () => {
+      var v;
+      i.value = !i.value, (v = o.value) == null || v.focus();
     }, n = async () => {
       if (w.value)
         return !1;
@@ -1822,19 +1821,19 @@ const Lt = {
       r.value = a.value;
     });
     const w = _(() => h.value.length > 0);
-    return (g, C) => {
+    return (v, C) => {
       const S = ae, A = q;
       return d(), b("div", {
         id: t.name
       }, [
-        g.readonly ? (d(), b("div", Yt, [
-          F(g.$slots, "default", {}, () => [
+        v.readonly ? (d(), b("div", Yt, [
+          F(v.$slots, "default", {}, () => [
             m("span", Jt, $(c(r)), 1)
           ])
         ])) : (d(), b("div", Ht, [
           i.value ? (d(), b("div", Wt, [
             K((d(), b("div", Gt, [
-              F(g.$slots, "editor", {
+              F(v.$slots, "editor", {
                 class: P({ "is-invalid": w.value }),
                 editFinished: n,
                 cancel: s,
@@ -1842,7 +1841,7 @@ const Lt = {
               }, () => [
                 k(S, {
                   modelValue: c(r),
-                  "onUpdate:modelValue": C[0] || (C[0] = (v) => Fe(r) ? r.value = v : null),
+                  "onUpdate:modelValue": C[0] || (C[0] = (f) => Fe(r) ? r.value = f : null),
                   modelModifiers: { trim: !0 },
                   "data-cy": "input",
                   ref_key: "input",
@@ -1854,7 +1853,7 @@ const Lt = {
                   ]
                 }, null, 8, ["modelValue", "class"])
               ]),
-              k(c(I), {
+              k(c(M), {
                 icon: "bi:x-circle",
                 class: "mx-2 cursor-pointer",
                 onClick: p,
@@ -1862,7 +1861,7 @@ const Lt = {
                 "data-cy": "clear-icon"
               })
             ])), [
-              [c(Ie), n]
+              [c(Me), n]
             ])
           ])) : (d(), b("div", {
             key: 1,
@@ -1870,7 +1869,7 @@ const Lt = {
             onClick: l,
             onFocus: l
           }, [
-            F(g.$slots, "default", {}, () => [
+            F(v.$slots, "default", {}, () => [
               m("div", {
                 class: P(["pe-2 cursor-pointer", { "text-invalid": w.value }]),
                 "data-cy": "value"
@@ -1880,8 +1879,8 @@ const Lt = {
               link: "",
               class: "p-0 m-0"
             }, {
-              default: f(() => [
-                k(c(I), {
+              default: g(() => [
+                k(c(M), {
                   icon: "bi:pencil",
                   class: P(w.value ? "text-invalid" : "text-muted"),
                   "data-cy": "edit-icon",
@@ -1950,7 +1949,7 @@ const Lt = {
       pt: a.value,
       "data-cy": "navbar"
     }), ie({
-      start: f(() => [
+      start: g(() => [
         m("a", {
           href: i.logoUrl,
           class: "navbar-brand ms-3",
@@ -1961,9 +1960,9 @@ const Lt = {
           ])
         ], 8, Zt)
       ]),
-      buttonicon: f(() => [
+      buttonicon: g(() => [
         F(i.$slots, "buttonIcon", {}, () => [
-          k(c(I), {
+          k(c(M), {
             icon: "bi:list",
             class: P(t.severity === "light" ? "text-black" : "text-white"),
             height: "24",
@@ -1975,7 +1974,7 @@ const Lt = {
     }, [
       L(i.$slots, (l, n) => ({
         name: n,
-        fn: f((s) => [
+        fn: g((s) => [
           F(i.$slots, n, G(Y(s)))
         ])
       }))
@@ -2010,7 +2009,7 @@ const Lt = {
     return (o, l) => {
       const n = de, s = q;
       return d(), b("div", {
-        class: P(o.orientation === "column" ? "row" : ""),
+        class: P(o.orientation === "column" ? "row" : "flex-1"),
         "data-cy": "multiselect-preview"
       }, [
         m("div", {
@@ -2026,7 +2025,7 @@ const Lt = {
             placeholder: o.multiselectPlaceholder,
             "data-cy": "multiselect"
           }), {
-            default: f(() => [
+            default: g(() => [
               (d(!0), b(U, null, L(o.$slots, (p, u) => F(o.$slots, u, { slot: u })), 256))
             ]),
             _: 3
@@ -2056,8 +2055,8 @@ const Lt = {
                   class: "m-0 p-0 d-flex align-items-center",
                   onClick: (u) => i(p.id)
                 }, {
-                  default: f(() => [
-                    k(c(I), {
+                  default: g(() => [
+                    k(c(M), {
                       icon: "bi:x",
                       class: "close-icon",
                       "data-cy": `close-icon-${p.id}`
@@ -2093,7 +2092,7 @@ const Lt = {
       ])
     ]));
   }
-}), na = { class: "d-flex" }, sa = { "data-cy": "before-slot" }, ra = { class: "position-relative w-100" }, da = { "data-cy": "after-slot" }, xe = /* @__PURE__ */ z({
+}), na = { class: "d-flex flex-1" }, sa = { "data-cy": "before-slot" }, ra = { class: "position-relative d-flex flex-1" }, da = { "data-cy": "after-slot" }, xe = /* @__PURE__ */ z({
   __name: "ForgeDatepicker",
   props: /* @__PURE__ */ E({
     severity: { default: "primary" },
@@ -2173,7 +2172,7 @@ const Lt = {
     }), p = () => {
       s(null), a.value = null;
     }, u = _(() => i.value.length > 0), h = _(() => ({
-      day: ({ context: r, props: w, attrs: g }) => ({
+      day: ({ context: r, props: w, attrs: v }) => ({
         class: [
           "d-flex justify-content-center align-items-center",
           {
@@ -2193,14 +2192,14 @@ const Lt = {
           },
           // Severities
           {
-            "date-primary": g.severity === void 0 || g.severity === "primary",
-            "date-brand": g.severity === "brand",
-            "date-secondary": g.severity === "secondary",
-            "date-success": g.severity === "success",
-            "date-success-alternate": g.severity === "success-alternate",
-            "date-warning": g.severity === "warning",
-            "date-danger": g.severity === "danger",
-            "date-info": g.severity === "info"
+            "date-primary": v.severity === void 0 || v.severity === "primary",
+            "date-brand": v.severity === "brand",
+            "date-secondary": v.severity === "secondary",
+            "date-success": v.severity === "success",
+            "date-success-alternate": v.severity === "success-alternate",
+            "date-warning": v.severity === "warning",
+            "date-danger": v.severity === "danger",
+            "date-info": v.severity === "info"
           }
         ]
       }),
@@ -2278,14 +2277,14 @@ const Lt = {
       })
     }));
     return (r, w) => {
-      const g = De;
+      const v = De;
       return d(), b(U, null, [
         m("div", na, [
           m("span", sa, [
             F(r.$slots, "before")
           ]),
           m("div", ra, [
-            k(g, j({ ...t, ...r.$attrs }, {
+            k(v, j({ ...t, ...r.$attrs }, {
               pt: h.value,
               modelValue: a.value,
               "onUpdate:modelValue": [
@@ -2295,20 +2294,20 @@ const Lt = {
               onBlur: w[1] || (w[1] = () => c(n)),
               "input-class": { "text-truncate": !0, "datepicker-invalid": u.value, "pe-5": t.showIcon && t.modelValue, "pe-4": (t.showIcon || t.modelValue) && !(t.showIcon && t.modelValue) }
             }), null, 16, ["pt", "modelValue", "onUpdate:modelValue", "input-class"]),
-            K(k(c(I), {
+            K(k(c(M), {
               "data-cy": "icon",
               icon: "bi:calendar4",
               class: P(["position-absolute end-0 top-50 bottom-50 my-auto me-2 bg-white pe-none", `${u.value ? "text-danger-dark" : "text-muted"}`])
             }, null, 8, ["class"]), [
               [X, t.showIcon && !t.inline]
             ]),
-            K(k(c(I), {
+            K(k(c(M), {
               "data-cy": "icon",
               icon: "bi:x",
               onClick: p,
               class: P(["position-absolute end-0 top-50 bottom-50 my-auto text-muted cursor-pointer bg-white", t.showIcon ? "datepicker-close-icon" : "me-2"])
             }, null, 8, ["class"]), [
-              [X, t.modelValue && !t.inline]
+              [X, t.modelValue && !t.inline && !r.readonly]
             ])
           ]),
           m("span", da, [
@@ -2348,7 +2347,7 @@ const Lt = {
     hideCancel: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, a = M(!1), i = M({
+    const t = e, a = I(!1), i = I({
       hasError: !1,
       message: ""
     });
@@ -2382,7 +2381,7 @@ const Lt = {
           severity: "danger",
           "data-cy": "error"
         }, {
-          default: f(() => [
+          default: g(() => [
             F(l.$slots, "error", {
               error: i.value.message
             }, () => [
@@ -2402,7 +2401,7 @@ const Lt = {
               outlined: "",
               onClick: n[0] || (n[0] = (p) => l.$emit("cancel"))
             }, {
-              default: f(() => [
+              default: g(() => [
                 V($(l.cancelText), 1)
               ]),
               _: 1
@@ -2415,7 +2414,7 @@ const Lt = {
               severity: "primary",
               class: "ms-auto"
             }, {
-              default: f(() => [
+              default: g(() => [
                 V($(l.submitText), 1)
               ]),
               _: 1
@@ -2460,7 +2459,7 @@ const Lt = {
     return W(() => l.value, (h) => {
       t.value = h;
     }, { immediate: !0 }), (h, r) => {
-      const w = Ae, g = Oe, C = ae, S = oe, A = de, v = xe;
+      const w = Ae, v = Oe, C = ae, S = oe, A = de, f = xe;
       return a.type === "checkbox" ? (d(), x(ye, j({
         key: 0,
         id: a.name,
@@ -2486,9 +2485,9 @@ const Lt = {
               key: 0,
               id: a.name
             }, h.$attrs, {
+              class: ["flex-1", { "is-invalid": u.value }],
               placeholder: a.placeholder,
               "input-class": { "is-invalid": u.value },
-              class: { "is-invalid": u.value },
               onInput: i,
               modelValue: t.value,
               "onUpdate:modelValue": r[1] || (r[1] = (B) => t.value = B)
@@ -2496,19 +2495,19 @@ const Lt = {
               key: 1,
               id: a.name
             }, h.$attrs, {
+              class: ["flex-1", { "is-invalid": u.value }],
               placeholder: a.placeholder,
-              class: { "is-invalid": u.value },
               modelValue: t.value,
               "onUpdate:modelValue": r[2] || (r[2] = (B) => t.value = B),
               onInput: i,
               onBlur: c(p)
-            }), null, 16, ["id", "placeholder", "class", "modelValue", "onBlur"])) : a.type === "mask" ? (d(), x(g, j({
+            }), null, 16, ["id", "placeholder", "class", "modelValue", "onBlur"])) : a.type === "mask" ? (d(), x(v, j({
               key: 2,
               id: a.name
             }, h.$attrs, {
+              class: ["flex-1", { "is-invalid": u.value }],
               placeholder: a.placeholder,
               mask: a.mask,
-              class: { "is-invalid": u.value },
               modelValue: t.value,
               "onUpdate:modelValue": r[3] || (r[3] = (B) => t.value = B),
               onComplete: i,
@@ -2517,8 +2516,8 @@ const Lt = {
               key: 3,
               id: a.name
             }, h.$attrs, {
+              class: ["flex-1", { "is-invalid": u.value }],
               placeholder: a.placeholder,
-              class: { "is-invalid": u.value },
               modelValue: t.value,
               "onUpdate:modelValue": r[4] || (r[4] = (B) => t.value = B),
               onInput: i,
@@ -2535,7 +2534,7 @@ const Lt = {
               modelValue: t.value,
               "onUpdate:modelValue": r[7] || (r[7] = (B) => t.value = B),
               class: { "is-invalid": u.value }
-            }), null, 16, ["modelValue", "class"])) : a.type === "datepicker" ? (d(), x(v, j({ key: 7 }, { ...a, ...h.$attrs }, {
+            }), null, 16, ["modelValue", "class"])) : a.type === "datepicker" ? (d(), x(f, j({ key: 7 }, { ...a, ...h.$attrs }, {
               modelValue: t.value,
               "onUpdate:modelValue": r[8] || (r[8] = (B) => t.value = B),
               class: { "is-invalid": u.value }
@@ -2588,7 +2587,7 @@ const Lt = {
     return (i, o) => {
       const l = Ne;
       return d(), x(l, j({ ...i.$attrs, ...i.$props }, { pt: a.value }), {
-        default: f(() => [
+        default: g(() => [
           (d(!0), b(U, null, L(i.$slots, (n, s) => F(i.$slots, s, { slot: s })), 256))
         ]),
         _: 3
@@ -2643,7 +2642,7 @@ const Lt = {
     return (n, s) => {
       const p = Ue;
       return d(), x(p, j({ ...n.$attrs, ...t }, { pt: l.value }), {
-        default: f(() => [
+        default: g(() => [
           F(n.$slots, "default")
         ]),
         _: 3
@@ -2967,7 +2966,7 @@ var va = /* @__PURE__ */ z({
       var p = t.split(n).filter((S) => S.length > 0);
       for (let S = 0; S < p.length; S++) {
         for (var u = p[S].split(s).filter((A) => A.length > 0), h = "", r = 0; r < u.length; r++) {
-          var w = h + u[r] + " ", g = e.measureText(w), C = g.width;
+          var w = h + u[r] + " ", v = e.measureText(w), C = v.width;
           C > o && r > 0 ? (this.watermark && this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === "stroke" ? e.strokeText(h, a, i) : e.fillText(h, a, i), h = u[r] + " ", i += l) : h = w;
         }
         this.watermark && this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === "stroke" ? e.strokeText(h, a, i) : e.fillText(h, a, i), i += u.length > 0 ? l : 0;
@@ -3054,7 +3053,7 @@ const fa = { class: "d-flex flex-column" }, ga = { class: "d-flex flex-row mt-1
   },
   emits: ["save"],
   setup(e, { emit: t }) {
-    const a = e, i = t, o = Te("drawingCanvas"), l = M(), n = () => {
+    const a = e, i = t, o = Te("drawingCanvas"), l = I(), n = () => {
       o == null || o.value.reset();
     }, s = () => {
       o == null || o.value.redo();
@@ -3070,7 +3069,7 @@ const fa = { class: "d-flex flex-column" }, ga = { class: "d-flex flex-row mt-1
           ref_key: "drawingCanvas",
           ref: o,
           image: l.value,
-          "onUpdate:image": r[0] || (r[0] = (g) => l.value = g),
+          "onUpdate:image": r[0] || (r[0] = (v) => l.value = v),
           "data-cy": "drawing-canvas",
           class: "border canvas"
         }, { ...h.$attrs }, {
@@ -3086,7 +3085,7 @@ const fa = { class: "d-flex flex-column" }, ga = { class: "d-flex flex-row mt-1
             outlined: "",
             "data-cy": "undo-button"
           }, {
-            default: f(() => r[1] || (r[1] = [
+            default: g(() => r[1] || (r[1] = [
               V("Undo")
             ])),
             _: 1,
@@ -3098,7 +3097,7 @@ const fa = { class: "d-flex flex-column" }, ga = { class: "d-flex flex-row mt-1
             outlined: "",
             "data-cy": "redo-button"
           }, {
-            default: f(() => r[2] || (r[2] = [
+            default: g(() => r[2] || (r[2] = [
               V("Redo")
             ])),
             _: 1,
@@ -3110,7 +3109,7 @@ const fa = { class: "d-flex flex-column" }, ga = { class: "d-flex flex-row mt-1
             outlined: "",
             "data-cy": "clear-button"
           }, {
-            default: f(() => r[3] || (r[3] = [
+            default: g(() => r[3] || (r[3] = [
               V("Clear")
             ])),
             _: 1,
@@ -3122,7 +3121,7 @@ const fa = { class: "d-flex flex-column" }, ga = { class: "d-flex flex-row mt-1
             class: "ms-auto",
             "data-cy": "save-button"
           }, {
-            default: f(() => r[4] || (r[4] = [
+            default: g(() => r[4] || (r[4] = [
               V("Save")
             ])),
             _: 1,
@@ -3196,15 +3195,15 @@ const fa = { class: "d-flex flex-column" }, ga = { class: "d-flex flex-row mt-1
       })
     }));
     return (i, o) => (d(), x(c(Ee), { value: i.currentStep }, {
-      default: f(() => [
+      default: g(() => [
         k(c(qe), null, {
-          default: f(() => [
+          default: g(() => [
             (d(!0), b(U, null, L(i.steps, (l) => (d(), x(c(Le), j({
               key: l.value,
               value: l.value,
               disabled: l.disabled
             }, { ref_for: !0 }, { ...i.$attrs }, { pt: a.value }), {
-              default: f(() => [
+              default: g(() => [
                 i.showStepLabel ? (d(), b("div", ya, $(l.label), 1)) : T("", !0)
               ]),
               _: 2
@@ -3213,12 +3212,12 @@ const fa = { class: "d-flex flex-column" }, ga = { class: "d-flex flex-row mt-1
           _: 1
         }),
         k(c(He), null, {
-          default: f(() => [
+          default: g(() => [
             (d(!0), b(U, null, L(i.steps, (l) => (d(), x(c(Re), {
               key: l.value,
               value: l.value
             }, {
-              default: f(() => [
+              default: g(() => [
                 F(i.$slots, "step" + l.value)
               ]),
               _: 2
@@ -3249,7 +3248,7 @@ const fa = { class: "d-flex flex-column" }, ga = { class: "d-flex flex-row mt-1
         unstyled: "",
         "data-cy": "button-tile"
       }, {
-        default: f(() => [
+        default: g(() => [
           m("div", xa, [
             F(o.$slots, "default", {}, () => [
               l[0] || (l[0] = V("Tile Content"))
@@ -3402,7 +3401,7 @@ const wa = {
   },
   emits: ["update:filters", "update:tableContext", "sort", "page"],
   setup(e, { emit: t }) {
-    const a = t, i = e, o = M(), l = M([5, 10, 20, 50, 100]), n = M(i.perPage ?? 10), s = M({
+    const a = t, i = e, o = I(), l = I([5, 10, 20, 50, 100]), n = I(i.perPage ?? 10), s = I({
       filters: i.filters,
       perPage: n.value,
       page: 0,
@@ -3410,12 +3409,12 @@ const wa = {
       sortField: "",
       total: i.totalRecords ?? i.value.length
     });
-    W(() => i.perPage, (v) => {
-      v && (n.value = v, s.value.perPage = v);
+    W(() => i.perPage, (f) => {
+      f && (n.value = f, s.value.perPage = f);
     });
     const p = _(() => i.totalRecords ?? i.value.length), u = _(() => {
-      const v = Math.ceil(p.value / n.value);
-      return `${v} ${ee(v, "page")}`;
+      const f = Math.ceil(p.value / n.value);
+      return `${f} ${ee(f, "page")}`;
     }), h = _(() => ({
       thead: () => ({
         class: [
@@ -3443,30 +3442,30 @@ const wa = {
       if (i.clearAll)
         i.clearAll();
       else
-        for (const v in i.filters)
-          typeof i.filters[v] == "string" ? i.filters[v] = "" : i.filters[v].value = null;
+        for (const f in i.filters)
+          typeof i.filters[f] == "string" ? i.filters[f] = "" : i.filters[f].value = null;
       C(i.filters);
     }, w = () => {
       o.value.exportCSV();
-    }, g = (v) => {
+    }, v = (f) => {
       var B;
-      s.value.sortDirection = v.sortOrder === 1 ? "Asc" : v.sortOrder === -1 ? "Desc" : "None", s.value.sortField = ((B = v.sortField) == null ? void 0 : B.toString()) ?? "", a("update:tableContext", s.value), a("sort", v);
-    }, C = (v) => {
-      s.value.filters = v, a("update:tableContext", s.value), a("update:filters", v);
-    }, S = (v) => {
-      s.value.page = v.page, a("update:tableContext", s.value), a("page", v);
+      s.value.sortDirection = f.sortOrder === 1 ? "Asc" : f.sortOrder === -1 ? "Desc" : "None", s.value.sortField = ((B = f.sortField) == null ? void 0 : B.toString()) ?? "", a("update:tableContext", s.value), a("sort", f);
+    }, C = (f) => {
+      s.value.filters = f, a("update:tableContext", s.value), a("update:filters", f);
+    }, S = (f) => {
+      s.value.page = f.page, a("update:tableContext", s.value), a("page", f);
     }, A = () => {
       s.value.perPage = n.value, a("update:tableContext", s.value);
     };
-    return W(() => i.filters, (v) => {
-      s.value.filters = v, a("update:tableContext", s.value);
-    }, { deep: !0 }), ne(() => a("update:tableContext", s.value)), (v, B) => (d(), b("div", Fa, [
+    return W(() => i.filters, (f) => {
+      s.value.filters = f, a("update:tableContext", s.value);
+    }, { deep: !0 }), ne(() => a("update:tableContext", s.value)), (f, B) => (d(), b("div", Fa, [
       m("span", Sa, [
-        F(v.$slots, "above-table")
+        F(f.$slots, "above-table")
       ]),
       k(c(We), j({
         class: ["w-100", `${i.severity ? `forge-table-${i.severity}` : ""}`]
-      }, { ...i, ...v.$attrs }, {
+      }, { ...i, ...f.$attrs }, {
         pt: h.value,
         rows: n.value,
         "total-records": p.value,
@@ -3475,22 +3474,22 @@ const wa = {
         ref: o,
         "data-cy": "table",
         "onUpdate:filters": C,
-        onSort: g,
+        onSort: v,
         onPage: S,
         showHeaders: ""
       }), ie({
-        empty: f(() => [
+        empty: g(() => [
           m("div", Ca, [
-            m("h5", Ta, $(v.emptyMessage ?? "No items Found."), 1)
+            m("h5", Ta, $(f.emptyMessage ?? "No items Found."), 1)
           ])
         ]),
-        header: f(() => [
+        header: g(() => [
           m("div", {
             class: P(i.loading ? "opacity-50" : "")
           }, [
             m("div", za, [
               m("div", Pa, [
-                v.paginator && !v.legacyPaginationFooter ? (d(), b("span", ja, [
+                f.paginator && !f.legacyPaginationFooter ? (d(), b("span", ja, [
                   k(he, {
                     total: p.value,
                     "page-sizes": l.value,
@@ -3503,15 +3502,15 @@ const wa = {
                 ])) : T("", !0)
               ]),
               m("div", _a, [
-                v.showClearButton ? (d(), x(c(q), {
+                f.showClearButton ? (d(), x(c(q), {
                   key: 0,
                   outlined: "",
-                  class: P(v.showExporterButton ? "me-2" : ""),
+                  class: P(f.showExporterButton ? "me-2" : ""),
                   onClick: r,
                   "data-cy": "clear-all"
                 }, {
-                  default: f(() => [
-                    k(c(I), {
+                  default: g(() => [
+                    k(c(M), {
                       icon: "bi:funnel-fill",
                       width: "24",
                       height: "24"
@@ -3521,14 +3520,14 @@ const wa = {
                   _: 1,
                   __: [2]
                 }, 8, ["class"])) : T("", !0),
-                v.showExporterButton ? (d(), x(c(q), {
+                f.showExporterButton ? (d(), x(c(q), {
                   key: 1,
                   outlined: "",
                   onClick: w,
                   "data-cy": "exporter"
                 }, {
-                  default: f(() => [
-                    k(c(I), {
+                  default: g(() => [
+                    k(c(M), {
                       icon: "typcn:export",
                       width: "24",
                       height: "24"
@@ -3538,25 +3537,25 @@ const wa = {
                   _: 1,
                   __: [3]
                 })) : T("", !0),
-                F(v.$slots, "column-customiser")
+                F(f.$slots, "column-customiser")
               ])
             ])
           ], 2)
         ]),
-        default: f(() => [
-          F(v.$slots, "default")
+        default: g(() => [
+          F(f.$slots, "default")
         ]),
         _: 2
       }, [
-        L(v.$slots, (D, y) => ({
+        L(f.$slots, (D, y) => ({
           name: y,
-          fn: f((O) => [
-            F(v.$slots, y, G(Y(O || {})))
+          fn: g((O) => [
+            F(f.$slots, y, G(Y(O || {})))
           ])
         })),
-        v.legacyPaginationFooter ? {
+        f.legacyPaginationFooter ? {
           name: "paginatorstart",
-          fn: f(() => [
+          fn: g(() => [
             m("span", {
               class: P(["d-flex", i.loading ? "opacity-50" : ""]),
               "data-cy": "legacy-page-size"
@@ -3573,9 +3572,9 @@ const wa = {
           ]),
           key: "0"
         } : void 0,
-        v.legacyPaginationFooter ? {
+        f.legacyPaginationFooter ? {
           name: "paginatorend",
-          fn: f(() => [
+          fn: g(() => [
             m("span", {
               "data-cy": "legacy-total",
               class: P(i.loading ? "opacity-50" : "")
@@ -3586,7 +3585,7 @@ const wa = {
       ]), 1040, ["class", "pt", "rows", "total-records", "filter-display"])
     ]));
   }
-}), Ma = { class: "position-relative" }, Ia = { "data-cy": "above-table-slot" }, Va = { class: "d-flex w-100" }, Da = {
+}), Ia = { class: "position-relative" }, Ma = { "data-cy": "above-table-slot" }, Va = { class: "d-flex w-100" }, Da = {
   class: "mx-auto",
   "data-cy": "empty-message"
 }, Oa = { class: "d-flex" }, Aa = { class: "d-flex align-items-end mb-2" }, Na = { key: 0 }, Ua = { class: "ms-auto" }, Fo = /* @__PURE__ */ z({
@@ -3650,7 +3649,7 @@ const wa = {
   },
   emits: ["update:filters", "update:tableContext", "sort", "page"],
   setup(e, { emit: t }) {
-    const a = e, i = t, o = M([5, 10, 20, 50, 100]), l = M(10), n = M(0), s = M(0), p = M({
+    const a = e, i = t, o = I([5, 10, 20, 50, 100]), l = I(10), n = I(0), s = I(0), p = I({
       filters: a.filters,
       perPage: l.value,
       page: 0,
@@ -3696,7 +3695,7 @@ const wa = {
       ]
     }));
     W(() => a.parentExpanderFullRow, (y) => {
-      y ? w() : g();
+      y ? w() : v();
     });
     const w = () => {
       a.parentExpanderFullRow && setTimeout(
@@ -3714,7 +3713,7 @@ const wa = {
         },
         0
       );
-    }, g = () => {
+    }, v = () => {
       setTimeout(
         () => {
           const y = Array.from(
@@ -3742,7 +3741,7 @@ const wa = {
       p.value.sortDirection = y.sortOrder === 1 ? "Asc" : y.sortOrder === -1 ? "Desc" : "None", p.value.sortField = ((O = y.sortField) == null ? void 0 : O.toString()) ?? "", i("update:tableContext", p.value), i("sort", y), w();
     }, A = (y) => {
       p.value.filters = y, i("update:tableContext", p.value), i("update:filters", y), w();
-    }, v = (y) => {
+    }, f = (y) => {
       p.value.page = s.value = y.page, D(), i("update:tableContext", p.value), i("page", y), w();
     }, B = () => {
       p.value.perPage = l.value, s.value = 0, p.value.page = s.value = Math.floor(n.value / l.value), D(), i("update:tableContext", p.value), w();
@@ -3757,8 +3756,8 @@ const wa = {
     const D = () => {
       n.value = s.value * l.value;
     };
-    return (y, O) => (d(), b("div", Ma, [
-      m("span", Ia, [
+    return (y, O) => (d(), b("div", Ia, [
+      m("span", Ma, [
         F(y.$slots, "above-table")
       ]),
       k(c(Ge), j({
@@ -3770,17 +3769,17 @@ const wa = {
         "data-cy": "tree-table",
         "onUpdate:filters": A,
         onSort: S,
-        onPage: v,
+        onPage: f,
         onNodeExpand: O[2] || (O[2] = () => w()),
         showHeaders: "",
         first: n.value
       }), ie({
-        empty: f(() => [
+        empty: g(() => [
           m("div", Va, [
             m("h5", Da, $(y.emptyMessage ?? "No items Found."), 1)
           ])
         ]),
-        header: f(() => [
+        header: g(() => [
           m("div", {
             class: P(a.loading ? "opacity-50" : "")
           }, [
@@ -3805,8 +3804,8 @@ const wa = {
                   onClick: C,
                   "data-cy": "clear-all"
                 }, {
-                  default: f(() => [
-                    k(c(I), {
+                  default: g(() => [
+                    k(c(M), {
                       icon: "bi:funnel-fill",
                       width: "24",
                       height: "24"
@@ -3821,20 +3820,20 @@ const wa = {
             ])
           ], 2)
         ]),
-        default: f(() => [
+        default: g(() => [
           F(y.$slots, "default")
         ]),
         _: 2
       }, [
         L(y.$slots, (R, ve) => ({
           name: ve,
-          fn: f((Be) => [
+          fn: g((Be) => [
             F(y.$slots, ve, G(Y(Be || {})))
           ])
         })),
         y.legacyPaginationFooter ? {
           name: "paginatorstart",
-          fn: f(() => [
+          fn: g(() => [
             m("span", {
               class: P(["d-flex", a.loading ? "opacity-50" : ""]),
               "data-cy": "legacy-page-size"
@@ -3853,7 +3852,7 @@ const wa = {
         } : void 0,
         y.legacyPaginationFooter ? {
           name: "paginatorend",
-          fn: f(() => [
+          fn: g(() => [
             m("span", {
               "data-cy": "legacy-total",
               class: P(a.loading ? "opacity-50" : "")
@@ -3917,7 +3916,7 @@ const wa = {
           "option-value": o.optionValue,
           "option-label": o.optionLabel
         }), {
-          value: f(({ value: p, placeholder: u }) => [
+          value: g(({ value: p, placeholder: u }) => [
             m("div", Ea, [
               m("span", {
                 class: P({ "filter-placeholder": p === null })
@@ -3928,8 +3927,8 @@ const wa = {
                 size: "small",
                 class: "bg-transparent border-0 ms-auto p-0 pe-1"
               }, {
-                default: f(() => [
-                  k(c(I), {
+                default: g(() => [
+                  k(c(M), {
                     icon: "bi:x",
                     width: "1rem",
                     height: "1rem",
@@ -3957,14 +3956,14 @@ const wa = {
           "onUpdate:modelValue": l[4] || (l[4] = (p) => t.value = p),
           modelModifiers: { trim: !0 }
         }, o.$attrs), null, 16, ["modelValue"])),
-        o.showClearButton && t.value !== null && o.dataType !== "select" && o.dataType !== "multiselect" && o.dataType !== "date" ? (d(), x(s, {
+        o.showClearButton && t.value !== null && o.dataType !== "select" && o.dataType !== "multiselect" && o.dataType !== "date" && t.value != "" ? (d(), x(s, {
           key: 5,
           onClick: Q(i, ["prevent"]),
           size: "small",
           class: "bg-transparent border-0 ms-auto p-0 pe-1 position-absolute end-0 top-0 bottom-0"
         }, {
-          default: f(() => [
-            k(c(I), {
+          default: g(() => [
+            k(c(M), {
               icon: "bi:x",
               width: "1rem",
               height: "1rem",
@@ -5169,6 +5168,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
   props: /* @__PURE__ */ E({
     acceptedFileTypes: {},
     maxFileInput: {},
+    maxFileSize: {},
     showDragDropArea: { type: Boolean }
   }, {
     modelValue: { required: !0 },
@@ -5176,8 +5176,8 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = N(e, "modelValue"), a = M(), i = (n) => a.value.toggle(n), o = _(() => e.maxFileInput <= t.value.length), l = (n) => {
-      t.value = ke(n, t.value, e.acceptedFileTypes.map((s) => s.fileType), e.maxFileInput);
+    const t = N(e, "modelValue"), a = I(), i = (n) => a.value.toggle(n), o = _(() => e.maxFileInput <= t.value.length), l = (n) => {
+      t.value = ke(n, t.value, e.acceptedFileTypes.map((s) => s.fileType), e.maxFileSize);
     };
     return (n, s) => {
       const p = q;
@@ -5199,7 +5199,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
             for: "file-input"
           }, [
             F(n.$slots, "button-content", {}, () => [
-              k(c(I), {
+              k(c(M), {
                 icon: "bi:upload",
                 class: "me-2",
                 height: "20px",
@@ -5216,7 +5216,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
           id: "accepted-file-types",
           onClick: i
         }, {
-          default: f(() => s[2] || (s[2] = [
+          default: g(() => s[2] || (s[2] = [
             V("Accepted File Types")
           ])),
           _: 1,
@@ -5226,7 +5226,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
           ref_key: "acceptedFilesOverlay",
           ref: a
         }, {
-          default: f(() => [
+          default: g(() => [
             m("div", Ka, $(n.acceptedFileTypes.map((u) => u.label ?? u.fileType.split("/").pop()).join(", ")), 1)
           ]),
           _: 1
@@ -5253,7 +5253,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = N(e, "modelValue"), a = M(!1), i = _(() => e.maxFileInput <= t.value.length), o = (l) => {
+    const t = N(e, "modelValue"), a = I(!1), i = _(() => e.maxFileInput <= t.value.length), o = (l) => {
       a.value = !1, l.dataTransfer.files.length > e.maxFileInput || i.value ? l.preventDefault() : t.value = ke([...l.dataTransfer.files], t.value, e.acceptedFileTypes.map((n) => n.fileType), e.maxFileSize);
     };
     return (l, n) => (d(), b("div", {
@@ -5264,7 +5264,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
       onDrop: Q(o, ["prevent"])
     }, [
       t.value.length === 0 ? (d(), b("div", Xa, [
-        k(c(I), {
+        k(c(M), {
           icon: "bi:upload",
           class: "me-2",
           height: "20px",
@@ -5314,7 +5314,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
           severity: a.value,
           class: "mb-0 w-75 ms-auto"
         }, {
-          default: f(() => [
+          default: g(() => [
             V($(i.value), 1)
           ]),
           _: 1
@@ -5350,25 +5350,25 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
   }),
   emits: /* @__PURE__ */ E(["deleted"], ["update:file", "update:blobFileName", "update:uploadStatus"]),
   setup(e, { emit: t }) {
-    const a = N(e, "file"), i = N(e, "blobFileName"), o = N(e, "uploadStatus"), l = t, n = M(a.value.name), s = M(""), p = M(0), u = M(), h = _(() => e.acceptedFileTypes.some(({ fileType: v }) => v === a.value.type)), r = _(() => a.value.size <= e.maxFileSize), w = _(() => a.value.type ? a.value.type : Ga().getType(a.value.name)), g = () => {
+    const a = N(e, "file"), i = N(e, "blobFileName"), o = N(e, "uploadStatus"), l = t, n = I(a.value.name), s = I(""), p = I(0), u = I(), h = _(() => e.acceptedFileTypes.some(({ fileType: f }) => f === a.value.type)), r = _(() => a.value.size <= e.maxFileSize), w = _(() => a.value.type ? a.value.type : Ga().getType(a.value.name)), v = () => {
       n.value != null && (C(), a.value = new File([a.value], n.value, { type: a.value.type, lastModified: (/* @__PURE__ */ new Date()).valueOf() }));
     }, C = () => {
-      let v = n.value.split("."), B = qa.getExtension(w.value), D = n.value.split(".").pop();
-      v.length === 1 ? D && D.length > 0 && (n.value = [n.value, B].join(".")) : v.length > 1 && D !== B && (n.value = n.value.replace(D, B));
+      let f = n.value.split("."), B = qa.getExtension(w.value), D = n.value.split(".").pop();
+      f.length === 1 ? D && D.length > 0 && (n.value = [n.value, B].join(".")) : f.length > 1 && D !== B && (n.value = n.value.replace(D, B));
     }, S = async () => {
       if (!h.value || !r.value) {
         o.value = h.value ? "InvalidFileSize" : "InvalidFileType";
         return;
       }
       o.value = "Preparing", u.value = new AbortController();
-      const [v, B] = await e.getFileUrlAction(a.value.name);
-      if (!v) {
+      const [f, B] = await e.getFileUrlAction(a.value.name);
+      if (!f) {
         o.value = "Failed";
         return;
       }
       try {
         o.value = "Uploading";
-        const D = new ge(v), y = {
+        const D = new ge(f), y = {
           abortSignal: u.value.signal,
           onProgress: (O) => p.value = O.loadedBytes,
           blobHTTPHeaders: {
@@ -5377,7 +5377,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
           },
           tags: { temp: "true" }
         };
-        await D.uploadData(a.value, y), s.value = v, o.value = "Uploaded", i.value = B;
+        await D.uploadData(a.value, y), s.value = f, o.value = "Uploaded", i.value = B;
       } catch (D) {
         if (D.name === "AbortError") {
           o.value = "Aborted";
@@ -5390,7 +5390,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
     };
     return ne(() => {
       e.autoUploadToBlob && o.value != "Uploaded" && S();
-    }), (v, B) => {
+    }), (f, B) => {
       const D = q;
       return d(), b("div", {
         class: "py-4 px-3 d-flex",
@@ -5405,7 +5405,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
             alt: a.value.name,
             width: "75px",
             preview: ""
-          }, null, 8, ["src", "alt"])) : (d(), x(c(I), {
+          }, null, 8, ["src", "alt"])) : (d(), x(c(M), {
             key: 1,
             id: "file-earmark",
             icon: "bi:file-earmark",
@@ -5415,14 +5415,14 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
         ]),
         m("div", oi, [
           m("div", null, [
-            v.editableFileName ? (d(), x(Kt, {
+            f.editableFileName ? (d(), x(Kt, {
               key: 0,
               id: "edit-file-name",
               modelValue: n.value,
               "onUpdate:modelValue": B[0] || (B[0] = (y) => n.value = y),
-              rules: v.customFileNameRules,
+              rules: f.customFileNameRules,
               name: a.value.name,
-              "complete-action": g
+              "complete-action": v
             }, null, 8, ["modelValue", "rules", "name"])) : (d(), b("span", li, $(n.value), 1))
           ]),
           m("span", ni, "File type: " + $(a.value.type.split("/").pop()), 1),
@@ -5434,15 +5434,15 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
             "file-size": a.value.size,
             "upload-status": o.value,
             "bytes-uploaded": p.value,
-            "max-file-size": v.maxFileSize
+            "max-file-size": f.maxFileSize
           }, null, 8, ["file-size", "upload-status", "bytes-uploaded", "max-file-size"])),
           o.value === "Not Uploaded" || o.value === "Failed" || o.value === "Duplicate" || o.value === "Aborted" ? (d(), x(D, {
             key: 0,
             link: "",
             onClick: S
           }, {
-            default: f(() => [
-              k(c(I), {
+            default: g(() => [
+              k(c(M), {
                 icon: o.value === "Not Uploaded" || o.value === "Duplicate" ? "bi:upload" : "bi:arrow-clockwise"
               }, null, 8, ["icon"])
             ]),
@@ -5453,8 +5453,8 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
             link: "",
             onClick: B[1] || (B[1] = (y) => u.value.abort())
           }, {
-            default: f(() => [
-              k(c(I), { icon: "bi:x-circle-fill" })
+            default: g(() => [
+              k(c(M), { icon: "bi:x-circle-fill" })
             ]),
             _: 1
           })) : (d(), x(D, {
@@ -5463,8 +5463,8 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
             onClick: A,
             id: "delete-button"
           }, {
-            default: f(() => [
-              k(c(I), { icon: "bi:trash" })
+            default: g(() => [
+              k(c(M), { icon: "bi:trash" })
             ]),
             _: 1
           }))
@@ -5515,7 +5515,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
         id: "max-files-alert",
         severity: "danger"
       }, {
-        default: f(() => [
+        default: g(() => [
           V($(o.maxFileWarning), 1)
         ]),
         _: 1
@@ -5532,7 +5532,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
           modelValue: t.value,
           "onUpdate:modelValue": l[1] || (l[1] = (n) => t.value = n)
         }, {
-          default: f(() => [
+          default: g(() => [
             (d(!0), b(U, null, L(t.value, ({ file: n }, s) => (d(), b("div", null, [
               (d(), x(di, j({
                 key: n.name,
@@ -5563,7 +5563,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
   },
   emits: ["update:modelValue"],
   setup(e) {
-    const t = N(e, "modelValue"), a = M(), i = M(!1), o = (l) => {
+    const t = N(e, "modelValue"), a = I(), i = I(!1), o = (l) => {
       a.value.toggle(l);
     };
     return (l, n) => (d(), b(U, null, [
@@ -5571,14 +5571,14 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
         onClick: o,
         class: "ms-2"
       }, {
-        default: f(() => [
+        default: g(() => [
           m("div", gi, [
             m("div", bi, [
-              k(c(I), { icon: "bi:layout-three-columns" })
+              k(c(M), { icon: "bi:layout-three-columns" })
             ]),
             V(" Columns (" + $(t.value.filter((s) => s.selected).length ?? 0) + "/" + $(t.value.length ?? 0) + ") ", 1),
             m("div", yi, [
-              k(c(I), {
+              k(c(M), {
                 icon: i.value ? "bi:chevron-up" : "bi:chevron-down"
               }, null, 8, ["icon"])
             ])
@@ -5593,7 +5593,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
         onHide: n[0] || (n[0] = () => i.value = !1),
         onShow: n[1] || (n[1] = () => i.value = !0)
       }, {
-        default: f(() => [
+        default: g(() => [
           m("div", xi, [
             (d(!0), b(U, null, L(t.value, (s, p) => (d(), b("div", {
               class: P(["d-flex cursor-pointer", {
@@ -5624,13 +5624,13 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
     return (t, a) => {
       const i = Je;
       return d(), x(i, G(Y({ ...t.$attrs })), ie({
-        toggleicon: f(({ collapsed: o }) => [
-          o ? (d(), x(c(I), {
+        toggleicon: g(({ collapsed: o }) => [
+          o ? (d(), x(c(M), {
             key: 0,
             "data-cy": "message-icon",
             icon: "bi:chevron-down"
           })) : T("", !0),
-          o ? T("", !0) : (d(), x(c(I), {
+          o ? T("", !0) : (d(), x(c(M), {
             key: 1,
             "data-cy": "message-icon",
             icon: "bi:chevron-up"
@@ -5640,7 +5640,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
       }, [
         L(t.$slots, (o, l) => ({
           name: l,
-          fn: f((n) => [
+          fn: g((n) => [
             F(t.$slots, l, G(Y(n)))
           ])
         }))
@@ -5741,7 +5741,7 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
       pcAcceptButton: { root: "btn btn-primary btn-sm" }
     }));
     return (a, i) => (d(), x(c(Ze), j({ pt: t.value }, { ...a.$attrs, ...a.$props }), {
-      default: f(() => [
+      default: g(() => [
         (d(!0), b(U, null, L(a.$slots, (o, l) => F(a.$slots, l, { slot: l })), 256))
       ]),
       _: 3
@@ -5792,49 +5792,55 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, a = N(e, "modelValue"), i = M([]), o = M([]), l = M(null), n = M(null), s = (g) => {
-      const { items: C } = g;
+    const t = e, a = N(e, "modelValue"), i = I([]), o = I([]), l = I(null), n = I(null), s = (v) => {
+      const { items: C } = v;
       i.value = [...i.value, ...C], o.value = o.value.filter((S) => !C.includes(S));
-    }, p = (g) => {
-      const { items: C } = g;
-      o.value = [...o.value, ...C], i.value = i.value.filter((S) => !C.includes(S));
+    }, p = (v) => {
+      const { items: C } = v;
+      o.value = o.value.push(...C), i.value = i.value.filter((S) => !C.includes(S));
     }, u = () => {
-      o.value = i.value, i.value = [];
+      o.value = [.../* @__PURE__ */ new Set([...o.value, ...a.value[1]])], i.value = i.value.filter((v) => !a.value[1].includes(v));
     }, h = () => {
-      i.value = o.value, o.value = [];
-    }, r = () => {
+      i.value = [.../* @__PURE__ */ new Set([...i.value, ...a.value[0]])], o.value = o.value.filter((v) => !a.value[0].includes(v));
+    };
+    W(o, async () => {
+      r();
+    }), W(i, async () => {
+      w();
+    });
+    const r = () => {
       var S;
-      const g = t.filterBy, C = l.value ? (S = a.value[0]) == null ? void 0 : S.filter((A) => {
-        var v;
-        return A[g].toLowerCase().includes((v = l.value) == null ? void 0 : v.toLowerCase());
-      }) : o.value;
-      a.value = [C, a.value[1] ?? []];
+      const v = t.filterBy, C = l.value ? o.value.filter((A) => {
+        var f;
+        return A[v].toLowerCase().includes((f = l.value) == null ? void 0 : f.toLowerCase());
+      }) : [...o.value];
+      (S = a.value) == null || S.splice(0, 1, C);
     }, w = () => {
       var S;
-      const g = t.filterBy, C = n.value ? (S = a.value[1]) == null ? void 0 : S.filter((A) => {
-        var v;
-        return A[g].toLowerCase().includes((v = n.value) == null ? void 0 : v.toLowerCase());
-      }) : i.value;
-      a.value = [a.value[0] ?? [], C];
+      const v = t.filterBy, C = n.value ? i.value.filter((A) => {
+        var f;
+        return A[v].toLowerCase().includes((f = n.value) == null ? void 0 : f.toLowerCase());
+      }) : [...i.value];
+      (S = a.value) == null || S.splice(1, 1, C);
     };
     return W(
       () => a.value,
-      (g) => {
-        g && (i.value = g[1] ?? [], o.value = g[0] ?? [], a.value = [o.value, i.value]);
+      (v) => {
+        v && (i.value = v[1].length > 0 ? [...v[1]] : [], o.value = v[0].length > 0 ? [...v[0]] : [], a.value.splice(0, 1, o.value), a.value.splice(1, 1, i.value));
       },
       { once: !0 }
-    ), (g, C) => (d(), x(c(Xe), j({
+    ), (v, C) => (d(), x(c(Xe), j({
       modelValue: a.value,
       "onUpdate:modelValue": C[2] || (C[2] = (S) => a.value = S)
-    }, { ...g.$attrs, ...t }, {
+    }, { ...v.$attrs, ...t }, {
       onMoveAllToSource: u,
       onMoveAllToTarget: h,
       onMoveToTarget: C[3] || (C[3] = (S) => s(S)),
       onMoveToSource: C[4] || (C[4] = (S) => p(S)),
       style: { height: "14rem" }
     }), {
-      sourceheader: f(() => [
-        g.sourceTitle ? (d(), b("div", ki, $(g.sourceTitle), 1)) : T("", !0),
+      sourceheader: g(() => [
+        v.sourceTitle ? (d(), b("div", ki, $(v.sourceTitle), 1)) : T("", !0),
         k(c(ae), {
           modelValue: l.value,
           "onUpdate:modelValue": [
@@ -5846,8 +5852,8 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
           "data-cy": "source-search"
         }, null, 8, ["modelValue"])
       ]),
-      targetheader: f(() => [
-        g.targetTitle ? (d(), b("div", Bi, $(g.targetTitle), 1)) : T("", !0),
+      targetheader: g(() => [
+        v.targetTitle ? (d(), b("div", Bi, $(v.targetTitle), 1)) : T("", !0),
         k(c(ae), {
           modelValue: n.value,
           "onUpdate:modelValue": [
@@ -5859,13 +5865,13 @@ const Ya = { class: "d-flex justify-content-between" }, Ja = ["accept", "disable
           "data-cy": "target-search"
         }, null, 8, ["modelValue"])
       ]),
-      option: f(({ option: S }) => [
-        V($(S[g.filterBy]), 1)
+      option: g(({ option: S }) => [
+        V($(S[v.filterBy]), 1)
       ]),
       _: 1
     }, 16, ["modelValue"]));
   }
-}), Mo = () => ({
+}), Io = () => ({
   type: "component",
   resolve: (e) => {
     if (e.startsWith("Forge"))
@@ -5900,7 +5906,7 @@ export {
   _o as ForgePickList,
   xo as ForgeProgressBar,
   fo as ForgeRemainingCharacters,
-  Mo as ForgeResolver,
+  Io as ForgeResolver,
   ho as ForgeScratchpad,
   Po as ForgeSelectButton,
   wo as ForgeStatWidget,