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

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)
@@ -818,7 +818,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({
@@ -958,7 +958,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}`,
@@ -1027,7 +1027,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"];
@@ -1264,7 +1264,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
               _: 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 +1408,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 +1419,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")
       ]),
@@ -1499,7 +1499,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 +1540,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,
@@ -1767,6 +1767,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 +1777,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",
@@ -2322,7 +2325,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"
 };
@@ -2433,7 +2436,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)(((_a = _ctx.column.listEntries.find((entry) => entry.value === _ctx.data[_ctx.column.field])) == null ? void 0 : _a.translationKey) ?? "")), 1)) : _ctx.column.type === "number" && _ctx.column.field !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_2$A, toDisplayString(formatNumberToString(_ctx.data[_ctx.column.field], unref(locale2))), 1)) : _ctx.column.field !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_3$n, [
         createElementVNode("span", {
           title: showUntruncatedStringValue.value ? _ctx.data[_ctx.column.field] : void 0,
           innerHTML: formatString()
@@ -2609,7 +2612,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 };
@@ -2838,7 +2841,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 +2871,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({
   ...{
@@ -3058,7 +3061,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 +3103,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" };
@@ -3191,7 +3194,7 @@ 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", {
@@ -3319,6 +3322,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);
@@ -3794,7 +3885,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" };
@@ -3861,7 +3952,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",
@@ -4348,7 +4439,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 +4635,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 +4700,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
@@ -4689,15 +4779,17 @@ 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);
+            selectResult.value = selectResult.value.toSpliced(isInArray, 1);
           }
         } else {
-          (_a = selectResult.value) == null ? void 0 : _a.push(value);
+          selectResult.value = [
+            ...selectResult.value,
+            value
+          ];
         }
       } else {
         if (props.canClear && selectResult.value === value) {
@@ -4867,7 +4959,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 +4968,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,
@@ -4899,7 +4991,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"])
@@ -4922,7 +5017,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
                   "cl:overflow-hidden": _ctx.disabled
                 }],
                 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,8 +5028,8 @@ 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) => {
@@ -4956,7 +5051,7 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
                     ])
                   ]);
                 }), 128))
-              ], 16, _hoisted_3$i)) : createCommentVNode("", true)
+              ], 16, _hoisted_2$q)) : createCommentVNode("", true)
             ], 2)
           ]),
           _: 2
@@ -4998,92 +5093,6 @@ const _sfc_main$I = /* @__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";
-  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 +5156,13 @@ const filterMethods = [
     ],
     key: "notequal"
   },
+  {
+    method: "orequal",
+    icon: "mdi:set-none",
+    description: "One of",
+    allowedTypes: ["list"],
+    key: "orequal"
+  },
   defaultDateTimeFilterMethod,
   {
     method: "greaterthan",
@@ -5227,6 +5243,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}`);
@@ -5319,6 +5340,11 @@ const defaultEmptyListValue = {
   name: "",
   value: ""
 };
+const defaultSelectAllListValue = {
+  id: -2,
+  name: i18n.global.t("grid.selectAll"),
+  value: ""
+};
 const booleanListEntries = computed(() => [
   defaultEmptyListValue,
   {
@@ -5363,7 +5389,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,
@@ -5379,7 +5405,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     const listEntriesAsSelectItems = computed(() => {
       var _a;
       return [
-        defaultEmptyListValue,
+        props.column.listMode === "multi" ? defaultSelectAllListValue : defaultEmptyListValue,
         ...((_a = props.column.listEntries) == null ? void 0 : _a.map((x, i) => ({
           id: i,
           name: t2(x.translationKey),
@@ -5387,11 +5413,28 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
         }))) ?? []
       ];
     });
-    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 currentFilterValueAsSelectItems = computed(() => {
+      var _a, _b;
+      if (props.column.listMode !== "multi") {
+        const item = listEntriesAsSelectItems.value.find((x) => x.value === currentFilterValue.value && x.id === selectedListEntryId.value) ?? listEntriesAsSelectItems.value.find((x) => x.value === currentFilterValue.value) ?? null;
+        return item ? item : null;
+      } else {
+        const filters = (_a = props.filter) == null ? void 0 : _a.filter((f) => f.filterOperation === FilterOperation.OR_EQUAL).map((f) => f.filterValue);
+        const filteredListEntries = listEntriesAsSelectItems.value.filter((x) => filters == null ? void 0 : filters.includes(x.value));
+        if (filteredListEntries.length === ((_b = props.column.listEntries) == null ? void 0 : _b.length)) {
+          filteredListEntries.push(defaultSelectAllListValue);
+        }
+        return filteredListEntries;
+      }
+    });
+    const selectAllCurrentlyHighlighted = computed(() => Array.isArray(currentFilterValueAsSelectItems.value) && currentFilterValueAsSelectItems.value.some((x) => x.id === defaultSelectAllListValue.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);
@@ -5576,6 +5619,24 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     const currentDateFilterValue = computed(() => currentFilterValue.value === "" ? null : currentFilterValue.value);
     const currentDateRangeFilterValue = computed(() => currentFilterValue.value === "" ? null : currentFilterValue.value);
     const filterable = computed(() => isFilterable(props.column));
+    function setOrEqualFilters(value) {
+      const selectAllCurrentlySelected = value.some((x) => x.id === defaultSelectAllListValue.id);
+      if (value.length === 0 || selectAllCurrentlySelected === false && selectAllCurrentlyHighlighted.value) {
+        setOrEqualFiltersImpl([defaultSelectAllListValue.value]);
+      } 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;
@@ -5765,11 +5826,15 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           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))
+          "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => updateListColumnSelectItems($event))
         }, {
           default: withCtx(({ select, option: option2, index: index2, highlightIndex, isSelected }) => [
             createVNode(_sfc_main$I, {
@@ -5788,7 +5853,7 @@ 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", "inert"])) : createCommentVNode("", true),
         !isDateRangeColumn.value ? (openBlock(), createBlock(_sfc_main$H, {
           key: 6,
           filter: currentFilter.value,
@@ -5803,7 +5868,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const clUiGridFilterInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-92e7b2c1"]]);
+const clUiGridFilterInput = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-4bb0f963"]]);
 const _hoisted_1$y = { key: 1 };
 const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "cl-ui-grid-filter",
@@ -5922,10 +5987,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;
       }