@citruslime/ui 2.0.0-beta.17 → 2.0.0-beta.18

package/dist/citrus-lime-ui.es.js

@@ -31,9 +31,11 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import { Icon } from "@iconify/vue";
-import { defineComponent, ref, openBlock, createElementBlock, renderSlot, normalizeProps, guardReactiveProps, resolveComponent, Fragment, createElementVNode, normalizeClass, createVNode, Transition, withCtx, withDirectives, vShow, reactive, toRefs, nextTick, createBlock, Teleport, renderList, unref, mergeProps, toDisplayString, createCommentVNode, computed, watch, onMounted, onUnmounted, isRef, normalizeStyle, vModelText, withModifiers, vModelDynamic, withKeys, createTextVNode, watchEffect, createSlots } from "vue";
+import { defineComponent, ref, openBlock, createElementBlock, renderSlot, normalizeProps, guardReactiveProps, resolveComponent, Fragment, createElementVNode, normalizeClass, createVNode, Transition, withCtx, withDirectives, vShow, createBlock, Teleport, renderList, unref, mergeProps, toDisplayString, createCommentVNode, nextTick, computed, watch, onMounted, onUnmounted, isRef, normalizeStyle, vModelText, withModifiers, vModelDynamic, withKeys, createTextVNode, watchEffect, createSlots } from "vue";
+import { generateStringId } from "@citruslime/utils";
 import { createI18n, useI18n } from "vue-i18n";
 import Flatpickr from "flatpickr";
+import { useDebouncer, copy } from "@citruslime/vue-utils";
 const _hoisted_1$u = { class: "cl-overflow-hidden" };
 const _sfc_main$v = /* @__PURE__ */ defineComponent({
   props: {
@@ -132,10 +134,11 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
   }
 });
 var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
-    sfc[key] = val;
+    target[key] = val;
   }
-  return sfc;
+  return target;
 };
 const _sfc_main$t = {};
 const _hoisted_1$s = { class: "cl-border-b cl-border-grey-1 cl-font-semibold cl-pl-14 cl-pr-4 cl-py-2 cl-text-grey-3 cl-text-sm" };
@@ -145,44 +148,211 @@ function _sfc_render$5(_ctx, _cache) {
   ]);
 }
 var clUiAccordionHeader = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$5]]);
-function copy(value) {
-  return JSON.parse(JSON.stringify(value));
-}
-function useDebouncer(timeout = 500) {
-  const debouncerState = reactive({
-    debouncer: null,
-    timeout
-  });
-  function debounce(event, eventArgs) {
-    if (debouncerState.debouncer !== null) {
-      window.clearTimeout(debouncerState.debouncer);
-    }
-    debouncerState.debouncer = window.setTimeout(() => event(...eventArgs), debouncerState.timeout);
-  }
-  return __spreadProps(__spreadValues({}, toRefs(debouncerState)), {
-    debounce
-  });
-}
-function generateStringId() {
-  return Math.random().toString(36).slice(2, 8);
-}
-function nameOf(name) {
-  return name;
+const notifications = ref([]);
+function showNotification(notification) {
+  const newNotification = __spreadValues({
+    id: generateStringId()
+  }, notification);
+  notifications.value.push(newNotification);
+  setTimeout(() => removeNotification(newNotification), notification.duration);
 }
-function compareByProperty(firstValue, secondValue, property) {
-  return firstValue[property] < secondValue[property] ? -1 : firstValue[property] > secondValue[property] ? 1 : 0;
+function removeNotification(notification) {
+  notifications.value = notifications.value.filter((n) => n.id !== notification.id);
 }
-function getParamsByName(stringToSearch, paramToFind) {
-  let valueToReturn = "";
-  const urlToSearch = decodeURIComponent(stringToSearch);
-  const regexS = "[\\?&]" + paramToFind + "=([^&#]*)";
-  const regex = new RegExp(regexS);
-  const results = regex.exec(urlToSearch);
-  if (results && results[1]) {
-    valueToReturn = decodeURIComponent(results[1].replace(/\+/g, " "));
+const _hoisted_1$r = ["onClick"];
+const _hoisted_2$m = { class: "cl-flex-1 cl-select-none cl-text-ellipsis cl-w-64" };
+const __default__$4 = {
+  inheritAttrs: false
+};
+const _sfc_main$s = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
+  props: {
+    container: { default: "body" },
+    position: { default: "top-right" }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_icon = resolveComponent("icon");
+      return openBlock(), createBlock(Teleport, { to: __props.container }, [
+        createElementVNode("div", {
+          class: normalizeClass(["cl-fixed cl-w-80 cl-z-40", {
+            "cl-top-5 cl-left-5": __props.position === "top-left",
+            "cl-top-5 cl-left-1/2": __props.position === "top-centre",
+            "cl-top-5 cl-right-5": __props.position === "top-right",
+            "cl-bottom-5 cl-left-5": __props.position === "bottom-left",
+            "cl-bottom-5 cl-left-1/2": __props.position === "bottom-centre",
+            "cl-bottom-5 cl-right-5": __props.position === "bottom-right"
+          }])
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(notifications), (notification, index) => {
+            return openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, {
+              key: index,
+              class: ["cl-break-words cl-cursor-pointer cl-flex cl-font-semibold cl-group cl-mb-2 cl-overflow-hidden cl-p-4 cl-rounded cl-shadow-lg cl-text-sm", {
+                "cl-bg-white": notification.colour === "default",
+                "cl-bg-primary-default": notification.colour === "primary",
+                "cl-bg-secondary-default": notification.colour === "secondary",
+                "cl-bg-danger-default": notification.colour === "danger",
+                "cl-bg-warning-default": notification.colour === "warning"
+              }],
+              onClick: ($event) => unref(removeNotification)(notification)
+            }), [
+              createElementVNode("span", _hoisted_2$m, toDisplayString(notification.message), 1),
+              createVNode(_component_icon, {
+                class: "cl-inline-block cl-opacity-0 cl-transition-opacity group-hover:cl-opacity-100",
+                icon: "ph:x",
+                size: 16,
+                weight: "bold"
+              })
+            ], 16, _hoisted_1$r);
+          }), 128))
+        ], 2)
+      ], 8, ["to"]);
+    };
+  }
+}));
+const _hoisted_1$q = { class: "cl-absolute cl-flex cl-flex-wrap cl-h-screen cl-max-h-screen cl-max-w-full cl-min-h-screen cl-min-w-full cl-w-full" };
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
+  props: {
+    removePadding: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(_sfc_main$s),
+        createElementVNode("div", _hoisted_1$q, [
+          renderSlot(_ctx.$slots, "header"),
+          createElementVNode("div", {
+            class: normalizeClass(["cl-content-start cl-flex cl-flex-nowrap cl-items-stretch cl-max-h-screen cl-relative cl-w-full", {
+              "cl-pt-20": _ctx.$slots.header
+            }])
+          }, [
+            renderSlot(_ctx.$slots, "navigation"),
+            createElementVNode("div", {
+              class: normalizeClass(["cl-grow cl-max-h-full cl-overflow-x-hidden cl-overflow-y-auto cl-w-auto", {
+                "md:cl-p-8 cl-p-2": !__props.removePadding
+              }])
+            }, [
+              renderSlot(_ctx.$slots, "default")
+            ], 2)
+          ], 2)
+        ])
+      ], 64);
+    };
   }
-  return valueToReturn;
+});
+var clUiLoadingSpinner_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _sfc_main$q = {};
+const _hoisted_1$p = { class: "loading-spinner" };
+function _sfc_render$4(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$p);
 }
