@citruslime/ui 2.0.0-beta.8 → 2.0.0-beta.9

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

@@ -34,7 +34,7 @@ import { Icon } from "@iconify/vue";
 import { defineComponent, ref, watch, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createElementVNode, normalizeClass, withKeys, toDisplayString, withDirectives, renderSlot, vShow, createVNode, reactive, toRefs, nextTick, createBlock, Teleport, unref, mergeProps, computed, onMounted, onUnmounted, createCommentVNode, normalizeProps, guardReactiveProps, withModifiers, withCtx, createTextVNode, vModelText, isRef, watchEffect, normalizeStyle, createSlots, vModelDynamic, Transition, resolveDynamicComponent } from "vue";
 import { createI18n, useI18n } from "vue-i18n";
 import Flatpickr from "flatpickr";
-const _hoisted_1$n = { class: "cl-border cl-border-grey-2" };
+const _hoisted_1$o = { class: "cl-border cl-border-grey-2" };
 const _hoisted_2$k = ["tabindex", "onClick", "onKeyup"];
 const _hoisted_3$f = { class: "cl-bg-white cl-border-b cl-border-grey-2 cl-p-6 cl-text-sm" };
 const _sfc_main$o = /* @__PURE__ */ defineComponent({
@@ -74,7 +74,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_icon = resolveComponent("icon");
-      return openBlock(), createElementBlock("ul", _hoisted_1$n, [
+      return openBlock(), createElementBlock("ul", _hoisted_1$o, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(itemList.value, (item, index) => {
           return openBlock(), createElementBlock("li", {
             key: index,
@@ -552,7 +552,7 @@ function showNotification(notification) {
 function removeNotification(notification) {
   notifications.value = notifications.value.filter((n) => n.id !== notification.id);
 }
-const _hoisted_1$m = ["onClick"];
+const _hoisted_1$n = ["onClick"];
 const _hoisted_2$j = { class: "cl-flex-1 cl-overflow-ellipsis cl-select-none cl-w-64" };
 const __default__$4 = {
   inheritAttrs: false
@@ -590,7 +590,7 @@ function setup$4(__props) {
               size: 16,
               weight: "bold"
             })
-          ], 16, _hoisted_1$m);
+          ], 16, _hoisted_1$n);
         }), 128))
       ], 2)
     ], 8, ["to"]);
@@ -603,7 +603,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
   },
   setup: setup$4
 }));
-const _hoisted_1$l = { class: "cl-absolute cl-flex cl-flex-wrap cl-h-screen cl-max-h-screen cl-max-w-full cl-min-h-screen cl-min-w-full cl-w-full" };
+const _hoisted_1$m = { class: "cl-absolute cl-flex cl-flex-wrap cl-h-screen cl-max-h-screen cl-max-w-full cl-min-h-screen cl-min-w-full cl-w-full" };
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
   props: {
     removePadding: { default: false }
@@ -612,7 +612,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createVNode(_sfc_main$n),
-        createElementVNode("div", _hoisted_1$l, [
+        createElementVNode("div", _hoisted_1$m, [
           renderSlot(_ctx.$slots, "header"),
           createElementVNode("div", {
             class: normalizeClass(["cl-content-start cl-flex cl-flex-nowrap cl-items-stretch cl-max-h-screen cl-relative cl-w-full", {
@@ -641,12 +641,12 @@ var _export_sfc = (sfc, props) => {
   return sfc;
 };
 const _sfc_main$l = {};
-const _hoisted_1$k = { class: "loading-spinner" };
-function _sfc_render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$k);
+const _hoisted_1$l = { class: "loading-spinner" };
+function _sfc_render$2(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$l);
 }
-var ClUiLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$1], ["__scopeId", "data-v-60d7cfd0"]]);
-const _hoisted_1$j = ["disabled"];
+var ClUiLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$2], ["__scopeId", "data-v-60d7cfd0"]]);
+const _hoisted_1$k = ["disabled"];
 const __default__$3 = {
   inheritAttrs: false
 };
@@ -671,7 +671,7 @@ function setup$3(__props) {
         disabled: __props.disabled
       }), [
         renderSlot(_ctx.$slots, "default")
-      ], 16, _hoisted_1$j), [
+      ], 16, _hoisted_1$k), [
         [vShow, !__props.loading]
       ])
     ], 64);
@@ -1160,7 +1160,7 @@ function getLocale(locale) {
   return result;
 }
 var clUiCalendar_vue_vue_type_style_index_0_lang = "";
