@alexochihua/exos-library-components 2.25.26 → 2.25.28

package/dist/exos-library-components.common.js

@@ -29755,13 +29755,14 @@ const directiveCallback = (el, binding) => {
 });
 ;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/ui/components/icon/EIcon.vue?vue&type=script&setup=true&lang=js
 
-const EIconvue_type_script_setup_true_lang_js_hoisted_1 = ["width", "height"];
-const EIconvue_type_script_setup_true_lang_js_hoisted_2 = ["id"];
-const EIconvue_type_script_setup_true_lang_js_hoisted_3 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("stop", {
+const EIconvue_type_script_setup_true_lang_js_hoisted_1 = ["iconName"];
+const EIconvue_type_script_setup_true_lang_js_hoisted_2 = ["width", "height"];
+const EIconvue_type_script_setup_true_lang_js_hoisted_3 = ["id"];
+const EIconvue_type_script_setup_true_lang_js_hoisted_4 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("stop", {
   offset: "0%",
   "stop-color": "currentColor"
 }, null, -1);
-const EIconvue_type_script_setup_true_lang_js_hoisted_4 = ["stop-color"];
+const EIconvue_type_script_setup_true_lang_js_hoisted_5 = ["stop-color"];
 
 
 
@@ -29891,10 +29892,11 @@ const EIconvue_type_script_setup_true_lang_js_hoisted_4 = ["stop-color"];
       return !props.isSVG ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("span", {
         key: 0,
         class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(`${iconClass.value} ${props.applyGradient ? '' : props.color}`),
+        iconName: isLocalIcon.value ? '' : iconName.value,
         style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)(iconStyle.value),
         "data-testid": "icon-cy",
         onClick: handleClick
-      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(isLocalIcon.value ? '' : iconName.value), 7)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", {
+      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(isLocalIcon.value ? '' : iconName.value), 15, EIconvue_type_script_setup_true_lang_js_hoisted_1)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", {
         key: 1,
         "data-testid": "icon-cy",
         width: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.unref)(sizeValueComputed),
@@ -29913,12 +29915,12 @@ const EIconvue_type_script_setup_true_lang_js_hoisted_4 = ["stop-color"];
         y1: "0%",
         y2: "0%",
         gradientUnits: "userSpaceOnUse"
-      }, [EIconvue_type_script_setup_true_lang_js_hoisted_3, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("stop", {
+      }, [EIconvue_type_script_setup_true_lang_js_hoisted_4, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("stop", {
         offset: "100%",
         "stop-color": colorGradRight.value
-      }, null, 8, EIconvue_type_script_setup_true_lang_js_hoisted_4)], 8, EIconvue_type_script_setup_true_lang_js_hoisted_2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withDirectives)(((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", {
+      }, null, 8, EIconvue_type_script_setup_true_lang_js_hoisted_5)], 8, EIconvue_type_script_setup_true_lang_js_hoisted_3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withDirectives)(((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("svg", {
         style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)(props.applyGradient ? `fill: url(#grad${(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.unref)(_vm).uid})` : '')
-      }, null, 4)), [[vSaveHTML, props.name]])], 10, EIconvue_type_script_setup_true_lang_js_hoisted_1));
+      }, null, 4)), [[vSaveHTML, props.name]])], 10, EIconvue_type_script_setup_true_lang_js_hoisted_2));
     };
   }
 });
@@ -34931,7 +34933,7 @@ function shared_watchWithFilter(source, cb, options = {}) {
     eventFilter = shared_bypassFilter,
     ...watchOptions
   } = options;