+var ClUiLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$4], ["__scopeId", "data-v-60d7cfd0"]]);
+const _hoisted_1$o = ["disabled"];
+const __default__$3 = {
+  inheritAttrs: false
+};
+const _sfc_main$p = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$3), {
+  props: {
+    colour: { default: "default" },
+    size: { default: "medium" },
+    loading: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        withDirectives(createVNode(ClUiLoadingSpinner, { class: "cl-absolute" }, null, 512), [
+          [vShow, __props.loading]
+        ]),
+        withDirectives(createElementVNode("button", mergeProps(_ctx.$attrs, {
+          class: ["cl-align-middle cl-border cl-font-semibold cl-inline-block cl-overflow-visible cl-rounded cl-select-none cl-shadow cl-text-center cl-transition-colors", {
+            "cl-leading-8 cl-px-4 cl-text-sm": __props.size === "small",
+            "cl-leading-10 cl-px-8 cl-text-sm": __props.size === "medium",
+            "cl-leading-10 cl-px-10 cl-py-2": __props.size === "large",
+            "cl-bg-white cl-border-grey-0 hover:cl-border-grey-2 cl-text-secondary": __props.colour === "default",
+            "cl-border-primary-default cl-bg-primary-default cl-text-white hover:cl-bg-primary-light hover:cl-border-primary-light": __props.colour === "primary",
+            "cl-border-secondary-default cl-bg-secondary-default cl-text-white hover:cl-bg-secondary-light hover:cl-border-secondary-light": __props.colour === "secondary",
+            "cl-border-danger-default cl-bg-danger-default cl-text-white hover:cl-bg-danger-dark hover:cl-border-danger-dark": __props.colour === "danger",
+            "cl-border-link-default cl-bg-link-default cl-text-white hover:cl-bg-link-light hover:cl-border-link-light": __props.colour === "blue",
+            "!cl-border-grey-3 !cl-bg-grey-3 cl-text-grey-0 hover:!cl-bg-grey-3 hover:!cl-border-grey-3 cl-cursor-default": __props.disabled
+          }],
+          disabled: __props.disabled
+        }), [
+          renderSlot(_ctx.$slots, "default")
+        ], 16, _hoisted_1$o), [
+          [vShow, !__props.loading]
+        ])
+      ], 64);
+    };
+  }
+}));
+const buttonColours = [
+  "default",
+  "primary",
+  "secondary",
+  "danger",
+  "blue"
+];
+const buttonSizes = [
+  "small",
+  "medium",
+  "large"
+];
+const _hoisted_1$n = { key: 0 };
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  props: {
+    size: { default: "medium" },
+    hover: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["cl-border cl-border-transparent cl-overflow-hidden cl-relative cl-rounded-md cl-shadow-lg cl-transition-all", {
+          "cl-cursor-pointer hover:cl-shadow-xl hover:cl-border-grey-0": __props.hover
+        }])
+      }, [
+        _ctx.$slots.image ? (openBlock(), createElementBlock("div", _hoisted_1$n, [
+          renderSlot(_ctx.$slots, "image")
+        ])) : createCommentVNode("", true),
+        _ctx.$slots.title ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: normalizeClass(["cl-border-grey-2 cl-font-normal", {
+            "cl-p-2 cl-text-2xl cl-leading-8": __props.size === "small",
+            "cl-p-4 cl-text-3xl cl-leading-9": __props.size === "medium",
+            "cl-p-6 cl-text-4xl cl-leading-10": __props.size === "large",
+            "cl-border-t": _ctx.$slots.image
+          }])
+        }, [
+          renderSlot(_ctx.$slots, "title")
+        ], 2)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass(["cl-border-grey-2", {
+            "cl-p-2": __props.size === "small",
+            "cl-p-4": __props.size === "medium",
+            "cl-p-6": __props.size === "large",
+            "cl-border-t": _ctx.$slots.image || _ctx.$slots.title
+          }])
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 2),
+        _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
+          key: 2,
+          class: normalizeClass(["cl-border-grey-2 cl-border-t", {
+            "cl-p-2": __props.size === "small",
+            "cl-p-4": __props.size === "medium",
+            "cl-p-6": __props.size === "large"
+          }])
+        }, [
+          renderSlot(_ctx.$slots, "footer")
+        ], 2)) : createCommentVNode("", true)
+      ], 2);
+    };
+  }
+});
+const cardSizes = [
+  "small",
+  "medium",
+  "large"
+];
 var NumberFormat;
 (function(NumberFormat2) {
   NumberFormat2["CURRENCY"] = "currency";
@@ -408,12 +578,12 @@ function validateMinValue(minimumValue, typeOfValue, valueName, actualValue) {
           break;
         case "datetime":
           isValid = actualValue >= new Date(minimumValue).getTime();
-          validatedState = getValidatedInputState(isValid, t("input.afterOrEqualToValue", { label: valueName, min: new Date(minimumValue).toLocaleStringWithoutMilliseconds(locale) }));
+          validatedState = getValidatedInputState(isValid, t("input.afterOrEqualToValue", { label: valueName, min: i18n.global.d(new Date(minimumValue), DateFormat.DATETIME, locale != null ? locale : i18n.global.locale.value) }));
           break;
         case "time":
           timeValue = minimumValue.toDateFromTime();
           isValid = actualValue >= timeValue;
-          validatedState = getValidatedInputState(isValid, t("input.afterOrEqualToValue", { label: valueName, min: new Date(timeValue).toLocaleTimeStringWithoutMilliseconds(locale) }));
+          validatedState = getValidatedInputState(isValid, t("input.afterOrEqualToValue", { label: valueName, min: i18n.global.d(new Date(timeValue), DateFormat.TIME, locale != null ? locale : i18n.global.locale.value) }));
           break;
         default:
           validatedState.valid = true;
@@ -458,12 +628,12 @@ function validateMaxValue(maximumValue, typeOfValue, valueName, actualValue) {
           break;
         case "datetime":
           isValid = actualValue <= new Date(maximumValue).getTime();
-          validatedState = getValidatedInputState(isValid, t("input.beforeOrEqualToValue", { label: valueName, max: new Date(maximumValue).toLocaleStringWithoutMilliseconds(locale) }));
+          validatedState = getValidatedInputState(isValid, t("input.afterOrEqualToValue", { label: valueName, min: i18n.global.d(new Date(maximumValue), DateFormat.DATETIME, locale != null ? locale : i18n.global.locale.value) }));
           break;
         case "time":
           timeValue = maximumValue.toDateFromTime();
           isValid = actualValue <= timeValue;
-          validatedState = getValidatedInputState(isValid, t("input.beforeOrEqualToValue", { label: valueName, max: new Date(timeValue).toLocaleTimeStringWithoutMilliseconds(locale) }));
+          validatedState = getValidatedInputState(isValid, t("input.afterOrEqualToValue", { label: valueName, min: i18n.global.d(new Date(timeValue), DateFormat.TIME, locale != null ? locale : i18n.global.locale.value) }));
           break;
         default:
           validatedState.valid = true;
@@ -495,213 +665,6 @@ function getValidatedInputState(validationCheck, message) {
   };
   return validation;
 }
-const notifications = ref([]);
-function showNotification(notification) {
-  const newNotification = __spreadValues({
-    id: generateStringId()
-  }, notification);
-  notifications.value.push(newNotification);
-  setTimeout(() => removeNotification(newNotification), notification.duration);
-}
-function removeNotification(notification) {
-  notifications.value = notifications.value.filter((n) => n.id !== notification.id);
-}
-const _hoisted_1$r = ["onClick"];
-const _hoisted_2$m = { class: "cl-flex-1 cl-overflow-ellipsis cl-select-none cl-w-64" };
-const __default__$4 = {
-  inheritAttrs: false
-};
-function setup$4(__props) {
-  return (_ctx, _cache) => {
-    const _component_icon = resolveComponent("icon");
-    return openBlock(), createBlock(Teleport, { to: __props.container }, [
-      createElementVNode("div", {
-        class: normalizeClass(["cl-fixed cl-w-80 cl-z-40", {
-          "cl-top-5 cl-left-5": __props.position === "top-left",
-          "cl-top-5 cl-left-1/2": __props.position === "top-centre",
-          "cl-top-5 cl-right-5": __props.position === "top-right",
-          "cl-bottom-5 cl-left-5": __props.position === "bottom-left",
-          "cl-bottom-5 cl-left-1/2": __props.position === "bottom-centre",
-          "cl-bottom-5 cl-right-5": __props.position === "bottom-right"
-        }])
-      }, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(notifications), (notification, index) => {
-          return openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, {
-            key: index,
-            class: ["cl-break-words cl-cursor-pointer cl-flex cl-font-semibold cl-group cl-mb-2 cl-overflow-hidden cl-p-4 cl-rounded cl-shadow-lg cl-text-sm", {
-              "cl-bg-white": notification.colour === "default",
-              "cl-bg-primary-default": notification.colour === "primary",
-              "cl-bg-secondary-default": notification.colour === "secondary",
-              "cl-bg-danger-default": notification.colour === "danger",
-              "cl-bg-warning-default": notification.colour === "warning"
-            }],
-            onClick: ($event) => unref(removeNotification)(notification)
-          }), [
-            createElementVNode("span", _hoisted_2$m, toDisplayString(notification.message), 1),
-            createVNode(_component_icon, {
-              class: "cl-inline-block cl-opacity-0 cl-transition-opacity group-hover:cl-opacity-100",
-              icon: "ph:x",
-              size: 16,
-              weight: "bold"
-            })
-          ], 16, _hoisted_1$r);
-        }), 128))
-      ], 2)
-    ], 8, ["to"]);
-  };
-}
-const _sfc_main$s = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
-  props: {
-    container: { default: "body" },
-    position: { default: "top-right" }
-  },
-  setup: setup$4
-}));
-const _hoisted_1$q = { class: "cl-absolute cl-flex cl-flex-wrap cl-h-screen cl-max-h-screen cl-max-w-full cl-min-h-screen cl-min-w-full cl-w-full" };
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
-  props: {
-    removePadding: { type: Boolean, default: false }
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(_sfc_main$s),
-        createElementVNode("div", _hoisted_1$q, [
-          renderSlot(_ctx.$slots, "header"),
-          createElementVNode("div", {
-            class: normalizeClass(["cl-content-start cl-flex cl-flex-nowrap cl-items-stretch cl-max-h-screen cl-relative cl-w-full", {
-              "cl-pt-20": _ctx.$slots.header
-            }])
-          }, [
-            renderSlot(_ctx.$slots, "navigation"),
-            createElementVNode("div", {
-              class: normalizeClass(["cl-flex-grow cl-max-h-full cl-overflow-x-hidden cl-overflow-y-auto cl-w-auto", {
-                "md:cl-p-8 cl-p-2": !__props.removePadding
-              }])
-            }, [
-              renderSlot(_ctx.$slots, "default")
-            ], 2)
-          ], 2)
-        ])
-      ], 64);
-    };
-  }
-});
-var clUiLoadingSpinner_vue_vue_type_style_index_0_scoped_true_lang = "";
-const _sfc_main$q = {};
-const _hoisted_1$p = { class: "loading-spinner" };
-function _sfc_render$4(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$p);
-}
-var ClUiLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$4], ["__scopeId", "data-v-60d7cfd0"]]);
-const _hoisted_1$o = ["disabled"];
-const __default__$3 = {
-  inheritAttrs: false
-};
-function setup$3(__props) {
-  return (_ctx, _cache) => {
-    return openBlock(), createElementBlock(Fragment, null, [
-      withDirectives(createVNode(ClUiLoadingSpinner, { class: "cl-absolute" }, null, 512), [
-        [vShow, __props.loading]
-      ]),
-      withDirectives(createElementVNode("button", mergeProps(_ctx.$attrs, {
-        class: ["cl-align-middle cl-border cl-font-semibold cl-inline-block cl-overflow-visible cl-rounded cl-select-none cl-shadow cl-text-center cl-transition-colors", {
-          "cl-leading-8 cl-px-4 cl-text-sm": __props.size === "small",
-          "cl-leading-10 cl-px-8 cl-text-sm": __props.size === "medium",
-          "cl-leading-10 cl-px-10 cl-py-2": __props.size === "large",
-          "cl-bg-white cl-border-grey-0 hover:cl-border-grey-2 cl-text-secondary": __props.colour === "default",
-          "cl-border-primary-default cl-bg-primary-default cl-text-white hover:cl-bg-primary-light hover:cl-border-primary-light": __props.colour === "primary",
-          "cl-border-secondary-default cl-bg-secondary-default cl-text-white hover:cl-bg-secondary-light hover:cl-border-secondary-light": __props.colour === "secondary",
-          "cl-border-danger-default cl-bg-danger-default cl-text-white hover:cl-bg-danger-dark hover:cl-border-danger-dark": __props.colour === "danger",
-          "cl-border-link-default cl-bg-link-default cl-text-white hover:cl-bg-link-light hover:cl-border-link-light": __props.colour === "blue",
-          "!cl-border-grey-3 !cl-bg-grey-3 cl-text-grey-0 hover:!cl-bg-grey-3 hover:!cl-border-grey-3 cl-cursor-default": __props.disabled
-        }],
-        disabled: __props.disabled
-      }), [
-        renderSlot(_ctx.$slots, "default")
-      ], 16, _hoisted_1$o), [
-        [vShow, !__props.loading]
-      ])
-    ], 64);
-  };
-}
-const _sfc_main$p = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$3), {
-  props: {
-    colour: { default: "default" },
-    size: { default: "medium" },
-    loading: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false }
-  },
-  setup: setup$3
-}));
-const buttonColours = [
-  "default",
-  "primary",
-  "secondary",
-  "danger",
-  "blue"
-];
-const buttonSizes = [
-  "small",
-  "medium",
-  "large"
-];
-const _hoisted_1$n = { key: 0 };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
-  props: {
-    size: { default: "medium" },
-    hover: { type: Boolean, default: false }
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["cl-border cl-border-transparent cl-overflow-hidden cl-relative cl-rounded-md cl-shadow-lg cl-transition-all", {
-          "cl-cursor-pointer hover:cl-shadow-xl hover:cl-border-grey-0": __props.hover
-        }])
-      }, [
-        _ctx.$slots.image ? (openBlock(), createElementBlock("div", _hoisted_1$n, [
-          renderSlot(_ctx.$slots, "image")
-        ])) : createCommentVNode("", true),
-        _ctx.$slots.title ? (openBlock(), createElementBlock("div", {
-          key: 1,
-          class: normalizeClass(["cl-border-grey-2 cl-font-normal", {
-            "cl-p-2 cl-text-2xl cl-leading-8": __props.size === "small",
-            "cl-p-4 cl-text-3xl cl-leading-9": __props.size === "medium",
-            "cl-p-6 cl-text-4xl cl-leading-10": __props.size === "large",
-            "cl-border-t": _ctx.$slots.image
-          }])
-        }, [
-          renderSlot(_ctx.$slots, "title")
-        ], 2)) : createCommentVNode("", true),
-        createElementVNode("div", {
-          class: normalizeClass(["cl-border-grey-2", {
-            "cl-p-2": __props.size === "small",
-            "cl-p-4": __props.size === "medium",
-            "cl-p-6": __props.size === "large",
-            "cl-border-t": _ctx.$slots.image || _ctx.$slots.title
-          }])
-        }, [
-          renderSlot(_ctx.$slots, "default")
-        ], 2),
-        _ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
-          key: 2,
-          class: normalizeClass(["cl-border-grey-2 cl-border-t", {
-            "cl-p-2": __props.size === "small",
-            "cl-p-4": __props.size === "medium",
-            "cl-p-6": __props.size === "large"
-          }])
-        }, [
-          renderSlot(_ctx.$slots, "footer")
-        ], 2)) : createCommentVNode("", true)
-      ], 2);
-    };
-  }
-});
-const cardSizes = [
-  "small",
-  "medium",
-  "large"
-];
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var de = { exports: {} };
 (function(module, exports) {
@@ -1195,7 +1158,7 @@ const _hoisted_1$m = ["placeholder", "disabled"];
 const _hoisted_2$l = { class: "cl-absolute cl-bg-white cl-flex cl-right-2 cl-text-grey-4 cl-top-3.5" };
 const _sfc_main$n = /* @__PURE__ */ defineComponent({
   props: {
-    date: { default: () => null },
+    date: { default: null },
     datePlaceholder: { default: "Select date." },
     dateTimePlaceholder: { default: "Select date & time." },
     timePlaceholder: { default: "Select time." },
@@ -1372,10 +1335,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
       const _component_icon = resolveComponent("icon");
       return openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, { class: "cl-relative" }), [
         createElementVNode("input", mergeProps({
-          ref: (_value, _refs) => {
-            _refs["element"] = _value;
-            element.value = _value;
-          }
+          ref_key: "element",
+          ref: element
         }, _ctx.$attrs, {
           class: ["!cl-text-sm cl-border-grey-1 cl-rounded-lg focus:cl-border-blue-light focus:cl-ring-0", { "cl-bg-off-white": __props.disabled }],
           type: "text",
@@ -1506,7 +1467,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
             max: __props.max,
             step: __props.step,
             disabled: __props.disabled,
-            onInput: _cache[1] || (_cache[1] = ($event) => unref(debounce)(updateCurrentValue, [$event.target, _ctx.$forceUpdate]))
+            onInput: _cache[1] || (_cache[1] = ($event) => unref(debounce)(updateCurrentValue, $event.target, _ctx.$forceUpdate))
           }, null, 8, ["modelValue", "min", "max", "step", "disabled"]), [
             [vShow, __props.showNumericInput]
           ]),
@@ -1540,7 +1501,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var clUiSlider = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-31c5214e"]]);
+var clUiSlider = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-26895858"]]);
 function isInputText(type) {
   let isText = false;
   switch (type) {
@@ -1824,10 +1785,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           ]),
           __props.inputType !== "range" && !unref(isInputCalendarSupportedDate)(__props.inputType) ? withDirectives((openBlock(), createElementBlock("input", mergeProps({
             key: 0,
-            ref: (_value, _refs) => {
-              _refs["inputElement"] = _value;
-              inputElement.value = _value;
-            },
+            ref_key: "inputElement",
+            ref: inputElement,
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(currentValue) ? currentValue.value = $event : null)
           }, _ctx.$attrs, {
             class: ["cl-block cl-border cl-duration-300 cl-h-full cl-mb-1 cl-transition cl-w-full focus:cl-outline-none", {
@@ -1861,10 +1820,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             [vModelDynamic, unref(currentValue)]
           ]) : createCommentVNode("", true),
           unref(isInputCalendarSupportedDate)(__props.inputType) ? (openBlock(), createBlock(unref(_sfc_main$n), mergeProps({ key: 1 }, _ctx.$attrs, {
-            ref: (_value, _refs) => {
-              _refs["inputElement"] = _value;
-              inputElement.value = _value;
-            },
+            ref_key: "inputElement",
+            ref: inputElement,
             date: unref(currentDateValue),
             "onUpdate:date": _cache[4] || (_cache[4] = ($event) => isRef(currentDateValue) ? currentDateValue.value = $event : null),
             class: ["cl-block cl-duration-300 cl-h-fit cl-mb-1 cl-rounded-lg cl-text-sm cl-transition cl-w-full focus:cl-outline-none", {
@@ -1913,10 +1870,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
           ]),
           __props.inputType === "range" && typeof unref(currentValue) === "number" ? (openBlock(), createElementBlock("div", _hoisted_8$5, [
             createVNode(unref(clUiSlider), {
-              ref: (_value, _refs) => {
-                _refs["inputElement"] = _value;
-                inputElement.value = _value;
-              },
+              ref_key: "inputElement",
+              ref: inputElement,
               value: unref(currentValue),
               "onUpdate:value": _cache[8] || (_cache[8] = ($event) => isRef(currentValue) ? currentValue.value = $event : null),
               min: unref(minAsNumber),
@@ -1935,91 +1890,90 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ClUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-3848d1cc"]]);
+var ClUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-438103cc"]]);
 const _hoisted_1$j = { class: "cl-align-items-center cl-bg-black cl-bg-opacity-40 cl-bottom-0 cl-fixed cl-flex cl-h-screen cl-justify-center cl-left-0 cl-right-0 cl-top-0 cl-w-full cl-z-40" };
 const _hoisted_2$i = ["onKeypress"];
 const _hoisted_3$e = { class: "cl-overflow-y-auto cl-p-2 cl-w-full" };
 const __default__$2 = {
   inheritAttrs: false
 };
-function setup$2(__props) {
-  const props = __props;
-  const visible = ref(false);
-  function open() {
-    visible.value = true;
-    document.addEventListener("keydown", closeOnKeyPress);
-  }
-  function close() {
-    if (!props.preventClose) {
-      visible.value = false;
-      document.removeEventListener("keydown", closeOnKeyPress);
-    }
-  }
-  function closeOnKeyPress(event) {
-    if (event.key === "Escape") {
-      close();
-    }
-  }
-  return (_ctx, _cache) => {
-    const _component_icon = resolveComponent("icon");
-    return openBlock(), createElementBlock(Fragment, null, [
-      renderSlot(_ctx.$slots, "trigger", normalizeProps(guardReactiveProps({ open }))),
-      (openBlock(), createBlock(Teleport, { to: "body" }, [
-        createVNode(Transition, { name: "fade" }, {
-          default: withCtx(() => [
-            withDirectives(createElementVNode("div", _hoisted_1$j, [
-              createElementVNode("div", mergeProps(_ctx.$attrs, {
-                class: ["cl-bg-white cl-flex cl-flex-wrap cl-mx-0 cl-my-auto cl-overflow-y-auto cl-relative cl-rounded-lg cl-shadow-lg", {
-                  "lg:cl-w-2/12 cl-w-10/12": __props.size === "x-small",
-                  "cl-w-6/12": __props.size === "small",
-                  "cl-w-8/12": __props.size === "medium",
-                  "cl-w-10/12": __props.size === "large"
-                }]
-              }), [
-                withDirectives(createElementVNode("div", {
-                  class: normalizeClass(["cl-absolute cl-cursor-pointer cl-right-4 cl-top-4 cl-transition-colors cl-w-3", {
-                    "cl-text-white hover:cl-text-off-white": __props.headerColour === "secondary" || __props.headerColour === "primary",
-                    "cl-text-black hover:cl-text-grey-7": __props.headerColour === "white"
-                  }]),
-                  tabindex: 0,
-                  onKeypress: withKeys(close, ["enter"]),
-                  onClick: close
-                }, [
-                  createVNode(_component_icon, { icon: "ph:x" })
-                ], 42, _hoisted_2$i), [
-                  [vShow, !__props.preventClose]
-                ]),
-                createElementVNode("div", {
-                  class: normalizeClass(["cl-leading-[2.75rem] cl-min-h-12 cl-overflow-hidden cl-pl-3 cl-pr-8 cl-text-2xl cl-w-full", {
-                    "cl-border-b cl-border-grey-2": __props.headerColour === "white",
-                    "cl-bg-secondary-default cl-text-white": __props.headerColour === "secondary",
-                    "cl-bg-primary-default cl-text-white": __props.headerColour === "primary"
-                  }])
-                }, [
-                  renderSlot(_ctx.$slots, "title", normalizeProps(guardReactiveProps({ close })))
-                ], 2),
-                createElementVNode("div", _hoisted_3$e, [
-                  renderSlot(_ctx.$slots, "default")
-                ]),
-                renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps({ close })))
-              ], 16)
-            ], 512), [
-              [vShow, visible.value]
-            ])
-          ]),
-          _: 3
-        })
-      ]))
-    ], 64);
-  };
-}
 const _sfc_main$k = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$2), {
   props: {
     headerColour: { default: "white" },
     preventClose: { type: Boolean, default: false },
     size: { default: "medium" }
   },
-  setup: setup$2
+  setup(__props) {
+    const props = __props;
+    const visible = ref(false);
+    function open() {
+      visible.value = true;
+      document.addEventListener("keydown", closeOnKeyPress);
+    }
+    function close() {
+      if (!props.preventClose) {
+        visible.value = false;
+        document.removeEventListener("keydown", closeOnKeyPress);
+      }
+    }
+    function closeOnKeyPress(event) {
+      if (event.key === "Escape") {
+        close();
+      }
+    }
+    return (_ctx, _cache) => {
+      const _component_icon = resolveComponent("icon");
+      return openBlock(), createElementBlock(Fragment, null, [
+        renderSlot(_ctx.$slots, "trigger", normalizeProps(guardReactiveProps({ open }))),
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
+          createVNode(Transition, { name: "fade" }, {
+            default: withCtx(() => [
+              withDirectives(createElementVNode("div", _hoisted_1$j, [
+                createElementVNode("div", mergeProps(_ctx.$attrs, {
+                  class: ["cl-bg-white cl-flex cl-flex-wrap cl-mx-0 cl-my-auto cl-overflow-y-auto cl-relative cl-rounded-lg cl-shadow-lg", {
+                    "lg:cl-w-2/12 cl-w-10/12": __props.size === "x-small",
+                    "cl-w-6/12": __props.size === "small",
+                    "cl-w-8/12": __props.size === "medium",
+                    "cl-w-10/12": __props.size === "large"
+                  }]
+                }), [
+                  withDirectives(createElementVNode("div", {
+                    class: normalizeClass(["cl-absolute cl-cursor-pointer cl-right-4 cl-top-4 cl-transition-colors cl-w-3", {
+                      "cl-text-white hover:cl-text-off-white": __props.headerColour === "secondary" || __props.headerColour === "primary",
+                      "cl-text-black hover:cl-text-grey-7": __props.headerColour === "white"
+                    }]),
+                    tabindex: 0,
+                    onKeypress: withKeys(close, ["enter"]),
+                    onClick: close
+                  }, [
+                    createVNode(_component_icon, { icon: "ph:x" })
+                  ], 42, _hoisted_2$i), [
+                    [vShow, !__props.preventClose]
+                  ]),
+                  createElementVNode("div", {
+                    class: normalizeClass(["cl-leading-[2.75rem] cl-min-h-12 cl-overflow-hidden cl-pl-3 cl-pr-8 cl-text-2xl cl-w-full", {
+                      "cl-border-b cl-border-grey-2": __props.headerColour === "white",
+                      "cl-bg-secondary-default cl-text-white": __props.headerColour === "secondary",
+                      "cl-bg-primary-default cl-text-white": __props.headerColour === "primary"
+                    }])
+                  }, [
+                    renderSlot(_ctx.$slots, "title", normalizeProps(guardReactiveProps({ close })))
+                  ], 2),
+                  createElementVNode("div", _hoisted_3$e, [
+                    renderSlot(_ctx.$slots, "default")
+                  ]),
+                  renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps({ close })))
+                ], 16)
+              ], 512), [
+                [vShow, visible.value]
+              ])
+            ]),
+            _: 3
+          })
+        ]))
+      ], 64);
+    };
+  }
 }));
 const _hoisted_1$i = { class: "cl-bg-grey-2 cl-border-b cl-border-grey-2 cl-border-t cl-flex cl-p-1" };
 const _hoisted_2$h = {
@@ -2071,7 +2025,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     isCreateNewOption: { type: Boolean, default: false },
     selectedIndex: { default: -1 },
     text: { default: "" },
-    option: { default: () => null },
+    option: { default: null },
     index: null
   },
   emits: {
@@ -2276,10 +2230,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       var _a;
       const _component_cl_ui_loading_spinner = resolveComponent("cl-ui-loading-spinner");
       return openBlock(), createElementBlock("div", {
-        ref: (_value, _refs) => {
-          _refs["container"] = _value;
-          container.value = _value;
-        },
+        ref_key: "container",
+        ref: container,
         class: "cl-bg-white cl-border cl-border-collapse cl-border-grey-0 cl-h-52 cl-overflow-y-auto cl-p-2 cl-rounded cl-text-sm",
         onKeydown: [
           _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => onKeyboardArrowUp(unref(firstIndexInResults)), ["prevent", "stop"]), ["up"])),
@@ -2361,8 +2313,8 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     canCreateNewObject: { type: Boolean, default: false },
     canClearSelectedObject: { type: Boolean, default: true },
     errorMessage: { default: "" },
-    objectCreatedResponse: { default: () => null },
-    parentObjectCreatedResponse: { default: () => null },
+    objectCreatedResponse: { default: null },
+    parentObjectCreatedResponse: { default: null },
     results: { default: () => [] },
     parentResults: { default: () => [] },
     currentObject: null
@@ -2680,95 +2632,173 @@ const _hoisted_4$8 = {
 const __default__$1 = {
   inheritAttrs: false
 };
-function setup$1(__props, { emit }) {
-  const props = __props;
-  const { d, n } = useI18n();
-  const currentRecord = ref(copy(props.record));
-  const edited = computed(() => {
-    var _a, _b;
-    return currentRecord.value[(_a = props.column.field) != null ? _a : ""] !== props.record[(_b = props.column.field) != null ? _b : ""];
-  });
-  function getStringValue(record, key) {
-    return record[key];
-  }
-  function getNumericValue(record, key) {
-    return record[key];
+const _sfc_main$e = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
+  props: {
+    column: null,
+    record: null,
+    editMode: { type: Boolean, default: false }
+  },
+  emits: {
+    edit: null,
+    focus: null,
+    "undo-edit": null
+  },
+  setup(__props, { emit }) {
+    const props = __props;
+    const { d, n } = useI18n();
+    const currentRecord = ref(copy(props.record));
+    const edited = computed(() => {
+      var _a, _b;
+      return currentRecord.value[(_a = props.column.field) != null ? _a : ""] !== props.record[(_b = props.column.field) != null ? _b : ""];
+    });
+    function getStringValue(record, key) {
+      return record[key];
+    }
+    function getNumericValue(record, key) {
+      return record[key];
+    }
+    function getBooleanValue(record, key) {
+      return record[key];
+    }
+    function cellFocused() {
+      emit("focus");
+    }
+    watchEffect(() => currentRecord.value = copy(props.record));
+    watch(currentRecord, (newValue) => {
+      var _a;
+      const property = (_a = props.column.field) != null ? _a : "";
+      if (property !== "") {
+        if (newValue[property] !== props.record[property]) {
+          emit("edit", newValue[property]);
+        } else {
+          emit("undo-edit");
+        }
+      }
+    }, {
+      deep: true
+    });
+    return (_ctx, _cache) => {
+      return __props.editMode && __props.column.field && __props.column.editable ? (openBlock(), createElementBlock("td", mergeProps({ key: 0 }, _ctx.$attrs, {
+        class: ["cl-transition-colours", {
+          "cl-bg-link-lighter": unref(edited)
+        }]
+      }), [
+        createElementVNode("strong", _hoisted_1$d, toDisplayString(__props.column.caption), 1),
+        renderSlot(_ctx.$slots, `${__props.column.name}Edit`, normalizeProps(guardReactiveProps({
+          cellFocused,
+          column: __props.column,
+          edited: unref(edited),
+          record: currentRecord.value
+        })))
+      ], 16)) : (openBlock(), createElementBlock("td", normalizeProps(mergeProps({ key: 1 }, _ctx.$attrs)), [
+        createElementVNode("strong", _hoisted_2$c, toDisplayString(__props.column.caption), 1),
+        __props.column.type === "slot" ? renderSlot(_ctx.$slots, __props.column.name, normalizeProps(mergeProps({ key: 0 }, { column: __props.column, record: __props.record }))) : __props.column.type === "boolean" && __props.column.field !== void 0 ? (openBlock(), createBlock(ClUiInput, {
+          key: 1,
+          "input-type": "checkbox",
+          "model-value": getBooleanValue(__props.record, __props.column.field),
+          disabled: true
+        }, null, 8, ["model-value"])) : (__props.column.type === "date" || __props.column.type === "datetime") && __props.column.field !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          __props.column.format !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createTextVNode(toDisplayString(unref(d)(new Date(getStringValue(__props.record, __props.column.field)), __props.column.format)), 1)
+          ], 64)) : __props.column.type === "date" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            createTextVNode(toDisplayString(unref(d)(new Date(getStringValue(__props.record, __props.column.field)), unref(DateFormat).DATE)), 1)
+          ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+            createTextVNode(toDisplayString(unref(d)(new Date(getStringValue(__props.record, __props.column.field)), unref(DateFormat).DATETIME)), 1)
+          ], 64))
+        ], 64)) : __props.column.type === "number" && __props.column.field ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+          __props.column.format === unref(NumberFormat).MULTIPLIER ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            createTextVNode(" \xD7" + toDisplayString(getNumericValue(__props.record, __props.column.field)), 1)
+          ], 64)) : __props.column.format !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            createTextVNode(toDisplayString(unref(n)(getNumericValue(__props.record, __props.column.field), __props.column.format)), 1)
+          ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+            createTextVNode(toDisplayString(getNumericValue(__props.record, __props.column.field)), 1)
+          ], 64))
+        ], 64)) : __props.column.field !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [
+          __props.column.maxLength !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_3$a, toDisplayString(getStringValue(__props.record, __props.column.field).trimToLength(__props.column.maxLength, __props.column.format !== void 0 ? __props.column.format === "ellipsis" : false)), 1)) : (openBlock(), createElementBlock("span", _hoisted_4$8, toDisplayString(getStringValue(__props.record, __props.column.field)), 1))
+        ], 64)) : createCommentVNode("", true)
+      ], 16));
+    };
   }
