@citruslime/ui 4.1.0-beta.1 → 4.1.0-beta.10

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

@@ -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$u = { class: "cl:overflow-hidden" };
+const _hoisted_3$t = { 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$u, [
+        createElementVNode("div", _hoisted_3$t, [
           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$t = {
+const _hoisted_3$s = {
   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$t, [
+            _ctx.$slots.label ? (openBlock(), createElementBlock("span", _hoisted_3$s, [
               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$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_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_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$s, [
+        createElementVNode("div", _hoisted_3$r, [
           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$r = { class: "cl:pointer-events-none cl:relative cl:top-0.5" };
+const _hoisted_3$q = { 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$r, [
+          withDirectives(createElementVNode("div", _hoisted_3$q, [
             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$q = {
+const _hoisted_3$p = {
   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$q, [
+    _ctx.$slots.left || _ctx.$slots.right ? (openBlock(), createElementBlock("div", _hoisted_3$p, [
       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$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_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_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$p, [
+        createElementVNode("div", _hoisted_3$o, [
           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, {
@@ -1767,6 +1728,7 @@ const messages = {
       greaterthan: "Greater than",
       equalorlessthan: "Less than or equal to",
       equalorgreaterthan: "Greater than or equal to",
+      orequal: "One of",
       availableMethods: "Available filter methods",
       true: "True",
       false: "False",
@@ -1776,6 +1738,8 @@ const messages = {
       after: "After",
       onOrBefore: "On or before",
       onOrAfter: "On or after",
+      selectAll: "Select all",
+      allEntriesSelected: "All entries selected",
       page: "Page",
       pageSize: "Page Size",
       totalRecords: "Total Records",
@@ -2068,11 +2032,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) {
@@ -2084,9 +2047,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:
@@ -2140,7 +2103,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: ""
@@ -2156,7 +2119,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()
@@ -2215,10 +2178,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: ""
@@ -2234,7 +2197,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()
@@ -2290,22 +2253,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 = {
@@ -2322,7 +2285,7 @@ const _hoisted_2$A = {
   key: 4,
   class: "cl:inline-block cl:whitespace-nowrap"
 };
-const _hoisted_3$o = {
+const _hoisted_3$n = {
   key: 5,
   class: "cl:inline-block cl:whitespace-nowrap"
 };
@@ -2348,11 +2311,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"
         });
       }
@@ -2416,7 +2379,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()
@@ -2433,7 +2395,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$o, [
+      ], 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$n, [
         createElementVNode("span", {
           title: showUntruncatedStringValue.value ? _ctx.data[_ctx.column.field] : void 0,
           innerHTML: formatString()
@@ -2460,13 +2422,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 ?? "";
@@ -2609,7 +2568,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$K = ["colspan"];
 const _hoisted_2$z = ["colspan"];
-const _hoisted_3$n = { key: 2 };
+const _hoisted_3$m = { 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 };
@@ -2676,22 +2635,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
     });
@@ -2713,10 +2669,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;
         }
@@ -2731,15 +2686,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];
@@ -2760,13 +2713,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 }, [
@@ -2781,9 +2732,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,
@@ -2801,7 +2751,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 ? () => {
@@ -2838,7 +2788,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
               }, "   ", 8, _hoisted_2$z)
             ], 2);
           }), 128)) : createCommentVNode("", true)
-        ], 64)) : !_ctx.loading ? (openBlock(), createElementBlock("tr", _hoisted_3$n, [
+        ], 64)) : !_ctx.loading ? (openBlock(), createElementBlock("tr", _hoisted_3$m, [
           createElementVNode("td", {
             colspan: _ctx.columns.length
           }, [
@@ -2868,7 +2818,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$m = ["disabled"];
+const _hoisted_3$l = ["disabled"];
 const _hoisted_4$g = ["disabled"];
 const _sfc_main$U = /* @__PURE__ */ defineComponent({
   ...{
@@ -2911,8 +2861,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;
@@ -3000,19 +2949,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) => {
@@ -3058,7 +3000,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
                 ]
               }, [
                 createVNode(_component_icon, { icon: "ph:caret-up-bold" })
-              ], 40, _hoisted_3$m),
+              ], 40, _hoisted_3$l),
               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,
@@ -3100,7 +3042,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$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_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_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" };
@@ -3140,10 +3082,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 = [];
@@ -3158,7 +3097,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);
@@ -3182,7 +3121,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 }),
@@ -3191,10 +3129,10 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
             words: 2
           })
         ]),
-        createElementVNode("div", _hoisted_3$l, [
+        createElementVNode("div", _hoisted_3$k, [
           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
@@ -3210,7 +3148,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),
@@ -3308,9 +3246,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"])
           ])
@@ -3319,6 +3257,94 @@ const _sfc_main$T = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const gridColumnTypes = [
+  "string",
+  "boolean",
+  "number",
+  "date",
+  "datetime",
+  "dateRange",
+  "list",
+  "slot"
+];
+function isGridColumn(objectToTest) {
+  return typeof objectToTest.caption === "string" && typeof objectToTest.name === "string" && typeof objectToTest.type === "string";
+}
+function isGridColumnArray(arrayToTest) {
+  let arrayIsValid = Array.isArray(arrayToTest);
+  if (arrayIsValid) {
+    for (const objectToTest of arrayToTest) {
+      if (!isGridColumn(objectToTest)) {
+        arrayIsValid = false;
+        break;
+      }
+    }
+  }
+  return arrayIsValid;
+}
+const stringFormats = [
+  "ellipsis",
+  "wrap-text"
+];
+var FilterOperation = /* @__PURE__ */ ((FilterOperation2) => {
+  FilterOperation2[FilterOperation2["CONTAINS"] = 0] = "CONTAINS";
+  FilterOperation2[FilterOperation2["NOT_CONTAINS"] = 1] = "NOT_CONTAINS";
+  FilterOperation2[FilterOperation2["EQUAL"] = 2] = "EQUAL";
+  FilterOperation2[FilterOperation2["NOT_EQUAL"] = 3] = "NOT_EQUAL";
+  FilterOperation2[FilterOperation2["STARTS_WITH"] = 4] = "STARTS_WITH";
+  FilterOperation2[FilterOperation2["ENDS_WITH"] = 5] = "ENDS_WITH";
+  FilterOperation2[FilterOperation2["GREATER_THAN"] = 6] = "GREATER_THAN";
+  FilterOperation2[FilterOperation2["LESS_THAN"] = 7] = "LESS_THAN";
+  FilterOperation2[FilterOperation2["EQUAL_OR_GREATER_THAN"] = 8] = "EQUAL_OR_GREATER_THAN";
+  FilterOperation2[FilterOperation2["EQUAL_OR_LESS_THAN"] = 9] = "EQUAL_OR_LESS_THAN";
+  FilterOperation2[FilterOperation2["AND_CONTAINS"] = 10] = "AND_CONTAINS";
+  FilterOperation2[FilterOperation2["OR_EQUAL"] = 11] = "OR_EQUAL";
+  return FilterOperation2;
+})(FilterOperation || {});
+const filterMethodTypes = [
+  "equal",
+  "notequal",
+  "contains",
+  "notcontains",
+  "lessthan",
+  "greaterthan",
+  "startswith",
+  "endswith",
+  "equalorlessthan",
+  "equalorgreaterthan",
+  "andcontains",
+  "orequal"
+];
+function isFilterArgs(objectToTest) {
+  return typeof objectToTest.filterOnColumn === "string" && typeof objectToTest.filterOperation === "number" && typeof objectToTest.filterValue === "string";
+}
+function isSortArgs(objectToTest) {
+  return objectToTest === null || typeof objectToTest.sortByAscending === "boolean" && typeof objectToTest.sortOnColumn === "string";
+}
+function isFilterRequest(objectToTest) {
+  let objectValid = typeof objectToTest.filters === "object" && Array.isArray(objectToTest.filters) && typeof objectToTest.pageNumber === "number" && typeof objectToTest.pageSize === "number" && typeof objectToTest.sort === "object" && isSortArgs(objectToTest.sort);
+  if (objectValid) {
+    for (const filterArgs of objectToTest.filters) {
+      if (!isFilterArgs(filterArgs)) {
+        objectValid = false;
+        break;
+      }
+    }
+  }
+  return objectValid;
+}
+function isFilterResponse(objectToTest, resultValidator) {
+  let objectValid = typeof objectToTest.results === "object" && Array.isArray(objectToTest.results) && typeof objectToTest.totalRecords === "number";
+  if (objectValid) {
+    for (const result of objectToTest.results) {
+      if (!resultValidator(result)) {
+        objectValid = false;
+        break;
+      }
+    }
+  }
+  return objectValid;
+}
 function convertDateToIsoString(dateToConvert, forcedTimeOfDay, includeOffset, selectedTimeZone) {
   const internalTimeZone = selectedTimeZone ?? "UTC";
   let returnValueDate = DateTime.fromJSDate(dateToConvert, { zone: internalTimeZone }).setZone(internalTimeZone);
@@ -3329,7 +3355,7 @@ function convertDateToIsoString(dateToConvert, forcedTimeOfDay, includeOffset, s
   }
   let returnValue = returnValueDate.toISO({ includeOffset });
   if (selectedTimeZone === null) {
-    returnValue = (returnValue == null ? void 0 : returnValue.replace("Z", "")) ?? null;
+    returnValue = returnValue?.replace("Z", "") ?? null;
   }
   return returnValue;
 }
@@ -3495,12 +3521,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)
           }, [
@@ -3740,14 +3765,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, {
@@ -3794,7 +3813,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$k = { class: "cl:max-w-max" };
+const _hoisted_3$j = { 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" };
@@ -3834,19 +3853,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");
@@ -3861,7 +3873,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$k, [
+            createElementVNode("div", _hoisted_3$j, [
               withDirectives(createElementVNode("div", _hoisted_4$e, [
                 withDirectives(createElementVNode("input", mergeProps({
                   ref_key: "sliderRef",
@@ -4049,8 +4061,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
     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(() => {
@@ -4228,8 +4239,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) => {
@@ -4348,7 +4358,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$j = { class: "cl:w-full" };
+const _hoisted_3$i = { class: "cl:w-full" };
 const _sfc_main$L = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -4544,7 +4554,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$j, [
+                createElementVNode("div", _hoisted_3$i, [
                   createVNode(_sfc_main$M, {
                     id: "dateInputEnd",
                     modelValue: internalEntrySelectEndDate.value,
@@ -4609,8 +4619,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$B = ["value", "readonly", "placeholder", "disabled", "onKeydown"];
-const _hoisted_2$q = { class: "cl:flex cl:items-center cl:pointer-events-none cl:px-2 cl:py-1 cl:relative cl:text-grey-3 cl:z-10" };
-const _hoisted_3$i = ["id", "tabindex", "inert", "onKeydown"];
+const _hoisted_2$q = ["id", "tabindex", "inert", "onKeydown"];
 const _sfc_main$J = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -4627,7 +4636,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 }) {
@@ -4651,7 +4661,7 @@ 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("");
@@ -4689,49 +4699,51 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
       setSearchTerm("");
     }
     function select(value) {
-      var _a;
-      if (Array.isArray(selectResult.value)) {
-        const isInArray = selectResult.value.indexOf(value);
-        if (isInArray > -1) {
-          if (selectResult.value.length > 1 || props.canClear) {
-            selectResult.value.splice(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 {
-          (_a = selectResult.value) == null ? void 0 : _a.push(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);
@@ -4744,7 +4756,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++;
@@ -4758,8 +4770,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,
@@ -4769,7 +4780,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     }
     function handleEnterPress(event) {
       if (selectModalVisible.value) {
-        select(displayList.value[highlightIndex.value]);
+        select(displayList.value[highlightIndex.value] ?? null);
         setSearchTerm("");
         event.target.focus();
       } else {
@@ -4813,12 +4824,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) => {
@@ -4837,6 +4847,10 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     function ignoreFocusEvent() {
       ignoreFocus = true;
     }
+    function handleMouseClick(option2) {
+      select(option2);
+      highlightIndex.value = -1;
+    }
     __expose({
       focus
     });
@@ -4867,7 +4881,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
                   class: normalizeClass([[inputClasses.value, {
                     "cl:border cl:border-grey-2": _ctx.isGridFilter === false,
                     "cl:border-link-light": unref(inputFocused) && !_ctx.openDropDownOnFocus && _ctx.isGridFilter === false
-                  }], "cl:flex cl:gap-2 cl:items-center cl:justify-between cl:min-h-8 cl:rounded-lg cl:select-none cl:transition-colors cl:w-full"]),
+                  }], "cl:flex cl:items-center cl:justify-between cl:min-h-8 cl:rounded-lg cl:select-none cl:transition-colors cl:w-full"]),
                   onToggleModal: onInputClick
                 }, {
                   default: withCtx(() => [
@@ -4876,10 +4890,10 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
                       ref: inputElement,
                       type: "text",
                       autocomplete: "off",
-                      value: isCurrentlySearchable.value ? searchTerm.value : selectResultAsString.value,
+                      value: isCurrentlySearchable.value ? searchTerm.value : props.isGridFilter ? _ctx.placeholder || selectResultAsString.value : selectResultAsString.value,
                       readonly: _ctx.allowFiltering === false,
                       class: [inputClasses.value, "cl:disabled:border-grey-2 cl:disabled:placeholder-grey-3 cl:outline-none cl:overflow-hidden cl:px-2 cl:py-1 cl:rounded-lg cl:text-ellipsis cl:transition-colors cl:w-full cl:whitespace-nowrap"],
-                      placeholder: selectResultAsString.value || _ctx.placeholder || void 0,
+                      placeholder: (props.isGridFilter ? _ctx.placeholder || selectResultAsString.value : selectResultAsString.value || _ctx.placeholder) || void 0,
                       disabled: _ctx.disabled,
                       onKeydown: [
                         preventInputKeyEventWhenNonEditable,
@@ -4891,7 +4905,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)),
@@ -4899,7 +4913,10 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
                       onFocus: focus,
                       onSelect: withModifiers(preventInputSelection, ["stop", "prevent"])
                     }), null, 16, _hoisted_1$B),
-                    createElementVNode("div", _hoisted_2$q, [
+                    createElementVNode("div", {
+                      class: "cl:cursor-pointer cl:flex cl:items-center cl:px-2 cl:py-1 cl:relative cl:text-grey-3 cl:z-10",
+                      onClick: _cache[5] || (_cache[5] = withModifiers(($event) => isCurrentlySearchable.value ? toggleSelectModalState(false) : onInputClick(), ["stop", "prevent"]))
+                    }, [
                       createVNode(_component_icon, {
                         icon: selectModalVisible.value ? "ph:caret-up-bold" : "ph:caret-down-bold"
                       }, null, 8, ["icon"])
@@ -4919,10 +4936,11 @@ 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[5] || (_cache[5] = ($event) => toggleSelectModalState(false)),
+                onBlur: _cache[6] || (_cache[6] = ($event) => toggleSelectModalState(false)),
                 onKeyup: [
                   withKeys(moveHighlightToStart, ["tab"]),
                   withKeys(moveHighlightToStart, ["right"]),
@@ -4933,30 +4951,31 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
                   withKeys(withModifiers(moveHighlightForwards, ["prevent"]), ["down"]),
                   withKeys(withModifiers(moveHighlightToStart, ["prevent"]), ["home"]),
                   withKeys(withModifiers(moveHighlightToEnd, ["prevent"]), ["end"]),
-                  _cache[6] || (_cache[6] = withKeys(withModifiers(($event) => select(displayList.value[highlightIndex.value]), ["stop", "prevent"]), ["space"])),
-                  _cache[7] || (_cache[7] = withKeys(withModifiers(($event) => select(displayList.value[highlightIndex.value]), ["stop", "prevent"]), ["enter"]))
+                  _cache[7] || (_cache[7] = withKeys(withModifiers(($event) => select(displayList.value[highlightIndex.value]), ["stop", "prevent"]), ["space"])),
+                  _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) => {
                   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))
-              ], 16, _hoisted_3$i)) : createCommentVNode("", true)
+              ], 16, _hoisted_2$q)) : createCommentVNode("", true)
             ], 2)
           ]),
           _: 2
@@ -4978,112 +4997,29 @@ 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);
     };
   }
 });
-const gridColumnTypes = [
-  "string",
-  "boolean",
-  "number",
-  "date",
-  "datetime",
-  "dateRange",
-  "list",
-  "slot"
-];
-function isGridColumn(objectToTest) {
-  return typeof objectToTest.caption === "string" && typeof objectToTest.name === "string" && typeof objectToTest.type === "string";
-}
-function isGridColumnArray(arrayToTest) {
-  let arrayIsValid = Array.isArray(arrayToTest);
-  if (arrayIsValid) {
-    for (const objectToTest of arrayToTest) {
-      if (!isGridColumn(objectToTest)) {
-        arrayIsValid = false;
-        break;
-      }
-    }
-  }
-  return arrayIsValid;
-}
-const stringFormats = [
-  "ellipsis",
-  "wrap-text"
-];
-var FilterOperation = /* @__PURE__ */ ((FilterOperation2) => {
-  FilterOperation2[FilterOperation2["CONTAINS"] = 0] = "CONTAINS";
-  FilterOperation2[FilterOperation2["NOT_CONTAINS"] = 1] = "NOT_CONTAINS";
-  FilterOperation2[FilterOperation2["EQUAL"] = 2] = "EQUAL";
-  FilterOperation2[FilterOperation2["NOT_EQUAL"] = 3] = "NOT_EQUAL";
-  FilterOperation2[FilterOperation2["STARTS_WITH"] = 4] = "STARTS_WITH";
-  FilterOperation2[FilterOperation2["ENDS_WITH"] = 5] = "ENDS_WITH";
-  FilterOperation2[FilterOperation2["GREATER_THAN"] = 6] = "GREATER_THAN";
-  FilterOperation2[FilterOperation2["LESS_THAN"] = 7] = "LESS_THAN";
-  FilterOperation2[FilterOperation2["EQUAL_OR_GREATER_THAN"] = 8] = "EQUAL_OR_GREATER_THAN";
-  FilterOperation2[FilterOperation2["EQUAL_OR_LESS_THAN"] = 9] = "EQUAL_OR_LESS_THAN";
-  FilterOperation2[FilterOperation2["AND_CONTAINS"] = 10] = "AND_CONTAINS";
-  return FilterOperation2;
-})(FilterOperation || {});
-const filterMethodTypes = [
-  "equal",
-  "notequal",
-  "contains",
-  "notcontains",
-  "lessthan",
-  "greaterthan",
-  "startswith",
-  "endswith",
-  "equalorlessthan",
-  "equalorgreaterthan",
-  "andcontains"
-];
-function isFilterArgs(objectToTest) {
-  return typeof objectToTest.filterOnColumn === "string" && typeof objectToTest.filterOperation === "number" && typeof objectToTest.filterValue === "string";
-}
-function isSortArgs(objectToTest) {
-  return objectToTest === null || typeof objectToTest.sortByAscending === "boolean" && typeof objectToTest.sortOnColumn === "string";
-}
-function isFilterRequest(objectToTest) {
-  let objectValid = typeof objectToTest.filters === "object" && Array.isArray(objectToTest.filters) && typeof objectToTest.pageNumber === "number" && typeof objectToTest.pageSize === "number" && typeof objectToTest.sort === "object" && isSortArgs(objectToTest.sort);
-  if (objectValid) {
-    for (const filterArgs of objectToTest.filters) {
-      if (!isFilterArgs(filterArgs)) {
-        objectValid = false;
-        break;
-      }
-    }
-  }
-  return objectValid;
-}
-function isFilterResponse(objectToTest, resultValidator) {
-  let objectValid = typeof objectToTest.results === "object" && Array.isArray(objectToTest.results) && typeof objectToTest.totalRecords === "number";
-  if (objectValid) {
-    for (const result of objectToTest.results) {
-      if (!resultValidator(result)) {
-        objectValid = false;
-        break;
-      }
-    }
-  }
-  return objectValid;
-}
 const defaultFilterMethod = {
   method: "equal",
   icon: "mdi:equal",
@@ -5147,6 +5083,13 @@ const filterMethods = [
     ],
     key: "notequal"
   },
+  {
+    method: "orequal",
+    icon: "mdi:set-none",
+    description: "One of",
+    allowedTypes: ["list"],
+    key: "orequal"
+  },
   defaultDateTimeFilterMethod,
   {
     method: "greaterthan",
@@ -5227,6 +5170,11 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
       } else if (typeof props.column.slotType !== "undefined" && typeof props.column.field !== "undefined") {
         methods = filterMethods.filter((f) => f.allowedTypes.includes(props.column.slotType));
       }
+      if ((props.column.type === "list" || props.column.type === "slot" && props.column.slotType === "list") && props.column.listMode === "multi") {
+        methods = methods.filter((m) => m.method === "orequal");
+      } else {
+        methods = methods.filter((m) => m.method !== "orequal");
+      }
       if (props.column.type === "date" || props.column.type === "datetime" || props.column.slotType === "date" || props.column.slotType === "datetime") {
         methods.forEach((m) => {
           m.description = t2(`grid.${m.key}`);
@@ -5239,15 +5187,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;
@@ -5294,11 +5238,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"])
             }, [
@@ -5319,6 +5262,11 @@ const defaultEmptyListValue = {
   name: "",
   value: ""
 };
+const defaultSelectAllListValue = computed(() => ({
+  id: -2,
+  name: i18n.global.t("grid.selectAll"),
+  value: ""
+}));
 const booleanListEntries = computed(() => [
   defaultEmptyListValue,
   {
@@ -5363,7 +5311,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     const emit = __emit;
     const { t: t2, locale: locale2 } = useI18n();
     function getDefaultFilterOperation() {
-      return props.column.type === "string" || props.column.slotType === "string" ? FilterOperation.CONTAINS : props.column.type === "datetime" || props.column.slotType === "datetime" || props.column.type === "date" || props.column.slotType === "date" ? FilterOperation.LESS_THAN : FilterOperation.EQUAL;
+      return isListColumn.value && props.column.listMode === "multi" ? FilterOperation.OR_EQUAL : props.column.type === "string" || props.column.slotType === "string" ? FilterOperation.CONTAINS : props.column.type === "datetime" || props.column.slotType === "datetime" || props.column.type === "date" || props.column.slotType === "date" ? FilterOperation.LESS_THAN : FilterOperation.EQUAL;
     }
     const currentFilters = computed({
       get: () => props.filter,
@@ -5376,40 +5324,52 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     const isStringColumn = computed(() => props.column.type === "string" || props.column.type === "slot" && props.column.slotType === "string");
     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;
-      return [
-        defaultEmptyListValue,
-        ...((_a = props.column.listEntries) == null ? void 0 : _a.map((x, i) => ({
-          id: i,
-          name: t2(x.translationKey),
-          value: x.value.toString()
-        }))) ?? []
-      ];
+    const listEntriesAsSelectItems = computed(() => [
+      props.column.listMode === "multi" ? defaultSelectAllListValue.value : defaultEmptyListValue,
+      ...props.column.listEntries?.map((x, i) => ({
+        id: i,
+        name: t2(x.translationKey),
+        value: x.value.toString()
+      })) ?? []
+    ]);
+    const currentFilterValueAsSelectItems = computed(() => {
+      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 = 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 currentFilterValueAsSelectItem = computed(() => listEntriesAsSelectItems.value.find((x) => x.value === currentFilterValue.value && x.id === selectedListEntryId.value) ?? listEntriesAsSelectItems.value.find((x) => x.value === currentFilterValue.value) ?? null);
+    const selectAllCurrentlyHighlighted = computed(() => Array.isArray(currentFilterValueAsSelectItems.value) && currentFilterValueAsSelectItems.value.some((x) => x.id === defaultSelectAllListValue.value.id));
     const selectedListEntryId = ref(defaultEmptyListValue.id);
-    function updateListColumnSelectItem(value) {
+    function updateListColumnSelectItems(value) {
       if (value && !Array.isArray(value)) {
         selectedListEntryId.value = value.id;
+      } else if (value && Array.isArray(value)) {
+        setOrEqualFilters(value);
+        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,
@@ -5434,9 +5394,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,
@@ -5456,9 +5416,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"
@@ -5508,7 +5468,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"
@@ -5544,7 +5504,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;
@@ -5557,7 +5517,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
       if (filtersOrCancel !== false) {
         currentFilters.value = filtersOrCancel;
       }
-    }, 1e3);
+    }, 3e3);
     const currentFilter = computed({
       get: () => internalFilter.value,
       set(value) {
@@ -5569,18 +5529,32 @@ 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.value.id);
+      if (value.length === 0 || selectAllCurrentlySelected === false && selectAllCurrentlyHighlighted.value) {
+        setOrEqualFiltersImpl([defaultSelectAllListValue.value.value]);
+      } else if (selectAllCurrentlySelected && selectAllCurrentlyHighlighted.value === false) {
+        setOrEqualFiltersImpl(listEntriesAsSelectItems.value.map((x) => x.value));
+      } else {
+        setOrEqualFiltersImpl(value.map((x) => x.value));
+      }
+      function setOrEqualFiltersImpl(values) {
+        currentFilters.value = values.map((x) => ({
+          filterOnColumn: props.column.field,
+          filterOperation: FilterOperation.OR_EQUAL,
+          filterMethod: "orequal",
+          filterValue: x
+        }));
+      }
+    }
     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) {
@@ -5618,11 +5592,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") {
@@ -5648,6 +5621,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;
     }, {
@@ -5665,8 +5646,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;
       }
     });
@@ -5685,7 +5665,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, {
@@ -5739,9 +5719,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, [
@@ -5754,22 +5734,27 @@ 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, {
           key: 5,
           id: `${unref(gridId)}-${_ctx.column.name}`,
           list: listEntriesAsSelectItems.value,
-          "model-value": currentFilterValueAsSelectItem.value,
-          class: "cl:bg-white cl:font-normal cl:max-h-52! cl:min-h-0! cl:rounded-lg!",
+          "model-value": currentFilterValueAsSelectItems.value,
+          "use-list-view": false,
+          "allow-filtering": true,
+          "can-clear": props.column.listMode === "multi",
+          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) => updateListColumnSelectItem($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, {
@@ -5788,22 +5773,22 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
             }, 1032, ["is-highlighted", "is-selected", "class", "onSelect"])
           ]),
           _: 1
-        }, 8, ["id", "list", "model-value", "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-92e7b2c1"]]);
+const clUiGridFilterInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-a9b5c9ab"]]);
 const _hoisted_1$y = { key: 1 };
 const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "cl-ui-grid-filter",
@@ -5898,8 +5883,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") {
@@ -5922,10 +5906,27 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     function updateFilter(filters) {
       if (filters) {
         const request = copy(currentRequest.value);
-        request.filters = [
-          ...request.filters.filter((f) => f.filterOnColumn !== filters[0].filterOnColumn),
-          ...filters
-        ];
+        const filteredRequests = request.filters.filter((f) => f.filterOnColumn !== filters[0].filterOnColumn);
+        if (filters.some((f) => f.filterOperation === FilterOperation.OR_EQUAL)) {
+          if (filters.every((f) => f.filterValue === "")) {
+            request.filters = filteredRequests;
+          } else if (filters.some((f) => f.filterValue === "")) {
+            request.filters = [
+              ...filteredRequests,
+              ...filters.filter((f) => f.filterValue !== "")
+            ];
+          } else {
+            request.filters = [
+              ...filteredRequests,
+              ...filters
+            ];
+          }
+        } else {
+          request.filters = [
+            ...filteredRequests,
+            ...filters
+          ];
+        }
         request.pageNumber = 1;
         currentRequest.value = request;
       }
@@ -5958,12 +5959,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;
@@ -6206,14 +6207,11 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
       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");
@@ -6234,9 +6232,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"])
           ]),
@@ -6951,7 +6949,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;
@@ -6959,7 +6957,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";
@@ -8633,7 +8631,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;
@@ -8682,9 +8679,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};`;
@@ -8695,11 +8691,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)
@@ -8713,12 +8709,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
           }
         };
@@ -8737,7 +8732,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) {
@@ -8769,7 +8764,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;
@@ -8784,29 +8779,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, [
@@ -8882,7 +8868,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,
@@ -9102,8 +9088,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") {
@@ -9259,13 +9244,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"
@@ -9332,11 +9316,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"
         });
       }
@@ -9397,7 +9381,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"
@@ -9424,7 +9407,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"
@@ -9441,13 +9424,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" };
@@ -9480,10 +9463,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 = [];
@@ -9497,7 +9477,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;
@@ -9510,10 +9490,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);
@@ -9522,9 +9499,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"
@@ -9823,8 +9799,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) => {
@@ -10014,12 +9989,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) => {
@@ -10101,8 +10074,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) => {
@@ -10131,9 +10103,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", {
@@ -10319,9 +10291,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;
@@ -10345,10 +10316,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(() => {
@@ -10509,19 +10479,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();
         }
       }
     });
@@ -10910,9 +10878,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)
@@ -10953,9 +10921,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"])
               ])
@@ -10976,22 +10944,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
           })
         ])
@@ -11050,7 +11015,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(
@@ -11408,9 +11373,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);
       }
     }
@@ -11571,9 +11535,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;
       }
@@ -11994,14 +11957,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;
@@ -12036,7 +11998,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;
@@ -12048,7 +12009,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();