-  return watch(source, shared_createFilterWrapper(eventFilter, cb), watchOptions);
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.watch)(source, shared_createFilterWrapper(eventFilter, cb), watchOptions);
 }
 function watchPausable(source, cb, options = {}) {
   const {
@@ -36233,18 +36235,18 @@ function useActiveElement(options = {}) {
   return activeElement;
 }
 function useMounted() {
-  const isMounted = ref(false);
-  const instance = getCurrentInstance();
+  const isMounted = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(false);
+  const instance = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.getCurrentInstance)();
   if (instance) {
-    onMounted(() => {
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.onMounted)(() => {
       isMounted.value = true;
-    }, isVue2 ? null : instance);
+    }, vue_demi_lib_isVue2 ? null : instance);
   }
   return isMounted;
 }
 function useSupported(callback) {
   const isMounted = useMounted();
-  return computed(() => {
+  return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
     isMounted.value;
     return Boolean(callback());
   });
@@ -38413,13 +38415,13 @@ function useIntersectionObserver(target, callback, options = {}) {
     immediate = true
   } = options;
   const isSupported = useSupported(() => window && "IntersectionObserver" in window);
-  const targets = computed(() => {
-    const _target = toValue(target);
-    return (Array.isArray(_target) ? _target : [_target]).map(unrefElement).filter(notNullish);
+  const targets = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
+    const _target = shared_toValue(target);
+    return (Array.isArray(_target) ? _target : [_target]).map(unrefElement).filter(shared_notNullish);
   });
-  let cleanup = noop;
-  const isActive = ref(immediate);
-  const stopWatch = isSupported.value ? watch(() => [targets.value, unrefElement(root), isActive.value], ([targets2, root2]) => {
+  let cleanup = shared_noop;
+  const isActive = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(immediate);
+  const stopWatch = isSupported.value ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.watch)(() => [targets.value, unrefElement(root), isActive.value], ([targets2, root2]) => {
     cleanup();
     if (!isActive.value) return;
     if (!targets2.length) return;
@@ -38431,18 +38433,18 @@ function useIntersectionObserver(target, callback, options = {}) {
     targets2.forEach(el => el && observer.observe(el));
     cleanup = () => {
       observer.disconnect();
-      cleanup = noop;
+      cleanup = shared_noop;
     };
   }, {
     immediate,
     flush: "post"
-  }) : noop;
+  }) : shared_noop;
   const stop = () => {
     cleanup();
     stopWatch();
     isActive.value = false;
   };
-  tryOnScopeDispose(stop);
+  shared_tryOnScopeDispose(stop);
   return {
     isSupported,
     isActive,
@@ -51611,9 +51613,10 @@ const dayStyleBlock = 'exos-opacity-10 dark:exos-opacity-20 exos-cursor-not-allo
       isInputFocused.value = false;
     };
     const handleDateChange = async val => {
-      await emit('update:modelValue', val.target.value);
-      if (props.modelValue && props.modelValue.length === 10) {
-        let selectedDateObj = DateTime.fromFormat(props.modelValue, props.formatDateInput);
+      const trimmedValue = val.target.value.trim();
+      await emit('update:modelValue', trimmedValue);
+      if (trimmedValue && trimmedValue.length === 10) {
+        let selectedDateObj = DateTime.fromFormat(trimmedValue, props.formatDateInput);
         if (selectedDateObj.isValid) {
           selectedDate.value = selectedDateObj.toFormat(props.formatDate);
           await emit('update:modelValue', selectedDate.value);
@@ -53047,6 +53050,8 @@ const EInputvue_type_script_setup_true_lang_js_hoisted_4 = {
         if (formatted !== props.modelValue) {
           emit('update:modelValue', formatted);
         }
+      } else if (typeof props.modelValue === 'string' && props.modelValue.trim() !== props.modelValue) {
+        emit('update:modelValue', props.modelValue.trim());
       }
     };
 
@@ -54436,6 +54441,9 @@ const EInputMaskvue_type_script_setup_true_lang_js_hoisted_2 = ["id", "value"];
       if (isCleaning.value) {
         return;
       }
+      if (typeof value === 'string') {
+        value = value.trim();
+      }
       if (!isMaskActive.value) {
         realValue.value = value;
         emit('update:modelValue', value);
@@ -55292,11 +55300,33 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_9 = ["data-testid", "onC
 const ESelectvue_type_script_setup_true_lang_js_hoisted_10 = ["onClick"];
 const ESelectvue_type_script_setup_true_lang_js_hoisted_11 = {
   key: 0,
-  class: "e-select__groupContainer__primary__group"
+  class: "e-select__optionItem exos-px-3 exos-py-2 text-body-4"
+};
+const ESelectvue_type_script_setup_true_lang_js_hoisted_12 = {
+  class: "e-select__optionItem exos-px-3 exos-py-2 text-body-4 exos-flex exos-items-center exos-gap-2"
+};
+const ESelectvue_type_script_setup_true_lang_js_hoisted_13 = {
+  key: 3,
+  class: "e-select__optionItem exos-px-3 exos-py-2 text-body-4"
 };
-const ESelectvue_type_script_setup_true_lang_js_hoisted_12 = ["data-testid", "onClick"];
-const ESelectvue_type_script_setup_true_lang_js_hoisted_13 = ["onClick"];
 const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
+  key: 0,
+  class: "e-select__groupContainer__primary__group"
+};
+const ESelectvue_type_script_setup_true_lang_js_hoisted_15 = ["data-testid", "onClick"];
+const ESelectvue_type_script_setup_true_lang_js_hoisted_16 = ["onClick"];
+const ESelectvue_type_script_setup_true_lang_js_hoisted_17 = {
+  key: 0,
+  class: "e-select__optionItem exos-px-3 exos-py-2 text-body-4"
+};
+const _hoisted_18 = {
+  class: "e-select__optionItem exos-px-3 exos-py-2 text-body-4 exos-flex exos-items-center exos-gap-2"
+};
+const _hoisted_19 = {
+  key: 3,
+  class: "e-select__optionItem exos-px-3 exos-py-2 text-body-4"
+};
+const _hoisted_20 = {
   key: 0,
   class: "e-select--error-message exos-animate-slide-down"
 };
@@ -55612,6 +55642,63 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
       type: String,
       default: 'auto',
       validator: value => ['up', 'down', 'auto'].includes(value)
+    },
+    /**
+     * Callback para modo lazy load. Si está definido, el componente actúa como combobox asíncrono con paginación e infinite scroll.
+     * Firma: (params: { query: string, page: number, limit: number }) => Promise<{ options: Array<{value, label}>, total: number }>
+     * @values (params) => fetch('/api/options', { ... }).then(r => r.json())
+     */
+    lazyOptions: {
+      type: Function,
+      default: null
+    },
+    /**
+     * Índice/página en que empieza la paginación (modo lazy).
+     * @values 1 - backend 1-based, 0 - backend 0-based
+     */
+    lazyInitialPage: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Límite de registros por página en modo lazy.
+     * @values 20 - 20 por página, 50 - 50 por página
+     */
+    pageSize: {
+      type: Number,
+      default: 50
+    },
+    /**
+     * Texto mostrado durante la carga de opciones (modo lazy). Se usa en el contenido por defecto del slot lazyLoading (spinner + texto).
+     * @values 'Cargando...' - por defecto
+     */
+    loadingText: {
+      type: String,
+      default: 'Cargando...'
+    },
+    /**
+     * Mensaje cuando no hay resultados (modo lazy). Customizable por prop.
+     * @values 'No se encontraron resultados' - por defecto
+     */
+    lazyEmptyText: {
+      type: String,
+      default: 'No se encontraron resultados'
+    },
+    /**
+     * Mensaje al final de la lista cuando ya no hay más datos (modo lazy).
+     * @values 'Ya se cargaron todos' - por defecto
+     */
+    lazyAllLoadedText: {
+      type: String,
+      default: 'Ya se cargaron todos'
+    },
+    /**
+     * Si true (default), el componente concatena las páginas; si false, el callback devuelve la lista completa y el componente reemplaza.
+     * @values true - API devuelve solo página N, false - API devuelve lista acumulada
+     */
+    lazyAccumulateInComponent: {
+      type: Boolean,
+      default: true
     }
   },
   emits: [
@@ -55706,7 +55793,6 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
     const tempValueInput = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null);
     const auxSuggestions = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)([]);
     const multipleValue = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)([]);
-    const selectContentHeight = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null);
     const inputLabelSelectedW = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null);
     const selectHeight = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null);
     const inputSuggestContainerW = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null);
