@3squared/forge-ui-3 2.15.0 → 2.16.1

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

@@ -1,12 +1,12 @@
 import Be from "primevue/message";
-import { defineComponent as S, openBlock as r, createBlock as b, normalizeProps as W, guardReactiveProps as G, withCtx as f, createElementVNode as m, normalizeClass as F, unref as u, createCommentVNode as C, createVNode as h, renderSlot as k, ref as P, createElementBlock as v, Fragment as A, mergeProps as _, renderList as E, mergeModels as R, useModel as N, computed as z, createTextVNode as M, toDisplayString as B, withDirectives as J, vShow as Z, createSlots as ae, onMounted as ne, isRef as Fe, withKeys as le, normalizeStyle as Se, withModifiers as X, watch as te, h as Ce, useTemplateRef as ze } from "vue";
-import { Icon as j } from "@iconify/vue";
+import { defineComponent as S, openBlock as r, createBlock as y, normalizeProps as W, guardReactiveProps as G, withCtx as f, createElementVNode as m, normalizeClass as F, unref as u, createCommentVNode as C, createVNode as h, renderSlot as k, ref as j, createElementBlock as v, Fragment as A, mergeProps as P, renderList as E, mergeModels as R, useModel as N, computed as z, createTextVNode as M, toDisplayString as B, withDirectives as J, vShow as Z, createSlots as ae, onMounted as ne, isRef as Fe, withKeys as le, normalizeStyle as Se, withModifiers as X, watch as Q, h as Ce, useTemplateRef as ze } from "vue";
+import { Icon as _ } from "@iconify/vue";
 import q from "primevue/button";
 import Te from "primevue/toast";
-import _e from "primevue/autocomplete";
-import je from "primevue/checkbox";
+import Pe from "primevue/autocomplete";
+import _e from "primevue/checkbox";
 import { useField as oe } from "vee-validate";
-import Pe from "primevue/progressspinner";
+import je from "primevue/progressspinner";
 import Ie from "primevue/dialog";
 import se from "primevue/inputtext";
 import { vOnClickOutside as Me } from "@vueuse/components";