-  function getBooleanValue(record, key) {
-    return record[key];
+}));
+const gridColumnTypes = [
+  "string",
+  "boolean",
+  "number",
+  "date",
+  "datetime",
+  "slot"
+];
+function isGridColumn(objectToTest) {
+  return typeof objectToTest.caption === "string" && typeof objectToTest.name === "string" && typeof objectToTest.type === "string";
+}
+function isGridColumnArray(arrayToTest) {
+  let arrayIsValid = Array.isArray(arrayToTest);
+  if (arrayIsValid) {
+    for (const objectToTest of arrayToTest) {
+      if (!isGridColumn(objectToTest)) {
+        arrayIsValid = false;
+        break;
+      }
+    }
   }
-  function cellFocused() {
-    emit("focus");
+  return arrayIsValid;
+}
+const stringFormats = ["ellipsis"];
+var FilterOperation;
+(function(FilterOperation2) {
+  FilterOperation2[FilterOperation2["CONTAINS"] = 0] = "CONTAINS";
+  FilterOperation2[FilterOperation2["NOT_CONTAINS"] = 1] = "NOT_CONTAINS";
+  FilterOperation2[FilterOperation2["EQUAL"] = 2] = "EQUAL";
+  FilterOperation2[FilterOperation2["NOT_EQUAL"] = 3] = "NOT_EQUAL";
+  FilterOperation2[FilterOperation2["STARTS_WITH"] = 4] = "STARTS_WITH";
+  FilterOperation2[FilterOperation2["ENDS_WITH"] = 5] = "ENDS_WITH";
+  FilterOperation2[FilterOperation2["GREATER_THAN"] = 6] = "GREATER_THAN";
+  FilterOperation2[FilterOperation2["LESS_THAN"] = 7] = "LESS_THAN";
+  FilterOperation2[FilterOperation2["EQUAL_OR_GREATER_THAN"] = 8] = "EQUAL_OR_GREATER_THAN";
+  FilterOperation2[FilterOperation2["EQUAL_OR_LESS_THAN"] = 9] = "EQUAL_OR_LESS_THAN";
+})(FilterOperation || (FilterOperation = {}));
+const filterMethodTypes = [
+  "equal",
+  "notequal",
+  "contains",
+  "notcontains",
+  "lessthan",
+  "greaterthan",
+  "startswith",
+  "endswith",
+  "equalorlessthan",
+  "equalorgreaterthan"
+];
+function isFilterArgs(objectToTest) {
+  return typeof objectToTest.filterOnColumn === "string" && typeof objectToTest.filterOperation === "number" && typeof objectToTest.filterValue === "string";
+}
+function isSortArgs(objectToTest) {
+  return objectToTest === null || typeof objectToTest.sortByAscending === "boolean" && typeof objectToTest.sortOnColumn === "string";
+}
+function isFilterRequest(objectToTest) {
+  let objectValid = typeof objectToTest.filters === "object" && Array.isArray(objectToTest.filters) && typeof objectToTest.pageNumber === "number" && typeof objectToTest.pageSize === "number" && typeof objectToTest.sort === "object" && isSortArgs(objectToTest.sort);
+  if (objectValid) {
+    for (const filterArgs of objectToTest.filters) {
+      if (!isFilterArgs(filterArgs)) {
+        objectValid = false;
+        break;
+      }
+    }
   }
-  watchEffect(() => currentRecord.value = copy(props.record));
-  watch(currentRecord, (newValue) => {
-    var _a;
-    const property = (_a = props.column.field) != null ? _a : "";
-    if (property !== "") {
-      if (newValue[property] !== props.record[property]) {
-        emit("edit", newValue[property]);
-      } else {
-        emit("undo-edit");
+  return objectValid;
+}
+function isFilterResponse(objectToTest, resultValidator) {
+  let objectValid = typeof objectToTest.results === "object" && Array.isArray(objectToTest.results) && typeof objectToTest.totalRecords === "number";
+  if (objectValid) {
+    for (const result of objectToTest.results) {
+      if (!resultValidator(result)) {
+        objectValid = false;
+        break;
       }
     }
-  }, {
-    deep: true
-  });
-  return (_ctx, _cache) => {
-    return __props.editMode && __props.column.field && __props.column.editable ? (openBlock(), createElementBlock("td", mergeProps({ key: 0 }, _ctx.$attrs, {
-      class: ["cl-transition-colours", {
-        "cl-bg-link-lighter": unref(edited)
-      }]
-    }), [
-      createElementVNode("strong", _hoisted_1$d, toDisplayString(__props.column.caption), 1),
-      renderSlot(_ctx.$slots, `${__props.column.name}Edit`, normalizeProps(guardReactiveProps({
-        cellFocused,
-        column: __props.column,
-        edited: unref(edited),
-        record: currentRecord.value
-      })))
-    ], 16)) : (openBlock(), createElementBlock("td", normalizeProps(mergeProps({ key: 1 }, _ctx.$attrs)), [
-      createElementVNode("strong", _hoisted_2$c, toDisplayString(__props.column.caption), 1),
-      __props.column.type === "slot" ? renderSlot(_ctx.$slots, __props.column.name, normalizeProps(mergeProps({ key: 0 }, { column: __props.column, record: __props.record }))) : __props.column.type === "boolean" && __props.column.field !== void 0 ? (openBlock(), createBlock(ClUiInput, {
-        key: 1,
-        "input-type": "checkbox",
-        "model-value": getBooleanValue(__props.record, __props.column.field),
-        disabled: true
-      }, null, 8, ["model-value"])) : (__props.column.type === "date" || __props.column.type === "datetime") && __props.column.field !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-        __props.column.format !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          createTextVNode(toDisplayString(unref(d)(new Date(getStringValue(__props.record, __props.column.field)), __props.column.format)), 1)
-        ], 64)) : __props.column.type === "date" ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createTextVNode(toDisplayString(unref(d)(new Date(getStringValue(__props.record, __props.column.field)), unref(DateFormat).DATE)), 1)
-        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          createTextVNode(toDisplayString(unref(d)(new Date(getStringValue(__props.record, __props.column.field)), unref(DateFormat).DATETIME)), 1)
-        ], 64))
-      ], 64)) : __props.column.type === "number" && __props.column.field ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
-        __props.column.format === unref(NumberFormat).MULTIPLIER ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          createTextVNode(" \xD7" + toDisplayString(getNumericValue(__props.record, __props.column.field)), 1)
-        ], 64)) : __props.column.format !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createTextVNode(toDisplayString(unref(n)(getNumericValue(__props.record, __props.column.field), __props.column.format)), 1)
-        ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          createTextVNode(toDisplayString(getNumericValue(__props.record, __props.column.field)), 1)
-        ], 64))
-      ], 64)) : __props.column.field !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [
-        __props.column.maxLength !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_3$a, toDisplayString(getStringValue(__props.record, __props.column.field).trimToLength(__props.column.maxLength, __props.column.format !== void 0 ? __props.column.format === "ellipsis" : false)), 1)) : (openBlock(), createElementBlock("span", _hoisted_4$8, toDisplayString(getStringValue(__props.record, __props.column.field)), 1))
-      ], 64)) : createCommentVNode("", true)
-    ], 16));
-  };
+  }
+  return objectValid;
 }