@@ -55728,11 +55814,26 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
      */
     const clickOutsideIgnore = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)([]);
     let scrollResizeCleanup = null;
+
+    // Lazy load state (solo cuando lazyOptions está definido)
+    const lazyOptionsList = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)([]);
+    const isLoadingLazy = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(false);
+    const page = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(1);
+    const total = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(0);
+    const scrollSentinel = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null);
     const MAX_LEN = {
       time: 8,
       timens: 5
     };
     const useTeleport = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => !!props.dropdownAppendTo);
+    const isLazyMode = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => typeof props.lazyOptions === 'function');
+    const hasMoreData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => isLazyMode.value ? lazyOptionsList.value.length < total.value : false);
+
+    /** Opciones a mostrar en el dropdown: en lazy mode la lista interna; si no, props.options o auxSuggestions */
+    const displayOptionsForDropdown = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
+      if (isLazyMode.value) return lazyOptionsList.value;
+      return props.suggestion ? auxSuggestions.value : props.options;
+    });
     const teleportTarget = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
       if (!props.dropdownAppendTo) return null;
       const el = document.querySelector(props.dropdownAppendTo);
@@ -55887,12 +55988,12 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
       return baseLabelSelectedClasses.concat(dynamicLabelClasses, iconClasses);
     });
     const labelSelectSuggest = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