@@ -229,7 +229,7 @@ const Xe = {
     filterIcon: "d-none",
     label: ({ instance: e }) => ({
       class: [
-        "w-100",
+        "w-100 ellipsis-overflow",
         {
           "filter-placeholder": e.modelValue === void 0
         }
@@ -1066,7 +1066,7 @@ const Xe = {
     pcFilterContainer: { root: "dropdown-item" },
     filterIcon: "d-none"
   }
-}, _t = {
+}, Pt = {
   treeSelect: {
     root: ({ props: e }) => ({
       class: [
@@ -1078,8 +1078,8 @@ const Xe = {
     }),
     dropdown: "d-none",
     panel: "dropdown-menu overflow-y-auto show",
-    labelContainer: "w-100 me-2",
-    label: "w-100 d-flex ellipsis-overflow",
+    labelContainer: "w-100 me-2 d-flex ellipsis-overflow",
+    label: ({ props: e }) => ({ class: ["w-100 ellipsis-overflow", { "d-flex": e.display == "chip" }] }),
     clearIcon: "ms-auto my-auto",
     header: "p-2 w-100",
     pcTree: {
@@ -1088,7 +1088,7 @@ const Xe = {
         class: [
           "btn py-0 px-1",
           {
-            invisible: e.leaf
+            "d-none": e.leaf
           }
         ]
       }),
@@ -1114,7 +1114,7 @@ const Xe = {
       filterIcon: "d-none"
     }
   }
-}, jt = {
+}, _t = {
   fieldset: {
     root: () => ({
       class: [
@@ -1140,7 +1140,7 @@ const Xe = {
       ]
     })
   }
-}, Pt = {
+}, jt = {
   accordionPanel: {
     root: "card my-2"
   },
@@ -1210,10 +1210,10 @@ const Xe = {
   ...mt,
   ...zt,
   ...st,
-  ...jt,
   ..._t,
-  ...Tt,
   ...Pt,
+  ...Tt,
+  ...jt,
   ...It,
   directives: {
     ...wt
@@ -1239,12 +1239,12 @@ const Xe = {
     const t = e;
     return (a, i) => {
       const l = Be;
-      return r(), b(l, W(G({ ...a.$attrs, ...t })), {
+      return r(), y(l, W(G({ ...a.$attrs, ...t })), {
         icon: f(() => [
           m("div", {
             class: F(t.icon ? "me-2 pe-1" : "")
           }, [
-            t.icon ? (r(), b(u(j), {
+            t.icon ? (r(), y(u(_), {
               key: 0,
               "data-cy": "message-icon",
               icon: t.icon,
@@ -1254,7 +1254,7 @@ const Xe = {
           ], 2)
         ]),
         closeicon: f(() => [
-          h(u(j), { icon: "bi:x" })
+          h(u(_), { icon: "bi:x" })
         ]),
         default: f(() => [
           k(a.$slots, "default")
@@ -1272,7 +1272,7 @@ const Xe = {
     params: { default: Array }
   },
   setup(e) {
-    const t = P(!1), a = e, i = async () => {
+    const t = j(!1), a = e, i = async () => {
       t.value = !0;
       try {
         await a.action.apply(this, a.params);
@@ -1284,7 +1284,7 @@ const Xe = {
     return (l, n) => {
       const o = q;
       return r(), v(A, null, [
-        h(o, _({ ...a, ...l.$attrs }, {
+        h(o, P({ ...a, ...l.$attrs }, {
           loading: t.value,
           disabled: t.value || a.disabled,
           onClick: i
@@ -1296,7 +1296,7 @@ const Xe = {
 }), Xi = /* @__PURE__ */ S({
   __name: "ForgeAutoComplete",
   setup(e) {
-    return (t, a) => (r(), b(u(_e), _({ ...t.$attrs, ...t.$props }, { inputClass: "form-control border-0" }), {
+    return (t, a) => (r(), y(u(Pe), P({ ...t.$attrs, ...t.$props }, { inputClass: "form-control border-0" }), {
       default: f(() => [
         (r(!0), v(A, null, E(t.$slots, (i, l) => k(t.$slots, l, { slot: l })), 256))
       ]),
@@ -1349,14 +1349,14 @@ const Xe = {
       (t.disabled || t.readonly) && p.preventDefault(), t.name ? i(c) : a.value = c;
     }, s = z(() => l.value.length > 0);
     return (p, c) => {
-      const y = je;
+      const x = _e;
       return r(), v("div", Mt, [
-        m("div", _({
+        m("div", P({
           class: "d-flex",
           "data-cy": "checkbox-container",
           onClick: c[2] || (c[2] = (d) => o(d, a.value))
         }, { ...p.$attrs }), [
-          h(y, _({ ...t }, {
+          h(x, P({ ...t }, {
             binary: "",
             modelValue: a.value,
             "onUpdate:modelValue": c[0] || (c[0] = (d) => a.value = d),
@@ -1401,7 +1401,7 @@ const Xe = {
       })
     }));
     return (i, l) => {
-      const n = Pe;
+      const n = je;
       return r(), v("div", {
         class: F(i.inLine ? "" : "forge-loader")
       }, [
@@ -1454,7 +1454,7 @@ const Xe = {
       target: i.target
     }, [
       k(i.$slots, "default", {}, () => [
-        i.iconName ? (r(), b(u(j), {
+        i.iconName ? (r(), y(u(_), {
           key: 0,
           id: "link-icon",
           icon: i.iconName,
@@ -1546,7 +1546,7 @@ const Nt = { key: 0 }, At = {
   }),
   emits: ["update:visible", "update:error"],
   setup(e, { expose: t }) {
-    const a = N(e, "visible"), i = P(!1), l = e, n = P(!1), o = N(e, "error"), s = () => {
+    const a = N(e, "visible"), i = j(!1), l = e, n = j(!1), o = N(e, "error"), s = () => {
       o.value = {
         hasError: !1,
         header: "",
@@ -1560,14 +1560,14 @@ const Nt = { key: 0 }, At = {
       i.value = !1;
     }, c = () => {
       i.value = !0;
-    }, y = () => {
+    }, x = () => {
       l.resetErrorOnClose && s(), a.value = !1;
     }, d = async () => {
       if (l.onConfirm) {
         n.value = !0, o.value.hasError = !1;
         try {
           const T = await l.onConfirm();
-          (T || T == null) && y();
+          (T || T == null) && x();
         } catch (T) {
           o.value.hasError = !0;
           const D = Ot(T);
@@ -1594,22 +1594,22 @@ const Nt = { key: 0 }, At = {
     }));
     return (T, D) => {
       const O = q, U = Ie;
-      return r(), b(U, _(l, {
+      return r(), y(U, P(l, {
         onMaximize: c,
         onUnmaximize: p,
         pt: $.value
       }), ae({
         closeicon: f(() => [
-          h(u(j), {
+          h(u(_), {
             "data-cy": "close-icon",
             icon: "bi:x-lg",
             width: "18",
             height: "18",
-            onClick: y
+            onClick: x
           })
         ]),
         maximizeicon: f(() => [
-          h(u(j), {
+          h(u(_), {
             "data-cy": "maximisable-icon",
             icon: i.value ? "bi:arrows-angle-contract" : "bi:arrows-angle-expand",
             width: "16",
@@ -1618,11 +1618,11 @@ const Nt = { key: 0 }, At = {
         ]),
         _: 2
       }, [
-        E(T.$slots, (x, w) => ({
+        E(T.$slots, (g, w) => ({
           name: w,
           fn: f((I) => [
             w !== "footer" ? (r(), v(A, { key: 0 }, [
-              o.value.hasError ? (r(), b(de, {
+              o.value.hasError ? (r(), y(de, {
                 key: 0,
                 severity: "danger",
                 "data-cy": "error"
@@ -1632,7 +1632,7 @@ const Nt = { key: 0 }, At = {
                     class: F(o.value.message.length > 0 ? "my-auto" : "mb-0")
                   }, B(o.value.header), 3),
                   o.value.message.length > 0 ? (r(), v("ul", Nt, [
-                    (r(!0), v(A, null, E(o.value.message, (g) => (r(), v("li", { key: g }, B(g), 1))), 128))
+                    (r(!0), v(A, null, E(o.value.message, (b) => (r(), v("li", { key: b }, B(b), 1))), 128))
                   ])) : C("", !0)
                 ]),
                 _: 1
@@ -1652,7 +1652,7 @@ const Nt = { key: 0 }, At = {
                 label: T.cancelText,
                 class: F(l.cancelClass),
                 outlined: "",
-                onClick: y,
+                onClick: x,
                 id: "cancel-button",
                 type: l.cancelButtonType
               }, null, 8, ["label", "class", "type"]),
@@ -1685,7 +1685,7 @@ const Nt = { key: 0 }, At = {
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, a = N(e, "modelValue"), i = P(!1), l = P(), n = () => {
+    const t = e, a = N(e, "modelValue"), i = j(!1), l = j(), n = () => {
       var T;
       i.value = !i.value, (T = l.value) == null || T.focus();
     }, o = async () => {
@@ -1703,13 +1703,13 @@ const Nt = { key: 0 }, At = {
       i.value = !i.value;
     }, p = () => {
       d.value = null;
-    }, { errorMessage: c, errors: y, value: d } = oe(() => t.name, void 0, {
+    }, { errorMessage: c, errors: x, value: d } = oe(() => t.name, void 0, {
       initialValue: a.value
     });
     ne(() => {
       d.value = a.value;
     });
-    const $ = z(() => y.value.length > 0);
+    const $ = z(() => x.value.length > 0);
     return (T, D) => {
       const O = se, U = q;
       return r(), v("div", {
@@ -1730,7 +1730,7 @@ const Nt = { key: 0 }, At = {
               }, () => [
                 h(O, {
                   modelValue: u(d),
-                  "onUpdate:modelValue": D[0] || (D[0] = (x) => Fe(d) ? d.value = x : null),
+                  "onUpdate:modelValue": D[0] || (D[0] = (g) => Fe(d) ? d.value = g : null),
                   modelModifiers: { trim: !0 },
                   "data-cy": "input",
                   ref_key: "input",
@@ -1742,7 +1742,7 @@ const Nt = { key: 0 }, At = {
                   ]
                 }, null, 8, ["modelValue", "class"])
               ]),
-              h(u(j), {
+              h(u(_), {
                 icon: "bi:x-circle",
                 class: "mx-2 cursor-pointer",
                 onClick: p,
@@ -1769,7 +1769,7 @@ const Nt = { key: 0 }, At = {
               class: "p-0 m-0"
             }, {
               default: f(() => [
-                h(u(j), {
+                h(u(_), {
                   icon: "bi:pencil",
                   class: F($.value ? "text-invalid" : "text-muted"),
                   "data-cy": "edit-icon",
@@ -1834,7 +1834,7 @@ const Nt = { key: 0 }, At = {
         ]
       })
     }));
-    return (i, l) => (r(), b(u(Ve), _({ ...t, ...i.$attrs }, {
+    return (i, l) => (r(), y(u(Ve), P({ ...t, ...i.$attrs }, {
       pt: a.value,
       "data-cy": "navbar"
     }), ae({
@@ -1851,7 +1851,7 @@ const Nt = { key: 0 }, At = {
       ]),
       buttonicon: f(() => [
         k(i.$slots, "buttonIcon", {}, () => [
-          h(u(j), {
+          h(u(_), {
             icon: "bi:list",
             class: F(t.severity === "light" ? "text-black" : "text-white"),
             height: "24",
@@ -1905,7 +1905,7 @@ const Nt = { key: 0 }, At = {
           class: F(l.orientation === "row" ? "col-12 mb-1" : "col"),
           "data-cy": "multiselect-container"
         }, [
-          h(o, _({
+          h(o, P({
             modelValue: a.value,
             "onUpdate:modelValue": n[0] || (n[0] = (p) => a.value = p)
           }, { ...l.$attrs }, {
@@ -1938,14 +1938,14 @@ const Nt = { key: 0 }, At = {
                 k(l.$slots, "list-item", { item: p }, () => [
                   m("span", Kt, B(p.shortLabel ? p.shortLabel : p.label), 1)
                 ]),
-                l.canRemoveItemFromPreview ? (r(), b(s, {
+                l.canRemoveItemFromPreview ? (r(), y(s, {
                   key: 0,
                   link: "",
                   class: "m-0 p-0 d-flex align-items-center",
                   onClick: (c) => i(p.id)
                 }, {
                   default: f(() => [
-                    h(u(j), {
+                    h(u(_), {
                       icon: "bi:x",
                       class: "close-icon",
                       "data-cy": `close-icon-${p.id}`
@@ -2060,7 +2060,7 @@ const Nt = { key: 0 }, At = {
       initialValue: a.value
     }), p = () => {
       s(null), a.value = null;
-    }, c = z(() => i.value.length > 0), y = z(() => ({
+    }, c = z(() => i.value.length > 0), x = z(() => ({
       dayCell: ({ context: d }) => ({
         class: [
           `text-center date-${t.severity === void 0 ? "primary" : t.severity}`,
@@ -2164,8 +2164,8 @@ const Nt = { key: 0 }, At = {
             k(d.$slots, "before")
           ]),
           m("div", la, [
-            h(T, _({ ...t, ...d.$attrs }, {
-              pt: y.value,
+            h(T, P({ ...t, ...d.$attrs }, {
+              pt: x.value,
               modelValue: a.value,
               "onUpdate:modelValue": [
                 $[0] || ($[0] = (D) => a.value = D),
@@ -2174,14 +2174,14 @@ const Nt = { key: 0 }, At = {
               onBlur: $[1] || ($[1] = () => u(o)),
               "input-class": { "datepicker-invalid": c.value }
             }), null, 16, ["pt", "modelValue", "onUpdate:modelValue", "input-class"]),
-            J(h(u(j), {
+            J(h(u(_), {
               "data-cy": "icon",
               icon: "bi:calendar4",
               class: F(["position-absolute end-0 top-50 bottom-50 my-auto me-2 bg-white", `${c.value ? "text-danger-dark" : "text-muted"}`])
             }, null, 8, ["class"]), [
               [Z, t.showIcon]
             ]),
-            J(h(u(j), {
+            J(h(u(_), {
               "data-cy": "icon",
               icon: "bi:x",
               onClick: p,
@@ -2227,7 +2227,7 @@ const Nt = { key: 0 }, At = {
     hideCancel: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, a = P(!1), i = P({
+    const t = e, a = j(!1), i = j({
       hasError: !1,
       message: ""
     });
@@ -2242,7 +2242,7 @@ const Nt = { key: 0 }, At = {
     }
     return (n, o) => {
       const s = q;
-      return r(), v("form", _(n.$attrs, {
+      return r(), v("form", P(n.$attrs, {
         novalidate: "",
         class: "position-relative shadow-sm border p-4 bg-white",
         onSubmit: X(l, ["prevent"])
@@ -2256,7 +2256,7 @@ const Nt = { key: 0 }, At = {
           ]),
           o[1] || (o[1] = m("hr", null, null, -1))
         ], 64)),
-        i.value.hasError ? (r(), b(de, {
+        i.value.hasError ? (r(), y(de, {
           key: 1,
           severity: "danger",
           "data-cy": "error"
@@ -2273,7 +2273,7 @@ const Nt = { key: 0 }, At = {
         k(n.$slots, "default"),
         m("div", oa, [
           k(n.$slots, "cancel", {}, () => [
-            n.hideCancel ? C("", !0) : (r(), b(s, {
+            n.hideCancel ? C("", !0) : (r(), y(s, {
               key: 0,
               "data-cy": "cancel-btn",
               type: "reset",
@@ -2301,7 +2301,7 @@ const Nt = { key: 0 }, At = {
             })
           ])
         ]),
-        a.value ? (r(), b(pe, {
+        a.value ? (r(), y(pe, {
           key: 2,
           "data-cy": "loading-spinner"
         })) : C("", !0)
@@ -2331,20 +2331,20 @@ const Nt = { key: 0 }, At = {
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = N(e, "modelValue"), a = e, i = (y) => {
-      a.type == "number" ? s(y.value) : s(y);
+    const t = N(e, "modelValue"), a = e, i = (x) => {
+      a.type == "number" ? s(x.value) : s(x);
     }, { errors: l, value: n, errorMessage: o, handleChange: s, handleBlur: p } = oe(() => a.name, void 0, {
       initialValue: t.value
     }), c = z(() => l.value.length > 0);
-    return te(() => n.value, (y) => {
-      t.value = y;
-    }, { immediate: !0 }), (y, d) => {
-      const $ = Ne, T = Oe, D = se, O = ie, U = re, x = xe;
-      return a.type === "checkbox" ? (r(), b(ye, _({
+    return Q(() => n.value, (x) => {
+      t.value = x;
+    }, { immediate: !0 }), (x, d) => {
+      const $ = Ne, T = Oe, D = se, O = ie, U = re, g = xe;
+      return a.type === "checkbox" ? (r(), y(ye, P({
         key: 0,
         id: a.name,
         label: a.fieldLabel
-      }, y.$attrs, {
+      }, x.$attrs, {
         name: a.name,
         modelValue: t.value,
         "onUpdate:modelValue": d[0] || (d[0] = (w) => t.value = w)
@@ -2358,33 +2358,33 @@ const Nt = { key: 0 }, At = {
             class: F(a.fieldLabelPosition === "top" ? "mb-1" : "me-2 " + a.labelWidthClass)
           }, [
             M(B(a.fieldLabel) + " ", 1),
-            y.required ? (r(), v("span", da, "*")) : C("", !0)
+            x.required ? (r(), v("span", da, "*")) : C("", !0)
           ], 10, ra),
-          k(y.$slots, "default", W(G({ modelValue: t.value, updateModel: u(s), hasErrors: c.value })), () => [
-            a.type === "number" ? (r(), b(u(fe), _({
+          k(x.$slots, "default", W(G({ modelValue: t.value, updateModel: u(s), hasErrors: c.value })), () => [
+            a.type === "number" ? (r(), y(u(fe), P({
               key: 0,
               id: a.name
-            }, y.$attrs, {
+            }, x.$attrs, {
               placeholder: a.placeholder,
               "input-class": { "is-invalid": c.value },
               class: { "is-invalid": c.value },
               onInput: i,
               modelValue: t.value,
               "onUpdate:modelValue": d[1] || (d[1] = (w) => t.value = w)
-            }), null, 16, ["id", "placeholder", "input-class", "class", "modelValue"])) : a.type === "textarea" ? (r(), b($, _({
+            }), null, 16, ["id", "placeholder", "input-class", "class", "modelValue"])) : a.type === "textarea" ? (r(), y($, P({
               key: 1,
               id: a.name
-            }, y.$attrs, {
+            }, x.$attrs, {
               placeholder: a.placeholder,
               class: { "is-invalid": c.value },
               modelValue: t.value,
               "onUpdate:modelValue": d[2] || (d[2] = (w) => t.value = w),
               onInput: i,
               onBlur: u(p)
-            }), null, 16, ["id", "placeholder", "class", "modelValue", "onBlur"])) : a.type === "mask" ? (r(), b(T, _({
+            }), null, 16, ["id", "placeholder", "class", "modelValue", "onBlur"])) : a.type === "mask" ? (r(), y(T, P({
               key: 2,
               id: a.name
-            }, y.$attrs, {
+            }, x.$attrs, {
               placeholder: a.placeholder,
               mask: a.mask,
               class: { "is-invalid": c.value },
@@ -2392,29 +2392,29 @@ const Nt = { key: 0 }, At = {
               "onUpdate:modelValue": d[3] || (d[3] = (w) => t.value = w),
               onComplete: i,
               onBlur: u(p)
-            }), null, 16, ["id", "placeholder", "mask", "class", "modelValue", "onBlur"])) : a.type === "text" ? (r(), b(D, _({
+            }), null, 16, ["id", "placeholder", "mask", "class", "modelValue", "onBlur"])) : a.type === "text" ? (r(), y(D, P({
               key: 3,
               id: a.name
-            }, y.$attrs, {
+            }, x.$attrs, {
               placeholder: a.placeholder,
               class: { "is-invalid": c.value },
               modelValue: t.value,
               "onUpdate:modelValue": d[4] || (d[4] = (w) => t.value = w),
               onInput: i,
               onBlur: u(p)
-            }), null, 16, ["id", "placeholder", "class", "modelValue", "onBlur"])) : a.type === "select" ? (r(), b(O, _({ key: 4 }, { ...a, ...y.$attrs }, {
+            }), null, 16, ["id", "placeholder", "class", "modelValue", "onBlur"])) : a.type === "select" ? (r(), y(O, P({ key: 4 }, { ...a, ...x.$attrs }, {
               modelValue: t.value,
               "onUpdate:modelValue": d[5] || (d[5] = (w) => t.value = w),
               class: { "is-invalid": c.value }
-            }), null, 16, ["modelValue", "class"])) : a.type === "multiselect" ? (r(), b(U, _({ key: 5 }, { ...a, ...y.$attrs }, {
+            }), null, 16, ["modelValue", "class"])) : a.type === "multiselect" ? (r(), y(U, P({ key: 5 }, { ...a, ...x.$attrs }, {
               modelValue: t.value,
               "onUpdate:modelValue": d[6] || (d[6] = (w) => t.value = w),
               class: { "is-invalid": c.value }
-            }), null, 16, ["modelValue", "class"])) : a.type === "multiselect-preview" ? (r(), b(Xt, _({ key: 6 }, { ...a, ...y.$attrs }, {
+            }), null, 16, ["modelValue", "class"])) : a.type === "multiselect-preview" ? (r(), y(Xt, P({ key: 6 }, { ...a, ...x.$attrs }, {
               modelValue: t.value,
               "onUpdate:modelValue": d[7] || (d[7] = (w) => t.value = w),
               class: { "is-invalid": c.value }
-            }), null, 16, ["modelValue", "class"])) : a.type === "datepicker" ? (r(), b(x, _({ key: 7 }, { ...a, ...y.$attrs }, {
+            }), null, 16, ["modelValue", "class"])) : a.type === "datepicker" ? (r(), y(g, P({ key: 7 }, { ...a, ...x.$attrs }, {
               modelValue: t.value,
               "onUpdate:modelValue": d[8] || (d[8] = (w) => t.value = w),
               class: { "is-invalid": c.value }
@@ -2466,7 +2466,7 @@ const Nt = { key: 0 }, At = {
     }));
     return (i, l) => {
       const n = Ae;
-      return r(), b(n, _({ ...i.$attrs, ...i.$props }, { pt: a.value }), {
+      return r(), y(n, P({ ...i.$attrs, ...i.$props }, { pt: a.value }), {
         default: f(() => [
           (r(!0), v(A, null, E(i.$slots, (o, s) => k(i.$slots, s, { slot: s })), 256))
         ]),
@@ -2521,7 +2521,7 @@ const Nt = { key: 0 }, At = {
     }));
     return (o, s) => {
       const p = Ee;
-      return r(), b(p, _({ ...o.$attrs, ...t }, { pt: n.value }), {
+      return r(), y(p, P({ ...o.$attrs, ...t }, { pt: n.value }), {
         default: f(() => [
           k(o.$slots, "default")
         ]),
@@ -2845,11 +2845,11 @@ var pa = /* @__PURE__ */ S({
       const o = /(\r\n|\n\r|\n|\r)+/g, s = /\s+/g;
       var p = t.split(o).filter((O) => O.length > 0);
       for (let O = 0; O < p.length; O++) {
-        for (var c = p[O].split(s).filter((U) => U.length > 0), y = "", d = 0; d < c.length; d++) {
-          var $ = y + c[d] + " ", T = e.measureText($), D = T.width;
-          D > l && d > 0 ? (this.watermark && this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === "stroke" ? e.strokeText(y, a, i) : e.fillText(y, a, i), y = c[d] + " ", i += n) : y = $;
+        for (var c = p[O].split(s).filter((U) => U.length > 0), x = "", d = 0; d < c.length; d++) {
+          var $ = x + c[d] + " ", T = e.measureText($), D = T.width;
+          D > l && d > 0 ? (this.watermark && this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === "stroke" ? e.strokeText(x, a, i) : e.fillText(x, a, i), x = c[d] + " ", i += n) : x = $;
         }
-        this.watermark && this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === "stroke" ? e.strokeText(y, a, i) : e.fillText(y, a, i), i += c.length > 0 ? n : 0;
+        this.watermark && this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === "stroke" ? e.strokeText(x, a, i) : e.fillText(x, a, i), i += c.length > 0 ? n : 0;
       }
     },
     save() {
@@ -2880,9 +2880,9 @@ var pa = /* @__PURE__ */ S({
           a.fontStyle && a.fontStyle.width ? d = a.x + Math.floor(a.fontStyle.width / 2) : d = a.x, a.fontStyle && a.fontStyle.lineHeight ? $ = a.y + Math.floor(a.fontStyle.lineHeight / 2) : $ = a.y, t.translate(d, $), t.rotate(a.fontStyle.rotate * Math.PI / 180), t.translate(d * -1, $ * -1);
         }
         a.fontStyle && a.fontStyle.drawType && a.fontStyle.drawType === "stroke" ? (t.strokeStyle = a.fontStyle.color, a.fontStyle && a.fontStyle.width ? this.wrapText(t, a.source, a.x, a.y, a.fontStyle.width, a.fontStyle.lineHeight) : t.strokeText(a.source, a.x, a.y)) : (t.fillStyle = o, a.fontStyle && a.fontStyle.width ? this.wrapText(t, a.source, a.x, a.y, a.fontStyle.width, a.fontStyle.lineHeight) : t.fillText(a.source, a.x, a.y));
-        let s = document.createElement("canvas"), p = s.getContext("2d"), c = this.outputWidth === void 0 ? this.width : this.outputWidth, y = this.outputHeight === void 0 ? this.height : this.outputHeight;
-        if (s.width = Number(c), s.height = Number(y), p)
-          return p.drawImage(e, 0, 0, Number(c), Number(y)), this.$emit("update:image", s.toDataURL("image/" + this.saveAs, 1)), s.toDataURL("image/" + this.saveAs, 1);
+        let s = document.createElement("canvas"), p = s.getContext("2d"), c = this.outputWidth === void 0 ? this.width : this.outputWidth, x = this.outputHeight === void 0 ? this.height : this.outputHeight;
+        if (s.width = Number(c), s.height = Number(x), p)
+          return p.drawImage(e, 0, 0, Number(c), Number(x)), this.$emit("update:image", s.toDataURL("image/" + this.saveAs, 1)), s.toDataURL("image/" + this.saveAs, 1);
       }
     },
     isEmpty() {
@@ -2933,7 +2933,7 @@ const ca = { class: "d-flex flex-column" }, ua = { class: "d-flex flex-row mt-1
   },
   emits: ["save"],
   setup(e, { emit: t }) {
-    const a = e, i = t, l = ze("drawingCanvas"), n = P(), o = () => {
+    const a = e, i = t, l = ze("drawingCanvas"), n = j(), o = () => {
       l == null || l.value.reset();
     }, s = () => {
       l == null || l.value.redo();
@@ -2942,24 +2942,24 @@ const ca = { class: "d-flex flex-column" }, ua = { class: "d-flex flex-row mt-1
     }, c = () => {
       i("save", l.value.isEmpty());
     };
-    return (y, d) => {
+    return (x, d) => {
       const $ = q;
       return r(), v("div", ca, [
-        h(u(pa), _({
+        h(u(pa), P({
           ref_key: "drawingCanvas",
           ref: l,
           image: n.value,
           "onUpdate:image": d[0] || (d[0] = (T) => n.value = T),
           "data-cy": "drawing-canvas",
           class: "border canvas"
-        }, { ...y.$attrs }, {
-          height: y.height,
-          width: y.width,
-          style: `height: ${y.height}px; width: ${y.width}px`,
-          "line-join": y.lineJoin
+        }, { ...x.$attrs }, {
+          height: x.height,
+          width: x.width,
+          style: `height: ${x.height}px; width: ${x.width}px`,
+          "line-join": x.lineJoin
         }), null, 16, ["image", "height", "width", "style", "line-join"]),
         m("div", ua, [
-          a.showUndo ? (r(), b($, {
+          a.showUndo ? (r(), y($, {
             key: 0,
             onClick: p,
             outlined: "",
@@ -2970,7 +2970,7 @@ const ca = { class: "d-flex flex-column" }, ua = { class: "d-flex flex-row mt-1
             ])),
             _: 1
           })) : C("", !0),
-          a.showRedo ? (r(), b($, {
+          a.showRedo ? (r(), y($, {
             key: 1,
             onClick: s,
             outlined: "",
@@ -2981,7 +2981,7 @@ const ca = { class: "d-flex flex-column" }, ua = { class: "d-flex flex-row mt-1
             ])),
             _: 1
           })) : C("", !0),
-          a.showClear ? (r(), b($, {
+          a.showClear ? (r(), y($, {
             key: 2,
             onClick: o,
             outlined: "",
@@ -2992,7 +2992,7 @@ const ca = { class: "d-flex flex-column" }, ua = { class: "d-flex flex-row mt-1
             ])),
             _: 1
           })) : C("", !0),
-          a.showSave ? (r(), b($, {
+          a.showSave ? (r(), y($, {
             key: 3,
             onClick: c,
             class: "ms-auto",
@@ -3015,7 +3015,7 @@ const ca = { class: "d-flex flex-column" }, ua = { class: "d-flex flex-row mt-1
   },
   setup(e) {
     const t = e;
-    return (a, i) => (r(), v("div", _(a.$attrs, {
+    return (a, i) => (r(), v("div", P(a.$attrs, {
       class: `d-flex shadow m-2 align-items-center widget--${t.size} bg-${t.severity}`
     }), [
       m("span", ma, [
@@ -3070,11 +3070,11 @@ const ca = { class: "d-flex flex-column" }, ua = { class: "d-flex flex-row mt-1
         ]
       })
     }));
-    return (i, l) => (r(), b(u(qe), { value: i.currentStep }, {
+    return (i, l) => (r(), y(u(qe), { value: i.currentStep }, {
       default: f(() => [
         h(u(Le), null, {
           default: f(() => [
-            (r(!0), v(A, null, E(i.steps, (n) => (r(), b(u(Ue), _({
+            (r(!0), v(A, null, E(i.steps, (n) => (r(), y(u(Ue), P({
               key: n.value,
               value: n.value,
               disabled: n.disabled,
@@ -3090,7 +3090,7 @@ const ca = { class: "d-flex flex-column" }, ua = { class: "d-flex flex-row mt-1
         }),
         h(u(He), null, {
           default: f(() => [
-            (r(!0), v(A, null, E(i.steps, (n) => (r(), b(u(Re), {
+            (r(!0), v(A, null, E(i.steps, (n) => (r(), y(u(Re), {
               key: n.value,
               value: n.value
             }, {
@@ -3118,7 +3118,7 @@ const ca = { class: "d-flex flex-column" }, ua = { class: "d-flex flex-row mt-1
     const t = e, a = z(() => `${t.severity === void 0 ? "tile-primary" : `tile-${t.severity}`} ${t.barPosition === "none" ? "" : `tile-bar-${t.barPosition}`} ${t.selected ? "selected" : ""}`), i = z(() => `${t.severity === void 0 ? "tile-primary border-primary" : `tile-${t.severity} border-${t.severity}`} ${t.barPosition === "none" ? "" : `tile-bar-${t.barPosition}`} ${t.selected ? "selected" : ""}`);
     return (l, n) => {
       const o = q;
-      return t.clickable ? (r(), b(o, {
+      return t.clickable ? (r(), y(o, {
         key: 0,
         class: F(["d-flex w-100 p-0 text-body", a.value]),
         severity: t.severity,
@@ -3147,7 +3147,7 @@ const ca = { class: "d-flex flex-column" }, ua = { class: "d-flex flex-row mt-1
     };
   }
 });
-function Q(e, t) {
+function ee(e, t) {
   return e > 1 ? `${t}s` : t;
 }
 const ba = {
@@ -3169,7 +3169,7 @@ const ba = {
       a("update:perPage", o.value);
     }, n = z(() => {
       const o = Math.ceil(i.total / i.perPage);
-      return `${o} ${Q(o, "page")}`;
+      return `${o} ${ee(o, "page")}`;
     });
     return (o, s) => (r(), v("div", ba, [
       s[2] || (s[2] = M(" Number of results per page ")),
@@ -3178,12 +3178,13 @@ const ba = {
           options: i.pageSizes,
           "model-value": i.perPage,
           class: "page-size",
-          onChange: s[0] || (s[0] = (p) => l(p))
+          onChange: s[0] || (s[0] = (p) => l(p)),
+          "data-cy": "pagination-page-size-select"
         }, null, 8, ["options", "model-value"])
       ]),
       i.total ? (r(), v("div", xa, [
         s[1] || (s[1] = m("span", { class: "mx-2" }, "|", -1)),
-        m("span", ha, B(i.total) + " " + B(u(Q)(i.total, "result")) + " across " + B(n.value), 1)
+        m("span", ha, B(i.total) + " " + B(u(ee)(i.total, "result")) + " across " + B(n.value), 1)
       ])) : C("", !0)
     ]));
   }
@@ -3201,6 +3202,7 @@ const ba = {
     severity: {},
     clearAll: {},
     emptyMessage: {},
+    perPage: {},
     dataKey: {},
     rows: {},
     first: {},
@@ -3276,17 +3278,21 @@ const ba = {
   },
   emits: ["update:filters", "update:tableContext", "sort", "page"],
   setup(e, { emit: t }) {
-    const a = t, i = e, l = P(), n = P([5, 10, 20, 50, 100]), o = P(10), s = P({
+    const a = t, i = e, l = j(), n = j([5, 10, 20, 50, 100]), o = j(i.perPage ?? 10), s = j({
       filters: i.filters,
       perPage: o.value,
       page: 0,
       sortDirection: "None",
       sortField: "",
       total: i.totalRecords ?? i.value.length
-    }), p = z(() => i.totalRecords ?? i.value.length), c = z(() => {
-      const x = Math.ceil(p.value / o.value);
-      return `${x} ${Q(x, "page")}`;
-    }), y = z(() => ({
+    });
+    Q(() => i.perPage, (g) => {
+      g && (o.value = g, s.value.perPage = g);
+    });
+    const p = z(() => i.totalRecords ?? i.value.length), c = z(() => {
+      const g = Math.ceil(p.value / o.value);
+      return `${g} ${ee(g, "page")}`;
+    }), x = z(() => ({
       thead: () => ({
         class: [
           {
@@ -3313,31 +3319,31 @@ const ba = {
       if (i.clearAll)
         i.clearAll();
       else
-        for (const x in i.filters)
-          typeof i.filters[x] == "string" ? i.filters[x] = "" : i.filters[x].value = null;
+        for (const g in i.filters)
+          typeof i.filters[g] == "string" ? i.filters[g] = "" : i.filters[g].value = null;
       D(i.filters);
     }, $ = () => {
       l.value.exportCSV();
-    }, T = (x) => {
+    }, T = (g) => {
       var w;
-      s.value.sortDirection = x.sortOrder === 1 ? "Asc" : x.sortOrder === -1 ? "Desc" : "None", s.value.sortField = ((w = x.sortField) == null ? void 0 : w.toString()) ?? "", a("update:tableContext", s.value), a("sort", x);
-    }, D = (x) => {
-      s.value.filters = x, a("update:tableContext", s.value), a("update:filters", x);
-    }, O = (x) => {
-      s.value.page = x.page, a("update:tableContext", s.value), a("page", x);
+      s.value.sortDirection = g.sortOrder === 1 ? "Asc" : g.sortOrder === -1 ? "Desc" : "None", s.value.sortField = ((w = g.sortField) == null ? void 0 : w.toString()) ?? "", a("update:tableContext", s.value), a("sort", g);
+    }, D = (g) => {
+      s.value.filters = g, a("update:tableContext", s.value), a("update:filters", g);
+    }, O = (g) => {
+      s.value.page = g.page, a("update:tableContext", s.value), a("page", g);
     }, U = () => {
       s.value.perPage = o.value, a("update:tableContext", s.value);
     };
-    return te(() => i.filters, (x) => {
-      s.value.filters = x, a("update:tableContext", s.value);
-    }, { deep: !0 }), ne(() => a("update:tableContext", s.value)), (x, w) => (r(), v("div", wa, [
+    return Q(() => i.filters, (g) => {
+      s.value.filters = g, a("update:tableContext", s.value);
+    }, { deep: !0 }), ne(() => a("update:tableContext", s.value)), (g, w) => (r(), v("div", wa, [
       m("span", ka, [
-        k(x.$slots, "above-table")
+        k(g.$slots, "above-table")
       ]),
-      h(u(We), _({
+      h(u(We), P({
         class: ["w-100", `${i.severity ? `forge-table-${i.severity}` : ""}`]
-      }, { ...i, ...x.$attrs }, {
-        pt: y.value,
+      }, { ...i, ...g.$attrs }, {
+        pt: x.value,
         rows: o.value,
         "total-records": p.value,
         "filter-display": i.filters ? "row" : void 0,
@@ -3351,7 +3357,7 @@ const ba = {
       }), ae({
         empty: f(() => [
           m("div", $a, [
-            m("h5", Ba, B(x.emptyMessage ?? "No items Found."), 1)
+            m("h5", Ba, B(g.emptyMessage ?? "No items Found."), 1)
           ])
         ]),
         header: f(() => [
@@ -3360,7 +3366,7 @@ const ba = {
           }, [
             m("div", Fa, [
               m("div", Sa, [
-                x.paginator && !x.legacyPaginationFooter ? (r(), v("span", Ca, [
+                g.paginator && !g.legacyPaginationFooter ? (r(), v("span", Ca, [
                   h(he, {
                     total: p.value,
                     "page-sizes": n.value,
@@ -3373,15 +3379,15 @@ const ba = {
                 ])) : C("", !0)
               ]),
               m("div", za, [
-                x.showClearButton ? (r(), b(u(q), {
+                g.showClearButton ? (r(), y(u(q), {
                   key: 0,
                   outlined: "",
-                  class: F(x.showExporterButton ? "me-2" : ""),
+                  class: F(g.showExporterButton ? "me-2" : ""),
                   onClick: d,
                   "data-cy": "clear-all"
                 }, {
                   default: f(() => [
-                    h(u(j), {
+                    h(u(_), {
                       icon: "bi:funnel-fill",
                       width: "24",
                       height: "24"
@@ -3390,14 +3396,14 @@ const ba = {
                   ]),
                   _: 1
                 }, 8, ["class"])) : C("", !0),
-                x.showExporterButton ? (r(), b(u(q), {
+                g.showExporterButton ? (r(), y(u(q), {
                   key: 1,
                   outlined: "",
                   onClick: $,
                   "data-cy": "exporter"
                 }, {
                   default: f(() => [
-                    h(u(j), {
+                    h(u(_), {
                       icon: "typcn:export",
                       width: "24",
                       height: "24"
@@ -3406,23 +3412,23 @@ const ba = {
                   ]),
                   _: 1
                 })) : C("", !0),
-                k(x.$slots, "column-customiser")
+                k(g.$slots, "column-customiser")
               ])
             ])
           ], 2)
         ]),
         default: f(() => [
-          k(x.$slots, "default")
+          k(g.$slots, "default")
         ]),
         _: 2
       }, [
-        E(x.$slots, (I, g) => ({
-          name: g,
+        E(g.$slots, (I, b) => ({
+          name: b,
           fn: f((V) => [
-            k(x.$slots, g, W(G(V || {})))
+            k(g.$slots, b, W(G(V || {})))
           ])
         })),
-        x.legacyPaginationFooter ? {
+        g.legacyPaginationFooter ? {
           name: "paginatorstart",
           fn: f(() => [
             m("span", {
@@ -3441,20 +3447,20 @@ const ba = {
           ]),
           key: "0"
         } : void 0,
-        x.legacyPaginationFooter ? {
+        g.legacyPaginationFooter ? {
           name: "paginatorend",
           fn: f(() => [
             m("span", {
               "data-cy": "legacy-total",
               class: F(i.loading ? "opacity-50" : "")
-            }, B(p.value) + " " + B(u(Q)(p.value, "result")) + " across " + B(c.value), 3)
+            }, B(p.value) + " " + B(u(ee)(p.value, "result")) + " across " + B(c.value), 3)
           ]),
           key: "1"
         } : void 0
       ]), 1040, ["class", "pt", "rows", "total-records", "filter-display"])
     ]));
   }
-}), Ta = { class: "position-relative" }, _a = { "data-cy": "above-table-slot" }, ja = { class: "d-flex" }, Pa = { class: "d-flex align-items-end mb-2" }, Ia = { key: 0 }, Ma = { class: "ms-auto" }, fl = /* @__PURE__ */ S({
+}), Ta = { class: "position-relative" }, Pa = { "data-cy": "above-table-slot" }, _a = { class: "d-flex" }, ja = { class: "d-flex align-items-end mb-2" }, Ia = { key: 0 }, Ma = { class: "ms-auto" }, fl = /* @__PURE__ */ S({
   __name: "ForgeTreeTable",
   props: {
     stripedRows: { type: Boolean, default: !1 },
@@ -3515,28 +3521,28 @@ const ba = {
   },
   emits: ["update:filters", "update:tableContext", "sort", "page"],
   setup(e, { emit: t }) {
-    const a = e, i = t, l = P([5, 10, 20, 50, 100]), n = P(10), o = P(0), s = P(0), p = P({
+    const a = e, i = t, l = j([5, 10, 20, 50, 100]), n = j(10), o = j(0), s = j(0), p = j({
       filters: a.filters,
       perPage: n.value,
       page: 0,
       sortDirection: "None",
       sortField: "",
       total: a.totalRecords ?? a.value.length
-    }), c = z(() => a.totalRecords ?? a.value.length), y = z(() => {
-      const g = Math.ceil(c.value / n.value);
-      return `${g} ${Q(g, "page")}`;
+    }), c = z(() => a.totalRecords ?? a.value.length), x = z(() => {
+      const b = Math.ceil(c.value / n.value);
+      return `${b} ${ee(b, "page")}`;
     }), d = z(() => ({
       root: "position-relative",
-      table: (g) => ({
+      table: (b) => ({
         class: [
           "table position-relative",
           {
-            "table-striped": g.attrs.stripedRows,
-            "table-hover": g.props.rowHover,
-            "table-bordered": g.props.showGridlines,
-            "table-sm": g.props.size === "small",
-            "table-lg": g.props.size === "large",
-            "opacity-50": g.props.loading
+            "table-striped": b.attrs.stripedRows,
+            "table-hover": b.props.rowHover,
+            "table-bordered": b.props.showGridlines,
+            "table-sm": b.props.size === "small",
+            "table-lg": b.props.size === "large",
+            "opacity-50": b.props.loading
           }
         ]
       }),
@@ -3554,26 +3560,26 @@ const ba = {
           }
         ]
       }),
-      row: ({ instance: g }) => [
+      row: ({ instance: b }) => [
         {
-          "parent-node": g.node.hasOwnProperty("children")
+          "parent-node": b.node.hasOwnProperty("children")
         }
       ]
     }));
-    te(() => a.parentExpanderFullRow, (g) => {
-      g ? $() : T();
+    Q(() => a.parentExpanderFullRow, (b) => {
+      b ? $() : T();
     });
     const $ = () => {
       a.parentExpanderFullRow && setTimeout(
         () => {
-          const g = Array.from(
+          const b = Array.from(
             document.querySelectorAll(".parent-node td.expander-cell")
           );
           Array.from(
             document.querySelectorAll(".parent-node td")
           ).forEach((L) => {
             L.classList.add("d-none");
-          }), g.forEach((L) => {
+          }), b.forEach((L) => {
             L.setAttribute("colspan", a.totalColumns.toString()), L.classList.remove("d-none");
           });
         },
@@ -3582,12 +3588,12 @@ const ba = {
     }, T = () => {
       setTimeout(
         () => {
-          const g = Array.from(
+          const b = Array.from(
             document.querySelectorAll(".parent-node td.expander-cell")
           ), V = Array.from(
             document.querySelectorAll(".parent-node td")
           );
-          g.forEach((L) => {
+          b.forEach((L) => {
             L.removeAttribute("colspan");
           }), V.forEach((L) => {
             L.classList.remove("d-none");
@@ -3599,22 +3605,22 @@ const ba = {
       if (a.clearAll)
         a.clearAll();
       else
-        for (const g in a.filters)
-          typeof a.filters[g] == "string" ? a.filters[g] = "" : a.filters[g].value = null;
+        for (const b in a.filters)
+          typeof a.filters[b] == "string" ? a.filters[b] = "" : a.filters[b].value = null;
       U(a.filters);
-    }, O = (g) => {
+    }, O = (b) => {
       var V;
-      p.value.sortDirection = g.sortOrder === 1 ? "Asc" : g.sortOrder === -1 ? "Desc" : "None", p.value.sortField = ((V = g.sortField) == null ? void 0 : V.toString()) ?? "", i("update:tableContext", p.value), i("sort", g), $();
-    }, U = (g) => {
-      p.value.filters = g, i("update:tableContext", p.value), i("update:filters", g), $();
-    }, x = (g) => {
-      p.value.page = s.value = g.page, I(), i("update:tableContext", p.value), i("page", g), $();
+      p.value.sortDirection = b.sortOrder === 1 ? "Asc" : b.sortOrder === -1 ? "Desc" : "None", p.value.sortField = ((V = b.sortField) == null ? void 0 : V.toString()) ?? "", i("update:tableContext", p.value), i("sort", b), $();
+    }, U = (b) => {
+      p.value.filters = b, i("update:tableContext", p.value), i("update:filters", b), $();
+    }, g = (b) => {
+      p.value.page = s.value = b.page, I(), i("update:tableContext", p.value), i("page", b), $();
     }, w = () => {
       p.value.perPage = n.value, s.value = 0, p.value.page = s.value = Math.floor(o.value / n.value), I(), i("update:tableContext", p.value), $();
     };
-    te(() => a.filters, (g) => {
-      p.value.filters = g, i("update:tableContext", p.value);
-    }, { deep: !0 }), te(() => a.value, () => {
+    Q(() => a.filters, (b) => {
+      p.value.filters = b, i("update:tableContext", p.value);
+    }, { deep: !0 }), Q(() => a.value, () => {
       $();
     }), ne(() => {
       $(), i("update:tableContext", p.value);
@@ -3622,20 +3628,20 @@ const ba = {
     const I = () => {
       o.value = s.value * n.value;
     };
-    return (g, V) => (r(), v("div", Ta, [
-      m("span", _a, [
-        k(g.$slots, "above-table")
+    return (b, V) => (r(), v("div", Ta, [
+      m("span", Pa, [
+        k(b.$slots, "above-table")
       ]),
-      h(u(Ge), _({
+      h(u(Ge), P({
         class: ["w-100", `${a.severity ? `forge-table-${a.severity}` : ""}`]
-      }, { ...a, ...g.$attrs }, {
+      }, { ...a, ...b.$attrs }, {
         pt: d.value,
         "filter-display": a.filters ? "row" : void 0,
-        rows: g.paginator ? n.value : void 0,
+        rows: b.paginator ? n.value : void 0,
         "data-cy": "tree-table",
         "onUpdate:filters": U,
         onSort: O,
-        onPage: x,
+        onPage: g,
         onNodeExpand: V[2] || (V[2] = () => $()),
         showHeaders: "",
         first: o.value
@@ -3644,9 +3650,9 @@ const ba = {
           m("div", {
             class: F(a.loading ? "opacity-50" : "")
           }, [
-            m("div", ja, [
-              m("div", Pa, [
-                g.paginator && !g.legacyPaginationFooter ? (r(), v("span", Ia, [
+            m("div", _a, [
+              m("div", ja, [
+                b.paginator && !b.legacyPaginationFooter ? (r(), v("span", Ia, [
                   h(he, {
                     total: c.value,
                     "page-sizes": l.value,
@@ -3659,14 +3665,14 @@ const ba = {
                 ])) : C("", !0)
               ]),
               m("div", Ma, [
-                g.showClearButton ? (r(), b(u(q), {
+                b.showClearButton ? (r(), y(u(q), {
                   key: 0,
                   outlined: "",
                   onClick: D,
                   "data-cy": "clear-all"
                 }, {
                   default: f(() => [
-                    h(u(j), {
+                    h(u(_), {
                       icon: "bi:funnel-fill",
                       width: "24",
                       height: "24"
@@ -3675,23 +3681,23 @@ const ba = {
                   ]),
                   _: 1
                 })) : C("", !0),
-                k(g.$slots, "column-customiser")
+                k(b.$slots, "column-customiser")
               ])
             ])
           ], 2)
         ]),
         default: f(() => [
-          k(g.$slots, "default")
+          k(b.$slots, "default")
         ]),
         _: 2
       }, [
-        E(g.$slots, (L, ve) => ({
+        E(b.$slots, (L, ve) => ({
           name: ve,
           fn: f(($e) => [
-            k(g.$slots, ve, W(G($e || {})))
+            k(b.$slots, ve, W(G($e || {})))
           ])
         })),
-        g.legacyPaginationFooter ? {
+        b.legacyPaginationFooter ? {
           name: "paginatorstart",
           fn: f(() => [
             m("span", {
@@ -3710,13 +3716,13 @@ const ba = {
           ]),
           key: "0"
         } : void 0,
-        g.legacyPaginationFooter ? {
+        b.legacyPaginationFooter ? {
           name: "paginatorend",
           fn: f(() => [
             m("span", {
               "data-cy": "legacy-total",
               class: F(a.loading ? "opacity-50" : "")
-            }, B(c.value) + " " + B(u(Q)(c.value, "result")) + " across " + B(y.value), 3)
+            }, B(c.value) + " " + B(u(ee)(c.value, "result")) + " across " + B(x.value), 3)
           ]),
           key: "1"
         } : void 0
@@ -3744,7 +3750,7 @@ const ba = {
       const o = (s) => {
         var c;
         const p = (c = e.dropdownOptions) == null ? void 0 : c.find(
-          (y) => e.optionValue ? y[e.optionValue] === s : Object.keys(y).every((d) => s.hasOwnProperty(d) && y[d] === s[d])
+          (x) => e.optionValue ? x[e.optionValue] === s : Object.keys(x).every((d) => s.hasOwnProperty(d) && x[d] === s[d])
         );
         return e.optionLabel ? p[e.optionLabel] : p;
       };
@@ -3755,19 +3761,19 @@ const ba = {
     return (l, n) => {
       const o = fe, s = q;
       return r(), v("div", Va, [
-        l.dataType === "numeric" ? (r(), b(o, _({
+        l.dataType === "numeric" ? (r(), y(o, P({
           key: 0,
           modelValue: t.value,
           "onUpdate:modelValue": n[0] || (n[0] = (p) => t.value = p),
           modelModifiers: { trim: !0 }
-        }, l.$attrs), null, 16, ["modelValue"])) : l.dataType === "date" ? (r(), b(xe, _({
+        }, l.$attrs), null, 16, ["modelValue"])) : l.dataType === "date" ? (r(), y(xe, P({
           key: 1,
           modelValue: t.value,
           "onUpdate:modelValue": n[1] || (n[1] = (p) => t.value = p)
         }, l.$attrs, {
           "show-icon": !1,
           "show-on-focus": !0
-        }), null, 16, ["modelValue"])) : l.dataType === "select" ? (r(), b(u(ie), _({
+        }), null, 16, ["modelValue"])) : l.dataType === "select" ? (r(), y(u(ie), P({
           key: 2,
           modelValue: t.value,
           "onUpdate:modelValue": n[2] || (n[2] = (p) => t.value = p)
@@ -3781,14 +3787,14 @@ const ba = {
               m("span", {
                 class: F({ "filter-placeholder": p === null })
               }, B(a(p, c)), 3),
-              l.showClearButton && t.value !== null ? (r(), b(s, {
+              l.showClearButton && t.value !== null ? (r(), y(s, {
                 key: 0,
                 onClick: X(i, ["prevent"]),
                 size: "small",
                 class: "bg-transparent border-0 ms-auto p-0 pe-1"
               }, {
                 default: f(() => [
-                  h(u(j), {
+                  h(u(_), {
                     icon: "bi:x",
                     width: "1rem",
                     height: "1rem",
@@ -3800,7 +3806,7 @@ const ba = {
             ])
           ]),
           _: 1
-        }, 16, ["modelValue", "options", "option-value", "option-label"])) : l.dataType === "multiselect" ? (r(), b(u(re), _({
+        }, 16, ["modelValue", "options", "option-value", "option-label"])) : l.dataType === "multiselect" ? (r(), y(u(re), P({
           key: 3,
           modelValue: t.value,
           "onUpdate:modelValue": n[3] || (n[3] = (p) => t.value = p)
@@ -3810,20 +3816,20 @@ const ba = {
           "option-label": l.optionLabel,
           "option-value": l.optionValue,
           filter: ""
-        }), null, 16, ["modelValue", "options", "option-label", "option-value"])) : (r(), b(u(se), _({
+        }), null, 16, ["modelValue", "options", "option-label", "option-value"])) : (r(), y(u(se), P({
           key: 4,
           modelValue: t.value,
           "onUpdate:modelValue": n[4] || (n[4] = (p) => t.value = p),
           modelModifiers: { trim: !0 }
         }, l.$attrs), null, 16, ["modelValue"])),
-        l.showClearButton && t.value !== null && l.dataType !== "select" && l.dataType !== "multiselect" && l.dataType !== "date" ? (r(), b(s, {
+        l.showClearButton && t.value !== null && l.dataType !== "select" && l.dataType !== "multiselect" && l.dataType !== "date" ? (r(), y(s, {
           key: 5,
           onClick: X(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(() => [
-            h(u(j), {
+            h(u(_), {
               icon: "bi:x",
               width: "1rem",
               height: "1rem",
@@ -4892,10 +4898,10 @@ var H = function(e, t, a, i) {
   if (a === "a" && !i) throw new TypeError("Private accessor was defined without a getter");
   if (typeof t == "function" ? e !== t || !i : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
   return a === "m" ? i : a === "a" ? i.call(e) : i ? i.value : t.get(e);
-}, K, ee, Y;
+}, K, te, Y;
 class we {
   constructor(...t) {
-    K.set(this, /* @__PURE__ */ new Map()), ee.set(this, /* @__PURE__ */ new Map()), Y.set(this, /* @__PURE__ */ new Map());
+    K.set(this, /* @__PURE__ */ new Map()), te.set(this, /* @__PURE__ */ new Map()), Y.set(this, /* @__PURE__ */ new Map());
     for (const a of t)
       this.define(a);
   }
@@ -4906,7 +4912,7 @@ class we {
       let o = !0;
       for (let s of l) {
         const p = s.startsWith("*");
-        if (s = p ? s.slice(1) : s, n == null || n.add(s), o && H(this, ee, "f").set(i, s), o = !1, p)
+        if (s = p ? s.slice(1) : s, n == null || n.add(s), o && H(this, te, "f").set(i, s), o = !1, p)
           continue;
         const c = H(this, K, "f").get(s);
         if (c && c != i && !a)
@@ -4924,7 +4930,7 @@ class we {
   }
   getExtension(t) {
     var a;
-    return typeof t != "string" ? null : (t = (a = t == null ? void 0 : t.split) == null ? void 0 : a.call(t, ";")[0], (t && H(this, ee, "f").get(t.trim().toLowerCase())) ?? null);
+    return typeof t != "string" ? null : (t = (a = t == null ? void 0 : t.split) == null ? void 0 : a.call(t, ";")[0], (t && H(this, te, "f").get(t.trim().toLowerCase())) ?? null);
   }
   getAllExtensions(t) {
     return typeof t != "string" ? null : H(this, Y, "f").get(t.toLowerCase()) ?? null;
@@ -4940,11 +4946,11 @@ class we {
   _getTestState() {
     return {
       types: H(this, K, "f"),
-      extensions: H(this, ee, "f")
+      extensions: H(this, te, "f")
     };
   }
 }
-K = /* @__PURE__ */ new WeakMap(), ee = /* @__PURE__ */ new WeakMap(), Y = /* @__PURE__ */ new WeakMap();
+K = /* @__PURE__ */ new WeakMap(), te = /* @__PURE__ */ new WeakMap(), Y = /* @__PURE__ */ new WeakMap();
 const Oa = new we(ue, ce)._freeze();
 function ke(e, t, a, i) {
   const l = t.flatMap((n) => n.file);
@@ -5006,7 +5012,7 @@ const qa = { class: "d-flex justify-content-between" }, La = ["accept", "disable
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = N(e, "modelValue"), a = P(), i = (o) => a.value.toggle(o), l = z(() => e.maxFileInput <= t.value.length), n = (o) => {
+    const t = N(e, "modelValue"), a = j(), i = (o) => a.value.toggle(o), l = z(() => e.maxFileInput <= t.value.length), n = (o) => {
       t.value = ke(o, t.value, e.acceptedFileTypes.map((s) => s.fileType), e.maxFileInput);
     };
     return (o, s) => {
@@ -5029,7 +5035,7 @@ const qa = { class: "d-flex justify-content-between" }, La = ["accept", "disable
             for: "file-input"
           }, [
             k(o.$slots, "button-content", {}, () => [
-              h(u(j), {
+              h(u(_), {
                 icon: "bi:upload",
                 class: "me-2",
                 height: "20px",
@@ -5039,7 +5045,7 @@ const qa = { class: "d-flex justify-content-between" }, La = ["accept", "disable
             ])
           ], 2)
         ]),
-        o.showDragDropArea ? (r(), b(p, {
+        o.showDragDropArea ? (r(), y(p, {
           link: "",
           class: "ms-auto",
           key: o.acceptedFileTypes.length,
@@ -5082,7 +5088,7 @@ const qa = { class: "d-flex justify-content-between" }, La = ["accept", "disable
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = N(e, "modelValue"), a = P(!1), i = z(() => e.maxFileInput <= t.value.length), l = (n) => {
+    const t = N(e, "modelValue"), a = j(!1), i = z(() => e.maxFileInput <= t.value.length), l = (n) => {
       a.value = !1, n.dataTransfer.files.length > e.maxFileInput || i.value ? n.preventDefault() : t.value = ke([...n.dataTransfer.files], t.value, e.acceptedFileTypes.map((o) => o.fileType), e.maxFileSize);
     };
     return (n, o) => (r(), v("div", {
@@ -5093,7 +5099,7 @@ const qa = { class: "d-flex justify-content-between" }, La = ["accept", "disable
       onDrop: X(l, ["prevent"])
     }, [
       t.value.length === 0 ? (r(), v("div", Wa, [
-        h(u(j), {
+        h(u(_), {
           icon: "bi:upload",
           class: "me-2",
           height: "20px",
@@ -5133,8 +5139,11 @@ const qa = { class: "d-flex justify-content-between" }, La = ["accept", "disable
     return (l, n) => {
       const o = pe;
       return r(), v("div", Ja, [
-        t.uploadStatus === "Uploading" ? (r(), b(o, { key: 0 })) : C("", !0),
-        t.uploadStatus !== "Uploading" && t.uploadStatus !== "Not Uploaded" && t.uploadStatus !== "Uploaded" && t.uploadStatus !== "Preparing" ? (r(), b(de, {
+        t.uploadStatus === "Uploading" ? (r(), y(o, {
+          key: 0,
+          "in-line": ""
+        })) : C("", !0),
+        t.uploadStatus !== "Uploading" && t.uploadStatus !== "Not Uploaded" && t.uploadStatus !== "Uploaded" && t.uploadStatus !== "Preparing" ? (r(), y(de, {
           key: 1,
           id: "upload-status-alert",
           severity: a.value,
@@ -5176,25 +5185,25 @@ const qa = { class: "d-flex justify-content-between" }, La = ["accept", "disable
   }),
   emits: /* @__PURE__ */ R(["deleted"], ["update:file", "update:blobFileName", "update:uploadStatus"]),
   setup(e, { emit: t }) {
-    const a = N(e, "file"), i = N(e, "blobFileName"), l = N(e, "uploadStatus"), n = t, o = P(a.value.name), s = P(""), p = P(0), c = P(), y = z(() => e.acceptedFileTypes.some(({ fileType: x }) => x === a.value.type)), d = z(() => a.value.size <= e.maxFileSize), $ = z(() => a.value.type ? a.value.type : Ua().getType(a.value.name)), T = () => {
+    const a = N(e, "file"), i = N(e, "blobFileName"), l = N(e, "uploadStatus"), n = t, o = j(a.value.name), s = j(""), p = j(0), c = j(), x = z(() => e.acceptedFileTypes.some(({ fileType: g }) => g === a.value.type)), d = z(() => a.value.size <= e.maxFileSize), $ = z(() => a.value.type ? a.value.type : Ua().getType(a.value.name)), T = () => {
       o.value != null && (D(), a.value = new File([a.value], o.value, { type: a.value.type, lastModified: (/* @__PURE__ */ new Date()).valueOf() }));
     }, D = () => {
-      let x = o.value.split("."), w = Oa.getExtension($.value), I = o.value.split(".").pop();
-      x.length === 1 ? I && I.length > 0 && (o.value = [o.value, w].join(".")) : x.length > 1 && I !== w && (o.value = o.value.replace(I, w));
+      let g = o.value.split("."), w = Oa.getExtension($.value), I = o.value.split(".").pop();
+      g.length === 1 ? I && I.length > 0 && (o.value = [o.value, w].join(".")) : g.length > 1 && I !== w && (o.value = o.value.replace(I, w));
     }, O = async () => {
-      if (!y.value || !d.value) {
-        l.value = y.value ? "InvalidFileSize" : "InvalidFileType";
+      if (!x.value || !d.value) {
+        l.value = x.value ? "InvalidFileSize" : "InvalidFileType";
         return;
       }
       l.value = "Preparing", c.value = new AbortController();
-      const [x, w] = await e.getFileUrlAction(a.value.name);
-      if (!x) {
+      const [g, w] = await e.getFileUrlAction(a.value.name);
+      if (!g) {
         l.value = "Failed";
         return;
       }
       try {
         l.value = "Uploading";
-        const I = new ge(x), g = {
+        const I = new ge(g), b = {
           abortSignal: c.value.signal,
           onProgress: (V) => p.value = V.loadedBytes,
           blobHTTPHeaders: {
@@ -5203,7 +5212,7 @@ const qa = { class: "d-flex justify-content-between" }, La = ["accept", "disable
           },
           tags: { temp: "true" }
         };
-        await I.uploadData(a.value, g), s.value = x, l.value = "Uploaded", i.value = w;
+        await I.uploadData(a.value, b), s.value = g, l.value = "Uploaded", i.value = w;
       } catch (I) {
         if (I.name === "AbortError") {
           l.value = "Aborted";
@@ -5216,14 +5225,14 @@ const qa = { class: "d-flex justify-content-between" }, La = ["accept", "disable
     };
     return ne(() => {
       e.autoUploadToBlob && l.value != "Uploaded" && O();
-    }), (x, w) => {
+    }), (g, w) => {
       const I = q;
       return r(), v("div", {
         class: "py-4 px-3 d-flex",
         "data-cy": `file-info-${a.value.name}`
       }, [
         m("div", null, [
-          u(Aa)(a.value.type) ? (r(), b(u(Ye), {
+          u(Aa)(a.value.type) ? (r(), y(u(Ye), {
             key: 0,
             id: "thumbnail-image",
             "image-class": "image-file-thumbnail border",
@@ -5231,7 +5240,7 @@ const qa = { class: "d-flex justify-content-between" }, La = ["accept", "disable
             alt: a.value.name,
             width: "75px",
             preview: ""
-          }, null, 8, ["src", "alt"])) : (r(), b(u(j), {
+          }, null, 8, ["src", "alt"])) : (r(), y(u(_), {
             key: 1,
             id: "file-earmark",
             icon: "bi:file-earmark",
@@ -5241,12 +5250,12 @@ const qa = { class: "d-flex justify-content-between" }, La = ["accept", "disable
         ]),
         m("div", Xa, [
           m("div", null, [
-            x.editableFileName ? (r(), b(Wt, {
+            g.editableFileName ? (r(), y(Wt, {
               key: 0,
               id: "edit-file-name",
               modelValue: o.value,
-              "onUpdate:modelValue": w[0] || (w[0] = (g) => o.value = g),
-              rules: x.customFileNameRules,
+              "onUpdate:modelValue": w[0] || (w[0] = (b) => o.value = b),
+              rules: g.customFileNameRules,
               name: a.value.name,
               "complete-action": T
             }, null, 8, ["modelValue", "rules", "name"])) : (r(), v("span", Qa, B(o.value), 1))
@@ -5255,42 +5264,42 @@ const qa = { class: "d-flex justify-content-between" }, La = ["accept", "disable
           m("span", ti, "File size: " + B(u(me)(a.value.size)), 1)
         ]),
         m("div", ai, [
-          (r(), b(Ka, {
+          (r(), y(Ka, {
             key: l.value,
             "file-size": a.value.size,
             "upload-status": l.value,
             "bytes-uploaded": p.value,
-            "max-file-size": x.maxFileSize
+            "max-file-size": g.maxFileSize
           }, null, 8, ["file-size", "upload-status", "bytes-uploaded", "max-file-size"])),
-          l.value === "Not Uploaded" || l.value === "Failed" || l.value === "Duplicate" || l.value === "Aborted" ? (r(), b(I, {
+          l.value === "Not Uploaded" || l.value === "Failed" || l.value === "Duplicate" || l.value === "Aborted" ? (r(), y(I, {
             key: 0,
             link: "",
             onClick: O
           }, {
             default: f(() => [
-              h(u(j), {
+              h(u(_), {
                 icon: l.value === "Not Uploaded" || l.value === "Duplicate" ? "bi:upload" : "bi:arrow-clockwise"
               }, null, 8, ["icon"])
             ]),
             _: 1
           })) : C("", !0),
-          l.value === "Uploading" ? (r(), b(I, {
+          l.value === "Uploading" ? (r(), y(I, {
             key: 1,
             link: "",
-            onClick: w[1] || (w[1] = (g) => c.value.abort())
+            onClick: w[1] || (w[1] = (b) => c.value.abort())
           }, {
             default: f(() => [
-              h(u(j), { icon: "bi:x-circle-fill" })
+              h(u(_), { icon: "bi:x-circle-fill" })
             ]),
             _: 1
-          })) : (r(), b(I, {
+          })) : (r(), y(I, {
             key: 2,
             link: "",
             onClick: U,
             id: "delete-button"
           }, {
             default: f(() => [
-              h(u(j), { icon: "bi:trash" })
+              h(u(_), { icon: "bi:trash" })
             ]),
             _: 1
           }))
@@ -5331,7 +5340,7 @@ const qa = { class: "d-flex justify-content-between" }, La = ["accept", "disable
       t.value = t.value.filter((n) => n.file != l);
     };
     return (l, n) => (r(), v("div", ri, [
-      h(Ha, _(a, {
+      h(Ha, P(a, {
         modelValue: t.value,
         "onUpdate:modelValue": n[0] || (n[0] = (o) => t.value = o)
       }), null, 16, ["modelValue"]),
@@ -5345,7 +5354,7 @@ const qa = { class: "d-flex justify-content-between" }, La = ["accept", "disable
         }, {
           default: f(() => [
             (r(!0), v(A, null, E(t.value, ({ file: o }, s) => (r(), v("div", null, [
-              (r(), b(ii, _({
+              (r(), y(ii, P({
                 key: o.name,
                 class: s === t.value.length - 1 || t.value.length == 1 ? "" : "border-bottom",
                 file: t.value[s].file,
@@ -5375,7 +5384,7 @@ const qa = { class: "d-flex justify-content-between" }, La = ["accept", "disable
   },
   emits: ["update:modelValue"],
   setup(e) {
-    const t = N(e, "modelValue"), a = P(), i = P(!1), l = (n) => {
+    const t = N(e, "modelValue"), a = j(), i = j(!1), l = (n) => {
       a.value.toggle(n);
     };
     return (n, o) => (r(), v(A, null, [
@@ -5386,11 +5395,11 @@ const qa = { class: "d-flex justify-content-between" }, La = ["accept", "disable
         default: f(() => [
           m("div", pi, [
             m("div", ci, [
-              h(u(j), { icon: "bi:layout-three-columns" })
+              h(u(_), { icon: "bi:layout-three-columns" })
             ]),
             M(" Columns (" + B(t.value.filter((s) => s.selected).length ?? 0) + "/" + B(t.value.length ?? 0) + ") ", 1),
             m("div", ui, [
-              h(u(j), {
+              h(u(_), {
                 icon: i.value ? "bi:chevron-up" : "bi:chevron-down"
               }, null, 8, ["icon"])
             ])
@@ -5435,14 +5444,14 @@ const qa = { class: "d-flex justify-content-between" }, La = ["accept", "disable
   setup(e) {
     return (t, a) => {
       const i = Je;
-      return r(), b(i, W(G({ ...t.$attrs })), ae({
+      return r(), y(i, W(G({ ...t.$attrs })), ae({
         toggleicon: f(({ collapsed: l }) => [
-          l ? (r(), b(u(j), {
+          l ? (r(), y(u(_), {
             key: 0,
             "data-cy": "message-icon",
             icon: "bi:chevron-down"
           })) : C("", !0),
-          l ? C("", !0) : (r(), b(u(j), {
+          l ? C("", !0) : (r(), y(u(_), {
             key: 1,
             "data-cy": "message-icon",
             icon: "bi:chevron-up"
@@ -5486,7 +5495,7 @@ const qa = { class: "d-flex justify-content-between" }, La = ["accept", "disable
         ]
       })
     }));
-    return (i, l) => (r(), b(u(Ke), _({ ...i.$attrs, ...t }, {
+    return (i, l) => (r(), y(u(Ke), P({ ...i.$attrs, ...t }, {
       severity: t.severity,
       pt: a.value
     }), null, 16, ["severity", "pt"]));
@@ -5525,7 +5534,7 @@ const qa = { class: "d-flex justify-content-between" }, La = ["accept", "disable
           a.value = a.value === n.value && t.allowEmpty ? null : n.value;
     };
     return (n, o) => (r(), v("div", fi, [
-      (r(!0), v(A, null, E(n.options, (s, p) => (r(), b(vi, {
+      (r(!0), v(A, null, E(n.options, (s, p) => (r(), y(vi, {
         key: p,
         onLabel: s.label,
         offLabel: s.label,
@@ -5552,7 +5561,7 @@ const qa = { class: "d-flex justify-content-between" }, La = ["accept", "disable
       pcRejectButton: { root: "btn btn-outline-primary btn-sm" },
       pcAcceptButton: { root: "btn btn-primary btn-sm" }
     }));
-    return (a, i) => (r(), b(u(Ze), _({ pt: t.value }, { ...a.$attrs, ...a.$props }), {
+    return (a, i) => (r(), y(u(Ze), P({ pt: t.value }, { ...a.$attrs, ...a.$props }), {
       default: f(() => [
         (r(!0), v(A, null, E(a.$slots, (l, n) => k(a.$slots, n, { slot: n })), 256))
       ]),