-const _sfc_main$e = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$1), {
-  props: {
-    column: null,
-    record: null,
-    editMode: { type: Boolean, default: false }
-  },
-  emits: {
-    edit: null,
-    focus: null,
-    "undo-edit": null
-  },
-  setup: setup$1
-}));
 const defaultFilterMethod = {
   method: "equal",
   icon: "&equals;",
@@ -2860,85 +2890,6 @@ const filterMethods = [
     ]
   }
 ];
-const gridColumnTypes = [
-  "string",
-  "boolean",
-  "number",
-  "date",
-  "datetime",
-  "slot"
-];
-function isGridColumn(objectToTest) {
-  return typeof objectToTest.caption === "string" && typeof objectToTest.name === "string" && typeof objectToTest.type === "string";
-}
-function isGridColumnArray(arrayToTest) {
-  let arrayIsValid = Array.isArray(arrayToTest);
-  if (arrayIsValid) {
-    for (const objectToTest of arrayToTest) {
-      if (!isGridColumn(objectToTest)) {
-        arrayIsValid = false;
-        break;
-      }
-    }
-  }
-  return arrayIsValid;
-}
-const stringFormats = ["ellipsis"];
-var FilterOperation;
-(function(FilterOperation2) {
-  FilterOperation2[FilterOperation2["CONTAINS"] = 0] = "CONTAINS";
-  FilterOperation2[FilterOperation2["NOT_CONTAINS"] = 1] = "NOT_CONTAINS";
-  FilterOperation2[FilterOperation2["EQUAL"] = 2] = "EQUAL";
-  FilterOperation2[FilterOperation2["NOT_EQUAL"] = 3] = "NOT_EQUAL";
-  FilterOperation2[FilterOperation2["STARTS_WITH"] = 4] = "STARTS_WITH";
-  FilterOperation2[FilterOperation2["ENDS_WITH"] = 5] = "ENDS_WITH";
-  FilterOperation2[FilterOperation2["GREATER_THAN"] = 6] = "GREATER_THAN";
-  FilterOperation2[FilterOperation2["LESS_THAN"] = 7] = "LESS_THAN";
-  FilterOperation2[FilterOperation2["EQUAL_OR_GREATER_THAN"] = 8] = "EQUAL_OR_GREATER_THAN";
-  FilterOperation2[FilterOperation2["EQUAL_OR_LESS_THAN"] = 9] = "EQUAL_OR_LESS_THAN";
-})(FilterOperation || (FilterOperation = {}));
-const filterMethodTypes = [
-  "equal",
-  "notequal",
-  "contains",
-  "notcontains",
-  "lessthan",
-  "greaterthan",
-  "startswith",
-  "endswith",
-  "equalorlessthan",
-  "equalorgreaterthan"
-];
-function isFilterArgs(objectToTest) {
-  return typeof objectToTest.filterOnColumn === "string" && typeof objectToTest.filterOperation === "number" && typeof objectToTest.filterValue === "string";
-}
-function isSortArgs(objectToTest) {
-  return objectToTest === null || typeof objectToTest.sortByAscending === "boolean" && typeof objectToTest.sortOnColumn === "string";
-}
-function isFilterRequest(objectToTest) {
-  let objectValid = typeof objectToTest.filters === "object" && Array.isArray(objectToTest.filters) && typeof objectToTest.pageNumber === "number" && typeof objectToTest.pageSize === "number" && typeof objectToTest.sort === "object" && isSortArgs(objectToTest.sort);
-  if (objectValid) {
-    for (const filterArgs of objectToTest.filters) {
-      if (!isFilterArgs(filterArgs)) {
-        objectValid = false;
-        break;
-      }
-    }
-  }
-  return objectValid;
-}
-function isFilterResponse(objectToTest, resultValidator) {
-  let objectValid = typeof objectToTest.results === "object" && Array.isArray(objectToTest.results) && typeof objectToTest.totalRecords === "number";
-  if (objectValid) {
-    for (const result of objectToTest.results) {
-      if (!resultValidator(result)) {
-        objectValid = false;
-        break;
-      }
-    }
-  }
-  return objectValid;
-}
 const _hoisted_1$c = {
   key: 0,
   class: "cl-border-grey-2 cl-border-r cl-capitalize cl-group cl-inline cl-relative cl-w-auto"
@@ -3152,14 +3103,14 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
           class: "cl-border-none cl-mb-0 cl-w-full",
           "input-type": "number",
           "show-arrows": false,
-          onInput: _cache[3] || (_cache[3] = ($event) => unref(debounce)(setNumberFilter, [$event.target]))
+          onInput: _cache[3] || (_cache[3] = ($event) => unref(debounce)(setNumberFilter, $event.target))
         }, null, 8, ["modelValue"])) : __props.column.type !== "slot" || __props.column.slotType === "string" && typeof __props.column.field !== "undefined" ? (openBlock(), createBlock(ClUiInput, {
           key: 4,
           modelValue: filterInput.value,
           "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => filterInput.value = $event),
           class: "cl-border-none cl-mb-0 cl-w-full",
           "input-type": "text",
-          onInput: _cache[5] || (_cache[5] = ($event) => unref(debounce)(setFilter, [$event.target]))
+          onInput: _cache[5] || (_cache[5] = ($event) => unref(debounce)(setFilter, $event.target))
         }, null, 8, ["modelValue"])) : createCommentVNode("", true)
       ], 2)) : (openBlock(), createElementBlock("div", _hoisted_12$3, " \xA0 "));
     };