-      const baseLabelClasses = [roundedClass.value, tempValueInput.value || hasInfo.value ? 'e-select__label--suggested' : 'e-select__label--default', isSelectFocused.value || hasInfo.value ? 'text-caption-2' : textSizeClass.value, props.disabled ? 'exos-cursor-not-allowed' : 'exos-cursor-pointer', slots.icon && !props.iconRight ? 'exos-pl-20' : ''];
+      const baseLabelClasses = [roundedClass.value, tempValueInput.value || hasInfo.value ? 'e-select__label--suggested' : 'e-select__label--default', isSelectFocused.value || hasInfo.value ? 'e-select__label--hasInfo' : textSizeClass.value, props.disabled ? 'exos-cursor-not-allowed' : 'exos-cursor-pointer', slots.icon && !props.iconRight ? 'exos-pl-20' : ''];
       const dynamicLabelClasses = [errorRules.value || messageRule.value ? 'e-select__text--error' : [props.disabled ? 'e-select__text--inactive' : [hasInfo.value ? `${props.labelColor} e-select__text--active` : `${props.labelColorNV} e-select__text--default`]]];
       return baseLabelClasses.concat(dynamicLabelClasses);
     });
     const labelSelectDefault = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
-      const baseLabelClasses = [hasInfo.value ? 'e-select__label--default text-caption-2' : textSizeClass.value, roundedClass.value, props.disabled ? 'exos-cursor-not-allowed' : 'exos-cursor-pointer'];
+      const baseLabelClasses = [hasInfo.value ? 'e-select__label--default e-select__label--hasInfo' : textSizeClass.value, roundedClass.value, props.disabled ? 'exos-cursor-not-allowed' : 'exos-cursor-pointer'];
       const dynamicLabelClasses = [errorRules.value || messageRule.value ? 'e-select__text--error' : [props.disabled ? 'e-select__text--inactive' : [hasInfo.value ? `${props.labelColor} e-select__text--active` : `${props.labelColorNV} e-select__text--default`]]];
       return baseLabelClasses.concat(dynamicLabelClasses);
     });
@@ -55928,10 +56029,11 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
       }
       return auxLen;
     });
+    const optionsForLabelLookup = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => isLazyMode.value ? lazyOptionsList.value : props.options);
     const multipleLabelSelected = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
       if (props.modelValue && Array.isArray(props.modelValue)) {
         let label = props.modelValue.map(item => {
-          let selectedOption = props.options.find(val => props.emitObject ? val.value === item.value : val.value === item);
+          let selectedOption = optionsForLabelLookup.value.find(val => props.emitObject ? val.value === item.value : val.value === item);
           return selectedOption ? selectedOption.label : '';
         }).filter(Boolean).join(', ');
         return label || props.modelValue;
@@ -55942,19 +56044,18 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
     const hasInfo = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
       const currentValue = props.modelValue;
       const validVal = currentValue !== null && currentValue !== undefined && currentValue !== '';
+      const opts = optionsForLabelLookup.value;
       switch (true) {
         case props.multiple:
-          // Si emitObject es verdadero, verificamos si alguno de los objetos en modelValue existe en options
           if (props.emitObject && Array.isArray(currentValue)) {
-            return currentValue?.some(item => props.options.some(opt => opt.value === item.value));
+            return currentValue?.some(item => opts.some(opt => opt.value === item.value));
           }
-          // Si emitObject es falso, simplemente verificamos si hay elementos en modelValue
           return currentValue?.length >= 1;
         case props.suggestion:
           return !!tempValueInput.value || validVal;
         default:
           if (props.emitObject) {
-            return currentValue !== null && props.options.some(opt => opt.value === currentValue.value);
+            return currentValue !== null && opts.some(opt => opt.value === currentValue.value);
           }
           return validVal;
       }
@@ -55962,9 +56063,7 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
     const labelSelected = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
       let label = null;
       let currentValue = props.emitObject ? props.modelValue?.value : props.modelValue;
-      label = props.options.find(val => val.value === currentValue && typeof val.value === typeof currentValue);
-
-      // Devuelve explícitamente el label o el valor currentValue si el label no es null/undefined
+      label = optionsForLabelLookup.value.find(val => val.value === currentValue && typeof val.value === typeof currentValue);
       return label?.label !== undefined ? label.label : currentValue;
     });
     const finalRules = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
