@alexochihua/exos-library-components 2.25.25 → 2.25.27

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

@@ -34931,7 +34931,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 +36233,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 +38413,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 +38431,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,
@@ -54105,8 +54105,22 @@ const EInputMaskvue_type_script_setup_true_lang_js_hoisted_2 = ["id", "value"];
       let digitIndex = 0;
       const hiddenChar = props.hiddenChar || '*';
 
-      // Seguir el patrón exactamente, insertando separadores según corresponda
-      for (let i = 0; i < pattern.length; i++) {
+      // Índice del primer placeholder (# o hiddenChar) en el patrón
+      let firstPlaceholderIndex = -1;
+      for (let k = 0; k < pattern.length; k++) {
+        if (pattern[k] === '#' || pattern[k] === hiddenChar) {
+          firstPlaceholderIndex = k;
+          break;
+        }
+      }
+
+      // Prefijo literal completo antes del primer placeholder (ej. "PROD-" en "PROD-##-#####")
+      if (cleanValue.length > 0 && firstPlaceholderIndex > 0) {
+        displayValue += pattern.substring(0, firstPlaceholderIndex);
+      }
+
+      // Seguir el patrón exactamente desde el primer placeholder, insertando separadores según corresponda
+      for (let i = firstPlaceholderIndex >= 0 ? firstPlaceholderIndex : 0; i < pattern.length; i++) {
         const patternChar = pattern[i];
         if (patternChar === '#') {
           if (digitIndex < cleanValue.length) {
@@ -54121,8 +54135,7 @@ const EInputMaskvue_type_script_setup_true_lang_js_hoisted_2 = ["id", "value"];
           digitIndex++;
         } else {
           // Es un separador - agregarlo solo si hay dígitos para mostrar
-          // o si es el separador inicial y hay al menos un dígito
-          if (digitIndex > 0 || i === 0 && cleanValue.length > 0) {
+          if (digitIndex > 0) {
             displayValue += patternChar;
           }
         }
@@ -55279,16 +55292,49 @@ 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"
 };
 
 
+const DROPDOWN_GAP_PX = 8;
+/** Gap entre el dropdown y el trigger cuando abre hacia arriba, para que el label quede siempre visible. */
+const DROPDOWN_LABEL_GAP_PX = 8;
+const DROPDOWN_MAX_HEIGHT_VH = 0.4;
+
+/**
+ * Encuentra el primer ancestro con overflow-y auto/scroll (scroll-parent).
+ * En modo Teleport el dropdown se posiciona respecto al viewport; sin Teleport,
+ * usar el scroll-parent evita que el menú empuje el scroll del contenedor.
+ */
+
 /* harmony default export */ var ESelectvue_type_script_setup_true_lang_js = ({
   __name: 'ESelect',
   props: {
@@ -55576,7 +55622,9 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
      */
     dropdownAppendTo: {
       type: String,
-      default: null
+      default: () => {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.inject)('$exosSelectConfig')?.dropdownAppendTo ?? null;
+      }
     },
     /**
      * Dirección de apertura del dropdown de opciones.
@@ -55586,6 +55634,63 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
       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: [
@@ -55702,11 +55807,26 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
      */
     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);
@@ -55902,10 +56022,11 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
       }
       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;
@@ -55916,19 +56037,18 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
     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;
       }
@@ -55936,9 +56056,7 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
     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)(() => {
@@ -55951,6 +56069,7 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
     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)(() => {
@@ -55961,6 +56080,10 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
         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;
@@ -56019,42 +56142,89 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
         }
       });
     };