@@ -3187,7 +3138,7 @@ const _hoisted_16$1 = { class: "cl-block lg:cl-inline-block" };
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
   props: {
     request: null,
-    data: { default: () => null }
+    data: { default: null }
   },
   emits: {
     "update:request": null
@@ -3204,7 +3155,10 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     const { n, t: t2 } = useI18n();
     const { debounce } = useDebouncer();
     const currentPage = ref(props.request.pageNumber);
-    const totalPages = computed(() => props.data !== null ? Math.ceil(props.data.totalRecords / props.request.pageSize) : 1);
+    const totalPages = computed(() => {
+      var _a, _b;
+      return props.data !== null ? Math.ceil((_b = (_a = props.data) == null ? void 0 : _a.totalRecords) != null ? _b : 0 / props.request.pageSize) : 1;
+    });
     const pageNumbers = computed(() => {
       const calculatedPageNumbers = Array.from(Array(totalPages.value + 1).keys());
       let results = [];
@@ -3249,7 +3203,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             "show-label": false,
             min: "1",
             max: unref(totalPages),
-            onInput: _cache[1] || (_cache[1] = ($event) => unref(debounce)(setPageFromInput, [$event.target]))
+            onInput: _cache[1] || (_cache[1] = ($event) => unref(debounce)(setPageFromInput, $event.target))
           }, null, 8, ["modelValue", "max"])
         ]),
         createElementVNode("div", _hoisted_4$6, [
@@ -3352,105 +3306,6 @@ const _hoisted_12$1 = { key: 1 };
 const __default__ = {
   inheritAttrs: false
 };
-function setup(__props, { emit }) {
-  const props = __props;
-  const { t: t2 } = useI18n();
-  const visible = ref(false);
-  function moveColumn(columns, oldIndex, newIndex) {
-    if (newIndex < columns.length && newIndex >= 0) {
-      columns.splice(newIndex, 0, columns.splice(oldIndex, 1)[0]);
-    }
-  }
-  function updateColumnVisibility(target, column) {
-    var _a;
-    const gridColumns = copy(props.columns);
-    const checked = (_a = target == null ? void 0 : target.checked) != null ? _a : false;
-    const targetColumnIndex = gridColumns.findIndex((c) => c.name === column.name);
-    if (targetColumnIndex >= 0) {
-      gridColumns[targetColumnIndex].visible = checked;
-    }
-    emit("update:columns", gridColumns);
-  }
-  function changeColumnOrder(columnIndex, direction) {
-    const gridColumns = copy(props.columns);
-    const newIndex = direction === "up" ? columnIndex + 1 : columnIndex - 1;
-    moveColumn(gridColumns, columnIndex, newIndex);
-    emit("update:columns", gridColumns);
-  }
-  return (_ctx, _cache) => {
-    const _component_icon = resolveComponent("icon");
-    return openBlock(), createElementBlock(Fragment, null, [
-      createVNode(_sfc_main$p, mergeProps(_ctx.$attrs, {
-        class: "cl-w-full",
-        size: "small",
-        onClick: _cache[0] || (_cache[0] = withModifiers(($event) => visible.value = true, ["prevent"]))
-      }), {
-        default: withCtx(() => [
-          createTextVNode(toDisplayString(unref(t2)("grid.manageView")), 1)
-        ]),
-        _: 1
-      }, 16),
-      (openBlock(), createBlock(Teleport, { to: "body" }, [
-        createVNode(Transition, { name: "slide-left" }, {
-          default: withCtx(() => [
-            withDirectives(createElementVNode("div", _hoisted_1$a, [
-              createElementVNode("div", _hoisted_2$9, [
-                createVNode(_component_icon, {
-                  class: "cl-absolute cl-cursor-pointer cl-right-3 cl-text-off-white cl-top-3",
-                  icon: "ph:x",
-                  size: 16,
-                  onClick: _cache[1] || (_cache[1] = ($event) => visible.value = false)
-                }),
-                createElementVNode("h3", _hoisted_3$7, toDisplayString(unref(t2)("grid.manageView")), 1),
-                createElementVNode("ul", _hoisted_4$5, [
-                  createElementVNode("li", _hoisted_5$3, [
-                    createElementVNode("strong", _hoisted_6$3, toDisplayString(unref(t2)("grid.column")), 1),
-                    createElementVNode("strong", _hoisted_7$3, toDisplayString(unref(t2)("grid.visible")), 1),
-                    createElementVNode("strong", _hoisted_8$2, toDisplayString(unref(t2)("grid.order")), 1)
-                  ]),
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column, index) => {
-                    return openBlock(), createElementBlock("li", {
-                      key: index,
-                      class: "cl-border-b cl-border-grey-2 cl-flex cl-py-2 cl-text-sm cl-w-full"
-                    }, [
-                      createElementVNode("div", _hoisted_9$2, toDisplayString(column.caption), 1),
-                      createElementVNode("div", _hoisted_10$2, [
-                        createVNode(ClUiInput, {
-                          "model-value": column.visible === void 0 || column.visible === true,
-                          "input-type": "checkbox",
-                          onClick: ($event) => updateColumnVisibility($event.target, column)
-                        }, null, 8, ["model-value", "onClick"])
-                      ]),
-                      createElementVNode("div", _hoisted_11$1, [
-                        column.visible === void 0 || column.visible === true ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                          index !== 0 ? (openBlock(), createBlock(_component_icon, {
-                            key: 0,
-                            class: "cl-cursor-pointer cl-inline-block cl-mr-2",
-                            icon: "ph:arrow-left",
-                            onClick: ($event) => changeColumnOrder(index, "down")
-                          }, null, 8, ["onClick"])) : createCommentVNode("", true),
-                          index !== __props.columns.length - 1 ? (openBlock(), createBlock(_component_icon, {
-                            key: 1,
-                            class: "cl-cursor-pointer cl-inline-block",
-                            icon: "ph:arrow-right",
-                            onClick: ($event) => changeColumnOrder(index, "up")
-                          }, null, 8, ["onClick"])) : createCommentVNode("", true)
-                        ], 64)) : (openBlock(), createElementBlock("em", _hoisted_12$1, toDisplayString(unref(t2)("grid.hidden")), 1))
-                      ])
-                    ]);
-                  }), 128))
-                ])
-              ])
-            ], 512), [
-              [vShow, visible.value]
-            ])
-          ]),
-          _: 1
-        })
-      ]))
-    ], 64);
-  };
-}
 const _sfc_main$b = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
   props: {
     columns: null
@@ -3458,7 +3313,105 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   emits: {
     "update:columns": null
   },
-  setup
+  setup(__props, { emit }) {
+    const props = __props;
+    const { t: t2 } = useI18n();
+    const visible = ref(false);
+    function moveColumn(columns, oldIndex, newIndex) {
+      if (newIndex < columns.length && newIndex >= 0) {
+        columns.splice(newIndex, 0, columns.splice(oldIndex, 1)[0]);
+      }
+    }
+    function updateColumnVisibility(target, column) {
+      var _a;
+      const gridColumns = copy(props.columns);
+      const checked = (_a = target == null ? void 0 : target.checked) != null ? _a : false;
+      const targetColumnIndex = gridColumns.findIndex((c) => c.name === column.name);
+      if (targetColumnIndex >= 0) {
+        gridColumns[targetColumnIndex].visible = checked;
+      }
+      emit("update:columns", gridColumns);
+    }
+    function changeColumnOrder(columnIndex, direction) {
+      const gridColumns = copy(props.columns);
+      const newIndex = direction === "up" ? columnIndex + 1 : columnIndex - 1;
+      moveColumn(gridColumns, columnIndex, newIndex);
+      emit("update:columns", gridColumns);
+    }
+    return (_ctx, _cache) => {
+      const _component_icon = resolveComponent("icon");
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(_sfc_main$p, mergeProps(_ctx.$attrs, {
+          class: "cl-w-full",
+          size: "small",
+          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => visible.value = true, ["prevent"]))
+        }), {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(unref(t2)("grid.manageView")), 1)
+          ]),
+          _: 1
+        }, 16),
+        (openBlock(), createBlock(Teleport, { to: "body" }, [
+          createVNode(Transition, { name: "slide-left" }, {
+            default: withCtx(() => [
+              withDirectives(createElementVNode("div", _hoisted_1$a, [
+                createElementVNode("div", _hoisted_2$9, [
+                  createVNode(_component_icon, {
+                    class: "cl-absolute cl-cursor-pointer cl-right-3 cl-text-off-white cl-top-3",
+                    icon: "ph:x",
+                    size: 16,
+                    onClick: _cache[1] || (_cache[1] = ($event) => visible.value = false)
+                  }),
+                  createElementVNode("h3", _hoisted_3$7, toDisplayString(unref(t2)("grid.manageView")), 1),
+                  createElementVNode("ul", _hoisted_4$5, [
+                    createElementVNode("li", _hoisted_5$3, [
+                      createElementVNode("strong", _hoisted_6$3, toDisplayString(unref(t2)("grid.column")), 1),
+                      createElementVNode("strong", _hoisted_7$3, toDisplayString(unref(t2)("grid.visible")), 1),
+                      createElementVNode("strong", _hoisted_8$2, toDisplayString(unref(t2)("grid.order")), 1)
+                    ]),
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(__props.columns, (column, index) => {
+                      return openBlock(), createElementBlock("li", {
+                        key: index,
+                        class: "cl-border-b cl-border-grey-2 cl-flex cl-py-2 cl-text-sm cl-w-full"
+                      }, [
+                        createElementVNode("div", _hoisted_9$2, toDisplayString(column.caption), 1),
+                        createElementVNode("div", _hoisted_10$2, [
+                          createVNode(ClUiInput, {
+                            "model-value": column.visible === void 0 || column.visible === true,
+                            "input-type": "checkbox",
+                            onClick: ($event) => updateColumnVisibility($event.target, column)
+                          }, null, 8, ["model-value", "onClick"])
+                        ]),
+                        createElementVNode("div", _hoisted_11$1, [
+                          column.visible === void 0 || column.visible === true ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                            index !== 0 ? (openBlock(), createBlock(_component_icon, {
+                              key: 0,
+                              class: "cl-cursor-pointer cl-inline-block cl-mr-2",
+                              icon: "ph:arrow-left",
+                              onClick: ($event) => changeColumnOrder(index, "down")
+                            }, null, 8, ["onClick"])) : createCommentVNode("", true),
+                            index !== __props.columns.length - 1 ? (openBlock(), createBlock(_component_icon, {
+                              key: 1,
+                              class: "cl-cursor-pointer cl-inline-block",
+                              icon: "ph:arrow-right",
+                              onClick: ($event) => changeColumnOrder(index, "up")
+                            }, null, 8, ["onClick"])) : createCommentVNode("", true)
+                          ], 64)) : (openBlock(), createElementBlock("em", _hoisted_12$1, toDisplayString(unref(t2)("grid.hidden")), 1))
+                        ])
+                      ]);
+                    }), 128))
+                  ])
+                ])
+              ], 512), [
+                [vShow, visible.value]
+              ])
+            ]),
+            _: 1
+          })
+        ]))
+      ], 64);
+    };
+  }
 }));
 const _hoisted_1$9 = {
   key: 0,
@@ -3575,7 +3528,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     columns: null,
     request: null,
     loading: { type: Boolean },
-    data: { default: () => null }
+    data: { default: null }
   },
   emits: {
     "update:columns": null,
@@ -3908,7 +3861,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var clUiGrid = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-4e7c7908"]]);
+var clUiGrid = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-7df0fada"]]);
 const _sfc_main$8 = {};
 const _hoisted_1$7 = { class: "cl-absolute cl-bg-secondary-default cl-flex cl-h-20 cl-items-center cl-justify-between cl-left-0 cl-top-0 cl-w-full cl-z-40" };
 const _hoisted_2$6 = { class: "cl-flex cl-flex-nowrap" };
@@ -3925,14 +3878,14 @@ var clUiHeader = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_rende
 const _hoisted_1$6 = { class: "md:cl-relative" };
 const _hoisted_2$5 = { class: "cl-bg-blue-light cl-flex cl-items-center cl-select-none md:cl-min-w-[320px]" };
 const _hoisted_3$4 = ["src"];
-const _hoisted_4$2 = { class: "cl-cursor-default cl-flex-grow cl-hidden cl-my-4 cl-text-white md:cl-block" };
+const _hoisted_4$2 = { class: "cl-cursor-default cl-grow cl-hidden cl-my-4 cl-text-white md:cl-block" };
 const _hoisted_5$1 = {
   key: 0,
-  class: "cl-cursor-default cl-overflow-ellipsis cl-whitespace-nowrap"
+  class: "cl-cursor-default cl-text-ellipsis cl-whitespace-nowrap"
 };
 const _hoisted_6$1 = {
   key: 1,
-  class: "cl-cursor-default cl-overflow-ellipsis cl-text-xs cl-whitespace-nowrap"
+  class: "cl-cursor-default cl-text-ellipsis cl-text-xs cl-whitespace-nowrap"
 };
 const _hoisted_7$1 = { class: "cl-absolute cl-bg-white cl-right-0 cl-shadow-2xl cl-top-20 cl-w-full cl-z-20" };
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
@@ -4479,245 +4432,6 @@ var components = /* @__PURE__ */ Object.freeze({
   clUiNavigationItem,
   clUiNotification: _sfc_main$s
 });
-function levenshtein(firstString, secondString) {
-  if (firstString.length === 0) {
-    return secondString.length;
-  }
-  if (secondString.length === 0) {
-    return firstString.length;
-  }
-  if (firstString.length > secondString.length) {
-    const tmp = firstString;
-    firstString = secondString;
-    secondString = tmp;
-  }
-  const row = new Int8Array(firstString.length + 1);
-  for (let i = 0; i <= firstString.length; i++) {
-    row[i] = i;
-  }
-  let temp;
-  for (let i = 1; i <= secondString.length; i++) {
-    let prev = i;
-    const previousChar = secondString[i - 1];
-    for (let j = 1; j <= firstString.length; j++) {
-      if (previousChar === firstString[j - 1]) {
-        temp = row[j - 1];
-      } else {
-        const a = prev + 1;
-        const b = row[j] + 1;
-        const c = a - (a - b & b - a >> 7);
-        const d = row[j - 1] + 1;
-        temp = c - (c - d & d - c >> 7);
-      }
-      row[j - 1] = prev;
-      prev = temp;
-    }
-    row[firstString.length] = prev;
-  }
-  return row[firstString.length];
-}
-function camelCaseToArray(camelCase) {
-  return camelCase.split(/(?=[A-Z])/g);
-}
-function kebabCaseToArray(kebabCase) {
-  return kebabCase.split(/(?=-)/g).map((s) => s.replace(/-/g, ""));
-}
-function pascalCaseToArray(pascalCase) {
-  return camelCaseToArray(pascalCase);
-}
-function sentenceCaseToArray(sentenceCase) {
-  return sentenceCase.split(/ /g).map((s) => s.replace(/[^A-Za-z0-9]/g, ""));
-}
-function snakeCaseToArray(snakeCase) {
-  return snakeCase.split(/(?=_)/g).map((s) => s.replace(/_/g, ""));
-}
-function titleCaseToArray(titleCase) {
-  return sentenceCaseToArray(titleCase);
-}
-function arrayToCamelCase(array, locale) {
-  let result = "";
-  array.forEach((s, i) => {
-    result += i === 0 ? s.toLocaleLowerCase(locale) : s.toLocaleLowerCase(locale).firstCharToUpperCase(locale);
-  });
-  return result;
-}
-function arrayToKebabCase(array, lowerCase, locale) {
-  let result = "";
-  array.forEach((s) => {
-    result += `${lowerCase ? s.toLocaleLowerCase(locale) : s.toLocaleUpperCase(locale)}-`;
-  });
-  return result.trimEndChar("-");
-}
-function arrayToSentenceCase(array, locale) {
-  let result = "";
-  array.forEach((s, i) => {
-    result += `${i === 0 ? s.toLowerCase().firstCharToUpperCase(locale) : s.toLocaleLowerCase(locale)} `;
-  });
-  return result.trimEndChar(" ");
-}
-function arrayToTitleCase(array, locale) {
-  let result = "";
-  array.forEach((s) => {
-    result += `${s.toLocaleLowerCase(locale).firstCharToUpperCase(locale)} `;
-  });
-  return result.trimEndChar(" ");
-}
-String.prototype.similarity = function(comparisonString) {
-  let similarityToReturn = 0;
-  let longerString = this.toLowerCase();
-  let shorterString = comparisonString.toLowerCase();
-  if (longerString < shorterString) {
-    const temp = shorterString;
-    shorterString = longerString;
-    longerString = temp;
-  }
-  const longerLength = longerString.length;
-  if (longerLength === 0) {
-    similarityToReturn = 100;
-  } else {
-    similarityToReturn = Math.round((longerLength - levenshtein(longerString, shorterString)) / longerLength * 100);
-  }
-  return similarityToReturn;
-};
-String.prototype.trimChar = function(character) {
-  return this.trimStartChar(character).trimEndChar(character);
-};
-String.prototype.trimStartChar = function(character) {
-  return character !== "" && this.startsWith(character) ? this.slice(1) : this;
-};
-String.prototype.trimEndChar = function(character) {
-  return character !== "" && this.endsWith(character) ? this.slice(0, -1) : this;
-};
-String.prototype.trimToLength = function(length, addEllipsis = false) {
-  const trimLength = this.length < length ? this.length : length;
-  return addEllipsis && trimLength >= 4 && trimLength < this.length ? `${this.slice(0, Math.max(trimLength - 3, 1))}...` : this.slice(0, Math.max(trimLength, 1));
-};
-String.prototype.firstCharToUpperCase = function(locale) {
-  return `${this.charAt(0).toLocaleUpperCase(locale)}${this.slice(1)}`;
-};
-String.prototype.firstCharToLowerCase = function(locale) {
-  return `${this.charAt(0).toLocaleLowerCase(locale)}${this.slice(1)}`;
-};
-String.prototype.removeWhitespace = function() {
-  return this.replace(/\s/g, "");
-};
-String.prototype.removeNonAlphanumeric = function() {
-  return this.replace(/[^a-zA-Z0-9]/g, "");
-};
-String.prototype.removeNonAlphabetic = function() {
-  return this.replace(/[^a-zA-Z]/g, "");
-};
-String.prototype.removeNonNumeric = function() {
-  return this.replace(/[^0-9]/g, "");
-};
-String.prototype.replacePlaceholders = function(...args) {
-  let i = 0;
-  return this.replace(/{\d+}/g, () => typeof args[i] !== "undefined" ? args[i++] : "");
-};
-String.prototype.camelCaseToKebabCase = function(lowerCase = true, locale) {
-  return arrayToKebabCase(camelCaseToArray(this), lowerCase, locale);
-};
-String.prototype.camelCaseToPascalCase = function(locale) {
-  return this.firstCharToUpperCase(locale);
-};
-String.prototype.camelCaseToSentenceCase = function(locale) {
-  return arrayToSentenceCase(camelCaseToArray(this), locale);
-};
-String.prototype.camelCaseToSnakeCase = function(lowerCase = true, locale) {
-  return this.camelCaseToKebabCase().kebabCaseToSnakeCase(lowerCase, locale);
-};
-String.prototype.camelCaseToTitleCase = function(locale) {
-  return arrayToTitleCase(camelCaseToArray(this), locale);
-};
-String.prototype.kebabCaseToCamelCase = function(locale) {
-  return arrayToCamelCase(kebabCaseToArray(this), locale);
-};
-String.prototype.kebabCaseToPascalCase = function(locale) {
-  return this.kebabCaseToCamelCase().camelCaseToPascalCase(locale);
-};
-String.prototype.kebabCaseToSentenceCase = function(locale) {
-  return arrayToSentenceCase(kebabCaseToArray(this), locale);
-};
-String.prototype.kebabCaseToSnakeCase = function(lowerCase = true, locale) {
-  const result = this.replace(/-/g, "_");
-  return lowerCase ? result.toLocaleLowerCase(locale) : result.toLocaleUpperCase(locale);
-};
-String.prototype.kebabCaseToTitleCase = function(locale) {
-  return arrayToTitleCase(kebabCaseToArray(this), locale);
-};
-String.prototype.pascalCaseToCamelCase = function(locale) {
-  return arrayToCamelCase(pascalCaseToArray(this), locale);
-};
-String.prototype.pascalCaseToKebabCase = function(lowerCase = true, locale) {
-  return arrayToKebabCase(pascalCaseToArray(this), lowerCase, locale);
-};
-String.prototype.pascalCaseToSentenceCase = function(locale) {
-  return arrayToSentenceCase(pascalCaseToArray(this), locale);
-};
-String.prototype.pascalCaseToSnakeCase = function(lowerCase = true, locale) {
-  return this.pascalCaseToKebabCase().kebabCaseToSnakeCase(lowerCase, locale);
-};
-String.prototype.pascalCaseToTitleCase = function(locale) {
-  return arrayToTitleCase(pascalCaseToArray(this), locale);
-};
-String.prototype.sentenceCaseToCamelCase = function(locale) {
-  return arrayToCamelCase(sentenceCaseToArray(this), locale);
-};
-String.prototype.sentenceCaseToKebabCase = function(lowerCase = true, locale) {
-  return arrayToKebabCase(sentenceCaseToArray(this), lowerCase, locale);
-};
-String.prototype.sentenceCaseToPascalCase = function(locale) {
-  return this.sentenceCaseToCamelCase().camelCaseToPascalCase(locale);
-};
-String.prototype.sentenceCaseToSnakeCase = function(lowerCase = true, locale) {
-  return this.sentenceCaseToKebabCase().kebabCaseToSnakeCase(lowerCase, locale);
-};
-String.prototype.sentenceCaseToTitleCase = function(locale) {
-  return arrayToTitleCase(sentenceCaseToArray(this), locale);
-};
-String.prototype.snakeCaseToCamelCase = function(locale) {
-  return arrayToCamelCase(snakeCaseToArray(this), locale);
-};
-String.prototype.snakeCaseToKebabCase = function(lowerCase = true, locale) {
-  const result = this.replace(/_/g, "-");
-  return lowerCase ? result.toLocaleLowerCase(locale) : result.toLocaleUpperCase(locale);
-};
-String.prototype.snakeCaseToPascalCase = function(locale) {
-  return this.snakeCaseToCamelCase().camelCaseToPascalCase(locale);
-};
-String.prototype.snakeCaseToSentenceCase = function(locale) {
-  return arrayToSentenceCase(snakeCaseToArray(this), locale);
-};
-String.prototype.snakeCaseToTitleCase = function(locale) {
-  return arrayToTitleCase(snakeCaseToArray(this), locale);
-};
-String.prototype.titleCaseToCamelCase = function(locale) {
-  return arrayToCamelCase(titleCaseToArray(this), locale);
-};
-String.prototype.titleCaseToKebabCase = function(lowerCase = true, locale) {
-  return arrayToKebabCase(titleCaseToArray(this), lowerCase, locale);
-};
-String.prototype.titleCaseToPascalCase = function(locale) {
-  return this.titleCaseToCamelCase().camelCaseToPascalCase(locale);
-};
-String.prototype.titleCaseToSentenceCase = function(locale) {
-  return arrayToSentenceCase(titleCaseToArray(this), locale);
-};
-String.prototype.titleCaseToSnakeCase = function(lowerCase = true, locale) {
-  return this.titleCaseToKebabCase().kebabCaseToSnakeCase(lowerCase, locale);
-};
-String.prototype.toDateFromTime = function() {
-  return new Date(`${new Date().toISOString().substr(0, 11)}${this}`);
-};
-Date.prototype.toLocaleMonthString = function(locale) {
-  return i18n.global.d(this, DateFormat.MONTH_YEAR, locale != null ? locale : i18n.global.locale.value);
-};
-Date.prototype.toLocaleTimeStringWithoutMilliseconds = function(locale) {
-  return i18n.global.d(this, DateFormat.TIME, locale != null ? locale : i18n.global.locale.value);
-};
-Date.prototype.toLocaleStringWithoutMilliseconds = function(locale) {
-  return i18n.global.d(this, DateFormat.DATETIME, locale != null ? locale : i18n.global.locale.value);
-};
 var main = "";
 const install = (app) => {
   app.use(i18n);
@@ -4729,4 +4443,4 @@ const install = (app) => {
     app.component(name, component);
   });
 };