@@ -55977,6 +56076,7 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
     const showCleanBtn = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
       return hasInfo.value && props.showClean && !props.disabled || messageRule.value && props.showClean && !props.disabled || tempValueInput.value;
     });
+    const showLoadingIndicator = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => props.loading || isLazyMode.value && isLoadingLazy.value);
 
     // Lifecycle hooks
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.onMounted)(() => {
@@ -55987,6 +56087,10 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
         register(instance);
       }
       setOptions();
+      if (isLazyMode.value) {
+        page.value = props.lazyInitialPage;
+        fetchOptions(false);
+      }
       if (props.suggestion && props.modelValue && tempValueInput.value == null) {
         let opt = props.options.find(opt => {
           return props.emitObject ? opt?.value === props.modelValue?.value : opt?.value === props.modelValue;
@@ -56269,11 +56373,75 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
     const fetchSuggestions = () => {
       selectedoption.value = false;
       calculateIconSectionWidth();
+      if (isLazyMode.value) {
+        emit('searchValue', tempValueInput.value);
+        isSelectOpened.value = true;
+        return;
+      }
       inputRegexValidation(tempValueInput.value);
       filterOptionsSuggest(tempValueInput.value);
       emit('searchValue', tempValueInput.value);
       isSelectOpened.value = auxSuggestions.value.length > 0;
     };
+
+    /**
+     * Carga opciones en modo lazy (lazyOptions). isLoadMore false = reemplazar lista y resetear página; true = concatenar o reemplazar según lazyAccumulateInComponent.
+     * queryOverride: cuando se pasa (p. ej. desde el watch de tempValueInput), se usa como query en lugar de tempValueInput.value.
+     */
+    const fetchOptions = async (isLoadMore = false, queryOverride = undefined) => {
+      if (!isLazyMode.value || isLoadingLazy.value) return;
+      const fromOverride = queryOverride !== undefined ? String(queryOverride ?? '').trim() : '';
+      const fromDom = (getTriggerEl()?.value ?? '').trim();
+      const query = queryOverride !== undefined ? fromOverride || fromDom : (tempValueInput.value ?? '').trim();
+      if (!isLoadMore) {
+        page.value = props.lazyInitialPage;
+      } else {
+        page.value = page.value + 1;
+      }
+      isLoadingLazy.value = true;
+      try {
+        const response = await props.lazyOptions({
+          query,
+          page: page.value,
+          limit: props.pageSize
+        });
+        const opts = Array.isArray(response?.options) ? response.options : [];
+        const newTotal = typeof response?.total === 'number' ? response.total : 0;
+        total.value = newTotal;
+        if (isLoadMore && props.lazyAccumulateInComponent) {
+          lazyOptionsList.value = [...lazyOptionsList.value, ...opts];
+        } else {
+          lazyOptionsList.value = opts;
+        }
+      } catch (err) {
+        if (false) {}
+        lazyOptionsList.value = [];
+        total.value = 0;
+      } finally {
+        isLoadingLazy.value = false;
+      }
+    };
+
+    // Debounce del query en modo lazy (400 ms). En tests usar cy.clock() + cy.tick(450) para que el callback se ejecute.
+    watchDebounced(tempValueInput, newVal => {
+      if (isLazyMode.value) {
+        const q = (newVal ?? '').trim() || (getTriggerEl()?.value ?? '').trim();
+        fetchOptions(false, q);
+        emit('searchValue', q);
+      }
+    }, {
+      debounce: 400
+    });
+
+    // Infinite scroll: cuando el sentinela entra en vista, cargar más (solo en modo lazy)
+    useIntersectionObserver(scrollSentinel, entries => {
+      if (!entries[0]?.isIntersecting) return;
+      if (isLazyMode.value && hasMoreData.value && !isLoadingLazy.value && props.lazyOptions) {
+        fetchOptions(true);
+      }
+    }, {
+      root: contentSelect
+    });
     const labelSelectedColor = value => {
       if (hasInfo.value) {
         const isSelected = props.multiple ? props.emitObject ? props.modelValue.some(item => item.value === value) // Verifica si algún elemento del modelo tiene el valor proporcionado
@@ -56282,7 +56450,7 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
         : props.modelValue === value; // Compara el valor del modelo con el valor proporcionado
 
         // Devuelve el color de fondo si la etiqueta está seleccionada; de lo contrario, null
-        return isSelected ? ['text-body-3', roundedClass.value, props.selectedOptionBgColor + ' e-select__optionItem--selected'] : 'text-body-4';
+        return isSelected ? ['e-select__itemText--selected', roundedClass.value, props.selectedOptionBgColor + ' e-select__optionItem--selected'] : 'e-select__textSize--def';
       }
     };
     const getFormattedOption = option => {
@@ -56323,6 +56491,13 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
       if (props.suggestion && props.disabled) {
         return;
       }
+      if (isLazyMode.value) {
+        lazyOptionsList.value = [];
+        page.value = props.lazyInitialPage;
+        total.value = 0;
+        tempValueInput.value = null;
+        fetchOptions(false);
+      }
       reset();
       calculateWidthLabelSelected();
       multipleValue.value = [];
@@ -56347,7 +56522,8 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
     // Muestra u oculta la ventana con el listado de opciones al seleccionar
     const toggleDropdown = () => {
       if (!props.disabled) {
-        if (props.suggestion && auxSuggestions.value.length == 0) {
+        const listEmpty = props.suggestion && (isLazyMode.value ? lazyOptionsList.value.length === 0 && !isLoadingLazy.value : auxSuggestions.value.length === 0);
+        if (listEmpty) {
           isSelectOpened.value = false;
         } else {
           isSelectOpened.value = !isSelectOpened.value;
@@ -56424,6 +56600,7 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
       setOptions();
     };
     const setOptions = () => {
+      if (isLazyMode.value) return;
       if (props.suggestion && tempValueInput.value && props.keepFilterText) {
         // Si hay texto de filtro y keepFilterText está activo, mantener el filtrado
         filterOptionsSuggest(tempValueInput.value);
@@ -56690,7 +56867,9 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
         onFocus: onInputFocus,
         onInput: fetchSuggestions,
         onClick: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(toggleDropdown, ["prevent"])
-      }, null, 46, ESelectvue_type_script_setup_true_lang_js_hoisted_2), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vModelText, tempValueInput.value]]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
+      }, null, 46, ESelectvue_type_script_setup_true_lang_js_hoisted_2), [[external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.vModelText, tempValueInput.value, void 0, {
+        trim: true
+      }]]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
         ref: `selectLabelSelectedSuggest-${(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.unref)(instance).uid}`,
         class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(inputLabelSelectedClass.value)
       }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(getFormattedOptionSelected(labelSelected.value)), 3), showTooltip.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_e_tooltip, {
@@ -56744,7 +56923,7 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
         onClick: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(clean, ["stop", "prevent"])
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "iconClose", {}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_e_icon, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.guardReactiveProps)(closeIconClass.value)), null, 16)])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), __props.iconRight && (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.unref)(slots).icon ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "icon", {
         key: 1
-      }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), __props.loading ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_e_icon, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+      }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), showLoadingIndicator.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(_component_e_icon, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
         key: 2
       }, loadingIconClass.value)), null, 16)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
         key: 3,
