@citruslime/ui 4.0.2-beta.15 → 4.0.2-beta.17

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

@@ -1,7 +1,7 @@
 import { Icon } from "@iconify/vue";
 import { defineComponent, ref, createElementBlock, openBlock, renderSlot, normalizeProps, guardReactiveProps, Fragment, createElementVNode, normalizeClass, createVNode, unref, Transition, withCtx, withDirectives, mergeProps, vShow, createBlock, Teleport, renderList, toDisplayString, createCommentVNode, computed, createTextVNode, mergeModels, useModel, watch, createSlots, vModelDynamic, shallowRef, toValue, toRefs, withKeys, onMounted, onUnmounted, withModifiers, nextTick, useAttrs, resolveComponent, inject, vModelCheckbox, watchEffect, vModelText, useCssVars, toHandlers, normalizeStyle, isRef, useSlots, provide } from "vue";
 import { generateStringId, highlightText, isTouchDevice, validateEmail as validateEmail$1, escapeStringForRegExp } from "@citruslime/utils";
-import { useFocusWithin, onKeyDown, toArray, unrefElement, tryOnScopeDispose, onClickOutside, useBreakpoints, breakpointsTailwind, useTimeoutFn, useMouseInElement, useThrottle, useMediaQuery, useDebounceFn, useMouse, useDraggable, defaultDocument, tryOnMounted, useThrottleFn, useWindowSize, useElementSize, useElementBounding } from "@vueuse/core";
+import { useFocusWithin, onKeyDown, toArray, unrefElement, tryOnScopeDispose, onClickOutside, useBreakpoints, breakpointsTailwind, useTimeoutFn, useMouseInElement, useMediaQuery, useThrottle, useDebounceFn, useMouse, useDraggable, defaultDocument, tryOnMounted, useThrottleFn, useWindowSize, useElementSize, useElementBounding } from "@vueuse/core";
 import { useI18n, createI18n } from "vue-i18n";
 import { createFocusTrap } from "focus-trap";
 import { copy } from "@citruslime/vue-utils";
@@ -49,8 +49,8 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$12 = { class: "cl:absolute cl:left-5 cl:top-5" };
-const _hoisted_2$L = { class: "cl:font-semibold cl:ml-10 cl:p-4 cl:select-none cl:text-grey-5" };
-const _hoisted_3$t = { class: "cl:overflow-hidden" };
+const _hoisted_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 _sfc_main$1g = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -87,11 +87,11 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
               width: "20"
             }, null, 8, ["class"])
           ]),
-          createElementVNode("div", _hoisted_2$L, [
+          createElementVNode("div", _hoisted_2$M, [
             renderSlot(_ctx.$slots, "title")
           ])
         ], 2),