+    const getScrollParent = element => {
+      if (!element) return null;
+      let parent = element.parentElement;
+      while (parent) {
+        const style = window.getComputedStyle(parent);
+        const overflowY = style.overflowY;
+        if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') {
+          return parent;
+        }
+        parent = parent.parentElement;
+      }
+      return null;
+    };
+
+    /**
+     * Rect del viewport (para medir espacio arriba/abajo cuando se usa Teleport).
+     */
+    const getViewportRect = () => ({
+      top: 0,
+      bottom: window.innerHeight
+    });
+
+    /**
+     * Decide si el dropdown debe abrir hacia arriba según openDirection y espacio disponible.
+     * En auto: compara topSpace y bottomSpace con la altura del dropdown (no umbral fijo).
+     * @param {{ referenceEl: HTMLElement, dropdownHeight: number, useViewport: boolean }} opts
+     * @returns {boolean} true = abrir arriba, false = abrir abajo
+     */
+    const shouldOpenAbove = ({
+      referenceEl,
+      dropdownHeight,
+      useViewport
+    }) => {
+      if (props.openDirection === 'up') return true;
+      if (props.openDirection === 'down') return false;
+      const rect = referenceEl.getBoundingClientRect();
+      const containerRect = useViewport ? getViewportRect() : (() => {
+        const scrollParent = getScrollParent(mainSelectComponent.value);
+        return scrollParent ? scrollParent.getBoundingClientRect() : getViewportRect();
+      })();
+      const topSpace = rect.top - containerRect.top;
+      const bottomSpace = containerRect.bottom - rect.bottom;
+      const needHeight = dropdownHeight + DROPDOWN_GAP_PX;
+      if (bottomSpace >= needHeight) return false;
+      if (topSpace >= needHeight) return true;
+      return topSpace >= bottomSpace;
+    };
     const calculateDropPositionY = () => {
       if (isSelectOpened.value) {
         const refComp = instance.refs[`mainSelectComp-${instance.uid}`];
-        const openAbove = props.openDirection === 'up' || props.openDirection === 'auto' && calculateAvailableSpaceY(refComp);
+        const dropdownHeight = contentSelect.value?.offsetHeight ?? window.innerHeight * DROPDOWN_MAX_HEIGHT_VH;
+        const openAbove = refComp ? shouldOpenAbove({
+          referenceEl: refComp,
+          dropdownHeight,
+          useViewport: useTeleport.value
+        }) : false;
         if (openAbove) {
           showPosition.value = false;
-          // Gap solo cuando hay valor seleccionado para que el label flotante no quede tapado
           return {
             top: 'auto',
             left: '0',
-            bottom: hasInfo.value ? 'calc(100% + 0.8rem)' : '100%'
-          };
-        } else {
-          showPosition.value = true;
-          return {
-            left: '0',
-            top: selectHeight.value + 'px' // Despliega hacia abajo
+            bottom: `calc(100% + ${DROPDOWN_LABEL_GAP_PX}px)`
           };
         }
+        showPosition.value = true;
+        return {
+          left: '0',
+          top: selectHeight.value + 'px'
+        };
       }
-
-      // Otro manejo si es necesario cuando el dropdown no está abierto
       return {};
     };
-    const calculateAvailableSpaceY = referenceComp => {
-      const rect = referenceComp.getBoundingClientRect();
-      const bottomSpace = window.innerHeight - rect.bottom;
-      return bottomSpace < 200 ? true : false; // arriba : abajo
-    };
     const getTriggerEl = () => mainSelectComponent.value?.querySelector('[data-testid="select-default"], [data-testid="select-suggest"]');
     const updateDropdownPositionFixed = () => {
       const triggerEl = getTriggerEl();
       if (!triggerEl) return;
       const rect = triggerEl.getBoundingClientRect();
-      const dropdownHeight = contentSelect.value?.offsetHeight ?? window.innerHeight * 0.4;
-      const openAbove = props.openDirection === 'up' || props.openDirection === 'auto' && calculateAvailableSpaceY(triggerEl);
+      const dropdownHeight = contentSelect.value?.offsetHeight ?? window.innerHeight * DROPDOWN_MAX_HEIGHT_VH;
+      const openAbove = shouldOpenAbove({
+        referenceEl: triggerEl,
+        dropdownHeight,
+        useViewport: true
+      });
       const style = {
         position: 'fixed',
         left: rect.left + 'px',
@@ -56064,8 +56234,7 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
         zIndex: 9999
       };
       if (openAbove) {
-        const gapLabel = hasInfo.value ? 8 : 0;
-        style.top = Math.max(0, rect.top - dropdownHeight - gapLabel) + 'px';
+        style.top = Math.max(0, rect.top - dropdownHeight - DROPDOWN_LABEL_GAP_PX) + 'px';
       } else {
         style.top = rect.bottom + 'px';
       }
@@ -56197,11 +56366,75 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
     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
@@ -56251,6 +56484,13 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
       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 = [];
@@ -56275,7 +56515,8 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
     // 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;
@@ -56352,6 +56593,7 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
       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);
@@ -56421,7 +56663,7 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
 
     // Watch effects
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.watch)(() => props.modelValue, newVal => {
-      if (newVal !== null && newVal !== undefined) {
+      if (newVal !== null && newVal !== undefined && newVal !== '') {
         validate();
         (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.nextTick)(() => {
           calculateWidthLabelSelected();
@@ -56672,7 +56914,7 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
         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,
@@ -56688,7 +56930,7 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
         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", {
@@ -56709,20 +56951,30 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
         }), 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", {
@@ -56733,24 +56985,34 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
           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);
     };
   }
 });
@@ -56830,14 +57092,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"
 };
 
@@ -57901,7 +58163,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",
@@ -57909,7 +58171,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);
     };
   }
 });
@@ -62553,7 +62815,15 @@ const ExosLibraryComponents = {
         }
       }
     }
+    let defaultSelectConfig = {
+      dropdownAppendTo: null
+    };
+    let selectConfig = defaultSelectConfig;
+    if (options.select?.dropdownAppendTo) {
+      selectConfig.dropdownAppendTo = options.select.dropdownAppendTo;
+    }
     app.provide('$exosDialogConfig', dialogConfig);
+    app.provide('$exosSelectConfig', selectConfig);
     app.provide('$loading', loading);
     app.provide('$notify', notify);
     app.provide('$showMessage', message);