@@ -56752,7 +56931,9 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
         onClick: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.withModifiers)(toggleDropdown, ["prevent"])
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "arrow", {
         isSelectOpened: isSelectOpened.value
-      }, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_e_icon, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.guardReactiveProps)(arrowIconClass.value)), null, 16)])], 2))], 2), isSelectOpened.value && useTeleport.value && teleportTarget.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Teleport, {
+      }, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_e_icon, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.mergeProps)({
+        "data-icon": "select-arrow"
+      }, arrowIconClass.value), null, 16)])], 2))], 2), isSelectOpened.value && useTeleport.value && teleportTarget.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Teleport, {
         key: 2,
         to: teleportTarget.value
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", {
@@ -56760,7 +56941,7 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
         ref: contentSelect,
         class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(optionsContainer.value),
         style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)(dropdownPositionFixed.value)
-      }, [hasGroups.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, {
+      }, [hasGroups.value && !isLazyMode.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, {
         key: 0
       }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)(__props.suggestion ? auxSuggestions.value : groupedOptions.value, (group, index) => {
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
@@ -56781,20 +56962,30 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
         }), 128))], 2)]);
       }), 128)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, {
         key: 1
-      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)(__props.suggestion ? auxSuggestions.value : __props.options, option => {
+      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)(displayOptionsForDropdown.value, option => {
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("a", {
           key: option.value,
           "data-testid": "select-option",
           class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)([optionsItem.value, labelSelectedColor(option.value)]),
           onClick: $event => selectOption(option)
         }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(getFormattedOption(option)), 11, ESelectvue_type_script_setup_true_lang_js_hoisted_10);
-      }), 128))], 6)], 8, ["to"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), isSelectOpened.value && !useTeleport.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+      }), 128)), isLazyMode.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, {
+        key: 2
+      }, [displayOptionsForDropdown.value.length === 0 && !isLoadingLazy.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("p", ESelectvue_type_script_setup_true_lang_js_hoisted_11, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(__props.lazyEmptyText), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), isLoadingLazy.value ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "lazyLoading", {
+        key: 1
+      }, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ESelectvue_type_script_setup_true_lang_js_hoisted_12, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_e_icon, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.guardReactiveProps)(loadingIconClass.value)), null, 16), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(__props.loadingText), 1)])]) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), hasMoreData.value && !isLoadingLazy.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+        key: 2,
+        ref_key: "scrollSentinel",
+        ref: scrollSentinel,
+        class: "exos-h-2 exos-w-full",
+        "data-testid": "select-lazy-sentinel"
+      }, null, 512)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !hasMoreData.value && displayOptionsForDropdown.value.length > 0 ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("p", ESelectvue_type_script_setup_true_lang_js_hoisted_13, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(__props.lazyAllLoadedText), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 64)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 6)], 8, ["to"])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), isSelectOpened.value && !useTeleport.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
         key: 3,
         ref_key: "contentSelect",
         ref: contentSelect,
         class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(optionsContainer.value),
         style: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeStyle)(calculateDropPositionY())