-export { DateFormat, FilterOperation, NumberFormat, buttonColours, buttonSizes, cardSizes, _sfc_main$v as clUiAccordion, clUiAccordionHeader, _sfc_main$u as clUiAccordionItem, _sfc_main$r as clUiApp, _sfc_main$p as clUiButton, _sfc_main$o as clUiCard, _sfc_main$g as clUiComboBox, clUiFooter, clUiGrid, clUiHeader, _sfc_main$7 as clUiHeaderMenu, ClUiInput as clUiInput, _sfc_main$6 as clUiLanguageSwitcher, ClUiLoadingSpinner as clUiLoadingSpinner, _sfc_main$5 as clUiLogin, _sfc_main$k as clUiModal, clUiNavigation, _sfc_main$2 as clUiNavigationGroup, _sfc_main$3 as clUiNavigationIcon, clUiNavigationItem, clUiNavigationSection, _sfc_main$s as clUiNotification, compareByProperty, copy, datetimeFormats, install as default, filterMethodTypes, generateStringId, getParamsByName, gridColumnTypes, i18n, inputTypes, isComboBoxCreateRequest, isComboBoxItem, isFilterRequest, isFilterResponse, isGridColumn, isGridColumnArray, isLanguageArray, isLanguageLocaleFormat, messages, modalColours, modalSizes, nameOf, numberFormats, setCurrentLocale, setLocaleDateTimeFormats, setLocaleMessages, setLocaleNumberFormats, showNotification, stringFormats, useDebouncer, validateEmail, validateMaxValue, validateMinValue };
+export { DateFormat, FilterOperation, NumberFormat, buttonColours, buttonSizes, cardSizes, _sfc_main$v as clUiAccordion, clUiAccordionHeader, _sfc_main$u as clUiAccordionItem, _sfc_main$r as clUiApp, _sfc_main$p as clUiButton, _sfc_main$o as clUiCard, _sfc_main$g as clUiComboBox, clUiFooter, clUiGrid, clUiHeader, _sfc_main$7 as clUiHeaderMenu, ClUiInput as clUiInput, _sfc_main$6 as clUiLanguageSwitcher, ClUiLoadingSpinner as clUiLoadingSpinner, _sfc_main$5 as clUiLogin, _sfc_main$k as clUiModal, clUiNavigation, _sfc_main$2 as clUiNavigationGroup, _sfc_main$3 as clUiNavigationIcon, clUiNavigationItem, clUiNavigationSection, _sfc_main$s as clUiNotification, datetimeFormats, install as default, filterMethodTypes, gridColumnTypes, i18n, inputTypes, isComboBoxCreateRequest, isComboBoxItem, isFilterRequest, isFilterResponse, isGridColumn, isGridColumnArray, isLanguageArray, isLanguageLocaleFormat, messages, modalColours, modalSizes, numberFormats, setCurrentLocale, setLocaleDateTimeFormats, setLocaleMessages, setLocaleNumberFormats, showNotification, stringFormats, validateEmail, validateMaxValue, validateMinValue };