-const _hoisted_1$i = ["placeholder", "disabled"];
+const _hoisted_1$j = ["placeholder", "disabled"];
 const _hoisted_2$i = { class: "cl-absolute cl-bg-white cl-flex cl-right-2 cl-text-grey-4 cl-top-3" };
 const _sfc_main$j = /* @__PURE__ */ defineComponent({
   props: {
@@ -1288,7 +1288,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           type: "text",
           placeholder: __props.type === "date" ? __props.datePlaceholder : __props.dateTimePlaceholder,
           disabled: __props.disabled
-        }), null, 16, _hoisted_1$i),
+        }), null, 16, _hoisted_1$j),
         withDirectives(createVNode(_component_icon, {
           class: "cl-absolute cl-bg-white cl-right-2 cl-text-grey-4 cl-top-3",
           icon: "ph:calendar",
@@ -1321,51 +1321,39 @@ const calendarTypes = [
   "date",
   "datetime"
 ];
+const _hoisted_1$i = { key: 0 };
 const _sfc_main$i = /* @__PURE__ */ defineComponent({
   props: {
     size: { default: "medium" },
-    title: { default: "" },
-    hover: { default: false },
-    shadowSize: { default: "medium" },
-    padImage: { default: false }
+    hover: { default: false }
   },
   setup(__props) {
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["cl-overflow-hidden cl-relative", {
-          "cl-shadow": __props.shadowSize === "small",
-          "cl-shadow-md": __props.shadowSize === "medium",
-          "cl-shadow-lg": __props.shadowSize === "large",
-          "hover:cl-shadow-md": __props.hover && __props.shadowSize === "small",
-          "hover:cl-shadow-lg": __props.hover && __props.shadowSize === "medium",
-          "hover:cl-shadow-xl": __props.hover && __props.shadowSize === "large"
+        class: normalizeClass(["cl-border-grey-0 cl-overflow-hidden cl-relative cl-rounded-md cl-shadow-lg", {
+          "cl-cursor-pointer hover:cl-shadow-xl hover:cl-border": __props.hover
         }])
       }, [
-        _ctx.$slots.image ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: normalizeClass({
-            "cl-p-2": __props.size === "small" && __props.padImage,
-            "cl-p-4": __props.size === "medium" && __props.padImage,
-            "cl-p-8": __props.size === "large" && __props.padImage
-          })
-        }, [
+        _ctx.$slots.image ? (openBlock(), createElementBlock("div", _hoisted_1$i, [
           renderSlot(_ctx.$slots, "image")
-        ], 2)) : createCommentVNode("", true),
-        __props.title !== "" ? (openBlock(), createElementBlock("div", {
+        ])) : createCommentVNode("", true),
+        _ctx.$slots.title ? (openBlock(), createElementBlock("div", {
           key: 1,
           class: normalizeClass(["cl-border-grey-2 cl-font-normal", {
-            "cl-p-2 cl-text-xl cl-leading-8": __props.size === "small",
-            "cl-p-4 cl-text-2xl cl-leading-9": __props.size === "medium",
-            "cl-p-8 cl-text-4xl cl-leading-10": __props.size === "large",
-            "cl-border-t": _ctx.$slots.image && __props.padImage
+            "cl-p-2 cl-text-2xl cl-leading-8": __props.size === "small",
+            "cl-p-4 cl-text-3xl cl-leading-9": __props.size === "medium",
+            "cl-p-6 cl-text-4xl cl-leading-10": __props.size === "large",
+            "cl-border-t": _ctx.$slots.image
           }])
-        }, toDisplayString(__props.title), 3)) : createCommentVNode("", true),
+        }, [
+          renderSlot(_ctx.$slots, "title")
+        ], 2)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass(["cl-border-grey-2", {
             "cl-p-2": __props.size === "small",
             "cl-p-4": __props.size === "medium",
-            "cl-p-8": __props.size === "large",
-            "cl-border-t": _ctx.$slots.image && __props.padImage && __props.title === "" || __props.title !== ""
+            "cl-p-6": __props.size === "large",
+            "cl-border-t": _ctx.$slots.image || _ctx.$slots.title
           }])
         }, [
           renderSlot(_ctx.$slots, "default")
@@ -1375,7 +1363,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
           class: normalizeClass(["cl-border-grey-2 cl-border-t", {
             "cl-p-2": __props.size === "small",
             "cl-p-4": __props.size === "medium",
-            "cl-p-8": __props.size === "large"
+            "cl-p-6": __props.size === "large"
           }])
         }, [
           renderSlot(_ctx.$slots, "footer")
@@ -1384,6 +1372,11 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const cardSizes = [
+  "small",
+  "medium",
+  "large"
+];
 const _hoisted_1$h = { class: "cl-align-items-center cl-bg-black cl-bg-opacity-40 cl-bottom-0 cl-fixed cl-flex cl-h-full cl-justify-center cl-left-0 cl-right-0 cl-top-0 cl-w-full cl-z-40" };
 const _hoisted_2$h = { class: "cl-border-b cl-border-grey-2 cl-font-semibold cl-h-11 cl-leading-10 cl-overflow-ellipsis cl-overflow-hidden cl-pl-2 cl-pr-8 cl-text-2xl cl-w-full cl-whitespace-nowrap" };
 const _hoisted_3$e = { class: "cl-p-2 cl-text-right cl-text-sm cl-w-full" };
@@ -1584,6 +1577,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     }
     watch(() => props.selectedIndex, () => updateHighlight());
     return (_ctx, _cache) => {
+      var _a, _b;
       const _component_icon = resolveComponent("icon");
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["cl-border-b cl-border-grey-0 cl-border-t cl-cursor-pointer cl-flex cl-p-1", {
@@ -1594,7 +1588,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         onMousemove: _cache[0] || (_cache[0] = ($event) => onHover(true)),
         onMouseleave: _cache[1] || (_cache[1] = ($event) => onHover(false))
       }, [
-        __props.option !== null && __props.option.parentId !== 0 && __props.option.parentId !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_1$f, toDisplayString(unref(displayedParent)), 1)) : createCommentVNode("", true),
+        __props.option !== null && ((_a = __props.option) == null ? void 0 : _a.parentId) !== 0 && ((_b = __props.option) == null ? void 0 : _b.parentId) !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_1$f, toDisplayString(unref(displayedParent)), 1)) : createCommentVNode("", true),
         createElementVNode("div", {
           class: normalizeClass({
             "cl-w-1/2": unref(displayedParent) !== "",
@@ -1616,7 +1610,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
 const _hoisted_1$e = ["onKeyup"];
 const _hoisted_2$e = { class: "cl-flex" };
 const _hoisted_3$d = ["placeholder"];
-const _hoisted_4$c = { key: 5 };
+const _hoisted_4$d = { key: 5 };
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
   props: {
     loading: { default: false },
@@ -1741,6 +1735,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       return (_a = container.value) == null ? void 0 : _a.removeEventListener("keydown", onKeyboardShiftTab);
     });
     return (_ctx, _cache) => {
+      var _a;
       const _component_cl_ui_loading_spinner = resolveComponent("cl-ui-loading-spinner");
       return openBlock(), createElementBlock("div", {
         ref: (_value, _refs) => {
@@ -1779,12 +1774,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           text: __props.currentObjectName,
           onClearObject: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("clear-object"))
         }, null, 8, ["show-clear-button", "text"])) : createCommentVNode("", true),
-        __props.objectParentType !== "" && __props.results !== null && __props.results.length > 0 && __props.errorMessage === "" ? (openBlock(), createBlock(_sfc_main$g, {
+        __props.objectParentType !== "" && __props.results !== void 0 && __props.results.length > 0 && __props.errorMessage === "" ? (openBlock(), createBlock(_sfc_main$g, {
           key: 1,
           text: __props.objectType,
           "additional-text": __props.objectParentType
         }, null, 8, ["text", "additional-text"])) : createCommentVNode("", true),
-        __props.results !== null && __props.results.length === 0 && searchText.value.trim() !== "" && __props.canCreateNewObject === false && __props.errorMessage === "" ? (openBlock(), createBlock(_sfc_main$g, {
+        __props.results !== null && ((_a = __props.results) == null ? void 0 : _a.length) === 0 && searchText.value.trim() !== "" && __props.canCreateNewObject === false && __props.errorMessage === "" ? (openBlock(), createBlock(_sfc_main$g, {
           key: 2,
           text: unref(t)("comboBox.noResults", { object: __props.objectType })
         }, null, 8, ["text"])) : createCommentVNode("", true),
@@ -1802,7 +1797,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           onCreateObject: createObject,
           onOptionHighlighted: updateSelectedObjectIndex
         }, null, 8, ["text", "selected-index"])) : createCommentVNode("", true),
-        __props.errorMessage === "" && __props.results !== null ? (openBlock(), createElementBlock("div", _hoisted_4$c, [
+        __props.errorMessage === "" && __props.results !== null ? (openBlock(), createElementBlock("div", _hoisted_4$d, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.results, (result, index) => {
             return openBlock(), createBlock(_sfc_main$f, {
               key: index,
@@ -1820,12 +1815,9 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$d = { class: "cl-flex" };
 const _hoisted_2$d = ["placeholder", "disabled"];
-const _hoisted_3$c = {
-  key: 0,
-  class: "cl-relative cl-right-20"
-};
-const _hoisted_4$b = { class: "cl-absolute cl-flex cl-float-right cl-font-semibold cl-mt-2 cl-text-danger-default cl-text-sm" };
-const _hoisted_5$a = { class: "cl-mt-3" };
+const _hoisted_3$c = { class: "cl-relative cl-right-20 cl-top-0.5" };
+const _hoisted_4$c = { class: "cl-absolute cl-flex cl-float-right cl-font-semibold cl-mt-2 cl-text-danger-default cl-text-sm" };
+const _hoisted_5$b = { class: "cl-mt-3" };
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   props: {
     loading: { default: false },
@@ -1840,7 +1832,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     parentObjectCreatedResponse: { default: () => null },
     results: { default: () => [] },
     parentResults: { default: () => [] },
-    currentObject: { default: () => null }
+    currentObject: null
   },
   emits: {
     search: null,
@@ -1991,21 +1983,23 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
               "cl-cursor-pointer": __props.disabled === false
             }]),
             type: "text",
-            placeholder: unref(t)("comboBox.emptyHint", { object: __props.objectType }),
+            placeholder: unref(t)("comboBox.emptyHintText", { object: __props.objectType }),
             disabled: __props.disabled,
             onFocus: _cache[1] || (_cache[1] = ($event) => toggleDropdown(true))
           }, null, 42, _hoisted_2$d), [
             [vModelText, unref(currentText)]
           ]),
-          __props.required && __props.disabled === false ? (openBlock(), createElementBlock("div", _hoisted_3$c, [
-            createElementVNode("div", _hoisted_4$b, [
+          withDirectives(createElementVNode("div", _hoisted_3$c, [
+            createElementVNode("div", _hoisted_4$c, [
               createTextVNode(toDisplayString(unref(t)("comboBox.required")) + " ", 1),
               createVNode(_component_icon, {
                 class: "cl-ml-1 cl-mt-1",
                 icon: "ph:warning"
               })
             ])
-          ])) : createCommentVNode("", true),
+          ], 512), [
+            [vShow, __props.required && __props.disabled === false && __props.currentObject === null]
+          ]),
           createElementVNode("div", {
             class: normalizeClass(["cl-border cl-border-grey-1 cl-float-right cl-px-1 cl-py-2.5 cl-text-grey-3 cl-w-min hover:cl-bg-primary-default hover:cl-text-white", {
               "cl-bg-off-white cl-cursor-default hover:cl-bg-off-white hover:cl-text-grey-3": __props.disabled,
@@ -2048,7 +2042,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             ])
           ]),
           default: withCtx(() => [
-            __props.objectParentType !== "" ? (openBlock(), createBlock(_component_cl_ui_combo_box, {
+            __props.objectParentType ? (openBlock(), createBlock(_component_cl_ui_combo_box, {
               key: 0,
               "current-object": parentItem.value,
               "onUpdate:current-object": _cache[4] || (_cache[4] = ($event) => parentItem.value = $event),
@@ -2063,7 +2057,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
               onSearch: searchParent,
               onCreateObject: createParentObject
             }, null, 8, ["current-object", "results", "loading", "object-type", "object-created-response", "can-create-new-object", "can-clear-selected-object", "error-message"])) : createCommentVNode("", true),
-            createElementVNode("label", _hoisted_5$a, toDisplayString(unref(t)("comboBox.createProperty")), 1),
+            createElementVNode("label", _hoisted_5$b, toDisplayString(unref(t)("comboBox.createProperty")), 1),
             withDirectives(createElementVNode("input", {
               "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => objectToCreateValue.value = $event),
               type: "text"
@@ -2083,37 +2077,34 @@ function isComboBoxItem(objectToTest) {
 function isComboBoxCreateRequest(objectToTest) {
   return typeof objectToTest.name === "string";
 }
+const _sfc_main$c = {};
 const _hoisted_1$c = { class: "cl-flex cl-flex-wrap cl-left-0 cl-w-full" };
 const _hoisted_2$c = {
   key: 0,
   class: "cl-w-full"
 };
-const _hoisted_3$b = { class: "cl-leading-10 cl-text-sm cl-w-full" };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
-  props: {
-    leftText: { default: "" },
-    rightText: { default: "" }
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [
-        _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_2$c, [
-          renderSlot(_ctx.$slots, "default")
-        ])) : createCommentVNode("", true),
-        withDirectives(createElementVNode("div", _hoisted_3$b, [
-          withDirectives(createElementVNode("strong", { class: "cl-float-left" }, toDisplayString(__props.leftText), 513), [
-            [vShow, __props.leftText !== ""]
-          ]),
-          withDirectives(createElementVNode("strong", { class: "cl-float-right" }, toDisplayString(__props.rightText), 513), [
-            [vShow, __props.rightText !== ""]
-          ])
-        ], 512), [
-          [vShow, __props.leftText !== "" || __props.rightText !== ""]
-        ])
-      ]);
-    };
-  }
-});
+const _hoisted_3$b = {
+  key: 1,
+  class: "cl-leading-10 cl-text-sm cl-w-full"
+};
+const _hoisted_4$b = { class: "cl-float-left" };
+const _hoisted_5$a = { class: "cl-float-right" };
+function _sfc_render$1(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$c, [
+    _ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_2$c, [
+      renderSlot(_ctx.$slots, "default")
+    ])) : createCommentVNode("", true),
+    _ctx.$slots.left || _ctx.$slots.right ? (openBlock(), createElementBlock("div", _hoisted_3$b, [
+      createElementVNode("span", _hoisted_4$b, [
+        renderSlot(_ctx.$slots, "left")
+      ]),
+      createElementVNode("span", _hoisted_5$a, [
+        renderSlot(_ctx.$slots, "right")
+      ])
+    ])) : createCommentVNode("", true)
+  ]);
+}
+var clUiFooter = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$1]]);
 const _hoisted_1$b = { class: "cl-mr-2 lg:cl-hidden" };
 const _hoisted_2$b = { class: "cl-mr-2 lg:cl-hidden" };
 const _hoisted_3$a = ["checked"];
@@ -2624,8 +2615,8 @@ const _hoisted_12$3 = { class: "cl-flex cl-flex-wrap cl-mb-2 cl-text-sm cl-w-ful
 const _hoisted_13$3 = { class: "cl-mb-2 cl-text-grey-3 cl-w-full lg:cl-mb-0 lg:cl-mr-2 lg:cl-w-auto" };
 const _hoisted_14$2 = ["onClick"];
 const _hoisted_15$2 = { class: "cl-mb-2 cl-w-full lg:cl-p-2 md:cl-mb-0 md:cl-w-auto" };
-const _hoisted_16$2 = { class: "cl-block cl-mb-2 cl-text-grey-3 cl-w-full lg:cl-inline-block lg:cl-mb-0 lg:cl-mr-1 lg:cl-w-auto" };
-const _hoisted_17$2 = { class: "cl-block lg:cl-inline-block" };
+const _hoisted_16$1 = { class: "cl-block cl-mb-2 cl-text-grey-3 cl-w-full lg:cl-inline-block lg:cl-mb-0 lg:cl-mr-1 lg:cl-w-auto" };
+const _hoisted_17$1 = { class: "cl-block lg:cl-inline-block" };
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   props: {
     request: null,
@@ -2764,8 +2755,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             }), 64))
           ]),
           createElementVNode("ul", _hoisted_15$2, [
-            createElementVNode("li", _hoisted_16$2, toDisplayString(unref(t)("grid.totalRecords")), 1),
-            createElementVNode("li", _hoisted_17$2, toDisplayString(unref(n)(__props.data.totalRecords, unref(NumberFormat).INTEGER)), 1)
+            createElementVNode("li", _hoisted_16$1, toDisplayString(unref(t)("grid.totalRecords")), 1),
+            createElementVNode("li", _hoisted_17$1, toDisplayString(unref(n)(__props.data.totalRecords, unref(NumberFormat).INTEGER)), 1)
           ])
         ])
       ])) : createCommentVNode("", true);
@@ -2996,8 +2987,8 @@ const _hoisted_12$1 = { class: "cl-overflow-auto cl-w-full" };
 const _hoisted_13$1 = { class: "cl-min-w-full cl-table-fixed" };
 const _hoisted_14$1 = { class: "cl-hidden lg:cl-table-column-group" };
 const _hoisted_15$1 = { class: "cl-hidden lg:cl-table-header-group" };
-const _hoisted_16$1 = ["onClick"];
-const _hoisted_17$1 = { key: 1 };
+const _hoisted_16 = ["onClick"];
+const _hoisted_17 = { key: 1 };
 const _hoisted_18 = { key: 0 };
 const _hoisted_19 = { key: 1 };
 const _hoisted_20 = ["colspan"];
@@ -3253,7 +3244,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                         }, null, 512), [
                           [vShow, unref(currentRequest).sort !== null && unref(currentRequest).sort.sortOnColumn === column.field && unref(currentRequest).sort.sortByAscending === false]
                         ])
-                      ], 8, _hoisted_16$1)) : (openBlock(), createElementBlock("span", _hoisted_17$1, toDisplayString(column.caption), 1))
+                      ], 8, _hoisted_16)) : (openBlock(), createElementBlock("span", _hoisted_17, toDisplayString(column.caption), 1))
                     ], 4);
                   }), 128))
                 ]),