-      }, [hasGroups.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, {
+      }, [hasGroups.value && !isLazyMode.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, {
         key: 0
       }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)(__props.suggestion ? auxSuggestions.value : groupedOptions.value, (group, index) => {
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
@@ -56805,24 +56996,34 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
           class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)(["e-select__groupContainer__secondary", {
             'exos-flex-col': group?.group
           }])
-        }, [group?.group ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("p", ESelectvue_type_script_setup_true_lang_js_hoisted_11, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(group.group), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)(group?.options || [group], option => {
+        }, [group?.group ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("p", ESelectvue_type_script_setup_true_lang_js_hoisted_14, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(group.group), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)(group?.options || [group], option => {
           return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("a", {
             key: option.value,
             "data-testid": group?.group ? 'select-option--grouped' : 'select-option--ungrouped',
             class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)([group?.group ? optionsItem.value : optionsItemUngrouped.value, labelSelectedColor(option.value)]),
             onClick: $event => selectOption(option)
-          }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(getFormattedOption(option)), 11, ESelectvue_type_script_setup_true_lang_js_hoisted_12);
+          }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(getFormattedOption(option)), 11, ESelectvue_type_script_setup_true_lang_js_hoisted_15);
         }), 128))], 2)]);
       }), 128)) : ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, {
         key: 1
-      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)(__props.suggestion ? auxSuggestions.value : __props.options, option => {
+      }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderList)(displayOptionsForDropdown.value, option => {
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("a", {
           key: option.value,
           "data-testid": "select-option",
           class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeClass)([optionsItem.value, labelSelectedColor(option.value)]),
           onClick: $event => selectOption(option)
-        }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(getFormattedOption(option)), 11, ESelectvue_type_script_setup_true_lang_js_hoisted_13);
-      }), 128))], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]), !!messageRule.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ESelectvue_type_script_setup_true_lang_js_hoisted_14, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(messageRule.value), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
+        }, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(getFormattedOption(option)), 11, ESelectvue_type_script_setup_true_lang_js_hoisted_16);
+      }), 128)), isLazyMode.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.Fragment, {
+        key: 2
+      }, [displayOptionsForDropdown.value.length === 0 && !isLoadingLazy.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("p", ESelectvue_type_script_setup_true_lang_js_hoisted_17, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(__props.lazyEmptyText), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), isLoadingLazy.value ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "lazyLoading", {
+        key: 1
+      }, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", _hoisted_18, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_e_icon, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.normalizeProps)((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.guardReactiveProps)(loadingIconClass.value)), null, 16), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("span", null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(__props.loadingText), 1)])]) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), hasMoreData.value && !isLoadingLazy.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", {
+        key: 2,
+        ref_key: "scrollSentinel",
+        ref: scrollSentinel,
+        class: "exos-h-2 exos-w-full",
+        "data-testid": "select-lazy-sentinel"
+      }, null, 512)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), !hasMoreData.value && displayOptionsForDropdown.value.length > 0 ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("p", _hoisted_19, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(__props.lazyAllLoadedText), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 64)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 6)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)]), !!messageRule.value ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", _hoisted_20, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(messageRule.value), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true)], 2);
     };
   }
 });
