@citruslime/ui 4.1.0-beta.2 → 4.1.0-beta.20

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

@@ -1,11 +1,11 @@
 import { Icon } from "@iconify/vue";
 import { defineComponent, ref, createElementBlock, openBlock, renderSlot, normalizeProps, guardReactiveProps, Fragment, createElementVNode, normalizeClass, createVNode, unref, Transition, withCtx, withDirectives, mergeProps, vShow, createBlock, Teleport, renderList, toDisplayString, createCommentVNode, computed, createTextVNode, mergeModels, useModel, watch, createSlots, vModelDynamic, shallowRef, toValue, toRefs, withKeys, onMounted, onUnmounted, withModifiers, nextTick, useAttrs, resolveComponent, inject, vModelCheckbox, watchEffect, vModelText, useCssVars, toHandlers, normalizeStyle, isRef, useSlots, provide } from "vue";
-import { generateStringId, highlightText, isTouchDevice, validateEmail as validateEmail$1, escapeStringForRegExp } from "@citruslime/utils";
+import { generateStringId, highlightText, validateEmail as validateEmail$1, isTouchDevice, escapeStringForRegExp } from "@citruslime/utils";
 import { useFocusWithin, onKeyDown, toArray, unrefElement, tryOnScopeDispose, onClickOutside, useBreakpoints, breakpointsTailwind, useTimeoutFn, useMouseInElement, useMediaQuery, useThrottle, useDebounceFn, useMouse, useDraggable, defaultDocument, tryOnMounted, useThrottleFn, useWindowSize, useElementSize, useElementBounding } from "@vueuse/core";
 import { useI18n, createI18n } from "vue-i18n";
 import { createFocusTrap } from "focus-trap";
 import { copy } from "@citruslime/vue-utils";
-import { DateTime } from "luxon";
+import { DateTime, Info } from "luxon";
 import { DatePicker } from "v-calendar";
 import { useCurrencyInput } from "vue-currency-input";
 const _hoisted_1$13 = { class: "cl:overflow-hidden" };
@@ -50,7 +50,7 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$12 = { class: "cl:absolute cl:left-5 cl:top-5" };
 const _hoisted_2$M = { class: "cl:font-semibold cl:ml-10 cl:p-4 cl:select-none cl:text-grey-5" };
-const _hoisted_3$t = { class: "cl:overflow-hidden" };
+const _hoisted_3$u = { class: "cl:overflow-hidden" };
 const _sfc_main$1g = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -91,7 +91,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "title")
           ])
         ], 2),