@@ -3420,8 +3411,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
 function isLanguageLocaleFormat(language) {
-  const localeRegex = /[a-z]{2}-[A-Z]{2}/gm;
-  const localeCodeFormatCorrect = localeRegex.test(language.localeCode);
+  const localeCodeFormatCorrect = /[a-z]{2}-[A-Z]{2}/gm.test(language.localeCode);
   return localeCodeFormatCorrect;
 }
 function isLanguageArray(arrayToTest) {
@@ -3437,20 +3427,19 @@ function isLanguageArray(arrayToTest) {
   return result;
 }
 function isLanguage(objectToTest) {
-  return typeof objectToTest.name === "string" && typeof objectToTest.nativeName === "string" && typeof objectToTest.localeCode === "string" && typeof objectToTest.svgCode === "string";
+  return typeof objectToTest.name === "string" && typeof objectToTest.nativeName === "string" && typeof objectToTest.localeCode === "string" && typeof objectToTest.icon === "string";
 }
-var clUiLanguageSwitcher_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$3 = {
   key: 0,
   class: "cl-flex cl-relative cl-select-none cl-w-auto cl-z-30"
 };
-const _hoisted_2$3 = { class: "cl-font-semibold cl-hidden cl-mr-4 cl-text-white cl-text-xs lg:cl-inline-block" };
-const _hoisted_3$3 = { class: "cl-absolute cl-bg-white cl-overflow-hidden cl-right-0 cl-rounded cl-shadow-xl cl-top-6 cl-z-30" };
+const _hoisted_2$3 = { class: "cl-font-semibold cl-hidden cl-mr-4 cl-text-xs lg:cl-inline-block" };
+const _hoisted_3$3 = { class: "cl-absolute cl-bg-white cl-border cl-border-grey-0 cl-overflow-hidden cl-right-0 cl-rounded cl-shadow-xl cl-text-black cl-top-6 cl-z-30" };
 const _hoisted_4$3 = ["data-localename", "data-localecode", "onClick"];
 const _hoisted_5$3 = { class: "cl-hidden cl-ml-2 cl-text-xs lg:cl-inline-flex" };
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   props: {
-    supportedLocales: null,
+    supportedLanguages: null,
     disabled: { default: false }
   },
   setup(__props) {
@@ -3459,9 +3448,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const localeToggleOpen = ref(false);
     const selectedLanguage = computed(() => {
       var _a;
-      return (_a = props.supportedLocales.find((l) => l.localeCode === locale.value)) != null ? _a : null;
+      return (_a = props.supportedLanguages.find((l) => l.localeCode === locale.value)) != null ? _a : null;
     });
-    const validLanguages = computed(() => props.supportedLocales.filter((e) => isLanguageLocaleFormat(e)).sort((a, b) => a.nativeName > b.nativeName ? 1 : b.nativeName > a.nativeName ? -1 : 0));
+    const validLanguages = computed(() => props.supportedLanguages.filter((e) => isLanguageLocaleFormat(e)).sort((a, b) => a.nativeName > b.nativeName ? 1 : b.nativeName > a.nativeName ? -1 : 0));
     function toggleLocaleSwitcher() {
       if (!props.disabled) {
         localeToggleOpen.value = !localeToggleOpen.value;
@@ -3473,6 +3462,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
+      const _component_icon = resolveComponent("icon");
       return unref(selectedLanguage) !== null && unref(isLanguageLocaleFormat)(unref(selectedLanguage)) ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
         createElementVNode("div", {
           class: normalizeClass(["cl-flex cl-items-center", {
@@ -3480,33 +3470,29 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           }]),
           onClick: toggleLocaleSwitcher
         }, [
-          createElementVNode("span", {
-            class: "cl-inline-block cl-mr-3 flag-svg",
-            style: normalizeStyle({
-              "background": `url('${unref(selectedLanguage).svgCode}')`
-            })
-          }, null, 4),
+          createVNode(_component_icon, {
+            class: "cl-inline-block cl-mr-3",
+            icon: unref(selectedLanguage).icon
+          }, null, 8, ["icon"]),
           createElementVNode("span", _hoisted_2$3, toDisplayString(unref(selectedLanguage).nativeName), 1)
         ], 2),
         withDirectives(createElementVNode("div", _hoisted_3$3, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(validLanguages), (location, index) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(validLanguages), (language, index) => {
             return openBlock(), createElementBlock("div", {
               key: index,
               class: "cl-border-b cl-border-grey-0 cl-content-center cl-cursor-pointer cl-flex cl-items-center cl-p-2 cl-text-center cl-transition-colors hover:cl-bg-grey-0 last-child:cl-border-b-0 last:cl-border-b-0",
-              "data-localename": location.name,
-              "data-localecode": location.localeCode,
+              "data-localename": language.name,
+              "data-localecode": language.localeCode,
               onClick: ($event) => {
-                locale.value = location.localeCode;
+                locale.value = language.localeCode;
                 toggleLocaleSwitcher();
               }
             }, [
-              createElementVNode("span", {
-                class: "cl-inline-block cl-mr-3 flag-svg",
-                style: normalizeStyle({
-                  "background": `url('${location.svgCode}')`
-                })
-              }, null, 4),
-              createElementVNode("span", _hoisted_5$3, toDisplayString(location.nativeName), 1)
+              createVNode(_component_icon, {
+                class: "cl-inline-block cl-mr-3",
+                icon: language.icon
+              }, null, 8, ["icon"]),
+              createElementVNode("span", _hoisted_5$3, toDisplayString(language.nativeName), 1)
             ], 8, _hoisted_4$3);
           }), 128))
         ], 512), [
@@ -3516,30 +3502,25 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var ClUiLanguageSwitcher = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-11d1b124"]]);
 var clUiLogin_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$2 = { class: "cl-bg-secondary-default cl-flex cl-flex-wrap cl-opacity-95 cl-p-10 cl-pb-12 cl-w-full" };
 const _hoisted_2$2 = { class: "cl-pb-8 cl-w-full md:cl-flex-1 md:cl-pb-0" };
-const _hoisted_3$2 = ["src"];
-const _hoisted_4$2 = { class: "cl-content-center cl-flex cl-items-center cl-pb-2 cl-w-auto md:cl-pb-0 md:cl-pr-2 md:cl-w-auto" };
-const _hoisted_5$2 = { class: "cl-pb-2 cl-w-full md:cl-pb-0 md:cl-pr-2 md:cl-w-1/4" };
-const _hoisted_6$2 = { class: "cl-inline cl-relative cl-text-grey-4 cl-w-full" };
-const _hoisted_7$1 = ["data-valid", "placeholder"];
-const _hoisted_8 = { class: "cl-text-grey-3 cl-text-sm" };
-const _hoisted_9 = { class: "cl-flex cl-mt-2" };
-const _hoisted_10 = { class: "cl-align-middle cl-inline-block cl-ml-4" };
-const _hoisted_11 = { class: "cl-flex cl-mt-2" };
-const _hoisted_12 = { class: "cl-align-middle cl-inline-block cl-ml-4" };
-const _hoisted_13 = { class: "cl-pb-2 cl-w-full md:cl-pb-0 md:cl-pr-2 md:cl-w-1/4" };
-const _hoisted_14 = { class: "cl-inline cl-relative cl-text-grey-4 cl-w-full" };
-const _hoisted_15 = ["type", "data-valid", "placeholder"];
-const _hoisted_16 = { class: "cl-w-full md:cl-w-1/4" };
-const _hoisted_17 = { class: "cl-emphasis-danger cl-mt-4 cl-p-4 cl-text-sm cl-w-full" };
+const _hoisted_3$2 = { class: "cl-mt-2 cl-pb-2 cl-text-white cl-w-auto md:cl-pb-0 md:cl-pr-2" };
+const _hoisted_4$2 = { class: "cl-pb-2 cl-w-full md:cl-pb-0 md:cl-pr-2 md:cl-w-1/4" };
+const _hoisted_5$2 = { class: "cl-inline cl-relative cl-text-grey-4 cl-w-full" };
+const _hoisted_6$2 = ["data-valid", "placeholder"];
+const _hoisted_7$1 = { class: "cl-text-grey-3 cl-text-sm" };
+const _hoisted_8 = { class: "cl-flex cl-mt-2" };
+const _hoisted_9 = { class: "cl-align-middle cl-inline-block cl-ml-2" };
+const _hoisted_10 = { class: "cl-flex cl-mt-2" };
+const _hoisted_11 = { class: "cl-align-middle cl-inline-block cl-ml-2" };
+const _hoisted_12 = { class: "cl-pb-2 cl-w-full md:cl-pb-0 md:cl-pl-1 md:cl-pr-2 md:cl-w-1/4" };
+const _hoisted_13 = { class: "cl-inline cl-relative cl-text-grey-4 cl-w-full" };
+const _hoisted_14 = ["type", "data-valid", "placeholder"];
+const _hoisted_15 = { class: "cl-emphasis-danger cl-mt-4 cl-p-4 cl-text-sm cl-w-full" };
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   props: {
     errors: { default: () => [] },
-    supportedLocales: null,
-    logo: null,
     backgroundImage: null,
     loading: { default: false }
   },
@@ -3552,39 +3533,37 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     const username = ref("");
     const password = ref("");
     const passwordFieldType = ref("password");
-    const usernameValid = ref(false);
+    const usernameValid = computed(() => /[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)/gi.test(username.value));
     function login() {
-      emit("login", {
+      const authentication = {
         username: username.value,
         password: password.value
-      });
+      };
+      emit("login", authentication);
     }
     function clearErrors() {
       emit("update:errors", []);
     }
-    watch(username, () => {
-      const emailRegex = /[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)/gi;
-      usernameValid.value = emailRegex.test(username.value);
-    });
     return (_ctx, _cache) => {
+      var _a;
       const _component_icon = resolveComponent("icon");
       return openBlock(), createElementBlock("div", {
-        class: "cl-bg-cover cl-bg-left-bottom cl-h-screen",
+        class: "cl-bg-center cl-bg-cover cl-h-screen md:cl-bg-left-bottom",
         style: normalizeStyle({
           "background-image": `url('${__props.backgroundImage}')`
         })
       }, [
         createElementVNode("form", _hoisted_1$2, [
           createElementVNode("div", _hoisted_2$2, [
-            createElementVNode("img", { src: __props.logo }, null, 8, _hoisted_3$2)
+            renderSlot(_ctx.$slots, "logo", {}, void 0, true)
           ]),
-          createElementVNode("div", _hoisted_4$2, [
-            createVNode(ClUiLanguageSwitcher, { "supported-locales": __props.supportedLocales }, null, 8, ["supported-locales"])
+          createElementVNode("div", _hoisted_3$2, [
+            renderSlot(_ctx.$slots, "language-switcher", {}, void 0, true)
           ]),
-          createElementVNode("div", _hoisted_5$2, [
-            createElementVNode("div", _hoisted_6$2, [
+          createElementVNode("div", _hoisted_4$2, [
+            createElementVNode("div", _hoisted_5$2, [
               createVNode(_component_icon, {
-                class: "cl-absolute cl-left-3 cl-top-0.5",
+                class: "cl-absolute cl-left-3 cl-top-2",
                 icon: "ph:user",
                 size: 18
               }),
@@ -3592,11 +3571,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => username.value = $event),
                 class: "!cl-pb-1 !cl-pl-9 cl-w-full",
                 type: "email",
-                "data-valid": usernameValid.value,
+                "data-valid": unref(usernameValid),
                 placeholder: unref(t)("login.email"),
                 autocomplete: "username",
                 onInput: clearErrors
-              }, null, 40, _hoisted_7$1), [
+              }, null, 40, _hoisted_6$2), [
                 [
                   vModelText,
                   username.value,
@@ -3605,40 +3584,40 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 ]
               ])
             ]),
-            withDirectives(createElementVNode("div", _hoisted_8, [
-              withDirectives(createElementVNode("div", _hoisted_9, [
+            withDirectives(createElementVNode("div", _hoisted_7$1, [
+              withDirectives(createElementVNode("div", _hoisted_8, [
                 createVNode(_component_icon, {
-                  class: "cl-text-primary-default",
+                  class: "cl-mt-1 cl-text-primary-default",
                   icon: "ph:check",
                   size: 16
                 }),
-                createElementVNode("em", _hoisted_10, toDisplayString(unref(t)("login.validEmail")), 1)
+                createElementVNode("em", _hoisted_9, toDisplayString(unref(t)("login.validEmail")), 1)
               ], 512), [
-                [vShow, usernameValid.value]
+                [vShow, unref(usernameValid)]
               ]),
-              withDirectives(createElementVNode("div", _hoisted_11, [
+              withDirectives(createElementVNode("div", _hoisted_10, [
                 createVNode(_component_icon, {
-                  class: "cl-text-danger-default",
+                  class: "cl-mt-1 cl-text-danger-default",
                   icon: "ph:x",
                   size: 16
                 }),
-                createElementVNode("em", _hoisted_12, toDisplayString(unref(t)("login.invalidEmail")), 1)
+                createElementVNode("em", _hoisted_11, toDisplayString(unref(t)("login.invalidEmail")), 1)
               ], 512), [
-                [vShow, !usernameValid.value]
+                [vShow, !unref(usernameValid)]
               ])
             ], 512), [
               [vShow, username.value !== ""]
             ])
           ]),
-          createElementVNode("div", _hoisted_13, [
-            createElementVNode("div", _hoisted_14, [
+          createElementVNode("div", _hoisted_12, [
+            createElementVNode("div", _hoisted_13, [
               createVNode(_component_icon, {
-                class: "cl-absolute cl-left-3 cl-top-0.5",
+                class: "cl-absolute cl-left-3 cl-top-2",
                 icon: "ph:lock",
                 size: 18
               }),
               withDirectives(createVNode(_component_icon, {
-                class: "cl-absolute cl-cursor-pointer cl-right-3 cl-top-0.5",
+                class: "cl-absolute cl-cursor-pointer cl-right-3 cl-top-2",
                 icon: "ph:eye",
                 size: 18,
                 onClick: _cache[1] || (_cache[1] = ($event) => passwordFieldType.value = "text")
@@ -3646,7 +3625,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 [vShow, passwordFieldType.value === "password"]
               ]),
               withDirectives(createVNode(_component_icon, {
-                class: "cl-absolute cl-cursor-pointer cl-right-3 cl-top-0.5",
+                class: "cl-absolute cl-cursor-pointer cl-right-3 cl-top-2",
                 icon: "ph:eye-slash",
                 size: 18,
                 onClick: _cache[2] || (_cache[2] = ($event) => passwordFieldType.value = "password")
@@ -3661,17 +3640,21 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 placeholder: unref(t)("login.password"),
                 autocomplete: "current-password",
                 onInput: clearErrors
-              }, null, 40, _hoisted_15), [
+              }, null, 40, _hoisted_14), [
                 [vModelDynamic, password.value]
               ])
             ])
           ]),
-          createElementVNode("div", _hoisted_16, [
+          createElementVNode("div", {
+            class: normalizeClass(["cl-w-full md:cl-pl-1 md:cl-w-1/4", {
+              "cl-mt-1": __props.loading
+            }])
+          }, [
             createVNode(_sfc_main$k, {
               class: "cl-w-full",
               colour: "blue",
               loading: __props.loading,
-              disabled: !usernameValid.value || password.value === "",
+              disabled: !unref(usernameValid) || password.value === "",
               onClick: withModifiers(login, ["prevent"])
             }, {
               default: withCtx(() => [
@@ -3679,8 +3662,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               ]),
               _: 1
             }, 8, ["loading", "disabled", "onClick"])
-          ]),
-          withDirectives(createElementVNode("span", _hoisted_17, [
+          ], 2),
+          withDirectives(createElementVNode("span", _hoisted_15, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(__props.errors, (error, index) => {
               return openBlock(), createElementBlock("div", {
                 key: index,
@@ -3688,14 +3671,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               }, toDisplayString(error), 1);
             }), 128))
           ], 512), [
-            [vShow, __props.errors.length]
+            [vShow, (_a = __props.errors) == null ? void 0 : _a.length]
           ])
         ])
       ], 4);
     };
   }
 });
-var clUiLogin = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-593b0c43"]]);
+var clUiLogin = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-a300f6dc"]]);
 var clUiNavigation_vue_vue_type_style_index_0_scoped_true_lang = "";
 const _hoisted_1$1 = { class: "cl-flex cl-flex-nowrap cl-h-full cl-max-h-full cl-min-h-full cl-min-w-20 cl-relative cl-self-start cl-w-auto" };
 const _hoisted_2$1 = {
@@ -3935,10 +3918,11 @@ var components = /* @__PURE__ */ Object.freeze({
   clUiCalendar: _sfc_main$j,
   calendarTypes,
   clUiCard: _sfc_main$i,
+  cardSizes,
   clUiComboBox: _sfc_main$d,
   isComboBoxItem,
   isComboBoxCreateRequest,
-  clUiFooter: _sfc_main$c,
+  clUiFooter,
   clUiGrid,
   gridColumnTypes,
   isGridColumn,
@@ -3952,7 +3936,7 @@ var components = /* @__PURE__ */ Object.freeze({
   isFilterResponse,
   clUiHeader,
   clUiHeaderMenu: _sfc_main$4,
-  clUiLanguageSwitcher: ClUiLanguageSwitcher,
+  clUiLanguageSwitcher: _sfc_main$3,
   isLanguageLocaleFormat,
   isLanguageArray,
   clUiLoadingSpinner: ClUiLoadingSpinner,
@@ -3973,4 +3957,4 @@ const install = (app) => {
     app.component(name, component);
   });
 };
-export { DateFormat, FilterOperation, NumberFormat, buttonColours, buttonSizes, calendarTypes, _sfc_main$o as clUiAccordion, _sfc_main$m as clUiApp, _sfc_main$k as clUiButton, _sfc_main$j as clUiCalendar, _sfc_main$i as clUiCard, _sfc_main$d as clUiComboBox, _sfc_main$c as clUiFooter, clUiGrid, clUiHeader, _sfc_main$4 as clUiHeaderMenu, ClUiLanguageSwitcher as clUiLanguageSwitcher, ClUiLoadingSpinner as clUiLoadingSpinner, clUiLogin, _sfc_main$h as clUiModal, clUiNavigation, _sfc_main$n as clUiNotification, clUiSlider, compareByProperty, copy, datetimeFormats, install as default, filterMethodTypes, generateStringId, getParamsByName, gridColumnTypes, i18n, isComboBoxCreateRequest, isComboBoxItem, isFilterRequest, isFilterResponse, isGridColumn, isGridColumnArray, isLanguageArray, isLanguageLocaleFormat, messages, nameOf, numberFormats, setCurrentLocale, setLocaleDateTimeFormats, setLocaleMessages, setLocaleNumberFormats, showNotification, stringExtensionsEnabled, stringFormats, useDebouncer };
+export { DateFormat, FilterOperation, NumberFormat, buttonColours, buttonSizes, calendarTypes, cardSizes, _sfc_main$o as clUiAccordion, _sfc_main$m as clUiApp, _sfc_main$k as clUiButton, _sfc_main$j as clUiCalendar, _sfc_main$i as clUiCard, _sfc_main$d as clUiComboBox, clUiFooter, clUiGrid, clUiHeader, _sfc_main$4 as clUiHeaderMenu, _sfc_main$3 as clUiLanguageSwitcher, ClUiLoadingSpinner as clUiLoadingSpinner, clUiLogin, _sfc_main$h as clUiModal, clUiNavigation, _sfc_main$n as clUiNotification, clUiSlider, compareByProperty, copy, datetimeFormats, install as default, filterMethodTypes, generateStringId, getParamsByName, gridColumnTypes, i18n, isComboBoxCreateRequest, isComboBoxItem, isFilterRequest, isFilterResponse, isGridColumn, isGridColumnArray, isLanguageArray, isLanguageLocaleFormat, messages, nameOf, numberFormats, setCurrentLocale, setLocaleDateTimeFormats, setLocaleMessages, setLocaleNumberFormats, showNotification, stringExtensionsEnabled, stringFormats, useDebouncer };