@citruslime/ui 1.2.0-beta.0 → 1.2.1

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

@@ -0,0 +1,4602 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __restKey = (key) => typeof key === "symbol" ? key : key + "";
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Icon } from "@iconify/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$w = { class: "cl-overflow-hidden" };
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
+  props: {
+    exclusive: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const items = ref([]);
+    function isItemOpen(id) {
+      let item = items.value.find((i) => i.id === id);
+      if (!item) {
+        item = {
+          id,
+          open: false
+        };
+        items.value.push(item);
+      }
+      return item.open;
+    }
+    function toggleItem(id) {
+      const item = items.value.find((i) => i.id === id);
+      if (item) {
+        if (props.exclusive) {
+          items.value.forEach((i) => {
+            if (i.id !== id) {
+              i.open = false;
+            }
+          });
+        }
+        item.open = !item.open;
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$w, [
+        renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ isItemOpen, toggleItem })))
+      ]);
+    };
+  }
+});
+const _hoisted_1$v = { class: "cl-absolute cl-left-5 cl-top-5" };
+const _hoisted_2$n = { class: "cl-font-semibold cl-ml-10 cl-p-4 cl-select-none cl-text-grey-5" };
+const _hoisted_3$h = { class: "cl-overflow-hidden" };
+const _hoisted_4$d = { class: "cl-ml-10 cl-p-4" };
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
+  props: {
+    open: { type: Boolean },
+    disabled: { type: Boolean, default: false }
+  },
+  emits: {
+    toggle: null
+  },
+  setup(__props, { emit }) {
+    const props = __props;
+    function toggle() {
+      if (!props.disabled) {
+        emit("toggle");
+      }
+    }
+    return (_ctx, _cache) => {
+      const _component_icon = resolveComponent("icon");
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", {
+          class: normalizeClass(["cl-border-b cl-border-grey-1 cl-relative", {
+            "cl-bg-grey-0": __props.disabled,
+            "cl-cursor-pointer": !__props.disabled
+          }]),
+          onClick: toggle
+        }, [
+          createElementVNode("div", _hoisted_1$v, [
+            createVNode(_component_icon, {
+              class: normalizeClass(["cl-duration-300 cl-ease-in-out cl-text-grey-3 cl-transform-gpu cl-transition-transform", {
+                "cl-rotate-180": __props.open
+              }]),
+              icon: "ph:caret-down-bold",
+              width: "20"
+            }, null, 8, ["class"])
+          ]),
+          createElementVNode("div", _hoisted_2$n, [
+            renderSlot(_ctx.$slots, "title")
+          ])
+        ], 2),
+        createElementVNode("div", _hoisted_3$h, [
+          createVNode(Transition, { name: "grow-down" }, {
+            default: withCtx(() => [
+              withDirectives(createElementVNode("div", _hoisted_4$d, [
+                renderSlot(_ctx.$slots, "default")
+              ], 512), [
+                [vShow, __props.open]
+              ])
+            ]),
+            _: 3
+          })
+        ])
+      ], 64);
+    };
+  }
+});
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_main$w = {};
+const _hoisted_1$u = { 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" };
+function _sfc_render$6(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$u, [
+    renderSlot(_ctx.$slots, "default")
+  ]);
+}
+var clUiAccordionHeader = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", _sfc_render$6]]);
+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$t = ["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$v = /* @__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$t);
+          }), 128))
+        ], 2)
+      ], 8, ["to"]);
+    };
+  }
+}));
+const _hoisted_1$s = { 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$u = /* @__PURE__ */ defineComponent({
+  props: {
+    removePadding: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(_sfc_main$v),
+        createElementVNode("div", _hoisted_1$s, [
+          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);
+    };
+  }
+});
+var clUiLoadingSpinner_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _sfc_main$t = {};
+const _hoisted_1$r = { class: "loading-spinner" };
+function _sfc_render$5(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$r);
+}
+var ClUiLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$5], ["__scopeId", "data-v-60d7cfd0"]]);
+const _hoisted_1$q = ["disabled"];
+const __default__$3 = {
+  inheritAttrs: false
+};
+const _sfc_main$s = /* @__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$q), [
+          [vShow, !__props.loading]
+        ])
+      ], 64);
+    };
+  }
+}));
+const buttonColours = [
+  "default",
+  "primary",
+  "secondary",
+  "danger",
+  "blue"
+];
+const buttonSizes = [
+  "small",
+  "medium",
+  "large"
+];
+const _hoisted_1$p = { key: 0 };
+const _sfc_main$r = /* @__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$p, [
+          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 = /* @__PURE__ */ ((NumberFormat2) => {
+  NumberFormat2["CURRENCY"] = "currency";
+  NumberFormat2["PERCENTAGE"] = "percentage";
+  NumberFormat2["INTEGER"] = "integer";
+  NumberFormat2["DECIMAL"] = "decimal";
+  NumberFormat2["MULTIPLIER"] = "multiplier";
+  return NumberFormat2;
+})(NumberFormat || {});
+var DateFormat = /* @__PURE__ */ ((DateFormat2) => {
+  DateFormat2["SHORT_DATE"] = "short-date";
+  DateFormat2["SHORT_DATETIME"] = "short-datetime";
+  DateFormat2["DATE"] = "date";
+  DateFormat2["DATETIME"] = "datetime";
+  DateFormat2["LONG_DATE"] = "long-date";
+  DateFormat2["LONG_DATETIME"] = "long-datetime";
+  DateFormat2["TIME"] = "time";
+  DateFormat2["MONTH_YEAR"] = "month-year";
+  return DateFormat2;
+})(DateFormat || {});
+const messages = {
+  "en-GB": {
+    comboBox: {
+      emptyHintText: "Choose a {object}",
+      createTitle: "Create {object}",
+      createProperty: "Name",
+      create: "Create",
+      cancel: "Cancel",
+      createSuccessful: "Successfully created the {object} '{name}'",
+      createFailed: "Could not create '{name}' - {error}",
+      required: "Required",
+      searchHint: "Enter the {object} name",
+      errorMessage: "An error has occurred: {error}",
+      addPrompt: "Add '{value}' as new {object}",
+      noResults: "0 matching results for '{value}'"
+    },
+    grid: {
+      confirmFilters: "Confirm Filters",
+      noData: "No data to show.",
+      noDataFiltersPresent: "We noticed you have some filters present. Please update or clear your filters.",
+      field: "Field",
+      filter: "Filter",
+      sortBy: "Sort By",
+      gridTools: "Grid Tools",
+      clearFilters: "Clear Filters",
+      modifyFilters: "Modify Filters",
+      editData: "Edit Data",
+      finishEditing: "Finish Editing",
+      equal: "Equals",
+      notequal: "Does not equal",
+      contains: "Contains",
+      notcontains: "Does not contain",
+      startswith: "Starts with",
+      endswith: "Ends with",
+      lessthan: "Less than",
+      greaterthan: "Greater than",
+      equalorlessthan: "Less than or equal to",
+      equalorgreaterthan: "Greater than or equal to",
+      currentMethod: "Current filter method",
+      availableMethods: "Available filter methods",
+      true: "True",
+      false: "False",
+      selectDate: "Select date",
+      selectDateTime: "Select date & time",
+      page: "Page",
+      pageSize: "Page Size",
+      totalRecords: "Total Records",
+      jumpToPage: "Jump to Page",
+      manageView: "Manage View",
+      column: "Column",
+      visible: "Visible",
+      order: "Order",
+      hidden: "Hidden"
+    },
+    input: {
+      required: "Required",
+      greaterOrEqualToCharacters: "{label} must be {min} or more characters.",
+      greaterOrEqualToValue: "{label} must be greater than or equal to {min}.",
+      afterOrEqualToValue: "{label} must be equal to or after {min}.",
+      lessOrEqualToCharacters: "{label} must be {max} or less characters.",
+      lessOrEqualToValue: "{label} must be less than or equal to {max}.",
+      beforeOrEqualToValue: "{label} must be equal to or before {max}.",
+      valueIsRequired: "{label} is required.",
+      valueNotValidEmail: "{label} is not a valid email address.",
+      dateOutOfRange: "The entered date was out of range."
+    },
+    login: {
+      login: "Login",
+      email: "Email Address",
+      password: "Password",
+      validEmail: "Username is a valid email address."
+    },
+    slider: {
+      invalidProps: "The current combination of props is invalid. Please confirm the values provided are correct."
+    }
+  }
+};
+const numberFormats = {
+  "en-GB": {
+    [NumberFormat.PERCENTAGE]: {
+      style: "percent"
+    },
+    [NumberFormat.INTEGER]: {
+      maximumFractionDigits: 0
+    },
+    [NumberFormat.DECIMAL]: {
+      minimumFractionDigits: 1
+    },
+    [NumberFormat.CURRENCY]: {
+      style: "currency",
+      currency: "GBP",
+      currencyDisplay: "symbol"
+    }
+  }
+};
+const datetimeFormats = {
+  "en-GB": {
+    [DateFormat.SHORT_DATE]: {
+      day: "numeric",
+      month: "numeric",
+      year: "2-digit"
+    },
+    [DateFormat.SHORT_DATETIME]: {
+      day: "numeric",
+      month: "numeric",
+      year: "2-digit",
+      hour: "numeric",
+      minute: "numeric"
+    },
+    [DateFormat.DATE]: {
+      day: "numeric",
+      month: "numeric",
+      year: "numeric"
+    },
+    [DateFormat.DATETIME]: {
+      day: "numeric",
+      month: "numeric",
+      year: "numeric",
+      hour: "numeric",
+      minute: "numeric"
+    },
+    [DateFormat.LONG_DATE]: {
+      day: "numeric",
+      month: "long",
+      year: "numeric"
+    },
+    [DateFormat.LONG_DATETIME]: {
+      day: "numeric",
+      month: "long",
+      year: "numeric",
+      hour: "numeric",
+      minute: "numeric"
+    },
+    [DateFormat.TIME]: {
+      hour: "numeric",
+      minute: "numeric"
+    },
+    [DateFormat.MONTH_YEAR]: {
+      month: "long",
+      year: "numeric"
+    }
+  }
+};
+const i18n = createI18n({
+  locale: "en-GB",
+  fallbackLocale: "en-GB",
+  messages,
+  numberFormats,
+  datetimeFormats,
+  useScope: "global",
+  missingWarn: false,
+  fallbackWarn: false,
+  warnHtmlMessage: false
+});
+function setLocaleMessages(locale, messages2) {
+  i18n.global.mergeLocaleMessage(locale, messages2);
+  return nextTick();
+}
+function setLocaleNumberFormats(locale, numberFormats2) {
+  i18n.global.mergeNumberFormat(locale, numberFormats2);
+  return nextTick();
+}
+function setLocaleDateTimeFormats(locale, dateTimeFormats) {
+  i18n.global.mergeDateTimeFormat(locale, dateTimeFormats);
+  return nextTick();
+}
+function setCurrentLocale(locale) {
+  i18n.global.locale.value = locale;
+  return nextTick();
+}
+const { t } = i18n.global;
+function validateMinValue(minimumValue, typeOfValue, valueName, actualValue) {
+  const locale = i18n.global.locale.value;
+  if (actualValue instanceof Date) {
+    actualValue = actualValue.getTime();
+  }
+  return new Promise((resolve) => {
+    var _a;
+    let validatedState = {
+      valid: false,
+      message: ""
+    };
+    if (minimumValue !== null && minimumValue !== void 0) {
+      let isValid;
+      let timeValue;
+      switch (typeOfValue) {
+        case "email":
+        case "password":
+        case "search":
+        case "tel":
+        case "text":
+        case "url":
+          isValid = ((_a = actualValue == null ? void 0 : actualValue.length) != null ? _a : 0) >= minimumValue;
+          validatedState = getValidatedInputState(isValid, t("input.greaterOrEqualToCharacters", { label: valueName, min: minimumValue.toString() }));
+          break;
+        case "number":
+        case "range":
+          isValid = actualValue >= minimumValue;
+          validatedState = getValidatedInputState(isValid, t("input.greaterOrEqualToValue", { label: valueName, min: minimumValue.toString() }));
+          break;
+        case "date":
+          isValid = actualValue >= new Date(minimumValue).getTime();
+          validatedState = getValidatedInputState(isValid, t("input.afterOrEqualToValue", { label: valueName, min: new Date(minimumValue).toLocaleDateString(locale) }));
+          break;
+        case "datetime":
+          isValid = actualValue >= new Date(minimumValue).getTime();
+          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: i18n.global.d(new Date(timeValue), DateFormat.TIME, locale != null ? locale : i18n.global.locale.value) }));
+          break;
+        default:
+          validatedState.valid = true;
+          break;
+      }
+    }
+    resolve(validatedState);
+  });
+}
+function validateMaxValue(maximumValue, typeOfValue, valueName, actualValue) {
+  const locale = i18n.global.locale.value;
+  if (actualValue instanceof Date) {
+    actualValue = actualValue.getTime();
+  }
+  return new Promise((resolve) => {
+    var _a;
+    let validatedState = {
+      valid: false,
+      message: ""
+    };
+    if (maximumValue !== null && maximumValue !== void 0) {
+      let isValid;
+      let timeValue;
+      switch (typeOfValue) {
+        case "email":
+        case "password":
+        case "search":
+        case "tel":
+        case "text":
+        case "url":
+          isValid = ((_a = actualValue == null ? void 0 : actualValue.length) != null ? _a : 0) <= maximumValue;
+          validatedState = getValidatedInputState(isValid, t("input.lessOrEqualToCharacters", { label: valueName, max: maximumValue.toString() }));
+          break;
+        case "number":
+        case "range":
+          isValid = actualValue <= maximumValue;
+          validatedState = getValidatedInputState(isValid, t("input.lessOrEqualToValue", { label: valueName, max: maximumValue.toString() }));
+          break;
+        case "date":
+          isValid = actualValue <= new Date(maximumValue).getTime();
+          validatedState = getValidatedInputState(isValid, t("input.beforeOrEqualToValue", { label: valueName, max: new Date(maximumValue).toLocaleDateString(locale) }));
+          break;
+        case "datetime":
+          isValid = actualValue <= new Date(maximumValue).getTime();
+          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.afterOrEqualToValue", { label: valueName, min: i18n.global.d(new Date(timeValue), DateFormat.TIME, locale != null ? locale : i18n.global.locale.value) }));
+          break;
+        default:
+          validatedState.valid = true;
+          break;
+      }
+    }
+    resolve(validatedState);
+  });
+}
+function validateRequired(valueName, value) {
+  return new Promise((resolve) => {
+    const isValid = value !== void 0 && value !== null && value !== "" && value.toString().trim() !== "";
+    const validatedState = getValidatedInputState(isValid, t("input.valueIsRequired", { label: valueName }));
+    resolve(validatedState);
+  });
+}
+function validateEmail(valueName, value) {
+  return new Promise((resolve) => {
+    const regex = /[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?/;
+    const isValid = value === "" || regex.exec(value) !== null;
+    const validatedState = getValidatedInputState(isValid, t("input.valueNotValidEmail", { label: valueName }));
+    resolve(validatedState);
+  });
+}
+function getValidatedInputState(validationCheck, message) {
+  const validation = {
+    valid: validationCheck,
+    message: validationCheck ? "" : message
+  };
+  return validation;
+}
+var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+var de = { exports: {} };
+(function(module, exports) {
+  (function(global2, factory) {
+    factory(exports);
+  })(commonjsGlobal, function(exports2) {
+    var fp = typeof window !== "undefined" && window.flatpickr !== void 0 ? window.flatpickr : {
+      l10ns: {}
+    };
+    var German = {
+      weekdays: {
+        shorthand: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
+        longhand: [
+          "Sonntag",
+          "Montag",
+          "Dienstag",
+          "Mittwoch",
+          "Donnerstag",
+          "Freitag",
+          "Samstag"
+        ]
+      },
+      months: {
+        shorthand: [
+          "Jan",
+          "Feb",
+          "M\xE4r",
+          "Apr",
+          "Mai",
+          "Jun",
+          "Jul",
+          "Aug",
+          "Sep",
+          "Okt",
+          "Nov",
+          "Dez"
+        ],
+        longhand: [
+          "Januar",
+          "Februar",
+          "M\xE4rz",
+          "April",
+          "Mai",
+          "Juni",
+          "Juli",
+          "August",
+          "September",
+          "Oktober",
+          "November",
+          "Dezember"
+        ]
+      },
+      firstDayOfWeek: 1,
+      weekAbbreviation: "KW",
+      rangeSeparator: " bis ",
+      scrollTitle: "Zum \xC4ndern scrollen",
+      toggleTitle: "Zum Umschalten klicken",
+      time_24hr: true
+    };
+    fp.l10ns.de = German;
+    var de2 = fp.l10ns;
+    exports2.German = German;
+    exports2.default = de2;
+    Object.defineProperty(exports2, "__esModule", { value: true });
+  });
+})(de, de.exports);
+var _default = { exports: {} };
+(function(module, exports) {
+  (function(global2, factory) {
+    factory(exports);
+  })(commonjsGlobal, function(exports2) {
+    var english = {
+      weekdays: {
+        shorthand: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+        longhand: [
+          "Sunday",
+          "Monday",
+          "Tuesday",
+          "Wednesday",
+          "Thursday",
+          "Friday",
+          "Saturday"
+        ]
+      },
+      months: {
+        shorthand: [
+          "Jan",
+          "Feb",
+          "Mar",
+          "Apr",
+          "May",
+          "Jun",
+          "Jul",
+          "Aug",
+          "Sep",
+          "Oct",
+          "Nov",
+          "Dec"
+        ],
+        longhand: [
+          "January",
+          "February",
+          "March",
+          "April",
+          "May",
+          "June",
+          "July",
+          "August",
+          "September",
+          "October",
+          "November",
+          "December"
+        ]
+      },
+      daysInMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
+      firstDayOfWeek: 0,
+      ordinal: function(nth) {
+        var s = nth % 100;
+        if (s > 3 && s < 21)
+          return "th";
+        switch (s % 10) {
+          case 1:
+            return "st";
+          case 2:
+            return "nd";
+          case 3:
+            return "rd";
+          default:
+            return "th";
+        }
+      },
+      rangeSeparator: " to ",
+      weekAbbreviation: "Wk",
+      scrollTitle: "Scroll to increment",
+      toggleTitle: "Click to toggle",
+      amPM: ["AM", "PM"],
+      yearAriaLabel: "Year",
+      monthAriaLabel: "Month",
+      hourAriaLabel: "Hour",
+      minuteAriaLabel: "Minute",
+      time_24hr: false
+    };
+    exports2.default = english;
+    exports2.english = english;
+    Object.defineProperty(exports2, "__esModule", { value: true });
+  });
+})(_default, _default.exports);
+var es = { exports: {} };
+(function(module, exports) {
+  (function(global2, factory) {
+    factory(exports);
+  })(commonjsGlobal, function(exports2) {
+    var fp = typeof window !== "undefined" && window.flatpickr !== void 0 ? window.flatpickr : {
+      l10ns: {}
+    };
+    var Spanish = {
+      weekdays: {
+        shorthand: ["Dom", "Lun", "Mar", "Mi\xE9", "Jue", "Vie", "S\xE1b"],
+        longhand: [
+          "Domingo",
+          "Lunes",
+          "Martes",
+          "Mi\xE9rcoles",
+          "Jueves",
+          "Viernes",
+          "S\xE1bado"
+        ]
+      },
+      months: {
+        shorthand: [
+          "Ene",
+          "Feb",
+          "Mar",
+          "Abr",
+          "May",
+          "Jun",
+          "Jul",
+          "Ago",
+          "Sep",
+          "Oct",
+          "Nov",
+          "Dic"
+        ],
+        longhand: [
+          "Enero",
+          "Febrero",
+          "Marzo",
+          "Abril",
+          "Mayo",
+          "Junio",
+          "Julio",
+          "Agosto",
+          "Septiembre",
+          "Octubre",
+          "Noviembre",
+          "Diciembre"
+        ]
+      },
+      ordinal: function() {
+        return "\xBA";
+      },
+      firstDayOfWeek: 1,
+      rangeSeparator: " a ",
+      time_24hr: true
+    };
+    fp.l10ns.es = Spanish;
+    var es2 = fp.l10ns;
+    exports2.Spanish = Spanish;
+    exports2.default = es2;
+    Object.defineProperty(exports2, "__esModule", { value: true });
+  });
+})(es, es.exports);
+var fr = { exports: {} };
+(function(module, exports) {
+  (function(global2, factory) {
+    factory(exports);
+  })(commonjsGlobal, function(exports2) {
+    var fp = typeof window !== "undefined" && window.flatpickr !== void 0 ? window.flatpickr : {
+      l10ns: {}
+    };
+    var French = {
+      firstDayOfWeek: 1,
+      weekdays: {
+        shorthand: ["dim", "lun", "mar", "mer", "jeu", "ven", "sam"],
+        longhand: [
+          "dimanche",
+          "lundi",
+          "mardi",
+          "mercredi",
+          "jeudi",
+          "vendredi",
+          "samedi"
+        ]
+      },
+      months: {
+        shorthand: [
+          "janv",
+          "f\xE9vr",
+          "mars",
+          "avr",
+          "mai",
+          "juin",
+          "juil",
+          "ao\xFBt",
+          "sept",
+          "oct",
+          "nov",
+          "d\xE9c"
+        ],
+        longhand: [
+          "janvier",
+          "f\xE9vrier",
+          "mars",
+          "avril",
+          "mai",
+          "juin",
+          "juillet",
+          "ao\xFBt",
+          "septembre",
+          "octobre",
+          "novembre",
+          "d\xE9cembre"
+        ]
+      },
+      ordinal: function(nth) {
+        if (nth > 1)
+          return "";
+        return "er";
+      },
+      rangeSeparator: " au ",
+      weekAbbreviation: "Sem",
+      scrollTitle: "D\xE9filer pour augmenter la valeur",
+      toggleTitle: "Cliquer pour basculer",
+      time_24hr: true
+    };
+    fp.l10ns.fr = French;
+    var fr2 = fp.l10ns;
+    exports2.French = French;
+    exports2.default = fr2;
+    Object.defineProperty(exports2, "__esModule", { value: true });
+  });
+})(fr, fr.exports);
+var it = { exports: {} };
+(function(module, exports) {
+  (function(global2, factory) {
+    factory(exports);
+  })(commonjsGlobal, function(exports2) {
+    var fp = typeof window !== "undefined" && window.flatpickr !== void 0 ? window.flatpickr : {
+      l10ns: {}
+    };
+    var Italian = {
+      weekdays: {
+        shorthand: ["Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab"],
+        longhand: [
+          "Domenica",
+          "Luned\xEC",
+          "Marted\xEC",
+          "Mercoled\xEC",
+          "Gioved\xEC",
+          "Venerd\xEC",
+          "Sabato"
+        ]
+      },
+      months: {
+        shorthand: [
+          "Gen",
+          "Feb",
+          "Mar",
+          "Apr",
+          "Mag",
+          "Giu",
+          "Lug",
+          "Ago",
+          "Set",
+          "Ott",
+          "Nov",
+          "Dic"
+        ],
+        longhand: [
+          "Gennaio",
+          "Febbraio",
+          "Marzo",
+          "Aprile",
+          "Maggio",
+          "Giugno",
+          "Luglio",
+          "Agosto",
+          "Settembre",
+          "Ottobre",
+          "Novembre",
+          "Dicembre"
+        ]
+      },
+      firstDayOfWeek: 1,
+      ordinal: function() {
+        return "\xB0";
+      },
+      rangeSeparator: " al ",
+      weekAbbreviation: "Se",
+      scrollTitle: "Scrolla per aumentare",
+      toggleTitle: "Clicca per cambiare",
+      time_24hr: true
+    };
+    fp.l10ns.it = Italian;
+    var it2 = fp.l10ns;
+    exports2.Italian = Italian;
+    exports2.default = it2;
+    Object.defineProperty(exports2, "__esModule", { value: true });
+  });
+})(it, it.exports);
+var nl = { exports: {} };
+(function(module, exports) {
+  (function(global2, factory) {
+    factory(exports);
+  })(commonjsGlobal, function(exports2) {
+    var fp = typeof window !== "undefined" && window.flatpickr !== void 0 ? window.flatpickr : {
+      l10ns: {}
+    };
+    var Dutch = {
+      weekdays: {
+        shorthand: ["zo", "ma", "di", "wo", "do", "vr", "za"],
+        longhand: [
+          "zondag",
+          "maandag",
+          "dinsdag",
+          "woensdag",
+          "donderdag",
+          "vrijdag",
+          "zaterdag"
+        ]
+      },
+      months: {
+        shorthand: [
+          "jan",
+          "feb",
+          "mrt",
+          "apr",
+          "mei",
+          "jun",
+          "jul",
+          "aug",
+          "sept",
+          "okt",
+          "nov",
+          "dec"
+        ],
+        longhand: [
+          "januari",
+          "februari",
+          "maart",
+          "april",
+          "mei",
+          "juni",
+          "juli",
+          "augustus",
+          "september",
+          "oktober",
+          "november",
+          "december"
+        ]
+      },
+      firstDayOfWeek: 1,
+      weekAbbreviation: "wk",
+      rangeSeparator: " t/m ",
+      scrollTitle: "Scroll voor volgende / vorige",
+      toggleTitle: "Klik om te wisselen",
+      time_24hr: true,
+      ordinal: function(nth) {
+        if (nth === 1 || nth === 8 || nth >= 20)
+          return "ste";
+        return "de";
+      }
+    };
+    fp.l10ns.nl = Dutch;
+    var nl2 = fp.l10ns;
+    exports2.Dutch = Dutch;
+    exports2.default = nl2;
+    Object.defineProperty(exports2, "__esModule", { value: true });
+  });
+})(nl, nl.exports);
+function generateFixedDate() {
+  return new Date(`${"1990"}-${"01"}-${"02"}T${"12"}:${"05"}`);
+}
+function replaceDateWithPlaceholders(date, hourPlaceholder, yearPlaceholder) {
+  return date.replace("1990", yearPlaceholder).replace("12", hourPlaceholder).replace("01", "m").replace("1", "n").replace("02", "d").replace("2", "j").replace("05", "i").replace("PM", "K");
+}
+function getLocale(locale) {
+  let result;
+  switch (locale) {
+    case "de-DE":
+      result = de.exports.German;
+      break;
+    case "fr-FR":
+      result = fr.exports.French;
+      break;
+    case "nl-NL":
+      result = nl.exports.Dutch;
+      break;
+    case "it-IT":
+      result = it.exports.Italian;
+      break;
+    case "es-ES":
+      result = es.exports.Spanish;
+      break;
+    default:
+      result = _default.exports.english;
+      break;
+  }
+  return result;
+}
+function getFormattedDateForMinMax(date, locale) {
+  let formatted = void 0;
+  if (date.indexOf("/") > -1 || date.indexOf("-") > -1) {
+    const localeDate = new Date(date).toLocaleString(locale);
+    const dateTimeSeparator = localeDate.indexOf(",");
+    if (dateTimeSeparator > -1) {
+      formatted = localeDate.substr(0, dateTimeSeparator);
+    } else {
+      formatted = localeDate;
+    }
+  }
+  return formatted;
+}
+function getFormattedTimeForMinMax(date) {
+  let formatted = void 0;
+  const timeRegex = /([0-9]{2}:[0-9]{2})/;
+  if (timeRegex.exec(date) !== null) {
+    const timeIndex = date.indexOf("T");
+    if (timeIndex > -1) {
+      formatted = date.substr(timeIndex + 1);
+    } else {
+      formatted = date;
+    }
+    formatted = formatted.substr(0, 5);
+  }
+  return formatted;
+}
+var clUiCalendar_vue_vue_type_style_index_0_lang = "";
+var clUiCalendar_vue_vue_type_style_index_1_scoped_true_lang = "";
+const _hoisted_1$o = ["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$q = /* @__PURE__ */ defineComponent({
+  props: {
+    date: { default: null },
+    datePlaceholder: { default: "Select date." },
+    dateTimePlaceholder: { default: "Select date & time." },
+    timePlaceholder: { default: "Select time." },
+    type: { default: "datetime" },
+    disabled: { type: Boolean, default: false },
+    min: { default: "" },
+    max: { default: "" }
+  },
+  emits: {
+    "update:date": null,
+    valueOutOfRange: null
+  },
+  setup(__props, { emit }) {
+    const props = __props;
+    const { d, getDateTimeFormat, locale } = useI18n();
+    const flatpickrInstance = ref(null);
+    const element = ref(null);
+    const internalDate = computed(() => d(generateFixedDate(), props.type));
+    const dateFormat = computed(() => getDateTimeFormat(locale.value)[props.type]);
+    const placeholder = computed(() => getTimePlaceholder());
+    const minTime = computed(() => getMinTime());
+    const maxTime = computed(() => getMaxTime());
+    const minDate = computed(() => getFormattedDateForMinMax(props.min, locale.value));
+    const maxDate = computed(() => getFormattedDateForMinMax(props.max, locale.value));
+    const clearedOrReset = ref(false);
+    const format = computed(() => {
+      var _a, _b;
+      let hourPlaceholder = "H";
+      let yearPlaceholder = "Y";
+      if (((_a = dateFormat.value) == null ? void 0 : _a.hour12) === true) {
+        hourPlaceholder = "h";
+      }
+      if (((_b = dateFormat.value) == null ? void 0 : _b.year) === "2-digit") {
+        yearPlaceholder = "y";
+      }
+      return replaceDateWithPlaceholders(internalDate.value, hourPlaceholder, yearPlaceholder);
+    });
+    const options = computed(() => {
+      var _a, _b;
+      const config = __spreadProps(__spreadValues({}, Flatpickr.defaultConfig), {
+        allowInput: true,
+        dateFormat: format.value,
+        disableMobile: true,
+        enableTime: props.type === DateFormat.DATETIME || props.type === DateFormat.TIME,
+        locale: getLocale(locale.value),
+        maxDate: maxDate.value,
+        maxTime: maxTime.value,
+        minDate: minDate.value,
+        minTime: minTime.value,
+        minuteIncrement: 1,
+        monthSelectorType: "static",
+        noCalendar: props.type === DateFormat.TIME,
+        time_24hr: typeof ((_a = dateFormat.value) == null ? void 0 : _a.hour12) === "undefined" || ((_b = dateFormat.value) == null ? void 0 : _b.hour12) === false
+      });
+      if (props.date !== null) {
+        config.defaultDate = props.date;
+      }
+      return config;
+    });
+    function onChange(selectedDates, _date, _instance) {
+      const newValue = selectedDates.length > 0 ? selectedDates[0] : null;
+      if (newValue !== props.date && !clearedOrReset.value) {
+        emit("update:date", newValue);
+        if (newValue === null) {
+          emit("valueOutOfRange");
+        }
+      }
+      clearedOrReset.value = false;
+    }
+    function clearValue() {
+      clearedOrReset.value = true;
+      emit("update:date", null);
+    }
+    function resetValue() {
+      if (flatpickrInstance.value !== null) {
+        let date = new Date();
+        date.setHours(12, 0, 0, 0);
+        let minDate2;
+        if (props.type === "time") {
+          minDate2 = props.min.toDateFromTime();
+        } else {
+          minDate2 = new Date(props.min);
+        }
+        if (minDate2 > date) {
+          date = minDate2;
+        }
+        clearedOrReset.value = true;
+        emit("update:date", date);
+      }
+    }
+    function createInstance() {
+      if (flatpickrInstance.value === null && element.value !== null) {
+        flatpickrInstance.value = Flatpickr(element.value, options.value);
+        flatpickrInstance.value.config.onChange.push(onChange);
+      }
+    }
+    function updateInstance() {
+      if (flatpickrInstance.value !== null) {
+        flatpickrInstance.value.set(options.value);
+        flatpickrInstance.value.config.onChange.push(onChange);
+      }
+    }
+    function updateInstanceValue(value) {
+      if (flatpickrInstance.value !== null) {
+        flatpickrInstance.value.setDate(value, true);
+      }
+    }
+    function clearInstanceValue() {
+      if (flatpickrInstance.value !== null) {
+        flatpickrInstance.value.clear();
+      }
+    }
+    function destroyInstance() {
+      if (flatpickrInstance.value !== null) {
+        flatpickrInstance.value.destroy();
+        flatpickrInstance.value = null;
+      }
+    }
+    function getTimePlaceholder() {
+      let value = props.dateTimePlaceholder;
+      switch (props.type) {
+        case "date":
+          value = props.datePlaceholder;
+          break;
+        case "datetime":
+          value = props.dateTimePlaceholder;
+          break;
+        case "time":
+          value = props.timePlaceholder;
+          break;
+        default:
+          value = props.dateTimePlaceholder;
+          break;
+      }
+      return value;
+    }
+    function getMinTime() {
+      let time = void 0;
+      if (props.type === DateFormat.TIME || props.type === DateFormat.DATETIME) {
+        time = getFormattedTimeForMinMax(props.min);
+      }
+      return time;
+    }
+    function getMaxTime() {
+      let time = void 0;
+      if (props.type === DateFormat.TIME || props.type === DateFormat.DATETIME) {
+        time = getFormattedTimeForMinMax(props.max);
+      }
+      return time;
+    }
+    watch(() => props.date, (newValue, oldValue) => {
+      if (newValue !== null && oldValue !== null) {
+        if (newValue.getTime() !== oldValue.getTime()) {
+          updateInstanceValue(newValue);
+        }
+      } else if (newValue === null && oldValue !== null) {
+        clearInstanceValue();
+      }
+    }, {
+      deep: true
+    });
+    watch(() => options.value, updateInstance, {
+      deep: true
+    });
+    watch(() => props.type, () => {
+      destroyInstance();
+      nextTick(() => createInstance());
+    }, {
+      immediate: false
+    });
+    onMounted(() => createInstance());
+    onUnmounted(() => destroyInstance());
+    return (_ctx, _cache) => {
+      const _component_icon = resolveComponent("icon");
+      return openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, { class: "cl-relative" }), [
+        createElementVNode("input", mergeProps({
+          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",
+          placeholder: unref(placeholder),
+          disabled: __props.disabled
+        }), null, 16, _hoisted_1$o),
+        withDirectives(createVNode(_component_icon, {
+          class: normalizeClass(["cl-absolute cl-bg-white cl-right-2 cl-text-grey-4 cl-top-3.5", {
+            "!cl-bg-off-white": __props.disabled
+          }]),
+          icon: "ph:calendar",
+          weight: "light",
+          size: 18
+        }, null, 8, ["class"]), [
+          [vShow, (__props.date === null || __props.disabled) && __props.type !== "time"]
+        ]),
+        withDirectives(createVNode(_component_icon, {
+          class: normalizeClass(["cl-absolute cl-bg-white cl-right-2 cl-text-grey-4 cl-top-3.5", {
+            "!cl-bg-off-white": __props.disabled
+          }]),
+          icon: "ph-clock",
+          weight: "light",
+          size: 18
+        }, null, 8, ["class"]), [
+          [vShow, (__props.date === null || __props.disabled) && __props.type === "time"]
+        ]),
+        withDirectives(createElementVNode("div", _hoisted_2$l, [
+          createVNode(_component_icon, {
+            class: "cl-cursor-pointer cl-mr-0.5 md:cl-mr-1",
+            icon: "ph:arrow-counter-clockwise",
+            size: 16,
+            onClick: resetValue
+          }),
+          createVNode(_component_icon, {
+            class: "cl-cursor-pointer",
+            icon: "ph:x",
+            size: 16,
+            onClick: clearValue
+          })
+        ], 512), [
+          [vShow, __props.date !== null && !__props.disabled]
+        ])
+      ], 16);
+    };
+  }
+});
+var clUiCalendar = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-533d446d"]]);
+const calendarTypes = [
+  "date",
+  "datetime",
+  "time"
+];
+var clUiSlider_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _hoisted_1$n = { class: "cl-flex cl-flex-wrap cl-items-center" };
+const _hoisted_2$k = { class: "cl-flex cl-flex-1 cl-flex-wrap cl-items-center cl-mb-2 cl-mt-3 cl-relative md:cl-mt-0" };
+const _hoisted_3$g = { class: "cl-absolute cl-bg-grey-0 cl-leading-6 cl-ml-0 cl-px-3 cl-rounded-full cl-text-center cl-text-xs cl-top-full" };
+const _hoisted_4$c = {
+  key: 0,
+  class: "cl-w-full"
+};
+const _hoisted_5$9 = ["min", "max", "step", "disabled"];
+const _hoisted_6$7 = { class: "cl-absolute cl-bg-grey-0 cl-leading-6 cl-ml-2 cl-px-3 cl-right-0 cl-rounded-full cl-text-center cl-text-xs cl-top-full" };
+const _hoisted_7$7 = {
+  key: 1,
+  class: "emphasis-danger text-sm w-full"
+};
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  props: {
+    value: null,
+    min: null,
+    max: null,
+    step: { default: 1 },
+    enforceStep: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    showNumericInput: { type: Boolean, default: true }
+  },
+  emits: {
+    "update:value": null
+  },
+  setup(__props, { emit }) {
+    const props = __props;
+    const { n, t: t2 } = useI18n();
+    const { debounce } = useDebouncer();
+    const numericInputValue = ref(props.value);
+    const currentValue = computed({
+      get: () => props.value,
+      set: (value) => emit("update:value", value)
+    });
+    const colour = computed(() => props.disabled ? "rgba(153, 153, 153, 0.8)" : "#9acd32");
+    const percentage = computed(() => {
+      let value = (currentValue.value - props.min) / (props.max - props.min) * 100;
+      if (value < 35 && value > 0) {
+        if (value < 20) {
+          value += 0.5;
+        } else {
+          value += 0.25;
+        }
+      } else if (value > 65 && value < 100) {
+        if (value > 80) {
+          value -= 0.5;
+        } else {
+          value -= 0.25;
+        }
+      }
+      return value;
+    });
+    const validProps = computed(() => props.min <= props.max && props.step > 0);
+    function updateCurrentValue(target, forceUpdate) {
+      var _a;
+      const inputValue = (_a = target == null ? void 0 : target.value) != null ? _a : "";
+      const value = Math.max(Math.min(parseFloat(inputValue) || props.min, props.max), props.min);
+      currentValue.value = props.enforceStep ? Math.ceil(value / props.step) * props.step : value;
+      nextTick(() => forceUpdate());
+    }
+    watch(() => props.value, () => numericInputValue.value = props.value);
+    return (_ctx, _cache) => {
+      const _component_cl_ui_input = resolveComponent("cl-ui-input");
+      return unref(validProps) ? (openBlock(), createElementBlock("div", normalizeProps(mergeProps({ key: 0 }, _ctx.$attrs)), [
+        withDirectives(createElementVNode("div", { class: "cl-bg-transparent cl-relative cl-text-center cl-text-sm" }, toDisplayString(unref(currentValue)), 513), [
+          [vShow, !__props.showNumericInput]
+        ]),
+        createElementVNode("div", _hoisted_1$n, [
+          withDirectives(createVNode(_component_cl_ui_input, {
+            modelValue: numericInputValue.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => numericInputValue.value = $event),
+            class: "!cl-text-sm md:!cl-w-auto",
+            "input-type": "number",
+            min: __props.min,
+            max: __props.max,
+            step: __props.step,
+            disabled: __props.disabled,
+            onInput: _cache[1] || (_cache[1] = ($event) => unref(debounce)(updateCurrentValue, $event.target, _ctx.$forceUpdate))
+          }, null, 8, ["modelValue", "min", "max", "step", "disabled"]), [
+            [vShow, __props.showNumericInput]
+          ]),
+          createElementVNode("div", _hoisted_2$k, [
+            createElementVNode("span", _hoisted_3$g, toDisplayString(unref(n)(__props.min, Number.isInteger(__props.min) ? unref(NumberFormat).INTEGER : unref(NumberFormat).DECIMAL)), 1),
+            typeof unref(currentValue) === "number" ? (openBlock(), createElementBlock("div", _hoisted_4$c, [
+              withDirectives(createElementVNode("input", {
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(currentValue) ? currentValue.value = $event : null),
+                class: "cl-align-middle cl-appearance-none cl-bg-gradient-to-r cl-border cl-border-grey-2 cl-delay-500 cl-ease-in cl-flex-1 cl-h-5 cl-mb-2 cl-outline-none cl-rounded-full cl-transition-colors cl-w-full",
+                style: normalizeStyle({
+                  background: `linear-gradient(to right, ${unref(colour)} 0%, ${unref(colour)} ${unref(percentage)}%, white ${unref(percentage)}%, white 100%)`
+                }),
+                type: "range",
+                min: __props.min,
+                max: __props.max,
+                step: __props.step,
+                disabled: __props.disabled
+              }, null, 12, _hoisted_5$9), [
+                [
+                  vModelText,
+                  unref(currentValue),
+                  void 0,
+                  { number: true }
+                ]
+              ])
+            ])) : createCommentVNode("", true),
+            createElementVNode("span", _hoisted_6$7, toDisplayString(unref(n)(__props.max, Number.isInteger(__props.max) ? unref(NumberFormat).INTEGER : unref(NumberFormat).DECIMAL)), 1)
+          ])
+        ])
+      ], 16)) : (openBlock(), createElementBlock("div", _hoisted_7$7, toDisplayString(unref(t2)("slider.invalidProps")), 1));
+    };
+  }
+});
+var clUiSlider = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-26895858"]]);
+function isInputText(type) {
+  let isText = false;
+  switch (type) {
+    case "email":
+    case "password":
+    case "search":
+    case "tel":
+    case "text":
+    case "url":
+      isText = true;
+      break;
+    default:
+      isText = false;
+      break;
+  }
+  return isText;
+}
+function isInputCalendarSupportedDate(type) {
+  let isSupported = false;
+  switch (type) {
+    case "date":
+    case "datetime":
+    case "time":
+      isSupported = true;
+      break;
+    default:
+      isSupported = false;
+      break;
+  }
+  return isSupported;
+}
+function isInputButton(type) {
+  return type === "button" || type === "submit" || type === "reset";
+}
+function getInputTypeAsCalendarType(type) {
+  let calendarType;
+  switch (type) {
+    case "datetime":
+      calendarType = calendarTypes[1];
+      break;
+    case "time":
+      calendarType = calendarTypes[2];
+      break;
+    case "date":
+    default:
+      calendarType = calendarTypes[0];
+      break;
+  }
+  return calendarType;
+}
+var clUiInput_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _hoisted_1$m = { class: "cl-align-top cl-border-none cl-inline-block cl-text-left" };
+const _hoisted_2$j = { class: "cl-flex cl-justify-between" };
+const _hoisted_3$f = { class: "cl-w-full" };
+const _hoisted_4$b = {
+  key: 0,
+  class: "cl-block cl-left-auto cl-relative cl-text-danger-default"
+};
+const _hoisted_5$8 = {
+  key: 1,
+  class: "cl-bg-danger-light cl-block cl-max-h-6 cl-mb-1 cl-ml-2 cl-px-2 cl-rounded-md cl-text-center cl-text-danger-default cl-text-xs cl-uppercase"
+};
+const _hoisted_6$6 = ["type", "disabled", "min", "max", "minlength", "maxlength", "step", "placeholder", "accept", "name", "autocomplete", "onBlur"];
+const _hoisted_7$6 = {
+  key: 2,
+  class: "cl-h-[5.78rem] cl-pb-2 md:cl-h-20"
+};
+const _hoisted_8$5 = { class: "cl-relative" };
+const _hoisted_9$5 = {
+  key: 0,
+  class: "cl-bg-primary-lighter cl-px-2 cl-rounded-md cl-text-center cl-text-secondary-light cl-text-xs cl-w-auto cl-whitespace-pre-line"
+};
+const _hoisted_10$5 = {
+  key: 1,
+  class: "cl-bg-danger-light cl-px-2 cl-rounded-md cl-text-center cl-text-danger-default cl-text-xs cl-w-auto cl-whitespace-pre-line"
+};
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  props: {
+    inputType: { default: "text" },
+    modelValue: { type: [String, Number, Boolean, Date, null], default: void 0 },
+    label: { default: "" },
+    isRequired: { type: Boolean, default: false },
+    customValidationFunction: { type: Function, default: void 0 },
+    onInputFunction: { type: Function, default: void 0 },
+    min: { default: 0 },
+    max: { default: 1e11 },
+    step: { default: 1 },
+    validateImmediately: { type: Boolean, default: false },
+    externalErrors: { default: () => [] },
+    disabled: { type: Boolean, default: false },
+    requiredText: { default: "" },
+    placeholderText: { default: "" },
+    fileExtensions: { default: "" },
+    group: { default: "" },
+    showLabel: { type: Boolean, default: true },
+    showArrows: { type: Boolean, default: true },
+    autocomplete: { default: "off" },
+    highlightWhenValid: { type: Boolean, default: false },
+    messageWhenValid: { default: "" },
+    inputSpecificClasses: { default: "" }
+  },
+  emits: {
+    "update:modelValue": null,
+    click: null,
+    focus: null,
+    input: null,
+    validated: null
+  },
+  setup(__props, { emit }) {
+    const props = __props;
+    const inputElement = ref(null);
+    const focused = ref(false);
+    const lostFocus = ref(false);
+    const showRequiredAsterisk = computed(getShowAsteriskOrRequired);
+    const placeholder = computed(() => props.placeholderText.trim() !== "" ? props.placeholderText : props.label);
+    const dateFlaggedAsOutOfRange = ref(false);
+    const { t: t2 } = useI18n();
+    const currentValue = computed({
+      get: () => props.modelValue,
+      set: (value) => onValueChanged(value)
+    });
+    const currentDateValue = computed({
+      get: () => props.modelValue,
+      set: (value) => updateDateValue(value)
+    });
+    const minAsString = computed(() => typeof props.min === "number" ? props.min.toString() : props.min);
+    const maxAsString = computed(() => typeof props.max === "number" ? props.max.toString() : props.max);
+    const minAsNumber = computed(() => typeof props.min === "number" ? props.min : parseFloat(props.min));
+    const maxAsNumber = computed(() => typeof props.max === "number" ? props.max : parseFloat(props.max));
+    const validMessage = computed(() => props.messageWhenValid.trim() !== "" ? props.messageWhenValid : "");
+    const isValid = ref(true);
+    const internalErrors = ref([]);
+    const errors = computed(() => {
+      var _a, _b, _c, _d;
+      return [
+        ...(_b = (_a = internalErrors.value) == null ? void 0 : _a.filter((e) => {
+          var _a2;
+          return ((_a2 = e == null ? void 0 : e.length) != null ? _a2 : 0) > 0;
+        })) != null ? _b : [],
+        ...(_d = (_c = props.externalErrors) == null ? void 0 : _c.filter((e) => {
+          var _a2;
+          return ((_a2 = e == null ? void 0 : e.length) != null ? _a2 : 0) > 0;
+        })) != null ? _d : []
+      ].join("\n");
+    });
+    function updateDateValue(value) {
+      updateAndValidateValue(value);
+      dateFlaggedAsOutOfRange.value = false;
+    }
+    function onValueChanged(value) {
+      if (props.onInputFunction !== void 0) {
+        value = props.onInputFunction(value);
+      }
+      updateAndValidateValue(value);
+    }
+    function updateAndValidateValue(value) {
+      const defaultSuccess = {
+        message: "",
+        valid: true
+      };
+      const validationPromises = [props.customValidationFunction === null || props.customValidationFunction === void 0 ? new Promise((resolve) => {
+        resolve(defaultSuccess);
+      }) : new Promise((resolve) => {
+        resolve(props.customValidationFunction(props.label, value));
+      })];
+      if (typeof value === "string" || typeof value === "number" || value instanceof Date) {
+        validationPromises.push(validateMinValue(props.min, props.inputType, props.label, value));
+        validationPromises.push(validateMaxValue(props.max, props.inputType, props.label, value));
+      }
+      if (props.isRequired) {
+        validationPromises.push(validateRequired(props.label, value));
+      }
+      if (props.inputType === "email" && typeof value === "string") {
+        validationPromises.push(validateEmail(props.label, value));
+      }
+      Promise.all(validationPromises).then((internalValidationResults) => {
+        const messages2 = [...internalValidationResults.map((e) => e.message)];
+        let invalid = internalValidationResults.some((e) => e.message.length > 0 && e.valid === false) || props.externalErrors.length > 0;
+        if (dateFlaggedAsOutOfRange.value) {
+          messages2.push(t2("input.dateOutOfRange"));
+          invalid = true;
+        }
+        if (invalid) {
+          internalErrors.value = messages2;
+          emit("validated", false, value);
+        } else {
+          internalErrors.value = [];
+          emit("validated", true, value);
+        }
+        isValid.value = !invalid;
+        emit("update:modelValue", value);
+      });
+    }
+    function getStyle() {
+      let style = "";
+      if (props.inputType === "color" && currentValue.value) {
+        if (props.disabled) {
+          style = `background: #999999`;
+        } else {
+          style = `background: ${currentValue.value};`;
+        }
+      }
+      return style;
+    }
+    function emitClickIfButton(event) {
+      if (isInputButton(props.inputType)) {
+        event.preventDefault();
+        emit("click", event);
+      } else if (props.inputType === "checkbox") {
+        emit("click", event);
+      }
+    }
+    function incrementNumericValue() {
+      if (inputElement.value) {
+        inputElement.value.stepUp();
+        inputElement.value.focus();
+        onValueChanged(inputElement.value.valueAsNumber);
+        const inputEvent = {
+          target: inputElement.value
+        };
+        emit("input", inputEvent);
+      }
+    }
+    function decrementNumericValue() {
+      if (inputElement.value) {
+        inputElement.value.stepDown();
+        inputElement.value.focus();
+        onValueChanged(inputElement.value.valueAsNumber);
+        const inputEvent = {
+          target: inputElement.value
+        };
+        emit("input", inputEvent);
+      }
+    }
+    function toggleFocus(focus) {
+      focused.value = focus;
+    }
+    function onLostFocus() {
+      lostFocus.value = true;
+      toggleFocus(false);
+    }
+    function onMouseWheel(wheelEvent) {
+      wheelEvent.target.blur();
+    }
+    function getShowAsteriskOrRequired() {
+      var _a;
+      let asterisk = true;
+      const currentState = showRequiredAsterisk.value;
+      if (focused.value) {
+        asterisk = currentState;
+      } else if (lostFocus.value && ((_a = currentValue.value) == null ? void 0 : _a.toString().trim()) === "") {
+        asterisk = false;
+      }
+      return asterisk;
+    }
+    function onDateOutOfRange() {
+      dateFlaggedAsOutOfRange.value = true;
+    }
+    onMounted(() => {
+      if (props.validateImmediately) {
+        onValueChanged(props.modelValue);
+      }
+    });
+    watch(() => props.isRequired, () => onValueChanged(props.modelValue));
+    watch(() => props.externalErrors, () => updateAndValidateValue(currentValue.value));
+    return (_ctx, _cache) => {
+      const _component_icon = resolveComponent("icon");
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
+        createElementVNode("div", {
+          onMouseenter: _cache[10] || (_cache[10] = ($event) => toggleFocus(true)),
+          onMouseleave: _cache[11] || (_cache[11] = ($event) => toggleFocus(false))
+        }, [
+          createElementVNode("div", _hoisted_2$j, [
+            createElementVNode("div", _hoisted_3$f, [
+              withDirectives(createElementVNode("label", { class: "cl-block cl-mb-1 cl-text-gray-400 cl-text-xs cl-tracking-widest cl-uppercase" }, toDisplayString(__props.label), 513), [
+                [vShow, __props.showLabel && __props.label !== ""]
+              ])
+            ]),
+            __props.isRequired && unref(showRequiredAsterisk) ? (openBlock(), createElementBlock("label", _hoisted_4$b, " * ")) : createCommentVNode("", true),
+            __props.isRequired && !unref(showRequiredAsterisk) ? (openBlock(), createElementBlock("label", _hoisted_5$8, toDisplayString(__props.requiredText), 1)) : createCommentVNode("", true)
+          ]),
+          __props.inputType !== "range" && !unref(isInputCalendarSupportedDate)(__props.inputType) ? withDirectives((openBlock(), createElementBlock("input", mergeProps({
+            key: 0,
+            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", {
+              "hover:!cl-border-grey-3": __props.disabled === false && !unref(isInputButton)(__props.inputType),
+              "!cl-cursor-default": __props.disabled,
+              "!cl-border-danger-default": !isValid.value,
+              "!cl-border-primary-default": isValid.value && __props.highlightWhenValid,
+              "cl-border-grey-0 focus:cl-border-blue-light": isValid.value && !unref(isInputButton)(__props.inputType),
+              "!cl-p-2": __props.inputType === "checkbox" || __props.inputType === "radio",
+              "cl-p-3 cl-rounded-lg": !unref(isInputButton)(__props.inputType),
+              [`${__props.inputSpecificClasses}`]: __props.inputSpecificClasses !== ""
+            }],
+            style: getStyle(),
+            type: __props.inputType,
+            disabled: __props.disabled,
+            min: __props.min,
+            max: __props.max,
+            minlength: unref(isInputText)(__props.inputType) ? __props.min : 0,
+            maxlength: unref(isInputText)(__props.inputType) ? __props.max : 0,
+            step: __props.step,
+            placeholder: unref(placeholder),
+            accept: __props.fileExtensions,
+            name: __props.group,
+            autocomplete: __props.autocomplete,
+            onClick: _cache[1] || (_cache[1] = ($event) => emitClickIfButton($event)),
+            onFocus: _cache[2] || (_cache[2] = ($event) => emit("focus")),
+            onBlur: withModifiers(onLostFocus, ["self"]),
+            onMousewheelPassive: onMouseWheel,
+            onInput: _cache[3] || (_cache[3] = ($event) => {
+              emit("input", $event);
+              _ctx.$forceUpdate();
+            })
+          }), null, 16, _hoisted_6$6)), [
+            [vModelDynamic, unref(currentValue)]
+          ]) : unref(isInputCalendarSupportedDate)(__props.inputType) ? (openBlock(), createBlock(unref(clUiCalendar), mergeProps({ key: 1 }, _ctx.$attrs, {
+            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", {
+              "hover:cl-border-grey-3": !__props.disabled,
+              "!cl-border-danger-default": !isValid.value,
+              "!cl-border-primary-default": isValid.value && __props.highlightWhenValid
+            }],
+            disabled: __props.disabled,
+            type: unref(getInputTypeAsCalendarType)(__props.inputType),
+            min: unref(minAsString),
+            max: unref(maxAsString),
+            onBlur: withModifiers(onLostFocus, ["self"]),
+            onValueOutOfRange: onDateOutOfRange,
+            onFocus: _cache[5] || (_cache[5] = ($event) => emit("focus"))
+          }), null, 16, ["date", "class", "disabled", "type", "min", "max", "onBlur"])) : __props.inputType === "range" && typeof unref(currentValue) === "number" ? (openBlock(), createElementBlock("div", _hoisted_7$6, [
+            createVNode(unref(clUiSlider), {
+              ref_key: "inputElement",
+              ref: inputElement,
+              value: unref(currentValue),
+              "onUpdate:value": _cache[6] || (_cache[6] = ($event) => isRef(currentValue) ? currentValue.value = $event : null),
+              min: unref(minAsNumber),
+              max: unref(maxAsNumber),
+              step: __props.step,
+              disabled: __props.disabled,
+              "show-numeric-input": false,
+              onBlur: withModifiers(onLostFocus, ["self"]),
+              onFocus: _cache[7] || (_cache[7] = ($event) => emit("focus"))
+            }, null, 8, ["value", "min", "max", "step", "disabled", "onBlur"])
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_8$5, [
+            __props.inputType === "number" && !__props.disabled && __props.showArrows ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(["cl-absolute cl-duration-300 cl-right-1 cl-transition", {
+                "cl-opacity-0": !focused.value
+              }]),
+              style: { "bottom": "1.625rem" }
+            }, [
+              createVNode(_component_icon, {
+                icon: "ph:caret-up-bold",
+                class: "cl-bg-link-default cl-rounded-md cl-text-sm cl-text-white hover:cl-bg-link-light hover:cl-cursor-pointer",
+                onClick: incrementNumericValue,
+                onMousedown: _cache[8] || (_cache[8] = withModifiers(() => {
+                }, ["prevent"]))
+              })
+            ], 2)) : createCommentVNode("", true),
+            __props.inputType === "number" && !__props.disabled && __props.showArrows ? (openBlock(), createElementBlock("div", {
+              key: 1,
+              class: normalizeClass(["cl-absolute cl-bottom-2 cl-duration-300 cl-right-1 cl-transition", {
+                "cl-opacity-0": !focused.value
+              }])
+            }, [
+              createVNode(_component_icon, {
+                icon: "ph:caret-down-bold",
+                class: "cl-bg-link-default cl-rounded-md cl-text-sm cl-text-white hover:cl-bg-link-light hover:cl-cursor-pointer",
+                onClick: decrementNumericValue,
+                onMousedown: _cache[9] || (_cache[9] = withModifiers(() => {
+                }, ["prevent"]))
+              })
+            ], 2)) : createCommentVNode("", true)
+          ])
+        ], 32),
+        isValid.value && unref(validMessage) ? (openBlock(), createElementBlock("div", _hoisted_9$5, toDisplayString(unref(validMessage)), 1)) : createCommentVNode("", true),
+        !isValid.value && unref(errors).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_10$5, toDisplayString(unref(errors)), 1)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+var ClUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-007f3e50"]]);
+const _hoisted_1$l = { 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
+};
+const _sfc_main$n = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$2), {
+  props: {
+    headerColour: { default: "white" },
+    preventClose: { type: Boolean, default: false },
+    size: { default: "medium" }
+  },
+  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$l, [
+                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")
+                  ], 2),
+                  createElementVNode("div", _hoisted_3$e, [
+                    renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ close })))
+                  ]),
+                  renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps({ close })))
+                ], 16)
+              ], 512), [
+                [vShow, visible.value]
+              ])
+            ]),
+            _: 3
+          })
+        ]))
+      ], 64);
+    };
+  }
+}));
+const _hoisted_1$k = { class: "cl-bg-grey-2 cl-border-b cl-border-grey-2 cl-border-t cl-flex cl-p-1" };
+const _hoisted_2$h = {
+  key: 0,
+  class: "cl-w-1/2"
+};
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  props: {
+    showClearButton: { type: Boolean, default: false },
+    text: { default: "" },
+    additionalText: { default: "" }
+  },
+  emits: {
+    "clear-object": null
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_icon = resolveComponent("icon");
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+        __props.additionalText !== "" ? (openBlock(), createElementBlock("div", _hoisted_2$h, toDisplayString(__props.additionalText), 1)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass({
+            "cl-w-1/2": __props.additionalText !== "",
+            "cl-w-full": __props.additionalText === ""
+          })
+        }, toDisplayString(__props.text), 3),
+        withDirectives(createElementVNode("div", {
+          class: "cl-cursor-pointer cl-float-right",
+          onMousedown: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("clear-object"))
+        }, [
+          createVNode(_component_icon, {
+            class: "cl-mt-0.5 cl-rounded-full cl-transition-colors hover:cl-text-link-default",
+            icon: "ph:x-circle"
+          })
+        ], 544), [
+          [vShow, __props.showClearButton]
+        ])
+      ]);
+    };
+  }
+});
+const _hoisted_1$j = {
+  key: 0,
+  class: "cl-w-1/2"
+};
+const _hoisted_2$g = { class: "cl-float-right cl-py-1.5" };
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  props: {
+    isCreateNewOption: { type: Boolean, default: false },
+    selectedIndex: { default: -1 },
+    text: { default: "" },
+    option: { default: null },
+    index: null
+  },
+  emits: {
+    "create-object": null,
+    "select-object": null,
+    "option-highlighted": null
+  },
+  setup(__props, { emit }) {
+    const props = __props;
+    const displayedText = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.option) == null ? void 0 : _a.name) != null ? _b : props.text;
+    });
+    const displayedParent = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.option) == null ? void 0 : _a.parentName) != null ? _b : "";
+    });
+    const isHighlighted = ref(false);
+    function optionSelected() {
+      var _a;
+      if (props.isCreateNewOption === true) {
+        emit("create-object");
+      } else {
+        emit("select-object", (_a = props.option) == null ? void 0 : _a.id);
+      }
+    }
+    function onHover(hovered) {
+      if (hovered === true) {
+        isHighlighted.value = true;
+        emit("option-highlighted", props.index);
+      } else {
+        if (props.index !== props.selectedIndex) {
+          isHighlighted.value = false;
+        }
+      }
+    }
+    function updateHighlight() {
+      if (props.selectedIndex === props.index) {
+        isHighlighted.value = true;
+      } else {
+        isHighlighted.value = false;
+      }
+    }
+    watch(() => props.selectedIndex, () => updateHighlight());
+    return (_ctx, _cache) => {
+      var _a, _b;
+      const _component_icon = resolveComponent("icon");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["cl-border-b cl-border-grey-0 cl-border-t cl-cursor-pointer cl-duration-75 cl-flex cl-p-1 cl-transition-colors", {
+          "cl-bg-grey-0": isHighlighted.value === false,
+          "cl-bg-primary-default cl-text-white": isHighlighted.value
+        }]),
+        onMousedown: optionSelected,
+        onMousemove: _cache[0] || (_cache[0] = ($event) => onHover(true)),
+        onMouseleave: _cache[1] || (_cache[1] = ($event) => onHover(false))
+      }, [
+        __props.option !== null && ((_a = __props.option) == null ? void 0 : _a.parentId) !== 0 && ((_b = __props.option) == null ? void 0 : _b.parentId) !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_1$j, toDisplayString(unref(displayedParent)), 1)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass({
+            "cl-w-1/2": unref(displayedParent) !== "",
+            "cl-w-full": unref(displayedParent) === ""
+          })
+        }, toDisplayString(unref(displayedText)), 3),
+        withDirectives(createElementVNode("div", _hoisted_2$g, [
+          createVNode(_component_icon, {
+            class: "cl-bg-primary-default cl-rounded-full cl-text-white",
+            icon: "ph:plus-circle"
+          })
+        ], 512), [
+          [vShow, __props.isCreateNewOption]
+        ])
+      ], 34);
+    };
+  }
+});
+const _hoisted_1$i = ["onKeyup"];
+const _hoisted_2$f = { class: "cl-flex" };
+const _hoisted_3$d = { key: 5 };
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
+  props: {
+    loading: { type: Boolean, default: false },
+    objectType: null,
+    objectParentType: { default: "" },
+    errorMessage: { default: "" },
+    canCreateNewObject: { type: Boolean, default: false },
+    canClearSelectedObject: { type: Boolean, default: true },
+    currentObjectName: { default: "" },
+    results: { default: () => [] },
+    isVisible: { type: Boolean, default: false }
+  },
+  emits: {
+    "clear-object": null,
+    "create-object": null,
+    "select-object": null,
+    search: null,
+    "hide-dropdown": null
+  },
+  setup(__props, { emit }) {
+    const props = __props;
+    const { t: t2 } = useI18n();
+    const searchText = ref("");
+    const showAddNewOption = ref(false);
+    const currentSelection = ref(-1);
+    const firstIndexInResults = computed(() => showAddNewOption.value ? -1 : 0);
+    const container = ref();
+    function search(keyboardEvent) {
+      if (keyboardEvent === void 0 || (keyboardEvent == null ? void 0 : keyboardEvent.code.startsWith("Arrow")) === false && (keyboardEvent == null ? void 0 : keyboardEvent.code.startsWith("Control")) === false && (keyboardEvent == null ? void 0 : keyboardEvent.code.startsWith("Shift")) === false && (keyboardEvent == null ? void 0 : keyboardEvent.code.startsWith("Tab")) === false && (keyboardEvent == null ? void 0 : keyboardEvent.code) !== "Enter") {
+        emit("search", searchText.value);
+        currentSelection.value = -2;
+      }
+    }
+    function selectObject(id) {
+      emit("select-object", id);
+    }
+    function createObject() {
+      emit("create-object", searchText.value);
+      hideDropdown();
+    }
+    function hideDropdown() {
+      emit("hide-dropdown");
+    }
+    function onKeyboardArrowDown(firstIndex) {
+      if (currentSelection.value < props.results.length - 1) {
+        if (currentSelection.value === -2 && searchText.value === "") {
+          currentSelection.value++;
+        }
+        currentSelection.value++;
+      } else {
+        currentSelection.value = firstIndex;
+      }
+      scroll();
+    }
+    function onKeyboardArrowUp(firstIndex) {
+      if (currentSelection.value > firstIndex) {
+        currentSelection.value--;
+      } else {
+        currentSelection.value = props.results.length - 1;
+      }
+      scroll();
+    }
+    function onKeyboardEnter() {
+      if (currentSelection.value >= 0 && props.results !== void 0) {
+        selectObject(props.results[currentSelection.value].id);
+      } else if (currentSelection.value === -1) {
+        createObject();
+      }
+    }
+    function onKeyboardShiftTab(keyboardEvent) {
+      if (keyboardEvent.key === "Tab" && keyboardEvent.shiftKey === true) {
+        const selectableElements = document.getElementsByTagName("input");
+        let indexOfPreviouslySelectableItem = -1;
+        for (let i = 0; i < selectableElements.length; i++) {
+          if (selectableElements[i] === keyboardEvent.target) {
+            indexOfPreviouslySelectableItem = i - 1;
+          }
+        }
+        if (indexOfPreviouslySelectableItem >= 0) {
+          selectableElements[indexOfPreviouslySelectableItem].focus();
+          hideDropdown();
+        }
+      }
+    }
+    function scroll() {
+      var _a;
+      if (props.results && props.results.length > 1) {
+        const heightOffset = 34;
+        (_a = container.value) == null ? void 0 : _a.scrollTo(0, (currentSelection.value + 1) * heightOffset - heightOffset * 2);
+      }
+    }
+    function updateAddNewOption() {
+      let finalResultMatches = false;
+      if (props.results !== null && props.results.length === 1) {
+        finalResultMatches = searchText.value.toUpperCase().trim() === props.results[0].name.toUpperCase().trim();
+      }
+      showAddNewOption.value = props.canCreateNewObject === true && props.errorMessage === "" && searchText.value.trim() !== "" && finalResultMatches === false;
+    }
+    function updateSelectedObjectIndex(index) {
+      currentSelection.value = index;
+    }
+    function onVisibilityChanged() {
+      if (props.isVisible === true) {
+        searchText.value = "";
+        search();
+        nextTick(() => {
+          var _a, _b;
+          return (_b = (_a = container.value) == null ? void 0 : _a.querySelector("input")) == null ? void 0 : _b.focus();
+        });
+      }
+    }
+    watch(() => props.results, () => updateAddNewOption());
+    watch(() => props.errorMessage, () => updateAddNewOption());
+    watch(() => props.isVisible, () => onVisibilityChanged());
+    onMounted(() => {
+      var _a;
+      return (_a = container.value) == null ? void 0 : _a.addEventListener("keydown", onKeyboardShiftTab);
+    });
+    onUnmounted(() => {
+      var _a;
+      return (_a = container.value) == null ? void 0 : _a.removeEventListener("keydown", onKeyboardShiftTab);
+    });
+    return (_ctx, _cache) => {
+      var _a;
+      const _component_cl_ui_loading_spinner = resolveComponent("cl-ui-loading-spinner");
+      return openBlock(), createElementBlock("div", {
+        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"])),
+          _cache[3] || (_cache[3] = withKeys(withModifiers(($event) => onKeyboardArrowDown(unref(firstIndexInResults)), ["prevent", "stop"]), ["down"]))
+        ],
+        onKeyup: withKeys(withModifiers(onKeyboardEnter, ["prevent", "stop"]), ["enter"])
+      }, [
+        createElementVNode("div", _hoisted_2$f, [
+          createVNode(ClUiInput, {
+            modelValue: searchText.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchText.value = $event),
+            class: "!cl-mr-0 cl-mb-1 cl-w-full",
+            "input-type": "text",
+            "placeholder-text": unref(t2)("comboBox.searchHint", { object: __props.objectType }),
+            onKeyup: search,
+            onBlur: hideDropdown
+          }, null, 8, ["modelValue", "placeholder-text"]),
+          withDirectives(createVNode(_component_cl_ui_loading_spinner, { class: "cl-absolute cl-ml-2 cl-mt-11" }, null, 512), [
+            [vShow, __props.loading]
+          ])
+        ]),
+        __props.currentObjectName !== "" ? (openBlock(), createBlock(_sfc_main$m, {
+          key: 0,
+          "show-clear-button": __props.canClearSelectedObject,
+          text: __props.currentObjectName,
+          onClearObject: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("clear-object"))
+        }, null, 8, ["show-clear-button", "text"])) : createCommentVNode("", true),
+        __props.objectParentType !== "" && __props.results !== void 0 && __props.results.length > 0 && __props.errorMessage === "" ? (openBlock(), createBlock(_sfc_main$m, {
+          key: 1,
+          text: __props.objectType,
+          "additional-text": __props.objectParentType
+        }, null, 8, ["text", "additional-text"])) : createCommentVNode("", true),
+        __props.results !== null && ((_a = __props.results) == null ? void 0 : _a.length) === 0 && searchText.value.trim() !== "" && __props.canCreateNewObject === false && __props.errorMessage === "" ? (openBlock(), createBlock(_sfc_main$m, {
+          key: 2,
+          text: unref(t2)("comboBox.noResults", { value: searchText.value })
+        }, null, 8, ["text"])) : createCommentVNode("", true),
+        __props.errorMessage !== "" ? (openBlock(), createBlock(_sfc_main$m, {
+          key: 3,
+          class: "!cl-bg-danger-light cl-border-danger-light cl-rounded cl-text-danger-dark",
+          text: unref(t2)("comboBox.errorMessage", { error: __props.errorMessage })
+        }, null, 8, ["text"])) : createCommentVNode("", true),
+        showAddNewOption.value ? (openBlock(), createBlock(_sfc_main$l, {
+          key: 4,
+          "is-create-new-option": true,
+          text: unref(t2)("comboBox.addPrompt", { value: searchText.value, object: __props.objectType }),
+          index: -1,
+          "selected-index": currentSelection.value,
+          onCreateObject: createObject,
+          onOptionHighlighted: updateSelectedObjectIndex
+        }, null, 8, ["text", "selected-index"])) : createCommentVNode("", true),
+        __props.errorMessage === "" && __props.results !== null ? (openBlock(), createElementBlock("div", _hoisted_3$d, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.results, (result, index) => {
+            return openBlock(), createBlock(_sfc_main$l, {
+              key: index,
+              option: result,
+              index,
+              "selected-index": currentSelection.value,
+              onSelectObject: selectObject,
+              onOptionHighlighted: updateSelectedObjectIndex
+            }, null, 8, ["option", "index", "selected-index"]);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ], 40, _hoisted_1$i);
+    };
+  }
+});
+const _hoisted_1$h = { class: "cl-flex" };
+const _hoisted_2$e = { class: "cl-relative cl-right-20 cl-top-0.5" };
+const _hoisted_3$c = { class: "cl-absolute cl-flex cl-float-right cl-font-semibold cl-mt-2 cl-text-danger-default cl-text-sm" };
+const _hoisted_4$a = { class: "cl-ml-4 cl-w-11/12" };
+const _hoisted_5$7 = { class: "cl-p-2 cl-text-right cl-w-full" };
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  props: {
+    loading: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    required: { type: Boolean, default: false },
+    objectType: null,
+    objectParentType: { default: "" },
+    canCreateNewObject: { type: Boolean, default: false },
+    canClearSelectedObject: { type: Boolean, default: true },
+    errorMessage: { default: "" },
+    objectCreatedResponse: { default: null },
+    parentObjectCreatedResponse: { default: null },
+    results: { default: () => [] },
+    parentResults: { default: () => [] },
+    currentObject: null
+  },
+  emits: {
+    focus: null,
+    search: null,
+    "search-parent": null,
+    "create-object": null,
+    "create-parent-object": null,
+    "update:current-object": null
+  },
+  setup(__props, { emit }) {
+    const props = __props;
+    const { t: t2 } = useI18n();
+    const searchContainerVisible = ref(false);
+    const selectedItem = computed({
+      get: () => props.currentObject,
+      set: (value) => emit("update:current-object", value)
+    });
+    const parentItem = ref(null);
+    const currentText = computed(() => getDisplayName());
+    const objectToCreateValue = ref("");
+    const parentObjectToCreateValue = ref("");
+    const createObjectRequest = ref();
+    const objectToCreateValid = ref(true);
+    function toggleDropdown(forcedState) {
+      if (!props.disabled) {
+        if (typeof forcedState !== "undefined") {
+          searchContainerVisible.value = forcedState;
+        } else {
+          searchContainerVisible.value = !searchContainerVisible.value;
+        }
+      }
+    }
+    function search(searchTerm) {
+      objectToCreateValue.value = searchTerm;
+      emit("search", searchTerm);
+    }
+    function searchParent(searchTerm) {
+      parentObjectToCreateValue.value = searchTerm;
+      emit("search-parent", searchTerm);
+    }
+    function clearObject() {
+      selectedItem.value = null;
+      toggleDropdown(false);
+    }
+    function selectObject(id) {
+      const item = getComboBoxItemById(id);
+      selectedItem.value = item;
+      toggleDropdown(false);
+    }
+    function getComboBoxItemById(id) {
+      let currentItem = null;
+      if (props.results !== null) {
+        for (let i = 0; i < props.results.length; i++) {
+          if (props.results[i].id === id) {
+            currentItem = props.results[i];
+            break;
+          }
+        }
+      }
+      return currentItem;
+    }
+    function createObject() {
+      var _a, _b;
+      createObjectRequest.value = {
+        name: objectToCreateValue.value,
+        parentId: (_b = (_a = parentItem.value) == null ? void 0 : _a.id) != null ? _b : 0
+      };
+      emit("create-object", createObjectRequest.value);
+    }
+    function createParentObject() {
+      createObjectRequest.value = {
+        name: parentObjectToCreateValue.value,
+        parentId: 0
+      };
+      emit("create-parent-object", createObjectRequest.value);
+    }
+    function handleObjectCreateResponse() {
+      var _a, _b;
+      if ((_a = props.objectCreatedResponse) == null ? void 0 : _a.error) {
+        showNotification({
+          message: t2("comboBox.createFailed", { name: objectToCreateValue.value, error: props.objectCreatedResponse.error }),
+          colour: "danger",
+          duration: 1e4
+        });
+      } else if ((_b = props.objectCreatedResponse) == null ? void 0 : _b.id) {
+        handleSuccessfulObjectCreation();
+      }
+    }
+    function handleParentObjectCreateResponse() {
+      var _a, _b;
+      if ((_a = props.parentObjectCreatedResponse) == null ? void 0 : _a.id) {
+        parentItem.value = {
+          id: props.parentObjectCreatedResponse.id,
+          name: (_b = props.parentObjectCreatedResponse.name) != null ? _b : ""
+        };
+      }
+    }
+    function handleSuccessfulObjectCreation() {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+      showNotification({
+        message: t2("comboBox.createSuccessful", { object: props.objectType, name: (_b = (_a = props.objectCreatedResponse) == null ? void 0 : _a.name) != null ? _b : "" }),
+        colour: "primary",
+        duration: 1e4
+      });
+      let parentName = "";
+      if (parentItem.value && parentItem.value.id === ((_c = props.objectCreatedResponse) == null ? void 0 : _c.parentId)) {
+        parentName = parentItem.value.name;
+      }
+      selectedItem.value = {
+        id: (_e = (_d = props.objectCreatedResponse) == null ? void 0 : _d.id) != null ? _e : 0,
+        name: (_g = (_f = props.objectCreatedResponse) == null ? void 0 : _f.name) != null ? _g : "",
+        parentId: (_i = (_h = props.objectCreatedResponse) == null ? void 0 : _h.parentId) != null ? _i : 0,
+        parentName
+      };
+    }
+    function getDisplayName() {
+      let name = "";
+      if (selectedItem.value) {
+        if (selectedItem.value.parentName) {
+          name = selectedItem.value.parentName + "; " + selectedItem.value.name;
+        } else {
+          name = selectedItem.value.name;
+        }
+      }
+      return name;
+    }
+    function validateObjectToCreate() {
+      let valid = true;
+      if (objectToCreateValue.value === "") {
+        valid = false;
+      }
+      if (props.objectParentType !== "" && parentItem.value === null) {
+        valid = false;
+      }
+      objectToCreateValid.value = valid;
+    }
+    watch(() => props.objectCreatedResponse, () => handleObjectCreateResponse());
+    watch(() => props.parentObjectCreatedResponse, () => handleParentObjectCreateResponse());
+    watch(() => objectToCreateValue.value, () => validateObjectToCreate());
+    watch(() => parentItem.value, () => validateObjectToCreate());
+    return (_ctx, _cache) => {
+      const _component_icon = resolveComponent("icon");
+      const _component_cl_ui_combo_box = resolveComponent("cl-ui-combo-box", true);
+      return openBlock(), createElementBlock("div", null, [
+        createElementVNode("div", _hoisted_1$h, [
+          createVNode(ClUiInput, {
+            modelValue: unref(currentText),
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(currentText) ? currentText.value = $event : null),
+            class: normalizeClass(["!cl-bg-transparent !cl-mr-0 cl-mb-0 cl-rounded-r-none cl-w-full cl-z-10", {
+              "cl-cursor-pointer": __props.disabled === false
+            }]),
+            "input-type": "text",
+            "placeholder-text": unref(t2)("comboBox.emptyHintText", { object: __props.objectType }),
+            onFocus: _cache[1] || (_cache[1] = ($event) => {
+              toggleDropdown(true);
+              _ctx.$emit("focus");
+            })
+          }, null, 8, ["modelValue", "class", "placeholder-text"]),
+          withDirectives(createElementVNode("div", _hoisted_2$e, [
+            createElementVNode("div", _hoisted_3$c, [
+              createTextVNode(toDisplayString(unref(t2)("comboBox.required")) + " ", 1),
+              createVNode(_component_icon, {
+                class: "cl-ml-1 cl-mt-1",
+                icon: "ph:warning"
+              })
+            ])
+          ], 512), [
+            [vShow, __props.required && __props.disabled === false && __props.currentObject === null]
+          ]),
+          createElementVNode("div", {
+            class: normalizeClass(["cl-border cl-border-grey-1 cl-float-right cl-h-10 cl-px-1 cl-py-2.5 cl-rounded cl-rounded-l-none cl-text-grey-3 cl-transition-colors cl-w-min hover:cl-bg-primary-default hover:cl-text-white", {
+              "cl-bg-off-white cl-cursor-default hover:cl-bg-off-white hover:cl-text-grey-3": __props.disabled,
+              "cl-cursor-pointer": __props.disabled === false
+            }]),
+            onClick: _cache[2] || (_cache[2] = ($event) => toggleDropdown(true))
+          }, [
+            createVNode(_component_icon, {
+              icon: "ph:caret-down",
+              weight: "fill"
+            })
+          ], 2)
+        ]),
+        createVNode(_sfc_main$n, { size: "x-small" }, {
+          title: withCtx(() => [
+            createTextVNode(toDisplayString(unref(t2)("comboBox.createTitle", { object: __props.objectType })), 1)
+          ]),
+          trigger: withCtx(({ open }) => [
+            withDirectives(createVNode(_sfc_main$k, {
+              "can-create-new-object": __props.canCreateNewObject,
+              "can-clear-selected-object": __props.canClearSelectedObject,
+              loading: __props.loading,
+              results: __props.results,
+              "object-type": __props.objectType,
+              "object-parent-type": __props.objectParentType,
+              "error-message": __props.errorMessage,
+              "current-object-name": unref(currentText),
+              "is-visible": searchContainerVisible.value,
+              onCreateObject: open,
+              onSelectObject: selectObject,
+              onClearObject: clearObject,
+              onSearch: search,
+              onHideDropdown: _cache[3] || (_cache[3] = ($event) => toggleDropdown(false))
+            }, null, 8, ["can-create-new-object", "can-clear-selected-object", "loading", "results", "object-type", "object-parent-type", "error-message", "current-object-name", "is-visible", "onCreateObject"]), [
+              [vShow, searchContainerVisible.value]
+            ])
+          ]),
+          footer: withCtx(({ close }) => [
+            createElementVNode("div", _hoisted_5$7, [
+              createVNode(_sfc_main$s, {
+                class: "cl-mr-4",
+                colour: "primary",
+                size: "small",
+                disabled: !objectToCreateValid.value,
+                onClick: ($event) => {
+                  createObject();
+                  close();
+                }
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(t2)("comboBox.create")), 1)
+                ]),
+                _: 2
+              }, 1032, ["disabled", "onClick"]),
+              createVNode(_sfc_main$s, {
+                colour: "danger",
+                size: "small",
+                onClick: close
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(t2)("comboBox.cancel")), 1)
+                ]),
+                _: 2
+              }, 1032, ["onClick"])
+            ])
+          ]),
+          default: withCtx(() => [
+            createElementVNode("div", _hoisted_4$a, [
+              __props.objectParentType ? (openBlock(), createBlock(_component_cl_ui_combo_box, {
+                key: 0,
+                "current-object": parentItem.value,
+                "onUpdate:current-object": _cache[4] || (_cache[4] = ($event) => parentItem.value = $event),
+                class: "cl-mt-3",
+                results: __props.parentResults,
+                loading: __props.loading,
+                "object-type": __props.objectParentType,
+                "object-created-response": __props.parentObjectCreatedResponse,
+                "can-create-new-object": __props.canCreateNewObject,
+                "can-clear-selected-object": __props.canClearSelectedObject,
+                "error-message": __props.errorMessage,
+                onSearch: searchParent,
+                onCreateObject: createParentObject
+              }, null, 8, ["current-object", "results", "loading", "object-type", "object-created-response", "can-create-new-object", "can-clear-selected-object", "error-message"])) : createCommentVNode("", true),
+              createVNode(ClUiInput, {
+                modelValue: objectToCreateValue.value,
+                "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => objectToCreateValue.value = $event),
+                label: unref(t2)("comboBox.createProperty"),
+                class: "cl-mb-2 cl-pt-2 cl-w-full",
+                "input-type": "text"
+              }, null, 8, ["modelValue", "label"])
+            ])
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+function isComboBoxItem(objectToTest) {
+  return typeof objectToTest.id === "number" && typeof objectToTest.name === "string";
+}
+function isComboBoxCreateRequest(objectToTest) {
+  return typeof objectToTest.name === "string";
+}
+const _sfc_main$i = {};
+const _hoisted_1$g = { class: "cl-flex cl-flex-wrap cl-left-0 cl-mt-4 cl-w-full" };
+const _hoisted_2$d = {
+  key: 0,
+  class: "cl-w-full"
+};
+const _hoisted_3$b = {
+  key: 1,
+  class: "cl-leading-10 cl-text-sm cl-w-full"
+};
+const _hoisted_4$9 = { class: "cl-float-left" };
+const _hoisted_5$6 = { class: "cl-float-right" };
+function _sfc_render$4(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$g, [
+    _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_2$d, [
+      renderSlot(_ctx.$slots, "default")
+    ])) : createCommentVNode("", true),
+    _ctx.$slots.left || _ctx.$slots.right ? (openBlock(), createElementBlock("div", _hoisted_3$b, [
+      createElementVNode("span", _hoisted_4$9, [
+        renderSlot(_ctx.$slots, "left")
+      ]),
+      createElementVNode("span", _hoisted_5$6, [
+        renderSlot(_ctx.$slots, "right")
+      ])
+    ])) : createCommentVNode("", true)
+  ]);
+}
+var clUiFooter = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$4]]);
+const _hoisted_1$f = { class: "cl-mr-2 lg:cl-hidden" };
+const _hoisted_2$c = { class: "cl-mr-2 lg:cl-hidden" };
+const _hoisted_3$a = {
+  key: 0,
+  class: "cl-inline-block cl-whitespace-nowrap"
+};
+const _hoisted_4$8 = {
+  key: 1,
+  class: "cl-inline-block cl-whitespace-nowrap"
+};
+const __default__$1 = {
+  inheritAttrs: false
+};
+const _sfc_main$h = /* @__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$f, 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));
+    };
+  }
+}));
+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 = /* @__PURE__ */ ((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";
+  return FilterOperation2;
+})(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 defaultFilterMethod = {
+  method: "equal",
+  icon: "&equals;",
+  description: "Equals",
+  allowedTypes: [
+    "number",
+    "string",
+    "boolean",
+    "date"
+  ]
+};
+const defaultStringFilterMethod = {
+  method: "contains",
+  icon: "&sub;",
+  description: "Contains",
+  allowedTypes: ["string"]
+};
+const defaultDateTimeFilterMethod = {
+  method: "lessthan",
+  icon: "&lt;",
+  description: "Less than",
+  allowedTypes: [
+    "number",
+    "date",
+    "datetime"
+  ]
+};
+const filterMethods = [
+  defaultStringFilterMethod,
+  {
+    method: "notcontains",
+    icon: "&nsub;",
+    description: "Does not contain",
+    allowedTypes: ["string"]
+  },
+  {
+    method: "startswith",
+    icon: "&Hat;",
+    description: "Starts with",
+    allowedTypes: ["string"]
+  },
+  {
+    method: "endswith",
+    icon: "&dollar;",
+    description: "Ends with",
+    allowedTypes: ["string"]
+  },
+  defaultFilterMethod,
+  {
+    method: "notequal",
+    icon: "&ne;",
+    description: "Does not equal",
+    allowedTypes: [
+      "number",
+      "string",
+      "boolean",
+      "date"
+    ]
+  },
+  defaultDateTimeFilterMethod,
+  {
+    method: "greaterthan",
+    icon: "&gt;",
+    description: "Greater than",
+    allowedTypes: [
+      "number",
+      "date",
+      "datetime"
+    ]
+  },
+  {
+    method: "equalorlessthan",
+    icon: "&le;",
+    description: "Less than or equal to",
+    allowedTypes: [
+      "number",
+      "date",
+      "datetime"
+    ]
+  },
+  {
+    method: "equalorgreaterthan",
+    icon: "&ge;",
+    description: "Greater than or equal to",
+    allowedTypes: [
+      "number",
+      "date",
+      "datetime"
+    ]
+  }
+];
+const _hoisted_1$e = {
+  key: 0,
+  class: "cl-border-grey-2 cl-border-r cl-capitalize cl-group cl-inline cl-relative cl-w-auto"
+};
+const _hoisted_2$b = { class: "cl-bg-off-white cl-flex cl-h-full cl-items-center cl-justify-center cl-w-10" };
+const _hoisted_3$9 = { class: "cl-p-3" };
+const _hoisted_4$7 = { class: "cl-px-4 cl-py-1 cl-w-full" };
+const _hoisted_5$5 = ["innerHTML"];
+const _hoisted_6$5 = { class: "cl-p-3" };
+const _hoisted_7$5 = ["onClick"];
+const _hoisted_8$4 = ["innerHTML"];
+const _hoisted_9$4 = /* @__PURE__ */ createElementVNode("option", { value: void 0 }, null, -1);
+const _hoisted_10$4 = ["selected"];
+const _hoisted_11$3 = ["selected"];
+const _hoisted_12$3 = {
+  key: 1,
+  class: "cl-flex cl-w-full"
+};
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  props: {
+    request: null,
+    column: null,
+    firstHalf: { type: Boolean, default: true }
+  },
+  emits: {
+    "update:request": null
+  },
+  setup(__props, { emit }) {
+    const props = __props;
+    const { locale, t: t2 } = useI18n();
+    const { debounce } = useDebouncer(750);
+    const allowedFilterMethods = computed(() => {
+      const methods = getAllowedMethods();
+      methods.forEach((m) => {
+        m.description = t2(`grid.${m.method}`);
+      });
+      return methods;
+    });
+    const currentFilterMethod = computed(() => {
+      var _a;
+      let filterMethod = (_a = props.request.filters.find((f) => f.filterOnColumn === props.column.field)) == null ? void 0 : _a.filterMethod;
+      if (typeof filterMethod === "undefined") {
+        filterMethod = FilterOperation[getDefaultFilterOperation()];
+      }
+      return allowedFilterMethods.value.find((m) => {
+        var _a2;
+        return m.method.toLowerCase() === ((_a2 = filterMethod == null ? void 0 : filterMethod.removeNonAlphanumeric()) == null ? void 0 : _a2.toLowerCase());
+      });
+    });
+    const currentFilter = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.request.filters.find((f) => f.filterOnColumn === props.column.field)) == null ? void 0 : _a.filterValue) != null ? _b : "";
+    });
+    const currentDateFilter = computed(() => currentFilter.value !== "" ? new Date(currentFilter.value) : null);
+    const filterInput = ref(currentFilter.value);
+    const decimalSeparator = computed(() => Intl.NumberFormat(locale.value).format(1.1).replace(/[0-9]+/g, ""));
+    const columnInputType = computed(() => {
+      let inputType = "text";
+      if (props.column.slotType === "date" || props.column.type === "date") {
+        inputType = "date";
+      } else if (props.column.slotType === "datetime" || props.column.type === "datetime") {
+        inputType = "datetime";
+      }
+      return inputType;
+    });
+    function getDefaultFilterOperation() {
+      return props.column.type === "string" || props.column.slotType === "string" ? FilterOperation.CONTAINS : props.column.type === "datetime" || props.column.slotType === "datetime" ? FilterOperation.LESS_THAN : FilterOperation.EQUAL;
+    }
+    function getAllowedMethods() {
+      let result = [];
+      if (props.column.type !== "slot") {
+        result = filterMethods.filter((f) => f.allowedTypes.includes(props.column.type));
+      } else if (typeof props.column.slotType !== "undefined" && typeof props.column.field !== "undefined") {
+        result = filterMethods.filter((f) => f.allowedTypes.includes(props.column.slotType));
+      }
+      return result;
+    }
+    function setFilterMethod(filterMethod) {
+      const filterRequest = copy(props.request);
+      const index = filterRequest.filters.findIndex((f) => f.filterOnColumn === props.column.field);
+      if (index >= 0) {
+        filterRequest.filters[index].filterOperation = FilterOperation[filterMethod.toUpperCase()];
+        filterRequest.filters[index].filterMethod = filterMethod.toUpperCase();
+      } else if (typeof props.column.field !== "undefined") {
+        filterRequest.filters.push({
+          filterOnColumn: props.column.field,
+          filterMethod: filterMethod.toUpperCase(),
+          filterOperation: FilterOperation[filterMethod.toUpperCase()],
+          filterValue: ""
+        });
+      }
+      emit("update:request", filterRequest);
+    }
+    function setFilter(target, defaultValue) {
+      var _a;
+      const value = ((_a = target == null ? void 0 : target.value) != null ? _a : defaultValue).trim();
+      const filterRequest = copy(props.request);
+      const index = filterRequest.filters.findIndex((f) => f.filterOnColumn === props.column.field);
+      let preventEmit = false;
+      filterRequest.pageNumber = 1;
+      if (index >= 0) {
+        preventEmit = filterRequest.filters[index].filterValue === value;
+        filterRequest.filters[index].filterValue = value;
+      } else if (value !== "" && typeof props.column.field !== "undefined") {
+        const defaultFilterOperation = getDefaultFilterOperation();
+        filterRequest.filters.push({
+          filterOnColumn: props.column.field,
+          filterMethod: FilterOperation[defaultFilterOperation],
+          filterOperation: defaultFilterOperation,
+          filterValue: value
+        });
+      }
+      if (preventEmit === false) {
+        emit("update:request", filterRequest);
+      }
+    }
+    function setNumberFilter(target) {
+      var _a, _b;
+      let inputValue = (_b = (_a = target == null ? void 0 : target.value) == null ? void 0 : _a.replace(new RegExp(`[^0-9\\${decimalSeparator.value}]`, "g"), "")) != null ? _b : "";
+      let value = "";
+      if (props.column.format === NumberFormat.INTEGER) {
+        value = parseInt(inputValue);
+      } else {
+        inputValue = inputValue.replace(decimalSeparator.value, ".");
+        value = parseFloat(inputValue);
+      }
+      if (typeof value === "number" && isNaN(value)) {
+        value = "";
+      }
+      setFilter(null, value.toString());
+    }
+    function setDateFilter(value) {
+      var _a;
+      setFilter(null, (_a = value == null ? void 0 : value.toISOString()) != null ? _a : "");
+    }
+    return (_ctx, _cache) => {
+      var _a, _b;
+      const _component_icon = resolveComponent("icon");
+      return __props.column.filterable === void 0 || __props.column.filterable === true ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(["cl-border-grey-2 cl-flex cl-h-[2.6rem] cl-rounded cl-w-full", {
+          "cl-border-b cl-p-5": __props.column.type === "slot" && (__props.column.slotType === void 0 || __props.column.field === void 0),
+          "cl-border": __props.column.type !== "slot" || __props.column.slotType !== void 0 && __props.column.field !== void 0
+        }])
+      }, [
+        __props.column.type !== "slot" || __props.column.slotType !== void 0 && __props.column.field !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_1$e, [
+          createElementVNode("div", _hoisted_2$b, [
+            createVNode(_component_icon, {
+              icon: "ph:sliders-horizontal",
+              size: 20
+            })
+          ]),
+          createElementVNode("div", {
+            class: normalizeClass(["cl-absolute cl-bg-white cl-flex-wrap cl-font-normal cl-h-0 cl-hidden cl-pb-2 cl-shadow-lg cl-text-left cl-text-sm cl-top-10 cl-z-10 group-hover:cl-flex group-hover:cl-h-auto group-hover:cl-w-52", {
+              "cl-left-0": __props.firstHalf,
+              "cl--left-44": !__props.firstHalf
+            }])
+          }, [
+            createElementVNode("strong", _hoisted_3$9, toDisplayString(unref(t2)("grid.currentMethod")), 1),
+            createElementVNode("span", _hoisted_4$7, [
+              createTextVNode(toDisplayString((_a = unref(currentFilterMethod)) == null ? void 0 : _a.description) + " ", 1),
+              createElementVNode("span", {
+                class: "cl-float-right",
+                innerHTML: (_b = unref(currentFilterMethod)) == null ? void 0 : _b.icon
+              }, null, 8, _hoisted_5$5)
+            ]),
+            createElementVNode("strong", _hoisted_6$5, toDisplayString(unref(t2)("grid.availableMethods")), 1),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(allowedFilterMethods), (filterMethod, index) => {
+              return openBlock(), createElementBlock("span", {
+                key: index,
+                class: "cl-cursor-pointer cl-px-4 cl-py-1 cl-transition-colors cl-w-full hover:cl-bg-off-white",
+                onClick: withModifiers(($event) => setFilterMethod(filterMethod.method), ["prevent"])
+              }, [
+                createTextVNode(toDisplayString(filterMethod.description) + " ", 1),
+                createElementVNode("span", {
+                  class: "cl-float-right",
+                  innerHTML: filterMethod.icon
+                }, null, 8, _hoisted_8$4)
+              ], 8, _hoisted_7$5);
+            }), 128))
+          ], 2)
+        ])) : createCommentVNode("", true),
+        __props.column.type === "boolean" || __props.column.slotType === "boolean" && typeof __props.column.field !== "undefined" ? (openBlock(), createElementBlock("select", {
+          key: 1,
+          class: "cl-border-none cl-w-full",
+          onChange: _cache[0] || (_cache[0] = ($event) => setFilter($event.target))
+        }, [
+          _hoisted_9$4,
+          createElementVNode("option", {
+            value: "true",
+            selected: unref(currentFilter) === "true"
+          }, toDisplayString(unref(t2)("grid.true")), 9, _hoisted_10$4),
+          createElementVNode("option", {
+            value: "false",
+            selected: unref(currentFilter) === "false"
+          }, toDisplayString(unref(t2)("grid.false")), 9, _hoisted_11$3)
+        ], 32)) : __props.column.type === "date" || __props.column.type === "datetime" || (__props.column.slotType === "date" || __props.column.slotType === "datetime") && typeof __props.column.field !== "undefined" ? (openBlock(), createBlock(ClUiInput, {
+          key: 2,
+          "model-value": unref(currentDateFilter),
+          class: "!cl-border-none !cl-mb-0 !cl-mr-0 cl-w-full",
+          min: "1900-01-01",
+          max: "2999-12-31T23:59",
+          label: __props.column.name,
+          "show-label": false,
+          "input-type": unref(columnInputType),
+          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => setDateFilter($event))
+        }, null, 8, ["model-value", "label", "input-type"])) : __props.column.type === "number" || __props.column.slotType === "number" && typeof __props.column.field !== "undefined" ? (openBlock(), createBlock(ClUiInput, {
+          key: 3,
+          modelValue: filterInput.value,
+          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => filterInput.value = $event),
+          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))
+        }, 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))
+        }, null, 8, ["modelValue"])) : createCommentVNode("", true)
+      ], 2)) : (openBlock(), createElementBlock("div", _hoisted_12$3, " \xA0 "));
+    };
+  }
+});
+const _hoisted_1$d = {
+  key: 0,
+  class: "cl-flex cl-flex-wrap cl-justify-end cl-mt-4 cl-w-full"
+};
+const _hoisted_2$a = { class: "cl-bg-off-white cl-border cl-border-grey-0 cl-flex cl-items-center cl-mb-2 cl-px-3 cl-rounded cl-shadow-md cl-text-sm cl-w-full lg:cl-w-auto" };
+const _hoisted_3$8 = { class: "cl-text-grey-3 cl-w-max" };
+const _hoisted_4$6 = { class: "cl-bg-off-white cl-border cl-border-grey-0 cl-flex cl-flex-wrap cl-items-center cl-mb-2 cl-px-3 cl-py-2 cl-rounded cl-shadow-md cl-text-sm cl-w-full lg:cl-ml-2 lg:cl-w-auto mb:cl-flex-nowrap" };
+const _hoisted_5$4 = { class: "cl-flex cl-flex-wrap cl-mb-2 cl-text-sm cl-w-full lg:cl-p-2 md:cl-mb-0 md:cl-w-auto" };
+const _hoisted_6$4 = { class: "cl-flex cl-flex-wrap cl-mb-2 cl-w-full lg:cl-mb-0 lg:cl-mr-2 lg:cl-w-auto" };
+const _hoisted_7$4 = { class: "cl-text-grey-3 cl-w-full lg:cl-mr-2 lg:cl-w-auto" };
+const _hoisted_8$3 = { class: "cl-flex cl-flex-wrap cl-text-sm mb:cl-flex-nowrap" };
+const _hoisted_9$3 = { class: "cl-pr-2" };
+const _hoisted_10$3 = ["onClick"];
+const _hoisted_11$2 = { class: "cl-flex cl-flex-wrap cl-mb-2 cl-text-sm cl-w-full lg:cl-p-2 md:cl-mb-0 md:cl-w-auto" };
+const _hoisted_12$2 = { class: "cl-mb-2 cl-text-grey-3 cl-w-full lg:cl-mb-0 lg:cl-mr-2 lg:cl-w-auto" };
+const _hoisted_13$1 = ["onClick"];
+const _hoisted_14$1 = { class: "cl-mb-2 cl-w-full lg:cl-p-2 md:cl-mb-0 md:cl-w-auto" };
+const _hoisted_15$1 = { class: "cl-block cl-mb-2 cl-text-grey-3 cl-w-full lg:cl-inline-block lg:cl-mb-0 lg:cl-mr-1 lg:cl-w-auto" };
+const _hoisted_16$1 = { class: "cl-block lg:cl-inline-block" };
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  props: {
+    request: null,
+    data: { default: null }
+  },
+  emits: {
+    "update:request": null
+  },
+  setup(__props, { emit }) {
+    const props = __props;
+    const pageSizes = [
+      10,
+      20,
+      50,
+      100,
+      200
+    ];
+    const { n, t: t2 } = useI18n();
+    const { debounce } = useDebouncer();
+    const currentPage = ref(props.request.pageNumber);
+    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 = [];
+      calculatedPageNumbers.shift();
+      if (calculatedPageNumbers.length) {
+        const startPage = props.request.pageNumber === totalPages.value || props.request.pageNumber === totalPages.value - 1 ? totalPages.value - 3 : props.request.pageNumber - 1;
+        const endPage = startPage + 3;
+        results = calculatedPageNumbers.slice(startPage, endPage);
+      }
+      return results;
+    });
+    function setPage(pageNumber) {
+      const filterRequest = copy(props.request);
+      if (filterRequest.pageNumber !== pageNumber) {
+        filterRequest.pageNumber = Math.max(Math.min(Math.trunc(pageNumber), totalPages.value), 1);
+        emit("update:request", filterRequest);
+      }
+    }
+    function setPageFromInput(target) {
+      const pageNumber = parseInt(target == null ? void 0 : target.value) || 1;
+      setPage(pageNumber);
+    }
+    function setPageSize(pageSize) {
+      const filterRequest = copy(props.request);
+      filterRequest.pageSize = pageSize;
+      filterRequest.pageNumber = 1;
+      emit("update:request", filterRequest);
+    }
+    watch(() => props.request.pageNumber, () => currentPage.value = props.request.pageNumber);
+    return (_ctx, _cache) => {
+      var _a;
+      const _component_icon = resolveComponent("icon");
+      return __props.data && ((_a = __props.data.results) == null ? void 0 : _a.length) && __props.request ? (openBlock(), createElementBlock("div", _hoisted_1$d, [
+        createElementVNode("div", _hoisted_2$a, [
+          createElementVNode("span", _hoisted_3$8, toDisplayString(unref(t2)("grid.jumpToPage")), 1),
+          createVNode(ClUiInput, {
+            modelValue: currentPage.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => currentPage.value = $event),
+            class: "cl-ml-1 cl-mt-0.5 cl-text-sm",
+            "input-type": "number",
+            label: "Page",
+            "show-label": false,
+            min: "1",
+            max: unref(totalPages),
+            onInput: _cache[1] || (_cache[1] = ($event) => unref(debounce)(setPageFromInput, $event.target))
+          }, null, 8, ["modelValue", "max"])
+        ]),
+        createElementVNode("div", _hoisted_4$6, [
+          createElementVNode("div", _hoisted_5$4, [
+            createElementVNode("li", _hoisted_6$4, [
+              createElementVNode("span", _hoisted_7$4, toDisplayString(unref(t2)("grid.page")), 1)
+            ]),
+            createElementVNode("ul", _hoisted_8$3, [
+              createElementVNode("li", _hoisted_9$3, toDisplayString(unref(n)(__props.request.pageNumber, unref(NumberFormat).INTEGER)) + " / " + toDisplayString(unref(n)(unref(totalPages), unref(NumberFormat).INTEGER)), 1),
+              withDirectives(createElementVNode("li", {
+                class: "cl-cursor-pointer cl-mr-1 cl-mt-1 lg:cl-mr-2",
+                onClick: _cache[2] || (_cache[2] = ($event) => setPage(1))
+              }, [
+                createVNode(_component_icon, {
+                  icon: "ph:caret-double-left",
+                  size: 14
+                })
+              ], 512), [
+                [vShow, __props.request.pageNumber > 1]
+              ]),
+              withDirectives(createElementVNode("li", {
+                class: "cl-cursor-pointer cl-mt-1 lg:cl-mr-2 mr-1",
+                onClick: _cache[3] || (_cache[3] = ($event) => setPage(__props.request.pageNumber - 1))
+              }, [
+                createVNode(_component_icon, {
+                  icon: "ph:caret-left",
+                  size: 14
+                })
+              ], 512), [
+                [vShow, __props.request.pageNumber > 1]
+              ]),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pageNumbers), (number, index) => {
+                return openBlock(), createElementBlock("li", {
+                  key: index,
+                  class: normalizeClass(["cl-cursor-pointer cl-mr-1 lg:cl-mr-2", {
+                    "cl-text-black cl-font-bold": __props.request.pageNumber === number,
+                    "cl-text-grey-6": __props.request.pageNumber !== number
+                  }]),
+                  onClick: ($event) => setPage(number)
+                }, toDisplayString(unref(n)(number, unref(NumberFormat).INTEGER)), 11, _hoisted_10$3);
+              }), 128)),
+              withDirectives(createElementVNode("li", {
+                class: "cl-cursor-pointer cl-mr-1 cl-mt-1 lg:cl-mr-2",
+                onClick: _cache[4] || (_cache[4] = ($event) => setPage(__props.request.pageNumber + 1))
+              }, [
+                createVNode(_component_icon, {
+                  icon: "ph:caret-right",
+                  size: 14
+                })
+              ], 512), [
+                [vShow, __props.request.pageNumber < unref(totalPages)]
+              ]),
+              withDirectives(createElementVNode("li", {
+                class: "cl-cursor-pointer cl-mr-1 cl-mt-1 lg:cl-mr-2",
+                onClick: _cache[5] || (_cache[5] = ($event) => setPage(unref(totalPages)))
+              }, [
+                createVNode(_component_icon, {
+                  icon: "ph:caret-double-right",
+                  size: 14
+                })
+              ], 512), [
+                [vShow, __props.request.pageNumber < unref(totalPages)]
+              ])
+            ])
+          ]),
+          createElementVNode("ul", _hoisted_11$2, [
+            createElementVNode("li", _hoisted_12$2, toDisplayString(unref(t2)("grid.pageSize")), 1),
+            (openBlock(), createElementBlock(Fragment, null, renderList(pageSizes, (size, index) => {
+              return createElementVNode("li", {
+                key: index,
+                class: normalizeClass(["cl-cursor-pointer cl-mr-1 lg:cl-mr-2", {
+                  "cl-text-black cl-font-bold": __props.request.pageSize === size,
+                  "cl-text-grey-6": __props.request.pageSize !== size
+                }]),
+                onClick: ($event) => setPageSize(size)
+              }, toDisplayString(unref(n)(size, unref(NumberFormat).INTEGER)), 11, _hoisted_13$1);
+            }), 64))
+          ]),
+          createElementVNode("ul", _hoisted_14$1, [
+            createElementVNode("li", _hoisted_15$1, toDisplayString(unref(t2)("grid.totalRecords")), 1),
+            createElementVNode("li", _hoisted_16$1, toDisplayString(unref(n)(__props.data.totalRecords, unref(NumberFormat).INTEGER)), 1)
+          ])
+        ])
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$c = { class: "cl-fixed cl-flex cl-h-full cl-justify-end cl-right-0 cl-shadow-lg cl-top-0 cl-z-50" };
+const _hoisted_2$9 = { class: "cl-bg-secondary-default cl-h-full cl-overflow-y-auto cl-px-10 cl-py-20 cl-relative cl-text-grey-2 cl-w-80" };
+const _hoisted_3$7 = { class: "cl-mb-4 cl-text-2xl cl-text-off-white" };
+const _hoisted_4$5 = { class: "cl-border-grey-3 cl-border-t cl-flex cl-flex-wrap cl-text-sm cl-w-full" };
+const _hoisted_5$3 = { class: "cl-border-b cl-border-grey-2 cl-flex cl-py-2 cl-text-sm cl-w-full" };
+const _hoisted_6$3 = { class: "cl-flex-1 cl-py-2" };
+const _hoisted_7$3 = { class: "cl-py-2 cl-w-1/4" };
+const _hoisted_8$2 = { class: "cl-py-2 cl-w-1/5" };
+const _hoisted_9$2 = { class: "cl-flex-1 cl-py-2" };
+const _hoisted_10$2 = { class: "cl-py-2 cl-w-1/4" };
+const _hoisted_11$1 = { class: "cl-py-2 cl-text-off-white cl-w-1/5" };
+const _hoisted_12$1 = { key: 1 };
+const __default__ = {
+  inheritAttrs: false
+};
+const _sfc_main$e = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
+  props: {
+    columns: null
+  },
+  emits: {
+    "update:columns": null
+  },
+  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$s, 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$c, [
+                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$b = {
+  key: 0,
+  class: "cl-pb-2 cl-pr-2 cl-w-1/2 lg:cl-pb-0 lg:cl-w-auto"
+};
+const _hoisted_2$8 = { class: "cl-hidden cl-pr-2 lg:cl-inline-block" };
+const _hoisted_3$6 = { class: "cl-pb-2 cl-pr-2 cl-w-1/2 lg:cl-pb-0 lg:cl-pr-0 lg:cl-w-auto" };
+const _hoisted_4$4 = { class: "cl-pr-2 cl-w-full lg:cl-hidden md:cl-w-1/2" };
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  props: {
+    columns: null,
+    editMode: { type: Boolean },
+    editEnabled: { type: Boolean },
+    filterPanelOpen: { type: Boolean, default: false }
+  },
+  emits: {
+    "reset-filters": null,
+    "update:columns": null,
+    "update:edit-mode": null,
+    "update:filter-panel-open": null
+  },
+  setup(__props, { emit }) {
+    const props = __props;
+    const { t: t2 } = useI18n();
+    const currentColumns = computed({
+      get: () => props.columns,
+      set: (value) => emit("update:columns", value)
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        __props.editEnabled ? (openBlock(), createElementBlock("span", _hoisted_1$b, [
+          createVNode(_sfc_main$s, {
+            class: "cl-w-full lg:cl-w-auto",
+            size: "small",
+            colour: "default",
+            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:edit-mode", !__props.editMode))
+          }, {
+            default: withCtx(() => [
+              __props.editMode ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                createTextVNode(toDisplayString(unref(t2)("grid.finishEditing")), 1)
+              ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createTextVNode(toDisplayString(unref(t2)("grid.editData")), 1)
+              ], 64))
+            ]),
+            _: 1
+          })
+        ])) : createCommentVNode("", true),
+        createElementVNode("span", _hoisted_2$8, [
+          createVNode(_sfc_main$e, {
+            columns: unref(currentColumns),
+            "onUpdate:columns": _cache[1] || (_cache[1] = ($event) => isRef(currentColumns) ? currentColumns.value = $event : null)
+          }, null, 8, ["columns"])
+        ]),
+        createElementVNode("span", _hoisted_3$6, [
+          createVNode(_sfc_main$s, {
+            class: "cl-w-full lg:cl-w-auto",
+            size: "small",
+            onClick: _cache[2] || (_cache[2] = withModifiers(($event) => _ctx.$emit("reset-filters"), ["prevent"]))
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(t2)("grid.clearFilters")), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        createElementVNode("span", _hoisted_4$4, [
+          createVNode(_sfc_main$s, {
+            class: "cl-w-full",
+            colour: "blue",
+            size: "small",
+            onClick: _cache[3] || (_cache[3] = withModifiers(($event) => _ctx.$emit("update:filter-panel-open", true), ["prevent"]))
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(t2)("grid.modifyFilters")), 1)
+            ]),
+            _: 1
+          })
+        ])
+      ], 64);
+    };
+  }
+});
+var clUiGrid_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _hoisted_1$a = { class: "cl-hidden cl-mb-4 cl-w-full lg:cl-block lg:cl-text-right" };
+const _hoisted_2$7 = ["data-loading"];
+const _hoisted_3$5 = { class: "cl-absolute cl-bg-white cl-h-full cl-opacity-40 cl-w-full cl-z-20" };
+const _hoisted_4$3 = { class: "cl-bg-white cl-flex cl-flex-wrap cl-sticky cl-top-0 cl-w-full lg:cl-hidden" };
+const _hoisted_5$2 = { class: "cl-border-b cl-border-grey-2 cl-flex cl-flex-wrap cl-px-2 cl-py-4 cl-w-full" };
+const _hoisted_6$2 = { class: "cl-mb-4 cl-text-sm cl-w-full" };
+const _hoisted_7$2 = { class: "cl-flex cl-flex-wrap cl-w-full" };
+const _hoisted_8$1 = { class: "!cl-bg-white cl-absolute cl-h-screen cl-overflow-x-auto cl-p-4 cl-text-sm cl-w-full cl-z-10" };
+const _hoisted_9$1 = { class: "cl-border-b cl-border-grey-2 cl-mb-2 cl-pb-2 cl-text-right cl-w-full" };
+const _hoisted_10$1 = { class: "cl-grid cl-grid-cols-3" };
+const _hoisted_11 = {
+  key: 1,
+  class: "cl-ml-2"
+};
+const _hoisted_12 = { class: "cl-overflow-auto cl-w-full" };
+const _hoisted_13 = { class: "cl-min-w-full cl-table-fixed" };
+const _hoisted_14 = { class: "cl-hidden lg:cl-table-column-group" };
+const _hoisted_15 = { class: "cl-hidden lg:cl-table-header-group" };
+const _hoisted_16 = ["onClick"];
+const _hoisted_17 = { key: 1 };
+const _hoisted_18 = { key: 0 };
+const _hoisted_19 = { key: 1 };
+const _hoisted_20 = ["colspan"];
+const _hoisted_21 = { class: "cl-my-10 cl-py-1 cl-text-center cl-text-sm cl-w-full" };
+const _hoisted_22 = {
+  key: 0,
+  class: "cl-w-full"
+};
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  props: {
+    columns: null,
+    request: null,
+    loading: { type: Boolean },
+    data: { default: null }
+  },
+  emits: {
+    "update:columns": null,
+    "update:request": null,
+    "data-request": null,
+    "row-edit": null,
+    "edit-start": null,
+    "edit-end": null
+  },
+  setup(__props, { emit }) {
+    const props = __props;
+    const { t: t2 } = useI18n();
+    const columnStyles = ref({});
+    const editMode = ref(false);
+    const editRow = ref({
+      index: -1,
+      record: {}
+    });
+    const filterPanelOpen = ref(false);
+    const currentColumns = computed({
+      get: () => props.columns,
+      set: (value) => emit("update:columns", value)
+    });
+    const currentRequest = computed({
+      get: () => props.request,
+      set: (value) => emit("update:request", value)
+    });
+    const visibleColumns = computed(() => currentColumns.value.filter((e) => typeof e.visible === "undefined" || e.visible !== false));
+    const editEnabled = computed(() => props.columns.find((c) => c.editable === true) !== void 0);
+    function setColumnStyles() {
+      const result = {};
+      if (window.innerWidth >= 1024) {
+        currentColumns.value.forEach((c) => {
+          const value = c.width ? `${c.width}px` : "";
+          result[`${c.name}`] = `width: ${value}; min-width: ${value};`;
+        });
+      }
+      columnStyles.value = result;
+    }
+    function getStyleForColumn(name) {
+      var _a;
+      return (_a = columnStyles.value[name]) != null ? _a : "";
+    }
+    function setSort(field) {
+      if (typeof field !== "undefined") {
+        const filterRequest = copy(props.request);
+        if (filterRequest.sort === null || filterRequest.sort.sortOnColumn !== field) {
+          filterRequest.sort = {
+            sortOnColumn: field,
+            sortByAscending: true
+          };
+        } else if (filterRequest.sort.sortOnColumn === field && filterRequest.sort.sortByAscending === true) {
+          filterRequest.sort.sortByAscending = false;
+        } else {
+          filterRequest.sort = null;
+        }
+        currentRequest.value = filterRequest;
+      }
+    }
+    function resetFilters() {
+      const request = copy(currentRequest.value);
+      request.pageNumber = 1;
+      request.filters = [];
+      currentRequest.value = request;
+    }
+    function cellFocused(index) {
+      if (editRow.value.index !== -1 && editRow.value.index !== index) {
+        rowEdited();
+      }
+      editRow.value.index = index;
+    }
+    function cellChanged(value, field) {
+      if (field !== void 0) {
+        editRow.value.record[field] = value;
+      }
+    }
+    function cellReverted(field) {
+      if (field !== void 0) {
+        const _a = editRow.value.record, { [field]: _ } = _a, remainder = __objRest(_a, [__restKey(field)]);
+        editRow.value.record = __spreadValues({}, remainder);
+      }
+    }
+    function rowEdited() {
+      if (Object.keys(editRow.value.record).length !== 0) {
+        emit("row-edit", copy(editRow.value));
+        editRow.value.record = {};
+      }
+    }
+    onMounted(() => {
+      window.addEventListener("resize", setColumnStyles);
+      setColumnStyles();
+    });
+    onUnmounted(() => window.removeEventListener("resize", setColumnStyles));
+    watch(() => props.request, () => emit("data-request"), {
+      deep: true,
+      immediate: true
+    });
+    watch(() => editMode.value, () => {
+      if (editMode.value) {
+        emit("edit-start");
+      } else {
+        rowEdited();
+        emit("edit-end");
+        editRow.value.index = -1;
+      }
+    });
+    return (_ctx, _cache) => {
+      var _a, _b;
+      const _component_icon = resolveComponent("icon");
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("div", _hoisted_1$a, [
+          createVNode(_sfc_main$d, {
+            columns: unref(currentColumns),
+            "onUpdate:columns": _cache[0] || (_cache[0] = ($event) => isRef(currentColumns) ? currentColumns.value = $event : null),
+            "edit-mode": editMode.value,
+            "onUpdate:edit-mode": _cache[1] || (_cache[1] = ($event) => editMode.value = $event),
+            "edit-enabled": unref(editEnabled),
+            onResetFilters: resetFilters
+          }, null, 8, ["columns", "edit-mode", "edit-enabled"])
+        ]),
+        createElementVNode("div", {
+          class: "cl-relative cl-w-full grid-wrapper",
+          "data-loading": __props.loading
+        }, [
+          createVNode(Transition, { name: "fade" }, {
+            default: withCtx(() => [
+              withDirectives(createElementVNode("div", _hoisted_3$5, null, 512), [
+                [vShow, __props.loading]
+              ])
+            ]),
+            _: 1
+          }),
+          createElementVNode("div", _hoisted_4$3, [
+            createElementVNode("div", _hoisted_5$2, [
+              createElementVNode("strong", _hoisted_6$2, toDisplayString(unref(t2)("grid.gridTools")), 1),
+              createElementVNode("div", _hoisted_7$2, [
+                createVNode(_sfc_main$d, {
+                  columns: unref(currentColumns),
+                  "onUpdate:columns": _cache[2] || (_cache[2] = ($event) => isRef(currentColumns) ? currentColumns.value = $event : null),
+                  "edit-mode": editMode.value,
+                  "onUpdate:edit-mode": _cache[3] || (_cache[3] = ($event) => editMode.value = $event),
+                  "filter-panel-open": filterPanelOpen.value,
+                  "onUpdate:filter-panel-open": _cache[4] || (_cache[4] = ($event) => filterPanelOpen.value = $event),
+                  "edit-enabled": unref(editEnabled),
+                  onResetFilters: resetFilters
+                }, null, 8, ["columns", "edit-mode", "filter-panel-open", "edit-enabled"])
+              ])
+            ]),
+            createVNode(Transition, { name: "grow-down" }, {
+              default: withCtx(() => [
+                withDirectives(createElementVNode("div", _hoisted_8$1, [
+                  createElementVNode("div", _hoisted_9$1, [
+                    createVNode(_component_icon, {
+                      class: "cl--mt-1 cl-inline-block cl-text-grey-5",
+                      icon: "ph:x",
+                      size: 16,
+                      onClick: _cache[5] || (_cache[5] = ($event) => {
+                        filterPanelOpen.value = false;
+                      })
+                    })
+                  ]),
+                  createElementVNode("div", _hoisted_10$1, [
+                    createElementVNode("div", null, toDisplayString(unref(t2)("grid.field")), 1),
+                    createElementVNode("div", null, toDisplayString(unref(t2)("grid.filter")), 1),
+                    createElementVNode("div", null, toDisplayString(unref(t2)("grid.sortBy")), 1)
+                  ]),
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(visibleColumns), (column, index) => {
+                    return openBlock(), createElementBlock("div", {
+                      key: index,
+                      class: "cl-grid cl-grid-cols-3 cl-mb-4 cl-w-full"
+                    }, [
+                      createElementVNode("div", null, toDisplayString(column.caption), 1),
+                      createVNode(_sfc_main$g, {
+                        request: unref(currentRequest),
+                        "onUpdate:request": _cache[6] || (_cache[6] = ($event) => isRef(currentRequest) ? currentRequest.value = $event : null),
+                        column
+                      }, null, 8, ["request", "column"]),
+                      (column.type !== "slot" || column.slotType !== void 0 && column.field !== void 0) && (column.sortable === void 0 || column.sortable === true) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                        unref(currentRequest).sort === null || unref(currentRequest).sort.sortOnColumn !== column.field ? (openBlock(), createBlock(_component_icon, {
+                          key: 0,
+                          class: "cl-cursor-pointer cl-ml-2",
+                          icon: "ph:minus",
+                          onClick: ($event) => setSort(column.field)
+                        }, null, 8, ["onClick"])) : unref(currentRequest).sort.sortByAscending === false ? (openBlock(), createBlock(_component_icon, {
+                          key: 1,
+                          class: "cl-cursor-pointer cl-ml-2",
+                          icon: "ph:caret-down",
+                          onClick: ($event) => setSort(column.field)
+                        }, null, 8, ["onClick"])) : (openBlock(), createBlock(_component_icon, {
+                          key: 2,
+                          class: "cl-cursor-pointer cl-ml-2",
+                          icon: "ph:caret-up",
+                          onClick: ($event) => setSort(column.field)
+                        }, null, 8, ["onClick"]))
+                      ], 64)) : (openBlock(), createElementBlock("div", _hoisted_11, " \xA0 "))
+                    ]);
+                  }), 128))
+                ], 512), [
+                  [vShow, filterPanelOpen.value]
+                ])
+              ]),
+              _: 1
+            })
+          ]),
+          createElementVNode("div", _hoisted_12, [
+            createElementVNode("table", _hoisted_13, [
+              createElementVNode("colgroup", _hoisted_14, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(visibleColumns), (column, index) => {
+                  return openBlock(), createElementBlock("col", {
+                    key: index,
+                    style: normalizeStyle(getStyleForColumn(column.name)),
+                    span: 1
+                  }, null, 4);
+                }), 128))
+              ]),
+              createElementVNode("thead", _hoisted_15, [
+                createElementVNode("tr", null, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(visibleColumns), (column, index) => {
+                    var _a2;
+                    return openBlock(), createElementBlock("th", {
+                      key: index,
+                      class: "cl-border-b cl-border-grey-2 cl-font-semibold cl-p-1 cl-text-grey-3 cl-text-left cl-text-sm cl-uppercase",
+                      style: normalizeStyle(getStyleForColumn(column.name))
+                    }, [
+                      __props.data && ((_a2 = __props.data.results) == null ? void 0 : _a2.length) && (column.type !== "slot" || column.slotType !== void 0 && column.field !== void 0) && (column.sortable === void 0 || column.sortable === true) ? (openBlock(), createElementBlock("span", {
+                        key: 0,
+                        class: "cl-cursor-pointer",
+                        onClick: ($event) => setSort(column.field)
+                      }, [
+                        createTextVNode(toDisplayString(column.caption) + " ", 1),
+                        withDirectives(createVNode(_component_icon, {
+                          class: "cl--mt-1 cl-inline-block",
+                          icon: "ph:caret-up"
+                        }, null, 512), [
+                          [vShow, unref(currentRequest).sort !== null && unref(currentRequest).sort.sortOnColumn === column.field && unref(currentRequest).sort.sortByAscending === true]
+                        ]),
+                        withDirectives(createVNode(_component_icon, {
+                          class: "cl--mt-1 cl-inline-block",
+                          icon: "ph:caret-down"
+                        }, null, 512), [
+                          [vShow, unref(currentRequest).sort !== null && unref(currentRequest).sort.sortOnColumn === column.field && unref(currentRequest).sort.sortByAscending === false]
+                        ])
+                      ], 8, _hoisted_16)) : (openBlock(), createElementBlock("span", _hoisted_17, toDisplayString(column.caption), 1))
+                    ], 4);
+                  }), 128))
+                ]),
+                __props.data && ((_a = __props.data.results) == null ? void 0 : _a.length) || unref(currentRequest).filters.length > 0 ? (openBlock(), createElementBlock("tr", _hoisted_18, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(visibleColumns), (column, index) => {
+                    return openBlock(), createElementBlock("th", {
+                      key: index,
+                      class: "cl-p-1",
+                      style: normalizeStyle(getStyleForColumn(column.name))
+                    }, [
+                      createVNode(_sfc_main$g, {
+                        request: unref(currentRequest),
+                        "onUpdate:request": _cache[7] || (_cache[7] = ($event) => isRef(currentRequest) ? currentRequest.value = $event : null),
+                        column,
+                        "first-half": index <= unref(visibleColumns).length / 2
+                      }, null, 8, ["request", "column", "first-half"])
+                    ], 4);
+                  }), 128))
+                ])) : createCommentVNode("", true)
+              ]),
+              createElementVNode("tbody", null, [
+                __props.data && ((_b = __props.data.results) == null ? void 0 : _b.length) ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(__props.data.results, (record, recordIndex) => {
+                  return openBlock(), createElementBlock("tr", {
+                    key: recordIndex,
+                    class: normalizeClass({
+                      "cl-bg-white": recordIndex % 2 !== 1,
+                      "cl-bg-off-white": recordIndex % 2 === 1
+                    })
+                  }, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(unref(visibleColumns), (column, columnIndex) => {
+                      return openBlock(), createBlock(_sfc_main$h, {
+                        key: columnIndex,
+                        class: "cl-align-top cl-p-2 cl-rounded cl-whitespace-nowrap",
+                        style: normalizeStyle(getStyleForColumn(column.name)),
+                        column,
+                        record,
+                        "edit-mode": editMode.value,
+                        onFocus: ($event) => cellFocused(recordIndex),
+                        onEdit: ($event) => {
+                          cellFocused(recordIndex);
+                          cellChanged($event, column.field);
+                        },
+                        onUndoEdit: ($event) => cellReverted(column.field)
+                      }, createSlots({ _: 2 }, [
+                        renderList(_ctx.$slots, (_, name) => {
+                          return {
+                            name,
+                            fn: withCtx((cellData) => [
+                              renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(cellData)), void 0, true)
+                            ])
+                          };
+                        })
+                      ]), 1032, ["style", "column", "record", "edit-mode", "onFocus", "onEdit", "onUndoEdit"]);
+                    }), 128))
+                  ], 2);
+                }), 128)) : (openBlock(), createElementBlock("tr", _hoisted_19, [
+                  createElementVNode("td", {
+                    colspan: unref(visibleColumns).length
+                  }, [
+                    createElementVNode("div", _hoisted_21, [
+                      createElementVNode("strong", null, toDisplayString(unref(t2)("grid.noData")), 1),
+                      unref(currentRequest).filters.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_22, [
+                        createTextVNode(toDisplayString(unref(t2)("grid.noDataFiltersPresent")) + " ", 1),
+                        createVNode(_sfc_main$s, {
+                          size: "small",
+                          onClick: withModifiers(resetFilters, ["prevent"])
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(unref(t2)("grid.clearFilters")), 1)
+                          ]),
+                          _: 1
+                        }, 8, ["onClick"])
+                      ])) : createCommentVNode("", true)
+                    ])
+                  ], 8, _hoisted_20)
+                ]))
+              ])
+            ])
+          ]),
+          createVNode(_sfc_main$f, {
+            request: unref(currentRequest),
+            "onUpdate:request": _cache[8] || (_cache[8] = ($event) => isRef(currentRequest) ? currentRequest.value = $event : null),
+            data: __props.data
+          }, null, 8, ["request", "data"])
+        ], 8, _hoisted_2$7)
+      ], 64);
+    };
+  }
+});
+var clUiGrid = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-7df0fada"]]);
+const _sfc_main$b = {};
+const _hoisted_1$9 = { 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" };
+function _sfc_render$3(_ctx, _cache) {
+  return openBlock(), createElementBlock("header", _hoisted_1$9, [
+    renderSlot(_ctx.$slots, "logo"),
+    createElementVNode("div", _hoisted_2$6, [
+      renderSlot(_ctx.$slots, "menu"),
+      renderSlot(_ctx.$slots, "icon")
+    ])
+  ]);
+}
+var clUiHeader = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$3]]);
+const _hoisted_1$8 = { 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-grow cl-hidden cl-my-4 cl-text-white md:cl-block" };
+const _hoisted_5$1 = {
+  key: 0,
+  class: "cl-cursor-default cl-text-ellipsis cl-whitespace-nowrap"
+};
+const _hoisted_6$1 = {
+  key: 1,
+  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$a = /* @__PURE__ */ defineComponent({
+  props: {
+    username: { default: "" },
+    group: { default: "" },
+    image: { default: "" }
+  },
+  setup(__props) {
+    const isOpen = ref(false);
+    return (_ctx, _cache) => {
+      const _component_icon = resolveComponent("icon");
+      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+        createElementVNode("div", _hoisted_2$5, [
+          __props.image ? (openBlock(), createElementBlock("img", {
+            key: 0,
+            src: __props.image,
+            class: "cl-hidden cl-m-4 cl-max-h-12 cl-max-w-12 cl-ring-2 cl-ring-white cl-rounded-full md:cl-block"
+          }, null, 8, _hoisted_3$4)) : (openBlock(), createBlock(_component_icon, {
+            key: 1,
+            class: "cl-hidden cl-m-4 cl-text-white md:cl-block",
+            icon: "ph:user-circle",
+            width: "48",
+            height: "48"
+          })),
+          createElementVNode("div", _hoisted_4$2, [
+            __props.username ? (openBlock(), createElementBlock("div", _hoisted_5$1, toDisplayString(__props.username), 1)) : createCommentVNode("", true),
+            __props.group ? (openBlock(), createElementBlock("div", _hoisted_6$1, toDisplayString(__props.group), 1)) : createCommentVNode("", true)
+          ]),
+          createElementVNode("div", {
+            class: "cl-bg-transparent cl-content-center cl-cursor-pointer cl-flex cl-h-20 cl-items-center cl-justify-center cl-justify-items-center cl-transition-all cl-w-10 hover:cl-bg-opacity-10 hover:cl-bg-white md:cl-ml-4 md:cl-w-20",
+            onClick: _cache[0] || (_cache[0] = ($event) => isOpen.value = !isOpen.value)
+          }, [
+            createVNode(_component_icon, {
+              class: normalizeClass(["cl-text-white cl-transform-gpu cl-transition-transform", {
+                "cl-rotate-180": isOpen.value
+              }]),
+              icon: "ph:caret-down"
+            }, null, 8, ["class"])
+          ])
+        ]),
+        createVNode(Transition, { name: "fade" }, {
+          default: withCtx(() => [
+            withDirectives(createElementVNode("div", _hoisted_7$1, [
+              renderSlot(_ctx.$slots, "default")
+            ], 512), [
+              [vShow, isOpen.value]
+            ])
+          ]),
+          _: 3
+        })
+      ]);
+    };
+  }
+});
+const inputTypes = [
+  "button",
+  "checkbox",
+  "color",
+  "date",
+  "datetime",
+  "email",
+  "file",
+  "number",
+  "password",
+  "radio",
+  "range",
+  "reset",
+  "search",
+  "submit",
+  "tel",
+  "text",
+  "time",
+  "url"
+];
+function isLanguageLocaleFormat(language) {
+  const localeCodeFormatCorrect = /[a-z]{2}-[A-Z]{2}/gm.test(language.localeCode);
+  return localeCodeFormatCorrect;
+}
+function isLanguageArray(arrayToTest) {
+  let result = Array.isArray(arrayToTest);
+  if (result) {
+    for (const objectToTest of arrayToTest) {
+      if (!isLanguage(objectToTest)) {
+        result = false;
+        break;
+      }
+    }
+  }
+  return result;
+}
+function isLanguage(objectToTest) {
+  return typeof objectToTest.name === "string" && typeof objectToTest.nativeName === "string" && typeof objectToTest.localeCode === "string";
+}
+const _hoisted_1$7 = {
+  key: 0,
+  class: "cl-flex cl-relative cl-select-none cl-w-auto cl-z-30"
+};
+const _hoisted_2$4 = { class: "cl-absolute cl-bg-white cl-border cl-border-grey-0 cl-overflow-hidden cl-right-0 cl-rounded cl-shadow-xl cl-text-black cl-top-6 cl-z-3" };
+const _hoisted_3$3 = ["data-localename", "data-localecode", "onClick"];
+const _hoisted_4$1 = { class: "cl-text-xs" };
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  props: {
+    supportedLanguages: null,
+    disabled: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const { locale } = useI18n();
+    const localeToggleOpen = ref(false);
+    const selectedLanguage = computed(() => {
+      var _a;
+      return (_a = props.supportedLanguages.find((l) => l.localeCode === locale.value)) != null ? _a : null;
+    });
+    const validLanguages = computed(() => props.supportedLanguages.filter((e) => isLanguageLocaleFormat(e)).sort((a, b) => a.nativeName > b.nativeName ? 1 : b.nativeName > a.nativeName ? -1 : 0));
+    function toggleLocaleSwitcher() {
+      if (!props.disabled) {
+        localeToggleOpen.value = !localeToggleOpen.value;
+      }
+    }
+    watch(() => props.disabled, (newValue) => {
+      if (newValue) {
+        localeToggleOpen.value = false;
+      }
+    });
+    return (_ctx, _cache) => {
+      return unref(selectedLanguage) !== null && unref(isLanguageLocaleFormat)(unref(selectedLanguage)) ? (openBlock(), createElementBlock("div", _hoisted_1$7, [
+        createElementVNode("div", {
+          class: normalizeClass(["cl-flex cl-items-center", {
+            "cl-cursor-pointer": !__props.disabled
+          }]),
+          onClick: toggleLocaleSwitcher
+        }, [
+          createElementVNode("span", {
+            class: normalizeClass(["cl-font-semibold cl-text-xs", {
+              "cl-opacity-50": __props.disabled
+            }])
+          }, toDisplayString(unref(selectedLanguage).nativeName), 3)
+        ], 2),
+        createVNode(Transition, { name: "fade" }, {
+          default: withCtx(() => [
+            withDirectives(createElementVNode("div", _hoisted_2$4, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(validLanguages), (language, index) => {
+                return openBlock(), createElementBlock("div", {
+                  key: index,
+                  class: "cl-border-b cl-border-grey-0 cl-cursor-pointer cl-flex cl-items-center cl-justify-center cl-p-1 cl-text-center cl-transition-colors cl-w-28 hover:cl-bg-grey-0 last-child:cl-border-b-0 last:cl-border-b-0 lg:cl-p-2",
+                  "data-localename": language.name,
+                  "data-localecode": language.localeCode,
+                  onClick: ($event) => {
+                    locale.value = language.localeCode;
+                    toggleLocaleSwitcher();
+                  }
+                }, [
+                  createElementVNode("span", _hoisted_4$1, toDisplayString(language.nativeName), 1)
+                ], 8, _hoisted_3$3);
+              }), 128))
+            ], 512), [
+              [vShow, localeToggleOpen.value]
+            ])
+          ]),
+          _: 1
+        })
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$6 = { class: "cl-relative" };
+const _hoisted_2$3 = { class: "cl-h-screen cl-z-0" };
+const _hoisted_3$2 = { class: "cl-absolute cl-bg-secondary-default cl-gap-y-1 cl-grid cl-grid-cols-1 cl-left-0 cl-opacity-95 cl-p-6 cl-top-0 cl-w-full cl-z-10 lg:cl-gap-x-1 lg:cl-grid-cols-10 lg:cl-p-10" };
+const _hoisted_4 = { class: "cl-col-span-10 lg:cl-col-span-3" };
+const _hoisted_5 = {
+  key: 0,
+  class: "cl-col-span-10 cl-flex cl-items-start cl-justify-end cl-text-white lg:cl-col-span-1 lg:cl-p-2"
+};
+const _hoisted_6 = { class: "cl-col-span-3" };
+const _hoisted_7 = { class: "cl-inline cl-relative cl-text-grey-4" };
+const _hoisted_8 = { class: "cl-col-span-3" };
+const _hoisted_9 = { class: "cl-inline cl-relative cl-text-grey-4" };
+const _hoisted_10 = { class: "cl-col-span-10 cl-emphasis-danger cl-mt-10 cl-p-3 cl-rounded-md cl-text-sm md:cl-mt-3" };
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  props: {
+    errors: { default: () => [] },
+    loading: { type: Boolean, default: false }
+  },
+  emits: {
+    login: null,
+    "update:errors": null
+  },
+  setup(__props, { emit }) {
+    const { t: t2 } = useI18n();
+    const username = ref("");
+    const password = ref("");
+    const passwordFieldType = ref("password");
+    const usernameValid = ref();
+    function login() {
+      const authentication = {
+        username: username.value,
+        password: password.value
+      };
+      emit("login", authentication);
+    }
+    function clearErrors() {
+      emit("update:errors", []);
+    }
+    function emptyIsInvalidValidation(_, value) {
+      const state = {
+        valid: true,
+        message: ""
+      };
+      if (typeof value === "string" && value.trim() === "") {
+        state.valid = false;
+      }
+      return state;
+    }
+    function onUsernameValidated(valid, _) {
+      usernameValid.value = valid;
+    }
+    return (_ctx, _cache) => {
+      const _component_icon = resolveComponent("icon");
+      return openBlock(), createElementBlock("div", _hoisted_1$6, [
+        createElementVNode("div", _hoisted_2$3, [
+          renderSlot(_ctx.$slots, "background")
+        ]),
+        createElementVNode("form", _hoisted_3$2, [
+          createElementVNode("div", _hoisted_4, [
+            renderSlot(_ctx.$slots, "logo")
+          ]),
+          _ctx.$slots["language-switcher"] ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            renderSlot(_ctx.$slots, "language-switcher")
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: normalizeClass(["cl-gap-y-4 cl-grid cl-grid-cols-1 lg:cl-gap-x-2 lg:cl-grid-cols-8", {
+              "cl-col-span-7": !_ctx.$slots["language-switcher"],
+              "cl-col-span-6": _ctx.$slots["language-switcher"]
+            }])
+          }, [
+            createElementVNode("div", _hoisted_6, [
+              createElementVNode("div", _hoisted_7, [
+                createVNode(_component_icon, {
+                  class: "cl-absolute cl-left-3 cl-top-2.5",
+                  icon: "ph:user",
+                  size: 18
+                }),
+                createVNode(ClUiInput, {
+                  modelValue: username.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => username.value = $event),
+                  modelModifiers: { trim: true },
+                  class: "!cl-border-2 !cl-mb-1 cl-w-full",
+                  "input-type": "email",
+                  "highlight-when-valid": username.value !== void 0 && username.value !== "",
+                  label: unref(t2)("login.username"),
+                  "show-label": false,
+                  "placeholder-text": unref(t2)("login.email"),
+                  autocomplete: "username",
+                  "validate-immediately": true,
+                  "custom-validation-function": emptyIsInvalidValidation,
+                  "input-specific-classes": "!cl-pl-9",
+                  "message-when-valid": username.value ? unref(t2)("login.validEmail") : "",
+                  onInput: clearErrors,
+                  onValidated: onUsernameValidated
+                }, null, 8, ["modelValue", "highlight-when-valid", "label", "placeholder-text", "message-when-valid"])
+              ])
+            ]),
+            createElementVNode("div", _hoisted_8, [
+              createElementVNode("div", _hoisted_9, [
+                createVNode(_component_icon, {
+                  class: "cl-absolute cl-left-3 cl-top-2.5",
+                  icon: "ph:lock",
+                  size: 18
+                }),
+                withDirectives(createVNode(_component_icon, {
+                  class: "cl-absolute cl-cursor-pointer cl-right-6 cl-top-2.5",
+                  icon: "ph:eye",
+                  size: 18,
+                  onClick: _cache[1] || (_cache[1] = ($event) => passwordFieldType.value = "text")
+                }, null, 512), [
+                  [vShow, passwordFieldType.value === "password"]
+                ]),
+                withDirectives(createVNode(_component_icon, {
+                  class: "cl-absolute cl-cursor-pointer cl-right-6 cl-top-2.5",
+                  icon: "ph:eye-slash",
+                  size: 18,
+                  onClick: _cache[2] || (_cache[2] = ($event) => passwordFieldType.value = "password")
+                }, null, 512), [
+                  [vShow, passwordFieldType.value === "text"]
+                ]),
+                createVNode(ClUiInput, {
+                  modelValue: password.value,
+                  "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => password.value = $event),
+                  class: "!cl-border-2 cl-w-full",
+                  "input-type": passwordFieldType.value,
+                  "highlight-when-valid": password.value !== void 0 && password.value !== "",
+                  label: unref(t2)("login.password"),
+                  "show-label": false,
+                  "placeholder-text": unref(t2)("login.password"),
+                  autocomplete: "current-password",
+                  "validate-immediately": true,
+                  "input-specific-classes": "!cl-pl-9 !cl-pr-9",
+                  "custom-validation-function": emptyIsInvalidValidation,
+                  onInput: clearErrors
+                }, null, 8, ["modelValue", "input-type", "highlight-when-valid", "label", "placeholder-text"])
+              ])
+            ]),
+            createElementVNode("div", {
+              class: normalizeClass(["cl-col-span-2", {
+                "cl-mt-1.5 cl-mb-1 md:cl-mt-0.5 md:cl-mb-7 lg:cl-mb-0": __props.loading
+              }])
+            }, [
+              createVNode(_sfc_main$s, {
+                class: "!cl-leading-9 cl-w-full",
+                colour: "blue",
+                loading: __props.loading,
+                disabled: !usernameValid.value || password.value === "",
+                onClick: withModifiers(login, ["prevent"])
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(t2)("login.login")), 1)
+                ]),
+                _: 1
+              }, 8, ["loading", "disabled", "onClick"])
+            ], 2)
+          ], 2),
+          createVNode(Transition, { name: "grow-down" }, {
+            default: withCtx(() => {
+              var _a;
+              return [
+                withDirectives(createElementVNode("span", _hoisted_10, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(__props.errors, (error, index) => {
+                    return openBlock(), createElementBlock("div", {
+                      key: index,
+                      class: "cl-font-semibold"
+                    }, toDisplayString(error), 1);
+                  }), 128))
+                ], 512), [
+                  [vShow, (_a = __props.errors) == null ? void 0 : _a.length]
+                ])
+              ];
+            }),
+            _: 1
+          })
+        ])
+      ]);
+    };
+  }
+});
+const modalSizes = [
+  "x-small",
+  "small",
+  "medium",
+  "large"
+];
+const modalColours = [
+  "primary",
+  "secondary",
+  "white"
+];
+var clUiNavigation_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _hoisted_1$5 = { class: "cl-flex cl-flex-nowrap cl-h-full cl-max-h-full cl-min-h-full cl-min-w-20 cl-relative cl-self-start cl-w-auto" };
+const _hoisted_2$2 = {
+  id: "group-container",
+  class: "cl-bg-blue-default cl-h-full cl-left-0 cl-max-h-full cl-min-h-full cl-min-w-20 cl-overflow-y-auto cl-self-start cl-sticky cl-w-20 cl-z-30"
+};
+const _hoisted_3$1 = { class: "cl-relative cl-w-full" };
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  setup(__props) {
+    const open = computed(() => groups.value.filter((i) => i.open === true).length > 0);
+    const groups = ref([]);
+    const pinned = ref(false);
+    function groupIsOpen(id) {
+      let group = groups.value.find((i) => i.id === id);
+      if (!group) {
+        group = {
+          id,
+          open: false
+        };
+        groups.value.push(group);
+      }
+      return group.open;
+    }
+    function toggleOpen(id) {
+      const group = groups.value.find((i) => i.id === id);
+      if (group) {
+        group.open = !group.open;
+        groups.value.forEach((i) => {
+          if (i.id !== id) {
+            i.open = false;
+          }
+        });
+      }
+    }
+    return (_ctx, _cache) => {
+      const _component_icon = resolveComponent("icon");
+      return openBlock(), createElementBlock("div", _hoisted_1$5, [
+        createElementVNode("div", _hoisted_2$2, [
+          renderSlot(_ctx.$slots, "icon", normalizeProps(guardReactiveProps({ groupIsOpen, toggleOpen })), void 0, true)
+        ]),
+        createVNode(Transition, { name: "slide-right" }, {
+          default: withCtx(() => [
+            withDirectives(createElementVNode("div", {
+              class: normalizeClass(["cl-bg-grey-0 cl-border-grey-2 cl-border-r cl-max-h-full cl-min-h-full cl-min-w-[260px] cl-overflow-y-auto cl-p-8 cl-self-start cl-top-0 cl-w-[260px] cl-z-20", {
+                "cl-relative": pinned.value,
+                "cl-absolute cl-left-20 cl-shadow-lg": !pinned.value
+              }])
+            }, [
+              createElementVNode("div", _hoisted_3$1, [
+                createElementVNode("span", {
+                  class: "cl-absolute cl-cursor-pointer cl-h-8 cl-hidden cl-leading-8 cl-right-0 cl-text-center cl-top-0 cl-w-8 md:cl-inline-block",
+                  onClick: _cache[0] || (_cache[0] = ($event) => pinned.value = !pinned.value)
+                }, [
+                  !pinned.value ? (openBlock(), createBlock(_component_icon, {
+                    key: 0,
+                    class: "cl-inline-block",
+                    icon: "ph:push-pin"
+                  })) : (openBlock(), createBlock(_component_icon, {
+                    key: 1,
+                    class: "cl-inline-block",
+                    icon: "ph:push-pin-slash"
+                  }))
+                ]),
+                renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ groupIsOpen })), void 0, true)
+              ])
+            ], 2), [
+              [vShow, unref(open)]
+            ])
+          ]),
+          _: 3
+        })
+      ]);
+    };
+  }
+});
+var clUiNavigation = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-6759d3a1"]]);
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  props: {
+    icon: null,
+    open: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      const _component_icon = resolveComponent("icon");
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["cl-cursor-pointer cl-flex cl-h-20 cl-items-center cl-justify-center cl-text-off-white cl-transition-colors cl-w-20 hover:cl-bg-blue-light", {
+          "cl-bg-blue-light": __props.open
+        }])
+      }, [
+        createVNode(_component_icon, {
+          class: "cl-block",
+          icon: __props.icon,
+          width: "24"
+        }, null, 8, ["icon"])
+      ], 2);
+    };
+  }
+});
+const _hoisted_1$4 = {
+  key: 0,
+  class: "cl-font-bold cl-leading-8 cl-mb-8 cl-pr-8 cl-select-none cl-text-blue-light cl-text-lg"
+};
+const _hoisted_2$1 = { class: "cl-flex cl-flex-wrap cl-space-y-8 cl-text-sm cl-w-full" };
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  props: {
+    open: { type: Boolean }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return __props.open ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        _ctx.$slots.title ? (openBlock(), createElementBlock("div", _hoisted_1$4, [
+          renderSlot(_ctx.$slots, "title")
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2$1, [
+          renderSlot(_ctx.$slots, "default")
+        ])
+      ], 64)) : createCommentVNode("", true);
+    };
+  }
+});
+const _sfc_main$4 = {};
+const _hoisted_1$3 = { class: "cl-w-full" };
+const _hoisted_2 = {
+  key: 0,
+  class: "cl-font-bold cl-mb-4 cl-select-none"
+};
+const _hoisted_3 = { class: "cl-flex cl-flex-wrap cl-space-y-2" };
+function _sfc_render$2(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$3, [
+    _ctx.$slots.title ? (openBlock(), createElementBlock("div", _hoisted_2, [
+      renderSlot(_ctx.$slots, "title")
+    ])) : createCommentVNode("", true),
+    createElementVNode("span", _hoisted_3, [
+      renderSlot(_ctx.$slots, "default")
+    ])
+  ]);
+}
+var clUiNavigationSection = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$2]]);
+const _sfc_main$3 = {};
+const _hoisted_1$2 = { class: "cl-cursor-pointer cl-transition-colors cl-w-full hover:cl-text-blue-light" };
+function _sfc_render$1(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$2, [
+    renderSlot(_ctx.$slots, "default")
+  ]);
+}
+var clUiNavigationItem = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$1]]);
+const _hoisted_1$1 = { class: "cl-w-full" };
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  props: {
+    currentTab: { default: 0 },
+    disabled: { type: Boolean, default: false },
+    colour: { default: "default" }
+  },
+  setup(__props) {
+    const props = __props;
+    const headerContainer = ref();
+    const showLeftArrow = ref(false);
+    const showRightArrow = ref(false);
+    function isTabOpen(tabId) {
+      return tabId === props.currentTab;
+    }
+    function onScroll() {
+      if (headerContainer.value) {
+        const maxScroll = headerContainer.value.scrollWidth - headerContainer.value.clientWidth;
+        showLeftArrow.value = headerContainer.value.scrollLeft > 0;
+        showRightArrow.value = headerContainer.value.scrollLeft < maxScroll;
+      } else {
+        showLeftArrow.value = false;
+        showRightArrow.value = false;
+      }
+    }
+    function initialiseScroll() {
+      onScroll();
+      window.addEventListener("resize", onScroll);
+    }
+    function scrollOnClick(direction) {
+      if (headerContainer.value) {
+        const scrollAmount = headerContainer.value.scrollWidth / 5;
+        let scrollTo = scrollAmount;
+        if (direction === "left") {
+          scrollTo = -scrollAmount;
+        }
+        headerContainer.value.scroll(headerContainer.value.scrollLeft + scrollTo, 0);
+      }
+    }
+    onMounted(() => initialiseScroll());
+    onUnmounted(() => window.removeEventListener("resize", onScroll));
+    return (_ctx, _cache) => {
+      const _component_icon = resolveComponent("icon");
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        createElementVNode("div", null, [
+          showLeftArrow.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "cl-bg-white cl-cursor-pointer cl-float-left cl-h-11 cl-w-4",
+            onClick: _cache[0] || (_cache[0] = ($event) => scrollOnClick("left"))
+          }, [
+            createVNode(_component_icon, {
+              icon: "ph:caret-left",
+              class: "cl-mt-4 cl-text-secondary-default"
+            })
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", {
+            ref_key: "headerContainer",
+            ref: headerContainer,
+            class: normalizeClass(["cl-flex cl-overflow-x-auto", {
+              "cl-shadow-[inset_0_-1px_0_#eeeeee]": !__props.disabled && __props.colour === "default",
+              "cl-shadow-[inset_0_-1px_0_#9acd32]": !__props.disabled && __props.colour === "primary",
+              "cl-shadow-[inset_0_-1px_0_#30363e]": !__props.disabled && __props.colour === "secondary",
+              "cl-shadow-[inset_0_-1px_0_#f0506e]": !__props.disabled && __props.colour === "danger",
+              "cl-shadow-[inset_0_-1px_0_#1e90ff]": !__props.disabled && __props.colour === "blue",
+              "cl-shadow-[inset_0_-1px_0_#d7d7d7]": __props.disabled,
+              "cl-mr-4": showRightArrow.value
+            }]),
+            onScrollPassive: onScroll
+          }, [
+            renderSlot(_ctx.$slots, "headings", normalizeProps(guardReactiveProps({ isTabOpen, disabled: __props.disabled, colour: __props.colour })))
+          ], 34),
+          showRightArrow.value ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: "cl-bg-white cl-bottom-12 cl-cursor-pointer cl-float-right cl-h-11 cl-relative cl-w-4",
+            onClick: _cache[1] || (_cache[1] = ($event) => scrollOnClick("right"))
+          }, [
+            createVNode(_component_icon, {
+              icon: "ph:caret-right",
+              class: "cl-mt-4 cl-text-secondary-default"
+            })
+          ])) : createCommentVNode("", true)
+        ]),
+        renderSlot(_ctx.$slots, "content", normalizeProps(guardReactiveProps({ isTabOpen, disabled: __props.disabled, colour: __props.colour })))
+      ]);
+    };
+  }
+});
+const _hoisted_1 = ["onKeyup"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  props: {
+    id: null,
+    currentTab: null,
+    disabled: { type: Boolean, default: false },
+    colour: { default: "default" }
+  },
+  emits: {
+    "update:currentTab": null
+  },
+  setup(__props, { emit }) {
+    const props = __props;
+    const tabbed = ref();
+    const hovered = ref();
+    const open = computed(() => props.id === props.currentTab);
+    function tabClicked() {
+      if (!props.disabled) {
+        tabbed.value = false;
+        hovered.value = false;
+        emit("update:currentTab", props.id);
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["cl-border-b cl-cursor-pointer cl-flex cl-items-center cl-px-4 cl-py-2 cl-rounded-b-none cl-rounded-sm cl-select-none cl-text-xl cl-transition cl-whitespace-nowrap focus:cl-outline-none", {
+          "!cl-cursor-default cl-text-grey-4 !cl-border-grey-2": __props.disabled,
+          "cl-border cl-border-b-0 cl-rounded-t-md cl-shadow-[inset_0_-1px_0_#ffffff] cl-cursor-default": unref(open),
+          "cl-border-grey-0": __props.colour === "default",
+          "cl-border-primary-default": __props.colour === "primary",
+          "cl-border-secondary-default": __props.colour === "secondary",
+          "cl-border-danger-default": __props.colour === "danger",
+          "cl-border-link-default": __props.colour === "blue",
+          "hover:cl-bg-grey-0": !unref(open) && !__props.disabled && __props.colour === "default",
+          "hover:cl-bg-primary-lighter": !unref(open) && !__props.disabled && __props.colour === "primary",
+          "hover:cl-bg-secondary-light focus:cl-text-white hover:cl-text-white": !unref(open) && !__props.disabled && __props.colour === "secondary",
+          "hover:cl-bg-danger-light": !unref(open) && !__props.disabled && __props.colour === "danger",
+          "hover:cl-bg-link-lighter": !unref(open) && !__props.disabled && __props.colour === "blue",
+          "cl-bg-grey-0": tabbed.value && !__props.disabled && __props.colour === "default",
+          "cl-bg-primary-lighter": tabbed.value && !__props.disabled && __props.colour === "primary",
+          "cl-bg-secondary-light cl-text-white": tabbed.value && !__props.disabled && __props.colour === "secondary",
+          "cl-bg-danger-light": tabbed.value && !__props.disabled && __props.colour === "danger",
+          "cl-bg-link-lighter": tabbed.value && !__props.disabled && __props.colour === "blue"
+        }]),
+        tabindex: "0",
+        onClick: tabClicked,
+        onMouseover: _cache[0] || (_cache[0] = ($event) => hovered.value = true),
+        onMouseout: _cache[1] || (_cache[1] = ($event) => hovered.value = false),
+        onFocusin: _cache[2] || (_cache[2] = ($event) => tabbed.value = true),
+        onFocusout: _cache[3] || (_cache[3] = ($event) => tabbed.value = false),
+        onKeyup: withKeys(withModifiers(tabClicked, ["self"]), ["enter"])
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 42, _hoisted_1);
+    };
+  }
+});
+const _sfc_main = {};
+function _sfc_render(_ctx, _cache) {
+  return renderSlot(_ctx.$slots, "default");
+}
+var clUiTabContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const tabColours = [
+  "default",
+  "primary",
+  "secondary",
+  "danger",
+  "blue"
+];
+const tabScroll = [
+  "left",
+  "right"
+];
+var components = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  clUiAccordion: _sfc_main$y,
+  clUiAccordionItem: _sfc_main$x,
+  clUiAccordionHeader,
+  clUiApp: _sfc_main$u,
+  clUiButton: _sfc_main$s,
+  buttonColours,
+  buttonSizes,
+  clUiCard: _sfc_main$r,
+  cardSizes,
+  clUiComboBox: _sfc_main$j,
+  isComboBoxItem,
+  isComboBoxCreateRequest,
+  clUiFooter,
+  clUiGrid,
+  gridColumnTypes,
+  isGridColumn,
+  isGridColumnArray,
+  stringFormats,
+  FilterOperation,
+  filterMethodTypes,
+  isFilterRequest,
+  isFilterResponse,
+  clUiHeader,
+  clUiHeaderMenu: _sfc_main$a,
+  clUiInput: ClUiInput,
+  inputTypes,
+  clUiLanguageSwitcher: _sfc_main$9,
+  isLanguageLocaleFormat,
+  isLanguageArray,
+  clUiLoadingSpinner: ClUiLoadingSpinner,
+  clUiLogin: _sfc_main$8,
+  clUiModal: _sfc_main$n,
+  modalSizes,
+  modalColours,
+  clUiNavigation,
+  clUiNavigationIcon: _sfc_main$6,
+  clUiNavigationGroup: _sfc_main$5,
+  clUiNavigationSection,
+  clUiNavigationItem,
+  clUiNotification: _sfc_main$v,
+  clUiTab: _sfc_main$2,
+  clUiTabHeader: _sfc_main$1,
+  clUiTabContent,
+  tabColours,
+  tabScroll
+}, Symbol.toStringTag, { value: "Module" }));
+var main = "";
+const install = (app) => {
+  app.use(i18n);
+  app.component("Icon", Icon);
+  Object.entries(components).forEach(([
+    name,
+    component
+  ]) => {
+    app.component(name, component);
+  });
+};
+export { DateFormat, FilterOperation, NumberFormat, buttonColours, buttonSizes, cardSizes, _sfc_main$y as clUiAccordion, clUiAccordionHeader, _sfc_main$x as clUiAccordionItem, _sfc_main$u as clUiApp, _sfc_main$s as clUiButton, _sfc_main$r as clUiCard, _sfc_main$j as clUiComboBox, clUiFooter, clUiGrid, clUiHeader, _sfc_main$a as clUiHeaderMenu, ClUiInput as clUiInput, _sfc_main$9 as clUiLanguageSwitcher, ClUiLoadingSpinner as clUiLoadingSpinner, _sfc_main$8 as clUiLogin, _sfc_main$n as clUiModal, clUiNavigation, _sfc_main$5 as clUiNavigationGroup, _sfc_main$6 as clUiNavigationIcon, clUiNavigationItem, clUiNavigationSection, _sfc_main$v as clUiNotification, _sfc_main$2 as clUiTab, clUiTabContent, _sfc_main$1 as clUiTabHeader, 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, tabColours, tabScroll, validateEmail, validateMaxValue, validateMinValue };