-        createElementVNode("div", _hoisted_3$t, [
+        createElementVNode("div", _hoisted_3$u, [
           createVNode(Transition, { name: "grow-down" }, {
             default: withCtx(() => [
               withDirectives(createElementVNode("div", mergeProps(_ctx.$attrs, { class: "cl:ml-10 cl:p-4" }), [
@@ -135,7 +135,7 @@ function removeNotification(notification) {
   notifications.value = notifications.value.filter((n) => n.id !== notification.id);
 }
 const _hoisted_1$10 = ["onClick"];
-const _hoisted_2$K = { class: "cl:flex-1 cl:select-none cl:text-ellipsis cl:w-64" };
+const _hoisted_2$L = { class: "cl:flex-1 cl:select-none cl:text-ellipsis cl:w-64" };
 const _sfc_main$1e = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -174,7 +174,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
               }],
               onClick: ($event) => unref(removeNotification)(notification)
             }), [
-              createElementVNode("span", _hoisted_2$K, toDisplayString(notification.message), 1),
+              createElementVNode("span", _hoisted_2$L, toDisplayString(notification.message), 1),
               createVNode(unref(Icon), {
                 class: "cl:inline-block cl:opacity-0 cl:transition-opacity group-hover:cl:opacity-100",
                 icon: "ph:x",
@@ -230,7 +230,7 @@ function _sfc_render$6(_ctx, _cache) {
 }
 const clUiLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1c, [["render", _sfc_render$6], ["__scopeId", "data-v-1eee625a"]]);
 const _hoisted_1$Z = ["disabled"];
-const _hoisted_2$J = {
+const _hoisted_2$K = {
   key: 0,
   class: "cl:absolute cl:bg-secondary-default/40 cl:flex cl:h-full cl:items-center cl:justify-center cl:left-0 cl:rounded-sm cl:top-0 cl:w-full"
 };
@@ -280,7 +280,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
         disabled: _ctx.disabled || _ctx.loading
       }), [
         renderSlot(_ctx.$slots, "default"),
-        _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_2$J, [
+        _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_2$K, [
           createVNode(clUiLoadingSpinner, { class: "cl:-translate-x-1/2 cl:after:h-6! cl:after:w-6! cl:h-6! cl:w-6!" })
         ])) : createCommentVNode("", true)
       ], 16, _hoisted_1$Z);
@@ -358,8 +358,8 @@ const cardSizes = [
   "large"
 ];
 const _hoisted_1$X = { class: "cl:sm:w-auto cl:w-full" };
-const _hoisted_2$I = { class: "cl:flex cl:flex-nowrap cl:gap-2 cl:text-grey-4 cl:text-xs cl:tracking-widest" };
-const _hoisted_3$s = {
+const _hoisted_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 = {
   key: 0,
   class: "cl:self-center"
 };
@@ -392,8 +392,8 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
         createElementVNode("div", {
           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$I, [
-            _ctx.$slots.label ? (openBlock(), createElementBlock("span", _hoisted_3$s, [
+          createElementVNode("div", _hoisted_2$J, [
+            _ctx.$slots.label ? (openBlock(), createElementBlock("span", _hoisted_3$t, [
               renderSlot(_ctx.$slots, "label")
             ])) : createCommentVNode("", true),
             _ctx.showRequiredAsterisk ? (openBlock(), createElementBlock("span", _hoisted_4$n, "*")) : createCommentVNode("", true)
@@ -577,7 +577,7 @@ const _hoisted_1$V = {
   key: 0,
   class: "cl:mt-1 cl:opacity-60 cl:text-primary-default"
 };
-const _hoisted_2$H = { class: "cl:overflow-y-auto cl:overscroll-y-none cl:p-2 cl:w-full" };
+const _hoisted_2$I = { class: "cl:overflow-y-auto cl:overscroll-y-none cl:p-2 cl:w-full" };
 const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -675,7 +675,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
                     renderSlot(_ctx.$slots, "title"),
                     _ctx.headerColour === "white" ? (openBlock(), createElementBlock("hr", _hoisted_1$V)) : createCommentVNode("", true)
                   ], 2),
-                  createElementVNode("div", _hoisted_2$H, [
+                  createElementVNode("div", _hoisted_2$I, [
                     renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ close })))
                   ]),
                   renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps({ close })))
@@ -692,7 +692,7 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$U = { class: "cl:bg-grey-0 cl:flex cl:p-1 cl:text-left" };
-const _hoisted_2$G = {
+const _hoisted_2$H = {
   key: 0,
   class: "cl:w-1/2"
 };
@@ -707,7 +707,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$U, [
-        _ctx.additionalText !== "" ? (openBlock(), createElementBlock("div", _hoisted_2$G, toDisplayString(_ctx.additionalText), 1)) : createCommentVNode("", true),
+        _ctx.additionalText !== "" ? (openBlock(), createElementBlock("div", _hoisted_2$H, toDisplayString(_ctx.additionalText), 1)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass({
             "cl:w-1/2": _ctx.additionalText !== "",
@@ -733,7 +733,7 @@ const _hoisted_1$T = {
   key: 0,
   class: "cl:w-1/2"
 };
-const _hoisted_2$F = { class: "cl:float-right cl:py-1 cl:text-black" };
+const _hoisted_2$G = { class: "cl:float-right cl:py-1 cl:text-black" };
 const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   __name: "cl-ui-combo-box-selectable",
   props: {
@@ -801,7 +801,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
             "cl:w-full": displayedParent.value === ""
           })
         }, toDisplayString(displayedText.value), 3),
-        withDirectives(createElementVNode("div", _hoisted_2$F, [
+        withDirectives(createElementVNode("div", _hoisted_2$G, [
           createVNode(unref(Icon), {
             class: "cl:transition-colors",
             icon: "ph:plus"
@@ -814,11 +814,11 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$S = ["onKeyup"];
-const _hoisted_2$E = {
+const _hoisted_2$F = {
   key: 0,
   class: "cl:absolute cl:bg-off-white cl:flex cl:h-full cl:items-center cl:justify-center cl:top-0 cl:w-full cl:z-20"
 };
-const _hoisted_3$r = { class: "cl:bg-white cl:flex cl:p-2 cl:pb-1 cl:sticky cl:top-0 cl:w-full cl:z-10" };
+const _hoisted_3$s = { class: "cl:bg-white cl:flex cl:p-2 cl:pb-1 cl:sticky cl:top-0 cl:w-full cl:z-10" };
 const _hoisted_4$m = { class: "cl:inline-block cl:w-full" };
 const _hoisted_5$g = { key: 6 };
 const _sfc_main$14 = /* @__PURE__ */ defineComponent({
@@ -955,10 +955,10 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
         ],
         onKeyup: withKeys(withModifiers(onKeyboardEnter, ["prevent", "stop"]), ["enter"])
       }, [
-        _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_2$E, [
+        _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_2$F, [
           createVNode(clUiLoadingSpinner)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3$r, [
+        createElementVNode("div", _hoisted_3$s, [
           createElementVNode("div", _hoisted_4$m, [
             createVNode(_sfc_main$18, {
               id: `cl-ui-combo-box-search-input-${_ctx.objectType}`,
@@ -1026,8 +1026,8 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$R = { class: "cl:flex cl:rounded-lg" };
-const _hoisted_2$D = { class: "cl:inline-block cl:w-full" };
-const _hoisted_3$q = { class: "cl:pointer-events-none cl:relative cl:top-0.5" };
+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_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$f = ["disabled"];
 const _hoisted_6$a = ["disabled"];
@@ -1241,7 +1241,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
         ref: outsideRef
       }, attrs, { class: "cl:relative" }), [
         createElementVNode("div", _hoisted_1$R, [
-          createElementVNode("div", _hoisted_2$D, [
+          createElementVNode("div", _hoisted_2$E, [
             createVNode(_sfc_main$18, {
               id: unref(id),
               ref_key: "inputRef",
@@ -1264,7 +1264,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
               _: 1
             }, 8, ["id", "modelValue", "class", "placeholder", "disabled"])
           ]),
-          withDirectives(createElementVNode("div", _hoisted_3$q, [
+          withDirectives(createElementVNode("div", _hoisted_3$r, [
             createElementVNode("div", _hoisted_4$l, [
               createTextVNode(toDisplayString(unref(t2)("comboBox.required")) + " ", 1),
               createVNode(unref(Icon), {
@@ -1404,11 +1404,11 @@ function isComboBoxCreateRequest(objectToTest) {
 }
 const _sfc_main$12 = {};
 const _hoisted_1$Q = { class: "cl:flex cl:flex-wrap cl:left-0 cl:mt-4 cl:w-full" };
-const _hoisted_2$C = {
+const _hoisted_2$D = {
   key: 0,
   class: "cl:w-full"
 };
-const _hoisted_3$p = {
+const _hoisted_3$q = {
   key: 1,
   class: "cl:leading-10 cl:text-sm cl:w-full"
 };
@@ -1416,10 +1416,10 @@ const _hoisted_4$k = { class: "cl:float-left" };
 const _hoisted_5$e = { class: "cl:float-right" };
 function _sfc_render$5(_ctx, _cache) {
   return openBlock(), createElementBlock("div", _hoisted_1$Q, [
-    _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_2$C, [
+    _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_2$D, [
       renderSlot(_ctx.$slots, "default")
     ])) : createCommentVNode("", true),
-    _ctx.$slots.left || _ctx.$slots.right ? (openBlock(), createElementBlock("div", _hoisted_3$p, [
+    _ctx.$slots.left || _ctx.$slots.right ? (openBlock(), createElementBlock("div", _hoisted_3$q, [
       createElementVNode("span", _hoisted_4$k, [
         renderSlot(_ctx.$slots, "left")
       ]),
@@ -1498,8 +1498,8 @@ const _hoisted_1$N = {
   key: 0,
   class: "cl:flex cl:gap-2 cl:justify-between cl:mb-2 cl:w-full"
 };
-const _hoisted_2$B = { key: 1 };
-const _hoisted_3$o = { class: "cl:flex cl:flex-wrap cl:gap-1 cl:lg:flex-nowrap cl:lg:gap-2 cl:md:justify-end cl:pb-2" };
+const _hoisted_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_4$j = { class: "cl:basis-full cl:col-span-2 cl:grow cl:lg:basis-0" };
 const _hoisted_5$d = {
   key: 2,
@@ -1532,7 +1532,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
             class: "cl:flex-1 cl:lg:flex-initial"
           });
         }), 64))
-      ])) : (openBlock(), createElementBlock("div", _hoisted_2$B, [
+      ])) : (openBlock(), createElementBlock("div", _hoisted_2$C, [
         createElementVNode("div", {
           class: normalizeClass(["cl:lg:hidden cl:mb-2 cl:text-sm", {
             "cl:hidden": _ctx.options.hideGridMobileView
@@ -1540,7 +1540,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
         }, [
           createElementVNode("strong", null, toDisplayString(unref(t2)("grid.gridTools")), 1)
         ], 2),
-        createElementVNode("div", _hoisted_3$o, [
+        createElementVNode("div", _hoisted_3$p, [
           createElementVNode("div", _hoisted_4$j, [
             renderSlot(_ctx.$slots, "additional-grid-actions", normalizeProps(guardReactiveProps({
               loading: _ctx.loading,
@@ -1624,7 +1624,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$M = ["for"];
-const _hoisted_2$A = ["required", "disabled"];
+const _hoisted_2$B = ["required", "disabled"];
 const _sfc_main$Z = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -1681,7 +1681,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
             }, ["stop", "prevent"]), ["enter"])),
             onFocus: _cache[2] || (_cache[2] = ($event) => emit("focus")),
             onBlur: _cache[3] || (_cache[3] = ($event) => emit("blur"))
-          }), null, 16, _hoisted_2$A), [
+          }), null, 16, _hoisted_2$B), [
             [vModelCheckbox, modelValue.value]
           ])
         ]),
@@ -2313,11 +2313,11 @@ const _hoisted_1$L = {
   key: 3,
   class: "cl:inline-block cl:whitespace-nowrap"
 };
-const _hoisted_2$z = {
+const _hoisted_2$A = {
   key: 4,
   class: "cl:inline-block cl:whitespace-nowrap"
 };
-const _hoisted_3$n = {
+const _hoisted_3$o = {
   key: 5,
   class: "cl:inline-block cl:whitespace-nowrap"
 };
@@ -2425,7 +2425,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$z, toDisplayString(formatNumberToString(_ctx.data[_ctx.column.field], unref(locale2))), 1)) : _ctx.column.field !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_3$n, [
+      ], 64)) : _ctx.column.type === "list" && _ctx.column.field !== void 0 && _ctx.column.listEntries !== void 0 ? (openBlock(), createElementBlock("span", _hoisted_1$L, toDisplayString(unref(t2)(((_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, [
         createElementVNode("span", {
           title: showUntruncatedStringValue.value ? _ctx.data[_ctx.column.field] : void 0,
           innerHTML: formatString()
@@ -2594,8 +2594,8 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$K = ["colspan"];
-const _hoisted_2$y = ["colspan"];
-const _hoisted_3$m = { key: 2 };
+const _hoisted_2$z = ["colspan"];
+const _hoisted_3$n = { key: 2 };
 const _hoisted_4$h = ["colspan"];
 const _hoisted_5$c = { class: "cl:flex cl:flex-wrap cl:justify-center cl:text-center cl:text-sm cl:w-full" };
 const _hoisted_6$9 = { key: 0 };
@@ -2821,10 +2821,10 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
               createElementVNode("td", {
                 colspan: _ctx.columns.length,
                 class: "cl:gap-1 cl:lg:px-1 cl:py-2 cl:text-xs"
-              }, "   ", 8, _hoisted_2$y)
+              }, "   ", 8, _hoisted_2$z)
             ], 2);
           }), 128)) : createCommentVNode("", true)
-        ], 64)) : !_ctx.loading ? (openBlock(), createElementBlock("tr", _hoisted_3$m, [
+        ], 64)) : !_ctx.loading ? (openBlock(), createElementBlock("tr", _hoisted_3$n, [
           createElementVNode("td", {
             colspan: _ctx.columns.length
           }, [
@@ -2853,8 +2853,8 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$J = ["value", "inputmode", "disabled", "placeholder"];
-const _hoisted_2$x = { class: "cl:absolute cl:flex-col cl:flex-nowrap cl:h-full cl:hidden cl:justify-between cl:py-0.5 cl:right-1 cl:text-xs cl:top-0 cl:xl:flex" };
-const _hoisted_3$l = ["disabled"];
+const _hoisted_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_4$g = ["disabled"];
 const _sfc_main$U = /* @__PURE__ */ defineComponent({
   ...{
@@ -3033,7 +3033,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
                 _cache[3] || (_cache[3] = withKeys(withModifiers(($event) => incrementOrDecrement(false), ["prevent"]), ["up"]))
               ]
             }), null, 16, _hoisted_1$J)),
-            withDirectives(createElementVNode("div", _hoisted_2$x, [
+            withDirectives(createElementVNode("div", _hoisted_2$y, [
               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,
@@ -3044,7 +3044,7 @@ const _sfc_main$U = /* @__PURE__ */ defineComponent({
                 ]
               }, [
                 createVNode(_component_icon, { icon: "ph:caret-up-bold" })
-              ], 40, _hoisted_3$l),
+              ], 40, _hoisted_3$m),
               createElementVNode("button", {
                 class: "cl:bg-secondary-light/30 cl:border cl:border-grey-3 cl:hover:bg-secondary-light/20 cl:px-1 cl:rounded",
                 disabled: _ctx.disabled,
@@ -3085,8 +3085,8 @@ const _hoisted_1$I = {
   key: 0,
   class: "cl:flex cl:flex-col cl:lg:flex-row cl:lg:gap-2"
 };
-const _hoisted_2$w = { class: "cl:border cl:border-off-white cl:flex cl:items-center cl:lg:px-4 cl:lg:py-3 cl:mt-2 cl:p-2 cl:rounded-lg cl:w-full" };
-const _hoisted_3$k = { class: "cl:border cl:border-off-white cl:lg:px-4 cl:lg:py-3 cl:mt-2 cl:p-2 cl:rounded-lg" };
+const _hoisted_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_4$f = ["inert"];
 const _hoisted_5$b = { 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" };
@@ -3166,14 +3166,14 @@ 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$w, [
+        createElementVNode("div", _hoisted_2$x, [
           createVNode(unref(_sfc_main$$), { words: 3 }),
           createVNode(unref(_sfc_main$$), {
             class: "cl:ml-auto",
             words: 2
           })
         ]),
-        createElementVNode("div", _hoisted_3$k, [
+        createElementVNode("div", _hoisted_3$l, [
           createVNode(unref(clUiSkeletonInput), { class: "cl:w-64" })
         ])
       ])) : _ctx.loading || ((_b = (_a = _ctx.data) == null ? void 0 : _a.results) == null ? void 0 : _b.length) && _ctx.request ? (openBlock(), createElementBlock("div", {
@@ -3460,7 +3460,7 @@ function getMaxDateValue(max, timeZone, currentValue, calendarType) {
   return currentValue;
 }
 const _hoisted_1$H = { class: "cl:gap-1 cl:grid cl:grid-cols-2" };
-const _hoisted_2$v = ["onClick"];
+const _hoisted_2$w = ["onClick"];
 const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "cl-ui-quick-dates-group",
   props: {
@@ -3484,7 +3484,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
             onClick: ($event) => emit("quick-date-selected", date)
           }, [
             createElementVNode("span", null, toDisplayString(unref(t2)(date.translationKey)), 1)
-          ], 10, _hoisted_2$v);
+          ], 10, _hoisted_2$w);
         }), 128))
       ]);
     };
@@ -3588,7 +3588,7 @@ const allQuickDates = [
   ...currentQuickDates
 ];
 const _hoisted_1$G = { class: "cl:p-2 cl:pt-0" };
-const _hoisted_2$u = {
+const _hoisted_2$v = {
   key: 0,
   class: "cl:mt-2 cl:opacity-20"
 };
@@ -3602,6 +3602,7 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const isMediumScreen = useMediaQuery("(max-height: 911px)");
     const { t: t2 } = useI18n();
     const quickDateGroups = computed(() => {
       const groups = [];
@@ -3636,19 +3637,25 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$G, [
         createElementVNode("div", null, toDisplayString(unref(t2)("quickDates.quickDatesHeader")), 1),
-        (openBlock(true), createElementBlock(Fragment, null, renderList(quickDateGroups.value, (group, index2) => {
-          return openBlock(), createElementBlock("div", {
-            key: index2,
-            class: "cl:pt-2"
-          }, [
-            createVNode(_sfc_main$S, {
-              dates: group,
-              "selected-quick-date": _ctx.selectedQuickDate,
-              onQuickDateSelected: _cache[0] || (_cache[0] = ($event) => emit("quick-date-selected", $event))
-            }, null, 8, ["dates", "selected-quick-date"]),
-            index2 < quickDateGroups.value.length - 1 ? (openBlock(), createElementBlock("div", _hoisted_2$u)) : createCommentVNode("", true)
-          ]);
-        }), 128))
+        createElementVNode("div", {
+          class: normalizeClass({
+            "cl:max-h-[100px] cl:overflow-y-auto": unref(isMediumScreen)
+          })
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(quickDateGroups.value, (group, index2) => {
+            return openBlock(), createElementBlock("div", {
+              key: index2,
+              class: "cl:pt-2"
+            }, [
+              createVNode(_sfc_main$S, {
+                dates: group,
+                "selected-quick-date": _ctx.selectedQuickDate,
+                onQuickDateSelected: _cache[0] || (_cache[0] = ($event) => emit("quick-date-selected", $event))
+              }, null, 8, ["dates", "selected-quick-date"]),
+              index2 < quickDateGroups.value.length - 1 ? (openBlock(), createElementBlock("div", _hoisted_2$v)) : createCommentVNode("", true)
+            ]);
+          }), 128))
+        ], 2)
       ]);
     };
   }
@@ -3765,8 +3772,8 @@ 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$t = ["disabled"];
-const _hoisted_3$j = { class: "cl:max-w-max" };
+const _hoisted_2$u = ["disabled"];
+const _hoisted_3$k = { class: "cl:max-w-max" };
 const _hoisted_4$e = { class: "cl:flex cl:flex-col cl:gap-1 cl:w-full" };
 const _hoisted_5$a = ["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" };
@@ -3832,8 +3839,8 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
               disabled: _ctx.disabled,
               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$t),
-            createElementVNode("div", _hoisted_3$j, [
+            }, toDisplayString(unref(formatNumberAsDecimal)(_ctx.min, _ctx.precision)), 9, _hoisted_2$u),
+            createElementVNode("div", _hoisted_3$k, [
               withDirectives(createElementVNode("div", _hoisted_4$e, [
                 withDirectives(createElementVNode("input", mergeProps({
                   ref_key: "sliderRef",
@@ -4000,7 +4007,7 @@ const _hoisted_1$E = {
   key: 1,
   class: "cl:relative"
 };
-const _hoisted_2$s = ["value", "disabled", "placeholder"];
+const _hoisted_2$t = ["value", "disabled", "placeholder"];
 const _sfc_main$N = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -4061,7 +4068,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
           placeholder: currentPlaceholder.value,
           onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("focus")),
           onBlur: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("blur"))
-        }, toHandlers(_ctx.events, true)), null, 16, _hoisted_2$s),
+        }, toHandlers(_ctx.events, true)), null, 16, _hoisted_2$t),
         createVNode(unref(Icon), {
           class: "cl:absolute cl:bg-transparent cl:cursor-text cl:left-2 cl:text-grey-4 cl:top-3.5 icon",
           icon: _ctx.type === "time" ? "ph-clock" : "ph:calendar",
@@ -4093,7 +4100,7 @@ const _hoisted_1$D = {
   key: 0,
   class: "cl:px-3 cl:py-3 cl:w-full"
 };
-const _hoisted_2$r = {
+const _hoisted_2$s = {
   key: 0,
   class: "cl:px-3 cl:py-3 cl:w-full"
 };
@@ -4292,7 +4299,7 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
               }), null, 16, ["date", "events", "type", "placeholder", "required", "disabled", "force-icon-display"])
             ]),
             footer: withCtx(() => [
-              todayButtonVisible.value ? (openBlock(), createElementBlock("div", _hoisted_2$r, [
+              todayButtonVisible.value ? (openBlock(), createElementBlock("div", _hoisted_2$s, [
                 createElementVNode("button", {
                   class: "cl:bg-primary-default cl:hover:primary-light cl:px-3 cl:py-1 cl:rounded-md cl:text-black cl:w-full",
                   onClick: setToday
@@ -4317,8 +4324,10 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$C = {
   key: 1,
-  class: "cl:flex cl:flex-col cl:gap-2 cl:p-2 cl:w-full"
+  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 _sfc_main$L = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -4399,7 +4408,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     }
     const isMediumScreen = useMediaQuery("(min-width: 768px)");
     const dateRangeColumnCount = computed(() => isMediumScreen.value ? 2 : 1);
-    const showQuickDates = useMediaQuery("(min-height: 800px)");
+    const showQuickDates = useMediaQuery("(min-height: 900px)");
     const internalEntrySelectStartDate = ref(null);
     const internalEntrySelectEndDate = ref(null);
     function handleEntrySelectDateRangeUpdate() {
@@ -4489,52 +4498,57 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
                 onQuickDateSelected: handleQuickDateSelection
               }, null, 8, ["scope", "selected-quick-date", "current-date-range"])) : createCommentVNode("", true),
               _ctx.manualDateSelection ? (openBlock(), createElementBlock("div", _hoisted_1$C, [
-                createVNode(_sfc_main$M, {
-                  id: "dateInputStart",
-                  modelValue: internalEntrySelectStartDate.value,
-                  "onUpdate:modelValue": [
-                    _cache[1] || (_cache[1] = ($event) => internalEntrySelectStartDate.value = $event),
-                    handleEntrySelectDateRangeUpdate
-                  ],
-                  type: "date",
-                  "date-format-locale": _ctx.dateFormatLocale,
-                  disabled: _ctx.disabled,
-                  "time-zone": _ctx.timeZone,
-                  "min-date": _ctx.minDate,
-                  "max-date": _ctx.maxDate,
-                  required: true,
-                  "force-icon-display": true,
-                  "popover-placement": _ctx.popoverPlacement,
-                  "show-popover": true
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(unref(t2)("datetime.startDate")), 1)
-                  ]),
-                  _: 1
-                }, 8, ["modelValue", "date-format-locale", "disabled", "time-zone", "min-date", "max-date", "popover-placement"]),
-                createVNode(_sfc_main$M, {
-                  id: "dateInputEnd",
-                  modelValue: internalEntrySelectEndDate.value,
-                  "onUpdate:modelValue": [
-                    _cache[2] || (_cache[2] = ($event) => internalEntrySelectEndDate.value = $event),
-                    handleEntrySelectDateRangeUpdate
-                  ],
-                  type: "date",
-                  "date-format-locale": _ctx.dateFormatLocale,
-                  disabled: _ctx.disabled,
-                  "time-zone": _ctx.timeZone,
-                  "min-date": _ctx.minDate,
-                  "max-date": _ctx.maxDate,
-                  required: true,
-                  "force-icon-display": true,
-                  "popover-placement": _ctx.popoverPlacement,
-                  "show-popover": true
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(unref(t2)("datetime.endDate")), 1)
-                  ]),
-                  _: 1
-                }, 8, ["modelValue", "date-format-locale", "disabled", "time-zone", "min-date", "max-date", "popover-placement"])
+                createElementVNode("div", _hoisted_2$r, [
+                  createVNode(_sfc_main$M, {
+                    id: "dateInputStart",
+                    modelValue: internalEntrySelectStartDate.value,
+                    "onUpdate:modelValue": [
+                      _cache[1] || (_cache[1] = ($event) => internalEntrySelectStartDate.value = $event),
+                      handleEntrySelectDateRangeUpdate
+                    ],
+                    type: "date",
+                    "date-format-locale": _ctx.dateFormatLocale,
+                    disabled: _ctx.disabled,
+                    "time-zone": _ctx.timeZone,
+                    "min-date": _ctx.minDate,
+                    "max-date": _ctx.maxDate,
+                    required: true,
+                    "force-icon-display": true,
+                    "popover-placement": _ctx.popoverPlacement,
+                    "show-popover": true
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(unref(t2)("datetime.startDate")), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["modelValue", "date-format-locale", "disabled", "time-zone", "min-date", "max-date", "popover-placement"])
+                ]),
+                createElementVNode("div", _hoisted_3$j, [
+                  createVNode(_sfc_main$M, {
+                    id: "dateInputEnd",
+                    modelValue: internalEntrySelectEndDate.value,
+                    "onUpdate:modelValue": [
+                      _cache[2] || (_cache[2] = ($event) => internalEntrySelectEndDate.value = $event),
+                      handleEntrySelectDateRangeUpdate
+                    ],
+                    type: "date",
+                    class: "cl:w-full",
+                    "date-format-locale": _ctx.dateFormatLocale,
+                    disabled: _ctx.disabled,
+                    "time-zone": _ctx.timeZone,
+                    "min-date": _ctx.minDate,
+                    "max-date": _ctx.maxDate,
+                    required: true,
+                    "force-icon-display": true,
+                    "popover-placement": _ctx.popoverPlacement,
+                    "show-popover": true
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(unref(t2)("datetime.endDate")), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["modelValue", "date-format-locale", "disabled", "time-zone", "min-date", "max-date", "popover-placement"])
+                ])
               ])) : createCommentVNode("", true)
             ]),
             _: 1