-        createElementVNode("div", _hoisted_3$t, [
+        createElementVNode("div", _hoisted_3$u, [
           createVNode(Transition, { name: "grow-down" }, {
             default: withCtx(() => [
               withDirectives(createElementVNode("div", mergeProps(_ctx.$attrs, { class: "cl:ml-10 cl:p-4" }), [
@@ -359,7 +359,7 @@ const cardSizes = [
 ];
 const _hoisted_1$X = { class: "cl:sm:w-auto cl:w-full" };
 const _hoisted_2$J = { class: "cl:flex cl:flex-nowrap cl:gap-2 cl:text-grey-4 cl:text-xs cl:tracking-widest" };
-const _hoisted_3$s = {
+const _hoisted_3$t = {
   key: 0,
   class: "cl:self-center"
 };
@@ -393,7 +393,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
           class: normalizeClass(["cl:flex", { "cl:flex-col": _ctx.labelPosition === "above", "cl:flex-row-reverse cl:gap-2 cl:items-center cl:justify-end": _ctx.labelPosition === "right" }])
         }, [
           createElementVNode("div", _hoisted_2$J, [
-            _ctx.$slots.label ? (openBlock(), createElementBlock("span", _hoisted_3$s, [
+            _ctx.$slots.label ? (openBlock(), createElementBlock("span", _hoisted_3$t, [
               renderSlot(_ctx.$slots, "label")
             ])) : createCommentVNode("", true),
             _ctx.showRequiredAsterisk ? (openBlock(), createElementBlock("span", _hoisted_4$n, "*")) : createCommentVNode("", true)
@@ -414,7 +414,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
         ])) : _ctx.errors || _ctx.$slots.helpText ? (openBlock(), createElementBlock("div", _hoisted_7$9, [
           createElementVNode("span", _hoisted_8$8, [
             renderSlot(_ctx.$slots, "helpText", {}, () => [
-              _cache[0] || (_cache[0] = createTextVNode(" "))
+              _cache[0] || (_cache[0] = createTextVNode(" ", -1))
             ])
           ])
         ])) : createCommentVNode("", true)
@@ -448,9 +448,8 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
     const inputRef = ref();
     const { focused } = useFocusWithin(inputRef);
     watch(focused, () => {
-      var _a;
       if (focused.value && props.selectOnFocus) {
-        (_a = inputRef.value) == null ? void 0 : _a.select();
+        inputRef.value?.select();
       }
     });
     onKeyDown(true, (e) => emit("keySinglePress", e.key), {
@@ -458,18 +457,9 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
       dedupe: true
     });
     __expose({
-      focus: () => {
-        var _a;
-        return (_a = inputRef.value) == null ? void 0 : _a.focus();
-      },
-      blur: () => {
-        var _a;
-        return (_a = inputRef.value) == null ? void 0 : _a.blur();
-      },
-      select: () => {
-        var _a;
-        return (_a = inputRef.value) == null ? void 0 : _a.select();
-      }
+      focus: () => inputRef.value?.focus(),
+      blur: () => inputRef.value?.blur(),
+      select: () => inputRef.value?.select()
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$19, {
@@ -486,8 +476,8 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
             maxlength: _ctx.maxlength ?? void 0,
             disabled: _ctx.disabled,
             placeholder: _ctx.placeholder ?? void 0,
-            onFocus: _cache[1] || (_cache[1] = ($event) => emit("focus")),
-            onBlur: _cache[2] || (_cache[2] = ($event) => emit("blur"))
+            onFocus: _cache[1] || (_cache[1] = ($event) => emit("focus", $event)),
+            onBlur: _cache[2] || (_cache[2] = ($event) => emit("blur", $event))
           }), null, 16, _hoisted_1$W), [
             [vModelDynamic, value.value]
           ])
@@ -545,21 +535,29 @@ function useFocusTrap(target, options = {}) {
     (els) => {
       if (!els.length)
         return;
-      trap = createFocusTrap(els, {
-        ...focusTrapOptions,
-        onActivate() {
-          hasFocus.value = true;
-          if (options.onActivate)
-            options.onActivate();
-        },
-        onDeactivate() {
-          hasFocus.value = false;
-          if (options.onDeactivate)
-            options.onDeactivate();
+      if (!trap) {
+        trap = createFocusTrap(els, {
+          ...focusTrapOptions,
+          onActivate() {
+            hasFocus.value = true;
+            if (options.onActivate)
+              options.onActivate();
+          },
+          onDeactivate() {
+            hasFocus.value = false;
+            if (options.onDeactivate)
+              options.onDeactivate();
+          }
+        });
+        if (immediate)
+          activate();
+      } else {
+        const isActive = trap == null ? void 0 : trap.active;
+        trap == null ? void 0 : trap.updateContainerElements(els);
+        if (!isActive && immediate) {
+          activate();
         }
-      });
-      if (immediate)
-        activate();
+      }
     },
     { flush: "post" }
   );
@@ -747,21 +745,14 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
-    const displayedText = computed(() => {
-      var _a;
-      return ((_a = props.option) == null ? void 0 : _a.name) ?? props.text;
-    });
-    const displayedParent = computed(() => {
-      var _a;
-      return ((_a = props.option) == null ? void 0 : _a.parentName) ?? "";
-    });
+    const displayedText = computed(() => props.option?.name ?? props.text);
+    const displayedParent = computed(() => props.option?.parentName ?? "");
     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);
+        emit("select-object", props.option?.id);
       }
     }
     function onHover(hovered) {
@@ -783,7 +774,6 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
     }
     watch(() => props.selectedIndex, () => updateHighlight());
     return (_ctx, _cache) => {
-      var _a, _b;
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["cl:cursor-pointer cl:duration-75 cl:flex cl:p-1 cl:text-left cl:transition-colors", {
           "cl:bg-white": isHighlighted.value === false,
@@ -794,7 +784,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
         onMousemove: _cache[0] || (_cache[0] = ($event) => onHover(true)),
         onMouseleave: _cache[1] || (_cache[1] = ($event) => onHover(false))
       }, [
-        _ctx.option !== null && ((_a = _ctx.option) == null ? void 0 : _a.parentId) !== 0 && ((_b = _ctx.option) == null ? void 0 : _b.parentId) !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_1$T, toDisplayString(displayedParent.value), 1)) : createCommentVNode("", true),
+        _ctx.option !== null && _ctx.option?.parentId !== 0 && _ctx.option?.parentId !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_1$T, toDisplayString(displayedParent.value), 1)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass({
             "cl:w-1/2": displayedParent.value !== "",
@@ -818,7 +808,7 @@ const _hoisted_2$F = {
   key: 0,
   class: "cl:absolute cl:bg-off-white cl:flex cl:h-full cl:items-center cl:justify-center cl:top-0 cl:w-full cl:z-20"
 };
-const _hoisted_3$r = { class: "cl:bg-white cl:flex cl:p-2 cl:pb-1 cl:sticky cl:top-0 cl:w-full cl:z-10" };
+const _hoisted_3$s = { class: "cl:bg-white cl:flex cl:p-2 cl:pb-1 cl:sticky cl:top-0 cl:w-full cl:z-10" };
 const _hoisted_4$m = { class: "cl:inline-block cl:w-full" };
 const _hoisted_5$f = { key: 6 };
 const _sfc_main$14 = /* @__PURE__ */ defineComponent({
@@ -903,10 +893,9 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
       }
     }
     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);
+        container.value?.scrollTo(0, (currentSelection.value + 1) * heightOffset - heightOffset * 2);
       }
     }
     function updateAddNewOption() {
@@ -923,25 +912,15 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
       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();
-        });
+        nextTick(() => container.value?.querySelector("input")?.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);
-    });
+    onMounted(() => container.value?.addEventListener("keydown", onKeyboardShiftTab));
+    onUnmounted(() => container.value?.removeEventListener("keydown", onKeyboardShiftTab));
     return (_ctx, _cache) => {
-      var _a;
       return _ctx.isVisible ? (openBlock(), createElementBlock("div", {
         key: 0,
         ref_key: "container",
@@ -958,7 +937,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
         _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_2$F, [
           createVNode(clUiLoadingSpinner)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$r, [
+        createElementVNode("div", _hoisted_3$s, [
           createElementVNode("div", _hoisted_4$m, [
             createVNode(_sfc_main$18, {
               id: `cl-ui-combo-box-search-input-${_ctx.objectType}`,
@@ -970,9 +949,9 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
               onKeyup: search,
               onBlur: hideDropdown
             }, {
-              default: withCtx(() => _cache[4] || (_cache[4] = [
+              default: withCtx(() => [..._cache[4] || (_cache[4] = [
                 createElementVNode("span", null, null, -1)
-              ])),
+              ])]),
               _: 1
             }, 8, ["id", "modelValue", "placeholder"])
           ])
@@ -989,7 +968,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
           "additional-text": _ctx.objectParentType,
           class: "cl:bg-grey-2 cl:mt-1"
         }, null, 8, ["text", "additional-text"])) : createCommentVNode("", true),
-        _ctx.results !== null && ((_a = _ctx.results) == null ? void 0 : _a.length) === 0 && searchText.value.trim() !== "" && _ctx.canCreateNewObject === false && _ctx.errorMessage === "" ? (openBlock(), createBlock(_sfc_main$16, {
+        _ctx.results !== null && _ctx.results?.length === 0 && searchText.value.trim() !== "" && _ctx.canCreateNewObject === false && _ctx.errorMessage === "" ? (openBlock(), createBlock(_sfc_main$16, {
           key: 3,
           text: unref(t2)("comboBox.noResults", { value: searchText.value })
         }, null, 8, ["text"])) : createCommentVNode("", true),
@@ -1027,7 +1006,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$R = { class: "cl:flex cl:rounded-lg" };
 const _hoisted_2$E = { class: "cl:inline-block cl:w-full" };
-const _hoisted_3$q = { class: "cl:pointer-events-none cl:relative cl:top-0.5" };
+const _hoisted_3$r = { class: "cl:pointer-events-none cl:relative cl:top-0.5" };
 const _hoisted_4$l = { class: "cl:absolute cl:flex cl:float-right cl:font-semibold cl:mt-[5px] cl:right-2 cl:text-danger-default cl:text-sm cl:z-10" };
 const _hoisted_5$e = ["disabled"];
 const _hoisted_6$a = ["disabled"];
@@ -1079,8 +1058,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
     const objectToCreateValid = ref(true);
     const comboBoxBottomOfView = ref(false);
     function toggleDropdown(forcedState) {
-      var _a;
-      const comboPosition = ((_a = outsideRef.value) == null ? void 0 : _a.getBoundingClientRect().top) || 0;
+      const comboPosition = outsideRef.value?.getBoundingClientRect().top || 0;
       comboBoxBottomOfView.value = window.innerHeight - comboPosition < 280;
       if (!props.disabled) {
         if (typeof forcedState !== "undefined") {
@@ -1103,12 +1081,11 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
       toggleDropdown(false);
     }
     function selectObject(id2) {
-      var _a;
       const item = getComboBoxItemById(id2 ?? 0);
       selectedItem.value = item;
       toggleDropdown(false);
       if (!props.openDropDownOnFocus) {
-        (_a = inputRef.value) == null ? void 0 : _a.focus();
+        inputRef.value?.focus();
       }
     }
     function getComboBoxItemById(id2) {
@@ -1124,10 +1101,9 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
       return currentItem;
     }
     function createObject() {
-      var _a;
       createObjectRequest.value = {
         name: objectToCreateValue.value,
-        parentId: ((_a = parentItem.value) == null ? void 0 : _a.id) ?? 0
+        parentId: parentItem.value?.id ?? 0
       };
       emit("create-object", createObjectRequest.value);
     }
@@ -1139,8 +1115,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
       emit("create-parent-object", createObjectRequest.value);
     }
     function handleObjectCreateResponse() {
-      var _a, _b;
-      if ((_a = props.objectCreatedResponse) == null ? void 0 : _a.error) {
+      if (props.objectCreatedResponse?.error) {
         showNotification({
           message: t2("comboBox.createFailed", {
             name: objectToCreateValue.value,
@@ -1149,13 +1124,12 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
           colour: "danger",
           duration: 1e4
         });
-      } else if ((_b = props.objectCreatedResponse) == null ? void 0 : _b.id) {
+      } else if (props.objectCreatedResponse?.id) {
         handleSuccessfulObjectCreation();
       }
     }
     function handleParentObjectCreateResponse() {
-      var _a;
-      if ((_a = props.parentObjectCreatedResponse) == null ? void 0 : _a.id) {
+      if (props.parentObjectCreatedResponse?.id) {
         parentItem.value = {
           id: props.parentObjectCreatedResponse.id,
           name: props.parentObjectCreatedResponse.name ?? ""
@@ -1163,23 +1137,22 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
       }
     }
     function handleSuccessfulObjectCreation() {
-      var _a, _b, _c, _d, _e;
       showNotification({
         message: t2("comboBox.createSuccessful", {
           object: props.objectType,
-          name: ((_a = props.objectCreatedResponse) == null ? void 0 : _a.name) ?? ""
+          name: props.objectCreatedResponse?.name ?? ""
         }),
         colour: "primary",
         duration: 1e4
       });
       let parentName = "";
-      if (parentItem.value && parentItem.value.id === ((_b = props.objectCreatedResponse) == null ? void 0 : _b.parentId)) {
+      if (parentItem.value && parentItem.value.id === props.objectCreatedResponse?.parentId) {
         parentName = parentItem.value.name;
       }
       selectedItem.value = {
-        id: ((_c = props.objectCreatedResponse) == null ? void 0 : _c.id) ?? 0,
-        name: ((_d = props.objectCreatedResponse) == null ? void 0 : _d.name) ?? "",
-        parentId: ((_e = props.objectCreatedResponse) == null ? void 0 : _e.parentId) ?? 0,
+        id: props.objectCreatedResponse?.id ?? 0,
+        name: props.objectCreatedResponse?.name ?? "",
+        parentId: props.objectCreatedResponse?.parentId ?? 0,
         parentName
       };
     }
@@ -1216,10 +1189,9 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
     });
     const inputRef = ref();
     function handleEscapeKeyPress() {
-      var _a;
       toggleDropdown(false);
       if (!props.openDropDownOnFocus) {
-        (_a = inputRef.value) == null ? void 0 : _a.focus();
+        inputRef.value?.focus();
       }
     }
     function focusInternal() {
@@ -1229,10 +1201,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
       emit("focus");
     }
     __expose({
-      focus: () => {
-        var _a;
-        return (_a = inputRef.value) == null ? void 0 : _a.focus();
-      }
+      focus: () => inputRef.value?.focus()
     });
     return (_ctx, _cache) => {
       const _component_cl_ui_combo_box = resolveComponent("cl-ui-combo-box", true);
@@ -1258,13 +1227,13 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
               onFocus: focusInternal,
               onKeydown: _cache[2] || (_cache[2] = withKeys(($event) => toggleDropdown(true), ["enter"]))
             }, {
-              default: withCtx(() => _cache[8] || (_cache[8] = [
+              default: withCtx(() => [..._cache[8] || (_cache[8] = [
                 createElementVNode("span", null, null, -1)
-              ])),
+              ])]),
               _: 1
             }, 8, ["id", "modelValue", "class", "placeholder", "disabled"])
           ]),
-          withDirectives(createElementVNode("div", _hoisted_3$q, [
+          withDirectives(createElementVNode("div", _hoisted_3$r, [
             createElementVNode("div", _hoisted_4$l, [
               createTextVNode(toDisplayString(unref(t2)("comboBox.required")) + " ", 1),
               createVNode(unref(Icon), {
@@ -1408,7 +1377,7 @@ const _hoisted_2$D = {
   key: 0,
   class: "cl:w-full"
 };
-const _hoisted_3$p = {
+const _hoisted_3$q = {
   key: 1,
   class: "cl:leading-10 cl:text-sm cl:w-full"
 };
@@ -1419,7 +1388,7 @@ function _sfc_render$5(_ctx, _cache) {
     _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$p, [
+    _ctx.$slots.left || _ctx.$slots.right ? (openBlock(), createElementBlock("div", _hoisted_3$q, [
       createElementVNode("span", _hoisted_4$k, [
         renderSlot(_ctx.$slots, "left")
       ]),
@@ -1455,17 +1424,14 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.rows, (row) => {
-        return openBlock(), createElementBlock("div", mergeProps({
-          key: row,
-          ref_for: true
-        }, _ctx.$attrs, { class: "cl:flex cl:gap-1 cl:items-start" }), [
+        return openBlock(), createElementBlock("div", mergeProps({ key: row }, { ref_for: true }, _ctx.$attrs, { class: "cl:flex cl:gap-1 cl:items-start" }), [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.words, (word) => {
             return openBlock(), createElementBlock("span", {
               key: word,
               class: "cl:rounded-full cl:w-16 skeleton-loader-background"
             }, [
               renderSlot(_ctx.$slots, "default", {}, () => [
-                _cache[0] || (_cache[0] = createTextVNode("   "))
+                _cache[0] || (_cache[0] = createTextVNode("   ", -1))
               ])
             ]);
           }), 128))
@@ -1499,7 +1465,7 @@ const _hoisted_1$N = {
   class: "cl:flex cl:gap-2 cl:justify-between cl:mb-2 cl:w-full"
 };
 const _hoisted_2$C = { key: 1 };
-const _hoisted_3$o = { class: "cl:flex cl:flex-wrap cl:gap-1 cl:lg:flex-nowrap cl:lg:gap-2 cl:md:justify-end cl:pb-2" };
+const _hoisted_3$p = { class: "cl:flex cl:flex-wrap cl:gap-1 cl:lg:flex-nowrap cl:lg:gap-2 cl:md:justify-end cl:pb-2" };
 const _hoisted_4$j = { class: "cl:basis-full cl:col-span-2 cl:grow cl:lg:basis-0" };
 const _hoisted_5$c = {
   key: 2,
@@ -1540,7 +1506,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
         }, [
           createElementVNode("strong", null, toDisplayString(unref(t2)("grid.gridTools")), 1)
         ], 2),
-        createElementVNode("div", _hoisted_3$o, [
+        createElementVNode("div", _hoisted_3$p, [
           createElementVNode("div", _hoisted_4$j, [
             renderSlot(_ctx.$slots, "additional-grid-actions", normalizeProps(guardReactiveProps({
               loading: _ctx.loading,
@@ -1606,6 +1572,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
             unref(anyFilterableColumns)(_ctx.columns) ? (openBlock(), createBlock(_sfc_main$1b, {
               key: 0,
               id: `${unref(gridId)}-clear-filters`,
+              "clear-filters-button": "",
               size: "small",
               colour: "danger",
               disabled: !hasFilters.value || _ctx.loading,
@@ -1647,14 +1614,8 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const inputRef = ref();
     __expose({
-      focus: () => {
-        var _a;
-        return (_a = inputRef.value) == null ? void 0 : _a.focus();
-      },
-      blur: () => {
-        var _a;
-        return (_a = inputRef.value) == null ? void 0 : _a.blur();
-      }
+      focus: () => inputRef.value?.focus(),
+      blur: () => inputRef.value?.blur()
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$19, {
@@ -1778,6 +1739,7 @@ const messages = {
       onOrBefore: "On or before",
       onOrAfter: "On or after",
       selectAll: "Select all",
+      clearAll: "Clear all",
       allEntriesSelected: "All entries selected",
       page: "Page",
       pageSize: "Page Size",
@@ -1845,7 +1807,8 @@ const messages = {
       endDate: "End Date"
     },
     select: {
-      displayTextOverflow: "{count} options selected"
+      displayTextOverflow: "{count} options selected",
+      notFound: "Not found"
     }
   }
 };
@@ -2071,11 +2034,10 @@ function getPartsForValue(intlFormat, value, ...types) {
   return intlFormat.formatToParts(value).filter((part) => types.includes(part.type)).map((part) => part.value);
 }
 function callNumberFormatterImpl(value, options) {
-  var _a;
   if (isNaN(value)) {
     return "";
   } else {
-    return ((_a = newNumberFormatImpl(options)) == null ? void 0 : _a.format(value)) ?? null;
+    return newNumberFormatImpl(options)?.format(value) ?? null;
   }
 }
 function newNumberFormatImpl(options) {
@@ -2087,9 +2049,9 @@ function newNumberFormatImpl(options) {
   }
 }
 function buildFormatOptions(format, options) {
-  const normalisedLocale = toValue(options == null ? void 0 : options.locale) || unref(locale);
+  const normalisedLocale = toValue(options?.locale) || unref(locale);
   const i18nFormat = getNumberFormat(normalisedLocale);
-  const additionalOptions = copy(toValue(options == null ? void 0 : options.additionalOptions) ?? {});
+  const additionalOptions = copy(toValue(options?.additionalOptions) ?? {});
   let style = "decimal";
   switch (format) {
     case NumberFormat.PERCENTAGE:
@@ -2143,7 +2105,7 @@ function CitrusLimeUI() {
 }
 const { t } = i18n.global;
 function validateMinValue(minimumValue, typeOfValue, valueName, actualValue, timeZone) {
-  return new Promise((resolve) => {
+  return new Promise(((resolve) => {
     let validatedState = {
       valid: false,
       message: ""
@@ -2159,7 +2121,7 @@ function validateMinValue(minimumValue, typeOfValue, valueName, actualValue, tim
         case "tel":
         case "text":
         case "url":
-          isValid = ((actualValue == null ? void 0 : actualValue.length) ?? 0) >= (Number(minimumValue) || 0);
+          isValid = (actualValue?.length ?? 0) >= (Number(minimumValue) || 0);
           validatedState = getValidatedInputState(isValid, t("input.greaterOrEqualToCharacters", {
             label: valueName,
             min: minimumValue.toString()
@@ -2218,10 +2180,10 @@ function validateMinValue(minimumValue, typeOfValue, valueName, actualValue, tim
       }
     }
     resolve(validatedState);
-  });
+  }));
 }
 function validateMaxValue(maximumValue, typeOfValue, valueName, actualValue, timeZone) {
-  return new Promise((resolve) => {
+  return new Promise(((resolve) => {
     let validatedState = {
       valid: false,
       message: ""
@@ -2237,7 +2199,7 @@ function validateMaxValue(maximumValue, typeOfValue, valueName, actualValue, tim
         case "tel":
         case "text":
         case "url":
-          isValid = ((actualValue == null ? void 0 : actualValue.length) ?? 0) <= (Number(maximumValue) || 0);
+          isValid = (actualValue?.length ?? 0) <= (Number(maximumValue) || 0);
           validatedState = getValidatedInputState(isValid, t("input.lessOrEqualToCharacters", {
             label: valueName,
             max: maximumValue.toString()
@@ -2293,22 +2255,22 @@ function validateMaxValue(maximumValue, typeOfValue, valueName, actualValue, tim
       }
     }
     resolve(validatedState);
-  });
+  }));
 }
 function validateRequired(valueName, value) {
-  return new Promise((resolve) => {
+  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) => {
+  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 = {
@@ -2325,7 +2287,7 @@ const _hoisted_2$A = {
   key: 4,
   class: "cl:inline-block cl:whitespace-nowrap"
 };
-const _hoisted_3$n = {
+const _hoisted_3$o = {
   key: 5,
   class: "cl:inline-block cl:whitespace-nowrap"
 };
@@ -2351,11 +2313,11 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
       let date;
       if (props.timeZone) {
         date = DateTime.fromISO(value, {
-          locale: (dateFormatLocaleOverride == null ? void 0 : dateFormatLocaleOverride.value) ?? locale2.value
+          locale: dateFormatLocaleOverride?.value ?? locale2.value
         }).setZone(props.timeZone);
       } else {
         date = DateTime.fromISO(value, {
-          locale: (dateFormatLocaleOverride == null ? void 0 : dateFormatLocaleOverride.value) ?? locale2.value,
+          locale: dateFormatLocaleOverride?.value ?? locale2.value,
           zone: "UTC"
         });
       }
@@ -2385,17 +2347,18 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
     }
     function formatString() {
       let value = props.data[props.column.field];
-      if (!value || typeof value !== "string") {
+      if (!value) {
         return "";
-      }
-      if (props.column.maxLength) {
-        value = value.trimToLength(props.column.maxLength, props.column.format !== void 0 ? props.column.format === "ellipsis" : false);
-      }
-      if (props.searchValue && props.column.searchable) {
-        value = highlightText(value, props.searchValue.split(" "));
-      }
-      if (props.column.format === "wrap-text") {
-        value = `<span class="cl:break-words cl:whitespace-pre-wrap">${value}</span>`;
+      } else if (typeof value === "string") {
+        if (props.column.maxLength) {
+          value = value.trimToLength(props.column.maxLength, props.column.format !== void 0 ? props.column.format === "ellipsis" : false);
+        }
+        if (props.searchValue && props.column.searchable) {
+          value = highlightText(value, props.searchValue.split(" "));
+        }
+        if (props.column.format === "wrap-text") {
+          value = `<span class="cl:break-words cl:whitespace-pre-wrap">${value}</span>`;
+        }
       }
       return value;
     }
@@ -2419,7 +2382,6 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      var _a;
       return _ctx.column.type === "slot" ? renderSlot(_ctx.$slots, _ctx.column.name, {
         key: 0,
         formattedStringContent: formatString()
@@ -2436,7 +2398,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
         ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           createTextVNode(toDisplayString(formatDate(_ctx.data[_ctx.column.field], unref(DateFormat).DATETIME)), 1)
         ], 64))
-      ], 64)) : _ctx.column.type === "list" && _ctx.column.field !== void 0 && _ctx.column.listEntries !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_1$L, toDisplayString(unref(t2)(((_a = _ctx.column.listEntries.find((entry) => entry.value === _ctx.data[_ctx.column.field])) == null ? void 0 : _a.translationKey) ?? "")), 1)) : _ctx.column.type === "number" && _ctx.column.field !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_2$A, toDisplayString(formatNumberToString(_ctx.data[_ctx.column.field], unref(locale2))), 1)) : _ctx.column.field !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_3$n, [
+      ], 64)) : _ctx.column.type === "list" && _ctx.column.field !== void 0 && _ctx.column.listEntries !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_1$L, toDisplayString(unref(t2)(_ctx.column.listEntries.find((entry) => entry.value === _ctx.data[_ctx.column.field])?.translationKey ?? "")), 1)) : _ctx.column.type === "number" && _ctx.column.field !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_2$A, toDisplayString(formatNumberToString(_ctx.data[_ctx.column.field], unref(locale2))), 1)) : _ctx.column.field !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_3$o, [
         createElementVNode("span", {
           title: showUntruncatedStringValue.value ? _ctx.data[_ctx.column.field] : void 0,
           innerHTML: formatString()
@@ -2463,13 +2425,10 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
     const { t: t2 } = useI18n();
     const currentRecord = ref(copy(props.data));
     const edited = computed(() => props.column.field !== void 0 && currentRecord.value[props.column.field] !== props.data[props.column.field]);
-    const listEntries = computed(() => {
-      var _a;
-      return ((_a = props.column.listEntries) == null ? void 0 : _a.map((entry, id) => ({
-        id,
-        name: t2(entry.translationKey)
-      }))) ?? [];
-    });
+    const listEntries = computed(() => props.column.listEntries?.map((entry, id) => ({
+      id,
+      name: t2(entry.translationKey)
+    })) ?? []);
     watchEffect(() => currentRecord.value = copy(props.data));
     watch(currentRecord, (newValue) => {
       const property = props.column.field ?? "";
@@ -2612,7 +2571,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$K = ["colspan"];
 const _hoisted_2$z = ["colspan"];
-const _hoisted_3$m = { key: 2 };
+const _hoisted_3$n = { key: 2 };
 const _hoisted_4$h = ["colspan"];
 const _hoisted_5$b = { class: "cl:flex cl:flex-wrap cl:justify-center cl:text-center cl:text-sm cl:w-full" };
 const _hoisted_6$9 = { key: 0 };
@@ -2679,22 +2638,19 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
       }
     }
     const clickCounters = ref({});
-    watch(() => props.data, () => {
-      var _a, _b;
-      return clickCounters.value = Object.fromEntries(((_b = (_a = props.data) == null ? void 0 : _a.results) == null ? void 0 : _b.map((_, i) => [
-        [i],
-        {
-          count: 0,
-          target: null,
-          reset: useTimeoutFn(() => {
-            if (clickCounters.value[i]) {
-              clickCounters.value[i].count = 0;
-              clickCounters.value[i].target = null;
-            }
-          }, 400, { immediate: false })
-        }
-      ])) ?? []);
-    }, {
+    watch(() => props.data, () => clickCounters.value = Object.fromEntries(props.data?.results?.map((_, i) => [
+      [i],
+      {
+        count: 0,
+        target: null,
+        reset: useTimeoutFn(() => {
+          if (clickCounters.value[i]) {
+            clickCounters.value[i].count = 0;
+            clickCounters.value[i].target = null;
+          }
+        }, 400, { immediate: false })
+      }
+    ]) ?? []), {
       deep: true,
       immediate: true
     });
@@ -2716,10 +2672,9 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
       }
     }
     function handleRowSelect(rowIndex, row, event) {
-      var _a;
       const { target } = event;
       if (target && target instanceof HTMLElement) {
-        const rowspan = (_a = target.closest("td")) == null ? void 0 : _a.getAttribute("rowspan");
+        const rowspan = target.closest("td")?.getAttribute("rowspan");
         if (rowspan && parseInt(rowspan) > 1) {
           return;
         }
@@ -2734,15 +2689,13 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
       selectedRowIndex.value = void 0;
     }
     function displayBorderForEndOfGroup(data, index2) {
-      var _a;
-      const grouping = (_a = props.options) == null ? void 0 : _a.groupByField;
+      const grouping = props.options?.groupByField;
       const currentRow = data.results[index2];
       const nextRow = data.results[index2 + 1];
       return !!grouping && index2 < data.results.length - 1 && currentRow[grouping] !== nextRow[grouping];
     }
     function getGroupGridAreaSpan(data, index2) {
-      var _a;
-      const grouping = (_a = props.options) == null ? void 0 : _a.groupByField;
+      const grouping = props.options?.groupByField;
       if (grouping) {
         const previousRow = data.results[index2 - 1];
         const currentRow = data.results[index2];
@@ -2763,13 +2716,11 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
     watch(() => props.options.rowSelectionEnabled, clearSelectedRow);
     watch(() => props.request, clearSelectedRow);
     watch(selectedRowIndex, () => {
-      var _a;
-      if (selectedRowIndex.value !== void 0 && ((_a = props.data) == null ? void 0 : _a.results[selectedRowIndex.value])) {
+      if (selectedRowIndex.value !== void 0 && props.data?.results[selectedRowIndex.value]) {
         emit("row-select", props.data.results[selectedRowIndex.value]);
       }
     });
     return (_ctx, _cache) => {
-      var _a;
       return openBlock(), createElementBlock("tbody", null, [
         _ctx.initialLoad ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.request.pageSize, (row) => {
           return openBlock(), createElementBlock("tr", { key: row }, [
@@ -2784,9 +2735,8 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
             }, "   ", 10, _hoisted_1$K)
           ]);
         }), 128)) : createCommentVNode("", true),
-        _ctx.data && ((_a = _ctx.data.results) == null ? void 0 : _a.length) && !_ctx.initialLoad ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+        _ctx.data && _ctx.data.results?.length && !_ctx.initialLoad ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.results, (row, index2) => {
-            var _a2;
             return openBlock(), createBlock(_sfc_main$W, {
               key: index2,
               data: row,
@@ -2804,7 +2754,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
                 "cl:border-b-2 cl:border-solid cl:border-primary-dark": displayBorderForEndOfGroup(_ctx.data, index2)
               }]),
               "row-index": index2,
-              "group-by": ((_a2 = _ctx.options) == null ? void 0 : _a2.groupByField) ?? "",
+              "group-by": _ctx.options?.groupByField ?? "",
               "group-grid-area-span": getGroupGridAreaSpan(_ctx.data, index2),
               onClick: ($event) => {
                 _ctx.editMode ? () => {
@@ -2841,7 +2791,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
               }, "   ", 8, _hoisted_2$z)
             ], 2);
           }), 128)) : createCommentVNode("", true)
-        ], 64)) : !_ctx.loading ? (openBlock(), createElementBlock("tr", _hoisted_3$m, [
+        ], 64)) : !_ctx.loading ? (openBlock(), createElementBlock("tr", _hoisted_3$n, [
           createElementVNode("td", {
             colspan: _ctx.columns.length
           }, [
@@ -2871,7 +2821,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$J = ["value", "inputmode", "disabled", "placeholder"];
 const _hoisted_2$y = { class: "cl:absolute cl:flex-col cl:flex-nowrap cl:h-full cl:hidden cl:justify-between cl:py-0.5 cl:right-1 cl:text-xs cl:top-0 cl:xl:flex" };
-const _hoisted_3$l = ["disabled"];
+const _hoisted_3$m = ["disabled"];
 const _hoisted_4$g = ["disabled"];
 const _sfc_main$U = /* @__PURE__ */ defineComponent({
   ...{
@@ -2914,8 +2864,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
         stagingValueChanged.value = false;
         if (selectInputValueTriggered.value || props.selectOnFocus || modelValue.value === 0) {
           setTimeout(() => {
-            var _a, _b;
-            (_b = inputRef.value) == null ? void 0 : _b.setSelectionRange(0, ((_a = stagingValue.value) == null ? void 0 : _a.length) ?? 0);
+            inputRef.value?.setSelectionRange(0, stagingValue.value?.length ?? 0);
           });
         }
         selectInputValueTriggered.value = false;
@@ -3003,19 +2952,12 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
     }
     const selectInputValueTriggered = ref(false);
     function selectInputValue() {
-      var _a;
       selectInputValueTriggered.value = true;
-      (_a = inputRef.value) == null ? void 0 : _a.focus();
+      inputRef.value?.focus();
     }
     __expose({
-      focus: () => {
-        var _a;
-        return (_a = inputRef.value) == null ? void 0 : _a.focus();
-      },
-      blur: () => {
-        var _a;
-        return (_a = inputRef.value) == null ? void 0 : _a.blur();
-      },
+      focus: () => inputRef.value?.focus(),
+      blur: () => inputRef.value?.blur(),
       select: () => selectInputValue()
     });
     return (_ctx, _cache) => {
@@ -3061,7 +3003,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
                 ]
               }, [
                 createVNode(_component_icon, { icon: "ph:caret-up-bold" })
-              ], 40, _hoisted_3$l),
+              ], 40, _hoisted_3$m),
               createElementVNode("button", {
                 class: "cl:bg-secondary-light/30 cl:border cl:border-grey-3 cl:hover:bg-secondary-light/20 cl:px-1 cl:rounded",
                 disabled: _ctx.disabled,
@@ -3103,7 +3045,7 @@ const _hoisted_1$I = {
   class: "cl:flex cl:flex-col cl:lg:flex-row cl:lg:gap-2"
 };
 const _hoisted_2$x = { class: "cl:border cl:border-off-white cl:flex cl:items-center cl:lg:px-4 cl:lg:py-3 cl:mt-2 cl:p-2 cl:rounded-lg cl:w-full" };
-const _hoisted_3$k = { class: "cl:border cl:border-off-white cl:lg:px-4 cl:lg:py-3 cl:mt-2 cl:p-2 cl:rounded-lg" };
+const _hoisted_3$l = { class: "cl:border cl:border-off-white cl:lg:px-4 cl:lg:py-3 cl:mt-2 cl:p-2 cl:rounded-lg" };
 const _hoisted_4$f = ["inert"];
 const _hoisted_5$a = { class: "cl:basis-full cl:bg-off-white cl:border cl:border-grey-1 cl:flex cl:flex-1 cl:items-center cl:justify-between cl:lg:basis-0 cl:lg:px-4 cl:lg:py-3 cl:mt-2 cl:p-2 cl:rounded-lg cl:shadow cl:text-sm" };
 const _hoisted_6$8 = { class: "cl:flex cl:flex-wrap cl:gap-x-4 cl:gap-y-2 cl:items-center cl:justify-between cl:w-full" };
@@ -3143,10 +3085,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const { t: t2 } = useI18n();
-    const totalPages = computed(() => {
-      var _a;
-      return props.data !== null ? Math.ceil((((_a = props.data) == null ? void 0 : _a.totalRecords) ?? 0) / props.request.pageSize) : 1;
-    });
+    const totalPages = computed(() => props.data !== null ? Math.ceil((props.data?.totalRecords ?? 0) / props.request.pageSize) : 1);
     const pageNumbers = computed(() => {
       const calculatedPageNumbers = Array.from(Array(totalPages.value + 1).keys());
       let results = [];
@@ -3161,7 +3100,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     function setPage(pageNumber) {
       if (props.showUnsavedChangesWarning === false || window.confirm(t2("grid.unsavedChangesWarningMessage"))) {
         const filterRequest = copy(props.request);
-        pageNumber ?? (pageNumber = 1);
+        pageNumber ??= 1;
         if (filterRequest.pageNumber !== pageNumber) {
           filterRequest.pageNumber = Math.max(Math.min(Math.trunc(pageNumber), totalPages.value), 1);
           emit("update:request", filterRequest);
@@ -3185,7 +3124,6 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      var _a, _b, _c;
       return _ctx.initialLoad ? (openBlock(), createElementBlock("div", _hoisted_1$I, [
         createElementVNode("div", _hoisted_2$x, [
           createVNode(unref(_sfc_main$$), { words: 3 }),
@@ -3194,10 +3132,10 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
             words: 2
           })
         ]),
-        createElementVNode("div", _hoisted_3$k, [
+        createElementVNode("div", _hoisted_3$l, [
           createVNode(unref(clUiSkeletonInput), { class: "cl:w-64" })
         ])
-      ])) : _ctx.loading || ((_b = (_a = _ctx.data) == null ? void 0 : _a.results) == null ? void 0 : _b.length) && _ctx.request ? (openBlock(), createElementBlock("div", {
+      ])) : _ctx.loading || _ctx.data?.results?.length && _ctx.request ? (openBlock(), createElementBlock("div", {
         key: 1,
         class: normalizeClass(["cl:flex cl:flex-wrap cl:lg:gap-2", {
           "cl:opacity-40": _ctx.loading
@@ -3213,7 +3151,7 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
               ]),
               createElementVNode("div", _hoisted_10$3, [
                 createElementVNode("span", _hoisted_11$3, toDisplayString(unref(t2)("grid.totalRecords")), 1),
-                createElementVNode("span", null, toDisplayString(unref(formatNumberAsInteger)(((_c = _ctx.data) == null ? void 0 : _c.totalRecords) ?? 0)), 1)
+                createElementVNode("span", null, toDisplayString(unref(formatNumberAsInteger)(_ctx.data?.totalRecords ?? 0)), 1)
               ]),
               _ctx.options.hidePageSizeOptions === false ? (openBlock(), createElementBlock("div", _hoisted_12$1, [
                 createElementVNode("span", _hoisted_13$1, toDisplayString(unref(t2)("grid.pageSize")), 1),
@@ -3311,9 +3249,9 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
               autocomplete: "off",
               "onUpdate:modelValue": setPage
             }, {
-              default: withCtx(() => _cache[4] || (_cache[4] = [
+              default: withCtx(() => [..._cache[4] || (_cache[4] = [
                 createElementVNode("span", null, null, -1)
-              ])),
+              ])]),
               _: 1
             }, 8, ["model-value", "max", "disabled"])
           ])
@@ -3418,9 +3356,12 @@ function convertDateToIsoString(dateToConvert, forcedTimeOfDay, includeOffset, s
   } else if (forcedTimeOfDay === "end") {
     returnValueDate = returnValueDate.endOf("day").set({ millisecond: 0 });
   }
-  let returnValue = returnValueDate.toISO({ includeOffset });
+  let returnValue = returnValueDate.toISO({
+    includeOffset,
+    suppressMilliseconds: true
+  });
   if (selectedTimeZone === null) {
-    returnValue = (returnValue == null ? void 0 : returnValue.replace("Z", "")) ?? null;
+    returnValue = returnValue?.replace("Z", "") ?? null;
   }
   return returnValue;
 }
@@ -3586,12 +3527,11 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$H, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.dates, (date, index2) => {
-          var _a, _b;
           return openBlock(), createElementBlock("button", {
             key: index2,
             class: normalizeClass(["cl:border cl:cursor-pointer cl:py-1 cl:rounded-md cl:text-center", {
-              "cl:bg-primary-lighter/30 cl:border-primary-default cl:font-bold cl:hover:border-primary-darker": ((_a = _ctx.selectedQuickDate) == null ? void 0 : _a.name) === date.name,
-              "cl:border-grey-2 cl:hover:border-grey-3 cl:hover:opacity-95 cl:opacity-60": ((_b = _ctx.selectedQuickDate) == null ? void 0 : _b.name) !== date.name
+              "cl:bg-primary-lighter/30 cl:border-primary-default cl:font-bold cl:hover:border-primary-darker": _ctx.selectedQuickDate?.name === date.name,
+              "cl:border-grey-2 cl:hover:border-grey-3 cl:hover:opacity-95 cl:opacity-60": _ctx.selectedQuickDate?.name !== date.name
             }]),
             onClick: ($event) => emit("quick-date-selected", date)
           }, [
@@ -3831,14 +3771,8 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
       }
     }
     __expose({
-      focus: () => {
-        var _a;
-        return (_a = inputRef.value) == null ? void 0 : _a.focus();
-      },
-      blur: () => {
-        var _a;
-        return (_a = inputRef.value) == null ? void 0 : _a.blur();
-      }
+      focus: () => inputRef.value?.focus(),
+      blur: () => inputRef.value?.blur()
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(_sfc_main$19, {
@@ -3885,7 +3819,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$F = { class: "cl:gap-1 cl:grid cl:grid-cols-[auto_1fr_auto_auto] cl:pt-0.5 cl:w-full" };
 const _hoisted_2$u = ["disabled"];
-const _hoisted_3$j = { class: "cl:max-w-max" };
+const _hoisted_3$k = { class: "cl:max-w-max" };
 const _hoisted_4$e = { class: "cl:flex cl:flex-col cl:gap-1 cl:w-full" };
 const _hoisted_5$9 = ["min", "disabled", "required", "step", "max"];
 const _hoisted_6$7 = { class: "cl:bg-white cl:border cl:border-grey-2 cl:leading-none cl:rounded-full cl:text-center cl:text-xs" };
@@ -3925,19 +3859,12 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     const showRegularInput = ref(false);
     const displayValue = useThrottle(value, 50);
     function setValueAndFocus(newValue) {
-      var _a;
       value.value = newValue;
-      (_a = sliderRef.value) == null ? void 0 : _a.focus();
+      sliderRef.value?.focus();
     }
     __expose({
-      focus: () => {
-        var _a, _b;
-        return ((_a = sliderRef.value) == null ? void 0 : _a.focus()) || ((_b = inputRef.value) == null ? void 0 : _b.focus());
-      },
-      blur: () => {
-        var _a, _b;
-        return ((_a = sliderRef.value) == null ? void 0 : _a.blur()) || ((_b = inputRef.value) == null ? void 0 : _b.blur());
-      }
+      focus: () => sliderRef.value?.focus() || inputRef.value?.focus(),
+      blur: () => sliderRef.value?.blur() || inputRef.value?.blur()
     });
     return (_ctx, _cache) => {
       const _component_icon = resolveComponent("icon");
@@ -3952,7 +3879,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
               class: "cl:active:bg-grey-0 cl:bg-white cl:border cl:border-grey-2 cl:disabled:bg-grey-1 cl:hover:bg-off-white cl:leading-none cl:min-w-[26px] cl:p-[5px] cl:rounded-full cl:shadow cl:text-xs cl:transition-colors",
               onClick: _cache[0] || (_cache[0] = ($event) => setValueAndFocus(_ctx.min))
             }, toDisplayString(unref(formatNumberAsDecimal)(_ctx.min, _ctx.precision)), 9, _hoisted_2$u),
-            createElementVNode("div", _hoisted_3$j, [
+            createElementVNode("div", _hoisted_3$k, [
               withDirectives(createElementVNode("div", _hoisted_4$e, [
                 withDirectives(createElementVNode("input", mergeProps({
                   ref_key: "sliderRef",
@@ -4133,15 +4060,15 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
     required: { type: Boolean },
     disabled: { type: Boolean },
     rangeSelected: { type: Boolean },
-    forceIconDisplay: { type: Boolean }
+    forceIconDisplay: { type: Boolean },
+    interactiveIcon: { type: Boolean }
   },
   emits: ["clear", "reset", "togglePopover", "focus", "blur"],
   setup(__props, { expose: __expose }) {
     const props = __props;
     const element = ref(null);
     function focus() {
-      var _a;
-      (_a = element.value) == null ? void 0 : _a.focus();
+      element.value?.focus();
     }
     const { t: t2 } = useI18n();
     const currentPlaceholder = computed(() => {
@@ -4182,10 +4109,13 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
           onBlur: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("blur"))
         }, toHandlers(_ctx.events, true)), null, 16, _hoisted_2$t),
         createVNode(unref(Icon), {
-          class: "cl:absolute cl:bg-transparent cl:cursor-text cl:left-2 cl:text-grey-4 cl:top-3.5 icon",
+          class: normalizeClass(["cl:absolute cl:bg-transparent cl:cursor-pointer cl:hover:text-link-light cl:left-2 cl:text-grey-4 cl:top-3.5 icon", { "cl:pointer-events-none": !_ctx.interactiveIcon }]),
           icon: _ctx.type === "time" ? "ph-clock" : "ph:calendar",
-          onClick: focus
-        }, null, 8, ["icon"]),
+          onClick: _cache[4] || (_cache[4] = ($event) => {
+            focus();
+            _ctx.$emit("togglePopover");
+          })
+        }, null, 8, ["class", "icon"]),
         !_ctx.disabled ? (openBlock(), createElementBlock("div", {
           key: 0,
           class: normalizeClass(["action-icon cl:absolute cl:bg-transparent cl:flex cl:right-2 cl:text-grey-4 cl:top-3.5", { "show-icons": _ctx.forceIconDisplay }])
@@ -4194,20 +4124,20 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
             key: 0,
             class: "cl:cursor-pointer cl:hover:text-link-light",
             icon: "ph:arrow-counter-clockwise",
-            onClick: _cache[4] || (_cache[4] = withModifiers(($event) => _ctx.$emit("reset"), ["prevent"]))
+            onClick: _cache[5] || (_cache[5] = withModifiers(($event) => _ctx.$emit("reset"), ["prevent"]))
           })) : createCommentVNode("", true),
           !_ctx.required && _ctx.date && (_ctx.type !== "time" || _ctx.date !== "00:00") ? (openBlock(), createBlock(unref(Icon), {
             key: 1,
             class: "cl:cursor-pointer cl:hover:text-link-light cl:md:ml-0.5 clear-icon",
             icon: "ph:x",
-            onClick: _cache[5] || (_cache[5] = withModifiers(($event) => _ctx.$emit("clear"), ["prevent"]))
+            onClick: _cache[6] || (_cache[6] = withModifiers(($event) => _ctx.$emit("clear"), ["prevent"]))
           })) : createCommentVNode("", true)
         ], 2)) : createCommentVNode("", true)
       ]));
     };
   }
 });
-const clUiCalendarInput = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-8d0a0dc4"]]);
+const clUiCalendarInput = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-c852f489"]]);
 const _hoisted_1$D = {
   key: 0,
   class: "cl:px-3 cl:py-3 cl:w-full"
@@ -4233,7 +4163,8 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     placeholder: { default: null },
     popoverPlacement: { default: "auto" },
     showPopover: { type: Boolean, default: void 0 },
-    forceIconDisplay: { type: Boolean, default: false }
+    forceIconDisplay: { type: Boolean, default: false },
+    showWeekNumbers: { type: Boolean, default: true }
   }, {
     "modelValue": { required: true },
     "modelModifiers": {}
@@ -4270,6 +4201,29 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     const { locale: locale2 } = useI18n();
     const internalLocale = computed(() => props.dateFormatLocale ?? locale2.value);
     const todayButtonVisible = ref(true);
+    const internalPlaceholder = computed(() => {
+      if (props.placeholder !== null) {
+        return props.placeholder || null;
+      } else {
+        const formatPlaceholderDateOptions = {
+          year: "numeric",
+          month: "2-digit",
+          day: "2-digit"
+        };
+        const formatPlaceholderTimeOptions = {
+          hour: "2-digit",
+          minute: "2-digit"
+        };
+        const meridiems = Info.meridiems().join(", ").toUpperCase();
+        const displayString = DateTime.parseFormatForOpts({
+          ...props.type === "time" ? void 0 : formatPlaceholderDateOptions,
+          ...props.type === "date" ? void 0 : formatPlaceholderTimeOptions
+        }, {
+          locale: internalLocale.value
+        });
+        return displayString?.toUpperCase().replace("YYYYYY", "YYYY").replace("YYYYY", "YYYY").replace("A", `(${meridiems})`) ?? null;
+      }
+    });
     const showPopoverComputed = computed(() => {
       return props.showPopover !== void 0 ? props.showPopover : props.type !== "time";
     });
@@ -4319,8 +4273,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     });
     __expose({
       focus() {
-        var _a;
-        (_a = input.value) == null ? void 0 : _a.focus();
+        input.value?.focus();
       }
     });
     return (_ctx, _cache) => {
@@ -4354,14 +4307,16 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
                 date: inputValue,
                 events: inputEvents,
                 type: _ctx.type,
-                placeholder: _ctx.placeholder,
+                placeholder: internalPlaceholder.value,
                 required: _ctx.required,
                 "force-icon-display": _ctx.forceIconDisplay,
                 disabled: _ctx.disabled,
+                "interactive-icon": !props.showPopover,
                 onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("focus")),
                 onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("blur")),
-                onClear: _cache[2] || (_cache[2] = ($event) => internalCurrentDateTime.value = null)
-              }), null, 16, ["date", "events", "type", "placeholder", "required", "force-icon-display", "disabled"])
+                onClear: _cache[2] || (_cache[2] = ($event) => internalCurrentDateTime.value = null),
+                onTogglePopover: calendar.value?.showPopover
+              }), null, 16, ["date", "events", "type", "placeholder", "required", "force-icon-display", "disabled", "interactive-icon", "onTogglePopover"])
             ]),
             footer: withCtx(() => [
               todayButtonVisible.value ? (openBlock(), createElementBlock("div", _hoisted_1$D, [
@@ -4391,6 +4346,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
             color: "primary",
             "title-position": "left",
             "hide-time-header": "",
+            "show-weeknumbers": _ctx.showWeekNumbers,
             popover: popover.value
           }, {
             default: withCtx(({ inputValue, inputEvents }) => [
@@ -4400,15 +4356,17 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
                 date: inputValue,
                 events: inputEvents,
                 type: _ctx.type,
-                placeholder: _ctx.placeholder,
+                placeholder: internalPlaceholder.value,
                 required: _ctx.required,
                 disabled: _ctx.disabled,
                 "force-icon-display": _ctx.forceIconDisplay,
+                "interactive-icon": !props.showPopover,
                 onFocus: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("focus")),
                 onBlur: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("blur")),
                 onClear: _cache[6] || (_cache[6] = ($event) => internalCurrentDateTime.value = null),
-                onReset: _cache[7] || (_cache[7] = ($event) => internalCurrentDateTime.value = unref(getDefaultDate)(_ctx.minDate, _ctx.maxDate, internalTimeZone.value, _ctx.type))
-              }), null, 16, ["date", "events", "type", "placeholder", "required", "disabled", "force-icon-display"])
+                onReset: _cache[7] || (_cache[7] = ($event) => internalCurrentDateTime.value = unref(getDefaultDate)(_ctx.minDate, _ctx.maxDate, internalTimeZone.value, _ctx.type)),
+                onTogglePopover: calendar.value?.showPopover
+              }), null, 16, ["date", "events", "type", "placeholder", "required", "disabled", "force-icon-display", "interactive-icon", "onTogglePopover"])
             ]),
             footer: withCtx(() => [
               todayButtonVisible.value ? (openBlock(), createElementBlock("div", _hoisted_2$s, [
@@ -4419,7 +4377,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
               ])) : createCommentVNode("", true)
             ]),
             _: 1
-          }, 8, ["modelValue", "locale", "is24hr", "timezone", "mode", "min-date", "max-date", "initial-page", "is-required", "masks", "popover"]))
+          }, 8, ["modelValue", "locale", "is24hr", "timezone", "mode", "min-date", "max-date", "initial-page", "is-required", "masks", "show-weeknumbers", "popover"]))
         ]),
         _: 2
       }, [
@@ -4439,7 +4397,7 @@ const _hoisted_1$C = {
   class: "cl:flex cl:gap-2 cl:p-2 cl:w-full"
 };
 const _hoisted_2$r = { class: "cl:w-full" };
-const _hoisted_3$i = { class: "cl:w-full" };
+const _hoisted_3$j = { class: "cl:w-full" };
 const _sfc_main$L = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -4455,7 +4413,8 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     required: { type: Boolean, default: false },
     quickDateScope: { default: null },
     popoverPlacement: { default: "auto" },
-    manualDateSelection: { type: Boolean, default: true }
+    manualDateSelection: { type: Boolean, default: true },
+    showWeekNumbers: { type: Boolean, default: true }
   }, {
     "modelValue": { required: true },
     "modelModifiers": {}
@@ -4576,6 +4535,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
             mode: "date",
             color: "primary",
             "title-position": "left",
+            "show-weeknumbers": _ctx.showWeekNumbers,
             locale: internalLocale.value,
             timezone: internalTimeZone.value,
             columns: dateRangeColumnCount.value,
@@ -4635,7 +4595,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
                     _: 1
                   }, 8, ["modelValue", "date-format-locale", "disabled", "time-zone", "min-date", "max-date", "popover-placement"])
                 ]),
-                createElementVNode("div", _hoisted_3$i, [
+                createElementVNode("div", _hoisted_3$j, [
                   createVNode(_sfc_main$M, {
                     id: "dateInputEnd",
                     modelValue: internalEntrySelectEndDate.value,
@@ -4664,7 +4624,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
               ])) : createCommentVNode("", true)
             ]),
             _: 1
-          }, 8, ["modelValue", "locale", "timezone", "columns", "popover", "min-date", "max-date", "initial-page"])
+          }, 8, ["modelValue", "show-weeknumbers", "locale", "timezone", "columns", "popover", "min-date", "max-date", "initial-page"])
         ]),
         _: 2
       }, [
@@ -4701,6 +4661,10 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$B = ["value", "readonly", "placeholder", "disabled", "onKeydown"];
 const _hoisted_2$q = ["id", "tabindex", "inert", "onKeydown"];
+const _hoisted_3$i = {
+  key: 1,
+  class: "cl:p-1 cl:select-none cl:text-grey-3"
+};
 const _sfc_main$J = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -4717,7 +4681,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     isGridFilter: { type: Boolean, default: false },
     openDropDownOnFocus: { type: Boolean, default: true },
     allowFiltering: { type: Boolean, default: false },
-    useListView: { type: Boolean, default: (props) => Array.isArray(props.modelValue) }
+    useListView: { type: Boolean, default: (props) => Array.isArray(props.modelValue) },
+    readonly: { type: Boolean, default: false }
   },
   emits: ["update:model-value"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -4741,14 +4706,22 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
         if (isSelectItem(item)) {
           return item.name;
         }
-        return item == null ? void 0 : item.toString();
+        return item?.toString();
       }
     });
     const searchTerm = ref("");
-    const displayList = computed(() => props.list.filter((entry) => {
-      const term = isSelectItem(entry) ? entry.name : entry;
-      return term.toString().toLowerCase().includes(searchTerm.value.trim().toLowerCase());
-    }));
+    const displayList = computed(() => {
+      const itemsToFilterBasedOnSearchTerm = props.list.filter((d) => !isSelectItem(d) || isSelectItem(d) && d.id > -1);
+      const filteredDisplayList = itemsToFilterBasedOnSearchTerm.filter((entry) => {
+        const term = isSelectItem(entry) ? entry.name : entry;
+        return term.toString().toLowerCase().includes(searchTerm.value.trim().toLowerCase());
+      });
+      const itemsToExcludeFromSearchTermFiltering = props.list.filter((d) => isSelectItem(d) && d.id < 0);
+      return [
+        ...searchTerm.value.trim() === "" ? itemsToExcludeFromSearchTermFiltering : [],
+        ...filteredDisplayList
+      ];
+    });
     const isCurrentlySearchable = computed(() => selectModalVisible.value && props.allowFiltering);
     const highlightIndex = ref(-1);
     const outsideRef = ref();
@@ -4779,51 +4752,51 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
       setSearchTerm("");
     }
     function select(value) {
-      if (Array.isArray(selectResult.value)) {
-        const isInArray = selectResult.value.indexOf(value);
-        if (isInArray > -1) {
-          if (selectResult.value.length > 1 || props.canClear) {
-            selectResult.value = selectResult.value.toSpliced(isInArray, 1);
+      if (props.readonly === false && value !== null && value !== void 0) {
+        if (Array.isArray(selectResult.value)) {
+          const isInArray = selectResult.value.indexOf(value);
+          if (isInArray > -1) {
+            if (selectResult.value.length > 1 || props.canClear) {
+              selectResult.value = selectResult.value.toSpliced(isInArray, 1);
+            }
+          } else {
+            selectResult.value = [
+              ...selectResult.value,
+              value
+            ];
           }
         } else {
-          selectResult.value = [
-            ...selectResult.value,
-            value
-          ];
-        }
-      } else {
-        if (props.canClear && selectResult.value === value) {
-          selectResult.value = null;
-        } else {
-          selectResult.value = value;
+          if (props.canClear && selectResult.value === value) {
+            selectResult.value = null;
+          } else {
+            selectResult.value = value;
+          }
+          toggleSelectModalState();
         }
-        toggleSelectModalState();
       }
     }
     function moveHighlightToStart(event) {
-      var _a;
-      if (selectModalVisible.value || props.useListView) {
+      if (props.readonly === false && (selectModalVisible.value || props.useListView)) {
         event.stopPropagation();
         highlightIndex.value = 0;
-        (_a = selectModalRef.value) == null ? void 0 : _a.scrollTo({
+        selectModalRef.value?.scrollTo({
           top: 0,
           behavior: "instant"
         });
       }
     }
     function moveHighlightToEnd(event) {
-      var _a;
-      if (selectModalVisible.value || props.useListView) {
+      if (props.readonly === false && (selectModalVisible.value || props.useListView)) {
         event.stopPropagation();
         highlightIndex.value = displayList.value.length - 1;
-        (_a = selectModalRef.value) == null ? void 0 : _a.scrollTo({
+        selectModalRef.value?.scrollTo({
           top: selectModalRef.value.scrollHeight,
           behavior: "instant"
         });
       }
     }
     function moveHighlightBackwards(event) {
-      if (selectModalVisible.value || props.useListView) {
+      if (props.readonly === false && (selectModalVisible.value || props.useListView)) {
         event.stopPropagation();
         if (highlightIndex.value === -1) {
           moveHighlightToStart(event);
@@ -4836,7 +4809,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
       }
     }
     function moveHighlightForwards(event) {
-      if (selectModalVisible.value || props.useListView) {
+      if (props.readonly === false && (selectModalVisible.value || props.useListView)) {
         event.stopPropagation();
         if (highlightIndex.value < displayList.value.length - 1) {
           highlightIndex.value++;
@@ -4850,8 +4823,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
       return !!value && typeof value === "object" && "name" in value && typeof value.name === "string" && "id" in value && typeof value.id === "number";
     }
     function scrollToHighlight() {
-      var _a;
-      const highlightedElement = (_a = selectModalRef.value) == null ? void 0 : _a.children.item(highlightIndex.value);
+      const highlightedElement = selectModalRef.value?.children.item(highlightIndex.value);
       if (selectModalRef.value && highlightedElement) {
         selectModalRef.value.scrollTo({
           top: highlightedElement.offsetTop - 16,
@@ -4860,14 +4832,24 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
       }
     }
     function handleEnterPress(event) {
-      if (selectModalVisible.value) {
-        select(displayList.value[highlightIndex.value]);
+      const isMultiSelect = Array.isArray(selectResult.value);
+      if (selectModalVisible.value && (!isMultiSelect || highlightIndex.value !== -1 && isMultiSelect)) {
+        select(displayList.value[highlightIndex.value] ?? null);
         setSearchTerm("");
         event.target.focus();
+      } else if (props.allowFiltering && isMultiSelect && searchTerm.value.trim() !== "") {
+        const displayListExcludingDefaultValues = displayList.value.filter((d) => !isSelectItem(d) || isSelectItem(d) && d.id > -1);
+        if (displayListExcludingDefaultValues.length > 0) {
+          selectMultipleValues(displayListExcludingDefaultValues);
+          toggleSelectModalState(false);
+        }
       } else {
         toggleSelectModalState(true);
       }
     }
+    function selectMultipleValues(values) {
+      selectResult.value = values;
+    }
     function handleEscapePress(event) {
       toggleSelectModalState(false);
       if (props.openDropDownOnFocus) {
@@ -4905,12 +4887,11 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     }));
     let ignoreFocus = false;
     function focus() {
-      var _a;
       if (!ignoreFocus && props.openDropDownOnFocus) {
         toggleSelectModalState(true);
       }
       ignoreFocus = false;
-      (_a = inputElement.value) == null ? void 0 : _a.focus();
+      inputElement.value?.focus();
     }
     function disableKeyboardEventForSearching(fn) {
       return (...args) => {
@@ -4929,6 +4910,13 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     function ignoreFocusEvent() {
       ignoreFocus = true;
     }
+    function handleMouseClick(option2) {
+      select(option2);
+      highlightIndex.value = -1;
+    }
+    watch(searchTerm, () => {
+      highlightIndex.value = -1;
+    });
     __expose({
       focus
     });
@@ -4983,7 +4971,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
                         withKeys(withModifiers(moveHighlightForwards, ["prevent"]), ["down"]),
                         withKeys(withModifiers(moveHighlightToStart, ["prevent"]), ["home"]),
                         withKeys(withModifiers(moveHighlightToEnd, ["prevent"]), ["end"]),
-                        _cache[4] || (_cache[4] = withKeys(withModifiers(($event) => disableKeyboardEventForSearching(handleEnterPress), ["stop", "prevent"]), ["space"])),
+                        _cache[4] || (_cache[4] = withKeys(($event) => disableKeyboardEventForSearching(handleEnterPress), ["space"])),
                         withKeys(withModifiers(handleEnterPress, ["stop", "prevent"]), ["enter"])
                       ],
                       onInput: _cache[0] || (_cache[0] = ($event) => setSearchTerm($event.target.value)),
@@ -5014,7 +5002,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
                   "cl:absolute cl:border-t-0 cl:left-0 cl:rounded-t-none cl:top-8 cl:min-h-20 cl:max-h-56 cl:text-sm": !_ctx.isGridFilter && props.useListView === false,
                   "cl:max-h-28": props.useListView,
                   "cl:overflow-y-auto": _ctx.disabled === false,
-                  "cl:overflow-hidden": _ctx.disabled
+                  "cl:overflow-hidden": _ctx.disabled,
+                  "cl:text-grey-3": _ctx.readonly
                 }],
                 inert: _ctx.disabled,
                 onBlur: _cache[6] || (_cache[6] = ($event) => toggleSelectModalState(false)),
@@ -5032,25 +5021,26 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
                   _cache[8] || (_cache[8] = withKeys(withModifiers(($event) => select(displayList.value[highlightIndex.value]), ["stop", "prevent"]), ["enter"]))
                 ]
               }), [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(displayList.value, (option2, index2) => {
+                displayList.value.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(displayList.value, (option2, index2) => {
                   return openBlock(), createElementBlock("div", { key: index2 }, [
-                    renderSlot(_ctx.$slots, "default", mergeProps({ ref_for: true }, { option: option2, index: index2, select, highlightIndex: highlightIndex.value, isSelected }), () => [
+                    renderSlot(_ctx.$slots, "default", mergeProps({ ref_for: true }, { option: option2, index: index2, select: handleMouseClick, highlightIndex: highlightIndex.value, isSelected }), () => [
                       (openBlock(), createBlock(_component_cl_ui_select_option, {
                         id: unref(id) + "-option-" + (isSelectItem(option2) ? option2.id : index2),
                         key: index2,
                         disabled: _ctx.disabled,
                         "is-highlighted": highlightIndex.value === index2,
                         "is-selected": isSelected(option2),
-                        onSelect: ($event) => select(option2)
+                        readonly: _ctx.readonly,
+                        onSelect: ($event) => handleMouseClick(option2)
                       }, {
                         default: withCtx(() => [
                           createTextVNode(toDisplayString(isSelectItem(option2) ? option2.name : option2), 1)
                         ]),
                         _: 2
-                      }, 1032, ["id", "disabled", "is-highlighted", "is-selected", "onSelect"]))
+                      }, 1032, ["id", "disabled", "is-highlighted", "is-selected", "readonly", "onSelect"]))
                     ])
                   ]);
-                }), 128))
+                }), 128)) : (openBlock(), createElementBlock("span", _hoisted_3$i, toDisplayString(unref(t2)("select.notFound")), 1))
               ], 16, _hoisted_2$q)) : createCommentVNode("", true)
             ], 2)
           ]),
@@ -5073,20 +5063,23 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
   props: {
     isSelected: { type: Boolean, default: false },
     isHighlighted: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false }
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false }
   },
   emits: ["select"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["cl:px-2 cl:py-0.5", _ctx.disabled ? "cl:bg-grey-1 cl:border-grey-2 cl:placeholder-grey-3" : ["cl:cursor-pointer", {
-          "cl:bg-primary-lighter cl:hover:bg-primary-default": _ctx.isSelected && _ctx.isHighlighted === false,
+        class: normalizeClass(["cl:px-2 cl:py-0.5", _ctx.disabled ? "cl:bg-grey-1 cl:border-grey-2 cl:placeholder-grey-3" : {
+          "cl:cursor-pointer": _ctx.readonly === false,
+          "cl:bg-primary-lighter": _ctx.isSelected && _ctx.isHighlighted === false,
+          "cl:hover:bg-primary-default": _ctx.readonly === false && _ctx.isSelected && _ctx.isHighlighted === false,
           "cl:bg-primary-default": _ctx.isSelected && _ctx.isHighlighted,
-          "cl:hover:bg-link-lighter": _ctx.isSelected === false && _ctx.isHighlighted === false,
+          "cl:hover:bg-link-lighter": _ctx.readonly === false && _ctx.isSelected === false && _ctx.isHighlighted === false,
           "cl:bg-link-lighter": _ctx.isSelected === false && _ctx.isHighlighted
-        }]]),
-        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.disabled ? null : emit("select"))
+        }]),
+        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.readonly || _ctx.disabled ? null : emit("select"))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 2);
@@ -5260,15 +5253,11 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
       return methods;
     });
     const currentFilterMethod = computed(() => {
-      var _a;
-      let filterMethod = (_a = props.filter) == null ? void 0 : _a.filterMethod;
+      let filterMethod = props.filter?.filterMethod;
       if (typeof filterMethod === "undefined") {
         filterMethod = FilterOperation[props.defaultOperation].replace("_", "").toLowerCase();
       }
-      return allowedFilterMethods.value.find((m) => {
-        var _a2;
-        return m.method.toLowerCase() === ((_a2 = filterMethod == null ? void 0 : filterMethod.removeNonAlphanumeric()) == null ? void 0 : _a2.toLowerCase());
-      });
+      return allowedFilterMethods.value.find((m) => m.method.toLowerCase() === filterMethod?.removeNonAlphanumeric()?.toLowerCase());
     });
     function setFilterMethod(filterMethod) {
       let filterOutput;
@@ -5315,11 +5304,10 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
         }, [
           createElementVNode("strong", _hoisted_2$p, toDisplayString(unref(t2)("grid.availableMethods")), 1),
           (openBlock(true), createElementBlock(Fragment, null, renderList(allowedFilterMethods.value, (filterMethod, index2) => {
-            var _a;
             return openBlock(), createElementBlock("span", {
               key: index2,
               class: normalizeClass(["cl:cursor-pointer cl:hover:bg-grey-0 cl:px-4 cl:py-1 cl:transition-colors cl:w-full", {
-                "cl:bg-primary-default cl:opacity-80": filterMethod.method === ((_a = currentFilterMethod.value) == null ? void 0 : _a.method)
+                "cl:bg-primary-default cl:opacity-80": filterMethod.method === currentFilterMethod.value?.method
               }]),
               onClick: withModifiers(($event) => setFilterMethod(filterMethod.method), ["prevent"])
             }, [
@@ -5340,11 +5328,16 @@ const defaultEmptyListValue = {
   name: "",
   value: ""
 };
-const defaultSelectAllListValue = {
+const defaultSelectAllListValue = computed(() => ({
   id: -2,
   name: i18n.global.t("grid.selectAll"),
   value: ""
-};
+}));
+const defaultClearAllListValue = computed(() => ({
+  id: -3,
+  name: i18n.global.t("grid.clearAll"),
+  value: ""
+}));
 const booleanListEntries = computed(() => [
   defaultEmptyListValue,
   {
@@ -5403,31 +5396,38 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     const numericFormat = computed(() => props.column.format === NumberFormat.INTEGER ? NumberFormat.DECIMAL : props.column.format ?? NumberFormat.DECIMAL);
     const booleanValueAsSelectItem = computed(() => booleanListEntries.value.find((x) => x.value === currentFilterValue.value.toString()) ?? null);
     const listEntriesAsSelectItems = computed(() => {
-      var _a;
+      const baseItems = [
+        props.column.listMode === "multi" ? defaultSelectAllListValue.value : defaultEmptyListValue,
+        ...props.column.listMode === "multi" && props.filter?.length && props.filter.length > 0 ? [defaultClearAllListValue.value] : []
+      ];
+      const selectedFilterValues = props.filter?.filter((f) => f.filterOperation === FilterOperation.OR_EQUAL).map((f) => f.filterValue) ?? [];
+      const allListEntries = props.column.listEntries?.map((x, i) => ({
+        id: i,
+        name: t2(x.translationKey),
+        value: x.value.toString()
+      })) ?? [];
+      const selectedListEntries = allListEntries.filter((entry) => selectedFilterValues.includes(entry.value));
+      const unselectedListEntries = allListEntries.filter((entry) => !selectedFilterValues.includes(entry.value));
       return [
-        props.column.listMode === "multi" ? defaultSelectAllListValue : defaultEmptyListValue,
-        ...((_a = props.column.listEntries) == null ? void 0 : _a.map((x, i) => ({
-          id: i,
-          name: t2(x.translationKey),
-          value: x.value.toString()
-        }))) ?? []
+        ...baseItems,
+        ...selectedListEntries,
+        ...unselectedListEntries
       ];
     });
     const currentFilterValueAsSelectItems = computed(() => {
-      var _a, _b;
       if (props.column.listMode !== "multi") {
         const item = listEntriesAsSelectItems.value.find((x) => x.value === currentFilterValue.value && x.id === selectedListEntryId.value) ?? listEntriesAsSelectItems.value.find((x) => x.value === currentFilterValue.value) ?? null;
         return item ? item : null;
       } else {
-        const filters = (_a = props.filter) == null ? void 0 : _a.filter((f) => f.filterOperation === FilterOperation.OR_EQUAL).map((f) => f.filterValue);
-        const filteredListEntries = listEntriesAsSelectItems.value.filter((x) => filters == null ? void 0 : filters.includes(x.value));
-        if (filteredListEntries.length === ((_b = props.column.listEntries) == null ? void 0 : _b.length)) {
-          filteredListEntries.push(defaultSelectAllListValue);
+        const filters = props.filter?.filter((f) => f.filterOperation === FilterOperation.OR_EQUAL).map((f) => f.filterValue);
+        const filteredListEntries = listEntriesAsSelectItems.value.filter((x) => filters?.includes(x.value));
+        if (filteredListEntries.length === props.column.listEntries?.length) {
+          filteredListEntries.push(defaultSelectAllListValue.value);
         }
         return filteredListEntries;
       }
     });
-    const selectAllCurrentlyHighlighted = computed(() => Array.isArray(currentFilterValueAsSelectItems.value) && currentFilterValueAsSelectItems.value.some((x) => x.id === defaultSelectAllListValue.id));
+    const selectAllCurrentlyHighlighted = computed(() => Array.isArray(currentFilterValueAsSelectItems.value) && currentFilterValueAsSelectItems.value.some((x) => x.id === defaultSelectAllListValue.value.id));
     const selectedListEntryId = ref(defaultEmptyListValue.id);
     function updateListColumnSelectItems(value) {
       if (value && !Array.isArray(value)) {
@@ -5437,22 +5437,21 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         return;
       }
       if (isNumericListColumn.value) {
-        setNumberFilter(null, value == null ? void 0 : value.value);
+        setNumberFilter(null, value?.value);
       } else {
-        setFilter(null, value == null ? void 0 : value.value);
+        setFilter(null, value?.value);
       }
     }
     const immediateRequestOverride = ref(false);
     const performImmediateRequest = computed(() => immediateRequestOverride.value || isStringColumn.value === false);
     const internalFilter = computed({
       get() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        let result = (_a = currentFilters.value) == null ? void 0 : _a[0];
+        let result = currentFilters.value?.[0];
         if (result) {
           if (isDateColumn.value) {
-            if ((((_b = props.filter) == null ? void 0 : _b.length) ?? 0) > 1) {
-              const startFilter = (_c = currentFilters.value) == null ? void 0 : _c.find((f) => f.filterOperation === FilterOperation.EQUAL_OR_GREATER_THAN);
-              const endFilter = (_d = currentFilters.value) == null ? void 0 : _d.find((f) => f.filterOperation === FilterOperation.LESS_THAN);
+            if ((props.filter?.length ?? 0) > 1) {
+              const startFilter = currentFilters.value?.find((f) => f.filterOperation === FilterOperation.EQUAL_OR_GREATER_THAN);
+              const endFilter = currentFilters.value?.find((f) => f.filterOperation === FilterOperation.LESS_THAN);
               if (startFilter && endFilter) {
                 result = {
                   filterOnColumn: props.column.field,
@@ -5477,9 +5476,9 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
                 filterValue: date.plus({ milliseconds: 1 }).toISO() ?? ""
               };
             }
-          } else if (isDateRangeColumn.value && (((_e = props.filter) == null ? void 0 : _e.length) ?? 0) > 1) {
-            const startFilter = (_f = currentFilters.value) == null ? void 0 : _f.find((f) => f.filterOperation === FilterOperation.EQUAL_OR_GREATER_THAN);
-            const endFilter = (_g = currentFilters.value) == null ? void 0 : _g.find((f) => f.filterOperation === FilterOperation.EQUAL_OR_LESS_THAN);
+          } else if (isDateRangeColumn.value && (props.filter?.length ?? 0) > 1) {
+            const startFilter = currentFilters.value?.find((f) => f.filterOperation === FilterOperation.EQUAL_OR_GREATER_THAN);
+            const endFilter = currentFilters.value?.find((f) => f.filterOperation === FilterOperation.EQUAL_OR_LESS_THAN);
             if (startFilter && endFilter) {
               result = {
                 filterOnColumn: props.column.field,
@@ -5499,9 +5498,9 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         let filters = null;
         if (isDateColumn.value) {
           const dateFilter = value;
-          const equalsFilter = (dateFilter == null ? void 0 : dateFilter.filterMethod) && checkDateFilter(dateFilter.filterMethod, dateFilter.filterValue, "equal");
-          const lessThanOrEqualFilter = (dateFilter == null ? void 0 : dateFilter.filterMethod) && checkDateFilter(dateFilter.filterMethod, dateFilter.filterValue, "equalorlessthan");
-          const greaterThanFilter = (dateFilter == null ? void 0 : dateFilter.filterMethod) && checkDateFilter(dateFilter.filterMethod, dateFilter.filterValue, "greaterthan");
+          const equalsFilter = dateFilter?.filterMethod && checkDateFilter(dateFilter.filterMethod, dateFilter.filterValue, "equal");
+          const lessThanOrEqualFilter = dateFilter?.filterMethod && checkDateFilter(dateFilter.filterMethod, dateFilter.filterValue, "equalorlessthan");
+          const greaterThanFilter = dateFilter?.filterMethod && checkDateFilter(dateFilter.filterMethod, dateFilter.filterValue, "greaterthan");
           if (equalsFilter) {
             let date = DateTime.fromISO(dateFilter.filterValue, {
               zone: props.timeZone ?? "UTC"
@@ -5551,7 +5550,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
               }
             ];
           }
-        } else if (isDateRangeColumn.value && (value == null ? void 0 : value.filterValue)) {
+        } else if (isDateRangeColumn.value && value?.filterValue) {
           const dateRange = value.filterValue;
           const startDate = DateTime.fromISO(dateRange.start, {
             zone: props.timeZone ?? "UTC"
@@ -5587,7 +5586,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
             }
           }
         }
-        if ((value == null ? void 0 : value.filterValue) === "" || performImmediateRequest.value) {
+        if (value?.filterValue === "" || performImmediateRequest.value) {
           updateFilterDebounced(false);
           currentFilters.value = filters;
           immediateRequestOverride.value = false;
@@ -5600,7 +5599,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       if (filtersOrCancel !== false) {
         currentFilters.value = filtersOrCancel;
       }
-    }, 1e3);
+    }, 3e3);
     const currentFilter = computed({
       get: () => internalFilter.value,
       set(value) {
@@ -5612,17 +5611,15 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       const isEqualFilter = operation === expectedOperation;
       return isValidValue && isEqualFilter && isDateColumn.value;
     }
-    const currentFilterValue = computed(() => {
-      var _a;
-      return ((_a = internalFilter.value) == null ? void 0 : _a.filterValue) ?? "";
-    });
+    const currentFilterValue = computed(() => internalFilter.value?.filterValue ?? "");
     const currentDateFilterValue = computed(() => currentFilterValue.value === "" ? null : currentFilterValue.value);
     const currentDateRangeFilterValue = computed(() => currentFilterValue.value === "" ? null : currentFilterValue.value);
     const filterable = computed(() => isFilterable(props.column));
     function setOrEqualFilters(value) {
-      const selectAllCurrentlySelected = value.some((x) => x.id === defaultSelectAllListValue.id);
-      if (value.length === 0 || selectAllCurrentlySelected === false && selectAllCurrentlyHighlighted.value) {
-        setOrEqualFiltersImpl([defaultSelectAllListValue.value]);
+      const selectAllCurrentlySelected = value.some((x) => x.id === defaultSelectAllListValue.value.id);
+      const clearAllCurrentlySelected = value.some((x) => x.id === defaultClearAllListValue.value.id);
+      if (value.length === 0 || selectAllCurrentlySelected === false && selectAllCurrentlyHighlighted.value || clearAllCurrentlySelected) {
+        setOrEqualFiltersImpl([defaultSelectAllListValue.value.value]);
       } else if (selectAllCurrentlySelected && selectAllCurrentlyHighlighted.value === false) {
         setOrEqualFiltersImpl(listEntriesAsSelectItems.value.map((x) => x.value));
       } else {
@@ -5638,15 +5635,17 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       }
     }
     function setFilter(target, defaultValue) {
-      var _a;
       let filterOutput;
       let nextValue = defaultValue;
-      const previousValue = ((_a = internalFilter.value) == null ? void 0 : _a.filterValue.toString()) ?? "";
+      const previousValue = internalFilter.value?.filterValue.toString() ?? "";
       const hasNextValue = !!nextValue.trim();
       const hasPreviousValue = !!previousValue.trim();
       if (hasNextValue === false && hasPreviousValue) {
         nextValue = "";
       }
+      if (nextValue === previousValue) {
+        return;
+      }
       const updateFilter = hasNextValue || hasPreviousValue;
       if (updateFilter) {
         if (internalFilter.value) {
@@ -5679,11 +5678,10 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       setFilter(null, isNaN(inputValue) ? "" : inputValue.toString());
     }
     function setDateRangeFilter(value) {
-      var _a;
       let filterOutput;
       let preventEmit = false;
       if (internalFilter.value) {
-        preventEmit = ((_a = internalFilter.value) == null ? void 0 : _a.filterValue) === value;
+        preventEmit = internalFilter.value?.filterValue === value;
         filterOutput = copy(internalFilter.value);
         filterOutput.filterValue = value ?? "";
       } else if (value !== null && typeof props.column.field !== "undefined") {
@@ -5709,6 +5707,14 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         setFilter(null, internalTextInputValue.value);
       }
     }
+    function handleStringInputBlur(e) {
+      const target = e.relatedTarget;
+      if (target && target.closest("[clear-filters-button]")) {
+        return;
+      }
+      immediateRequestOverride.value = true;
+      setFilter(null, internalTextInputValue.value);
+    }
     watch(() => currentFilterValue.value, () => {
       internalTextInputValue.value = currentFilterValue.value;
     }, {
@@ -5726,8 +5732,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     });
     const gridId = inject("cl-ui-grid-id") ?? "cl-ui-grid-filter";
     watch(() => props.filter, () => {
-      var _a;
-      if (((_a = props.filter) == null ? void 0 : _a.length) === 0) {
+      if (props.filter?.length === 0) {
         selectedListEntryId.value = defaultEmptyListValue.id;
       }
     });
@@ -5746,7 +5751,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           class: "cl:bg-white cl:font-normal cl:min-h-0! cl:rounded-lg!",
           "model-value": booleanValueAsSelectItem.value,
           inert: _ctx.loading,
-          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => setFilter(null, ($event == null ? void 0 : $event.value) ?? ""))
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => setFilter(null, $event?.value ?? ""))
         }, {
           default: withCtx(({ select, option: option2, index: index2, highlightIndex, isSelected }) => [
             createVNode(_sfc_main$I, {
@@ -5771,6 +5776,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
             class: "cl:border-none cl:h-[2rem]! cl:lg:text-base! cl:mb-0 cl:pb-1 cl:text-xs cl:w-full readonly-filter",
             readonly: _ctx.loading,
             "popover-placement": "bottom-start",
+            placeholder: "",
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => setFilter(null, $event ?? ""))
           }, null, 8, ["id", "model-value", "time-zone", "type", "readonly"])
         ])) : isDateRangeColumn.value ? (openBlock(), createElementBlock("div", {
@@ -5800,9 +5806,9 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
             "allow-empty": true,
             "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => $event !== null ? setNumberFilter(null, $event) : setFilter(null, ""))
           }, {
-            default: withCtx(() => _cache[9] || (_cache[9] = [
+            default: withCtx(() => [..._cache[10] || (_cache[10] = [
               createElementVNode("span", null, null, -1)
-            ])),
+            ])]),
             _: 1
           }, 8, ["id", "model-value", "format", "precision", "readonly"])
         ])) : _ctx.column.type === "string" || _ctx.column.type === "slot" && _ctx.column.slotType === "string" ? (openBlock(), createElementBlock("div", _hoisted_4$d, [
@@ -5815,11 +5821,12 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
             ],
             class: "cl:border-none cl:font-normal cl:h-[2rem] cl:lg:text-base cl:px-3 cl:text-xs readonly-filter",
             readonly: _ctx.loading,
-            onKeySinglePress: handleKeySinglePress
+            onKeySinglePress: handleKeySinglePress,
+            onBlur: _cache[6] || (_cache[6] = ($event) => handleStringInputBlur($event))
           }, {
-            default: withCtx(() => _cache[10] || (_cache[10] = [
+            default: withCtx(() => [..._cache[11] || (_cache[11] = [
               createElementVNode("span", null, null, -1)
-            ])),
+            ])]),
             _: 1
           }, 8, ["id", "modelValue", "readonly"])
         ])) : isListColumn.value ? (openBlock(), createBlock(_sfc_main$J, {
@@ -5833,8 +5840,8 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           placeholder: selectAllCurrentlyHighlighted.value ? unref(t2)("grid.allEntriesSelected") : void 0,
           class: "cl:bg-white cl:font-normal! cl:max-h-52! cl:min-h-0! cl:placeholder:text-xs cl:rounded-lg! cl:text-xs",
           "is-grid-filter": true,
-          inert: _ctx.loading,
-          "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => updateListColumnSelectItems($event))
+          readonly: _ctx.loading,
+          "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => updateListColumnSelectItems($event))
         }, {
           default: withCtx(({ select, option: option2, index: index2, highlightIndex, isSelected }) => [
             createVNode(_sfc_main$I, {
@@ -5853,22 +5860,22 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
             }, 1032, ["is-highlighted", "is-selected", "class", "onSelect"])
           ]),
           _: 1
-        }, 8, ["id", "list", "model-value", "can-clear", "placeholder", "inert"])) : createCommentVNode("", true),
+        }, 8, ["id", "list", "model-value", "can-clear", "placeholder", "readonly"])) : createCommentVNode("", true),
         !isDateRangeColumn.value ? (openBlock(), createBlock(_sfc_main$H, {
           key: 6,
           filter: currentFilter.value,
-          "onUpdate:filter": _cache[7] || (_cache[7] = ($event) => currentFilter.value = $event),
+          "onUpdate:filter": _cache[8] || (_cache[8] = ($event) => currentFilter.value = $event),
           loading: _ctx.loading,
           column: _ctx.column,
           "default-operation": getDefaultFilterOperation(),
           "dropdown-position": _ctx.filterDropdownPosition,
-          onSelectionChanged: _cache[8] || (_cache[8] = ($event) => immediateRequestOverride.value = true)
+          onSelectionChanged: _cache[9] || (_cache[9] = ($event) => immediateRequestOverride.value = true)
         }, null, 8, ["filter", "loading", "column", "default-operation", "dropdown-position"])) : createCommentVNode("", true)
       ], 2)) : createCommentVNode("", true);
     };
   }
 });
-const clUiGridFilterInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-4bb0f963"]]);
+const clUiGridFilterInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-c5ef8bbf"]]);
 const _hoisted_1$y = { key: 1 };
 const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "cl-ui-grid-filter",
@@ -5963,8 +5970,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       }));
     });
     function isActiveSort(column, isAscending) {
-      var _a, _b;
-      return ((_a = currentRequest.value.sort) == null ? void 0 : _a.sortOnColumn) === column.field && ((_b = currentRequest.value.sort) == null ? void 0 : _b.sortByAscending) === isAscending;
+      return currentRequest.value.sort?.sortOnColumn === column.field && currentRequest.value.sort?.sortByAscending === isAscending;
     }
     function setSort(field) {
       if (typeof field !== "undefined") {
@@ -6040,12 +6046,12 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
               currentHandle = handle;
               const rect = currentHandle.getBoundingClientRect();
               const table = currentHandle.closest("table");
-              const tableRect = table == null ? void 0 : table.getBoundingClientRect();
+              const tableRect = table?.getBoundingClientRect();
               const th = currentHandle.closest("th");
-              const thRect = th == null ? void 0 : th.getBoundingClientRect();
-              initialWidth = (thRect == null ? void 0 : thRect.width) ?? 0;
+              const thRect = th?.getBoundingClientRect();
+              initialWidth = thRect?.width ?? 0;
               rightResizeBarPosition.value = index2 === visibleColumns.value.length - 1 ? rect.right : rect.right - 5;
-              leftResizeBarPosition.value = (thRect == null ? void 0 : thRect.left) ?? 0;
+              leftResizeBarPosition.value = thRect?.left ?? 0;
               if (tableRect) {
                 resizeBarTop.value = tableRect.top;
                 resizeBarHeight.value = tableRect.height;
@@ -6071,8 +6077,11 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
         }
       });
     }
+    const isFineTouchDevice = computed(() => {
+      return window.matchMedia("(pointer: coarse)").matches === false;
+    });
     const shouldEnableGlobalResizing = computed(() => {
-      return props.options.allowColumnResizing !== false && !isTouchDevice();
+      return props.options.allowColumnResizing !== false && isFineTouchDevice.value;
     });
     const columnsWithResizing = computed(() => {
       return visibleColumns.value.map((column) => ({
@@ -6095,7 +6104,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createElementVNode("thead", {
-          class: normalizeClass(["cl:-top-1 cl:bg-white cl:z-20", [
+          class: normalizeClass(["cl:-top-1 cl:bg-white cl:z-20 touch-none", [
             _ctx.options.hideGridMobileView ? "cl:relative" : "cl:shadow cl:sticky cl:lg:bg-transparent cl:lg:relative cl:lg:shadow-none"
           ]])
         }, [
@@ -6210,7 +6219,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
                     };
                   })
                 ]), 1032, ["loading", "initial-load", "bulk-edit-mode", "filter", "column", "time-zone", "quick-date-scope", "header-display-timezone", "options", "filter-dropdown-position"]),
-                !unref(isTouchDevice)() && _ctx.options.allowColumnResizing ? (openBlock(), createElementBlock("div", {
+                _ctx.options.allowColumnResizing && isFineTouchDevice.value ? (openBlock(), createElementBlock("div", {
                   key: 1,
                   id: `resize-handle-${columnIndex}`,
                   ref_for: true,
@@ -6282,20 +6291,18 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
         ...currentRequest.value,
         filters
       };
+      gridSearchInputRef.value?.focus();
     }
     watch(() => props.columns, () => performSearch(searchValue.value));
     const debouncedSearch = useDebounceFn((valueOrCancel) => {
       if (valueOrCancel !== false) {
         performSearch(valueOrCancel);
       }
-    }, 2e3);
+    }, 3e3);
     const { t: t2 } = useI18n();
     const gridSearchInputRef = ref();
     __expose({
-      focusMegaSearch: () => {
-        var _a;
-        return (_a = gridSearchInputRef.value) == null ? void 0 : _a.focus();
-      }
+      focusMegaSearch: () => gridSearchInputRef.value?.focus()
     });
     return (_ctx, _cache) => {
       const _component_icon = resolveComponent("icon");
@@ -6316,9 +6323,9 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
               placeholder: _ctx.columns.length > 4 ? unref(t2)("grid.search") : unref(t2)("grid.searchSpecific", { columns: _ctx.columns.map((c) => unref(t2)(c.caption)).join(", ") }),
               onKeypress: _cache[2] || (_cache[2] = withKeys(($event) => performSearch(searchValue.value), ["enter"]))
             }, {
-              default: withCtx(() => _cache[4] || (_cache[4] = [
+              default: withCtx(() => [..._cache[4] || (_cache[4] = [
                 createElementVNode("span", null, null, -1)
-              ])),
+              ])]),
               _: 1
             }, 8, ["modelValue", "readonly", "placeholder"])
           ]),
@@ -7033,7 +7040,7 @@ function _dispatchEvent(info) {
   }, info));
 }
 var dragEl, parentEl, ghostEl, rootEl, nextEl, lastDownEl, cloneEl, cloneHidden, oldIndex, newIndex, oldDraggableIndex, newDraggableIndex, activeGroup, putSortable, awaitingDragStarted = false, ignoreNextClick = false, sortables = [], tapEvt, touchEvt, lastDx, lastDy, tapDistanceLeft, tapDistanceTop, moved, lastTarget, lastDirection, pastFirstInvertThresh = false, isCircumstantialInvert = false, targetMoveDistance, ghostRelativeParent, ghostRelativeParentInitialScroll = [], _silent = false, savedInputChecked = [];
-var documentExists = typeof document !== "undefined", PositionGhostAbsolutely = IOS, CSSFloatProperty = Edge || IE11OrLess ? "cssFloat" : "float", supportDraggable = documentExists && !ChromeForAndroid && !IOS && "draggable" in document.createElement("div"), supportCssPointerEvents = function() {
+var documentExists = typeof document !== "undefined", PositionGhostAbsolutely = IOS, CSSFloatProperty = Edge || IE11OrLess ? "cssFloat" : "float", supportDraggable = documentExists && !ChromeForAndroid && !IOS && "draggable" in document.createElement("div"), supportCssPointerEvents = (function() {
   if (!documentExists) return;
   if (IE11OrLess) {
     return false;
@@ -7041,7 +7048,7 @@ var documentExists = typeof document !== "undefined", PositionGhostAbsolutely =
   var el = document.createElement("x");
   el.style.cssText = "pointer-events:auto";
   return el.style.pointerEvents === "auto";
-}(), _detectDirection = function _detectDirection2(el, options) {
+})(), _detectDirection = function _detectDirection2(el, options) {
   var elCSS = css(el), elWidth = parseInt(elCSS.width) - parseInt(elCSS.paddingLeft) - parseInt(elCSS.paddingRight) - parseInt(elCSS.borderLeftWidth) - parseInt(elCSS.borderRightWidth), child1 = getChild(el, 0, options), child2 = getChild(el, 1, options), firstChildCSS = child1 && css(child1), secondChildCSS = child2 && css(child2), firstChildWidth = firstChildCSS && parseInt(firstChildCSS.marginLeft) + parseInt(firstChildCSS.marginRight) + getRect(child1).width, secondChildWidth = secondChildCSS && parseInt(secondChildCSS.marginLeft) + parseInt(secondChildCSS.marginRight) + getRect(child2).width;
   if (elCSS.display === "flex") {
     return elCSS.flexDirection === "column" || elCSS.flexDirection === "column-reverse" ? "vertical" : "horizontal";
@@ -8715,7 +8722,6 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
   }),
   emits: /* @__PURE__ */ mergeModels(["update:columns", "update:request", "data-request", "row-edit", "row-edit-cancelled", "edit-start", "edit-end", "row-select", "view-manager-visible", "clear-filters-clicked"], ["update:selectedRowIndex"]),
   setup(__props, { expose: __expose, emit: __emit }) {
-    var _a;
     const props = __props;
     const selectedRowIndex = useModel(__props, "selectedRowIndex");
     const emit = __emit;
@@ -8764,9 +8770,8 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       return width;
     }
     function setColumnStyles() {
-      var _a2;
       const result = {};
-      if (window.innerWidth >= 1024 || ((_a2 = props.options) == null ? void 0 : _a2.hideGridMobileView)) {
+      if (window.innerWidth >= 1024 || props.options?.hideGridMobileView) {
         currentColumns.value.forEach((c) => {
           const value = c.customWidth ? `${c.customWidth}px` : c.width ? `${c.width}px` : "";
           result[`${c.name}`] = `width: ${value}; min-width: ${value};`;
@@ -8777,11 +8782,11 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     function getStyleForColumn(name) {
       return columnStyles.value[name] ?? "";
     }
-    function shouldSetBlankColumn() {
+    const shouldSetBlankColumn = computed(() => {
       const columnWithNoWidthSet = visibleColumns.value.every((x) => x.width !== void 0 || x.customWidth !== void 0);
       const columnWidthDoesNotExceedGridWidth = visibleColumns.value.reduce((acc, x) => acc + (x.customWidth ?? x.width ?? 0), 0) < getGridWidth();
       return columnWithNoWidthSet && columnWidthDoesNotExceedGridWidth;
-    }
+    });
     const currentRequest = computed({
       get: () => props.request,
       set: (value) => emit("update:request", value)
@@ -8795,12 +8800,11 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       emit("clear-filters-clicked");
     }
     function resetGrouping() {
-      var _a2;
       if (gridOptions.value.groupByField) {
         currentRequest.value = {
           ...currentRequest.value,
           sort: {
-            sortByAscending: ((_a2 = props.request.sort) == null ? void 0 : _a2.sortByAscending) ?? false,
+            sortByAscending: props.request.sort?.sortByAscending ?? false,
             sortOnColumn: gridOptions.value.groupByField
           }
         };
@@ -8819,7 +8823,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
       immediate: true
     });
     const gridData = computed(() => props.data);
-    const internalEditMode = ref(false);
+    const internalEditMode = ref(props.options.forceEditMode ?? false);
     const editMode = computed({
       get: () => props.options.forceEditMode || internalEditMode.value,
       set(value) {
@@ -8851,7 +8855,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
         };
       }
     });
-    const searchValue = ref(((_a = props.request.filters.find((f) => f.filterMethod === "andcontains" || f.filterOperation === FilterOperation.AND_CONTAINS)) == null ? void 0 : _a.filterValue) ?? "");
+    const searchValue = ref(props.request.filters.find((f) => f.filterMethod === "andcontains" || f.filterOperation === FilterOperation.AND_CONTAINS)?.filterValue ?? "");
     const searchableColumns = computed(() => props.columns.filter((c) => (c.type === "string" || c.type === "slot" && c.slotType === "string") && c.searchable));
     watch(() => props.loading, () => {
       isInitialLoad.value = false;
@@ -8866,29 +8870,20 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     watch(() => props.data, () => {
       setPageNumberIfPageNumberExceedsAvailablePages();
       function setPageNumberIfPageNumberExceedsAvailablePages() {
-        var _a2;
-        if (((_a2 = props.data) == null ? void 0 : _a2.results.length) === 0 && currentRequest.value.pageNumber > 1) {
+        if (props.data?.results.length === 0 && currentRequest.value.pageNumber > 1) {
           currentRequest.value.pageNumber = props.data.totalRecords > 0 ? Math.ceil(props.data.totalRecords / currentRequest.value.pageSize) : 1;
         }
       }
     });
     function changeColumnWidth(columnIndex, newWidth) {
-      if (visibleColumns.value[columnIndex].width && visibleColumns.value[columnIndex].width < newWidth) {
-        visibleColumns.value[columnIndex].customWidth = newWidth;
-      } else if (visibleColumns.value[columnIndex].width && visibleColumns.value[columnIndex].width > newWidth) {
-        visibleColumns.value[columnIndex].customWidth = void 0;
-      } else {
-        visibleColumns.value[columnIndex].customWidth = newWidth;
-      }
+      visibleColumns.value[columnIndex].customWidth = newWidth;
       setColumnStyles();
     }
     watch(() => props.options.groupByField, resetGrouping, { immediate: true });
+    watch(() => props.columns, setColumnStyles, { deep: true });
     const gridSearchRef = ref();
     __expose({
-      focusMegaSearch: () => {
-        var _a2;
-        return (_a2 = gridSearchRef.value) == null ? void 0 : _a2.focusMegaSearch();
-      }
+      focusMegaSearch: () => gridSearchRef.value?.focusMegaSearch()
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$u, [
@@ -8964,7 +8959,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
                   span: 1
                 }, null, 4);
               }), 128)),
-              shouldSetBlankColumn() ? (openBlock(), createElementBlock("col", _hoisted_4$a)) : createCommentVNode("", true)
+              shouldSetBlankColumn.value ? (openBlock(), createElementBlock("col", _hoisted_4$a)) : createCommentVNode("", true)
             ], 2),
             createVNode(_sfc_main$E, {
               request: headerRequest.value,
@@ -9184,8 +9179,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     const request = useModel(__props, "request");
     const { t: t2 } = useI18n();
     function isActiveSort(column, isAscending) {
-      var _a, _b;
-      return ((_a = request.value.sort) == null ? void 0 : _a.sortOnColumn) === column.field && ((_b = request.value.sort) == null ? void 0 : _b.sortByAscending) === isAscending;
+      return request.value.sort?.sortOnColumn === column.field && request.value.sort?.sortByAscending === isAscending;
     }
     function setSort(field) {
       if (typeof field !== "undefined") {
@@ -9341,13 +9335,12 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     const isSmallGrid = computed(() => props.options.smallGridText ?? false);
     const isAlternatingRows = computed(() => props.options.alternatingRows ?? false);
     return (_ctx, _cache) => {
-      var _a;
       return openBlock(), createElementBlock("div", _hoisted_1$q, [
         _ctx.initialLoad && _ctx.pageSize > 0 ? (openBlock(), createBlock(_sfc_main$y, {
           key: 0,
           "page-size": _ctx.pageSize,
           "column-count": _ctx.columns.length
-        }, null, 8, ["page-size", "column-count"])) : (((_a = _ctx.data) == null ? void 0 : _a.results.length) ?? 0) < 1 && _ctx.initialLoad === false ? (openBlock(), createElementBlock("div", {
+        }, null, 8, ["page-size", "column-count"])) : (_ctx.data?.results.length ?? 0) < 1 && _ctx.initialLoad === false ? (openBlock(), createElementBlock("div", {
           key: 1,
           class: normalizeClass(["cl:col-[1_/_-1] cl:text-center cl:w-full", [
             isSmallGrid.value ? "cl:p-1" : "cl:p-2"
@@ -9414,11 +9407,11 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
       let date;
       if (props.timeZone) {
         date = DateTime.fromISO(value, {
-          locale: (dateFormatLocaleOverride == null ? void 0 : dateFormatLocaleOverride.value) ?? locale2.value
+          locale: dateFormatLocaleOverride?.value ?? locale2.value
         }).setZone(props.timeZone);
       } else {
         date = DateTime.fromISO(value, {
-          locale: (dateFormatLocaleOverride == null ? void 0 : dateFormatLocaleOverride.value) ?? locale2.value,
+          locale: dateFormatLocaleOverride?.value ?? locale2.value,
           zone: "UTC"
         });
       }
@@ -9479,7 +9472,6 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
       }
     }
     return (_ctx, _cache) => {
-      var _a;
       return openBlock(), createElementBlock("div", mergeProps({
         class: [
           _ctx.isSmallGrid ? "cl:px-1 cl:py-1.5 cl:text-xs" : "cl:p-2 cl:text-sm"
@@ -9506,7 +9498,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
           key: 3,
           id: unref(id),
           class: "cl:inline-block cl:whitespace-nowrap"
-        }, toDisplayString(unref(t2)(((_a = _ctx.column.listEntries.find((entry) => entry.value === _ctx.data[_ctx.column.field])) == null ? void 0 : _a.translationKey) ?? "")), 9, _hoisted_2$h)) : _ctx.column.type === "number" && _ctx.column.field !== void 0 ? (openBlock(), createElementBlock("span", {
+        }, toDisplayString(unref(t2)(_ctx.column.listEntries.find((entry) => entry.value === _ctx.data[_ctx.column.field])?.translationKey ?? "")), 9, _hoisted_2$h)) : _ctx.column.type === "number" && _ctx.column.field !== void 0 ? (openBlock(), createElementBlock("span", {
           key: 4,
           id: unref(id),
           class: "cl:inline-block cl:whitespace-nowrap"
@@ -9523,13 +9515,13 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
 const _sfc_main$u = {};
 const _hoisted_1$o = { class: "cl:border cl:border-off-white cl:border-t cl:flex cl:justify-between cl:p-2" };
 function _sfc_render$2(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$o, _cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("div", _hoisted_1$o, [..._cache[0] || (_cache[0] = [
     createElementVNode("div", { class: "cl:flex cl:gap-2 cl:w-full" }, [
       createElementVNode("p", { class: "cl:animate-pulse cl:basis-3/12 cl:bg-grey-1 cl:leading-none cl:rounded-full" }, "   "),
       createElementVNode("p", { class: "cl:animate-pulse cl:basis-1/12 cl:bg-grey-1 cl:leading-none cl:rounded-full" }, "   ")
     ], -1),
     createElementVNode("p", { class: "cl:animate-pulse cl:basis-1/12 cl:bg-grey-1 cl:leading-none cl:rounded-full" }, "   ", -1)
-  ]));
+  ])]);
 }
 const clUiGridLiteFooterSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render$2]]);
 const _hoisted_1$n = { class: "cl:flex cl:gap-4" };
@@ -9562,10 +9554,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     const props = __props;
     const request = useModel(__props, "request");
     const { t: t2 } = useI18n();
-    const totalPages = computed(() => {
-      var _a;
-      return props.data !== null ? Math.ceil((((_a = props.data) == null ? void 0 : _a.totalRecords) ?? 0) / request.value.pageSize) : 1;
-    });
+    const totalPages = computed(() => props.data !== null ? Math.ceil((props.data?.totalRecords ?? 0) / request.value.pageSize) : 1);
     const pageNumbers = computed(() => {
       const calculatedPageNumbers = Array.from(Array(totalPages.value + 1).keys());
       let results = [];
@@ -9579,7 +9568,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     });
     function setPage(pageNumber) {
       const filterRequest = copy(request.value);
-      pageNumber ?? (pageNumber = 1);
+      pageNumber ??= 1;
       if (filterRequest.pageNumber !== pageNumber) {
         filterRequest.pageNumber = Math.max(Math.min(Math.trunc(pageNumber), totalPages.value), 1);
         request.value = filterRequest;
@@ -9592,10 +9581,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
       50
     ];
     const availablePageSizes = computed(() => {
-      return pageSizes.filter((size) => {
-        var _a;
-        return size <= (((_a = props.data) == null ? void 0 : _a.totalRecords) ?? 0);
-      });
+      return pageSizes.filter((size) => size <= (props.data?.totalRecords ?? 0));
     });
     function setPageSize(pageSize) {
       const filterRequest = copy(request.value);
@@ -9604,9 +9590,8 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
       request.value = filterRequest;
     }
     return (_ctx, _cache) => {
-      var _a;
       const _component_icon = resolveComponent("icon");
-      return _ctx.initialLoad ? (openBlock(), createBlock(clUiGridLiteFooterSkeleton, { key: 0 })) : ((_a = _ctx.data) == null ? void 0 : _a.results.length) && request.value && totalPages.value > 1 ? (openBlock(), createElementBlock("div", {
+      return _ctx.initialLoad ? (openBlock(), createBlock(clUiGridLiteFooterSkeleton, { key: 0 })) : _ctx.data?.results.length && request.value && totalPages.value > 1 ? (openBlock(), createElementBlock("div", {
         key: 1,
         class: normalizeClass(["cl:border-off-white cl:border-t cl:flex cl:flex-wrap cl:gap-y-2 cl:justify-between cl:p-2 cl:text-grey-4", [
           _ctx.options.smallGridText ? "cl:px-1 cl:py-1.5 cl:text-xs" : "cl:p-2 cl:text-sm"
@@ -9832,7 +9817,8 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     placeholder: { default: null },
     initialDate: { default: null },
     quickDateScope: { default: null },
-    dateFormatLocale: { default: null }
+    dateFormatLocale: { default: null },
+    showWeekNumbers: { type: Boolean, default: true }
   },
   emits: ["update:date"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -9905,8 +9891,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     const showQuickDates = useMediaQuery("(min-height: 800px)");
     __expose({
       focus() {
-        var _a;
-        (_a = input.value) == null ? void 0 : _a.focus();
+        input.value?.focus();
       }
     });
     return (_ctx, _cache) => {
@@ -9958,6 +9943,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
         "min-date": _ctx.min,
         "max-date": _ctx.max,
         "initial-page": currentInitialDate.value,
+        "show-weeknumbers": _ctx.showWeekNumbers,
         onDayclick: _cache[4] || (_cache[4] = ($event) => currentQuickDate.value = null)
       }, {
         default: withCtx(({ togglePopover }) => [
@@ -9988,7 +9974,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           }, null, 8, ["scope", "selected-quick-date", "current-date-range"])) : createCommentVNode("", true)
         ]),
         _: 1
-      }, 8, ["modelValue", "locale", "is24hr", "timezone", "columns", "popover", "min-date", "max-date", "initial-page"])) : (openBlock(), createBlock(unref(DatePicker), {
+      }, 8, ["modelValue", "locale", "is24hr", "timezone", "columns", "popover", "min-date", "max-date", "initial-page", "show-weeknumbers"])) : (openBlock(), createBlock(unref(DatePicker), {
         key: 2,
         modelValue: currentDate.value,
         "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => currentDate.value = $event),
@@ -10003,6 +9989,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
         "update-on-input": false,
         masks: { L: mask.value, inputDateTime: [mask.value], inputDateTime24hr: [mask.value] },
         color: "primary",
+        "show-weeknumbers": _ctx.showWeekNumbers,
         "title-position": "left",
         "hide-time-header": "",
         popover: popover.value
@@ -10022,7 +10009,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           }), null, 16, ["date", "events", "type", "placeholder", "required", "disabled"])
         ]),
         _: 1
-      }, 8, ["modelValue", "locale", "is24hr", "timezone", "mode", "min-date", "max-date", "initial-page", "is-required", "masks", "popover"]));
+      }, 8, ["modelValue", "locale", "is24hr", "timezone", "mode", "min-date", "max-date", "initial-page", "is-required", "masks", "show-weeknumbers", "popover"]));
     };
   }
 });
@@ -10096,12 +10083,10 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     );
     __expose({
       focus() {
-        var _a;
-        (_a = inputRef.value) == null ? void 0 : _a.focus();
+        inputRef.value?.focus();
       },
       blur() {
-        var _a;
-        (_a = inputRef.value) == null ? void 0 : _a.blur();
+        inputRef.value?.blur();
       }
     });
     return (_ctx, _cache) => {
@@ -10183,8 +10168,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     const showNumericInput = ref(false);
     __expose({
       focus() {
-        var _a;
-        (_a = sliderRef.value) == null ? void 0 : _a.focus();
+        sliderRef.value?.focus();
       }
     });
     return (_ctx, _cache) => {
@@ -10213,9 +10197,9 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
               disabled: _ctx.disabled,
               placeholder: _ctx.placeholder
             }, {
-              default: withCtx(() => _cache[5] || (_cache[5] = [
+              default: withCtx(() => [..._cache[5] || (_cache[5] = [
                 createElementVNode("span", null, null, -1)
-              ])),
+              ])]),
               _: 1
             }, 8, ["modelValue", "format", "precision", "min", "max", "step", "disabled", "placeholder"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
               withDirectives(createElementVNode("input", {
@@ -10390,7 +10374,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     initialDate: { default: null },
     quickDateScope: { default: null },
     dateFormatLocale: { default: null },
-    currencyOptions: { default: void 0 }
+    currencyOptions: { default: void 0 },
+    showWeekNumbers: { type: Boolean, default: true }
   },
   emits: ["update:model-value", "click", "focus", "input", "change", "validated"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -10401,9 +10386,8 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     const focused = ref(false);
     const lostFocus = ref(false);
     const showRequiredAsterisk = computed(() => {
-      var _a;
       let showAsterisk = props.isRequired;
-      if (lostFocus.value && ((_a = currentValue.value) == null ? void 0 : _a.toString().trim()) === "" && props.requiredText.trim() !== "") {
+      if (lostFocus.value && currentValue.value?.toString().trim() === "" && props.requiredText.trim() !== "") {
         showAsterisk = false;
       }
       return !props.hideRequiredAsterisk && showAsterisk;
@@ -10427,10 +10411,9 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     const displayValidationMessage = ref(true);
     const internalErrors = ref([]);
     const errors = computed(() => {
-      var _a, _b;
       return [
-        ...((_a = internalErrors.value) == null ? void 0 : _a.filter((e) => ((e == null ? void 0 : e.length) ?? 0) > 0)) ?? [],
-        ...((_b = props.externalErrors) == null ? void 0 : _b.filter((e) => ((e == null ? void 0 : e.length) ?? 0) > 0)) ?? []
+        ...internalErrors.value?.filter((e) => (e?.length ?? 0) > 0) ?? [],
+        ...props.externalErrors?.filter((e) => (e?.length ?? 0) > 0) ?? []
       ].join("\n");
     });
     const currencyInputOptions = computed(() => {
@@ -10591,19 +10574,17 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     );
     __expose({
       focus() {
-        var _a, _b;
         if (props.inputType === "currency") {
-          (_a = currencyInputRef == null ? void 0 : currencyInputRef.value) == null ? void 0 : _a.focus();
+          currencyInputRef?.value?.focus();
         } else {
-          (_b = inputElement.value) == null ? void 0 : _b.focus();
+          inputElement.value?.focus();
         }
       },
       blur() {
-        var _a, _b;
         if (props.inputType === "currency") {
-          (_a = currencyInputRef == null ? void 0 : currencyInputRef.value) == null ? void 0 : _a.blur();
+          currencyInputRef?.value?.blur();
         } else {
-          (_b = inputElement.value) == null ? void 0 : _b.blur();
+          inputElement.value?.blur();
         }
       }
     });
@@ -10728,9 +10709,10 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
             "initial-date": _ctx.initialDate,
             "quick-date-scope": _ctx.quickDateScope,
             "date-format-locale": _ctx.dateFormatLocale,
+            "show-week-numbers": _ctx.showWeekNumbers,
             onBlur: onLostFocus,
             onFocus: _cache[10] || (_cache[10] = ($event) => emit("focus"))
-          }), null, 16, ["date", "class", "disabled", "required", "type", "time-zone", "min", "max", "placeholder", "initial-date", "quick-date-scope", "date-format-locale"])) : _ctx.inputType === "range" && typeof currentValue.value === "number" ? (openBlock(), createElementBlock("div", _hoisted_9$1, [
+          }), null, 16, ["date", "class", "disabled", "required", "type", "time-zone", "min", "max", "placeholder", "initial-date", "quick-date-scope", "date-format-locale", "show-week-numbers"])) : _ctx.inputType === "range" && typeof currentValue.value === "number" ? (openBlock(), createElementBlock("div", _hoisted_9$1, [
             createVNode(unref(clUiSlider), {
               ref_key: "inputElement",
               ref: inputElement,
@@ -10753,7 +10735,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const clUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-dec34b48"]]);
+const clUiInput = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-833e892c"]]);
 const inputTypes = [
   "button",
   "checkbox",
@@ -10992,9 +10974,9 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
                     placeholder: unref(t2)("login.email"),
                     autocomplete: "username"
                   }, {
-                    default: withCtx(() => _cache[4] || (_cache[4] = [
+                    default: withCtx(() => [..._cache[4] || (_cache[4] = [
                       createElementVNode("span", null, null, -1)
-                    ])),
+                    ])]),
                     _: 1
                   }, 8, ["modelValue", "class", "errors", "placeholder"]),
                   usernameValid.value ? (openBlock(), createElementBlock("div", _hoisted_9, toDisplayString(unref(t2)("login.validEmail")), 1)) : createCommentVNode("", true)
@@ -11035,9 +11017,9 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
                   placeholder: unref(t2)("login.password"),
                   autocomplete: "current-password"
                 }, {
-                  default: withCtx(() => _cache[5] || (_cache[5] = [
+                  default: withCtx(() => [..._cache[5] || (_cache[5] = [
                     createElementVNode("span", null, null, -1)
-                  ])),
+                  ])]),
                   _: 1
                 }, 8, ["modelValue", "class", "type", "placeholder"])
               ])
@@ -11058,22 +11040,19 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
             ])
           ], 2),
           createVNode(Transition, { name: "cl:grow-down" }, {
-            default: withCtx(() => {
-              var _a;
-              return [
-                withDirectives(createElementVNode("span", _hoisted_13, [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.errors, (error, index2) => {
-                    return openBlock(), createElementBlock("div", {
-                      id: "cl-ui-login-errors",
-                      key: index2,
-                      class: "cl:font-semibold"
-                    }, toDisplayString(error), 1);
-                  }), 128))
-                ], 512), [
-                  [vShow, (_a = _ctx.errors) == null ? void 0 : _a.length]
-                ])
-              ];
-            }),
+            default: withCtx(() => [
+              withDirectives(createElementVNode("span", _hoisted_13, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.errors, (error, index2) => {
+                  return openBlock(), createElementBlock("div", {
+                    id: "cl-ui-login-errors",
+                    key: index2,
+                    class: "cl:font-semibold"
+                  }, toDisplayString(error), 1);
+                }), 128))
+              ], 512), [
+                [vShow, _ctx.errors?.length]
+              ])
+            ]),
             _: 1
           })
         ])
@@ -11132,7 +11111,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           }
         });
       }
-      emit("open-state", !!(group == null ? void 0 : group.open), groupID);
+      emit("open-state", !!group?.open, groupID);
     }
     const size = useWindowSize();
     watch(
@@ -11490,9 +11469,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       }
     });
     function handleDrop(payload) {
-      var _a;
       if (props.disabled === false) {
-        const filesUploaded = [...(_a = payload == null ? void 0 : payload.dataTransfer) == null ? void 0 : _a.files];
+        const filesUploaded = [...payload?.dataTransfer?.files];
         validateAndEmitFiles(filesUploaded);
       }
     }
@@ -11653,9 +11631,8 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       }
     }
     const canDeselect = computed(() => {
-      var _a;
       if (Array.isArray(currentSelection.value)) {
-        return props.required === false || (((_a = currentSelection.value) == null ? void 0 : _a.length) ?? 0) > 1;
+        return props.required === false || (currentSelection.value?.length ?? 0) > 1;
       } else {
         return !props.required;
       }
@@ -12076,14 +12053,13 @@ function concatenatePath(...fragments) {
   return fragments.map((f) => f.replace(/ /g, "_")).join(" ");
 }
 function findNodeByPath(rootNodes, path) {
-  var _a;
   const pathFragments = path.split(" ");
   let currentNode = void 0;
   for (const fragment of pathFragments) {
     if (!currentNode) {
       currentNode = rootNodes.find((node) => node.id === fragment);
     } else {
-      currentNode = (_a = currentNode.children) == null ? void 0 : _a.find((node) => node.id === fragment);
+      currentNode = currentNode.children?.find((node) => node.id === fragment);
     }
     if (!currentNode) {
       break;
@@ -12118,7 +12094,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }),
   emits: /* @__PURE__ */ mergeModels(["recalculate-tree-path", "set-child-node-height"], ["update:selectedPath"]),
   setup(__props, { emit: __emit }) {
-    var _a;
     const props = __props;
     const selectedPath = useModel(__props, "selectedPath");
     const emit = __emit;
@@ -12130,7 +12105,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const childSubtreeDivs = ref([]);
     const childSubtreeHeights = computed(() => childSubtreeDivs.value.map((el) => useElementSize(el)));
     const childSubtreeBoundingBoxes = computed(() => childSubtreeDivs.value.map((el) => useElementBounding(el)));
-    const childNodeContentHeights = ref(new Array(((_a = props.rootNode.children) == null ? void 0 : _a.length) ?? 0).fill(0));
+    const childNodeContentHeights = ref(new Array(props.rootNode.children?.length ?? 0).fill(0));
     const treePathBranchesAt = ref([]);
     function recalculateTreePathBranches() {
       nodeContentBoundingBox.update();