@@ -56902,14 +57103,14 @@ const ETablevue_type_script_setup_true_lang_js_hoisted_16 = {
 const ETablevue_type_script_setup_true_lang_js_hoisted_17 = {
   class: "e-table__pagination__paginationTable__container"
 };
-const _hoisted_18 = {
+const ETablevue_type_script_setup_true_lang_js_hoisted_18 = {
   class: "e-table__pagination__select__container"
 };
-const _hoisted_19 = {
+const ETablevue_type_script_setup_true_lang_js_hoisted_19 = {
   key: 2,
   class: "e-table__totalRecords__container"
 };
-const _hoisted_20 = {
+const ETablevue_type_script_setup_true_lang_js_hoisted_20 = {
   class: "e-table__pagination__btn__right"
 };
 
@@ -57973,7 +58174,7 @@ const _hoisted_20 = {
         "onUpdate:modelValue": [_cache[1] || (_cache[1] = $event => currentPage.value = $event), _cache[2] || (_cache[2] = $event => handleRequest(true))],
         ref_key: "paginationRef",
         ref: paginationRef
-      }, null, 8, ["numPagesTotal", "hideBoundaryPages", "modelValue"])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", _hoisted_18, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_e_select, {
+      }, null, 8, ["numPagesTotal", "hideBoundaryPages", "modelValue"])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ETablevue_type_script_setup_true_lang_js_hoisted_18, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createVNode)(_component_e_select, {
         outline: false,
         showClean: false,
         shadowSize: "none",
@@ -57981,7 +58182,7 @@ const _hoisted_20 = {
         modelValue: numRowsByPage.value,
         "onUpdate:modelValue": [_cache[3] || (_cache[3] = $event => numRowsByPage.value = $event), handleReload],
         options: __props.rowsByPage
-      }, null, 8, ["bgColor", "modelValue", "options"])])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), __props.totalRecords && __props.totalRowsRightAligned ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", _hoisted_19, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(totalRowsRangeLabel.value), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", _hoisted_20, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "btn-br")])], 2)])], 64);
+      }, null, 8, ["bgColor", "modelValue", "options"])])])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), __props.totalRecords && __props.totalRowsRightAligned ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementBlock)("div", ETablevue_type_script_setup_true_lang_js_hoisted_19, (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.toDisplayString)(totalRowsRangeLabel.value), 1)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createCommentVNode)("", true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.createElementVNode)("div", ETablevue_type_script_setup_true_lang_js_hoisted_20, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.renderSlot)(_ctx.$slots, "btn-br")])], 2)])], 64);
     };
   }
 });